/* ============================================================
   TECHSOLUX — base.css
   Design system: ApeChain-style on a black-blue base.
   Manuka (display) · DM Sans (body) · DM Mono (labels).
   Brand blue extracted from logo = #4353FF
   ============================================================ */

/* ApeChain display face (global) */
@font-face{
  font-family:"Manuka";
  src:url("fonts/manuka.otf") format("opentype");
  font-display:swap;
}

/* signature gradient used by ApeChain rings / borders */
:root{ --grad-ring:linear-gradient(135deg,#A281FF 10%,#EB8280 33%,#EBBF9A 66%,#89D0FF 90%); }

/* ---- Tokens ---- */
:root{
  /* surfaces — black-blue (navy) */
  --bg:        #050A18;
  --bg-1:      #0A1124;
  --bg-2:      #101A33;
  --bg-3:      #182645;

  /* hairlines (blue-tinted) */
  --line:        rgba(140,165,255,.10);
  --line-2:      rgba(140,165,255,.18);
  --line-strong: rgba(140,165,255,.32);

  /* ink */
  --ink:    #F3F5FA;
  --ink-2:  #A7B0C6;
  --ink-3:  #5E6884;
  --ink-on-blue: #06070B;

  /* brand */
  --blue:    #4353FF;
  --blue-2:  #6E7BFF;
  --blue-dim:#2A309E;
  --blue-glow: rgba(67,83,255,.45);

  /* fonts — ApeChain system */
  --font-display: "Manuka", "Space Grotesk", sans-serif;
  --font-body:    "DM Sans", system-ui, sans-serif;
  --font-mono:    "DM Mono", "JetBrains Mono", monospace;
  --font-serif:   "Instrument Serif", serif;

  /* layout */
  --gutter: clamp(20px, 5vw, 96px);
  --maxw: 1680px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--blue); color:#fff; }

/* film grain + subtle blue vignette over everything */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(67,83,255,.10), transparent 55%),
    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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  mix-blend-mode:screen;
}

/* ---- Layout helpers ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ position:relative; padding-block:clamp(80px,11vh,160px); }
.section--tight{ padding-block:clamp(56px,7vh,96px); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* hairline column rails (brutalist grid) */
.rails{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.rails::before, .rails::after{
  content:""; position:absolute; top:0; bottom:0; width:1px; background:var(--line);
}
.rails::before{ left:var(--gutter); }
.rails::after{ right:var(--gutter); }

/* ---- Type ---- */
.mono{ font-family:var(--font-mono); font-weight:500; letter-spacing:.04em; }
.eyebrow{
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--blue);
}
.serif{ font-family:var(--font-serif); font-weight:400; font-style:italic; }

h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:400; line-height:1.0; letter-spacing:-.005em; }
.display{
  font-family:var(--font-display);
  font-size:clamp(48px, 9vw, 150px);
  font-weight:400; line-height:.92; letter-spacing:0;
  text-transform:uppercase;
}
.h-sec{
  font-family:var(--font-display);
  font-size:clamp(34px, 5.4vw, 86px);
  font-weight:400; line-height:.95; letter-spacing:0; text-transform:uppercase;
}
.lead{ font-size:clamp(18px,2vw,24px); line-height:1.5; color:var(--ink-2); }

/* section header block (shared) */
.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap; margin-bottom:clamp(40px,5vw,72px);
}
.sec-head .idx{
  font-family:var(--font-mono); font-size:13px; color:var(--blue);
  letter-spacing:.1em; margin-bottom:18px; display:block;
}
.sec-head .lead{ max-width:46ch; }

/* ---- Buttons ---- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  padding:15px 26px; border:0; background:rgba(255,255,255,.04); color:var(--ink);
  cursor:pointer; transition:.35s var(--ease); border-radius:999px;
}
/* gradient ring (ApeChain) drawn as a masked border on ::before */
.btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:var(--grad-ring);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.55; transition:opacity .3s var(--ease); pointer-events:none;
}
.btn:hover::before{ opacity:1; }
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(5px); }
.btn--primary{ background:#fff; color:#06070B; }
.btn--primary::before{ opacity:.9; }
.btn--primary:hover{ box-shadow:0 0 40px var(--blue-glow); }
.btn--lg{ padding:19px 32px; font-size:13px; }

/* tag / chip — ApeChain pill */
.tag{
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
  padding:6px 13px; border:1px solid var(--line-2); white-space:nowrap;
  border-radius:999px; background:rgba(255,255,255,.03);
}
.tag--blue{ color:var(--blue-2); border-color:var(--blue-dim); background:rgba(67,83,255,.10); }

/* ---- Media placeholder (no real screenshots yet) ---- */
.ph{
  position:relative; overflow:hidden; background:var(--bg-1);
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 11px);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
}
.ph__label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); text-align:center; padding:14px 18px; z-index:2;
  border:1px dashed var(--line-2); background:rgba(7,8,11,.55);
}
.ph__corner{ position:absolute; width:10px; height:10px; border:1px solid var(--line-2); }
.ph__corner.tl{ top:10px; left:10px; border-right:0; border-bottom:0; }
.ph__corner.tr{ top:10px; right:10px; border-left:0; border-bottom:0; }
.ph__corner.bl{ bottom:10px; left:10px; border-right:0; border-top:0; }
.ph__corner.br{ bottom:10px; right:10px; border-left:0; border-top:0; }

/* screen-reader-only — accessible, descriptive H1 for SEO without altering the visual hero */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* note flag for unvalidated data */
.flag{
  display:inline-block; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blue-2); border:1px solid var(--blue-dim);
  padding:3px 7px; vertical-align:middle;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter);
  transition:background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(7,8,11,.72); backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--line); padding-block:14px;
}
.nav__logo{ display:flex; align-items:center; }
/* tight-cropped logo-blue.png rendered white for dark backgrounds */
.nav__logo img{ width:180px; height:auto; filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.5)); }
@media (max-width:920px){ .nav__logo img{ width:150px; } }
.nav__links{ display:flex; align-items:center; gap:34px; }
.nav__links a{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.05em; color:#fff;
  transition:color .25s; position:relative; text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--blue);
  transition:width .3s var(--ease);
}
.nav__links a:hover{ color:var(--blue-2); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:18px; }
.nav__burger{ display:none; }

@media (max-width:920px){
  .nav__links{ display:none; }
  .nav__cta .btn{ display:none; }
  .nav__burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:40px; height:40px; background:none; border:0; cursor:pointer; padding:8px; z-index:130;
  }
  .nav__burger span{ width:24px; height:2px; background:#fff; transition:.3s var(--ease); transform-origin:center; }
  body.menu-open .nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.menu-open .nav__burger span:nth-child(2){ opacity:0; }
  body.menu-open .nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   MOBILE MENU (slide-down overlay)
   ============================================================ */
.navmenu{
  position:fixed; inset:0; z-index:120;
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:var(--gutter);
  background:linear-gradient(180deg,#070C1A 0%,#050A18 100%);
  opacity:0; pointer-events:none; transform:translateY(-12px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.navmenu.is-open{ opacity:1; pointer-events:auto; transform:none; }
.navmenu__close{
  position:absolute; top:18px; right:calc(var(--gutter) - 4px);
  width:44px; height:44px; background:none; border:0; color:#fff; font-size:22px; cursor:pointer;
}
.navmenu__links{ display:flex; flex-direction:column; gap:6px; }
.navmenu__links a{
  font-family:var(--font-display); font-size:clamp(40px,12vw,72px); line-height:1.04;
  text-transform:uppercase; color:#fff; transition:color .2s;
}
.navmenu__links a:active,
.navmenu__links a:hover{ color:var(--blue-2); }
.navmenu__cta{ margin-top:28px; align-self:flex-start; }
@media (min-width:921px){ .navmenu{ display:none; } }

/* ---- button glow on hover (ApeChain blurred gradient ring) ---- */
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:var(--grad-ring);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  filter:blur(5px); opacity:0; transition:opacity .3s var(--ease); pointer-events:none;
}
.btn:hover::after{ opacity:.85; }

/* ---- rolling label (ApeChain UILink/UIBtn) ---- */
.roll{ position:relative; display:inline-flex; overflow:hidden; vertical-align:bottom; line-height:1.2; }
.roll span{ display:block; transition:transform .32s cubic-bezier(.33,1,.68,1); }
.roll span:last-child{ position:absolute; left:0; top:100%; color:var(--blue-2); }
.roll:hover span{ transform:translateY(-100%); }

/* ============================================================
   FOOTER — ApeChain field: blue→navy→black + cursor-reactive
   contour rings + project mosaic + chromatic TECHSOLUX wordmark
   ============================================================ */
.tsf{
  position:relative; overflow:clip; color:#fff;
  background:linear-gradient(180deg,#0958E5 0%,#0A3BB4 28%,#030A21 62%,#000 88%);
}
.tsf__contour{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; pointer-events:none; }
.tsf__mosaic{
  position:absolute; left:0; right:0; bottom:0; z-index:0; height:clamp(80px,11vw,140px);
  display:flex; gap:6px; opacity:.13; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(to top, #000 10%, transparent 100%);
          mask-image:linear-gradient(to top, #000 10%, transparent 100%);
}
.tsf__mosaic span{ flex:0 0 clamp(140px,16vw,220px); background-size:cover; background-position:center; border-radius:8px; }
.tsf__inner{ position:relative; z-index:10; padding-top:24px; }
.tsf__cols{ display:flex; flex-direction:column; gap:20px; padding:26px var(--gutter) 8px; }
@media (min-width:768px){ .tsf__cols{ flex-direction:row; justify-content:flex-end; gap:24px; padding-top:44px; } }
@media (min-width:768px){ .tsf__col{ width:172px; } }
.tsf__col h5{ font-family:var(--font-display); font-size:24px; font-weight:400; text-transform:uppercase; line-height:1; margin:0 0 16px; color:#fff; }
.tsf__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.tsf__col li a{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.02em; line-height:14px; color:#fff; }

/* chromatic cursor-reactive wordmark */
.tsf__wordzone{ position:relative; width:100%; padding-inline:var(--gutter); }
.tsf__word{
  position:relative; width:100%; text-align:center;
  font-family:var(--font-display); text-transform:uppercase; line-height:.8;
  font-size:clamp(44px,14vw,230px); letter-spacing:-.01em; user-select:none;
}
.tsf-word__l{ display:block; }
.tsf-word__base{ position:relative; color:#fff; }
.tsf-word__r,.tsf-word__g,.tsf-word__b{ position:absolute; inset:0; mix-blend-mode:screen; pointer-events:none; will-change:transform; }
.tsf-word__r{ color:#ff1f1f; }
.tsf-word__g{ color:#1fff5a; }
.tsf-word__b{ color:#2b6bff; }

/* legal bar */
.tsf__legal{
  display:flex; flex-direction:column-reverse; align-items:center; gap:12px;
  padding:14px var(--gutter) 16px;
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#fff;
}
@media (min-width:768px){ .tsf__legal{ flex-direction:row; justify-content:space-between; gap:0; } }
.tsf__legal-links{ display:flex; align-items:center; gap:8px; }

/* ---- reveal (GSAP fallback = visible) ---- */
.reveal{ will-change:transform,opacity; }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* ---- grain toggle (tweakable) ---- */
body.no-grain::after{ display:none; }

/* ============================================================
   LIGHT THEME — brutalist béton (variation tweakable)
   ============================================================ */
:root[data-theme="light"]{
  --bg:    #ECEAE3;
  --bg-1:  #E3E0D7;
  --bg-2:  #D9D6CC;
  --bg-3:  #CFCBC0;
  --line:        rgba(11,12,16,.13);
  --line-2:      rgba(11,12,16,.22);
  --line-strong: rgba(11,12,16,.36);
  --ink:   #0B0C10;
  --ink-2: #474C57;
  --ink-3: #8A8F98;
  --ink-on-blue:#fff;
  --blue-glow: rgba(67,83,255,.30);
}
:root[data-theme="light"] body::after{
  mix-blend-mode:multiply;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(67,83,255,.07), transparent 55%),
    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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .nav.is-stuck{ background:rgba(236,234,227,.78); }
:root[data-theme="light"] .nav__logo img,
:root[data-theme="light"] .ph__label{ filter:none; }
:root[data-theme="light"] .ph{ background:var(--bg-1); }
:root[data-theme="light"] .card,
:root[data-theme="light"] .svc:hover,
:root[data-theme="light"] .step:hover,
:root[data-theme="light"] .channel:hover{ background:var(--bg-1); }
:root[data-theme="light"] ::selection{ background:var(--blue); color:#fff; }