/* ==========================================================
   Aeline — landing page
   ========================================================== */
:root{
  /* brand palette taken from the logo: navy #031242 + amber #dc9845 */
  --navy:#031242;
  --navy-2:#061a57;
  --navy-deep:#01081f;
  --amber:#dc9845;
  --amber-dark:#c8842f;
  --amber-light:#efac53;
  --on-amber:#0b1533;

  --ink:#04102e;
  --blue:#2f5eb4;
  --muted:#9aa4bd;
  --radius:22px;

  /* legacy names kept so existing rules inherit the brand colours */
  --lime:var(--amber);
  --lime-dark:var(--amber-dark);

  /* theme tokens — light by default, see [data-theme="dark"] below.
     Everything outside the hero/category panels (which are always
     dark) reads its surface + text colours from these. */
  --page-bg:#fff;
  /* the same colour as a triplet, so a scrim can fade it out to nothing */
  --page-bg-rgb:255,255,255;
  --surface:#fff;
  --text:var(--ink);
  --text-muted:var(--muted);
  --border:#e2e6ef;
  --active-fill:var(--ink);

  /* Panels that carry their own ground — the categories band, the solutions
     and contact bands, the footer, the catalog banner — invert with the theme
     exactly like the hero does. Their ink lives here so every one of them
     flips from a single pair of blocks instead of a rule apiece. */
  --panel-ink:#fff;
  --panel-ink-mid:rgba(255,255,255,.8);
  --panel-ink-soft:rgba(255,255,255,.6);
  --panel-ink-faint:rgba(255,255,255,.5);
  --panel-fill:rgba(255,255,255,.05);
  --panel-fill-hi:rgba(255,255,255,.08);
  --panel-line:rgba(255,255,255,.1);
  --panel-accent:var(--amber-light);
  --panel-shadow:rgba(1,8,31,.32);
  --panel-shadow-hi:rgba(1,8,31,.4);
  --panel-input:rgba(2,8,26,.42);
  --panel-input-hi:rgba(2,8,26,.6);
  --panel-input-line:rgba(255,255,255,.14);
  --panel-option:#061a3d;
}

:root[data-theme="dark"]{
  --page-bg:#080d1c;
  --page-bg-rgb:8,13,28;
  --surface:#121a35;
  --text:#eef1f7;
  --text-muted:#8991ac;
  --border:rgba(255,255,255,.09);
  --active-fill:#1d2a52;

  --panel-ink:var(--navy);
  --panel-ink-mid:rgba(3,18,66,.8);
  --panel-ink-soft:rgba(3,18,66,.62);
  --panel-ink-faint:rgba(3,18,66,.5);
  --panel-fill:rgba(3,18,66,.045);
  --panel-fill-hi:rgba(3,18,66,.08);
  --panel-line:rgba(3,18,66,.12);
  --panel-accent:var(--amber-dark);
  --panel-shadow:rgba(3,18,66,.1);
  --panel-shadow-hi:rgba(3,18,66,.16);
  --panel-input:rgba(255,255,255,.72);
  --panel-input-hi:rgba(255,255,255,.92);
  --panel-line-input:rgba(3,18,66,.16);
  --panel-input-line:rgba(3,18,66,.16);
  --panel-option:#eef1fa;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--text);
  /* Latin resolves in Jakarta, Georgian falls through to Noto Sans Georgian */
  font-family:"Plus Jakarta Sans","Noto Sans Georgian","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .3s ease, color .3s ease;
}
a{text-decoration:none;color:inherit;}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden;}
.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;
}
ul{margin:0;padding:0;list-style:none;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  border-radius:999px;white-space:nowrap;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-lime{background:var(--lime);color:var(--on-amber);padding:13px 26px;box-shadow:0 6px 18px rgba(200,132,47,.34);}
.btn-lime:hover{background:var(--lime-dark);}
.btn-glass{
  background:rgba(255,255,255,.16);color:#fff;padding:14px 30px;
  border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(8px);
}
.btn-glass:hover{background:rgba(255,255,255,.26);}
.btn-arrow{padding:6px 6px 6px 26px;}
.btn-arrow .arrow{
  width:32px;height:32px;border-radius:999px;background:var(--navy);color:var(--amber);
  display:grid;place-items:center;
}
.btn-arrow .arrow svg{width:14px;height:14px;}

/* ==========================================================
   HERO
   ========================================================== */
.hero{
  position:relative;
  margin:18px;
  border-radius:var(--radius);
  overflow:hidden;
  /* short enough that the bottom white margin lands inside the first
     viewport on ordinary laptop heights, instead of past the fold */
  min-height:clamp(540px,50vw,760px);
  isolation:isolate;
  display:flex;flex-direction:column;
}

/* --- sky (dark) --- */
.sky{position:absolute;inset:0;z-index:0;overflow:hidden;}
.sky-grad{
  position:absolute;inset:0;
  background:linear-gradient(155deg,#02071a 0%,#04102f 32%,#061a4d 58%,#030f2c 82%,#010613 100%);
  transition:background .4s ease;
}
/* the hero INVERTS with the theme — light site = dark hero (default
   above); dark site = a light hero — rather than just deepening,
   like every other dark surface on the page. */
:root[data-theme="dark"] .sky-grad{
  background:linear-gradient(155deg,#f5f7fc 0%,#eef1fa 32%,#e6ebf7 58%,#eef1fa 82%,#f5f7fc 100%);
}
:root[data-theme="dark"] .sky-glow{
  background:
    radial-gradient(58% 46% at 18% 30%, rgba(47,94,180,.16) 0%, rgba(47,94,180,0) 68%),
    radial-gradient(46% 40% at 76% 22%, rgba(220,152,69,.14) 0%, rgba(220,152,69,0) 70%),
    radial-gradient(70% 52% at 62% 104%, rgba(220,152,69,.1) 0%, rgba(220,152,69,0) 66%);
}
:root[data-theme="dark"] .sky-cursor{
  background:radial-gradient(420px circle at var(--cx,62%) var(--cy,38%),
    rgba(220,152,69,.22) 0%, rgba(47,94,180,.14) 46%, rgba(47,94,180,0) 72%);
  mix-blend-mode:multiply;
}
:root[data-theme="dark"] .sky-vignette{
  background:radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,0) 42%, rgba(150,163,196,.4) 100%);
}
:root[data-theme="dark"] .hero .brand,
:root[data-theme="dark"] .shop-hero .brand{color:var(--navy);}
:root[data-theme="dark"] .hero .theme-toggle,
:root[data-theme="dark"] .shop-hero .theme-toggle{background:rgba(3,18,66,.07);border-color:rgba(3,18,66,.2);}
:root[data-theme="dark"] .hero .theme-toggle:hover,
:root[data-theme="dark"] .shop-hero .theme-toggle:hover{background:rgba(3,18,66,.13);}
:root[data-theme="dark"] .hero .theme-toggle-icon,
:root[data-theme="dark"] .shop-hero .theme-toggle-icon{stroke:var(--navy);}
:root[data-theme="dark"] .hero .hero-sub{color:rgba(3,18,66,.72);}
:root[data-theme="dark"] .hero .hero-title .l1{color:var(--navy);}
:root[data-theme="dark"] .hero .hero-title .l2{color:rgba(3,18,66,.88);}
:root[data-theme="dark"] .hero .flip{color:var(--amber-dark);}
:root[data-theme="dark"] .hero .hero-meta li{color:rgba(3,18,66,.55);}
:root[data-theme="dark"] .hero .btn-glass{
  background:rgba(3,18,66,.05);color:var(--navy);border-color:rgba(3,18,66,.2);
}
:root[data-theme="dark"] .hero .btn-glass:hover{background:rgba(3,18,66,.1);}
.sky-glow{
  position:absolute;inset:-40px;
  background:
    radial-gradient(58% 46% at 18% 30%, rgba(28,74,190,.34) 0%, rgba(28,74,190,0) 68%),
    radial-gradient(46% 40% at 76% 22%, rgba(220,152,69,.14) 0%, rgba(220,152,69,0) 70%),
    radial-gradient(70% 52% at 62% 104%, rgba(220,152,69,.12) 0%, rgba(220,152,69,0) 66%);
  will-change:transform;
}
/* soft light that trails the pointer — eased in JS, never snaps to it */
.sky-cursor{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--cx,62%) var(--cy,38%),
    rgba(220,152,69,.20) 0%, rgba(28,74,190,.12) 46%, rgba(28,74,190,0) 72%);
  mix-blend-mode:screen;
  opacity:0;transition:opacity .6s ease;
}
.hero.is-glow-active .sky-cursor,
.cat-panel.is-glow-active .sky-cursor,
.side-panel.is-glow-active .sky-cursor,
.spread-stage.is-glow-active .sky-cursor{opacity:1;}
/* the "sensor network" — canvas-drawn nodes + links, see hero-glow.js */
.sky-net{position:absolute;inset:0;display:block;}
.sky-grain{position:absolute;inset:0;width:100%;height:100%;opacity:.05;mix-blend-mode:overlay;}
.sky-vignette{
  position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 42%, rgba(0,0,0,.55) 100%);
}
/* --- nav --- */
.nav{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 30px;
}
.brand{
  display:flex;align-items:center;gap:12px;
  color:#fff;font-weight:700;font-size:19px;letter-spacing:-.025em;
  font-family:"Noto Sans Georgian","Plus Jakarta Sans",sans-serif;
  white-space:nowrap;
}
/* Mark and wordmark are both raster now, and both are the artwork's own
   colours. Those colours were drawn for a black card: the monogram's navy is
   #052152, which against the hero navy measures 1.20:1 and is simply not
   there, so on a dark panel the pair goes through the gamma lift in
   #logo-on-dark. In dark mode the panels invert to pale and the original
   colours are right as they are, so the filter comes off and only a faint
   shadow stays.

   The mark is a landscape monogram (990x595), so it is set shorter than a
   square one would be: at 42px it is 70px wide, which keeps the whole brand
   block clear of the centred dock at 1440 — the width the old upright shield
   used to leave. */
.brand-mark{height:42px;width:auto;display:block;flex:0 0 auto;}
.brand-text{height:30px;width:auto;display:block;flex:0 1 auto;min-width:0;}
.brand-mark,.brand-text{
  filter:url(#logo-on-dark) drop-shadow(0 2px 5px rgba(1,6,20,.4));
}
:root[data-theme="dark"] .brand-mark,
:root[data-theme="dark"] .brand-text{filter:drop-shadow(0 2px 5px rgba(3,18,66,.16));}
/* --- theme toggle --- */
.theme-toggle{
  justify-self:end;position:relative;
  width:38px;height:38px;padding:0;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.theme-toggle:hover{background:rgba(255,255,255,.18);transform:translateY(-1px);}
.theme-toggle-icon{
  grid-area:1/1;width:18px;height:18px;
  fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .25s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.icon-sun{opacity:1;transform:scale(1) rotate(0deg);}
.icon-moon{opacity:0;transform:scale(.4) rotate(-60deg);fill:#fff;stroke:none;}
:root[data-theme="dark"] .icon-sun{opacity:0;transform:scale(.4) rotate(60deg);}
:root[data-theme="dark"] .icon-moon{opacity:1;transform:scale(1) rotate(0deg);fill:var(--navy);}

/* --- copy --- */
.hero-copy{position:relative;z-index:3;text-align:center;padding:56px 20px 0;}
.hero-sub{
  margin:22px auto 0;max-width:560px;
  color:rgba(255,255,255,.88);
  font-size:clamp(13px,1.05vw,15px);line-height:1.6;font-weight:500;
}
.hero-cta{display:flex;justify-content:center;gap:14px;margin-top:30px;}


/* ==========================================================
   LOGO STRIP
   ========================================================== */
.logos{padding:58px 0 76px;}
.logo-track-wrap{
  --logo-gap:64px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.logo-track{
  display:flex;width:max-content;gap:var(--logo-gap);
  animation:logoMarquee 19s linear infinite; /* app.js retunes this to a constant px/s */
}
.logos:hover .logo-track{animation-play-state:paused;}
.logo-set{display:flex;align-items:center;gap:var(--logo-gap);flex:0 0 auto;}
/* fixed-width slots: the strip measures the same before and after the logo
   images decode, so app.js's marquee tuning never has to correct itself. */
.logo{display:inline-flex;align-items:center;justify-content:center;width:150px;height:40px;flex:0 0 auto;}
.logo img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
/* The Dnake mark is the one JPEG in the strip, so its white ground is painted
   in rather than transparent. mix-blend-mode cannot help here: .logo-track-wrap
   is masked, which makes it an isolated group with no page backdrop to blend
   against. So the white is keyed out properly instead — an SVG filter turns
   luminance into alpha (see #drop-white in index.html), which leaves the mark
   on true transparency in either theme.

   In dark mode the mark is inverted first, so the dark artwork comes out light
   enough to read; hue-rotate puts the brand colour back after the inversion.

   The real fix is a transparent PNG from the supplier — then both of these
   rules can go. */
.logo img[src*="dnake"]{filter:url(#drop-white);}
:root[data-theme="dark"] .logo img[src*="dnake"]{
  filter:invert(1) hue-rotate(180deg) url(#lift-alpha);
}

/* the loop must shift by exactly one set + the gap after it, or the two
   halves visibly jump at the seam — so the gap has to be the SAME custom
   property the layout itself uses, never a hardcoded number here. */
@keyframes logoMarquee{
  from{transform:translateX(0);}
  to{transform:translateX(calc(-50% - (var(--logo-gap) / 2)));}
}
@media (prefers-reduced-motion:reduce){
  .logo-track{animation:none;}
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1180px){
  .hero{min-height:720px;}
}
@media (max-width:900px){
  .brand{gap:10px;}
  .brand-mark{height:36px;}
  .brand-text{height:24px;}
  .logo-track-wrap{--logo-gap:36px;}
  .logo{width:110px;height:30px;}
  .hero{min-height:660px;}
}
@media (max-width:620px){
  .hero-cta{flex-direction:column;align-items:center;}
  /* the padding is set in slider.css, which loads after this file */
}


/* ==========================================================
   RESPONSIVE — header under the dock

   The dock is fixed over the top of every band and its pill is
   ~720px wide, centred. Below about 1400px that pill reaches the
   brand at the left, so from there down the nav starts beneath the
   dock instead of beside it. The offsets are the dock's own
   resting place plus its height (see dock.css), plus a breath.
   ========================================================== */
@media (max-width:1400px){
  .nav{padding-top:112px;}          /* 20px + 76px panel + 16px */
}
@media (max-width:620px){
  .nav{padding:94px 18px 10px;}      /* 14px + 66px panel + 14px */
  /* the hero only: the catalogue banner keeps its mark at the left edge */
  .hero .nav{justify-content:center;}
  .hero{margin:10px;}                /* the same inset the bands and footer use */
}
@media (max-width:520px){
  .nav{padding-top:86px;}            /* 14px + 58px icon-only panel + 14px */
}
/* iOS Safari zooms the page when a focused field is set below 16px */
@media (max-width:620px){
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px;}
}