/* ================================================================
   SliderDevs — ASYMMETRIC CREATIVE LAYOUT
   REVEAL NAV: logo-only initially, full links appear on scroll
   SPLIT-SCREEN HERO: code block left (dark), browser mockup right
   CARD CAROUSEL services (horizontal scroll with snap)
   VERTICAL STEPPER process (connected dots left, text right)
   METRIC CARDS case studies (dark bg, key metric highlighted)
   SINGLE ROTATING TESTIMONIAL with progress bar
   Fonts: Work Sans (body/UI) + JetBrains Mono (headings/code)
   Palette: Indigo #4f46e5 + lime #84cc16 on near-white #fafaf9
   FIRST WEB DEV NICHE (different from all previous)
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
--indigo:#4f46e5;--indigo-lt:#6366f1;--indigo-dk:#4338ca;--indigo-soft:rgba(79,70,229,.04);
--lime:#84cc16;--lime-lt:#a3e635;--lime-dk:#65a30d;
--bg:#fafaf9;--surface:#fff;--surface2:#f5f5f4;--surface3:#e7e5e4;
--text:#1c1917;--muted:#78716c;--border:#e7e5e4;--border-lt:#f5f5f4;
--dark:#18181b;--dark2:#27272a;
--white:#fff;--black:#1c1917;
--font-h:'JetBrains Mono',monospace;--font-b:'Work Sans',sans-serif;
--max-w:1140px;--tr:.3s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font-family:var(--font-b);color:var(--text);background:var(--bg);line-height:1.8;-webkit-font-smoothing:antialiased;font-size:15px}
img{max-width:100%;height:auto;display:block}a{color:var(--indigo);text-decoration:none;transition:color var(--tr)}a:hover{color:var(--indigo-dk)}
ul,ol{list-style:none}.container{max-width:var(--max-w);margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:var(--font-h);color:var(--text);line-height:1.12}
h1{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,3vw,2.2rem);font-weight:600}
h3{font-size:.95rem;font-weight:600}p{margin-bottom:1rem}
.mono{font-family:var(--font-h);font-size:.54rem;font-weight:600;text-transform:uppercase;letter-spacing:3px;color:var(--indigo);margin-bottom:14px;display:inline-block}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:6px;font-family:var(--font-b);font-weight:600;font-size:.78rem;border:none;cursor:pointer;transition:all var(--tr);text-decoration:none}
.btn-indigo{background:var(--indigo);color:var(--white)}.btn-indigo:hover{background:var(--indigo-dk);transform:translateY(-2px);box-shadow:0 8px 24px rgba(79,70,229,.15)}
.btn-lime{background:var(--lime);color:var(--black)}.btn-lime:hover{background:var(--lime-dk);transform:translateY(-2px)}
.btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--text)}.btn-ghost:hover{border-color:var(--indigo);color:var(--indigo);transform:translateY(-2px)}
.btn-dark{background:var(--dark);color:var(--white)}.btn-dark:hover{background:var(--dark2);transform:translateY(-2px)}

/* ── REVEAL NAV: logo-only → full nav on scroll ── */
.reveal-nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;transition:all .5s ease}
.reveal-nav .rn-links{opacity:0;pointer-events:none;transition:opacity .4s ease}
.reveal-nav .rn-cta{opacity:0;pointer-events:none;transition:opacity .4s ease}
.reveal-nav.revealed{background:rgba(250,250,249,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:10px 0}
.reveal-nav.revealed .rn-links{opacity:1;pointer-events:all}
.reveal-nav.revealed .rn-cta{opacity:1;pointer-events:all}
.rn-inner{display:flex;align-items:center;justify-content:space-between}
.rn-logo{font-family:var(--font-h);font-size:.9rem;font-weight:700;color:var(--indigo);text-decoration:none;letter-spacing:-.5px}
.rn-logo .slash{color:var(--lime)}
.rn-links{display:flex;align-items:center;gap:18px}
.rn-links a{font-size:.72rem;font-weight:600;color:var(--muted);transition:color var(--tr)}.rn-links a:hover,.rn-links a.active{color:var(--indigo)}
.rn-cta{padding:8px 18px;background:var(--indigo);color:var(--white);border-radius:6px;font-size:.68rem;font-weight:700;text-decoration:none;transition:all var(--tr)}.rn-cta:hover{background:var(--indigo-dk);color:var(--white)}
.rn-toggle{display:none;background:none;border:1px solid var(--border);padding:6px 14px;cursor:pointer;font-size:.7rem;font-weight:700;color:var(--text);border-radius:6px}
@media(max-width:800px){.rn-links{display:none}.rn-links.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--white);border-bottom:1px solid var(--border);padding:16px 32px;gap:10px;opacity:1!important;pointer-events:all!important}.rn-toggle{display:block}}

/* ── SPLIT-SCREEN HERO: code left (dark) / stats right (light) ── */
.hero-split{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.hs-code{background:var(--dark);color:#a1a1aa;padding:80px 40px 40px;display:flex;flex-direction:column;justify-content:center}
.hs-code .code-win{background:var(--dark2);border-radius:10px;padding:24px 20px;font-family:var(--font-h);font-size:.78rem;line-height:2;position:relative;border:1px solid #3f3f46}
.hs-code .code-win::before{content:'● ● ●';position:absolute;top:8px;left:14px;font-size:.4rem;letter-spacing:4px;color:#52525b}
.code-line{display:block;padding:2px 0;opacity:.5;animation:codePulse 3s ease-in-out infinite}
.code-line:nth-child(1){animation-delay:0s;color:var(--lime);opacity:1}.code-line:nth-child(2){animation-delay:.6s;color:#93c5fd;opacity:.8}.code-line:nth-child(3){animation-delay:1.2s;color:#a78bfa}.code-line:nth-child(4){animation-delay:1.8s;color:#fdba74}.code-line:nth-child(5){animation-delay:2.4s;color:var(--lime);opacity:1}
@keyframes codePulse{0%,100%{opacity:.5}50%{opacity:1}}
.hs-info{background:var(--bg);padding:80px 40px 40px;display:flex;flex-direction:column;justify-content:center}
.hs-info h1{margin-bottom:16px}
.hs-info>p{color:var(--muted);font-size:.95rem;max-width:440px;margin-bottom:24px}
.hs-btns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.hs-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stat-box{background:var(--surface);border:1.5px solid var(--border);border-radius:8px;padding:14px 16px}
.sb-v{font-family:var(--font-h);font-size:1.4rem;font-weight:700;color:var(--indigo)}.sb-l{font-size:.52rem;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px}
@media(max-width:800px){.hero-split{grid-template-columns:1fr}.hs-code{padding:100px 32px 32px;min-height:40vh}.hs-info{padding:32px}}

/* ── Philosophy ── */
.phil-band{padding:48px 0;border-bottom:1px solid var(--border)}
.phil-band p{font-family:var(--font-h);font-size:clamp(.9rem,1.6vw,1.15rem);font-weight:400;line-height:1.65;max-width:600px;margin:0 auto;text-align:center;color:var(--muted)}

/* ── CARD CAROUSEL services (horizontal snap-scroll) ── */
.carousel-section{padding:80px 0}
.carousel-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:0 32px 14px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.carousel-track::-webkit-scrollbar{height:3px}.carousel-track::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.car-card{flex:0 0 min(340px,80vw);scroll-snap-align:start;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:28px 22px;transition:all var(--tr);text-decoration:none;color:var(--text);display:flex;flex-direction:column}
.car-card:hover{border-color:var(--indigo);transform:translateY(-4px);box-shadow:0 12px 32px rgba(79,70,229,.06)}
.cc-num{font-family:var(--font-h);font-size:1.8rem;font-weight:700;color:var(--indigo);opacity:.1;line-height:1;margin-bottom:10px}
.car-card h3{margin-bottom:6px;font-family:var(--font-h);font-size:.9rem}.car-card>p{color:var(--muted);font-size:.8rem;flex:1;margin-bottom:12px}
.cc-price{font-family:var(--font-h);font-weight:700;color:var(--lime-dk);font-size:.88rem;margin-bottom:8px}
.cc-go{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--indigo)}

/* ── METRIC CARDS case studies (dark bg) ── */
.cases-section{padding:80px 0;background:var(--dark);color:var(--white)}
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.case-card{background:var(--dark2);border:1px solid #3f3f46;border-radius:10px;padding:28px 22px;transition:all var(--tr)}
.case-card:hover{border-color:var(--lime);box-shadow:0 0 20px rgba(132,204,22,.06)}
.case-title{font-family:var(--font-h);font-size:.82rem;font-weight:600;color:var(--white);margin-bottom:6px}
.case-tech{font-size:.6rem;color:var(--lime);font-weight:600;letter-spacing:1px;margin-bottom:12px}
.case-metric{font-family:var(--font-h);font-size:1.8rem;font-weight:700;color:var(--lime);margin-bottom:10px}
.case-card>p{color:#a1a1aa;font-size:.78rem;margin:0}
@media(max-width:700px){.cases-grid{grid-template-columns:1fr}}

/* ── VERTICAL STEPPER process ── */
.stepper-section{padding:80px 0}
.stepper{max-width:600px;position:relative;padding-left:44px}
.stepper::before{content:'';position:absolute;left:14px;top:0;bottom:0;width:2px;background:var(--border)}
.step{position:relative;padding:20px 0}
.step-dot{position:absolute;left:-44px;top:22px;width:30px;height:30px;border-radius:50%;background:var(--surface);border:2px solid var(--indigo);display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:.6rem;font-weight:700;color:var(--indigo);z-index:1}
.step h3{font-family:var(--font-h);font-size:.88rem;margin-bottom:4px;color:var(--indigo)}.step p{color:var(--muted);font-size:.84rem;margin:0}

/* ── SINGLE ROTATING TESTIMONIAL with progress bar ── */
.testi-section{padding:80px 0;text-align:center}
.testi-box{max-width:600px;margin:0 auto;min-height:180px;position:relative}
.ts-slide{display:none;animation:tsIn .5s ease}.ts-slide.active{display:block}
@keyframes tsIn{from{opacity:0}to{opacity:1}}
.ts-quote{font-family:var(--font-h);font-size:clamp(.85rem,1.5vw,1.1rem);font-weight:400;line-height:1.7;color:var(--muted);margin-bottom:16px;font-style:italic}
.ts-name{font-weight:700;font-size:.78rem;color:var(--text)}.ts-role{font-size:.64rem;color:var(--muted)}
.ts-progress{display:flex;gap:4px;justify-content:center;margin-top:18px}
.ts-bar{height:3px;border-radius:2px;background:var(--border);cursor:pointer;transition:all var(--tr);flex:0 0 32px}.ts-bar.active{background:var(--indigo);flex:0 0 48px}

/* ── Pricing ── */
.section{padding:80px 0}
.plan-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.plan{background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:28px 22px;display:flex;flex-direction:column;transition:all var(--tr);position:relative}
.plan.pop{border-color:var(--indigo);box-shadow:0 8px 24px rgba(79,70,229,.06)}
.plan.pop::before{content:'POPULAR';position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--indigo);color:var(--white);font-family:var(--font-h);font-size:.48rem;font-weight:700;letter-spacing:2px;padding:4px 14px;border-radius:4px}
.plan:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(79,70,229,.06)}
.plan h3{font-family:var(--font-h);font-size:1rem;margin-bottom:6px}
.plan-price{font-family:var(--font-h);font-size:2rem;font-weight:700;color:var(--indigo);margin-bottom:14px}.plan-price small{font-size:.68rem;color:var(--muted);font-weight:400}
.plan-list{flex:1;margin-bottom:18px}.plan-list li{padding:5px 0;border-bottom:1px solid var(--border-lt);font-size:.76rem;padding-left:16px;position:relative}
.plan-list li::before{content:'/';position:absolute;left:0;color:var(--lime);font-family:var(--font-h);font-weight:700;font-size:.68rem}
.plan .btn{width:100%;justify-content:center}
@media(max-width:700px){.plan-row{grid-template-columns:1fr}}

/* ── Standard elements ── */
.builder-box{max-width:600px;margin:0 auto;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:28px 22px}
.addon-stack{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.addon-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:var(--surface2);border:1.5px solid var(--border-lt);border-radius:6px;cursor:pointer;transition:border-color var(--tr)}.addon-row:hover{border-color:var(--indigo)}
.addon-row label{display:flex;align-items:center;gap:10px;cursor:pointer;flex:1;font-size:.84rem}.addon-row input[type="checkbox"]{accent-color:var(--indigo)}
.addon-cost{font-weight:700;color:var(--lime-dk);font-size:.8rem}
.sup-block{margin-bottom:24px}.range-bar{display:flex;align-items:center;gap:10px}.range-bar input[type="range"]{flex:1;accent-color:var(--indigo)}
.range-val{font-weight:700;color:var(--indigo);font-family:var(--font-h)}
.build-total{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-top:2px solid var(--indigo)}.build-total .bt-val{font-family:var(--font-h);font-size:1.6rem;font-weight:700;color:var(--indigo)}
.co-wrap{max-width:480px;margin:0 auto}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-group{display:flex;flex-direction:column;gap:4px}.form-group.full{grid-column:1/-1}
.form-group label{font-size:.62rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px}
.form-group input,.form-group select,.form-group textarea{padding:12px 14px;background:var(--surface2);border:1.5px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--font-b);font-size:.86rem;transition:border-color var(--tr)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--indigo)}
@media(max-width:500px){.form-grid{grid-template-columns:1fr}}
.cb-agree{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:.7rem;color:var(--muted)}.cb-agree input{margin-top:3px;accent-color:var(--indigo)}.cb-agree a{color:var(--indigo);text-decoration:underline}
.order-box{background:var(--surface2);border:1.5px solid var(--border);border-radius:8px;padding:20px;margin-bottom:20px}.order-box h3{margin-bottom:8px;font-family:var(--font-h)}
.ol{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border-lt);font-size:.82rem}
.ol.tot{border-bottom:none;border-top:2px solid var(--indigo);margin-top:6px;padding-top:8px;font-weight:700}.ol.tot span:last-child{color:var(--indigo)}
.about-body{max-width:600px}.about-body p{color:var(--muted)}
.about-img{aspect-ratio:16/9;overflow:hidden;background:var(--surface2);border-radius:10px;margin:32px 0;border:1.5px solid var(--border)}.about-img img{width:100%;height:100%;object-fit:cover}
.vals-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px;padding-top:32px;border-top:1px solid var(--border)}
.val-card{background:var(--surface);border:1.5px solid var(--border);border-radius:8px;padding:22px 18px}.val-card h3{color:var(--indigo);font-family:var(--font-h);font-size:.82rem;margin-bottom:4px}.val-card p{color:var(--muted);font-size:.8rem;margin:0}
@media(max-width:600px){.vals-row{grid-template-columns:1fr}}
.faq-list{max-width:640px;margin:0 auto}.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%;padding:14px 0;background:none;border:none;color:var(--text);font-family:var(--font-h);font-weight:600;font-size:.85rem;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.faq-q:hover{color:var(--indigo)}
.faq-ic{transition:transform var(--tr);color:var(--muted)}.faq-item.open .faq-ic{transform:rotate(45deg);color:var(--indigo)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}.faq-a-inner{padding:0 0 14px;color:var(--muted);font-size:.84rem}
.ct-two{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.ct-info p{color:var(--muted);font-size:.88rem;margin-bottom:14px}
.ct-meta span{display:block;font-size:.56rem;font-weight:700;color:var(--border);text-transform:uppercase;letter-spacing:2px;margin-top:12px}.ct-meta a{color:var(--indigo)}
.ct-form{background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:26px 22px}
@media(max-width:700px){.ct-two{grid-template-columns:1fr}}
.cta-indigo{padding:80px 0;background:var(--indigo);text-align:center;color:var(--white)}
.cta-indigo h2{color:var(--white);font-family:var(--font-h);max-width:520px;margin:0 auto 10px}.cta-indigo p{color:rgba(255,255,255,.45);margin-bottom:22px}
.pg-head{padding:100px 0 40px;border-bottom:1px solid var(--border)}.pg-head h1{margin-bottom:8px}.pg-head p{color:var(--muted);max-width:480px}
.svc-hero{padding:100px 0 40px;border-bottom:1px solid var(--border)}.svc-hero h1{margin-bottom:8px}
.svc-hero .svc-fprice{font-family:var(--font-h);font-size:1.2rem;font-weight:700;color:var(--lime-dk);margin:6px 0 12px}
.svc-body{max-width:640px;padding:40px 0}.svc-body p{color:var(--muted);font-size:.92rem}
.svc-body .svc-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.legal{max-width:640px;margin:0 auto}.legal h2{font-family:var(--font-h);font-size:.95rem;font-weight:700;margin:22px 0 8px}.legal h2:first-child{margin-top:0}.legal p{color:var(--muted);font-size:.82rem;line-height:1.85}.legal a{color:var(--indigo);text-decoration:underline}
.site-footer{padding:40px 0 18px;border-top:1px solid var(--border)}
.ft-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:18px;margin-bottom:20px}
.ft-brand{font-family:var(--font-h);font-size:.82rem;font-weight:700;color:var(--indigo);margin-bottom:6px}
.ft-brand .slash{color:var(--lime)}
.site-footer p{color:var(--muted);font-size:.68rem;margin-bottom:4px}
.site-footer h4{font-family:var(--font-h);font-size:.46rem;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--border);margin-bottom:8px}
.site-footer a{display:block;color:var(--muted);font-size:.66rem;margin-bottom:3px}.site-footer a:hover{color:var(--indigo)}
.ft-bottom{border-top:1px solid var(--border);padding-top:12px;font-size:.52rem;color:var(--border);text-align:center}
@media(max-width:700px){.ft-cols{grid-template-columns:1fr 1fr}}
.cookie-banner{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:99;background:var(--dark);border:1px solid #3f3f46;border-radius:10px;padding:14px 20px;display:none;align-items:center;gap:12px;flex-wrap:wrap;font-size:.72rem;color:#a1a1aa;box-shadow:0 8px 32px rgba(0,0,0,.15);max-width:440px}
.cookie-banner.show{display:flex}.cookie-banner a{color:var(--lime);text-decoration:underline}
.cb-btns{display:flex;gap:6px}.cb-btn{padding:7px 14px;border-radius:4px;font-weight:700;font-size:.6rem;border:1px solid #3f3f46;background:transparent;cursor:pointer;transition:all var(--tr);color:#a1a1aa}
.cb-accept{border-color:var(--lime);background:var(--lime);color:var(--black)}.cb-decline:hover{border-color:var(--lime)}
@media(max-width:500px){.cookie-banner{left:16px;right:16px;transform:none;max-width:none}}
.res-page{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:100px 32px 60px}.res-icon{font-size:2.4rem;margin-bottom:12px}.res-page h1{font-family:var(--font-h);margin-bottom:8px}.res-page p{color:var(--muted);max-width:360px;margin:0 auto 20px}
.fade-in{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}.fade-in.visible{opacity:1;transform:translateY(0)}
.text-center{text-align:center}.mt-4{margin-top:24px}
.alert{padding:10px 12px;border-radius:6px;margin-bottom:12px;font-size:.8rem}
.alert-error{background:var(--indigo-soft);border:1px solid rgba(79,70,229,.12);color:var(--indigo)}