/* AITEARS — token system
   ink #0B0F19 · paper #F8F9FC · surface #FFFFFF · muted #5B6472 · line #E4E7EE
   warm #FF6B4A (human) · cold #4361EE (model) · good #16A34A · warn #D97706 · danger #DC2626
   display: Space Grotesk · body: Inter · data: IBM Plex Mono */

:root{
  --ink:#0B0F19;
  --paper:#F8F9FC;
  --surface:#FFFFFF;
  --muted:#5B6472;
  --line:#E4E7EE;
  --warm:#FF6B4A;
  --cold:#4361EE;
  --good:#16A34A;
  --warn:#D97706;
  --danger:#DC2626;
  --gradient: linear-gradient(120deg, var(--warm), var(--cold));
  --radius-sm: 10px;
  --radius-lg: 22px;
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.container{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}

a{color:inherit;}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(248,249,252,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
}
.svg-sprite{position:absolute; width:0; height:0; overflow:hidden;}
.logo{
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.25rem;
  text-decoration:none;
  letter-spacing:-0.01em;
}
/* Sized in em so the mark tracks the wordmark at every breakpoint. */
.logo-mark{width:1.2em; height:1.2em; flex:none;}
.main-nav{display:flex; gap:28px;}
.main-nav a{text-decoration:none; font-size:0.95rem; font-weight:500; color:var(--muted);}
.main-nav a:hover{color:var(--ink);}

.btn{
  display:inline-block;
  padding:12px 22px;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:0.95rem;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
}
.btn-small{padding:9px 16px; font-size:0.875rem;}
.btn-primary{
  background:var(--ink);
  color:#fff;
}
.btn-primary:hover{background:#1a2033;}
.btn-ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--ink);
}
.btn-ghost:hover{border-color:var(--ink);}

/* Hero */
.hero{padding:88px 0 64px;}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:64px;
  align-items:center;
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.2rem, 4.4vw, 3.6rem);
  line-height:1.08;
  letter-spacing:-0.015em;
  margin:0 0 20px;
}
.hero-sub{
  font-size:1.15rem;
  color:var(--muted);
  max-width:46ch;
  margin:0 0 32px;
}
.hero-actions{display:flex; gap:14px; margin-bottom:18px;}
.hero-fine{font-size:0.85rem; color:var(--muted);}

.hero-visual{text-align:center;}
.score-dial{position:relative; width:240px; height:240px; margin:0 auto;}
.dial-svg{width:100%; height:100%;}
.dial-track{fill:none; stroke:var(--line); stroke-width:10;}
.dial-fill{
  fill:none;
  stroke:url(#dialGradient);
  stroke-width:10;
  stroke-linecap:round;
  /* 2 * pi * 88. Starts fully offset; script.js drives it from there. */
  stroke-dasharray:552.92;
  stroke-dashoffset:552.92;
}

/* One tear after the score settles. Forms, hangs, then accelerates like it
   has weight -- the last keyframe segment eases in rather than out. */
.dial-tear{
  fill:var(--warm);
  opacity:0;
  transform-box:fill-box;
  /* Bottom origin so the squash on impact pins the drop's base to the
     contact line instead of collapsing it toward its own middle. */
  transform-origin:center bottom;
}
.dial-tear.is-falling{animation:dial-tear-fall 2.95s forwards;}

/* Timed against the sweep, not after it. The drop forms while the score is
   still climbing (0 to 15% here, against a 1.4s sweep that started 350ms
   earlier), then holds. The hold runs past the moment the count lands, so
   there is a beat of stillness on 0.42 before the drop lets go rather than
   the fall treading on the number's arrival. The fall easing accelerates but
   is not so flat at the start that its first 300ms is invisible. */
@keyframes dial-tear-fall{
  0%{opacity:0; transform:translateY(-4px) scale(0.5); animation-timing-function:cubic-bezier(.2,.8,.2,1);}
  15%{opacity:1; transform:translateY(0) scale(1); animation-timing-function:linear;}
  54%{opacity:1; transform:translateY(0) scale(1); animation-timing-function:cubic-bezier(.45,0,.8,.55);}
  /* Lands still solid, then goes, so the ripple has something to answer
     rather than fading into nothing on the way down. */
  /* Falls the full way to the inner edge of the ring, then flattens against
     it over the last 8% -- roughly 240ms -- rather than shrinking away. */
  92%{opacity:1; transform:translateY(28px) scale(1); animation-timing-function:cubic-bezier(.2,.8,.3,1);}
  96%{opacity:1; transform:translateY(28px) scaleX(1.55) scaleY(0.42);}
  100%{opacity:0; transform:translateY(28px) scaleX(2) scaleY(0.16);}
}

.dial-readout{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.dial-number{
  font-family:var(--font-mono);
  font-size:2.4rem;
  font-weight:600;
}
.dial-label{font-size:0.8rem; color:var(--muted); margin-top:4px;}
.visual-caption{font-size:0.85rem; color:var(--muted); margin-top:16px;}

/* Stats bar */
.stats-bar{
  background:var(--ink);
  color:#fff;
  padding:40px 0;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  text-align:center;
}
.stat-number{
  display:block;
  font-family:var(--font-mono);
  font-size:1.9rem;
  font-weight:600;
}
.stat-label{font-size:0.85rem; color:#AEB4C4;}

/* Section head */
.section-head{max-width:640px; margin:0 auto 48px; text-align:center;}
.section-head h2{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3vw,2.2rem);
  letter-spacing:-0.01em;
  margin:0 0 12px;
}
.section-head p{color:var(--muted); margin:0;}

.platform{padding:96px 0;}
.steps{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
}
.step{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px;
}
.step-number{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  border-radius:8px;
  background:var(--ink); color:#fff;
  font-family:var(--font-mono); font-size:0.9rem; font-weight:600;
  margin-bottom:16px;
}
.step h3{font-family:var(--font-display); margin:0 0 8px; font-size:1.15rem;}
.step p{color:var(--muted); font-size:0.95rem; margin:0;}

/* Calculator */
.calculator{padding:96px 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.calc-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;
}
.calc-copy h2{font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2rem); margin:0 0 12px;}
.calc-copy p{color:var(--muted); margin:0 0 28px;}
.calc-field{margin-bottom:22px;}
.calc-field label{display:block; font-size:0.9rem; font-weight:500; margin-bottom:8px;}
.calc-field select, .calc-field input[type=range]{width:100%;}
.calc-field select{
  padding:10px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  font-family:var(--font-body);
  font-size:0.95rem;
  background:var(--paper);
}

.calc-result{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:36px;
  text-align:center;
}
.result-score{display:flex; align-items:baseline; justify-content:center; gap:8px; margin-bottom:18px;}
.result-number{font-family:var(--font-mono); font-size:3rem; font-weight:600;}
.result-max{font-family:var(--font-mono); color:var(--muted); font-size:1.1rem;}
.result-bar-track{
  height:10px; border-radius:6px; background:var(--line); overflow:hidden; margin-bottom:20px;
}
.result-bar-fill{
  height:100%; width:0%; background:var(--gradient);
}
.result-verdict{font-weight:600; margin:0 0 6px;}
.result-action{font-size:0.9rem; color:var(--muted); margin:0;}
.calc-note{font-size:0.85rem; color:var(--muted); margin:24px 0 14px;}

/* Testimonials */
.testimonials{padding:96px 0;}
.testimonial-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.testimonial{
  margin:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px;
}
.testimonial p{font-size:1rem; margin:0 0 16px;}
.testimonial footer{font-size:0.85rem; color:var(--muted);}

/* Pricing */
.pricing{padding:96px 0; background:var(--ink); color:#fff;}
.pricing .section-head p{color:#AEB4C4;}
.pricing-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.price-card{
  background:#131A2B;
  border:1px solid #232B40;
  border-radius:var(--radius-lg);
  padding:32px;
  position:relative;
}
.price-card-featured{border-color:var(--cold); background:#141B33;}
.price-tag{
  position:absolute; top:-12px; left:32px;
  background:var(--gradient);
  color:#fff; font-size:0.75rem; font-weight:600;
  padding:4px 10px; border-radius:999px;
}
.price-card h3{font-family:var(--font-display); margin:0 0 8px;}
.price-amount{font-family:var(--font-mono); font-size:1.8rem; margin:0 0 12px;}
.price-amount span{font-size:0.9rem; color:#AEB4C4; font-family:var(--font-body);}
.price-desc{color:#AEB4C4; font-size:0.9rem; margin:0 0 20px;}
.price-card ul{list-style:none; padding:0; margin:0 0 28px; color:#D6DAE5; font-size:0.9rem;}
.price-card li{padding:6px 0; border-top:1px solid #232B40;}
.price-card li:first-child{border-top:none;}
.price-card .btn-ghost{border-color:#3A4258; color:#fff;}
.price-card .btn-ghost:hover{border-color:#fff;}

/* Methodology and Trust detail
   Reference-document rows rather than cards, so they read differently from
   the Platform steps and do not repeat that visual. */
.methodology{padding:96px 0;}
.method-grid{
  margin:0;
  border-top:1px solid var(--line);
}
.method-row{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:32px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
}
.method-row dt{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.05rem;
}
.method-row dd{margin:0; color:var(--muted); font-size:0.95rem;}
.method-note{
  max-width:640px;
  margin:36px auto 0;
  text-align:center;
  font-size:0.95rem;
  color:var(--muted);
}

/* FAQ */
.faq{padding:96px 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.faq-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:36px 48px;}
.faq-item h3{font-family:var(--font-display); font-size:1.05rem; margin:0 0 8px;}
.faq-item p{color:var(--muted); font-size:0.95rem; margin:0;}

/* Trust */
.trust{padding:80px 0;}
.trust-grid{margin-bottom:40px;}
.badge-row{display:flex; flex-wrap:wrap; gap:14px; justify-content:center;}
.badge{
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 18px;
  font-size:0.85rem;
  color:var(--muted);
  background:var(--surface);
}

/* Footer */
.site-footer{
  border-top:1px solid var(--line);
  padding:48px 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr 1.4fr 1.2fr;
  gap:32px;
  align-items:start;
  font-size:0.9rem;
}
.footer-tag{color:var(--muted); margin:6px 0 0;}
.footer-nav{display:flex; flex-direction:column; gap:10px;}
.footer-nav a{text-decoration:none; color:var(--muted);}
.footer-nav a:hover{color:var(--ink);}
.footer-copy{color:var(--muted); font-size:0.8rem; margin:0;}
.footer-legal{margin:10px 0 0; font-size:0.8rem; color:var(--muted);}
.footer-legal a{text-decoration:none; color:var(--muted);}
.footer-legal a:hover{color:var(--ink);}

/* The dial, bar and counters are JS-driven and check this query themselves;
   the tear is the one purely decorative motion, so it is stopped here. */
@media (prefers-reduced-motion: reduce){
  .dial-tear{animation:none; opacity:0;}
}

/* Responsive
   Everything above is desktop-first: each grid declares a fixed column count
   and the header row is a non-wrapping flex row. These two queries collapse
   both. Add responsive rules here rather than starting a third breakpoint. */

@media (max-width: 860px){
  .container{padding:0 20px;}

  /* Header wraps: logo and CTA share the first line, nav drops below.
     The nav stays visible on purpose -- there is no hamburger in the
     markup, so hiding it would strand all four section links on mobile. */
  .header-row{flex-wrap:wrap; gap:10px; padding:14px 20px;}
  .logo{order:1;}
  .header-row .btn{order:2;}
  .main-nav{order:3; flex-basis:100%; flex-wrap:wrap; gap:8px 20px; padding-top:2px;}

  .hero{padding:56px 0 48px;}
  .hero-grid{grid-template-columns:1fr; gap:40px;}
  .hero-visual{order:-1;}
  .hero-sub{max-width:none;}

  .stats-grid{grid-template-columns:repeat(2,1fr); row-gap:28px;}
  .steps, .testimonial-grid, .pricing-grid{grid-template-columns:1fr; gap:20px;}
  .faq-grid{grid-template-columns:1fr; gap:28px;}
  /* Term above definition rather than beside it. */
  .method-row{grid-template-columns:1fr; gap:6px; padding:20px 0;}
  .calc-grid{grid-template-columns:1fr; gap:36px;}
  .footer-grid{grid-template-columns:1fr; gap:24px;}

  .platform, .methodology, .calculator, .testimonials, .pricing, .faq{padding:64px 0;}
  .trust{padding:56px 0;}
  .site-footer{padding:36px 0;}
  .section-head{margin-bottom:32px;}
}

@media (max-width: 560px){
  .container{padding:0 16px;}
  .header-row{padding:12px 16px;}
  .main-nav{gap:8px 16px;}
  .main-nav a{font-size:0.9rem;}

  .hero{padding:40px 0;}
  .hero-actions{flex-direction:column; align-items:stretch; gap:10px;}
  .hero-actions .btn{text-align:center;}

  /* No-op above roughly 333px; only guards the 240px dial on tiny screens. */
  .score-dial{width:min(240px, 72vw); height:min(240px, 72vw);}

  .stats-bar{padding:32px 0;}
  .stats-grid{grid-template-columns:1fr; gap:22px;}

  .step, .testimonial, .price-card{padding:22px;}
  .price-tag{left:22px;}
  .calc-result{padding:26px;}
  .result-number{font-size:2.4rem;}
}

:focus-visible{outline:2px solid var(--cold); outline-offset:2px;}