/* imaginalmicro.com — Imaginal CVI v0 (2026).
   Abyss-to-lagoon teal (NORAnet), Fira Sans in thin cuts, hairline circle glyphs (Stop HAVS),
   ember only where heat is meant. */

/* ── Fonts (Fira Sans, Fira Code — SIL OFL 1.1, assets/fonts/OFL.txt) ──────── */
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:200;font-display:swap;src:url(../fonts/fira-sans-latin-200-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:200;font-display:swap;src:url(../fonts/fira-sans-latin-ext-200-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/fira-sans-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/fira-sans-latin-ext-300-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/fira-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/fira-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fira Code";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/fira-code-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fira Code";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/fira-code-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── Colours and base ──────────────────────────────────────────────────────── */
:root{
  --abyss:#022B48;      /* deepest navy, top and bottom of every gradient */
  --deep:#004058;
  --tide:#006373;
  --teal:#008A92;
  --lagoon:#00BEB9;     /* signature teal — graphics and dark backgrounds only */
  --teal-ink:#00727B;   /* teal for text on white (5.6:1) */
  --mist:#EEF6F6;
  --ink:#0B2233;
  --ink-2:#3B5262;
  --muted:#667C8A;
  --line:#D3DFE3;
  --ember:#FF6B2C;      /* heat — never for text */
  --sans:"Fira Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"Fira Code",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,5vw,72px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;padding:0}
body{background:var(--abyss);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
h1,h2,h3,p,address{margin:0;padding:0}
a{color:inherit;text-decoration:none}
svg{display:block}
::selection{background:var(--lagoon);color:#fff}
:focus-visible{outline:2px solid var(--ember);outline-offset:4px}

.wrap{max-width:1360px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* Uppercase hairline label — the Stop HAVS voice */
.label{font-family:var(--sans);font-size:12.5px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--teal-ink);display:flex;align-items:center;gap:18px}
.label::after{content:"";flex:1;height:1px;background:var(--line)}
.label--light{color:rgba(255,255,255,.72)}
.label--light::after{background:rgba(255,255,255,.18)}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
/* The NORAnet band: abyss navy at the edges, lagoon glowing through the middle. Tilted so it rises
   behind the ring on the right and stays below the copy on the left. */
.hero{position:relative;overflow:hidden;isolation:isolate;min-height:max(640px,100svh);display:flex;flex-direction:column;color:#fff;
  background:linear-gradient(172deg,#022B48 0%,#023651 10%,#01465D 22%,#005668 33%,#00697A 43%,#007D88 51%,#009599 58%,#00B0AE 65%,#00C2BC 70.5%,#00B3AF 76%,#009298 82%,#006779 89%,#01425C 95%,#022B48 100%)}
/* fine grain keeps the long gradient from banding */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-layer{position:absolute;pointer-events:none}
.hero-plane{inset:0}
.hero-plane--light{background:linear-gradient(115deg,rgba(255,255,255,0) 45%,rgba(255,255,255,.09) 80%,rgba(255,255,255,.03));clip-path:polygon(86% 0,100% 0,100% 100%,34% 100%)}
.hero-plane--dark{background:linear-gradient(180deg,rgba(2,43,72,0),rgba(2,43,72,.5));clip-path:polygon(0 80%,100% 100%,0 100%)}
.hero-mark{right:max(-4vw,-60px);top:53%;height:min(88%,64vw);aspect-ratio:1;transform:translateY(-50%);overflow:visible}
.hero-ring{fill:rgba(2,43,72,.2)}
/* the orbit fades out on the left so it stays clear of the headline */
.hero-orbits{-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 62%);mask-image:linear-gradient(90deg,transparent 30%,#000 62%)}
.hero-orbit,.hero-comet{fill:none;vector-effect:non-scaling-stroke}
.hero-orbit{stroke:rgba(255,255,255,.3);stroke-width:1}
.hero-comet{stroke:var(--ember);stroke-width:2;stroke-linecap:round;stroke-dasharray:9 91;stroke-dashoffset:-8;filter:drop-shadow(0 0 5px rgba(255,107,44,.9))}
@media (prefers-reduced-motion:no-preference){
  .hero-comet{animation:orbit 26s linear infinite}
  @keyframes orbit{to{stroke-dashoffset:-78}}
}

.top{position:relative;z-index:2;width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:clamp(22px,3.4vw,44px)}
/* whole logo box is the link: SVG only hit-tests painted shapes, so gaps between letters would miss it */
.brand{display:block;flex:none}
.brand svg{height:clamp(38px,3.6vw,50px);width:auto;fill:#fff;pointer-events:none;transition:opacity .2s}
.brand:hover svg{opacity:.72}
.nav{display:flex;gap:clamp(18px,2.6vw,40px)}
.nav-link{font-size:12.5px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.82);padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav-link:hover,.nav-link[aria-current="page"]{color:#fff;border-bottom-color:rgba(255,255,255,.6)}

.hero-body{position:relative;z-index:1;width:100%;flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(40px,6vh,72px);padding-bottom:clamp(140px,30vh,320px)}
.kicker{font-size:13px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:clamp(18px,2.4vw,30px)}
.hero-title{font-weight:200;font-size:clamp(34px,5.6vw,92px);line-height:1.04;letter-spacing:-.012em;max-width:16em;text-wrap:balance}
.hero-lead{max-width:34em;margin-top:clamp(20px,2.6vw,34px);font-size:clamp(17px,1.45vw,20px);line-height:1.55;color:rgba(255,255,255,.9)}

.hero-foot{position:relative;z-index:1;width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:clamp(20px,3vw,36px);font-size:15px;color:rgba(255,255,255,.8)}
/* CVI versiooni märge jaluses (CVI 2026-1, CLAUDE.md: "HTML-is jaluses") */
.mark{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.5)}

@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .hero-title.rise{animation-delay:.08s}
  .hero-lead.rise{animation-delay:.2s}
  .contact-mail.rise{animation-delay:.08s}
  .contact-details.rise{animation-delay:.16s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ── Contact page ─────────────────────────────────────────────────────────── */
/* Same shell as the hero, calmer gradient: abyss sinking into deep teal, the ring as a quiet watermark. */
.hero--contact{background:linear-gradient(172deg,#022B48 0%,#013A55 36%,#004E61 66%,#006774 86%,#00767E 100%)}
.contact-ring{position:absolute;right:-10vw;bottom:-32%;width:min(860px,76vw);height:auto;aspect-ratio:1;fill:rgba(0,190,185,.08);pointer-events:none}
.contact-body{position:relative;z-index:1;width:100%;flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(56px,10vh,120px);padding-bottom:clamp(56px,10vh,120px)}
.contact-lead{margin-top:clamp(28px,4vw,48px);font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:rgba(255,255,255,.86)}
.contact-mail{align-self:flex-start;margin-top:14px;font-weight:200;font-size:clamp(26px,3.2vw,48px);line-height:1.15;letter-spacing:-.01em;color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;text-decoration-color:rgba(255,255,255,.3);transition:text-decoration-color .2s;overflow-wrap:anywhere}
.contact-mail:hover{text-decoration-color:var(--ember)}
.contact-details{margin-top:clamp(44px,6vw,80px);display:flex;flex-wrap:wrap;gap:28px clamp(48px,6vw,96px);font-size:16px;line-height:1.6;color:rgba(255,255,255,.86)}
.contact-details h2{margin-bottom:8px;font-size:12px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.contact-details address{font-style:normal}

/* ── Narrow screens ───────────────────────────────────────────────────────── */
@media (max-width:760px){
  .hero-mark{top:auto;bottom:9%;right:-20vw;height:auto;width:min(96vw,440px);transform:none}
  .kicker{font-size:12px;letter-spacing:.18em}
  .hero-body{padding-bottom:clamp(140px,30vh,220px)}
  .hero-title{max-width:none}
  .contact-ring{right:-34vw;bottom:-12%;width:120vw}
}