/* ═══════════════════════════════════════════════
   THINKTREK  ·  Global Design System
   Dark · Minimal · Innovative · Mobile-ready
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;1,9..40,300&display=swap');

/* ── TOKENS ───────────────────────────────────── */
:root {
  --bg:     #07090E;
  --bg2:    #0B0F18;
  --teal:   #177A93;
  --glow:   #0FF4C6;
  --cream:  #EDE8DF;
  --muted:  rgba(237,232,223,.45);
  --dim:    rgba(237,232,223,.15);
  --border: rgba(237,232,223,.08);
  --b-teal: rgba(23,122,147,.25);
  --ff-d:   'Archivo', sans-serif;
  --ff-b:   'DM Sans', sans-serif;
  --ease:   cubic-bezier(.16,1,.3,1);
  --ease2:  cubic-bezier(.4,0,.2,1);
}

/* ── RESET ────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--ff-b);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a  { color:inherit; text-decoration:none }
ul { list-style:none }
img { display:block; max-width:100% }
button { font-family:inherit; background:none; border:none; cursor:pointer; color:inherit }
::selection { background:rgba(15,244,198,.15); color:var(--glow) }
::-webkit-scrollbar { width:2px }
::-webkit-scrollbar-thumb { background:var(--teal) }

/* ── GRAIN OVERLAY ────────────────────────────── */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9000;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:.03;
}

/* ── CURSOR (desktop) ─────────────────────────── */
.cur, .cur-r { display:none; pointer-events:none; position:fixed; z-index:9999 }
@media (pointer:fine) {
  body { cursor:none }
  a,button { cursor:none }
  .cur {
    display:block; width:6px; height:6px;
    background:var(--glow); border-radius:50%;
    transform:translate(-50%,-50%);
    transition:width .15s, height .15s;
    box-shadow:0 0 10px var(--glow);
  }
  .cur-r {
    display:block; width:36px; height:36px;
    border:1px solid rgba(15,244,198,.35); border-radius:50%;
    transform:translate(-50%,-50%);
    transition:width .5s var(--ease), height .5s var(--ease), border-color .3s;
  }
  .cur.hov   { width:0; height:0; box-shadow:none }
  .cur-r.hov { width:56px; height:56px; border-color:var(--glow) }
}

/* ── LOGO ─────────────────────────────────────── */
.logo-img {
  display: block;
  height: 22px;
  width: auto;
  position: relative; z-index: 1;
  transition: opacity .2s;
  flex-shrink: 0;
}
.logo-img:hover { opacity: .85 }

.logo-icon {
  display: block;
  height: 28px;
  width: auto;
  flex-shrink: 0;
}

/* Footer uses the light logo (white Think) */
.footer-logo-img {
  display: block;
  height: 26px;
  width: auto;
  margin-bottom: 16px;
}

/* ── NAV ──────────────────────────────────────── */
.nav {
  position: fixed; top:0; left:0; right:0; z-index:800;
  height: 68px;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 48px;
}
.nav-glass {
  position:absolute; inset:8px 14px;
  border-radius:100px;
  background:rgba(7,9,14,.82);
  backdrop-filter:blur(24px);
  border:1px solid var(--border);
  z-index:0;
}
.nav-right {
  display: flex; align-items:center; gap:32px;
  position:relative; z-index:1;
}
.nav-links { display:flex; gap:28px }
.nav-links a {
  font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); position:relative;
  transition:color .2s;
}
.nav-links a::after {
  content:''; position:absolute; left:0; bottom:-2px; right:0;
  height:1px; background:var(--glow);
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color:var(--cream) }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1) }
.nav-cta {
  font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  padding:9px 22px; border-radius:100px;
  border:1px solid var(--b-teal); color:var(--teal);
  transition:all .25s; position:relative; z-index:1;
}
.nav-cta:hover { background:var(--teal); color:#fff }

/* ── HAMBURGER ────────────────────────────────── */
.burger {
  display:none;
  position:relative; z-index:1;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid var(--border);
  align-items:center; justify-content:center;
  flex-direction:column; gap:6px;
  transition:border-color .2s;
}
.burger:hover { border-color:var(--b-teal) }
.burger span {
  display:block; height:1.5px;
  background:var(--cream); border-radius:2px;
  transition:all .35s var(--ease);
  transform-origin:center;
}
.burger span:nth-child(1) { width:18px }
.burger span:nth-child(2) { width:12px; opacity:.7 }
.burger.open span:nth-child(1) { width:18px; transform:translateY(7.5px) rotate(45deg); opacity:1 }
.burger.open span:nth-child(2) { width:18px; transform:translateY(-7.5px) rotate(-45deg); opacity:1 }

/* ── MOBILE FULLSCREEN MENU ───────────────────── */
.m-menu {
  position:fixed; inset:0; z-index:790;
  background:var(--bg);
  display:flex; flex-direction:column;
  justify-content:center;
  padding:0 36px 60px;
  opacity:0; pointer-events:none;
  transition:opacity .38s var(--ease);
}
/* Grain on menu too */
.m-menu::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:.03;
}
.m-menu.open { opacity:1; pointer-events:all }
.m-menu-links { display:flex; flex-direction:column }
.m-menu-links a {
  font-family:'Archivo', sans-serif;
  font-weight:900;
  font-size:clamp(40px,11vw,72px);
  letter-spacing:-.03em;
  line-height:1.05;
  color:var(--cream);
  padding:14px 0;
  border-bottom:1px solid var(--border);
  position:relative;
  overflow:hidden;
  transition:color .2s;
  display:flex; align-items:center; justify-content:space-between;
}
.m-menu-links a:first-child { border-top:1px solid var(--border) }
.m-menu-links a:hover { color:var(--glow) }
.m-menu-links a .m-num {
  font-family:var(--ff-b); font-size:11px; font-weight:400;
  letter-spacing:.1em; color:var(--muted); align-self:flex-start; margin-top:8px;
}
.m-menu-foot {
  margin-top:48px;
  font-size:13px; color:var(--muted);
}
.m-menu-foot a { color:var(--teal) }

/* mobile menu logo */
.m-menu-logo {
  position: absolute;
  top: 28px; left: 36px;
}


.m-menu-links a {
  transform:translateY(20px);
  transition:color .2s, transform .45s var(--ease), opacity .45s var(--ease);
  opacity:0;
}
.m-menu.open .m-menu-links a { transform:none; opacity:1 }
.m-menu.open .m-menu-links a:nth-child(1) { transition-delay:.05s }
.m-menu.open .m-menu-links a:nth-child(2) { transition-delay:.10s }
.m-menu.open .m-menu-links a:nth-child(3) { transition-delay:.15s }
.m-menu.open .m-menu-links a:nth-child(4) { transition-delay:.20s }
.m-menu.open .m-menu-links a:nth-child(5) { transition-delay:.25s }

/* ── EYEBROW ──────────────────────────────────── */
.eyebrow {
  font-size:10px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--teal);
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before {
  content:''; width:22px; height:1px; background:var(--teal); flex-shrink:0
}

/* ── BUTTONS ──────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-b); font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; border-radius:100px;
  transition:all .3s var(--ease); white-space:nowrap;
}
.btn-fill {
  padding:14px 36px;
  background:var(--teal); color:#fff; border:1px solid var(--teal);
}
.btn-fill:hover { background:transparent; color:var(--teal); transform:translateY(-2px) }
.btn-ghost {
  padding:13px 28px;
  color:var(--muted); border:1px solid var(--border);
}
.btn-ghost:hover { color:var(--cream); border-color:var(--dim) }
.btn .arr { transition:transform .3s var(--ease) }
.btn:hover .arr { transform:translateX(5px) }

/* ── REVEAL ───────────────────────────────────── */
[data-r] {
  opacity:0; transform:translateY(28px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
[data-r].on { opacity:1; transform:none }
[data-r][data-d="1"] { transition-delay:.10s }
[data-r][data-d="2"] { transition-delay:.20s }
[data-r][data-d="3"] { transition-delay:.32s }
[data-r][data-d="4"] { transition-delay:.44s }
[data-r][data-d="5"] { transition-delay:.56s }

/* ── PAGE HERO (inner pages) ──────────────────── */
.page-hero {
  padding:160px 60px 80px;
  border-bottom:1px solid var(--border);
  overflow:hidden; position:relative;
}
.page-hero .eyebrow  { margin-bottom:28px; animation:fadeUp .7s .1s var(--ease) both }
.page-hero h1 {
  font-family:'Archivo', sans-serif; font-weight:900;
  font-size:clamp(52px,9vw,108px);
  line-height:.9; letter-spacing:-.04em; color:var(--cream);
  animation:fadeUp .9s .25s var(--ease) both;
}
.page-hero h1 em { font-style:normal; color:var(--teal) }
.page-hero p {
  margin-top:28px; max-width:500px;
  font-size:clamp(15px,2vw,18px); color:var(--muted);
  line-height:1.8; animation:fadeUp .9s .4s var(--ease) both;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

/* ── MARQUEE ──────────────────────────────────── */
.marquee {
  overflow:hidden;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:14px 0;
}
.marquee-track { display:flex; width:max-content; animation:roll 32s linear infinite }
@keyframes roll { to { transform:translateX(-50%) } }
.marquee-item {
  display:inline-flex; align-items:center; padding:0 32px;
  font-family:'Archivo', sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.marquee-item::after { content:'·'; margin-left:32px; color:var(--teal) }

/* ── FOOTER ───────────────────────────────────── */
footer {
  background:var(--bg2); border-top:1px solid var(--border);
  padding:80px 60px 44px;
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:60px; margin-bottom:52px }
.footer-logo-w { margin-bottom:14px }
.footer-desc { font-size:14px; color:var(--muted); line-height:1.8; max-width:260px }
.footer-col h4 {
  font-family:'Archivo', sans-serif; font-size:9px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--teal); margin-bottom:18px
}
.footer-col a { display:block; font-size:14px; color:var(--muted); margin-bottom:10px; transition:color .2s }
.footer-col a:hover { color:var(--cream) }
.footer-btm {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:22px; border-top:1px solid var(--border);
}
.footer-btm p { font-size:11px; color:var(--dim); letter-spacing:.06em }

/* ── FORM ─────────────────────────────────────── */
.f-lbl { display:block; font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); margin-bottom:8px }
.f-in {
  width:100%; background:rgba(237,232,223,.04); border:1px solid var(--border);
  color:var(--cream); padding:13px 16px;
  font-family:var(--ff-b); font-size:15px;
  border-radius:4px; outline:none;
  transition:border-color .2s, background .2s;
  -webkit-appearance:none;
}
.f-in::placeholder { color:var(--dim) }
.f-in:focus { border-color:var(--teal); background:rgba(23,122,147,.06) }
textarea.f-in { resize:vertical; min-height:120px }
select.f-in option { background:var(--bg) }

/* ── RESPONSIVE ───────────────────────────────── */
@media (max-width:900px) {
  .nav { padding:0 24px }
  .nav-links, .nav-cta { display:none }
  .burger { display:flex }

  .page-hero { padding:120px 28px 60px }
  footer { padding:60px 28px 40px }
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px }
  .footer-btm { flex-direction:column; gap:8px; text-align:center }
}

@media (max-width:600px) {
  .nav { padding:0 16px }
  .page-hero { padding:100px 20px 48px }
  footer { padding:48px 20px 32px }
  .footer-grid { grid-template-columns:1fr; gap:28px }
}