:root{--dark:#020617;--navy:#0f172a;--indigo:#4f46e5;--cyan:#06b6d4;--light:#f8fafc;--slate4:#94a3b8;--slate3:#cbd5e1;--font-sans:"Inter",ui-sans-serif,system-ui,sans-serif;--font-display:"Sora",ui-sans-serif,system-ui,sans-serif;--max-w:80rem;--px:1.5rem}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--dark);color:var(--light);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}img{display:block;height:auto;max-width:100%}a{color:inherit;text-decoration:none}button,input,select,textarea{font-family:inherit;font-size:inherit}h1,h2,h3,h4,h5,h6{font-family:var(--font-display)}::-moz-selection{background:var(--indigo);color:#fff}::selection{background:var(--indigo);color:#fff}.container{margin-inline:auto;max-width:var(--max-w);padding-inline:var(--px)}.section-py{padding-block:6rem}.section-py-l{padding-block:8rem}.fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}.fade-in.delay-1{transition-delay:.1s}.fade-in.delay-2{transition-delay:.2s}.fade-in.delay-3{transition-delay:.3s}.fade-in.delay-4{transition-delay:.4s}.fade-in.delay-5{transition-delay:.5s}.fade-in.is-visible{opacity:1;transform:translateY(0)}.gradient-text{background:linear-gradient(to right,var(--cyan),var(--indigo));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.site-nav{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(2,6,23,.8);border-bottom:1px solid hsla(0,0%,100%,.08);left:0;position:fixed;right:0;top:0;z-index:100}.nav-inner{height:5rem;justify-content:space-between;margin-inline:auto;max-width:var(--max-w);padding-inline:var(--px)}.nav-inner,.nav-logo{align-items:center;display:flex}.nav-logo{font-family:var(--font-display);font-size:1.125rem;font-weight:700;gap:.75rem;letter-spacing:-.02em}.nav-links{align-items:center;color:var(--slate3);display:flex;font-size:.875rem;font-weight:500;gap:2rem;list-style:none;margin:0;padding:0}.nav-links li a{color:var(--slate3);transition:color .2s}.nav-links li a:hover{color:var(--light)}.nav-cta{background:hsla(0,0%,100%,.08);border-radius:9999px;color:var(--light)!important;padding:.625rem 1.25rem;transition:background .2s!important}.nav-cta:hover{background:hsla(0,0%,100%,.15)!important}.nav-toggle{background:none;border:none;cursor:pointer;display:none;flex-direction:column;gap:5px;padding:.5rem}.nav-toggle span{background:var(--light);border-radius:2px;display:block;height:2px;transition:transform .3s,opacity .3s;width:24px}.nav-toggle.open span:first-child{transform:translateY(7px) rotate(45deg)}.nav-toggle.open span:nth-child(2){opacity:0}.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.btn-primary{align-items:center;background:var(--indigo);border:none;border-radius:9999px;color:#fff;cursor:pointer;display:inline-flex;font-size:1rem;font-weight:500;gap:.5rem;padding:1rem 2rem;transition:background .2s}.btn-primary:hover{background:rgba(79,70,229,.85)}.btn-primary svg{height:1rem;width:1rem}.btn-ghost{align-items:center;background:hsla(0,0%,100%,.04);border:1px solid hsla(0,0%,100%,.1);border-radius:9999px;color:#fff;cursor:pointer;display:inline-flex;font-size:1rem;font-weight:500;gap:.5rem;padding:1rem 2rem;transition:background .2s}.btn-ghost:hover{background:hsla(0,0%,100%,.09)}.hero{align-items:center;display:flex;min-height:100vh;overflow:hidden;padding-top:5rem;position:relative}.hero-bg{inset:0;position:absolute;z-index:0}.hero-bg img{height:100%;-o-object-fit:cover;object-fit:cover;opacity:.4;width:100%}.hero-bg-overlay{background:linear-gradient(180deg,rgba(2,6,23,.55),rgba(2,6,23,.8),#020617);inset:0;position:absolute}.hero-path-wrap{inset:0;opacity:.18;pointer-events:none;position:absolute;z-index:0}.hero-path-wrap svg{height:100%;width:100%}.hero-path{animation:drawPath 3s ease-in-out .4s forwards;stroke-dasharray:2200;stroke-dashoffset:2200}@keyframes drawPath{to{stroke-dashoffset:0}}.hero-content{max-width:48rem;position:relative;width:100%;z-index:10}.hero-badge{align-items:center;background:rgba(79,70,229,.18);border:1px solid rgba(79,70,229,.3);border-radius:9999px;color:var(--cyan);display:inline-flex;font-size:.875rem;font-weight:500;gap:.5rem;margin-bottom:1.5rem;padding:.25rem .875rem}.hero-badge-dot{animation:blink 2s ease-in-out infinite;background:var(--cyan);border-radius:50%;height:.5rem;width:.5rem}@keyframes blink{0%,to{opacity:1}50%{opacity:.35}}.hero-heading{font-size:clamp(2.5rem,7vw,4.5rem);font-weight:700;line-height:1.1;margin-bottom:1.5rem}.hero-sub{color:var(--slate3);font-size:clamp(1rem,2.5vw,1.25rem);line-height:1.75;margin-bottom:2.5rem;max-width:42rem}.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem}.challenges{background:var(--navy)}.section-heading{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;margin-bottom:4rem;text-align:center}.cards-3{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}.challenge-card{background:rgba(2,6,23,.5);border:1px solid hsla(0,0%,100%,.05);border-radius:1rem;padding:2rem}.challenge-icon{align-items:center;border-radius:.75rem;display:flex;height:3rem;justify-content:center;margin-bottom:1.5rem;width:3rem}.challenge-icon.red{background:rgba(239,68,68,.1);color:#f87171}.challenge-icon.orange{background:rgba(249,115,22,.1);color:#fb923c}.challenge-icon.amber{background:rgba(245,158,11,.1);color:#fbbf24}.challenge-icon svg{height:1.5rem;width:1.5rem}.challenge-card h3{font-size:1.25rem;font-weight:600;margin-bottom:1rem}.challenge-card p{color:var(--slate4);line-height:1.7}.solutions{padding-block:8rem}.solutions-heading-group{margin-bottom:5rem}.solutions-heading-group h2{font-size:clamp(2rem,5vw,3rem);font-weight:700;margin-bottom:1rem}.solutions-heading-group p{color:var(--slate4);font-size:1.25rem;max-width:36rem}.solution-row{align-items:center;display:grid;gap:3rem;grid-template-columns:1fr 1fr;margin-bottom:6rem}.solution-row:last-child{margin-bottom:0}.solution-row.reverse .solution-text{order:2}.solution-row.reverse .solution-img{order:1}.solution-text h3{font-size:1.875rem;font-weight:700;margin-bottom:1.5rem}.solution-text p{color:var(--slate3);font-size:1.125rem;line-height:1.75;margin-bottom:2rem}.solution-text ul{display:flex;flex-direction:column;gap:1rem;list-style:none}.solution-text li{align-items:center;color:var(--slate3);display:flex;gap:.75rem}.solution-text li svg{color:var(--cyan);flex-shrink:0;height:1.25rem;width:1.25rem}.solution-img{aspect-ratio:4/3;border:1px solid hsla(0,0%,100%,.08);border-radius:1rem;overflow:hidden;position:relative}.solution-img img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.solution-img-overlay{background:linear-gradient(0deg,rgba(2,6,23,.8),transparent);inset:0;position:absolute}.hud-badge{align-items:center;backdrop-filter:blur(4px);background:rgba(239,68,68,.9);border-radius:.25rem;color:#fff;display:flex;font-size:.75rem;font-weight:700;gap:.5rem;padding:.375rem .75rem;position:absolute;right:1rem;top:1rem}.hud-badge-dot{animation:blink 2s infinite;background:#fff;border-radius:50%;height:.5rem;width:.5rem}.hud-target{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.5);border-radius:.5rem;height:7rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:7rem}.hud-target span:after,.hud-target span:before,.hud-target:after,.hud-target:before{border-color:#ef4444;border-style:solid;content:"";height:1rem;position:absolute;width:1rem}.hud-target:before{border-width:2px 0 0 2px;left:-2px;top:-2px}.hud-target:after{border-width:2px 2px 0 0;right:-2px;top:-2px}.hud-target span:before{border-width:0 0 2px 2px;bottom:-2px;left:-2px}.hud-target span:after{border-width:0 2px 2px 0;bottom:-2px;right:-2px}.hud-info{bottom:1rem;color:rgba(6,182,212,.8);font-family:monospace;font-size:.625rem;left:1rem;line-height:1.6;position:absolute}.how{background:var(--navy);border-bottom:1px solid hsla(0,0%,100%,.05);border-top:1px solid hsla(0,0%,100%,.05)}.steps-grid{display:grid;gap:2rem;grid-template-columns:repeat(3,1fr);position:relative}.steps-grid:before{background:linear-gradient(90deg,transparent,rgba(79,70,229,.4),transparent);content:"";height:2px;left:15%;position:absolute;right:15%;top:3rem}.step{position:relative;text-align:center;z-index:1}.step-circle{align-items:center;background:var(--dark);border:1px solid hsla(0,0%,100%,.08);border-radius:50%;box-shadow:0 0 30px rgba(79,70,229,.12);display:flex;height:6rem;justify-content:center;margin-inline:auto;margin-bottom:1.5rem;width:6rem}.step-number{background:linear-gradient(to bottom right,var(--cyan),var(--indigo));-webkit-background-clip:text;font-family:var(--font-display);font-size:1.875rem;font-weight:700;-webkit-text-fill-color:transparent;background-clip:text}.step h3{font-size:1.5rem;font-weight:600;margin-bottom:1rem}.step p{color:var(--slate4);line-height:1.7;margin-inline:auto;max-width:18rem}.advantages{padding-block:8rem}.grid-6{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.advantage-card{background:hsla(0,0%,100%,.015);border:1px solid hsla(0,0%,100%,.05);border-radius:1rem;padding:2rem;transition:border-color .2s}.advantage-card:hover{border-color:rgba(79,70,229,.3)}.advantage-card svg{color:var(--cyan);height:2rem;margin-bottom:1.5rem;width:2rem}.advantage-card h3{font-size:1.125rem;font-weight:600;margin-bottom:.75rem}.advantage-card p{color:var(--slate4);font-size:.875rem;line-height:1.7}.platform{background:var(--navy)}.platform h2{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;margin-bottom:4rem}.platform-grid{display:grid;gap:2rem;grid-template-columns:1fr 1fr}.platform-card{background:var(--dark);border:1px solid hsla(0,0%,100%,.08);border-radius:1.5rem;overflow:hidden;padding:2.5rem;position:relative}.platform-card-icon{opacity:.08;padding:2rem;position:absolute;right:0;top:0;transition:opacity .3s}.platform-card:hover .platform-card-icon{opacity:.16}.platform-card-icon svg{height:8rem;width:8rem}.platform-card h3{font-size:1.5rem;font-weight:700;margin-bottom:1rem;position:relative;z-index:1}.platform-card p{color:var(--slate4);line-height:1.7;position:relative;z-index:1}.platform-card-icon.indigo{color:var(--indigo)}.platform-card-icon.cyan{color:var(--cyan)}.use-cases{padding-block:6rem}.use-cases h2{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;margin-bottom:3rem}.use-cases-track{display:flex;gap:1.5rem;overflow-x:auto;padding-inline:var(--px);padding-bottom:1.5rem;scroll-snap-type:x mandatory;scrollbar-width:none}.use-cases-track::-webkit-scrollbar{display:none}.use-case-card{border-radius:1rem;flex-shrink:0;height:300px;overflow:hidden;position:relative;scroll-snap-align:center;width:clamp(280px,85vw,400px)}.use-case-card img{height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .7s ease;width:100%}.use-case-card:hover img{transform:scale(1.05)}.use-case-overlay{background:linear-gradient(to top,var(--dark) 0,rgba(2,6,23,.4) 50%,transparent 100%);inset:0;position:absolute}.use-case-label{bottom:1.5rem;font-family:var(--font-display);font-size:1.25rem;font-weight:700;left:1.5rem;position:absolute;right:1.5rem}.pricing{background:var(--navy);padding-block:8rem}.pricing-head{margin-bottom:4rem;text-align:center}.pricing-head h2{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;margin-bottom:.75rem}.pricing-head p{color:var(--cyan);font-weight:500}.pricing-grid{display:grid;gap:2rem;grid-template-columns:repeat(3,1fr);margin-inline:auto;max-width:62rem}.pricing-card{background:var(--dark);border:1px solid hsla(0,0%,100%,.08);border-radius:1.5rem;display:flex;flex-direction:column;padding:2rem}.pricing-card.featured{background:linear-gradient(to bottom,rgba(79,70,229,.18),var(--dark));border-color:rgba(79,70,229,.5);position:relative}.pricing-badge{background:var(--indigo);border-radius:9999px;color:#fff;font-size:.7rem;font-weight:700;left:50%;letter-spacing:.05em;padding:.25rem .875rem;position:absolute;top:0;transform:translate(-50%,-50%);white-space:nowrap}.pricing-card h3{font-size:1.25rem;font-weight:700;margin-bottom:.5rem}.pricing-price{margin-bottom:1.5rem}.pricing-price strong{font-family:var(--font-display);font-size:2.5rem;font-weight:700}.pricing-price span{color:var(--slate4);font-size:.875rem}.pricing-features{display:flex;flex-direction:column;flex-grow:1;gap:1rem;list-style:none;margin-bottom:2rem}.pricing-features li{align-items:center;color:var(--slate3);display:flex;font-size:.875rem;gap:.75rem}.pricing-features li svg{color:var(--cyan);flex-shrink:0;height:1rem;width:1rem}.pricing-card .btn-ghost,.pricing-card .btn-primary{justify-content:center;padding-block:.875rem;width:100%}.about{border-bottom:1px solid hsla(0,0%,100%,.05);border-top:1px solid hsla(0,0%,100%,.05);padding-block:6rem}.about-inner{margin-inline:auto;max-width:52rem;text-align:center}.about-logo{margin-inline:auto;margin-bottom:2rem}.about blockquote{font-family:var(--font-display);font-size:clamp(1.125rem,2.5vw,1.375rem);font-weight:500;line-height:1.7;margin-bottom:2rem}.about cite{color:var(--cyan);display:block;font-size:.8125rem;font-style:normal;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.contact{background:var(--dark);overflow:hidden;padding-block:8rem;position:relative}.contact-glow{background:rgba(79,70,229,.08);border-radius:50%;filter:blur(80px);height:50rem;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:50rem}.contact-grid{align-items:center;display:grid;gap:4rem;grid-template-columns:1fr 1fr;position:relative;z-index:1}.contact-text h2{font-size:clamp(2rem,5vw,3rem);font-weight:700;margin-bottom:1.5rem}.contact-text p{color:var(--slate4);font-size:1.25rem;line-height:1.75;margin-bottom:2rem}.contact-meta{display:flex;flex-direction:column;gap:1rem}.contact-meta span{align-items:center;color:var(--slate3);display:flex;gap:1rem}.contact-meta svg{color:var(--cyan);flex-shrink:0;height:1.25rem;width:1.25rem}.contact-form-wrap{backdrop-filter:blur(4px);background:hsla(0,0%,100%,.025);border:1px solid hsla(0,0%,100%,.08);border-radius:1.5rem;padding:2rem}.form-row{display:grid;gap:1rem;grid-template-columns:1fr 1fr}.form-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.form-group label{color:var(--slate3);font-size:.875rem;font-weight:500}.form-group input,.form-group select,.form-group textarea{background:rgba(2,6,23,.5);border:1px solid hsla(0,0%,100%,.08);border-radius:.75rem;color:var(--light);outline:none;padding:.875rem 1rem;transition:border-color .2s;width:100%}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--indigo)}.form-group select{-moz-appearance:none;appearance:none;-webkit-appearance:none}.form-group textarea{resize:none}.contact-form-wrap .btn-primary{justify-content:center;margin-top:.5rem;padding-block:1rem;width:100%}.form-notice{border-radius:.75rem;font-size:.875rem;margin-bottom:1rem;padding:.875rem 1rem}.form-notice.success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);color:#86efac}.form-notice.error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);color:#fca5a5}.site-footer{border-top:1px solid hsla(0,0%,100%,.05);color:var(--slate4);font-size:.875rem;padding-block:2rem;text-align:center}@media (max-width:1024px){.solution-row{grid-template-columns:1fr}.solution-row.reverse .solution-img,.solution-row.reverse .solution-text{order:unset}.platform-grid,.pricing-grid{grid-template-columns:1fr}.pricing-grid{max-width:42rem}.contact-grid{grid-template-columns:1fr}}@media (max-width:768px){:root{--px:1rem}.section-py,.section-py-l{padding-block:4rem}.nav-toggle{display:flex}.nav-links{align-items:flex-start;background:rgba(2,6,23,.97);border-bottom:1px solid hsla(0,0%,100%,.08);display:none;flex-direction:column;gap:0;left:0;padding:1rem 0;position:absolute;right:0;top:5rem}.nav-links.open{display:flex}.nav-links li{width:100%}.nav-links li a{display:block;font-size:1rem;padding:.875rem 1.5rem;width:100%}.nav-cta{background:transparent!important;border-radius:0!important}.steps-grid{grid-template-columns:1fr}.steps-grid:before{display:none}.form-row{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ══════════════════════════════════════════════════════════════════════════
   HERO ENHANCEMENTS
══════════════════════════════════════════════════════════════════════════ */

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(6, 182, 212, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    z-index: 1;
    pointer-events: none;
    animation: gridFade 1.5s ease-out forwards;
}

@keyframes gridFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hero-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.55), transparent);
    z-index: 2;
    pointer-events: none;
    animation: scanDown 5s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

@keyframes scanDown {
    0%   { top: 0%;   opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(6, 182, 212, 0.7);
    border-radius: 50%;
    animation: floatUp linear infinite;
}

@keyframes floatUp {
    0%   { transform: translateY(0)    scale(1);   opacity: 0.6; }
    40%  { transform: translateY(-18px) scale(1.6); opacity: 1;   }
    100% { transform: translateY(-36px) scale(0.6); opacity: 0;   }
}

.hero-scroll-hint {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    animation: fadeInUp 1s ease 1.5s both;
}

.scroll-dot {
    display: block;
    width: 1.5rem;
    height: 2.5rem;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 9999px;
    position: relative;
}

.scroll-dot::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: var(--cyan);
    border-radius: 9999px;
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0);   opacity: 1; }
    70%       { transform: translateX(-50%) translateY(10px); opacity: 0; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0);   }
}

/* ══════════════════════════════════════════════════════════════════════════
   STATS BAR
══════════════════════════════════════════════════════════════════════════ */

.stats-bar {
    background: var(--navy);
    border-top:    1px solid rgba(6, 182, 212, 0.12);
    border-bottom: 1px solid rgba(6, 182, 212, 0.12);
    padding-block: 3.5rem;
    position: relative;
    overflow: hidden;
}

.stats-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(6, 182, 212, 0.04), transparent);
    pointer-events: none;
}

.stats-grid {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    text-align: center;
    position: relative;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 1rem;
}

.stat-item + .stat-item {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.stat-number-wrap {
    display: flex;
    align-items: baseline;
    gap: 0.1rem;
    line-height: 1;
}

.stat-number {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    background: linear-gradient(135deg, var(--cyan), var(--indigo));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-suffix {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--cyan);
}

.stat-label {
    color: var(--slate4);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════
   CHALLENGE CARD ENHANCEMENTS
══════════════════════════════════════════════════════════════════════════ */

.challenge-card {
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s;
}

.challenge-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
}

.challenge-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.025));
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.challenge-card:hover::after {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   PARALLAX IMAGES
══════════════════════════════════════════════════════════════════════════ */

.parallax-img img {
    transition: transform 0.1s linear;
    will-change: transform;
}

/* ══════════════════════════════════════════════════════════════════════════
   STEP PULSE RINGS
══════════════════════════════════════════════════════════════════════════ */

.step-circle {
    position: relative;
}

.step-pulse {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(79, 70, 229, 0.35);
    animation: stepRing 2.8s ease-out infinite;
    pointer-events: none;
}

.step:nth-child(2) .step-pulse { animation-delay: 0.93s; }
.step:nth-child(3) .step-pulse { animation-delay: 1.86s; }

@keyframes stepRing {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.65); opacity: 0;   }
}

/* ══════════════════════════════════════════════════════════════════════════
   ADVANTAGE CARD ENHANCEMENTS
══════════════════════════════════════════════════════════════════════════ */

.advantage-card {
    position: relative;
    overflow: hidden;
}

.advantage-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(79, 70, 229, 0.06));
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.advantage-card:hover {
    border-color: rgba(6, 182, 212, 0.25);
    transform: translateY(-3px);
    transition: border-color 0.3s, transform 0.3s;
}

.advantage-card:hover::before {
    opacity: 1;
}

.advantage-card svg {
    transition: color 0.3s, transform 0.3s;
}

.advantage-card:hover svg {
    color: var(--indigo);
    transform: scale(1.15);
}

/* ══════════════════════════════════════════════════════════════════════════
   APPS SHOWCASE SECTION
══════════════════════════════════════════════════════════════════════════ */

.apps-showcase {
    background: var(--dark);
    position: relative;
    overflow: hidden;
}

.apps-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.35), transparent);
}

.apps-header {
    text-align: center;
    margin-bottom: 4rem;
}

.apps-header h2 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.apps-header p {
    color: var(--slate4);
    font-size: 1.125rem;
    max-width: 38rem;
    margin-inline: auto;
}

/* 3-col row 1, 2-col centered row 2 */
.apps-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.5rem;
    perspective: 1000px;
}

.app-card                  { grid-column: span 2; }
.app-card:nth-child(4)     { grid-column: 2 / span 2; }
.app-card:nth-child(5)     { grid-column: 4 / span 2; }

.app-card {
    background: #111f38;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.25rem;
    overflow: hidden;
    transition: border-color 0.3s, transform 0.35s, box-shadow 0.35s;
    position: relative;
}

.app-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.05), rgba(79, 70, 229, 0.05));
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.app-card:hover {
    border-color: rgba(6, 182, 212, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 24px 64px rgba(6, 182, 212, 0.08), 0 0 0 1px rgba(6, 182, 212, 0.08);
}

.app-card:hover::after {
    opacity: 1;
}

/* ── Mockup shell ── */

.app-card-mockup {
    background: linear-gradient(160deg, #0d1f38 0%, #0a1628 100%);
    border-bottom: 1px solid rgba(6, 182, 212, 0.15);
    padding: 1rem;
    position: relative;
    z-index: 1;
}

.mockup-window {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(6, 182, 212, 0.08);
}

.mockup-titlebar {
    background: #1e2d45;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.win-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.win-dot.red   { background: #ff5f57; }
.win-dot.amber { background: #ffbd2e; }
.win-dot.green { background: #27c93f; }

.win-title {
    font-size: 0.6rem;
    color: rgba(148, 163, 184, 0.6);
    font-family: monospace;
    margin-left: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.ent-window .mockup-titlebar {
    background: #12102a;
}

.ent-badge-title {
    margin-left: auto;
    flex-shrink: 0;
    background: linear-gradient(to right, var(--cyan), var(--indigo));
    color: #fff;
    font-size: 0.45rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    letter-spacing: 0.06em;
}

/* ── Shared mockup body ── */

.mockup-body {
    display: flex;
    height: 168px;
    background: #111f36;
    overflow: hidden;
}

/* ── GIS Drone App ── */

.drone-body { /* uses default flex row */ }

.drone-sidebar {
    width: 34px;
    background: #0c1829;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0;
    gap: 0.5rem;
    flex-shrink: 0;
}

.dsb-icon {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(148, 163, 184, 0.45);
    cursor: default;
    transition: all 0.2s;
}

.dsb-icon svg { width: 12px; height: 12px; }

.dsb-icon.active {
    background: rgba(6, 182, 212, 0.15);
    color: var(--cyan);
}

.drone-map {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.map-grid-bg {
    position: absolute;
    inset: 0;
    background: #0e1c30;
    background-image:
        linear-gradient(rgba(6, 182, 212, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.12) 1px, transparent 1px);
    background-size: 22px 22px;
}

.map-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.path-animate {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: drawMapPath 3s ease-in-out 0.6s forwards;
}

@keyframes drawMapPath { to { stroke-dashoffset: 0; } }

.drone-blink {
    transform-origin: center;
    animation: dronePing 2.2s ease-out infinite;
}

@keyframes dronePing {
    0%   { r: 5;  opacity: 0.9; }
    100% { r: 14; opacity: 0;   }
}

.map-coords {
    position: absolute;
    bottom: 4px;
    left: 6px;
    font-family: monospace;
    font-size: 0.5rem;
    color: rgba(6, 182, 212, 0.55);
    pointer-events: none;
}

.drone-panel {
    width: 74px;
    background: #0c1829;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow: hidden;
    flex-shrink: 0;
}

.dpanel-head {
    font-size: 0.48rem;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.1rem;
}

.dpanel-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.52rem;
    color: rgba(203, 213, 225, 0.8);
    font-family: monospace;
    white-space: nowrap;
}

.dpanel-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dpanel-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0.25rem 0;
}

.dpanel-stat {
    font-size: 0.48rem;
    color: rgba(148, 163, 184, 0.55);
    font-family: monospace;
}

.dpanel-stat strong { color: var(--cyan); }

.dpanel-live {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.48rem;
    font-weight: 700;
    color: #ef4444;
    font-family: monospace;
    margin-top: auto;
}

.live-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ef4444;
    display: inline-block;
    animation: blink 1.2s ease-in-out infinite;
}

/* ── GIS Controller ── */

.ctrl-body {
    flex-direction: column;
}

.ctrl-feed {
    flex: 1;
    background: #0a1a2e;
    position: relative;
    overflow: hidden;
}

.ctrl-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(0, 0, 0, 0.18) 2px, rgba(0, 0, 0, 0.18) 4px
    );
    pointer-events: none;
    z-index: 1;
}

.ctrl-crosshair { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.ch-h {
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    height: 1px;
    background: rgba(6, 182, 212, 0.18);
}

.ch-v {
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 1px;
    background: rgba(6, 182, 212, 0.18);
}

.ctrl-det-box {
    position: absolute;
    top: 22%;
    left: 28%;
    width: 38%;
    height: 48%;
    border: 1.5px solid #ef4444;
    border-radius: 2px;
    z-index: 3;
    animation: detPulse 2s ease-in-out infinite;
}

.ctrl-det-box::before,
.ctrl-det-box::after {
    content: '';
    position: absolute;
    border-color: #ef4444;
    border-style: solid;
    width: 8px;
    height: 8px;
}

.ctrl-det-box::before { top: -2px; left: -2px; border-width: 2px 0 0 2px; }
.ctrl-det-box::after  { bottom: -2px; right: -2px; border-width: 0 2px 2px 0; }

@keyframes detPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
    50%       { box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); }
}

.ctrl-det-label {
    position: absolute;
    top: -1.2rem;
    left: 0;
    font-size: 0.48rem;
    font-family: monospace;
    background: #ef4444;
    color: #fff;
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
    white-space: nowrap;
}

.ctrl-hud-top,
.ctrl-hud-bot {
    position: absolute;
    left: 0; right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0.5rem;
    z-index: 4;
}

.ctrl-hud-top { top: 0; }
.ctrl-hud-bot { bottom: 0; }

.ctrl-stat {
    font-family: monospace;
    font-size: 0.48rem;
    color: rgba(6, 182, 212, 0.9);
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.link-ok { color: #22c55e; }

.ctrl-alerts {
    background: #0c1829;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.35rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-shrink: 0;
}

.ctrl-alert-item {
    font-size: 0.52rem;
    font-family: monospace;
    padding: 0.2rem 0.4rem;
    border-radius: 2px;
}

.ctrl-alert-item.danger {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border-left: 2px solid #ef4444;
}

.ctrl-alert-item.ok {
    background: rgba(34, 197, 94, 0.1);
    color: #86efac;
    border-left: 2px solid #22c55e;
}

/* ── Annotation Studio ── */

.anno-body { /* uses default flex row */ }

.anno-tree {
    width: 88px;
    background: #0c1829;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    overflow: hidden;
    flex-shrink: 0;
}

.anno-tree-item {
    font-size: 0.48rem;
    font-family: monospace;
    color: rgba(148, 163, 184, 0.85);
    padding: 0.15rem 0.2rem;
    border-radius: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.anno-tree-item.root    { color: var(--light); font-weight: 700; font-size: 0.52rem; }
.anno-tree-item.done    { color: rgba(34, 197, 94, 0.7); }
.anno-tree-item.current { background: rgba(6, 182, 212, 0.1); color: var(--cyan); }
.anno-tree-item.pending { color: rgba(245, 158, 11, 0.8); }

.anno-tick   { color: #22c55e; }
.anno-active { color: var(--cyan); animation: blink 1.5s infinite; }

.anno-avatars {
    margin-top: auto;
    display: flex;
    gap: 0.2rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.anno-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--indigo);
    color: #fff;
    font-size: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.anno-avatar.online {
    background: #065f46;
    border-color: #22c55e;
    position: relative;
}

.anno-avatar.online::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #22c55e;
    border: 1px solid #080e1a;
}

.anno-canvas {
    flex: 1;
    background: #152034;
    position: relative;
    overflow: hidden;
}

.anno-img-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1e3050 0%, #152034 50%, #1a2a44 100%);
}

.anno-box {
    position: absolute;
    border: 1.5px solid;
    border-radius: 1px;
}

.anno-chip {
    position: absolute;
    top: -1rem;
    left: 0;
    font-size: 0.44rem;
    color: #fff;
    padding: 0.1rem 0.3rem;
    border-radius: 1px;
    font-family: monospace;
    white-space: nowrap;
}

.anno-cursor-dot {
    position: absolute;
    width: 8px; height: 8px;
    border: 1.5px solid var(--cyan);
    border-radius: 50%;
    bottom: 35%; right: 26%;
    animation: cursorBlink 1.5s ease-in-out infinite;
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; transform: scale(1);   }
    50%       { opacity: 0.4; transform: scale(0.7); }
}

.review-stamp {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-14deg);
    border: 2px solid rgba(245, 158, 11, 0.65);
    color: rgba(245, 158, 11, 0.7);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    padding: 0.2rem 0.6rem;
    font-family: monospace;
    pointer-events: none;
    text-transform: uppercase;
}

.anno-labels-panel {
    width: 66px;
    background: #0c1829;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    overflow: hidden;
    flex-shrink: 0;
}

.anno-lbl {
    font-size: 0.48rem;
    font-family: monospace;
    color: rgba(203, 213, 225, 0.8);
}

.anno-export-btn {
    margin-top: auto;
    background: rgba(79, 70, 229, 0.2);
    border: 1px solid rgba(79, 70, 229, 0.35);
    border-radius: 2px;
    color: #a5b4fc;
    font-size: 0.44rem;
    padding: 0.2rem 0.3rem;
    text-align: center;
    font-family: monospace;
    cursor: default;
}

.review-actions {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: auto;
}

.review-btn {
    border: none;
    border-radius: 2px;
    font-size: 0.48rem;
    font-family: monospace;
    padding: 0.25rem 0.3rem;
    cursor: default;
    font-weight: 700;
    text-align: center;
}

.review-btn.approve {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.review-btn.reject {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ── GIS Authenticator ── */

.auth-body {
    justify-content: center;
    align-items: center;
    background: #0c1829;
    padding: 0.6rem 1rem;
}

.auth-phone-frame {
    width: 100%;
    max-width: 178px;
    background: #152034;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    overflow: hidden;
    margin: 0 auto;
}

.auth-status-bar {
    background: #0c1829;
    font-size: 0.44rem;
    font-family: monospace;
    color: rgba(148, 163, 184, 0.85);
    padding: 0.2rem 0.5rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.auth-app-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--light);
    font-family: var(--font-display);
}

.auth-app-header svg {
    width: 11px;
    height: 11px;
    color: var(--cyan);
}

.auth-account-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
}

.auth-account-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cyan), var(--indigo));
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-account-name {
    font-size: 0.48rem;
    color: var(--light);
    font-family: monospace;
    overflow: hidden;
    min-width: 0;
}

.auth-account-name small {
    color: rgba(148, 163, 184, 0.55);
    font-size: 0.4rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auth-otp-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.65rem;
}

.auth-code {
    display: flex;
    align-items: center;
    gap: 0.18rem;
    font-family: monospace;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    background: linear-gradient(to right, var(--cyan), var(--indigo));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-sep {
    font-size: 0.85rem;
    -webkit-text-fill-color: rgba(148, 163, 184, 0.4);
}

.auth-timer-ring {
    position: relative;
    width: 30px;
    height: 30px;
}

.auth-timer-ring svg {
    width: 30px;
    height: 30px;
}

.auth-ring-progress {
    animation: drainTimer 30s linear infinite;
}

@keyframes drainTimer {
    from { stroke-dasharray: 113 113; }
    to   { stroke-dasharray: 0   113; }
}

.auth-secs {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.44rem;
    font-family: monospace;
    color: var(--cyan);
}

.auth-copy {
    text-align: center;
    font-size: 0.46rem;
    color: rgba(148, 163, 184, 0.45);
    font-family: monospace;
    padding-bottom: 0.2rem;
}

.auth-biometric {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.46rem;
    color: rgba(148, 163, 184, 0.45);
    font-family: monospace;
}

.auth-biometric svg {
    width: 13px;
    height: 13px;
    color: rgba(6, 182, 212, 0.45);
}

/* ── App card info ── */

.app-card-info {
    padding: 1.25rem 1.25rem 1.5rem;
    position: relative;
    z-index: 1;
}

.app-platform-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
}

.app-platform-badge.desktop {
    background: rgba(79, 70, 229, 0.12);
    border: 1px solid rgba(79, 70, 229, 0.3);
    color: #a5b4fc;
}

.app-platform-badge.android {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #86efac;
}

.app-platform-badge.ent {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

.app-card-info h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.app-card-info p {
    font-size: 0.85rem;
    color: var(--slate4);
    line-height: 1.65;
    margin-bottom: 1rem;
}

.app-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.app-features span {
    font-size: 0.68rem;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--slate3);
    transition: background 0.2s, border-color 0.2s;
}

.app-card:hover .app-features span {
    background: rgba(6, 182, 212, 0.06);
    border-color: rgba(6, 182, 212, 0.18);
}

/* ══════════════════════════════════════════════════════════════════════════
   USE CASES — CSS MARQUEE  (compositor-driven, no JS scroll)
══════════════════════════════════════════════════════════════════════════ */

.use-cases-track {
    overflow: hidden;
    cursor: default;
    padding-inline: 0;
    padding-bottom: 0;
    scroll-snap-type: none;
}

.use-cases-inner {
    display: flex;
    gap: 1.5rem;
    padding-block: 1rem;
    width: max-content;
    animation: usecasesMarquee 28s linear infinite;
    will-change: transform;
}

.use-cases-track:hover .use-cases-inner,
.use-cases-inner.paused {
    animation-play-state: paused;
}

@keyframes usecasesMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .apps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .app-card               { grid-column: span 1; }
    .app-card:nth-child(4)  { grid-column: span 1; }
    .app-card:nth-child(5)  { grid-column: span 1; }
}

@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-item:nth-child(3) { border-left: none; }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .stat-item + .stat-item { border-left: none; }
    .stat-item:nth-child(2n) { border-left: 1px solid rgba(255, 255, 255, 0.06); }

    .apps-grid {
        grid-template-columns: 1fr;
    }

    .app-card               { grid-column: span 1; }
    .app-card:nth-child(4)  { grid-column: span 1; }
    .app-card:nth-child(5)  { grid-column: span 1; }

    .mockup-body { height: 140px; }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   CROSS-BROWSER & MOBILE OPTIMISATIONS
══════════════════════════════════════════════════════════════════════════ */

/* ── Base browser fixes ── */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-tap-highlight-color: transparent;
}

/* Prevent iOS auto-zoom on form focus (requires font-size >= 16px) */
.form-group input,
.form-group select,
.form-group textarea {
    font-size: 1rem;
}

/* Touch: pause marquee on tap then resume */
.use-cases-inner.paused {
    animation-play-state: paused;
}

/* ── Nav toggle: minimum 44×44 touch target ── */
.nav-toggle {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
}

/* ── Hover states only on pointer devices ── */
@media (hover: hover) and (pointer: fine) {
    .app-card:hover         { transform: translateY(-5px); }
    .advantage-card:hover   { transform: translateY(-3px); }
    .challenge-card:hover   { transform: translateY(-3px); }
    .use-case-card:hover img { transform: scale(1.05); }
}

@media (hover: none) {
    .app-card,
    .advantage-card,
    .challenge-card { transform: none !important; transition: none; }
    .use-case-card img { transform: none !important; }
}

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
    .solutions  { padding-block: 5rem; }
    .advantages { padding-block: 5rem; }
    .solution-row { margin-bottom: 4rem; }
    .solutions-heading-group { margin-bottom: 3rem; }

    .apps-header { margin-bottom: 3rem; }
    .apps-showcase { padding-block: 5rem; }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
    /* Use small viewport height so hero fills screen with mobile toolbars */
    .hero { min-height: 100svh; }

    /* Disable heavy visual fx on mobile */
    .hero-grid,
    .hero-scan,
    .hero-scroll-hint { display: none; }

    /* Stack hero CTAs full-width */
    .hero-ctas {
        flex-direction: column;
        align-items: flex-start;
    }
    .hero-ctas .btn-primary,
    .hero-ctas .btn-ghost {
        width: 100%;
        max-width: 22rem;
        justify-content: center;
    }

    /* Solutions */
    .solutions  { padding-block: 4rem; }
    .solution-row { margin-bottom: 3rem; gap: 2rem; }
    .solutions-heading-group p { font-size: 1rem; }

    /* Advantages */
    .advantages { padding-block: 4rem; }

    /* Apps */
    .apps-showcase { padding-block: 4rem; }
    .apps-header { margin-bottom: 2rem; }
    .apps-header p { font-size: 1rem; }

    /* Make mockup a bit taller on full-width single-col cards */
    .mockup-body { height: 160px; }

    /* Use cases */
    .use-cases { padding-block: 4rem; }
    .use-case-card { height: 240px; }

    /* Pricing */
    .pricing { padding-block: 4rem; }

    /* Contact */
    .contact { padding-block: 4rem; }
    .contact-text h2 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
    .contact-text p  { font-size: 1rem; }

    /* Stats */
    .stats-bar { padding-block: 2.5rem; }
    .stat-label { font-size: 0.75rem; }
}

/* ── Small mobile (≤ 480px) ── */
@media (max-width: 480px) {
    :root { --px: 0.875rem; }

    .hero-heading { font-size: clamp(2rem, 10vw, 2.75rem); }
    .hero-sub     { font-size: 0.95rem; }
    .hero-badge   { font-size: 0.75rem; }

    .section-heading { margin-bottom: 2.5rem; }

    /* Single column challenge cards */
    .cards-3 { grid-template-columns: 1fr; }

    /* Stat numbers slightly smaller */
    .stat-number { font-size: 2.25rem; }
    .stat-suffix { font-size: 1.25rem; }

    /* Nav logo shrink */
    .nav-logo span  { font-size: 0.95rem; }
    .nav-logo img   { width: 32px; height: 32px; }

    /* App feature pills */
    .app-features span { font-size: 0.65rem; padding: 0.2rem 0.5rem; }

    /* Contact meta stack tighter */
    .contact-meta span { font-size: 0.9rem; }

    /* Use cases track padding */
    .use-cases-track { padding-inline: 0.875rem; }
    .use-case-card { height: 200px; }
}

/* ── Safe area insets for notched phones ── */
@supports (padding: env(safe-area-inset-bottom)) {
    .site-footer {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }
    @media (max-width: 768px) {
        .nav-links {
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        }
    }
}

/* ── High-DPI / Retina: finer borders ── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .mockup-window {
        border-width: 0.5px;
    }
    .app-card {
        border-width: 0.5px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   CHALLENGE CARDS — image-backed
══════════════════════════════════════════════════════════════════════════ */

.challenge-card {
    position: relative;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
    .challenge-card:hover {
        transform: translateY(-4px);
        border-color: rgba(79, 70, 229, 0.3);
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   MISSION BANNER  (cinematic full-width image break)
══════════════════════════════════════════════════════════════════════════ */

.mission-banner {
    position: relative;
    height: clamp(220px, 32vw, 440px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mission-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mission-banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    max-width: none;
}

.mission-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(2, 6, 23, 0.5) 0%,
        rgba(2, 6, 23, 0.15) 42%,
        rgba(2, 6, 23, 0.62) 100%
    );
    z-index: 1;
}

.mission-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem;
}

.mission-banner-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cyan);
    border: 1px solid rgba(6, 182, 212, 0.5);
    border-radius: 9999px;
    padding: 0.3rem 1rem;
    margin-bottom: 1.25rem;
    backdrop-filter: blur(6px);
    background: rgba(6, 182, 212, 0.08);
}

.mission-banner-heading {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.75);
}

@media (max-width: 768px) {
    .mission-banner {
        height: clamp(160px, 48vw, 260px);
    }
    .mission-banner-heading {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
    }
}
/* ══════════════════════════════════════════════════════════════════════════
   AUDIT FIXES — added 2026-05-16
   Skip link, citations, SA provinces, FAQ accordion, optional form details
   NOTE: also added to src/css/main.css ? No — src is out of date with built.
   Future rebuilds via `npm run build:css` will REGRESS these. Sync src/ first.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Skip-to-content link (a11y) ─────────────────────────────────────────── */
.skip-link,
.screen-reader-text {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    position: fixed;
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    padding: 0.75rem 1.25rem;
    background: var(--indigo, #4f46e5);
    color: #fff;
    font-weight: 600;
    border-radius: 0.5rem;
    z-index: 9999;
    text-decoration: none;
}

/* ── Stat citations ──────────────────────────────────────────────────────── */
.cite {
    font-size: 0.8em;
    font-style: normal;
    opacity: 0.65;
    white-space: nowrap;
}

/* ── Deployed-across-SA chip list ────────────────────────────────────────── */
.provinces {
    background: linear-gradient(180deg, rgba(2,6,23,0.6) 0%, rgba(15,23,42,0.4) 100%);
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.provinces-header {
    text-align: center;
    max-width: 48rem;
    margin: 0 auto 2.5rem;
}
.provinces-header h2 {
    font-family: var(--font-display, "Sora", sans-serif);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    margin-bottom: 0.75rem;
}
.provinces-header p {
    color: var(--slate3, #cbd5e1);
    font-size: 1.05rem;
}
.province-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 60rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}
.province-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: rgba(79, 70, 229, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #e2e8f0;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.province-chip:hover {
    background: rgba(79, 70, 229, 0.18);
    border-color: rgba(99, 102, 241, 0.7);
    transform: translateY(-2px);
}
.province-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--cyan, #06b6d4);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
}
.provinces-note {
    text-align: center;
    margin-top: 2rem;
    color: var(--slate3, #cbd5e1);
    font-size: 0.95rem;
    max-width: 48rem;
    margin-inline: auto;
}
.provinces-note strong {
    color: #fff;
}

/* ── FAQ accordion ───────────────────────────────────────────────────────── */
.faq {
    background: rgba(2, 6, 23, 0.3);
}
.faq-header {
    text-align: center;
    max-width: 48rem;
    margin: 0 auto 2.5rem;
}
.faq-header h2 {
    font-family: var(--font-display, "Sora", sans-serif);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    margin-bottom: 0.75rem;
}
.faq-header p {
    color: var(--slate3, #cbd5e1);
}
.faq-list {
    max-width: 50rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.faq-item {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s;
}
.faq-item[open] {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(99, 102, 241, 0.4);
}
.faq-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 1.4rem;
    font-weight: 600;
    color: #fff;
    font-size: 1.05rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: "+";
    font-size: 1.5rem;
    line-height: 1;
    color: var(--cyan, #06b6d4);
    transition: transform 0.25s;
    flex-shrink: 0;
}
.faq-item[open] > summary::after {
    content: "−";
}
.faq-item > summary:focus-visible {
    outline: 2px solid var(--cyan, #06b6d4);
    outline-offset: -2px;
}
.faq-body {
    padding: 0 1.4rem 1.25rem;
    color: var(--slate3, #cbd5e1);
    line-height: 1.65;
}
.faq-body p { margin: 0; }
.faq-body a {
    color: var(--cyan, #06b6d4);
    text-decoration: underline;
}

/* ── Contact form — required mark, optional details, fineprint ───────────── */
.req {
    color: var(--cyan, #06b6d4);
    margin-left: 0.15rem;
}
.form-optional {
    margin: 0.75rem 0 1rem;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 0.6rem;
    background: rgba(2, 6, 23, 0.25);
}
.form-optional > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    color: var(--slate3, #cbd5e1);
    user-select: none;
}
.form-optional > summary::-webkit-details-marker { display: none; }
.form-optional > summary::before {
    content: "▸ ";
    color: var(--cyan, #06b6d4);
    display: inline-block;
    transition: transform 0.2s;
}
.form-optional[open] > summary::before {
    content: "▾ ";
}
.form-optional[open] {
    padding-bottom: 0.6rem;
}
.form-optional .form-group {
    padding: 0 1rem;
}
.form-fineprint {
    margin-top: 0.85rem;
    color: var(--slate3, #94a3b8);
    font-size: 0.8rem;
    line-height: 1.45;
}

/* ── Global :focus-visible for keyboard a11y ─────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
details > summary:focus-visible {
    outline: 2px solid var(--cyan, #06b6d4);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Scroll-margin so anchor links clear the fixed nav ───────────────────── */
section[id], main[id] {
    scroll-margin-top: 5rem;
}

/* ── Honour prefers-reduced-motion on JS-driven animations too ───────────── */
@media (prefers-reduced-motion: reduce) {
    .fade-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── noscript fallback to keep fade-in content visible ───────────────────── */
.no-js .fade-in,
html.no-js .fade-in {
    opacity: 1 !important;
    transform: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   AUDIT FIX — social icons + multi-column footer (2026-05-16)
   Replaces the prior 1-line copyright footer.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Footer layout ───────────────────────────────────────────────────────── */
.site-footer {
    background: linear-gradient(180deg, #020617 0%, #0a0f1d 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 4rem 1.5rem 1.5rem;
    color: #cbd5e1;
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1.4fr 1fr;
    gap: 2.5rem;
    align-items: start;
}
/* Icon-prefixed contact list (matches the look of the old contact-meta) */
.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-contact-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
    font-size: 0.92rem;
    color: #cbd5e1;
}
.footer-contact-list li svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    color: var(--cyan, #06b6d4);
}
.footer-contact-list a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.2s;
    word-break: break-word;
}
.footer-contact-list a:hover {
    color: var(--cyan, #06b6d4);
}
/* Hint text in the contact section now that meta has moved to footer */
.contact-text-hint {
    color: #94a3b8;
    font-size: 0.92rem;
    margin-top: 1rem;
}

/* Centre-align the Brand and Get-in-Touch columns */
.footer-brand {
    text-align: center;
}
.footer-brand .footer-logo {
    justify-content: center;
}
.footer-tagline {
    margin-inline: auto;
}
.footer-contact {
    text-align: center;
}
.footer-contact-list li {
    justify-content: center;
}
@media (max-width: 900px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}
@media (max-width: 540px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
.footer-brand .footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    font-weight: 700;
    font-family: var(--font-display, "Sora", sans-serif);
    font-size: 1.15rem;
    text-decoration: none;
    margin-bottom: 0.75rem;
}
.footer-brand .footer-logo img {
    border-radius: 6px;
}
.footer-tagline {
    margin: 0;
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 24ch;
}
.site-footer h4 {
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.footer-nav ul,
.footer-contact ul,
.footer-social .social-icons {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-nav li,
.footer-contact li {
    margin-bottom: 0.55rem;
    font-size: 0.92rem;
}
.footer-nav a,
.footer-contact a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-nav a:hover,
.footer-contact a:hover {
    color: var(--cyan, #06b6d4);
}

/* ── Social icon set (used in footer + contact section) ──────────────────── */
.social-icons,
.contact-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.social-icons a,
.contact-social a {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.25);
    color: #cbd5e1;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.social-icons a:hover,
.contact-social a:hover {
    background: rgba(79, 70, 229, 0.25);
    border-color: var(--cyan, #06b6d4);
    color: #fff;
    transform: translateY(-2px);
}
.social-icons svg,
.contact-social svg {
    width: 1.05rem;
    height: 1.05rem;
}

/* In the contact section, sit just below the meta block */
.contact-social {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Footer bottom bar ───────────────────────────────────────────────────── */
.footer-bottom {
    max-width: 1200px;
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.82rem;
    color: #64748b;
}
.footer-bottom p { margin: 0; }
.footer-meta {
    color: #94a3b8;
}

/* Tagline centering — overrides the earlier `margin: 0` shorthand */
.footer-tagline {
    margin-left: auto;
    margin-right: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   WhatsApp floating chat button (2026-05-16)
   No-plugin instant-contact channel for the "no live chat" audit finding.
   Pill-style with collapsing label on small screens.
   ══════════════════════════════════════════════════════════════════════════ */
.whatsapp-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 9998;             /* below modals, above content */
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.05rem 0.7rem 0.85rem;
    background: #25D366;       /* WhatsApp brand green */
    color: #fff;
    border-radius: 9999px;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35),
                0 2px 6px rgba(0, 0, 0, 0.35);
    text-decoration: none;
    font: 600 0.92rem/1 "Inter", system-ui, sans-serif;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.whatsapp-fab svg {
    width: 1.45rem;
    height: 1.45rem;
    flex-shrink: 0;
}
.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
    background: #1ebe5b;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.5),
                0 3px 8px rgba(0, 0, 0, 0.4);
}
.whatsapp-fab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
/* On narrow screens collapse to icon-only — keep total tap target ≥48dp */
@media (max-width: 640px) {
    .whatsapp-fab {
        padding: 0.85rem;
    }
    .whatsapp-fab-text {
        display: none;
    }
}
/* Hide on print */
@media print {
    .whatsapp-fab { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Nav phone link — always-visible click-to-call (2026-05-16)
   Sits between logo and nav-links on desktop, icon-only on mobile.
   ══════════════════════════════════════════════════════════════════════════ */
.nav-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-left: auto;
    margin-right: 1.25rem;
    padding: 0.5rem 0.95rem;
    color: #cbd5e1;
    text-decoration: none;
    font: 600 0.92rem/1 "Inter", system-ui, sans-serif;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
    white-space: nowrap;
}
.nav-phone svg {
    width: 1rem;
    height: 1rem;
    color: var(--cyan, #06b6d4);
    flex-shrink: 0;
}
.nav-phone:hover,
.nav-phone:focus-visible {
    color: #fff;
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.45);
    transform: translateY(-1px);
}
.nav-phone:focus-visible {
    outline: 2px solid var(--cyan, #06b6d4);
    outline-offset: 2px;
}

/* Mobile: icon-only tap target, larger for thumb */
@media (max-width: 768px) {
    .nav-phone {
        margin-left: auto;
        margin-right: 0.6rem;
        padding: 0.55rem;
        min-width: 2.5rem;
        min-height: 2.5rem;
        justify-content: center;
    }
    .nav-phone svg { width: 1.15rem; height: 1.15rem; }
    .nav-phone-text { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE / BLOG POST TYPOGRAPHY (2026-05-16)
   For template-article-drone-tech.php and future resources articles.
   ══════════════════════════════════════════════════════════════════════════ */
.article-page {
    background: linear-gradient(180deg, #020617 0%, #0a0f1d 100%);
    color: #cbd5e1;
    padding-bottom: 4rem;
}
.article-header {
    padding: 7rem 0 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: radial-gradient(ellipse at top, rgba(79, 70, 229, 0.18) 0%, transparent 60%);
}
.article-breadcrumb {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 1.5rem;
}
.article-breadcrumb a {
    color: #94a3b8;
    text-decoration: none;
}
.article-breadcrumb a:hover { color: var(--cyan, #06b6d4); }
.article-breadcrumb span { margin: 0 0.4rem; }
.article-tags {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.article-tags li {
    padding: 0.3rem 0.75rem;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 9999px;
    font-size: 0.78rem;
    color: #cbd5e1;
}
.article-header h1 {
    font-family: var(--font-display, "Sora", sans-serif);
    font-size: clamp(1.85rem, 4.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 1.5rem;
    max-width: 50rem;
}
.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: #94a3b8;
    font-size: 0.9rem;
}
.article-author { color: #cbd5e1; font-weight: 500; }
.article-sep { color: #475569; }

.article-container {
    max-width: 760px;
}
.article-tldr {
    margin: 3rem 0;
    padding: 1.5rem 1.75rem;
    background: rgba(6, 182, 212, 0.06);
    border-left: 3px solid var(--cyan, #06b6d4);
    border-radius: 0.6rem;
}
.article-tldr-heading {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cyan, #06b6d4);
}
.article-tldr ul {
    margin: 0;
    padding-left: 1.25rem;
}
.article-tldr li {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

.article-prose {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #cbd5e1;
}
.article-prose .article-lede {
    font-size: 1.25rem;
    line-height: 1.55;
    color: #e2e8f0;
    margin: 0 0 2rem;
    font-weight: 500;
}
.article-prose p { margin: 0 0 1.5rem; }
.article-prose h2 {
    font-family: var(--font-display, "Sora", sans-serif);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    color: #fff;
    margin: 3.5rem 0 1rem;
    scroll-margin-top: 6rem;
}
.article-prose h3 {
    font-family: var(--font-display, "Sora", sans-serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    margin: 2rem 0 0.75rem;
}
.article-prose strong { color: #fff; }
.article-prose em { color: #e2e8f0; font-style: italic; }
.article-prose ul,
.article-prose ol {
    margin: 0 0 1.5rem;
    padding-left: 1.5rem;
}
.article-prose li {
    margin-bottom: 0.6rem;
    line-height: 1.65;
}
.article-prose .article-checklist {
    list-style: none;
    padding-left: 0;
}
.article-prose .article-checklist li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.85rem;
}
.article-prose .article-checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--cyan, #06b6d4);
    font-weight: 700;
}
.article-prose .article-callout {
    margin: 2rem 0;
    padding: 1.5rem 1.75rem;
    background: rgba(79, 70, 229, 0.08);
    border-left: 3px solid #4f46e5;
    border-radius: 0.6rem;
    font-size: 1.1rem;
    font-style: italic;
    color: #e2e8f0;
}
.article-prose a {
    color: var(--cyan, #06b6d4);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.article-prose a:hover { color: #fff; }

.article-cta {
    margin: 4rem 0 0;
    padding: 2.5rem;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.15), rgba(6, 182, 212, 0.12));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 1rem;
    text-align: center;
}
.article-cta h2 {
    font-family: var(--font-display, "Sora", sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.75rem;
}
.article-cta p {
    color: #cbd5e1;
    margin: 0 0 1.5rem;
}
.article-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

/* Article horizontal divider + author bio block */
.article-divider {
    margin: 3.5rem 0 2rem;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.article-author-bio {
    margin: 0 0 2rem;
    padding: 1.25rem 1.5rem;
    background: rgba(15, 23, 42, 0.5);
    border-left: 3px solid var(--cyan, #06b6d4);
    border-radius: 0.5rem;
}
.article-author-bio h3 {
    margin: 0 0 0.5rem;
    color: var(--cyan, #06b6d4);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.article-author-bio p {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.65;
}

/* ── Plain-English Explainers ────────────────────────────────────────────── */
.plain-english {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.plain-english-heading {
    text-align: center;
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-bottom: 2rem;
}
.plain-english-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.pe-item {
    display: flex;
    gap: 1rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    transition: border-color 0.2s;
}
.pe-item:hover { border-color: rgba(var(--accent-rgb, 56,189,248), 0.35); }
.pe-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
    color: var(--accent);
}
.pe-icon svg { width: 22px; height: 22px; }
.pe-item strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 0.35rem;
}
.pe-item p {
    margin: 0;
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.6;
}

/* ── Credentials ─────────────────────────────────────────────────────────── */
.credentials { background: var(--bg-card, #0f172a); }
.credentials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 2.5rem 0 0;
}
.cred-card {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 1.5rem;
    transition: border-color 0.2s, transform 0.2s;
}
.cred-card:hover {
    border-color: rgba(var(--accent-rgb, 56,189,248), 0.3);
    transform: translateY(-2px);
}
.cred-years {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
    min-width: 3rem;
}
.cred-years span { font-size: 1.5rem; }
.cred-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb, 56,189,248), 0.1);
    border-radius: 10px;
    color: var(--accent);
}
.cred-icon svg { width: 20px; height: 20px; }
.cred-body strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 0.4rem;
}
.cred-body p {
    margin: 0;
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.6;
}