/* ═══════════════════════════════════════════════════
   STELV.DEV — SHARED STYLES
   Used across all pages (homepage, features, pricing, terms)
   ═══════════════════════════════════════════════════ */

:root{
  /* ── PAGE PALETTE — light "engineering paper" ── */
  --bg:#f6f5f0;          /* paper background */
  --bg2:#ecebe3;         /* deeper paper, tinted card */
  --bg3:#e1dfd3;         /* deepest neutral */
  --bgc:#fafaf6;         /* near-white card */
  --bg-warm:#f1ede0;     /* warm tint */
  --bg-elevated:#ffffff; /* elevated white card */
  --bg-deep:#11161e;     /* dark sections (footer / dramatic) */

  --txt:#161e2a;         /* deep navy/black text */
  --txt2:#2c3645;        /* secondary text */
  --dim:#5f6a7c;         /* dimmed text (still readable) */
  --muted:#8d96a6;       /* muted labels */

  /* Primary accent — industrial amber (warm, technical) */
  --accent:#c8721c;
  --bright:#e0892b;
  --accent-muted:rgba(200,114,28,.09);
  --accent-deep:#9a5612;

  /* Gold — secondary warm accent (kept) */
  --gold:#b08a2e;
  --gold-warm:#c69d3d;
  --gold-muted:rgba(176,138,46,.12);

  /* Teal — demoted to data-only accent (mockups, live dots, status) */
  --teal:#0e9aa7;
  --teal-bright:#1ec8d8;
  --teal-muted:rgba(30,200,216,.08);

  /* Borders for light theme */
  --b:#dad6c8;
  --bm:#bdb6a4;
  --ba:#9a937f;

  --shadow-sm:0 1px 2px rgba(20,30,42,.04),0 2px 6px rgba(20,30,42,.05);
  --shadow-md:0 4px 12px rgba(20,30,42,.06),0 12px 28px rgba(20,30,42,.07);
  --shadow-lg:0 12px 28px rgba(20,30,42,.10),0 24px 56px rgba(20,30,42,.10);
  --shadow-glow:0 0 32px rgba(200,114,28,.14);
  --shadow-gold:0 0 32px rgba(176,138,46,.16);

  --radius-sm:4px;--radius-md:6px;--radius-lg:10px;
  --fd:'Barlow Condensed',Impact,sans-serif;
  --fb:'Syne',system-ui,sans-serif;
  --fm:'DM Mono',monospace;
}

/* ── MOCKUP-CONTEXT OVERRIDES ──
   Mockups stay dark to read as "data screens" against the light page.
   Re-defining these custom properties on a mockup wrapper makes every
   `var(--bg)` / `var(--bg2)` etc. inside the mockup resolve to the dark
   palette — without editing inline styles in the HTML. */
.vx-mockup,.ft-mockup,.bwin{
  --bg:#0d1421;
  --bg2:#142031;
  --bg3:#1c2c44;
  --bgc:#0c1320;
  --bg-elevated:#1a2638;
  --txt:#dfe6f0;
  --txt2:#c2cdde;
  --dim:#7a8aa0;
  --muted:#5a697f;
  --accent:#1ec8d8;       /* teal in mockup interior (data accent) */
  --bright:#4de8f5;
  --accent-muted:rgba(30,200,216,.10);
  --b:#1a2740;
  --bm:#243352;
  --ba:#345070;
  background:var(--bg);
  color:var(--txt);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--fb);font-size:16px;line-height:1.6;overflow-x:hidden}
/* Subtle paper-grain overlay for the light theme — keeps the bg from feeling flat */
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.06;mix-blend-mode:multiply;pointer-events:none;z-index:9999}
a{color:inherit;text-decoration:none}
.page{display:none}.page.active{display:block}
.container{max-width:1240px;margin:0 auto;padding:0 2rem}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 2.5rem;height:64px;display:flex;align-items:center;justify-content:space-between;background:rgba(246,245,240,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--b);transition:top .3s}
.nlogo{display:flex;align-items:center;gap:.75rem}
.nlogo img{height:30px;width:30px;object-fit:contain}
.nwm{font-family:var(--fm);font-size:.78rem;letter-spacing:.14em;color:var(--txt);font-weight:500}
.nwm span{color:var(--accent)}
.nlinks{display:flex;gap:2rem;list-style:none;align-items:center}
.nlinks a{font-family:var(--fm);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);transition:color .2s}
.nlinks a:hover,.nlinks a.active{color:var(--txt)}
.npill{color:var(--accent)!important;border:1px solid var(--accent)!important;padding:.36rem 1rem;border-radius:2px;transition:all .25s cubic-bezier(.16,1,.3,1)!important}
.npill:hover{background:var(--accent)!important;color:#fff!important;box-shadow:0 0 16px rgba(200,114,28,.25)}
.hamburger{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:4px;background:none;border:none}
.hamburger span{display:block;width:20px;height:2px;background:var(--txt);transition:all .3s}
.hamburger.open span:first-child{transform:rotate(45deg) translate(4px,4px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:last-child{transform:rotate(-45deg) translate(4px,-4px)}
.mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;background:rgba(246,245,240,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--b);padding:1.5rem 2rem;z-index:99;box-shadow:0 12px 24px rgba(20,30,42,.08)}
.mobile-menu.open{display:flex;flex-direction:column;gap:1.25rem}
.mobile-menu a{font-family:var(--fm);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:.5rem 0}
.mobile-menu a:hover{color:var(--txt)}


/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.75rem;font-family:var(--fm);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);border:none;position:relative;overflow:hidden;border-radius:var(--radius-sm)}
.btn-p{background:var(--accent);color:#fff;font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 1px 2px rgba(20,30,42,.12)}
.btn-p:hover{background:var(--bright);transform:translateY(-2px);box-shadow:0 8px 20px rgba(200,114,28,.32),0 0 0 1px rgba(200,114,28,.15)}
.btn-p:active{transform:translateY(0) scale(.98);box-shadow:0 2px 6px rgba(200,114,28,.25);transition-duration:.1s}
.btn-g{background:transparent;color:var(--txt2);border:1px solid var(--bm)}
.btn-g:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-muted)}
.btn-g:active{transform:scale(.98);transition-duration:.1s}
.btn-lg{padding:1rem 2.25rem;font-size:.78rem}
.btn-glow{animation:btnGlow 3s ease-in-out infinite}
@keyframes btnGlow{0%,100%{box-shadow:0 0 5px rgba(200,114,28,.18),0 1px 2px rgba(20,30,42,.12)}50%{box-shadow:0 0 24px rgba(200,114,28,.36),0 0 48px rgba(200,114,28,.14)}}

/* ── TICKER ── */
.ticker{overflow:hidden;background:var(--bg-deep);padding:.55rem 0;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent)}
.ticker-t{display:flex;width:max-content;animation:tick 38s linear infinite}
.ti{font-family:var(--fm);font-size:.67rem;letter-spacing:.1em;color:rgba(255,255,255,.72);white-space:nowrap;padding:0 1.5rem}
.ti strong{color:var(--accent)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SCROLL REVEAL ── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity .7s ease,transform .7s ease}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(30px);transition:opacity .7s ease,transform .7s ease}
.reveal-right.visible{opacity:1;transform:translateX(0)}

/* ── LABEL + SH2 ── */
.ltag{font-family:var(--fm);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.sh2{font-family:var(--fd);font-size:clamp(2rem,4.5vw,3.5rem);font-weight:900;line-height:.95;text-transform:uppercase}
.sh2 em{color:var(--accent);font-style:italic}

/* ── FAQ ── */
.faq-i{border-bottom:1px solid var(--b)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:1.65rem 0;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--txt);user-select:none;gap:1rem;transition:color .2s}
.faq-q:hover{color:var(--accent)}
.faq-tog{color:var(--accent);font-size:1.1rem;flex-shrink:0;transition:transform .25s;font-family:var(--fm)}
.faq-i.open .faq-tog{transform:rotate(45deg)}
.faq-a{display:none;padding:0 0 1.65rem;font-size:.85rem;color:var(--dim);line-height:1.75}
.faq-i.open .faq-a{display:block}

/* ── FOOTER ──
   Footer goes deep dark for contrast — like a magazine masthead at the bottom. */
footer{border-top:1px solid var(--b);padding:3rem 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;background:var(--bg-deep);color:#dfe6f0}
.flogo{display:flex;align-items:center;gap:.65rem}
.flogo img{height:26px;width:26px;object-fit:contain;filter:brightness(1.2)}
.fwm{font-family:var(--fm);font-size:.76rem;letter-spacing:.14em;color:#9ba6b8}
.fwm span{color:var(--accent)}
.flinks{display:flex;gap:2rem;list-style:none;flex-wrap:wrap}
.flinks a{font-family:var(--fm);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:#9ba6b8;transition:color .2s}
.flinks a:hover{color:#fff}
.fcopy{font-family:var(--fm);font-size:.62rem;color:#7a8497;letter-spacing:.08em}

/* ── BACK TO TOP ── */
.btt{position:fixed;bottom:80px;right:2rem;width:42px;height:42px;background:#fff;border:1px solid var(--bm);display:flex;align-items:center;justify-content:center;color:var(--accent);cursor:pointer;z-index:95;opacity:0;pointer-events:none;transition:all .25s;font-size:1rem;box-shadow:var(--shadow-md);border-radius:var(--radius-sm)}
.btt.show{opacity:1;pointer-events:auto}
.btt:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ── SERVICE GRID (reusable) ── */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--b);margin-top:3rem;border-radius:4px;overflow:hidden;border:1px solid var(--b)}
.svc-card{padding:2.75rem;transition:all .35s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;background:var(--bgc)}
.svc-card:hover{background:var(--bg-elevated);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.svc-icon{font-size:1.5rem;margin-bottom:1.25rem;display:block}
.svc-title{font-family:var(--fd);font-size:1.4rem;font-weight:800;text-transform:uppercase;margin-bottom:.5rem;line-height:1}
.svc-price{font-family:var(--fm);font-size:.72rem;color:var(--accent);letter-spacing:.08em;margin-bottom:.75rem;display:block}
.svc-desc{font-size:.82rem;color:var(--dim);line-height:1.75}
.svc-link{font-family:var(--fm);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-top:1rem;display:inline-flex;align-items:center;gap:.3rem;transition:gap .2s}
.svc-link:hover{gap:.5rem}

/* ── BROWSER MOCKUP (reusable) ── */
.bwrap{width:100%;max-width:460px}
.bwin{border:1px solid var(--ba);background:var(--bg2);overflow:hidden;border-radius:8px;box-shadow:var(--shadow-lg),0 0 0 1px rgba(30,200,216,.06),0 0 60px rgba(30,200,216,.04)}
.bbar{background:var(--bg3);padding:.58rem 1rem;display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--b)}
.bdots{display:flex;gap:.32rem}
.bdots span{width:9px;height:9px;border-radius:50%}
.bdr{background:#ff5f57}.bdy{background:#febc2e}.bdg{background:#28c840}
.burl{flex:1;background:var(--bg);border:1px solid var(--b);padding:.26rem .62rem;font-family:var(--fm);font-size:.6rem;color:var(--dim)}

/* ── ICON SPRITE UTILITY ── */
.vx-icon{width:1.5em;height:1.5em;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:-.18em;display:inline-block}
.vx-icon-lg{width:2.25em;height:2.25em}
.vx-icon-xl{width:3rem;height:3rem;stroke-width:1.25}
.vx-icon-sm{width:1rem;height:1rem;stroke-width:1.75}

/* ── SPACING RHYTHM ── */
.sect-tight{padding:5rem 0}
.sect-norm{padding:7rem 0}
.sect-loose{padding:9rem 0}
@media(max-width:768px){
  .sect-tight{padding:3.5rem 0}
  .sect-norm{padding:4.5rem 0}
  .sect-loose{padding:5.5rem 0}
}

/* ── GOLD ACCENT STRIP (trial banner / mid-page CTA) — warm strip on light page ── */
.gold-strip{background:linear-gradient(90deg,#f6efd9,#f1e6c1,#f6efd9);border-top:1px solid rgba(176,138,46,.25);border-bottom:1px solid rgba(176,138,46,.25);padding:1.4rem 2rem;text-align:center;font-family:var(--fm);font-size:.78rem;letter-spacing:.1em;color:#7a5e1e;text-transform:uppercase}
.gold-strip strong{color:#5e4612;font-weight:700}
.gold-strip a{color:#5e4612;text-decoration:underline;text-underline-offset:3px}
.gold-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .55rem;background:rgba(176,138,46,.14);color:#7a5e1e;border:1px solid rgba(176,138,46,.32);border-radius:99px;font-family:var(--fm);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}

/* ── EDITORIAL PULL QUOTE ── */
.pull-quote{position:relative;padding:2.5rem 0 2.5rem 2.5rem;border-left:3px solid var(--accent);font-family:var(--fb);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.45;font-style:italic;color:var(--txt2);max-width:62ch}
.pull-quote::before{content:'\201C';position:absolute;top:-.4rem;left:1rem;font-family:var(--fd);font-size:5rem;color:var(--accent);opacity:.32;line-height:1;font-style:normal}

/* ── INDUSTRY CHIP ROW ── */
.industry-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.5rem}
.industry-chip{display:inline-flex;align-items:center;gap:.55rem;padding:.55rem 1rem;border:1px solid var(--bm);background:#fff;border-radius:99px;font-family:var(--fm);font-size:.72rem;letter-spacing:.06em;color:var(--txt2);transition:all .25s;box-shadow:var(--shadow-sm)}
.industry-chip:hover{border-color:var(--accent);color:var(--txt);background:var(--accent-muted);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.industry-chip strong{color:var(--accent);font-weight:600}

/* ── LIVE PULSE DOT (mockup activity rows — kept teal, reads as "data") ── */
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal-bright);box-shadow:0 0 8px rgba(30,200,216,.6);animation:pulseDot 1.6s ease-in-out infinite;vertical-align:middle;margin-right:.4rem}
.live-dot.gold{background:var(--gold-warm);box-shadow:0 0 8px rgba(176,138,46,.5)}

/* ── GLOW PULSE ON HOVER (mockups) — uses teal because mockups are dark ── */
@keyframes glowPulse{0%,100%{box-shadow:var(--shadow-lg),0 0 0 1px rgba(30,200,216,.08)}50%{box-shadow:var(--shadow-lg),0 0 60px rgba(30,200,216,.18),0 0 0 1px rgba(30,200,216,.18)}}
.glow-on-hover:hover{animation:glowPulse 2.5s ease-in-out infinite}

/* ── STICKY PANEL (checkout summary) ── */
.sticky-panel{position:sticky;top:84px;align-self:start}
@media(max-width:1024px){.sticky-panel{position:static}}

/* ── DEMO FORM SHARED STYLES — light theme inputs ── */
.demo-input,.demo-textarea{width:100%;background:#fff;border:1px solid var(--bm);color:var(--txt);padding:.85rem 1rem;font-family:var(--fm);font-size:.78rem;letter-spacing:.04em;border-radius:var(--radius-sm);transition:border-color .2s,background .2s,box-shadow .2s}
.demo-input:focus,.demo-textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-muted)}
.demo-input::placeholder{color:var(--muted)}

/* ── RESPONSIVE SHARED ── */
@media(max-width:1024px){
  .svc-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nlinks{display:none}
  .hamburger{display:flex}
}
@media(max-width:500px){
  nav{padding:0 1.25rem}
  footer{flex-direction:column;align-items:flex-start}
}