/* === ThinkDot v2 — Typography & Motion polish === */

/* Fonts: Sora (display) + Inter (text) */
:root{
  --bg: #131722;
  --bg-soft: #161b27;
  --surface: #1b2130;
  --ink: #f2f4f8;
  --muted: #bfc6d5;
  --edge: rgba(255,255,255,.10);

  --y: #ffd000;   /* brand yellow */
  --y2:#ffb300;
  --cyan:#3fd8ff;
  --mint:#42e3c7;
  --violet:#b48cff;

  --blur: 38px;

  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  --font-text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Responsive type scale */
  --fs-xs: clamp(.78rem, .72rem + .2vw, .85rem);
  --fs-sm: clamp(.95rem, .9rem + .2vw, 1rem);
  --fs-md: clamp(1.05rem, 1rem + .3vw, 1.1rem);
  --fs-lg: clamp(1.2rem, 1.1rem + .6vw, 1.5rem);
  --fs-xl: clamp(2rem, 1.6rem + 2.4vw, 3rem);
  --fs-xxl: clamp(2.6rem, 2rem + 3.6vw, 4.2rem);
}

html,body{
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(255,208,0,.05), transparent 60%),
    radial-gradient(900px 380px at 110% 0%, rgba(66,227,199,.05), transparent 70%),
    var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body{ font-family: var(--font-text); font-size: var(--fs-md); }
p,li,small{ color: var(--muted) }
h1,h2,h3,h4,h5{ font-family: var(--font-display); letter-spacing:.2px }

/* Layout polish */
.container{ max-width: 1160px }
.mt-nav{ margin-top:4.75rem }
.section-hero,.page-hero{ padding: 7rem 0 2rem }

/* Buttons */
.btn-tds{
  background: linear-gradient(90deg,var(--y2),var(--y));
  border: none; color: #121212; font-weight: 800; letter-spacing:.2px;
  box-shadow: 0 6px 22px rgba(255,208,0,.25);
  transform: translateZ(0);
}
.btn-tds:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.btn-outline-warning{ color: var(--y); border-color: var(--y) }
.btn-outline-warning:hover{ background: var(--y); color: #121212 }

/* Cards */
.card-3d,.card-tier{
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--edge);
  box-shadow: 0 14px 42px rgba(0,0,0,.35);
}

/* Images */
.img-ill{ border-radius:22px; box-shadow:0 14px 42px rgba(0,0,0,.35); border:1px solid var(--edge) }

/* Reveal on view */
.reveal{ opacity:0; transform: translateY(12px) scale(.98); transition: all .65s cubic-bezier(.2,.7,.2,1) }
.reveal.show{ opacity:1; transform: translateY(0) scale(1) }

/* KPI bars / donut */
.kpi{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px dashed rgba(255,255,255,.2); border-radius:16px; background: rgba(255,255,255,.03); }
.kpi .num{ font-weight:800; font-size:1.6rem }
.kpi .tag{ font-size:.85rem; color: var(--muted) }
.bar{ height:10px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; position:relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) }
.bar > span{ display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--cyan), var(--y)); animation: growBar 2.2s ease forwards }
@keyframes growBar{ from{ width:0% } to{ width: var(--to, 70%) } }
.donut{ --size:88px; --val:72; width: var(--size); height: var(--size); border-radius:50%; background: conic-gradient(var(--y) calc(var(--val)*1%), rgba(255,255,255,.1) 0); mask: radial-gradient(circle at 50% 50%, transparent 58%, #000 59%); box-shadow: 0 0 24px rgba(255,208,0,.18) }

/* ===== Animated Headings ===== */

/* 1) Gradient ink + shimmer underline */
.hx-gradient{
  font-weight: 800;
  font-size: var(--fs-xxl);
  line-height: 1.05;
  background: linear-gradient(90deg, var(--y), var(--mint), var(--cyan));
  background-clip: text; -webkit-background-clip: text; color: transparent;
}
.hx-underline{
  position:relative; display:inline-block;
}
.hx-underline::after{
  content:""; position:absolute; left:0; bottom:-6px; height:4px; width:100%;
  background: linear-gradient(90deg, rgba(255,208,0,.0), rgba(255,208,0,1), rgba(63,216,255,1), rgba(63,216,255,0));
  border-radius:999px; filter: blur(.4px);
  transform-origin:left; transform: scaleX(0);
  animation: underlineIn .9s .2s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes underlineIn{ to{ transform: scaleX(1) } }

/* 2) Word rotator (pure CSS) */
.hx-rotate{ font-weight:800; font-size: var(--fs-xl); display:inline-block; white-space:nowrap }
.hx-rotate .words{ display:inline-block; vertical-align:top; overflow:hidden; height: 1.1em }
.hx-rotate .words b{ display:block; animation: slideUp 8s infinite; }
.hx-rotate .words b:nth-child(2){ animation-delay: 2.666s }
.hx-rotate .words b:nth-child(3){ animation-delay: 5.333s }
@keyframes slideUp{
  0% { transform: translateY(0); opacity:1 }
  27%{ transform: translateY(0); opacity:1 }
  33%{ transform: translateY(-110%); opacity:1 }
  60%{ transform: translateY(-110%); opacity:1 }
  66%{ transform: translateY(-220%); opacity:1 }
  93%{ transform: translateY(-220%); opacity:1 }
  100%{ transform: translateY(0); opacity:1 }
}

/* 3) Staggered subheading reveal */
.lead-stagger{ font-size: var(--fs-lg); opacity:.0; transform: translateY(6px); animation: leadIn .8s .15s ease forwards }
@keyframes leadIn{ to{ opacity:1; transform: translateY(0) } }

/* Trust chips */
.trust-chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border-radius:999px; border:1px solid var(--edge); background: rgba(255,255,255,.03) }
.trust-chip i{ color: var(--y) }

/* Utility text colors */
.text-warning{ color: var(--y)!important }
.text-mint{ color: var(--mint)!important }
.text-cyan{ color: var(--cyan)!important }
.text-violet{ color: var(--violet)!important }


html, body {
  overflow-x: hidden;
}