/* ===========================================================================
   Alser — shared stylesheet
   Full-stack web-development studio. Dark blue-black engineering theme with a
   signal-blue accent and a scroll-driven particle hero (sphere → torus → cube →
   "ALSER"). Rebuilt from a design export into plain static HTML/CSS/JS — no
   framework, no build step, no runtime CDN.

   Holds: self-hosted fonts, design tokens, base reset, the header/footer chrome,
   the hero scroll scaffold, scroll-reveal states, the FAQ + contact-form styles,
   and the reusable hover helpers that replace the export's inline `style-hover`.
   =========================================================================== */

/* --------------------------------------------------------- self-hosted fonts */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/space-grotesk-400.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/space-grotesk-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/space-grotesk-600.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/space-grotesk-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ibm-plex-sans-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibm-plex-sans-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/ibm-plex-sans-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibm-plex-mono-500.woff2') format('woff2');}

/* ----------------------------------------------------------------- tokens */
:root{
  --bg:#070a0e;            /* page background (deep blue-black)            */
  --panel:#080b11;         /* alternate section band                      */
  --panel-deep:#05070a;    /* footer                                      */
  --ink:#f3f6fa;           /* headings                                    */
  --text:#eef2f7;          /* base text                                   */
  --body:rgba(238,242,247,.64);   /* paragraph body                       */
  --muted:rgba(238,242,247,.62);
  --faint:rgba(238,242,247,.52);  /* small labels / legal — AA on bg      */
  --line:rgba(238,242,247,.08);
  --line-2:rgba(238,242,247,.14);
  --accent:#6bb6ff;        /* signal blue                                 */
  --accent-lt:#a9d3ff;     /* accent hover                                */
  --accent-soft:rgba(107,182,255,.06);
  --card:rgba(238,242,247,.02);
  --maxw:1200px;
  --pad:clamp(20px,7vw,120px);   /* section side padding                  */
  --hpad:clamp(20px,4vw,40px);   /* header/footer side padding            */
  --grotesk:'Space Grotesk',system-ui,sans-serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* ------------------------------------------------------------- base reset */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:var(--accent); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--accent-lt); }
h1,h2,h3,h4{ font-family:var(--grotesk); }
img,canvas,svg{ display:block; max-width:100%; }
input,textarea,button{ font-family:inherit; }
[hidden]{ display:none !important; }   /* beats inline display on the success panel */
::selection{ background:var(--accent); color:#070a0e; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(238,242,247,.12); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(238,242,247,.2); }

/* keyboard focus — visible blue ring, unobtrusive for mouse users */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}
[id]{ scroll-margin-top:96px; }

/* visually-hidden + skip link */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:fixed; left:-9999px; top:0; z-index:100; background:var(--accent); color:#070a0e; padding:10px 16px; border-radius:0 0 8px 0; font-family:var(--grotesk); font-weight:600; font-size:14px; }
.skip-link:focus{ left:0; }

/* --------------------------------------------------------------- helpers */
.mono{ font-family:var(--mono); }

/* =============================================================== header */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--hpad);
  background:linear-gradient(#070a0eee,#070a0eb0 62%,transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{ background:rgba(7,10,14,.92); border-bottom-color:var(--line); }
.brand{ display:inline-flex; align-items:center; gap:14px; color:var(--ink); }
.brand:hover{ color:var(--ink); }
.brand-word{ font-family:var(--grotesk); font-weight:700; font-size:20px; letter-spacing:.34em; color:#f3f6fa; }
.brand-sep{ width:1px; height:15px; background:rgba(238,242,247,.2); }
.brand-tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.26em; color:var(--faint); white-space:nowrap; }
.nav{ display:flex; align-items:center; gap:8px; }
.nav-link{ background:none; border:none; cursor:pointer; padding:8px 12px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:rgba(238,242,247,.62); transition:color .2s ease; }
.nav-cta{ margin-left:6px; font-family:var(--sans); font-weight:500; font-size:13px; color:var(--ink); padding:9px 17px; border:1px solid rgba(238,242,247,.24); border-radius:999px; background:rgba(238,242,247,.03); transition:border-color .25s ease, color .25s ease; }
.nav-toggle{ display:none; align-items:center; justify-content:center; width:42px; height:38px; border:1px solid var(--line); background:rgba(238,242,247,.03); border-radius:9px; color:var(--ink); cursor:pointer; }
.nav-toggle svg{ width:18px; height:18px; }

@media (max-width:760px){
  .brand-sep,.brand-tag{ display:none; }
  .nav-toggle{ display:inline-flex; transition:background .18s ease, border-color .18s ease, color .18s ease; }
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(7,10,14,.97); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 44px -22px rgba(0,0,0,.8);
    padding:6px 0 14px;
  }
  .nav.open{ display:flex; animation:al-menu-in .22s ease both; }
  .nav .nav-link{ padding:15px var(--hpad); font-size:13px; text-align:left; border-top:1px solid var(--line); }
  .nav .nav-link:first-child{ border-top:none; }
  .nav .nav-link:hover,.nav .nav-link:focus-visible{ background:rgba(238,242,247,.04); color:var(--accent); }
  .nav .nav-cta{ margin:14px var(--hpad) 4px; text-align:center; }
  .nav-toggle[aria-expanded="true"]{ background:var(--accent-soft); border-color:rgba(107,182,255,.4); color:var(--accent); }
}
@keyframes al-menu-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .nav.open{ animation:none; } }

/* ================================================================= hero
   280vh tall section; an inner stage sticks for a full viewport while the
   particle system morphs and three headline blocks cross-fade on scroll.
   The cross-fade opacities/offsets are written by alser-hero.js. */
.hero{ position:relative; height:560vh; }
.hero-stage{ position:sticky; top:0; height:100vh; width:100%; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; background:radial-gradient(125% 95% at 62% 34%, #10161f 0%, #0a0e14 52%, #05070a 100%); }
.hero-canvas{ position:absolute; inset:0; z-index:1; width:100%; height:100%; }
.hero-grid{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:linear-gradient(rgba(180,205,235,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(180,205,235,.05) 1px,transparent 1px);
  background-size:66px 66px;
  -webkit-mask-image:radial-gradient(circle at 60% 44%,#000 12%,transparent 76%);
  mask-image:radial-gradient(circle at 60% 44%,#000 12%,transparent 76%);
}
.hero-copy{
  position:absolute; left:clamp(20px,7vw,120px); top:0; height:100%;
  width:min(540px,80vw); display:flex; flex-direction:column; justify-content:center;
  gap:20px; padding:100px 0 140px; z-index:15; pointer-events:none;
  will-change:opacity,transform;
}
.hero-copy .pointerable{ pointer-events:auto; }
.hero-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.3em; color:var(--accent); }
.hero-h1{ margin:0; font-family:var(--grotesk); font-weight:600; font-size:clamp(38px,5.4vw,74px); line-height:1.02; letter-spacing:-.02em; color:#f3f6fa; text-wrap:balance; }
.hero-lead{ margin:0; max-width:510px; font-size:clamp(15px,1.3vw,18px); line-height:1.55; color:rgba(238,242,247,.68); }
.hero-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:8px; }
.hero-tag{ font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:rgba(238,242,247,.82); padding:7px 13px; border:1px solid var(--line-2); border-radius:999px; background:rgba(238,242,247,.02); }
.hero-scroll{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:16; display:flex; flex-direction:column; align-items:center; gap:12px; pointer-events:none; }
.hero-scroll span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.32em; color:rgba(238,242,247,.5); }
.hero-scroll-rail{ width:1px; height:44px; overflow:hidden; background:rgba(238,242,247,.12); animation:al-float 2.4s ease-in-out infinite; }
.hero-scroll-rail i{ display:block; width:100%; height:44px; background:linear-gradient(transparent,var(--accent),transparent); animation:al-line 1.8s linear infinite; }
@keyframes al-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
@keyframes al-line{ 0%{ transform:translateY(-100%); } 100%{ transform:translateY(120%); } }
.hero-boot{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; }
.hero-boot span{ font-family:var(--mono); font-size:11px; letter-spacing:.34em; color:rgba(238,242,247,.45); animation:al-pulse 1.6s ease-in-out infinite; }
@keyframes al-pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
@keyframes al-dot{ 0%,100%{ opacity:.4; transform:scale(.9); } 50%{ opacity:1; transform:scale(1.15); } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .hero-scroll-rail,.hero-scroll-rail i,.hero-boot span{ animation:none; }
}
/* mobile hero: the particle field (via JS) recentres to the upper area and the
   copy drops to the bottom, so they stack vertically instead of overlapping */
@media (max-width:760px){
  .hero{ height:460vh; }
  .hero-copy{
    top:auto; bottom:0; height:auto; left:0; width:100%;
    justify-content:flex-end; gap:15px; padding:0 var(--pad) 6vh;
  }
  .hero-scroll{ display:none; }
}

/* ------------------------------------------------------- scroll-in reveal */
html.js [data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
html.js [data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* =========================================================== FAQ accordion */
.faq-item{ border-top:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 4px; background:none; border:none; cursor:pointer; text-align:left; }
.faq-q span:first-child{ font-family:var(--grotesk); font-weight:500; font-size:clamp(16px,2vw,20px); color:#f3f6fa; }
.faq-ic{ flex:none; width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:18px; color:var(--accent); transition:transform .3s ease; }
.faq-item.open .faq-ic{ transform:rotate(45deg); }
.faq-a{ overflow:hidden; max-height:0; visibility:hidden; transition:max-height .35s ease, opacity .35s ease; opacity:0; }
.faq-item.open .faq-a{ visibility:visible; opacity:1; }
.faq-a-inner{ margin:0; padding:0 40px 24px 4px; font-size:15px; line-height:1.6; color:rgba(238,242,247,.62); }

/* =========================================================== contact form */
.cf-field{ display:flex; flex-direction:column; gap:8px; }
.cf-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(238,242,247,.5); }
.cf-input,.cf-textarea{
  padding:13px 15px; border:1px solid var(--line-2); border-radius:10px;
  background:rgba(7,10,14,.6); color:#f3f6fa; font-size:15px; width:100%;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.cf-input::placeholder,.cf-textarea::placeholder{ color:rgba(238,242,247,.5); }
.cf-textarea{ min-height:118px; resize:vertical; line-height:1.5; }
.cf-input:focus,.cf-textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(107,182,255,.16); }
.cf-input:focus-visible,.cf-textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.cf-input[aria-invalid="true"],.cf-textarea[aria-invalid="true"]{ border-color:#e5737b; }
.cf-err{ font-size:12.5px; color:#f0a3a9; }
.cf-err[hidden]{ display:none; }
.live-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:al-dot 2s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .live-dot{ animation:none; } }

/* =========================================================== hover helpers
   Replace the export's inline `style-hover="…"`. Where the hovered property is
   also set inline (inline wins the cascade) the rule uses !important. */
.h-navlink:hover{ color:#f3f6fa !important; }
.h-accent{ transition:color .2s ease; }
.h-accent:hover{ color:var(--accent) !important; }
.h-ctabtn:hover{ border-color:var(--accent) !important; color:var(--accent) !important; }
.h-card{ transition:transform .3s ease, border-color .3s ease, background .3s ease; }
.h-card:hover{ transform:translateY(-4px); border-color:var(--accent) !important; background:var(--accent-soft) !important; }
.h-submit{ transition:opacity .2s ease, box-shadow .2s ease; }
.h-submit:hover{ opacity:.9; box-shadow:0 8px 30px -10px rgba(107,182,255,.6); }
.h-ghostbtn{ transition:border-color .2s ease, color .2s ease; }
.h-ghostbtn:hover{ border-color:var(--accent) !important; color:var(--accent) !important; }

/* =============================================================== footer */
.site-footer{ position:relative; z-index:2; background:var(--panel-deep); border-top:1px solid var(--line); padding:clamp(56px,8vh,84px) var(--pad) 40px; }
.foot-inner{ max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; align-items:flex-start; }
.foot-word{ font-family:var(--grotesk); font-weight:700; font-size:clamp(40px,7vw,72px); letter-spacing:.16em; color:#f3f6fa; line-height:1; }
.foot-blurb{ margin:16px 0 0; font-size:14.5px; line-height:1.55; color:rgba(238,242,247,.5); max-width:340px; }
.foot-groups{ display:flex; gap:clamp(32px,6vw,80px); flex-wrap:wrap; }
.foot-col{ display:flex; flex-direction:column; gap:12px; }
.foot-head{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--faint); text-transform:uppercase; }
.foot-col a,.foot-col button{ background:none; border:none; padding:0; text-align:left; cursor:pointer; font-family:var(--sans); font-size:14px; color:rgba(238,242,247,.66); }
.foot-status{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:rgba(238,242,247,.55); }
.foot-status span:first-child{ width:7px; height:7px; border-radius:50%; background:var(--accent); }
.foot-bottom{ max-width:var(--maxw); margin:48px auto 0; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--faint); }
.foot-legal{ max-width:var(--maxw); margin:16px auto 0; font-family:var(--mono); font-size:10.5px; line-height:1.7; letter-spacing:.06em; color:var(--faint); }

/* =========================================================== legal pages */
.legal-page{ max-width:var(--maxw); margin:0 auto; padding:clamp(112px,16vh,150px) var(--pad) clamp(64px,10vh,110px); }
.legal-head{ max-width:820px; margin:0 0 clamp(30px,5vh,50px); }
.legal-head .eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.3em; color:var(--accent); margin:0 0 16px; }
.legal-head h1{ font-family:var(--grotesk); font-weight:600; font-size:clamp(32px,5vw,52px); line-height:1.04; letter-spacing:-.02em; color:#f3f6fa; margin:0; }
.legal-head .meta{ margin:18px 0 0; font-family:var(--mono); font-size:12.5px; line-height:1.75; letter-spacing:.02em; color:var(--faint); }
.legal{ max-width:820px; }
.legal h2{ font-family:var(--grotesk); font-weight:600; font-size:clamp(19px,2.3vw,23px); line-height:1.2; letter-spacing:-.01em; color:#f3f6fa; margin:42px 0 14px; }
.legal h2:first-of-type{ margin-top:0; }
.legal h3{ font-family:var(--grotesk); font-weight:600; font-size:16px; color:#f3f6fa; margin:26px 0 8px; }
.legal p{ font-size:15px; line-height:1.75; color:var(--body); margin:0 0 14px; }
.legal ul{ margin:0 0 16px; padding-left:22px; }
.legal li{ font-size:15px; line-height:1.72; color:var(--body); margin-bottom:9px; }
.legal a{ color:var(--accent); border-bottom:1px solid rgba(107,182,255,.32); }
.legal a:hover{ color:var(--accent-lt); border-color:rgba(169,211,255,.6); }
.legal strong{ color:var(--ink); font-weight:600; }
.legal hr{ border:none; border-top:1px solid var(--line); margin:36px 0; }

/* =============================================================== 404 */
.err-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:120px var(--pad) 80px; }
.err-code{ font-family:var(--grotesk); font-weight:700; font-size:clamp(84px,20vw,190px); line-height:.9; letter-spacing:-.03em; color:#f3f6fa; }
.err-code b{ color:var(--accent); font-weight:700; }

/* when the Why grid stacks to one column, un-stick its heading so it can't
   overlap the scrolling feature list */
@media (max-width:760px){
  #why > [data-reveal] > div:first-child{ position:static !important; top:auto !important; }
}

/* tech stack: on mobile each group's tech list flows as wrapping pills so it
   fills the row instead of one short word per line */
@media (max-width:760px){
  .tech-items{ flex-direction:row !important; flex-wrap:wrap; gap:8px !important; margin-top:4px; }
  .tech-items span{ font-size:12.5px !important; color:rgba(238,242,247,.72) !important; padding:6px 12px; border:1px solid var(--line-2); border-radius:999px; }
}