:root {
    --primary:#ffffff;
    --primary-dark:#000000;
    --accent:#3b82f6;
    --bg:#ffffff;
    --bg-soft:#f8f9fa;
    --bg-light:#ffffff;
    --text:#000000;
    --muted:#4b5563;
    --border:#e5e7eb;
}
*,
*::before,
*::after {
    box-sizing:border-box;
}
html {
    scroll-behavior:smooth;
}
body {
    margin:0;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:#ffffff;
    color:#000000;
    line-height:1.6;
}
a {
    color:inherit;
    text-decoration:none;
}
.site {
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:1.25rem;
    background:#ffffff;
}
.page {
    width:100%;
    padding:1.5rem 1.5rem 2.5rem;
}
h1, h2, h3 {
    margin:0;
    font-weight:700;
    color:#000000;
}
p {
    margin:0;
}
.hero {
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:3rem;
    padding:3rem 2.5rem;
    border-radius:1.5rem;
    background:#ffffff;
    color:#000000;
    position:relative;
    border:3px solid #3b82f6;
    box-shadow:0 10px 40px rgba(59, 130, 246, 0.15);
}
.hero-left {
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}
.hero-badge {
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding:.6rem 1.3rem;
    border-radius:999px;
    border:2px solid #3b82f6;
    background:#ffffff;
    font-size:.9rem;
    color:#000000;
    width:fit-content;
    box-shadow:0 0 20px rgba(59, 130, 246, 0.2);
    font-weight:500;
}
.badge-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#3b82f6;
    color:#ffffff;
    font-size:0.7rem;
    box-shadow:0 0 15px rgba(59, 130, 246, 0.5);
}
.hero h1 {
    font-size:3.5rem;
    line-height:1.1;
    margin:0;
    color:#000000;
    font-weight:900;
    letter-spacing:-0.02em;
}
.blue-text {
    color:#3b82f6;
    display:block;
}
.hero-sub {
    color:#4b5563;
    font-size:1.05rem;
    line-height:1.7;
    margin:0;
    max-width:600px;
}
.hero-pills {
    display:flex;
    flex-wrap:wrap;
    gap:.7rem;
}
.pill {
    padding:.5rem 1.1rem;
    border-radius:999px;
    background:#f8f9fa;
    border:2px solid #e5e7eb;
    font-size:.85rem;
    color:#000000;
    font-weight:500;
}
.hero-cta {
    display:flex;
    gap:1rem;
    align-items:center;
    margin-top:0.5rem;
}
.hero-btn-primary {
    padding:1rem 2.5rem;
    background:#3b82f6;
    color:#ffffff;
    border:none;
    border-radius:.5rem;
    font-size:1.05rem;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(59, 130, 246, 0.3);
    transition:all .3s ease;
}
.hero-btn-primary:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 32px rgba(59, 130, 246, 0.4);
    background:#2563eb;
}
.hero-btn-ghost {
    padding:.95rem 2rem;
    border:2px solid #000000;
    background:transparent;
    color:#000000;
    border-radius:.5rem;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
    transition:all .3s ease;
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
}
.hero-btn-ghost:hover {
    background:#f8f9fa;
}
.trust-text {
    font-size:.9rem;
    color:#6b7280;
    margin:0.5rem 0 0;
}
.hero-right {
    background:#ffffff;
    border-radius:1.5rem;
    border:2px solid #e5e7eb;
    padding:2rem 2.5rem;
    /* box-shadow:0 4px 20px rgba(0, 0, 0, 0.08); */
}
.dispatch-card {
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}
.dispatch-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:1rem;
    padding-bottom:1.5rem;
    border-bottom:1px solid #e5e7eb;
}
.dispatch-header h3 {
    font-size:1.3rem;
    font-weight:700;
    margin:0;
    color:#000000;
}
.dispatch-info {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:0.3rem;
    font-size:0.9rem;
    color:#4b5563;
    text-align:right;
}
.dispatch-metrics {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.25rem;
}
.dispatch-metric-card {
    /* background:#f8f9fa; */
    border:2px solid #e5e7eb;
    border-radius:1rem;
    padding:1.5rem;
}
.metric-title {
    font-size:0.85rem;
    color:#4b5563;
    margin-bottom:0.75rem;
    font-weight:500;
}
.metric-big-value {
    font-size:2rem;
    font-weight:900;
    color:#000000;
    margin-bottom:0.5rem;
    line-height:1;
}
.metric-subtitle {
    font-size:0.8rem;
    color:#3b82f6;
    font-weight:500;
}
.dispatch-timeline {
    display:flex;
    flex-direction:column;
    gap:0.85rem;
    padding:1.5rem 0;
    border-top:1px dashed #e5e7eb;
}
.timeline-item {
    display:flex;
    align-items:flex-start;
    gap:0.75rem;
    font-size:0.9rem;
    color:#4b5563;
}
.timeline-bullet {
    color:#3b82f6;
    font-size:0.5rem;
    margin-top:0.4rem;
    flex-shrink:0;
}
.weighbridge-btn {
    padding:1.1rem;
    background:#ffffff;
    color:#3b82f6;
    border:2px solid #3b82f6;
    border-radius:0.75rem;
    font-size:0.95rem;
    font-weight:700;
    letter-spacing:0.08em;
    cursor:pointer;
    box-shadow:0 0 20px rgba(59, 130, 246, 0.15);
    transition:all .3s ease;
    text-transform:uppercase;
}
.weighbridge-btn:hover {
    background:#3b82f6;
    color:#ffffff;
    box-shadow:0 0 30px rgba(59, 130, 246, 0.3);
}
.metric {
    padding:.75rem .85rem;
    border-radius:.8rem;
    background:#f8f9fa;
    border:2px solid #e5e7eb;
}
.timeline {
    margin-top:.7rem;
    padding-top:.7rem;
    border-top:1px dashed #e5e7eb;
    font-size:.75rem;
    color:#4b5563;
}
section {
    margin-top:2.4rem;
}
.section-heading {
    font-size:2rem;
    margin-bottom:.75rem;
    font-weight:800;
    color:#000000;
    text-align:center;
    letter-spacing:-.03em;
}
.section-sub {
    font-size:1.05rem;
    color:#4b5563;
    max-width:45rem;
    margin:0 auto 2rem;
    text-align:center;
    line-height:1.7;
    font-weight:400;
}
.feature-grid {
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:3rem;
    margin-top:2rem;
}
.feature-card {
    background:#ffffff;
    border-radius:1.5rem;
    padding:3rem;
    /* border:1px solid #e5e7eb; */
    overflow:hidden;
    transition:all .4s ease;
    /* box-shadow:0 4px 20px rgba(0, 0, 0, 0.04); */
    display:flex;
    gap:3rem;
    align-items:center;
    justify-content:space-between;
}
.feature-card:nth-child(even) {
    flex-direction:row-reverse;
}
.feature-card:hover {
    transform:translateY(-6px);
    box-shadow:0 12px 40px rgba(59, 130, 246, 0.15);
    border-color:#3b82f6;
}
.feature-image {
    width:380px;
    min-width:580px;
    height:280px;
    object-fit:cover;
    border-radius:1rem;
    transition:transform .4s ease;
    box-shadow:0 8px 24px rgba(0, 0, 0, 0.1);
    border:3px solid #f8f9fa;
}
.feature-card:hover .feature-image {
    transform:scale(1.03) rotate(1deg);
    box-shadow:0 12px 32px rgba(59, 130, 246, 0.2);
}
.feature-content {
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.feature-tag {
    display:inline-block;
    font-size:.7rem;
    color:#ffffff;
    background:linear-gradient(135deg, #3b82f6, #2563eb);
    text-transform:uppercase;
    letter-spacing:.12em;
    margin-bottom:.8rem;
    font-weight:700;
    padding:.4rem .9rem;
    border-radius:999px;
    box-shadow:0 4px 12px rgba(59, 130, 246, 0.3);
    width:fit-content;
}
.feature-card h3 {
    font-size:1.65rem;
    margin-bottom:.9rem;
    font-weight:800;
    line-height:1.25;
    color:#000000;
    letter-spacing:-.02em;
}
.feature-card p {
    font-size:1.05rem;
    color:#4b5563;
    margin-bottom:1.2rem;
    line-height:1.8;
    font-weight:400;
}
.feature-card ul {
    list-style:none;
    margin:0;
    padding:0;
    font-size:.95rem;
    color:#4b5563;
    line-height:1.8;
}
.feature-card li {
    margin-bottom:.7rem;
    font-weight:400;
    padding-left:1.5rem;
    position:relative;
}
.feature-card li::before {
    content:"✓";
    color:#3b82f6;
    position:absolute;
    left:0;
    font-weight:bold;
    font-size:1rem;
    background:#dbeafe;
    width:20px;
    height:20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.75rem;
}
.features-section {
padding:5rem 2rem;
/* background:#f8fafc; */
}
.inventory-section {
background:#ffffff;
}
.features-header {
text-align:center;
max-width:900px;
margin:0 auto 4rem;
}
.modern-features-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
gap:2.5rem;
max-width:1400px;
margin:0 auto;
}
.modern-feature-card {
background:#ffffff;
border-radius:1.5rem;
overflow:hidden;
/* box-shadow:0 10px 30px rgba(0,0,0,0.08); */
transition:all .4s ease;
border:2px solid #e5e7eb;
}
.modern-feature-card:hover {
transform:translateY(-10px);
box-shadow:0 20px 50px rgba(59,130,246,0.15);
border-color:#3b82f6;
}
.feature-image-wrapper {
position:relative;
width:100%;
height:250px;
overflow:hidden;
}
.feature-image-wrapper img {
width:100%;
height:100%;
object-fit:cover;
transition:transform .4s ease;
}
.modern-feature-card:hover .feature-image-wrapper img {
transform:scale(1.1);
}
.feature-badge {
position:absolute;
top:1.5rem;
left:1.5rem;
padding:.6rem 1.5rem;
border-radius:999px;
font-size:.85rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.05em;
box-shadow:0 4px 15px rgba(0,0,0,0.2);
}
.weighbridge-badge {
background:linear-gradient(135deg,#3b82f6,#2563eb);
color:#ffffff;
}
.barrier-badge {
background:linear-gradient(135deg,#10b981,#059669);
color:#ffffff;
}
.theft-badge {
background:linear-gradient(135deg,#ef4444,#dc2626);
color:#ffffff;
}
.crusher-badge {
background:linear-gradient(135deg,#f59e0b,#d97706);
color:#ffffff;
}
.rmc-badge {
background:linear-gradient(135deg,#8b5cf6,#7c3aed);
color:#ffffff;
}
.brick-badge {
background:linear-gradient(135deg,#ec4899,#db2777);
color:#ffffff;
}
.feature-body {
padding:2rem 2.5rem 2.5rem;
}
.feature-body h3 {
font-size:1.5rem;
font-weight:800;
color:#000000;
margin:0 0 1rem;
line-height:1.3;
}
.feature-body p {
color:#4b5563;
font-size:.95rem;
line-height:1.7;
margin:0 0 1.5rem;
}
.feature-points {
display:flex;
flex-direction:column;
gap:.85rem;
}
.feature-point {
display:flex;
align-items:flex-start;
gap:.75rem;
}
.point-icon {
flex-shrink:0;
width:24px;
height:24px;
background:#3b82f6;
color:#ffffff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:.85rem;
font-weight:bold;
}
.feature-point span:last-child {
color:#4b5563;
font-size:.9rem;
line-height:1.6;
flex:1;
}

.feature-card li strong {
    color:#000000;
    font-weight:700;
}
#why-generic-fails {
    background:#ffffff;
    padding:5rem 2rem;
    margin:3rem 0;
    border-radius:20px;
    position:relative;
    overflow:hidden;
    border:2px solid #e5e7eb;
}
.why-fails-wrapper {
    max-width:1400px;
    margin:0 auto;
    position:relative;
    z-index:1;
}
.why-fails-header {
    text-align:center;
    margin-bottom:4rem;
}
.section-badge {
    display:inline-block;
    padding:0.5rem 1.5rem;
    background:#dbeafe;
    color:#3b82f6;
    border:1px solid #3b82f6;
    border-radius:999px;
    font-size:0.85rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.1em;
    margin-bottom:1.5rem;
}
.why-fails-header .section-heading {
    color:#000000;
    font-size:3rem;
    margin-bottom:1rem;
}
.why-fails-header .section-sub {
    color:#4b5563;
    font-size:1.1rem;
    max-width:800px;
    margin:0 auto;
}
.why-fails-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
    gap:2rem;
}
.why-fail-card {
    background:#ffffff;
    border-radius:1.5rem;
    padding:2.5rem;
    border:2px solid #e5e7eb;
    position:relative;
    transition:all 0.4s ease;
    overflow:hidden;
    box-shadow:0 4px 20px rgba(0, 0, 0, 0.04);
}
.why-fail-card::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg, #3b82f6, #60a5fa);
    opacity:0;
    transition:opacity 0.4s ease;
}
.why-fail-card:hover {
    transform:translateY(-10px);
    border-color:#3b82f6;
    box-shadow:0 20px 60px rgba(59, 130, 246, 0.2);
}
.why-fail-card:hover::before {
    opacity:1;
}
.card-number {
    position:absolute;
    top:1.5rem;
    right:1.5rem;
    font-size:4rem;
    font-weight:900;
    color:rgba(59, 130, 246, 0.1);
    line-height:1;
}
.card-icon-wrapper {
    width:80px;
    height:80px;
    background:linear-gradient(135deg, #3b82f6, #60a5fa);
    border-radius:1.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:2rem;
    box-shadow:0 10px 30px rgba(59, 130, 246, 0.3);
}
.card-icon {
    width:40px;
    height:40px;
    color:#ffffff;
}
.card-content h3 {
    color:#000000;
    font-size:1.5rem;
    font-weight:800;
    margin-bottom:1rem;
}
.card-content p {
    color:#4b5563;
    font-size:0.95rem;
    line-height:1.7;
    margin-bottom:1.5rem;
}
.risk-list {
    display:flex;
    flex-direction:column;
    gap:0.75rem;
}
.risk-item {
    display:flex;
    align-items:flex-start;
    gap:0.75rem;
    color:#4b5563;
    font-size:0.9rem;
    line-height:1.5;
}
.risk-icon {
    flex-shrink:0;
    width:24px;
    height:24px;
    background:#dbeafe;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.85rem;
    color:#3b82f6;
}
.card-label {
    position:absolute;
    bottom:1.5rem;
    right:1.5rem;
    padding:0.4rem 1rem;
    border-radius:999px;
    font-size:0.75rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.05em;
}
.risk-label {
    background:#dbeafe;
    color:#3b82f6;
    border:1px solid #3b82f6;
}
.security-label {
    background:#fef3c7;
    color:#f59e0b;
    border:1px solid #f59e0b;
}
.loss-label {
    background:#dbeafe;
    color:#3b82f6;
    border:1px solid #3b82f6;
}
#comparison {
    /* background:#f8fafc; */
    padding:4rem 2rem;
    margin:3rem 0;
    border-radius:20px;
}
.comparison-wrapper {
    max-width:1200px;
    margin:0 auto;
}
.comparison-intro {
    margin-bottom:3rem;
    display:flex;
    justify-content:center;
}
.intro-content {
    background:#ffffff;
    padding:2.5rem 3.5rem;
    border-radius:1.5rem;
    text-align:center;
    /* max-width:700px; */
    /* box-shadow:0 10px 40px rgba(0, 0, 0, 0.1); */
    border:2px solid #e5e7eb;
}
.comparison-intro h2 {
    color:#000000;
    font-size:2.5rem;
    font-weight:900;
    margin:0 0 0.75rem 0;
    letter-spacing:0.02em;
}
.comparison-subtitle {
    color:#000000;
    font-size:1.1rem;
    margin:0 0 1rem 0;
    font-weight:500;
}
.blue-highlight {
    color:#3b82f6;
    font-weight:700;
}
.comparison-description {
    color:#4b5563;
    font-size:0.9rem;
    line-height:1.6;
    margin:0;
}
.pricing-table {
    /* background:#ffffff; */
    /* border-radius:1.5rem; */
    padding:0;
    /* box-shadow:0 20px 60px rgba(0, 0, 0, 0.1); */
    overflow:hidden;
    /* border:2px solid #e5e7eb; */
}
.table-header-row {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:0;
}
.header-cell {
    padding:2rem 1.5rem;
    text-align:center;
}
.feature-header-cell {
    /* background:#f8f9fa; */
    border-right:1px solid #e5e7eb;
    display:flex;
    align-items:center;
    justify-content:center;
}
.feature-header-cell h3 {
    color:#000000;
    font-size:0.95rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.05em;
    margin:0;
}
.manual-header-cell {
    /* background:#f8f9fa; */
    border-right:1px solid #e5e7eb;
}
.sazs-header-cell {
    /* background:#f8f9fa; */
}
.manual-title {
    color:#f59e0b;
    font-size:0.95rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.05em;
    margin:0 0 0.75rem 0;
}
.sazs-title {
    color:#3b82f6;
    font-size:0.95rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.05em;
    margin:0 0 0.75rem 0;
}
.header-badge {
    font-size:1.8rem;
    font-weight:900;
    margin:0.5rem 0;
}
.limited-badge {
    color:#000000;
}
.complete-badge {
    color:#000000;
}
.header-desc {
    color:#4b5563;
    font-size:0.8rem;
    line-height:1.5;
    margin:0.75rem 0 0;
}
.table-body {
    background:#ffffff;
}
.comparison-row {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    border-top:1px solid #e5e7eb;
}
.feature-name {
    padding:1.25rem 1.5rem;
    color:#000000;
    font-size:0.9rem;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:0.75rem;
    border-right:1px solid #e5e7eb;
}
.feature-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:#3b82f6;
    flex-shrink:0;
}
.comparison-cell {
    padding:1.25rem 1.5rem;
    display:flex;
    align-items:center;
    gap:0.75rem;
    font-size:0.875rem;
    color:#000000;
}
.bad-cell {
    border-right:1px solid #e5e7eb;
    background:#fef3c7;
}
.good-cell {
    background:#dcfce7;
}
.cross-icon {
    color:#ef4444;
    font-size:1.25rem;
    font-weight:bold;
    flex-shrink:0;
}
.check-icon {
    color:#10b981;
    font-size:1.25rem;
    font-weight:bold;
    flex-shrink:0;
}
.table-footer-row {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    /* background:#f8f9fa; */
    padding:2rem 1.5rem;
    gap:0;
}
.footer-spacer {
    /* border-right:1px solid #e5e7eb; */
}
.footer-btn-cell {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 1rem;
}
.table-btn {
    padding:0.75rem 2rem;
    border:none;
    border-radius:999px;
    font-size:0.85rem;
    font-weight:700;
    text-transform:uppercase;
    cursor:pointer;
    transition:all 0.3s ease;
    letter-spacing:0.05em;
}
.view-btn {
    background:#f59e0b;
    color:#ffffff;
    box-shadow:0 4px 15px rgba(245, 158, 11, 0.3);
}
.view-btn:hover {
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(245, 158, 11, 0.4);
}
.get-started-btn {
    background:#3b82f6;
    color:#ffffff;
    box-shadow:0 4px 15px rgba(59, 130, 246, 0.3);
}
.get-started-btn:hover {
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(59, 130, 246, 0.4);
}

#checklist {
    padding:4rem 2rem;
    /* background:#f8fafc; */
}
.checklist-intro {
    text-align:center;
    margin-bottom:3rem;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}
.checklist-container {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2rem;
    max-width:1400px;
    margin:0 auto;
}
.checklist-left {
    display:flex;
}
.checklist-card {
    background:#ffffff;
    border-radius:1.5rem;
    overflow:hidden;
    box-shadow:0 10px 40px rgba(0, 0, 0, 0.1);
    width:100%;
    border:2px solid #e5e7eb;
}
.checklist-image {
    position:relative;
    width:100%;
    height:250px;
    overflow:hidden;
}
.checklist-image img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.checklist-title-overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(59, 130, 246, 0.5));
    display:flex;
    align-items:center;
    justify-content:center;
}
.checklist-title-overlay h3 {
    color:#ffffff;
    font-size:2rem;
    font-weight:800;
    margin:0;
    text-align:center;
    padding:0 2rem;
}
.checklist-items {
    padding:2rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.checklist-item {
    display:flex;
    align-items:flex-start;
    gap:1rem;
    font-size:0.95rem;
    color:#4b5563;
    line-height:1.6;
}
.check-icon-blue {
    color:#3b82f6;
    font-size:1.25rem;
    font-weight:bold;
    flex-shrink:0;
}
.checklist-right {
    display:flex;
}
.demo-form-card {
    background:#ffffff;
    border:2px solid #3b82f6;
    border-radius:1.5rem;
    padding:2.5rem;
    color:#000000;
    box-shadow:0 10px 40px rgba(59, 130, 246, 0.15);
    width:100%;
}
.demo-form-card h3 {
    font-size:2rem;
    font-weight:800;
    margin:0 0 1rem 0;
    color:#000000;
}
.demo-form-card > p {
    color:#4b5563;
    font-size:0.95rem;
    line-height:1.6;
    margin:0 0 2rem 0;
}
.demo-form {
    display:flex;
    flex-direction:column;
    gap:1rem;
    margin-bottom:1.5rem;
}
.form-input {
    padding:1rem 1.25rem;
    border-radius:0.75rem;
    border:2px solid #e5e7eb;
    background:#ffffff;
    color:#000000;
    font-size:0.95rem;
    transition:all .3s ease;
}
.form-input::placeholder {
    color:#9ca3af;
}
.form-input:focus {
    outline:none;
    border-color:#3b82f6;
    box-shadow:0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-submit-btn {
    padding:1.25rem;
    background:linear-gradient(135deg, #3b82f6, #2563eb);
    color:#ffffff;
    border:none;
    border-radius:0.75rem;
    font-size:1rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.05em;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(59, 130, 246, 0.3);
    transition:all .3s ease;
}
.form-submit-btn:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 32px rgba(59, 130, 246, 0.4);
}
.form-seo-text {
    font-size:0.75rem;
    color:#6b7280;
    line-height:1.5;
    margin:0;
}
.cta-side {
    padding:1.5rem;
}
.check-card ul {
    list-style:none;
    margin:0;
    padding:0;
}
.check-card li {
    margin-bottom:.6rem;
    display:flex;
    align-items:flex-start;
    gap:.5rem;
    font-size:.95rem;
    color:#4b5563;
    line-height:1.6;
}
.check-card li span {
    color:#3b82f6;
    margin-top:.05rem;
    font-weight:bold;
    font-size:1.1rem;
    flex-shrink:0;
}
footer {
    font-size:.75rem;
    color:#6b7280;
    padding:2rem 0 1rem;
    text-align:center;
}
@media (max-width:1024px) and (min-width:768px) {
    .page {
        padding:1.5rem;
    }
    .hero h1 {
        font-size:2.2rem;
    }
    .hero-pills {
        gap:0.5rem;
    }
    .feature-card {
        padding:2rem;
    }
    .feature-image {
        width:320px;
        height:240px;
    }
    .feature-content h3 {
        font-size:1.4rem;
    }
    .modern-features-grid {
        grid-template-columns:repeat(2, 1fr);
        gap:2rem;
    }
    .feature-image-wrapper {
        height:220px;
    }
    .feature-badge {
        padding:.5rem 1.2rem;
        font-size:.8rem;
    }
    .feature-body {
        padding:1.75rem 2rem 2rem;
    }
    .feature-body h3 {
        font-size:1.3rem;
    }
    .section-heading {
        font-size:2rem;
    }
    #why-generic-fails {
        padding:4rem 2rem;
    }
    .why-fails-header .section-heading {
        font-size:2.5rem;
    }
    .why-fails-grid {
        grid-template-columns:repeat(2, 1fr);
        gap:1.5rem;
    }
    .why-fail-card:last-child {
        grid-column:1 / -1;
        max-width:600px;
        margin:0 auto;
    }
    .intro-content {
        padding:2.5rem 3rem;
    }
    .comparison-intro h2 {
        font-size:2.5rem;
    }
    .pricing-table {
        padding:2.5rem 2rem;
    }
}
@media (max-width:767px) {
    .page {
        padding:1rem;
    }
    .hero {
        grid-template-columns:1fr;
        gap:2rem;
        padding:2rem 1.5rem;
    }
    .hero h1 {
        font-size:2rem;
    }
    .blue-text {
        margin-top:0.25rem;
    }
    .hero-pills {
        gap:.5rem;
    }
    .pill {
        font-size:.75rem;
        padding:.35rem .85rem;
    }
    .hero-cta {
        flex-direction:column;
        gap:1rem;
    }
    .hero-btn-primary,
    .hero-btn-ghost {
        width:100%;
        text-align:center;
        justify-content:center;
    }
    .dispatch-metrics {
        grid-template-columns:1fr;
    }
    .metric-big-value {
        font-size:1.5rem;
    }
    .checklist-container {
        grid-template-columns:1fr;
        gap:2rem;
    }
    .checklist-image {
        height:200px;
    }
    .checklist-title-overlay h3 {
        font-size:1.5rem;
    }
    .checklist-items {
        padding:1.5rem;
    }
    .checklist-item {
        font-size:0.9rem;
    }
    .demo-form-card {
        padding:2rem 1.5rem;
    }
    .demo-form-card h3 {
        font-size:1.5rem;
    }
    .demo-form-card > p {
        font-size:0.9rem;
    }
    .modern-features-grid {
        grid-template-columns:1fr;
        gap:1.5rem;
    }
    .feature-image-wrapper {
        height:200px;
    }
    .feature-badge {
        top:1rem;
        left:1rem;
        padding:.4rem 1rem;
        font-size:.75rem;
    }
    .feature-body {
        padding:1.5rem;
    }
    .feature-body h3 {
        font-size:1.2rem;
    }
    .feature-body p {
        font-size:.85rem;
    }
    .feature-point {
        gap:.6rem;
    }
    .point-icon {
        width:20px;
        height:20px;
        font-size:.75rem;
    }
    .feature-point span:last-child {
        font-size:.85rem;
    }
    .feature-card,
    .feature-card:nth-child(even) {
        flex-direction:column;
        padding:1.5rem;
        text-align:center;
    }
    .feature-image {
        width:100%;
        min-width:100%;
        height:200px;
    }
    .feature-content {
        text-align:center;
    }
    .feature-tag {
        margin:0 auto 0.8rem;
    }
    .section-heading {
        font-size:1.5rem;
        line-height:1.3;
    }
    .section-sub {
        font-size:.9rem;
        line-height:1.6;
    }
    #why-generic-fails {
        padding:3rem 1rem;
        margin:2rem 0;
    }
    .section-badge {
        font-size:0.75rem;
        padding:0.4rem 1.2rem;
    }
    .why-fails-header {
        margin-bottom:3rem;
    }
    .why-fails-header .section-heading {
        font-size:1.8rem;
        line-height:1.3;
    }
    .why-fails-header .section-sub {
        font-size:0.9rem;
        line-height:1.6;
    }
    .why-fails-grid {
        grid-template-columns:1fr;
        gap:1.5rem;
    }
    .why-fail-card {
        padding:2rem 1.5rem;
    }
    .card-number {
        font-size:2.5rem;
        top:1rem;
        right:1rem;
    }
    .card-icon-wrapper {
        width:60px;
        height:60px;
        margin-bottom:1.5rem;
    }
    .card-icon {
        width:30px;
        height:30px;
    }
    .card-content h3 {
        font-size:1.25rem;
    }
    .card-content p {
        font-size:0.9rem;
        line-height:1.6;
    }
    .risk-item {
        font-size:0.85rem;
    }
    #comparison {
        padding:2rem 1rem;
    }
    .intro-content {
        padding:2rem 1.5rem;
        max-width:100%;
    }
    .comparison-intro h2 {
        font-size:1.8rem;
    }
    .comparison-subtitle {
        font-size:0.95rem;
    }
    .comparison-description {
        font-size:0.85rem;
    }
    .pricing-table {
        border-radius:1rem;
    }
    .table-header-row {
        grid-template-columns:1fr;
        gap:0;
    }
    .header-cell {
        padding:1.5rem 1rem;
        border-right:none !important;
        border-bottom:1px solid #e5e7eb;
    }
    .feature-header-cell {
        display:none;
    }
    .manual-title,
    .sazs-title {
        font-size:0.85rem;
    }
    .header-badge {
        font-size:1.5rem;
    }
    .header-desc {
        font-size:0.75rem;
    }
    .comparison-row {
        grid-template-columns:1fr;
    }
    .feature-name {
        border-right:none;
        border-bottom:1px solid #e5e7eb;
        padding:1rem;
        font-size:0.85rem;
        background:#f8f9fa;
    }
    .comparison-cell {
        padding:1rem;
        border-right:none;
        font-size:0.8rem;
    }
    .bad-cell {
        border-left:3px solid #f59e0b;
        border-bottom:1px solid #e5e7eb;
    }
    .good-cell {
        border-left:3px solid #10b981;
        border-bottom:1px solid #e5e7eb;
    }
    .table-footer-row {
        grid-template-columns:1fr;
        gap:1rem;
        padding:1.5rem 1rem;
    }
    .footer-spacer {
        display:none;
    }
    .footer-btn-cell {
        padding:0;
    }
    .table-btn {
        width:100%;
        padding:1rem 2rem;
        font-size:0.8rem;
    }
}
@media (max-width:480px) {
    .hero h1 {
        font-size:1.5rem;
    }
    .hero-pills {
        justify-content:center;
    }
    .section-heading {
        font-size:1.3rem;
    }
    .section-sub {
        font-size:0.85rem;
    }
    .why-fails-header .section-heading {
        font-size:1.5rem;
    }
    .why-fail-card {
        padding:1.5rem 1rem;
    }
    .card-number {
        font-size:2rem;
    }
    .card-icon-wrapper {
        width:50px;
        height:50px;
    }
    .card-icon {
        width:25px;
        height:25px;
    }
    .card-content h3 {
        font-size:1.1rem;
    }
    .card-content p {
        font-size:0.85rem;
    }
    .comparison-intro h2 {
        font-size:1.5rem;
    }
    .intro-content {
        padding:1.5rem 1rem;
    }
    .pricing-table {
        padding:1rem 0.75rem;
    }
}
@media (min-width:768px) {
    .hero {
        flex-direction:row;
        align-items:center;
        gap:2rem;
    }
    .hero > div:first-child,
    .hero > .hero-right {
        flex:1;
    }
    .checklist {
        flex-direction:row;
    }
    .check-card {
        flex:2;
    }
    .cta-side {
        flex:1.2;
    }
}
@media (min-width:1024px) {
    .page {
        padding-inline:2rem;
    }
    .hero {
        padding-inline:2rem;
        padding-top:2.75rem;
    }
}