/* ============================================================
   SPOT GROUP — Brand System
   Electric blue + deep navy. Compass / orbital motif.
   ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=general-sans@400,500,600,700&display=swap');

:root{
  /* ---- Brand palette (sampled from logo) ---- */
  --blue:        #0072B5;
  --blue-vivid:  #0A86D6;
  --blue-bright: #2BA6F0;
  --blue-glow:   #5CC4FF;
  --navy:        #102F4F;
  --navy-deep:   #0A2038;
  --ink:         #07172A;
  --ink-black:   #04101E;

  /* ---- Surfaces ---- */
  --paper:       #F4F7FA;
  --paper-2:     #ECF1F6;
  --mist:        #E2EAF1;
  --white:       #FFFFFF;

  /* ---- Text ---- */
  --tx-strong:   #0C1E33;
  --tx:          #2A3F55;
  --tx-soft:     #4A5F75;
  --tx-mut:      #6B7E92;
  --tx-on-dark:  #E9F1F8;
  --tx-on-dark-soft: #9DB4C8;

  --line:        rgba(16,47,79,0.12);
  --line-strong: rgba(16,47,79,0.20);
  --line-dark:   rgba(255,255,255,0.14);

  /* ---- Type ---- */
  --font-display: 'Clash Display', 'Sora', system-ui, sans-serif;
  --font-body:    'General Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* ---- Motion ---- */
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.6s;

  /* ---- Shadow ---- */
  --sh-1: 0 4px 18px rgba(12,30,51,0.06);
  --sh-2: 0 24px 60px rgba(12,30,51,0.12);
  --sh-3: 0 40px 90px rgba(7,23,42,0.28);
  --sh-blue: 0 18px 50px rgba(0,114,181,0.32);

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 72px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--tx);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--blue); color:#fff; }

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--navy-deep); }
::-webkit-scrollbar-thumb{ background:var(--blue); border-radius:0; }

/* ============================================================ TYPE */
.display{
  font-family:var(--font-display);
  font-weight:600;
  line-height:0.96;
  letter-spacing:-0.025em;
  color:var(--tx-strong);
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; color:var(--tx-strong); letter-spacing:-0.02em; line-height:1.02; }

.h-hero{ font-size:clamp(3.2rem, 9vw, 9rem); line-height:0.92; letter-spacing:-0.035em; font-weight:600; }
.h-xl{ font-size:clamp(2.6rem, 6vw, 5.4rem); line-height:0.98; letter-spacing:-0.03em; }
.h-lg{ font-size:clamp(2rem, 4.4vw, 3.6rem); line-height:1.02; letter-spacing:-0.025em; }
.h-md{ font-size:clamp(1.5rem, 2.6vw, 2.2rem); line-height:1.08; letter-spacing:-0.02em; }

.lead{ font-size:clamp(1.15rem, 1.7vw, 1.5rem); line-height:1.55; color:var(--tx); font-weight:400; }
.body-lg{ font-size:1.18rem; line-height:1.65; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--blue);
  display:inline-flex;
  align-items:center;
  gap:0.7em;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--blue);
  display:inline-block;
}
.eyebrow.on-dark{ color:var(--blue-bright); }
.eyebrow.on-dark::before{ background:var(--blue-bright); }
.eyebrow.center{ justify-content:center; }

.text-blue{ color:var(--blue); }
.text-mut{ color:var(--tx-mut); }

/* ============================================================ LAYOUT */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(80px, 11vw, 170px); position:relative; }
.section-sm{ padding-block:clamp(56px, 7vw, 100px); }
.dark{ background:var(--ink); color:var(--tx-on-dark); }
.dark h1,.dark h2,.dark h3,.dark h4{ color:#fff; }
.navy-bg{ background:var(--navy); color:var(--tx-on-dark); }
.navy-bg h1,.navy-bg h2,.navy-bg h3{ color:#fff; }

/* ============================================================ BUTTONS */
.btn{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.96rem;
  letter-spacing:0.01em;
  padding:1.05em 1.9em;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:0.7em;
  cursor:pointer;
  border:1.5px solid transparent;
  position:relative;
  overflow:hidden;
  white-space:nowrap;
  transition:color .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), transform .25s var(--ease);
  isolation:isolate;
}
.btn .ic{ width:1.05em; height:1.05em; transition:transform .4s var(--ease); }
.btn:active{ transform:scale(0.97); }

.btn-primary{ background:var(--blue); color:#fff; box-shadow:var(--sh-blue); }
.btn-primary::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--navy); transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn-primary:hover{ color:#fff; }
.btn-primary:hover::after{ transform:translateY(0); }
.btn-primary:hover .ic{ transform:translateX(4px); }

.btn-ghost{ background:transparent; color:var(--tx-strong); border-color:var(--line-strong); }
.btn-ghost::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--tx-strong); transform:translateY(101%); transition:transform .5s var(--ease); }
.btn-ghost:hover{ color:#fff; border-color:var(--tx-strong); }
.btn-ghost:hover::after{ transform:translateY(0); }

.btn-light{ background:#fff; color:var(--navy); }
.btn-light:hover .ic{ transform:translateX(4px); }
.btn-on-dark{ background:transparent; color:#fff; border-color:var(--line-dark); }
.btn-on-dark::after{ content:""; position:absolute; inset:0; z-index:-1; background:#fff; transform:translateY(101%); transition:transform .5s var(--ease); }
.btn-on-dark:hover{ color:var(--navy); border-color:#fff; }
.btn-on-dark:hover::after{ transform:translateY(0); }

/* text link with arrow */
.link-arrow{
  display:inline-flex; align-items:center; gap:0.55em;
  font-weight:600; color:var(--blue);
  font-size:1rem;
}
.link-arrow .ic{ width:1.1em; height:1.1em; transition:transform .35s var(--ease); }
.link-arrow:hover .ic{ transform:translateX(5px); }
.link-arrow::after{ content:""; position:absolute; }

/* ============================================================ NAV */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  margin-inline:auto; max-width:none;
  padding:18px var(--gutter);
  border-radius:0;
  display:flex; align-items:center; justify-content:space-between;
  transition:
    background .55s var(--ease),
    padding .55s var(--ease),
    box-shadow .55s var(--ease),
    border-radius .55s var(--ease),
    top .55s var(--ease),
    left .55s var(--ease),
    right .55s var(--ease),
    max-width .55s var(--ease);
}
.nav.scrolled{
  top:clamp(10px, 1.6vw, 18px);
  left:clamp(14px, 4vw, 40px);
  right:clamp(14px, 4vw, 40px);
  max-width:1180px;
  border-radius:999px;
  padding:11px 12px 11px clamp(22px, 2.4vw, 34px);
  background:rgba(255,255,255,0.94);
  backdrop-filter:saturate(160%) blur(20px);
  -webkit-backdrop-filter:saturate(160%) blur(20px);
  box-shadow:var(--sh-2), 0 0 0 1px rgba(16,47,79,0.05);
}
.nav-logo{ height:40px; transition:height .4s var(--ease); display:block; }
.nav-logo img{ height:100%; width:auto; display:block; }
.nav.scrolled .nav-logo{ height:34px; }
.nav-logo .white{ display:block; }
.nav-logo .color{ display:none; }
.nav.scrolled .nav-logo .white{ display:none; }
.nav.scrolled .nav-logo .color{ display:block; }

.nav-links{ display:flex; align-items:center; gap:38px; }
.nav-link{
  font-size:0.95rem; font-weight:500; color:#fff; position:relative;
  padding:6px 0; transition:color .3s;
}
.nav.scrolled .nav-link{ color:var(--tx); }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--blue); transition:width .35s var(--ease);
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav.scrolled .nav-link:hover{ color:var(--blue); }
.nav-link.active{ color:var(--blue-bright); }
.nav.scrolled .nav-link.active{ color:var(--blue); }

.nav-cta{ font-size:0.9rem; padding:0.8em 1.5em; }
.nav-burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; }
.nav-burger span{ width:26px; height:2px; background:#fff; transition:.3s; }
.nav.scrolled .nav-burger span{ background:var(--navy); }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:999; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:var(--gutter); transform:translateY(-100%);
  transition:transform .6s var(--ease); pointer-events:none;
}
.mobile-menu.open{ transform:translateY(0); pointer-events:auto; }
.mobile-menu a{
  font-family:var(--font-display); font-size:clamp(2.2rem,9vw,3.6rem); font-weight:500;
  color:#fff; padding:8px 0; opacity:0; transform:translateY(20px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  border-bottom:1px solid var(--line-dark);
}
.mobile-menu.open a{ opacity:1; transform:translateY(0); }
.mobile-menu.open a:nth-child(1){ transition-delay:.12s; }
.mobile-menu.open a:nth-child(2){ transition-delay:.18s; }
.mobile-menu.open a:nth-child(3){ transition-delay:.24s; }
.mobile-menu.open a:nth-child(4){ transition-delay:.30s; }
.mobile-menu.open a:nth-child(5){ transition-delay:.36s; }

/* ============================================================ PAGE TRANSITION */
.page-veil{
  position:fixed; inset:0; z-index:2000; background:var(--ink);
  transform:scaleY(0); transform-origin:top;
  pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:transform .6s var(--ease-io);
}
.page-veil.instant{ transition:none; }
.page-veil.cover{ transform:scaleY(1); }
/* logo keeps its native aspect ratio — never forced square */
.page-veil .vl-mark{ width:150px; height:auto; opacity:0; transition:opacity .3s; }
.page-veil.cover .vl-mark{ opacity:1; }
/* the spin lives on a circular ring loader, not the wordmark */
.page-veil::after{
  content:""; width:30px; height:30px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.14);
  border-top-color:var(--blue-bright);
  opacity:0; transition:opacity .3s;
}
.page-veil.cover::after{ opacity:1; animation:spin .9s linear infinite; }

/* ============================================================ REVEAL */
[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); will-change:opacity,transform; }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-44px); }
[data-reveal="right"]{ transform:translateX(44px); }
[data-reveal="scale"]{ transform:scale(.92); }
[data-delay="1"]{ transition-delay:.09s; }
[data-delay="2"]{ transition-delay:.18s; }
[data-delay="3"]{ transition-delay:.27s; }
[data-delay="4"]{ transition-delay:.36s; }
[data-delay="5"]{ transition-delay:.45s; }
[data-delay="6"]{ transition-delay:.54s; }

/* line mask reveal for headings */
.reveal-lines .ln{ display:block; overflow:hidden; }
.reveal-lines .ln > span{ display:block; transform:translateY(105%); transition:transform 1s var(--ease); }
.reveal-lines.in .ln > span{ transform:translateY(0); }
.reveal-lines.in .ln:nth-child(2) > span{ transition-delay:.08s; }
.reveal-lines.in .ln:nth-child(3) > span{ transition-delay:.16s; }
.reveal-lines.in .ln:nth-child(4) > span{ transition-delay:.24s; }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .reveal-lines .ln > span{ transform:none !important; }
}

/* No-JS / non-painting safety: never permanently hide content */
html:not(.js) [data-reveal]{ opacity:1 !important; transform:none !important; }
html:not(.js) .reveal-lines .ln > span{ transform:none !important; }
html:not(.js) .page-veil{ display:none !important; }
html.reveal-now [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
html.reveal-now .reveal-lines .ln > span{ transform:none !important; transition:none !important; }
html.reveal-now .page-veil{ transform:scaleY(0) !important; transition:none !important; }

/* ============================================================ COMPASS MOTIF */
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes spin-rev{ to{ transform:rotate(-360deg); } }
@keyframes float-y{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@keyframes pulse-ring{ 0%{ transform:scale(.7); opacity:.55; } 100%{ transform:scale(1.7); opacity:0; } }

.orbit-deco{ position:absolute; border-radius:50%; border:1px solid var(--line); pointer-events:none; }

/* ============================================================ FOOTER */
.footer{ background:var(--ink-black); color:var(--tx-on-dark-soft); padding-top:clamp(70px,9vw,120px); position:relative; overflow:hidden; }
.footer a{ transition:color .3s; }
.footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:48px; padding-bottom:64px; }
.footer h5{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--blue-bright); margin-bottom:22px; font-weight:500; }
.footer-links{ display:flex; flex-direction:column; gap:13px; font-size:0.98rem; }
.footer-bottom{ border-top:1px solid var(--line-dark); padding-block:28px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-size:0.85rem; color:var(--tx-on-dark-soft); }
.footer-logo{ height:42px; margin-bottom:24px; }
.footer-cta-line{ font-family:var(--font-display); font-size:clamp(2rem,6vw,4.6rem); color:#fff; font-weight:500; line-height:1; letter-spacing:-0.03em; }

/* ============================================================ CARDS / UTIL */
.divider{ height:1px; background:var(--line); border:0; }
.tag{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--tx-mut); display:inline-flex; gap:.5em; align-items:center;
}
.num-index{ font-family:var(--font-mono); font-size:0.8rem; color:var(--blue); letter-spacing:0.05em; }

.grid{ display:grid; gap:clamp(20px,2.5vw,32px); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }

/* custom cursor */
.cursor-dot{ position:fixed; top:0; left:0; width:7px; height:7px; border-radius:50%; background:var(--blue); pointer-events:none; z-index:5000; transform:translate(-50%,-50%); transition:width .25s, height .25s, background .25s; mix-blend-mode:normal; }
.cursor-ring{ position:fixed; top:0; left:0; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--blue); pointer-events:none; z-index:5000; transform:translate(-50%,-50%); transition:width .3s var(--ease), height .3s var(--ease), border-color .3s, background .3s, opacity .3s; }
.cursor-ring.hover{ width:64px; height:64px; background:rgba(0,114,181,0.08); border-color:transparent; }
@media(hover:none),(pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* responsive */
@media(max-width:1024px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .cols-4{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:820px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .nav-cta{ display:none; }
  .cols-3,.cols-2{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  body{ font-size:16px; }
}
@media(max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
  .cols-4{ grid-template-columns:1fr; }
}