/* ==========================================================================
   TITANOM.AI — BASE
   Tokens, reset, typography, buttons, utilities.
   Brand is LOCKED. Do not invent new colours or fonts.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* --- brand ink --- */
  --ink:#0F0F0F;
  --ink-0:#080909;
  --ink-1:#0d0f0f;
  --ink-2:#121514;
  --ink-3:#171b1a;

  /* --- lines --- */
  --line:rgba(237,241,241,.10);
  --line-2:rgba(237,241,241,.16);

  /* --- brand accents --- */
  --teal:#6B9B9B;
  --teal-bright:#8FC6C6;
  --teal-glow:rgba(107,155,155,.55);
  --gold:#EFD24A;
  --gold-glow:rgba(239,210,74,.4);

  /* --- neutrals --- */
  --white:#FFFFFF;
  --mist:#EDF1F1;
  --muted:rgba(237,241,241,.62);
  --muted-2:rgba(237,241,241,.40);

  /* --- type --- */
  --font-display:'acumin-variable','Archivo',system-ui,sans-serif;
  --font-exp:'acumin-variable','Archivo Expanded','Archivo',sans-serif;
  --font-body:'Poppins',system-ui,sans-serif;

  /* --- metrics --- */
  --maxw:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:76px;
}

html{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
}
body{
  background:var(--ink-0);
  color:var(--mist);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  letter-spacing:.01em;
}
body.loading{overflow:hidden;height:100vh}

a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--teal);color:var(--ink)}

/* visible focus for keyboard users only */
:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px;border-radius:2px}

/* skip link — first tab stop on every page */
.skip{
  position:absolute;left:-9999px;top:0;z-index:10001;
  background:var(--teal);color:var(--ink);font-family:var(--font-display);font-weight:600;
  padding:12px 20px;border-radius:0 0 4px 0
}
.skip:focus{left:0}

/* ============ TYPOGRAPHY ============ */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);font-weight:800;line-height:1.02;
  letter-spacing:-.02em;color:var(--white);text-wrap:balance
}
p,blockquote,li,figcaption{text-wrap:pretty}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--teal-bright)
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--teal)}
.eyebrow.center::before{display:none}

/* Yellow buzz-word highlight. Reserved for OUTCOME + MONEY words and client
   results only. Teal is for brand and product terms. Never mix the two. */
.yh{color:var(--gold);position:relative;white-space:nowrap;text-shadow:0 0 22px var(--gold-glow)}
.yh::after{
  content:"";position:absolute;left:-.02em;right:-.02em;bottom:-.02em;height:.085em;background:var(--gold);
  border-radius:3px;box-shadow:0 0 14px var(--gold-glow);transform:scaleX(0);transform-origin:left;
  transition:transform .75s var(--ease) .35s
}
.reveal.in .yh::after,.hero-sub.in .yh::after,.no-anim .yh::after{transform:scaleX(1)}

/* teal inline highlight for product / brand terms */
.th{color:var(--teal-bright)}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.reveal.in{opacity:1;transform:none}
.mask{overflow:hidden;display:block}
.mask>span{display:block}

/* ============ LAYOUT UTILITIES ============ */
.wrap{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 32px}
.wrap-narrow{max-width:860px}
.center{text-align:center}
.stack-sm{display:flex;flex-direction:column;gap:10px}

/* ============ BUTTONS ============ */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:600;font-size:14.5px;letter-spacing:.01em;padding:15px 26px;border-radius:2px;overflow:hidden;
  transition:transform .5s var(--ease),color .4s,background .4s,border-color .4s,box-shadow .4s
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .5s var(--ease)}
.btn-primary{background:var(--mist);color:var(--ink)}
.btn-primary:hover{background:var(--white);transform:translateY(-2px)}
.btn-primary:hover svg{transform:translate(4px,-4px)}
.btn-ghost{border:1px solid var(--line-2);color:var(--mist)}
.btn-ghost:hover{border-color:var(--teal);color:var(--white);background:rgba(107,155,155,.07)}
.btn-teal{
  background:linear-gradient(180deg,var(--teal-bright),var(--teal));color:var(--ink);
  box-shadow:0 8px 22px -8px var(--teal-glow),0 0 0 1px rgba(143,198,198,.25),inset 0 1px 0 rgba(255,255,255,.4)
}
.btn-teal:hover{
  background:linear-gradient(180deg,#A9D6D6,var(--teal-bright));transform:translateY(-2px);
  box-shadow:0 18px 46px -12px var(--teal-glow),0 0 0 1px rgba(143,198,198,.4),inset 0 1px 0 rgba(255,255,255,.55)
}
/* Top nav CTA: white writing on a deepened teal so it reads crisp and still pops */
.btn-teal[data-cta="nav"]{background:linear-gradient(180deg,#5E9E9E,#3D7373);color:#fff;text-shadow:0 1px 3px rgba(6,18,18,.5)}
.btn-teal[data-cta="nav"]:hover{background:linear-gradient(180deg,#7FB4B4,#4E8585);color:#fff}
.btn-block{width:100%;justify-content:center}

.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn-row.center{justify-content:center}

/* text link with animated rule */
.tlink{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:14.5px;
  color:var(--teal-bright);position:relative;padding-bottom:3px
}
.tlink::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--teal-bright);transition:width .45s var(--ease)}
.tlink:hover::after{width:100%}
.tlink svg{width:14px;height:14px;transition:transform .45s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}

/* ============ SECTION SHELL ============ */
section{position:relative;z-index:3;background:var(--ink-0)}
.sec{padding:130px 0}
.sec-tight{padding:96px 0}
.sec-head{max-width:760px;margin-bottom:70px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(2rem,4.6vw,3.5rem);margin-top:20px}
.sec-head p{margin-top:22px;font-size:1.06rem;color:var(--muted);max-width:600px}
.sec-head.center p{margin-left:auto;margin-right:auto}

/* Answer-first lede. GEO/AEO pattern: the direct answer in one sentence,
   immediately after the H1 or H2, so engines can lift it whole. */
.lede{
  font-size:1.16rem;line-height:1.62;color:var(--mist);max-width:720px;
  padding-left:22px;border-left:2px solid var(--teal)
}
.lede.center{margin-left:auto;margin-right:auto;text-align:left}

/* ============ MOTION PREFERENCES ============ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .yh::after{transform:scaleX(1)!important}
}

/* ============ RESPONSIVE BASE ============ */
@media(max-width:560px){
  .wrap{padding-left:22px;padding-right:22px}
  .sec{padding:82px 0}
  .sec-tight{padding:64px 0}
  .sec-head{margin-bottom:48px}
  .lede{font-size:1.05rem;padding-left:16px}
}