/* eightwise — site styles. Tokens and rules are described in DESIGN.md. */

/* ---------- Tokens (light) ---------- */
:root{
  --bg:#f6f1e7; --surface:#ebe3d3; --text:#14213d; --text-2:#4f5a70; --line:#ddd3c1; --accent:#1f5f99;
  --hero-bg:#bcd6e8; --hero-text:#14213d; --hero-text-2:#33425e; --mark:#f6f1e7; --mark-w:1.6;
  --band-bg:#14213d; --band-text:#f6f1e7; --band-text-2:#b7c3d8; --band-line:#2b3a5c;
  --btn-bg:#14213d; --btn-text:#f6f1e7;
  --ctrl-bg:rgba(20,33,61,.08); --ctrl-on:#14213d; --ctrl-on-text:#f6f1e7;
  --font-head:"Bricolage Grotesque",Inter,system-ui,sans-serif;
  --font-body:Inter,system-ui,sans-serif;
  color-scheme:light;
}
/* ---------- Tokens (dark) ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1830; --surface:#18233f; --text:#f1ebdd; --text-2:#aeb8cc; --line:#26324f; --accent:#9cc7e6;
    --hero-bg:#1d3354; --hero-text:#f1ebdd; --hero-text-2:#c3cee0; --mark:#2c4670;
    --band-bg:#f1ebdd; --band-text:#14213d; --band-text-2:#4f5a70; --band-line:#d9cfbd;
    --btn-bg:#bcd6e8; --btn-text:#0f1830;
    --ctrl-bg:rgba(241,235,221,.08); --ctrl-on:#bcd6e8; --ctrl-on-text:#0f1830;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1830; --surface:#18233f; --text:#f1ebdd; --text-2:#aeb8cc; --line:#26324f; --accent:#9cc7e6;
  --hero-bg:#1d3354; --hero-text:#f1ebdd; --hero-text-2:#c3cee0; --mark:#2c4670;
  --band-bg:#f1ebdd; --band-text:#14213d; --band-text-2:#4f5a70; --band-line:#d9cfbd;
  --btn-bg:#bcd6e8; --btn-text:#0f1830;
  --ctrl-bg:rgba(241,235,221,.08); --ctrl-on:#bcd6e8; --ctrl-on-text:#0f1830;
  color-scheme:dark;
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--text);font:400 17px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s,color .4s}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:var(--text);color:var(--bg);padding:8px 12px;z-index:99}
.wrap{max-width:1240px;margin:0 auto;padding-inline:32px}
h1,h2,h3{font-family:var(--font-head);font-weight:700;letter-spacing:-.03em}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wi{display:inline-block;will-change:transform}

.progress{position:fixed;inset:0 0 auto;height:3px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:60}

/* ---------- Header ---------- */
.bar{position:sticky;top:0;z-index:40;background:var(--hero-bg);color:var(--hero-text);transition:box-shadow .3s,background .4s}
.bar.scrolled{box-shadow:0 1px 0 color-mix(in srgb,var(--hero-text) 14%,transparent)}
.nav{display:flex;align-items:center;gap:24px;height:72px;transition:height .3s}
.bar.scrolled .nav{height:60px}
.logo{display:flex;align-items:center;gap:8px;font:600 19px/1 var(--font-body);letter-spacing:-.02em;text-decoration:none}
.logo svg{width:13px;height:20px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.logo:hover svg{transform:rotate(180deg)}
.links{display:flex;gap:24px;margin-left:auto;font-size:15px}
.links a{text-decoration:none;color:var(--hero-text-2);position:relative}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s}
.links a:hover{color:var(--hero-text)}
.links a:hover::after{transform:scaleX(1);transform-origin:left}

/* Segmented controls: theme and language */
.ctrls{display:flex;gap:8px;align-items:center}
.links+.ctrls{margin-left:8px}
.page-legal .ctrls{margin-left:auto}
.seg{display:flex;padding:3px;border-radius:999px;background:var(--ctrl-bg);border:1px solid color-mix(in srgb,var(--hero-text) 14%,transparent)}
.seg button,.seg a{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 11px;border:0;border-radius:999px;background:none;color:var(--hero-text);font:500 13px/1 var(--font-body);text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.seg button:hover,.seg a:hover{background:color-mix(in srgb,var(--hero-text) 10%,transparent)}
.seg [aria-pressed="true"],.seg [aria-current="true"]{background:var(--ctrl-on);color:var(--ctrl-on-text)}
.seg svg{width:14px;height:14px;flex:none}
.seg button{justify-content:center;min-width:34px;padding:0 9px}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:8px;font:500 15px/1 var(--font-body);text-decoration:none;border:1px solid transparent;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s}
.btn-1{background:var(--btn-bg);color:var(--btn-text)}
.btn-1 .arr{transition:transform .3s}
.btn-1:hover .arr{transform:translateX(4px)}
.btn-2{border-color:currentColor}
.btn-2::before{content:"";position:absolute;inset:0;background:currentColor;opacity:.08;transform:translateY(101%);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:-1}
.btn-2:hover::before{transform:none}
.nav .btn{min-height:38px;padding:0 14px;font-size:14px}

/* ---------- Hero ---------- */
.top{position:relative;background:var(--hero-bg);color:var(--hero-text);overflow:hidden;transition:background .4s}
.mark{position:absolute;left:50%;top:50%;height:112%;width:auto;translate:-50% -50%;pointer-events:none}
.mark path,.mark2 path{fill:none;stroke:var(--mark);stroke-width:var(--mark-w);vector-effect:non-scaling-stroke}
.hero{position:relative;display:grid;grid-template-columns:1.7fr 1fr;gap:48px;align-items:center;padding-block:72px 112px}
h1{font-size:clamp(40px,7vw,108px);line-height:1;margin-bottom:32px}
.hero h1{white-space:nowrap}
.lead{font-size:20px;line-height:1.55;color:var(--hero-text-2);max-width:32em}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
.figure{position:relative;display:flex;justify-content:center}
.mascot-wrap{position:relative;width:min(100%,300px)}
.mascot{display:block;width:100%;height:auto;position:relative;z-index:1}
.shadow{position:absolute;left:18%;right:18%;bottom:2%;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.28),transparent);filter:blur(2px)}
.tag{position:absolute;left:0;bottom:64px;z-index:2;background:var(--bg);color:var(--text);border-radius:8px;padding:10px 14px;font-size:14px;line-height:1.35;box-shadow:0 8px 30px rgba(0,0,0,.12)}
.tag b{display:flex;align-items:center;gap:6px;font-weight:600}
.tag span{color:var(--text-2)}
.tag i{width:8px;height:8px;border-radius:50%;background:#1f9d55;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,157,85,.5)}70%{box-shadow:0 0 0 8px rgba(31,157,85,0)}100%{box-shadow:0 0 0 0 rgba(31,157,85,0)}}

/* ---------- Sections ---------- */
section{padding-block:128px}
section.tight{padding-top:32px}
h2{font-size:clamp(34px,4.2vw,56px);line-height:1.08;margin-bottom:56px}
.band{background:var(--band-bg);color:var(--band-text);transition:background .4s,color .4s}
.band h2{margin-bottom:16px}
.results-lead{color:var(--band-text-2);font-size:20px;margin-bottom:48px}
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.numbers>div{border-top:1px solid var(--band-line);padding-top:24px}
.numbers b{display:block;font-family:var(--font-head);font-weight:700;font-size:clamp(44px,5vw,72px);line-height:1;letter-spacing:-.03em;margin-bottom:14px;font-variant-numeric:tabular-nums}
.numbers p{color:var(--band-text-2);font-size:15px}
.clients{margin-top:96px}
.clients p{color:var(--band-text-2);margin-bottom:24px;font-size:15px}
.marquee{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)}
.track{display:flex;gap:64px;width:max-content;animation:mq 38s linear infinite;font-family:var(--font-head);font-weight:600;letter-spacing:-.02em;font-size:clamp(28px,3.2vw,44px);white-space:nowrap}
.marquee:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

.offer{position:relative;display:grid;grid-template-columns:1fr 1.4fr;gap:32px;padding:36px 16px;margin-inline:-16px;isolation:isolate}
.offer::before{content:"";position:absolute;inset:0;background:var(--surface);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:-1;border-radius:8px}
.offer:hover::before{transform:scaleY(1)}
.offer h3{font-size:clamp(24px,2.4vw,30px);line-height:1.25;transition:translate .45s cubic-bezier(.2,.8,.2,1)}
.offer:hover h3{translate:10px 0}
.offer p{color:var(--text-2);max-width:52ch}
.offers{position:relative}
.ln{position:absolute;left:16px;right:16px;bottom:0;height:1px;background:var(--line);transform-origin:left}
.offers>.ln{top:0;bottom:auto;left:0;right:0}

.about{display:grid;grid-template-columns:1fr 1.4fr;gap:32px;align-items:center}
.about p{max-width:62ch;margin-bottom:16px}
.about p.muted{color:var(--text-2)}
.photo-wrap{margin-top:8px;max-width:300px;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--hero-bg);display:flex;align-items:flex-end;justify-content:center}
.photo{display:block;width:auto;height:94%;max-width:100%;object-fit:contain}
.career{list-style:none;margin:32px 0}
.career li{position:relative;display:flex;justify-content:space-between;gap:16px;padding:14px 0;font-size:16px}
.career li .ln{left:0;right:0}
.career span{color:var(--text-2);white-space:nowrap}

.contact{position:relative;overflow:hidden;background:var(--hero-bg);color:var(--hero-text);border-radius:12px;padding:80px 64px;display:grid;grid-template-columns:1.4fr 1fr 130px;gap:48px;align-items:end;transition:background .4s}
.mark2{position:absolute;right:-60px;bottom:-140px;width:380px;pointer-events:none}
.mascot2{grid-column:3;grid-row:1;align-self:end;width:130px;height:auto;margin-bottom:-84px;position:relative;z-index:1;pointer-events:none}
.contact h2{margin-bottom:16px;position:relative}
.contact p{color:var(--hero-text-2);max-width:40ch;position:relative}
.contact p a{color:inherit;text-underline-offset:3px}
.contact .actions{margin-top:0;flex-direction:column;align-items:stretch;position:relative;z-index:1}

footer{padding:48px 0 96px;font-size:14px;color:var(--text-2)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- Legal page ---------- */
.legal{padding-block:64px 96px;max-width:760px}
.legal h1{font-size:clamp(40px,5vw,64px);margin:24px 0 40px}
.legal h2{font-size:26px;margin:40px 0 12px}
.legal p{margin-bottom:12px;color:var(--text-2)}
.legal a{color:var(--accent)}
.legal mark{background:#ffe08a;color:#14213d;padding:0 4px;border-radius:3px}

/* Hidden until the intro runs, only when motion is allowed and GSAP loaded */
.motion .js-fade,.motion .mascot,.motion .shadow,.motion .bar .nav>*{opacity:0}
.motion .hero h1{visibility:hidden}
.motion .mark path{stroke-dasharray:1;stroke-dashoffset:1}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .links{display:none}
  .ctrls{margin-left:auto}
  .nav-cta{display:none}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:48px;padding-block:40px 80px}
  .mascot-wrap{width:220px}
  .numbers{grid-template-columns:1fr 1fr}
  .offer,.about,.contact{grid-template-columns:1fr;gap:12px}
  .contact{padding:48px 24px;gap:32px}
  .mascot2{display:none}
}
@media (max-width:560px){
  .wrap{padding-inline:16px}
  .nav{gap:12px}
  section{padding-block:80px}
  .seg button,.seg a{padding:0 9px}
  .numbers{grid-template-columns:1fr}
  .career li{flex-direction:column;gap:2px}
  .tag{left:12px}
}
@media (max-width:360px){
  .nav{gap:8px}
  .ctrls{gap:4px}
  .seg button,.seg a{min-width:30px;padding:0 7px}
  .logo{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .track{flex-wrap:wrap;width:auto;white-space:normal;gap:8px 32px}
  .track [aria-hidden]{display:none}
}