/* ===================================================================
   SoftSol Systems - Design System
   Palette: cool paper + deep ink + signal teal + amber
   Type: Space Grotesk (display) / Inter (body) / JetBrains Mono (data)
=================================================================== */
:root{
  --paper:#F1F4EF;
  --paper-raised:#FFFFFF;
  --ink:#12211D;
  --ink-soft:#4B5C55;
  --ink-faint:#7C8B84;
  --line:#D9E1D8;
  --signal:#1B8F73;
  --signal-dim:#E4F1EC;
  --amber:#D9862B;
  --amber-dim:#FBEBD8;
  --danger:#C2492F;
  --console-bg:#0F1B17;
  --console-line:#1F332C;
  --shadow: 0 20px 40px -20px rgba(18,33,29,0.25);
  --shadow-lg: 0 30px 70px -25px rgba(18,33,29,0.35);
  --radius-s:6px; --radius-m:12px; --radius-l:22px; --radius-xl:32px;
  --maxw:1180px;
  /* fixed dark surfaces - stay dark in both light and dark themes */
  --surface-dark:#12211D;
  --on-dark:#EAF2EE;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}
[data-theme="dark"]{
  --paper:#0B1512; --paper-raised:#122420; --ink:#EAF2EE; --ink-soft:#AEC1B9; --ink-faint:#6E8A80;
  --line:#1F3730; --signal:#33C79B; --signal-dim:#16302A; --amber:#E8A54A; --amber-dim:#2C2114;
  --console-bg:#070F0D; --console-line:#16261F; --shadow:0 20px 50px -20px rgba(0,0,0,.6); --shadow-lg:0 30px 80px -25px rgba(0,0,0,.7);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}
body{
  font-family:var(--font-body); background:var(--paper); color:var(--ink); line-height:1.55;
  -webkit-font-smoothing:antialiased; transition:background .35s ease, color .35s ease; overflow-x:hidden;
}
body.loaded{animation:bodyFade .5s ease;}
@keyframes bodyFade{ from{opacity:0;} to{opacity:1;} }
img,svg,video{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
section{position:relative;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-0.01em;}
.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--signal);
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px; font-weight:500;
}
.eyebrow::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 3px var(--signal-dim);}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head.center .eyebrow{justify-content:center;}
.section-head.center p{margin-left:auto; margin-right:auto;}
.section-head h2{font-size:clamp(28px,3.4vw,40px); margin-bottom:14px;}
.section-head p{color:var(--ink-soft); font-size:17px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; border-radius:999px;
  font-weight:600; font-size:15px; border:1px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; white-space:nowrap;
}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px);}
.btn-amber{background:var(--amber); color:#221202;}
.btn-amber:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
.btn-invert{background:var(--paper); color:var(--ink);}
.btn-invert:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.btn-sm{padding:10px 18px; font-size:13.5px;}
:focus-visible{outline:2px solid var(--signal); outline-offset:3px;}

/* ============ NAV ============ */
header.nav{position:sticky; top:0; z-index:200; background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:var(--maxw); margin:0 auto;}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:19px;}
.logo-mark{width:32px; height:32px; border-radius:8px; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:14px; font-weight:600;}
nav.links{display:flex; gap:28px; align-items:center;}
nav.links a{font-size:14.5px; font-weight:500; color:var(--ink-soft); transition:color .15s ease; position:relative; padding:4px 0;}
nav.links a:hover, nav.links a.active{color:var(--ink);}
nav.links a.active::after{content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--signal); border-radius:2px;}
.nav-right{display:flex; align-items:center; gap:14px;}
.theme-toggle{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--paper-raised); display:flex; align-items:center; justify-content:center; transition:transform .2s ease;}
.theme-toggle:hover{transform:rotate(20deg);}
.theme-toggle svg{width:17px; height:17px; stroke:var(--ink);}
.burger{display:none; width:38px; height:38px; border-radius:8px; border:1px solid var(--line); background:var(--paper-raised); align-items:center; justify-content:center;}
.burger svg{width:18px; height:18px; stroke:var(--ink);}
.mobile-panel{display:none; flex-direction:column; gap:2px; padding:10px 28px 22px; border-bottom:1px solid var(--line); background:var(--paper);}
.mobile-panel a{padding:12px 4px; font-weight:500; border-bottom:1px solid var(--line); font-size:15px;}
.mobile-panel.open{display:flex;}
@media (max-width:900px){ nav.links{display:none;} .burger{display:flex;} .nav-right .btn-primary{display:none;} }

/* ============ VIDEO HERO ============ */
.video-hero{position:relative; min-height:92vh; display:flex; align-items:center; overflow:hidden; isolation:isolate;}
.video-hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.video-hero .duotone{position:absolute; inset:0; z-index:1; mix-blend-mode:multiply; background:linear-gradient(160deg, rgba(18,33,29,.92), rgba(27,143,115,.55) 55%, rgba(217,134,43,.35));}
.video-hero .scrim{position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(9,17,14,.55) 0%, rgba(9,17,14,.35) 40%, rgba(9,17,14,.85) 100%);}
.video-hero canvas.mesh{position:absolute; inset:0; z-index:3; opacity:.55; pointer-events:none;}
.video-hero .hero-content{position:relative; z-index:4; color:#F3F8F5; width:100%; padding:120px 0 90px; text-align:center;}
.video-hero .eyebrow{color:#7CE0BE; justify-content:center;}
.video-hero .eyebrow::before{background:#7CE0BE; box-shadow:0 0 0 3px rgba(124,224,190,.18);}
.video-hero h1{font-size:clamp(36px,5.4vw,64px); max-width:820px; margin:0 auto 22px; color:#fff;}
.video-hero h1 em{font-style:normal; color:#7CE0BE;}
.video-hero p.lead{font-size:18.5px; max-width:560px; color:rgba(243,248,245,.82); margin:0 auto 34px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:52px;}
.hero-stats{display:grid; grid-template-columns:repeat(4,auto); gap:38px; justify-content:center;}
.hero-stats .stat b{display:block; font-family:var(--font-display); font-size:27px; color:#fff;}
.hero-stats .stat span{font-size:12px; color:rgba(243,248,245,.6); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em;}
.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:4; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(243,248,245,.7); font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;}
.scroll-cue .line{width:1px; height:30px; background:rgba(243,248,245,.4); position:relative; overflow:hidden;}
.scroll-cue .line::after{content:''; position:absolute; top:-30px; left:0; width:100%; height:30px; background:#7CE0BE; animation:scrollDown 1.8s ease-in-out infinite;}
@keyframes scrollDown{ 0%{top:-30px;} 100%{top:30px;} }
@media (max-width:940px){ .hero-stats{grid-template-columns:repeat(2,auto); row-gap:20px;} }

/* ============ PAGE HEADER (sub-pages) ============ */
.page-header{position:relative; padding:150px 0 90px; overflow:hidden; background:var(--surface-dark); color:var(--on-dark);}
.page-header canvas.mesh{position:absolute; inset:0; opacity:.5;}
.page-header .blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.35; pointer-events:none;}
.page-header .blob1{width:420px; height:420px; background:var(--signal); top:-140px; right:-80px; animation:blobMove 14s ease-in-out infinite;}
.page-header .blob2{width:320px; height:320px; background:var(--amber); bottom:-160px; left:-60px; animation:blobMove 18s ease-in-out infinite reverse;}
@keyframes blobMove{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(40px,-30px) scale(1.15);}}
.page-header .inner{position:relative; z-index:2;}
.page-header h1{font-size:clamp(32px,4.6vw,52px); margin-bottom:16px; color:#fff;}
.page-header p{font-size:17px; color:rgba(234,242,238,.75); max-width:560px;}
.breadcrumb{font-family:var(--font-mono); font-size:12px; color:rgba(234,242,238,.55); margin-bottom:20px; text-transform:uppercase; letter-spacing:.08em;}
.breadcrumb a{color:#7CE0BE;}

/* ============ MARQUEE ============ */
.marquee-wrap{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; background:var(--paper-raised); overflow:hidden;}
.marquee-track{display:flex; gap:64px; width:max-content; animation:marquee 26s linear infinite;}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink-soft); white-space:nowrap; opacity:.75;}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ============ FEATURE ROWS ============ */
.feature-row{padding:100px 0; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.feature-row.reverse .art{order:2;}
.feature-row h3{font-size:clamp(24px,2.6vw,32px); margin-bottom:16px;}
.feature-row p{color:var(--ink-soft); font-size:16px; margin-bottom:22px;}
.feature-row ul{display:flex; flex-direction:column; gap:10px;}
.feature-row li{display:flex; gap:10px; align-items:flex-start; font-size:15px;}
.feature-row li svg{flex-shrink:0; width:18px; height:18px; stroke:var(--signal); margin-top:2px;}
.art{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-l); aspect-ratio:4/3.1; position:relative; overflow:hidden; box-shadow:var(--shadow);}
@media (max-width:900px){ .feature-row{grid-template-columns:1fr; padding:64px 0;} .feature-row.reverse .art{order:0;} }

.art-assembly{padding:30px;}
.node{position:absolute; border-radius:14px; background:var(--signal-dim); border:1px solid var(--line); display:flex; align-items:center; gap:8px; padding:10px 12px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); white-space:nowrap; transform:translate(-50%,-50%); animation:floaty 5s ease-in-out infinite; z-index:2;}
.node .dot{width:8px; height:8px; border-radius:50%; background:var(--signal);}
.art-assembly .node2{top:50%; left:50%; background:var(--signal); border-color:var(--signal); color:#08130F; animation-delay:.9s;}
.art-assembly .node2 .dot{background:#08130F;}
.art-assembly .node1{top:24%; left:20%; animation-delay:.2s;}
.art-assembly .node3{top:76%; left:20%; animation-delay:1.6s;}
.art-assembly .node4{top:24%; left:80%; animation-delay:.5s;}
.art-assembly .node5{top:76%; left:80%; animation-delay:1.2s;}
@keyframes floaty{0%,100%{transform:translate(-50%,-50%);} 50%{transform:translate(-50%,calc(-50% - 7px));}}
.art-assembly svg.lines{position:absolute; inset:0; width:100%; height:100%; z-index:1;}
.art-assembly .lines path{stroke:var(--signal); stroke-width:1.5; fill:none; opacity:.55;}

.art-roadmap{padding:34px; display:flex; flex-direction:column; justify-content:center;}
.rline{display:flex; gap:14px; align-items:flex-start; position:relative; padding-bottom:30px;}
.rline:last-child{padding-bottom:0;}
.rline::before{content:''; position:absolute; left:9px; top:22px; bottom:-2px; width:1px; background:var(--line);}
.rline:last-child::before{display:none;}
.rdot{width:19px; height:19px; border-radius:50%; border:2px solid var(--signal); background:var(--paper-raised); flex-shrink:0; display:flex; align-items:center; justify-content:center; z-index:1;}
.rdot.filled{background:var(--signal);}
.rtext b{display:block; font-size:14px; font-family:var(--font-display); margin-bottom:2px;}
.rtext span{font-size:12.5px; color:var(--ink-faint);}

/* console */
.console{background:var(--console-bg); border-radius:var(--radius-l); padding:24px 22px; box-shadow:var(--shadow-lg); font-family:var(--font-mono); font-size:13.2px; color:#CFEAE0; min-height:340px; position:relative; border:1px solid var(--console-line);}
.console-bar{display:flex; align-items:center; gap:7px; margin-bottom:18px;}
.console-dot{width:10px; height:10px; border-radius:50%;}
.console-dot.r{background:#E5675B;} .console-dot.y{background:#E5B75B;} .console-dot.g{background:#5BC98B;}
.console-title{margin-left:auto; color:#6E8A80; font-size:11.5px;}
.console-body{min-height:250px;}
.console-line{opacity:0; animation:reveal .4s forwards; margin-bottom:9px; white-space:pre-wrap;}
.console-line.ok{color:#5BC98B;} .console-line.dim{color:#5C7A70;} .console-line .prompt{color:var(--signal);}
.cursor{display:inline-block; width:7px; height:14px; background:var(--signal); vertical-align:middle; animation:blink 1s step-end infinite;}
@keyframes reveal{ to{opacity:1;} }
@keyframes blink{ 50%{opacity:0;} }
.console-status{position:absolute; bottom:20px; left:22px; right:22px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--console-line); padding-top:14px; font-size:11.5px; color:#6E8A80;}
.console-status .live{color:#5BC98B; display:flex; align-items:center; gap:6px;}
.console-status .live::before{content:''; width:7px; height:7px; border-radius:50%; background:#5BC98B; animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}

/* ============ PROCESS PIPELINE ============ */
.process{padding:100px 0; background:var(--paper-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.pipeline{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; margin-top:20px;}
.pipeline::before{content:''; position:absolute; top:23px; left:6%; right:6%; height:1px; background:var(--line); z-index:0;}
.pstage{position:relative; z-index:1; padding:0 18px;}
.pstage:first-child{padding-left:0;}
.pnum{width:46px; height:46px; border-radius:50%; background:var(--paper-raised); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:600; font-size:14px; margin-bottom:20px; transition:all .4s ease; color:var(--ink-faint);}
.pstage.active .pnum{background:var(--signal); border-color:var(--signal); color:#08130F;}
.pstage h4{font-size:16.5px; margin-bottom:8px;}
.pstage p{font-size:14px; color:var(--ink-soft);}
@media (max-width:900px){ .pipeline{grid-template-columns:1fr; gap:34px;} .pipeline::before{display:none;} .pstage{padding-left:0;} }

/* ============ SERVICES GRID ============ */
.services{padding:100px 0;}
.service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.service-card{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-m); padding:28px; transition:transform .2s ease, box-shadow .2s ease;}
.service-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.service-icon{width:42px; height:42px; border-radius:10px; background:var(--signal-dim); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.service-icon svg{width:20px; height:20px; stroke:var(--signal);}
.service-card h4{font-size:17px; margin-bottom:8px;}
.service-card p{font-size:14.5px; color:var(--ink-soft);}
@media (max-width:820px){ .service-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .service-grid{grid-template-columns:1fr;} }

/* engagement models (services page) */
.model-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.model-card{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-l); padding:32px; position:relative; transition:transform .2s ease, box-shadow .2s ease;}
.model-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);}
.model-card.featured{border-color:var(--signal); box-shadow:var(--shadow);}
.model-card .tag{position:absolute; top:-12px; right:24px; background:var(--signal); color:#08130F; font-family:var(--font-mono); font-size:11px; padding:5px 12px; border-radius:999px; font-weight:600;}
.model-card h4{font-size:19px; margin-bottom:8px;}
.model-card .price{font-family:var(--font-display); font-size:15px; color:var(--signal); margin-bottom:16px;}
.model-card ul{display:flex; flex-direction:column; gap:10px; margin-bottom:20px;}
.model-card li{font-size:14px; color:var(--ink-soft); display:flex; gap:8px;}
.model-card li svg{width:16px; height:16px; stroke:var(--signal); flex-shrink:0; margin-top:2px;}
@media (max-width:900px){ .model-grid{grid-template-columns:1fr;} }

/* ============ STATS BAND ============ */
.stats-band{padding:80px 0; background:var(--surface-dark); color:var(--on-dark); position:relative; overflow:hidden;}
.stats-band canvas.mesh{position:absolute; inset:0; opacity:.35;}
.stats-band .inner{position:relative; z-index:2;}
.stats-band .section-head h2, .stats-band .section-head p{color:var(--on-dark);}
.stats-band .section-head p{opacity:.7;}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.stat-card{border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-m); padding:26px; background:rgba(255,255,255,.04); backdrop-filter:blur(6px);}
.stat-card b{display:block; font-family:var(--font-display); font-size:34px; margin-bottom:6px;}
.stat-card span{font-size:13px; opacity:.65; font-family:var(--font-mono);}
@media (max-width:820px){ .stat-grid{grid-template-columns:1fr 1fr;} }

/* ============ TESTIMONIALS ============ */
.testimonials{padding:100px 0 56px;}
.t-wrap{position:relative; max-width:760px; margin:0 auto;}
.t-card{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-l); padding:44px; text-align:center; display:none; box-shadow:var(--shadow);}
.t-card.active{display:block; animation:fadein .5s ease;}
@keyframes fadein{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.stars{color:var(--amber); font-size:15px; letter-spacing:2px; margin-bottom:18px;}
.t-card p.quote{font-size:19px; font-family:var(--font-display); font-weight:500; line-height:1.45; margin-bottom:26px;}
.t-person{display:flex; align-items:center; justify-content:center; gap:12px;}
.t-avatar{width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:600; font-size:13px; color:#fff; object-fit:cover; overflow:hidden; flex-shrink:0; border:2px solid var(--line);}
.t-person div{text-align:left;}
.t-person b{display:block; font-size:14.5px;}
.t-person span{font-size:12.5px; color:var(--ink-faint);}
.t-controls{display:flex; justify-content:center; gap:10px; margin-top:26px;}
.t-dot{width:8px; height:8px; border-radius:50%; background:var(--line); border:none; transition:background .2s ease, transform .2s ease;}
.t-dot.active{background:var(--signal); transform:scale(1.3);}
.t-arrow{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:var(--paper-raised); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}
.t-arrow svg{width:16px; height:16px; stroke:var(--ink);}
.t-arrow.prev{left:-58px;} .t-arrow.next{right:-58px;}
@media (max-width:860px){ .t-arrow{display:none;} }

/* ============ INDUSTRIES ============ */
.industries{padding:56px 0 90px; text-align:center;}
.chip-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
.chip{padding:11px 20px; border:1px solid var(--line); border-radius:999px; font-size:14px; font-weight:500; background:var(--paper-raised); transition:all .2s ease;}
.chip:hover{border-color:var(--signal); color:var(--signal); transform:translateY(-2px);}
.industry-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:6px; text-align:left;}
.industry-card{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-m); padding:22px; display:flex; flex-direction:column; gap:9px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; color:var(--ink);}
.industry-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--signal);}
.industry-card .ind-ic{width:40px; height:40px; border-radius:10px; background:var(--signal-dim); display:flex; align-items:center; justify-content:center; margin-bottom:2px;}
.industry-card .ind-ic svg{width:19px; height:19px; stroke:var(--signal);}
.industry-card h4{font-size:16px;}
.industry-card p{font-size:13.3px; color:var(--ink-soft); line-height:1.5;}
.industry-card .go{margin-top:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--signal); display:inline-flex; align-items:center; gap:6px; padding-top:4px;}
.industry-card .go svg{width:14px; height:14px; stroke:var(--signal);}
@media (max-width:900px){ .industry-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .industry-grid{grid-template-columns:1fr;} }

/* ============ VALUES / TIMELINE (about page) ============ */
.value-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.value-card{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-m); padding:26px; text-align:left;}
.value-card .service-icon{margin-bottom:16px;}
.value-card h4{font-size:16px; margin-bottom:8px;}
.value-card p{font-size:13.8px; color:var(--ink-soft);}
@media (max-width:900px){ .value-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .value-grid{grid-template-columns:1fr;} }

.timeline{position:relative; max-width:720px; margin:0 auto; padding-left:34px;}
.timeline::before{content:''; position:absolute; left:8px; top:6px; bottom:6px; width:1px; background:var(--line);}
.tl-item{position:relative; padding-bottom:44px;}
.tl-item:last-child{padding-bottom:0;}
.tl-dot{position:absolute; left:-34px; top:2px; width:17px; height:17px; border-radius:50%; background:var(--signal); border:3px solid var(--paper);}
.tl-item b.year{display:block; font-family:var(--font-mono); color:var(--signal); font-size:13px; margin-bottom:6px;}
.tl-item h4{font-size:17px; margin-bottom:6px;}
.tl-item p{color:var(--ink-soft); font-size:14.5px; max-width:520px;}

/* glass CTA banner */
.cta-banner{padding:90px 0; position:relative; overflow:hidden; background:var(--surface-dark);}
.cta-banner canvas.mesh{position:absolute; inset:0; opacity:.4;}
.cta-banner .glass{position:relative; z-index:2; text-align:center; max-width:640px; margin:0 auto; color:var(--on-dark);}
.cta-banner h2{font-size:clamp(26px,3.4vw,38px); margin-bottom:16px; color:#fff;}
.cta-banner p{color:rgba(234,242,238,.75); margin-bottom:30px; font-size:16.5px;}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ============ ESTIMATOR ============ */
.estimator{padding:100px 0; background:var(--paper-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.est-wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:start;}
.role-list{display:flex; flex-direction:column; gap:12px;}
.role-row{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--paper);}
.role-info b{display:block; font-size:15px;}
.role-info span{font-size:12.5px; color:var(--ink-faint); font-family:var(--font-mono);}
.stepper{display:flex; align-items:center; gap:14px;}
.stepper button{width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--paper-raised); font-size:16px; display:flex; align-items:center; justify-content:center; color:var(--ink); font-weight:600;}
.stepper button:hover{border-color:var(--signal); color:var(--signal);}
.stepper output{font-family:var(--font-mono); font-weight:600; min-width:16px; text-align:center;}
.est-summary{position:sticky; top:96px; background:var(--surface-dark); color:var(--on-dark); border-radius:var(--radius-l); padding:32px;}
.est-summary h4{font-size:14px; text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-mono); opacity:.6; margin-bottom:18px; font-weight:500;}
.est-row{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:14.5px;}
.est-total{font-family:var(--font-display); font-size:30px; margin:18px 0 6px;}
.est-sub{font-size:12.5px; opacity:.6; margin-bottom:24px;}
.est-summary .btn{width:100%;}
@media (max-width:900px){ .est-wrap{grid-template-columns:1fr;} .est-summary{position:static;} }

/* ============ FAQ ============ */
.faq{padding:100px 0; max-width:820px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; padding:22px 4px; background:none; border:none; text-align:left; font-family:var(--font-display); font-size:16.5px; font-weight:600; color:var(--ink);}
.faq-q .plus{width:22px; height:22px; position:relative; flex-shrink:0;}
.faq-q .plus::before, .faq-q .plus::after{content:''; position:absolute; background:var(--ink); transition:transform .25s ease;}
.faq-q .plus::before{width:100%; height:1.5px; top:50%; left:0; transform:translateY(-50%);}
.faq-q .plus::after{height:100%; width:1.5px; left:50%; top:0; transform:translateX(-50%);}
.faq-item.open .plus::after{transform:translateX(-50%) rotate(90deg); opacity:0;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a p{padding:0 4px 22px; color:var(--ink-soft); font-size:15px; max-width:640px;}

/* ============ CONTACT ============ */
.contact{padding:100px 0;}
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px;}
.contact-info h2{font-size:clamp(26px,3vw,34px); margin-bottom:16px;}
.contact-info p{color:var(--ink-soft); margin-bottom:30px; max-width:400px;}
.contact-line{display:flex; gap:14px; align-items:flex-start; margin-bottom:22px;}
.contact-line svg{width:19px; height:19px; stroke:var(--signal); margin-top:2px; flex-shrink:0;}
.contact-line b{display:block; font-size:14.5px;}
.contact-line span{font-size:14px; color:var(--ink-soft);}
.geo-map{margin-top:30px; border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--line); position:relative; padding:34px 22px 22px; background:linear-gradient(160deg,#0f211c,#16342b);}
.geo-map .geo-cap{position:absolute; top:15px; left:20px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(124,224,190,.85);}
.geo-map svg{width:100%; height:auto; display:block; overflow:visible;}
.geo-map .land{fill:rgba(124,224,190,.09); stroke:rgba(124,224,190,.5); stroke-width:1.3; stroke-linejoin:round;}
.geo-map .pin{fill:#7CE0BE;}
.geo-map .pin.home{fill:#E8A54A;}
.geo-map .label{fill:#EAF2EE; font-family:var(--font-mono); font-size:9.5px;}
.geo-map .label.home{fill:#E8A54A;}
@keyframes ping{ 0%{transform:scale(.5); opacity:.8;} 100%{transform:scale(2.6); opacity:0;} }
form.lead-form{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-l); padding:34px; box-shadow:var(--shadow);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.field{display:flex; flex-direction:column; gap:7px;}
.field.full{grid-column:1/-1;}
.field label{font-size:13px; font-weight:600; color:var(--ink-soft);}
.field input, .field textarea, .field select{padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--paper); font-family:inherit; font-size:14.5px; color:var(--ink); resize:vertical;}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--signal); outline:none;}
.field .err{font-size:12px; color:var(--danger); min-height:14px;}
.form-success{display:none; text-align:center; padding:30px 10px;}
.form-success.show{display:block;}
.form-success svg{width:44px; height:44px; stroke:var(--signal); margin:0 auto 14px;}
.form-success h4{font-size:19px; margin-bottom:8px;}
.form-success p{color:var(--ink-soft); font-size:14.5px;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} .form-grid{grid-template-columns:1fr;} }

/* ============ TERMS ============ */
.terms-body{padding:80px 0 100px; max-width:780px; margin:0 auto;}
.terms-body h2{font-size:21px; margin:36px 0 12px;}
.terms-body h2:first-child{margin-top:0;}
.terms-body p, .terms-body li{color:var(--ink-soft); font-size:15px; margin-bottom:12px;}
.terms-body ul{padding-left:20px; list-style:disc;}
.terms-updated{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint); margin-bottom:36px; display:block;}

/* ============ FOOTER ============ */
footer{background:var(--surface-dark); color:var(--on-dark); padding:70px 0 26px; margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:1.4fr .8fr .8fr 1.1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.12);}
.footer-brand .logo{color:var(--on-dark);}
.footer-brand .logo-mark{background:var(--paper); color:var(--ink);}
.footer-brand p{color:rgba(234,242,238,.6); font-size:14px; margin-top:14px; max-width:280px;}
.footer-address{display:flex; gap:8px; align-items:flex-start; color:rgba(234,242,238,.72); font-size:13.5px; margin-top:14px; max-width:290px;}
.footer-address svg{width:16px; height:16px; stroke:var(--signal); flex-shrink:0; margin-top:2px;}
.footer-col h5{font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.55; margin-bottom:18px; font-weight:500;}
.footer-col a, .footer-col span{display:block; font-size:14.5px; color:rgba(234,242,238,.8); margin-bottom:12px;}
.footer-col a:hover{color:var(--signal);}
.newsletter{display:flex; gap:8px; margin-top:6px;}
.newsletter input{flex:1; padding:11px 14px; border-radius:8px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); color:var(--on-dark); font-size:13.5px;}
.newsletter button{padding:11px 16px; border-radius:8px; background:var(--signal); color:#08130F; border:none; font-weight:600; font-size:13.5px;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:12px;}
.footer-bottom p{font-size:13px; color:rgba(234,242,238,.5);}
.socials{display:flex; gap:10px;}
.socials a{width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; transition:transform .2s ease, border-color .2s ease;}
.socials a:hover{transform:translateY(-3px); border-color:var(--signal);}
.socials svg{width:15px; height:15px; stroke:var(--on-dark);}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;} }

.back-top{position:fixed; bottom:26px; right:26px; width:46px; height:46px; border-radius:50%; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .2s ease; z-index:90; box-shadow:var(--shadow);}
.back-top.show{opacity:1; pointer-events:auto;}
.back-top:hover{transform:translateY(-3px);}
.back-top svg{width:18px; height:18px; stroke:var(--paper);}

[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
[data-reveal].in{opacity:1; transform:translateY(0);}
[data-reveal="left"]{transform:translateX(-24px);}
[data-reveal="left"].in{transform:translateX(0);}
[data-reveal="right"]{transform:translateX(24px);}
[data-reveal="right"].in{transform:translateX(0);}

/* ============ BRAND LOGO (real SoftSol Systems logo) ============ */
.logo{gap:10px;}
.brand-logo{
  display:inline-block; width:46px; height:46px; flex-shrink:0;
  background-image:url("assets/logo.png");
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
.footer-brand .brand-logo{filter:brightness(0) invert(1);}
[data-theme="dark"] header.nav .brand-logo{filter:brightness(0) invert(1);}

/* ============ SCROLL PROGRESS + STICKY NAV SHADOW ============ */
.scroll-progress{position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,var(--signal),var(--amber)); z-index:400; transition:width .12s linear;}
header.nav.scrolled{box-shadow:0 8px 30px -16px rgba(18,33,29,.4);}

/* business hours contact line */
.contact-line.hours span{font-family:var(--font-mono); font-size:13px;}