/* ====================================================================
   ARQOS · Organic Blue  —  built on the FREESIXTYFIVE Design DNA
   deep ocean-blue ground · papercut organic textures as light tracery
   · soft circular "bubble" motifs · frosted-glass cards · clean & calm
   ==================================================================== */
:root{
  /* ARQOS blue ground */
  --bg-deep:#04101e;
  --bg-mid:#0a2745;
  --bg-soft:#0e3a64;
  --pacific:#2E80F2;
  --pacific-bright:#5BA0FF;
  --ice:#e4eeff;
  --ice-dim:rgba(220,233,255,0.70);
  --ice-faint:rgba(220,233,255,0.46);
  --accent:#FFC857;            /* sun — the warm "OS" pop (X wordmark + gold accents) */
  --xblue:#2E6BF2;             /* XLAB signal blue — secondary highlight */
  /* CTA + headline keywords locked to the gold "X" · teaser switch drives --tz-* */
  --cta:#FFC857; --cta-ink:#1c1402; --head:#FFC857; --tz-a:#2D72C0; --tz-b:#123C6E;
  --glass:rgba(255,255,255,0.048);
  --glass-2:rgba(255,255,255,0.07);
  --glass-line:rgba(255,255,255,0.13);
  --glass-line-hi:rgba(255,255,255,0.30);
  --pad:clamp(20px,5vw,90px);
}

html{ background:var(--bg-deep); }
body{ background:transparent; color:var(--ice); position:relative; overflow-x:hidden; }
::selection{ background:var(--accent); color:var(--bg-deep); }

.wrap{ max-width:1440px; margin:0 auto; padding-inline:var(--pad); position:relative; z-index:2; }

/* ====================================================================
   ORGANIC BLUE BACKGROUND  (fixed, layered)
   ==================================================================== */
.bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(110% 80% at 82% -6%, #12579f 0%, rgba(18,87,159,0) 50%),
    radial-gradient(120% 110% at 50% 124%, #0a3560 0%, rgba(10,53,96,0) 55%),
    linear-gradient(165deg, #0b2c50 0%, #071f39 48%, #04101e 100%); }

/* feathered papercut textures — light organic tracery, kept to the edges */
.tex{ position:absolute; background-repeat:no-repeat; background-size:contain; background-position:center;
  mix-blend-mode:screen; filter:saturate(0); }
.tex-voronoi{ top:-16vh; right:-14vw; width:66vw; height:66vw; opacity:0.15;
  background-image:url('../img/tex/voronoi.png'); }
.tex-waves{ bottom:-12vh; left:-16vw; width:58vw; height:58vw; opacity:0.05;
  background-image:url('../img/tex/waves.png'); }

/* soft bubbles — blurred organic circles */
.bub{ position:absolute; border-radius:50%; filter:blur(2px); }
.b1{ width:30vw; height:30vw; top:8vh; left:-10vw;
  background:radial-gradient(circle at 40% 36%, rgba(91,160,255,0.14), rgba(91,160,255,0) 68%); }
.b2{ width:20vw; height:20vw; bottom:6vh; right:4vw;
  background:radial-gradient(circle at 42% 38%, rgba(255,200,87,0.07), rgba(255,200,87,0) 70%); }
/* faint bottom veil to keep things calm and text legible */
.bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,16,30,0) 58%, rgba(4,16,30,0.5) 100%); }

/* ====================================================================
   HEADER
   ==================================================================== */
.hdr{ position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background var(--dur) var(--easing), border-color var(--dur) var(--easing); border-bottom:1px solid transparent; }
.hdr.scrolled{ background:rgba(7,26,48,0.62); backdrop-filter:blur(16px) saturate(130%); border-bottom-color:var(--glass-line); }
.hdr-in{ display:flex; align-items:center; gap:28px; height:76px; }
.logo{ font-weight:900; letter-spacing:-0.04em; font-size:23px; text-transform:uppercase; color:var(--white);
  display:inline-flex; align-items:baseline; }
.logo .os{ color:var(--accent); }
.logo .by{ text-transform:none; font-weight:500; font-size:0.46em; letter-spacing:0.04em; color:var(--ice-faint); margin-left:0.6em; align-self:center; }
.logo .by i{ font-style:normal; color:var(--pacific-bright); padding:0 0.12em; }
.nav{ display:flex; gap:26px; margin-left:auto; }
.nav a{ font-size:13.5px; font-weight:500; color:var(--ice-dim); transition:color var(--dur-fast); }
.nav a:hover{ color:var(--white); }
.hdr .langtoggle{ color:var(--ice); border-color:var(--glass-line-hi); border-radius:40px; }
.hdr .langtoggle button[aria-pressed="true"]{ background:var(--ice); color:var(--bg-deep); }
.btn{ font-family:var(--font-sans); font-weight:700; font-size:13.5px; letter-spacing:0.01em;
  padding:11px 22px; cursor:pointer; border:0; border-radius:40px; background:var(--cta); color:var(--cta-ink);
  transition:transform var(--dur-fast) var(--easing), box-shadow var(--dur-fast); white-space:nowrap;
  box-shadow:0 6px 22px -10px color-mix(in srgb, var(--cta) 65%, transparent); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -10px color-mix(in srgb, var(--cta) 80%, transparent); }
.btn-ghost{ background:transparent; color:var(--ice); border:1px solid var(--glass-line-hi); box-shadow:none; }
.btn-ghost:hover{ background:var(--glass-2); color:var(--white); box-shadow:none; }
@media (max-width:960px){ .nav{ display:none; } }

/* ====================================================================
   HERO
   ==================================================================== */
.hero{ padding-top:clamp(132px,18vh,210px); padding-bottom:clamp(48px,8vh,96px); }
.kicker{ font-family:var(--font-mono); font-weight:500; letter-spacing:0.3em; font-size:12px;
  color:var(--pacific-bright); margin-bottom:30px; display:flex; align-items:center; gap:14px; }
.kicker::before{ content:""; width:34px; height:8px; border-radius:40px; background:var(--pacific-bright); }
.hero .wm{ font-weight:900; letter-spacing:-0.05em; line-height:0.86; margin:0; color:var(--white);
  font-size:clamp(78px,17vw,250px); text-transform:uppercase; display:flex; align-items:flex-start; }
.hero .wm .os{ color:var(--accent); }
/* XLAB "solutions" lockup — the word sits under LAB, flush with L (left) and B (right).
   align-items:baseline keeps X and LAB on the SAME baseline (no vertical drift). */
.hero .wm-xlab{ align-items:baseline; letter-spacing:0; }
.lab{ display:inline-flex; flex-direction:column; }
.lab .labtxt{ line-height:0.86; letter-spacing:-0.08em; }
.sol{ display:flex; justify-content:space-between; width:100%; box-sizing:border-box; padding-left:0.26em; padding-right:0.06em; margin-top:0.06em;
  font-size:0.143em; font-weight:600; letter-spacing:0; line-height:1; text-transform:lowercase; color:var(--accent); }
.sol span{ display:block; }
.nb{ white-space:nowrap; }
.hero .claim{ font-weight:900; line-height:1.02; letter-spacing:-0.035em; margin:clamp(40px,5.5vh,68px) 0 0;
  font-size:clamp(34px,5.6vw,82px); max-width:15ch; color:var(--white); text-wrap:balance; }
.hero .claim .mk{ font-style:normal; background:transparent; color:var(--accent); }
/* headline keyword accents — driven by the switchable --head token */
.accent{ font-style:normal; color:var(--head); }
.hero .promise{ font-weight:400; line-height:1.62; font-size:clamp(16px,1.45vw,20px);
  color:var(--ice-dim); max-width:54ch; margin:28px 0 0; }
.hero .promise strong{ color:var(--white); font-weight:700; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:38px; }
.hero-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(48px,7vh,88px); }
.hero-meta .chip{ display:flex; align-items:center; gap:12px; padding:14px 20px 14px 16px; border-radius:40px;
  background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(8px); }
@media (max-width:760px){ .hero-meta{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .hero-meta{ grid-template-columns:1fr; } }
.hero-meta .dot{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--bg-deep); background:var(--pacific-bright); }
.hero-meta b{ font-weight:900; text-transform:uppercase; letter-spacing:-0.01em; font-size:clamp(15px,1.5vw,19px); color:var(--white); }

/* ====================================================================
   BAND  (soft pills marquee)
   ==================================================================== */
.band{ margin:clamp(40px,7vh,90px) 0; }
.band .wrap{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.band .seal{ display:inline-flex; align-items:center; gap:13px; padding:13px 26px; border-radius:40px;
  background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(8px);
  font-weight:700; font-size:clamp(15px,1.6vw,20px); color:var(--white); letter-spacing:-0.01em; }
.band .seal i{ color:var(--accent); font-size:15px; flex:none; }

/* ====================================================================
   SECTION FRAME
   ==================================================================== */
section.sec{ padding:clamp(64px,10vh,128px) 0; }
.sec-head-row{ display:grid; grid-template-columns:minmax(0,0.46fr) minmax(0,0.54fr); gap:clamp(24px,4vw,60px); align-items:end; }
.sec-tag{ font-family:var(--font-sans); font-weight:400; letter-spacing:0.2em; font-size:12.5px; color:var(--ice-dim); }
.sec-head{ font-weight:900; letter-spacing:-0.04em; line-height:1.0; font-size:clamp(30px,4.6vw,58px); margin:18px 0 0; color:var(--white); text-wrap:balance; overflow-wrap:break-word; }
.sec-lead{ font-size:clamp(15px,1.3vw,19px); line-height:1.62; color:var(--ice-dim); max-width:50ch; margin:0; }
.sec-lead strong{ color:var(--white); font-weight:700; }
@media (max-width:820px){ .sec-head-row{ grid-template-columns:1fr; } }

/* glass card base */
.glass{ background:var(--glass); border:1px solid var(--glass-line); border-radius:26px;
  backdrop-filter:blur(14px) saturate(125%); transition:border-color var(--dur), transform var(--dur), box-shadow var(--dur); }
.glass:hover{ border-color:var(--glass-line-hi); transform:translateY(-4px); box-shadow:0 30px 60px -36px rgba(2,10,24,0.9); }

/* ---- Reason why · stat cards (high-contrast blue) ---- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,28px); margin-top:56px; }
.stat{ padding:clamp(28px,2.8vw,40px); display:flex; flex-direction:column; color:#fff; min-width:0;
  background:linear-gradient(158deg,var(--tz-a) 0%, var(--tz-b) 100%); border-color:rgba(255,255,255,0.20); }
.stat:hover{ box-shadow:0 34px 64px -34px rgba(13,60,130,0.85); border-color:rgba(255,255,255,0.34); }
.stat .ic{ background:#ffffff; color:#123C6E; margin-bottom:26px; border-radius:50%;
  font-family:var(--font-mono); font-weight:700; font-size:19px; }
.stat-k{ font-weight:900; letter-spacing:-0.04em; line-height:0.96; font-size:clamp(50px,5.8vw,82px); color:var(--accent); }
.stat-l{ font-family:var(--font-mono); font-weight:500; font-size:clamp(14px,1.35vw,16px); letter-spacing:0.04em; text-transform:uppercase; color:#fff;
  margin:9px 0 0; line-height:1.35; }
.stat p{ color:rgba(255,255,255,0.9); line-height:1.62; font-size:15px; margin:18px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,0.24); }
.why-note{ margin-top:28px; padding:24px 30px; border-radius:22px; background:var(--glass); border:1px solid var(--glass-line);
  backdrop-filter:blur(10px); text-align:center; font-size:clamp(15px,1.4vw,19px); line-height:1.6; color:var(--ice-dim); }
.why-note b{ color:var(--white); font-weight:700; }
@media (max-width:820px){ .stats{ grid-template-columns:1fr; } }

/* ---- Duotone-style icon badge ---- */
.ic{ width:54px; height:54px; border-radius:16px; flex:none; display:grid; place-items:center; font-size:22px;
  color:var(--pacific-bright); background:rgba(46,128,242,0.15); }
body[data-theme="light"] .ic{ background:rgba(46,128,242,0.12); color:var(--pacific); }
body[data-theme="light"] .pack-hero .ic{ background:#ffffff; color:var(--tz-b); }
body[data-theme="light"] .stat .ic{ background:#ffffff; color:#123C6E; }
.pillar.feature .ic{ background:rgba(255,255,255,0.18); color:#fff; }
.hero-meta .dot i{ font-size:14px; }

/* ---- Value prop · Build / Transfer / Scale ---- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,28px); margin-top:56px; }
.step{ padding:clamp(26px,2.6vw,40px); display:flex; flex-direction:column; }
.step.feature{ background:linear-gradient(160deg, rgba(46,128,242,0.30), rgba(46,128,242,0.08)); border-color:rgba(91,160,255,0.4); }
.step-k{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-family:var(--font-mono); font-size:16px; font-weight:500; color:var(--accent); border:1.5px solid var(--glass-line-hi); margin-bottom:24px; }
.step.feature .step-k{ color:var(--pacific-bright); border-color:var(--pacific-bright); }
.step h3{ font-weight:900; text-transform:uppercase; letter-spacing:-0.025em; font-size:clamp(24px,2.6vw,34px); margin:0 0 14px; color:var(--white); }
.step p{ color:var(--ice); line-height:1.62; font-size:15px; margin:0; }
.vp-foot{ margin-top:28px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ice-faint); text-align:center; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; } }

/* ---- About / firms ---- */
.firms{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,28px); margin-top:56px; align-items:stretch; }
.firm{ padding:clamp(26px,2.8vw,40px); display:flex; flex-direction:column; }
.firm-top{ display:flex; align-items:center; gap:18px; margin-bottom:22px; }
.firm-logo{ flex:none; height:64px; display:flex; align-items:center; justify-content:center; }
.firm-logo img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; display:block; }
.firm-logo.tile-light{ width:150px; border-radius:14px; padding:12px 18px; background:#ffffff; box-shadow:inset 0 0 0 1px rgba(10,34,56,0.06); }
/* FSF: white wordmark on a dark tile in dark mode; circular brand mark on the white card in light mode (never cropped) */
.firm-logo-fsf{ width:150px; border-radius:14px; padding:12px 18px; background:#0a2238; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06); }
.firm-logo-fsf .fsf-light{ display:none; }
.firm-logo-fsf .fsf-dark{ display:block; }
body[data-theme="light"] .firm-logo-fsf{ width:auto; padding:0; background:none; box-shadow:none; }
body[data-theme="light"] .firm-logo-fsf .fsf-dark{ display:none; }
body[data-theme="light"] .firm-logo-fsf .fsf-light{ display:block; height:64px; width:64px; }
.firm-role{ display:inline-block; font-family:var(--font-sans); font-weight:700; font-size:12px; letter-spacing:0.02em; text-transform:uppercase; color:#1c1402; background:var(--accent); padding:3px 10px; border-radius:5px; }
.firm h3{ font-weight:900; text-transform:uppercase; letter-spacing:-0.02em; font-size:clamp(22px,2.3vw,30px); margin:4px 0 0; color:var(--white); }
.firm p{ color:var(--ice-dim); line-height:1.64; font-size:15.5px; margin:0 0 24px; max-width:44ch; }
.firm p strong{ color:var(--ice); font-weight:700; }
.firm ul{ list-style:none; margin:0; padding:22px 0 0; display:grid; gap:11px; border-top:1px solid var(--glass-line); }
.firm > ul{ margin-top:auto; }
.firm li{ position:relative; padding-left:22px; font-size:14px; color:var(--ice-dim); font-weight:500; }
.firm li::before{ content:""; position:absolute; left:0; top:0.5em; width:9px; height:9px; border-radius:50%; background:var(--pacific-bright); }
.firm-foot{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:auto; }
.firm-foot ul{ flex:1; min-width:0; }
.firm-cred{ display:flex; align-items:center; gap:14px; margin-top:0; flex:none; padding-left:22px; border-left:1px solid var(--glass-line); }
.firm-cred img{ height:46px; width:auto; flex:none; border-radius:8px; }
.firm-cred span{ font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:0.13em; text-transform:uppercase; color:var(--ice-faint); line-height:1.55; max-width:20ch; }
.amp-note{ margin-top:30px; text-align:center; font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.14em;
  color:var(--ice-faint); text-transform:uppercase; }
.amp-note b{ color:var(--ice); font-weight:500; }
@media (max-width:820px){ .firms{ grid-template-columns:1fr; } }

/* ---- Pillars ---- */
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,1.8vw,24px); margin-top:56px; }
.pillar{ padding:clamp(26px,2.6vw,38px); display:flex; flex-direction:column; min-width:0; }
.pillar.feature{ background:linear-gradient(160deg,var(--tz-a),var(--tz-b)); border-color:rgba(255,255,255,0.20); }
.pillar-no{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-family:var(--font-mono); font-size:14px; font-weight:500; color:var(--bg-deep); background:var(--accent); margin-bottom:20px; }
.pillar.feature .pillar-no{ background:#ffffff; border:0; color:#123C6E; }
.pillar.feature h3, .pillar.feature .claim{ color:#fff; }
.pillar.feature li{ color:rgba(255,255,255,0.9); }
.pillar.feature ul{ border-top-color:rgba(255,255,255,0.26); }
.pillar.feature .owner{ color:#fff; border-color:rgba(255,255,255,0.5); }
.pillar .ic{ margin-bottom:20px; }
.pillar h3{ font-weight:900; text-transform:uppercase; letter-spacing:-0.025em; font-size:clamp(22px,2.4vw,30px); margin:0 0 12px; color:var(--white); }
.pillar .claim{ font-weight:700; font-size:16.5px; line-height:1.34; margin:0 0 26px; color:var(--ice); }
.pillar ul{ list-style:none; margin:auto 0 0; padding:22px 0 0; display:grid; gap:11px; border-top:1px solid var(--glass-line); }
.pillar li{ font-size:14px; color:var(--ice-dim); font-weight:500; line-height:1.45; }
.owner{ align-self:flex-start; margin-top:18px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.16em;
  text-transform:uppercase; padding:6px 13px; border-radius:40px; border:1px solid var(--glass-line-hi); color:var(--pacific-bright); white-space:nowrap; }
@media (max-width:1024px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pillars{ grid-template-columns:1fr; } }

/* ---- Approach · entry-offer hero banner (AI-Readiness Check) ---- */
.pack-hero{ margin-top:56px; padding:clamp(26px,3vw,44px); border-radius:26px; display:flex; gap:clamp(24px,4vw,56px);
  align-items:center; justify-content:space-between; flex-wrap:wrap; color:#fff;
  background:linear-gradient(150deg,var(--tz-a) 0%,var(--tz-b) 100%); border:1px solid rgba(255,255,255,0.20);
  box-shadow:0 30px 64px -38px rgba(13,60,130,0.8); }
.pack-hero .ph-main{ flex:1 1 460px; }
.pack-hero .ic{ background:#ffffff; color:var(--tz-b); margin-bottom:18px; }
.pack-hero .ptag{ font-family:var(--font-sans); font-weight:700; font-size:13px; letter-spacing:0.03em; text-transform:uppercase; color:rgba(255,255,255,0.92); }
.pack-hero h4{ font-weight:900; text-transform:uppercase; letter-spacing:-0.025em; font-size:clamp(24px,2.8vw,36px); line-height:1.02; margin:12px 0 14px; color:#fff; }
.pack-hero p{ color:rgba(255,255,255,0.9); line-height:1.6; font-size:clamp(15px,1.4vw,17px); margin:0 0 18px; max-width:60ch; }
.pack-hero p strong{ color:#fff; font-weight:700; }
.pack-hero .metric{ font-weight:900; text-transform:uppercase; letter-spacing:-0.01em; font-size:14.5px; color:#fff; display:flex; align-items:baseline; gap:9px; }
.pack-hero .metric::before{ content:"\2192"; color:var(--accent); font-weight:700; }
.pack-hero .btn{ flex:none; }
@media (max-width:760px){ .pack-hero{ flex-direction:column; align-items:flex-start; } .pack-hero .btn{ width:100%; text-align:center; justify-content:center; } }

/* ---- Approach · packages (3 equal-width) ---- */
.packs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px); margin-top:24px; align-items:stretch; }
.pack{ padding:clamp(24px,2.3vw,34px); display:flex; flex-direction:column; min-width:0; }
.pack .ic{ margin-bottom:22px; }
.pack .ptag{ font-family:var(--font-sans); font-weight:700; font-size:13px; letter-spacing:0.03em; text-transform:uppercase; color:var(--pacific-bright); }
.pack h4{ font-weight:900; text-transform:uppercase; letter-spacing:-0.02em; font-size:clamp(20px,2vw,25px); line-height:1.05; margin:12px 0 12px; color:var(--white); }
.pack p{ color:var(--ice-dim); line-height:1.6; font-size:14.5px; margin:0 0 22px; }
.pack p strong{ color:var(--white); font-weight:700; }
.pack .metric{ margin-top:auto; font-weight:900; text-transform:uppercase; letter-spacing:-0.01em; font-size:13.5px; color:var(--white);
  padding-top:16px; border-top:1px solid var(--glass-line); display:flex; align-items:baseline; gap:9px; }
.pack .metric::before{ content:"\2192"; color:var(--accent); font-weight:700; }
@media (max-width:860px){ .packs{ grid-template-columns:1fr; } }

/* ---- Contact ---- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,44px); margin-top:52px; align-items:start; }
.contact-side h2{ font-weight:900; text-transform:uppercase; letter-spacing:-0.03em; line-height:1.0; font-size:clamp(30px,4vw,50px); margin:0; color:var(--white); }
.contact-side .lead{ color:var(--ice-dim); line-height:1.62; font-size:17px; margin:22px 0 28px; max-width:42ch; }
.contact-side .direct{ display:grid; gap:12px; font-size:15px; }
.contact-side .direct a{ color:var(--pacific-bright); font-weight:700; display:flex; align-items:center; gap:11px; }
.contact-side .direct a i{ color:var(--pacific-bright); width:18px; text-align:center; font-size:15px; }
.contact-side .direct .or{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.18em; color:var(--ice-faint); text-transform:uppercase; }
.booking{ padding:clamp(24px,2.6vw,34px); border-radius:26px; }
.booking-head{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; border-bottom:1px solid var(--glass-line); padding-bottom:16px; margin-bottom:8px; }
.booking-head b{ font-weight:900; text-transform:uppercase; letter-spacing:-0.01em; font-size:18px; color:var(--white); }
.booking-head .mono{ color:var(--ice-faint); white-space:nowrap; }
.booking .sub{ font-size:13px; color:var(--ice-faint); margin:0 0 20px; }
.slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.slot{ background:var(--glass-2); border:1px solid var(--glass-line); border-radius:16px; padding:13px 6px; text-align:center; cursor:pointer; transition:all var(--dur-fast); }
.slot:hover{ border-color:var(--accent); background:var(--accent); }
.slot .d{ font-weight:900; font-size:18px; color:var(--white); }
.slot:hover .d{ color:var(--bg-deep); }
.slot .m{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; color:var(--ice-faint); text-transform:uppercase; }
.slot:hover .m{ color:rgba(4,16,30,0.7); }
.booking .full{ width:100%; margin-top:18px; justify-content:center; display:flex; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---- Footer ---- */
footer{ border-top:1px solid var(--glass-line); padding:54px 0 44px; margin-top:clamp(48px,7vh,90px); position:relative; z-index:2; }
.foot-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.foot-contact{ display:flex; flex-direction:column; gap:5px; font-size:13.5px; line-height:1.55; color:var(--ice-dim); text-align:right; }
.foot-contact .office-tag{ font-family:var(--font-sans); font-weight:700; font-size:13px; letter-spacing:0.03em; text-transform:uppercase; color:var(--pacific-bright); margin-bottom:6px; }
.foot-contact a{ color:var(--ice); transition:color var(--dur-fast); }
.foot-contact a:hover{ color:var(--pacific-bright); }
.foot-mark{ font-weight:900; text-transform:uppercase; letter-spacing:-0.04em; font-size:clamp(40px,7vw,96px); line-height:0.86; color:var(--white); }
.foot-mark .os{ color:var(--accent); }
.foot-claim{ font-weight:700; letter-spacing:-0.02em; font-size:clamp(17px,1.8vw,24px); color:var(--ice); margin-top:8px; }
.foot-offices{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); margin-top:38px; padding-top:28px; border-top:1px solid var(--glass-line); }
.office{ display:flex; flex-direction:column; gap:5px; font-size:13.5px; line-height:1.55; color:var(--ice-dim); }
.office-tag{ font-family:var(--font-sans); font-weight:700; font-size:13px; letter-spacing:0.03em; text-transform:uppercase; color:var(--pacific-bright); margin-bottom:6px; }
.office .ol{ display:block; }
.office a{ color:var(--ice); transition:color var(--dur-fast); }
.office a:hover{ color:var(--pacific-bright); }
@media (max-width:600px){ .foot-offices{ grid-template-columns:1fr; gap:20px; } }
.foot-meta{ text-align:right; font-size:13px; color:var(--ice-dim); line-height:1.7; }
.foot-meta a{ color:var(--white); font-weight:700; }
.foot-tisax{ height:54px; width:auto; display:inline-block; margin-bottom:16px; border-radius:6px; }
.foot-legal a{ color:var(--ice-dim); }
.foot-legal a:hover{ color:var(--white); }
.foot-bar{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:44px; padding-top:22px;
  border-top:1px solid var(--glass-line); font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.14em; color:var(--ice-faint); text-transform:uppercase; }

/* ====================================================================
   HEADER TOGGLES  —  light / dark theme
   ==================================================================== */

/* theme toggle — sun / moon */
.themetoggle{ appearance:none; flex:none; width:40px; height:40px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:15px; color:var(--ice);
  background:var(--glass); border:1px solid var(--glass-line-hi);
  transition:background var(--dur-fast) var(--easing), color var(--dur-fast), transform var(--dur-fast); }
.themetoggle:hover{ transform:translateY(-2px); color:var(--white); border-color:var(--glass-line-hi); }
.themetoggle .fa-moon{ display:none; }
.themetoggle .fa-sun{ display:inline; }
body[data-theme="light"] .themetoggle .fa-sun{ display:none; }
body[data-theme="light"] .themetoggle .fa-moon{ display:inline; }

/* ====================================================================
   LIGHT MODE  —  classic editorial palette
   ground: cool paper · primary/secondary: royal navy-blue · activation: amber-gold
   ==================================================================== */
html:has(body[data-theme="light"]){ background:#eef1f6; }
body[data-theme="light"]{
  --bg-deep:#eef1f6;
  --ice:#13233b; --ice-dim:#4a5a70; --ice-faint:#8593a6;
  --white:#0b1a30;
  --pacific:#1e56c4; --pacific-bright:#1747a8;
  --accent:#F2A60C;
  --cta:#F2A60C; --cta-ink:#1c1402; --head:#F2A60C;
  --glass:#ffffff; --glass-2:#f1f5fb; --glass-line:#dde4ee; --glass-line-hi:#c2cedd;
}

/* ====================================================================
   TEASER GRADIENT  —  fixed XLAB ocean (--tz-a / --tz-b in :root)
   ==================================================================== */
body[data-theme="light"] .bg{ background:linear-gradient(172deg,#f7f9fc 0%,#eef1f6 56%,#e4eaf3 100%); }
body[data-theme="light"] .bg .tex,
body[data-theme="light"] .bg .bub,
body[data-theme="light"] .bg::after{ display:none; }

/* white cards with soft separation */
body[data-theme="light"] .glass{ box-shadow:0 1px 2px rgba(15,35,60,0.05), 0 22px 44px -32px rgba(15,35,60,0.24); }
body[data-theme="light"] .glass:hover{ box-shadow:0 30px 60px -34px rgba(15,35,60,0.30); }

/* header */
body[data-theme="light"] .hdr.scrolled{ background:rgba(247,249,252,0.88); border-bottom-color:var(--glass-line); }
body[data-theme="light"] .hdr .langtoggle button[aria-pressed="true"]{ background:var(--ice); color:#fff; }

/* light mode echoes dark: bright sun-gold fills carry DARK ink (not light text) */
body[data-theme="light"] .pillar-no{ color:#1c1402; }
body[data-theme="light"] .slot:hover .d{ color:#1c1402; }
body[data-theme="light"] ::selection{ background:var(--accent); color:#1c1402; }

/* feature cards now use the token teaser gradient + white content in BOTH themes */
body[data-theme="light"] .pillar.feature .ic,
body[data-theme="light"] .step.feature .ic{ background:#ffffff; color:var(--tz-b); }

/* ====================================================================
   MOBILE-FIRST  —  compact header, generous tap targets, single column
   ==================================================================== */
@media (max-width:600px){
  :root{ --pad:18px; }
  .hdr-in{ height:60px; gap:8px; }
  .logo{ font-size:18px; }
  .logo .by{ display:none; }
  .themetoggle{ width:44px; height:44px; }
  .hdr .btn{ padding:11px 15px; font-size:12.5px; }
  .band{ margin:28px 0; }
  .band .wrap{ gap:9px; }
  .band .seal{ padding:11px 16px; font-size:14px; gap:9px; }
  section.sec{ padding:54px 0; }
  .sec-head-row{ gap:18px; }
  .hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:92px; padding-bottom:34px; }
  .hero .wm{ font-size:clamp(70px,22vw,150px); }
  .hero .claim{ font-size:clamp(30px,8.6vw,46px); max-width:none; margin-top:clamp(22px,4vh,40px); }
  .hero .promise{ font-size:15.5px; margin-top:20px; }
  .hero-cta{ gap:10px; margin-top:26px; }
  .hero-cta .btn{ flex:1 1 100%; text-align:center; justify-content:center; padding:15px 20px; }
  .hero-meta{ margin-top:38px; gap:10px; }
  .stats,.steps,.pillars,.packs{ margin-top:32px; }
  .pack-hero{ margin-top:32px; }
  .firms,.contact-grid{ margin-top:32px; }
  .firm{ padding:24px; min-width:0; }
  .firm-foot{ flex-direction:column; align-items:flex-start; gap:16px; }
  .firm-cred{ padding-left:0; border-left:0; border-top:1px solid var(--glass-line); padding-top:16px; width:100%; }
  .slot{ padding:15px 6px; }
  .slot .d{ font-size:17px; }
  .foot-top{ flex-direction:column; align-items:flex-start; }
  .foot-contact{ text-align:left; }
  .foot-meta{ text-align:left; }
  .foot-bar{ gap:10px; }
}
@media (max-width:440px){
  .hdr .langtoggle{ display:none; }
}

/* Dark-mode toggle deactivated for now — light is the standard.
   The toggle markup + dark CSS stay in the background (see DARK_ENABLED
   in app.js); the button is just hidden. Flip both to re-enable. */
.themetoggle{ display:none; }

/* reveal tuned for dark ground — gated on html.js so content is ALWAYS
   visible if JS fails; self-healed by a per-element timeout if a throttled
   compositor freezes the transition at opacity:0. */
@media (prefers-reduced-motion: no-preference){
  html.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity 0.9s var(--easing), transform 0.9s var(--easing); }
  html.js .reveal.in{ opacity:1; transform:none; }
}