/* ===================================================================
   neerajshah.me - Warm Tech v3.1
   Shared across every page on the domain. Tokens follow
   assets/brand/titan-ai-brand-guidelines-v3.1.md.
   =================================================================== */
:root{
  --warm-sand:#FAF3E3; --carbon-ink:#1A1A1A; --ember:#E2611E; --ember-hover:#C94E12;
  --ember-text:#BA4F18; --deep-ink:#1A1712; --amber-glow:#F8C889; --arctic:#E5F5F9;
  --sage:#D2ECD0; --rose:#F3C1C0;
  --r-card:14px; --r-panel:16px; --r-btn:10px;
  --line-light:rgba(26,26,26,.14); --line-dark:rgba(250,243,227,.16);
  --sand-ghost:rgba(250,243,227,.72);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--warm-sand);color:var(--carbon-ink);font-family:'Inter',system-ui,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1.08;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,5.4vw,4.1rem)}
h2{font-size:clamp(2rem,4.2vw,3rem);margin-bottom:20px}
h3{font-size:1.22rem;margin-bottom:10px}
em{font-style:normal;color:var(--ember)}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;position:relative;z-index:1}
section{padding:96px 0;position:relative}

/* ===== MESH SYSTEM ===== */
.mesh{position:relative;overflow:hidden}
.mesh::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("/assets/mesh.svg");background-size:cover;background-position:center;opacity:.55}
.mesh::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 52% at 22% 18%, rgba(226,97,30,.16) 0%, rgba(226,97,30,0) 70%)}
.mesh--soft::before{opacity:.30}
.mesh--right::after{background:radial-gradient(56% 50% at 78% 24%, rgba(226,97,30,.14) 0%, rgba(226,97,30,0) 70%)}
.dark{background:var(--deep-ink);color:var(--warm-sand)}
.dark p{color:var(--sand-ghost)}
.dark .mesh::before,.dark.mesh::before{opacity:.42}

/* ===== TYPE UTILITIES ===== */
.mono{font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.kicker{color:var(--ember-text);display:block;margin-bottom:18px}
.dark .kicker{color:var(--amber-glow)}
.lede{font-size:1.12rem;max-width:640px}
.dark em{color:var(--amber-glow)}

/* ===== BUTTONS ===== */
.btn{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;
  padding:16px 32px;border-radius:var(--r-btn);text-decoration:none;transition:.18s;border:2px solid transparent}
.btn-ember{background:var(--ember);color:var(--carbon-ink)}
.btn-ember:hover{background:var(--ember-hover);color:var(--warm-sand);transform:translateY(-2px)}
.btn-ghost{border-color:var(--carbon-ink);color:var(--carbon-ink)}
.btn-ghost:hover{background:var(--carbon-ink);color:var(--warm-sand)}
.dark .btn-ghost{border-color:var(--warm-sand);color:var(--warm-sand)}
.dark .btn-ghost:hover{background:var(--warm-sand);color:var(--carbon-ink)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

/* ===== NAV ===== */
nav{position:sticky;top:0;background:var(--warm-sand);
  border-bottom:1px solid var(--line-light);z-index:60}
.navin{display:flex;align-items:center;justify-content:space-between;padding:15px 28px;max-width:1120px;margin:0 auto}
.wordmark{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.14rem;color:var(--ember)}
.navlinks{display:flex;gap:26px;align-items:center}
.navlinks a{text-decoration:none;color:var(--carbon-ink);font-size:.93rem}
.navlinks a:hover{color:var(--ember-text)}
.nav-cta{background:var(--ember);color:var(--carbon-ink)!important;padding:10px 20px;border-radius:8px;font-weight:600}
.nav-cta:hover{background:var(--ember-hover);color:var(--warm-sand)!important}

/* ===== HERO ===== */
.hero{padding:92px 0 88px}
.mesh-hero{position:relative;overflow:hidden;background:var(--deep-ink);color:var(--warm-sand)}
.mesh-hero > *{position:relative;z-index:2}
.mesh-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("/assets/mesh.svg");background-size:cover;background-position:center;opacity:.42}
.mesh-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(70% 60% at 22% 12%, rgba(226,97,30,.34), transparent 70%),
  radial-gradient(46% 58% at 18% 28%, rgba(226,97,30,.26), transparent 68%),
  radial-gradient(40% 52% at 76% 18%, rgba(226,97,30,.16), transparent 70%),
  radial-gradient(60% 50% at 92% 96%, rgba(248,200,137,.14), transparent 72%)}
.wt-mesh-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;opacity:.9}
.mesh-hero .kicker{color:var(--amber-glow)}
.mesh-hero .lede{color:var(--sand-ghost)}
.mesh-hero .hero-points li{border-bottom-color:var(--line-dark)}
.mesh-hero .btn-ghost{border-color:var(--warm-sand);color:var(--warm-sand)}
.mesh-hero .btn-ghost:hover{background:var(--warm-sand);color:var(--carbon-ink)}
.mesh-hero h1 em{color:var(--ember)}
.herogrid{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center}
.hero-points{list-style:none;margin:30px 0 0}
.hero-points li{padding:11px 0 11px 28px;position:relative;border-bottom:1px solid var(--line-light);font-size:17px}
.hero-points li:last-child{border-bottom:none}
.hero-points li::before{content:"";position:absolute;left:0;top:21px;width:11px;height:2px;background:var(--ember)}
.herovis{position:relative}
.hero-photo{width:100%;aspect-ratio:4/5;border-radius:var(--r-panel);border:1px solid var(--line-light);
  background:url('/photos/hero-peace.webp') center 12%/cover;display:block}
.floatcard{position:absolute;background:var(--warm-sand);color:var(--carbon-ink);border:1px solid var(--line-light);
  border-radius:12px;padding:13px 17px;font-size:.8rem;line-height:1.4;max-width:210px}
.floatcard b{display:block;font-family:'JetBrains Mono',monospace;color:var(--ember-text);font-size:.86rem;margin-bottom:2px}
.fc1{top:22px;left:-38px}
.fc2{bottom:26px;right:-30px}

/* ===== TRUST ===== */
.trustline{text-align:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.2rem;max-width:780px;margin:0 auto}
.trustline em{color:var(--ember-text)}
.logos{display:flex;justify-content:center;gap:42px;flex-wrap:wrap;margin-top:28px;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.92rem;opacity:.4;letter-spacing:.08em}
.ticker-wrap{overflow:hidden;margin-top:36px;border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);padding:15px 0;white-space:nowrap}
.ticker{display:inline-block;animation:scroll 52s linear infinite}
.ticker span{margin-right:54px;font-size:.94rem}
.ticker b{color:var(--ember-text)}
.av{display:inline-flex;width:25px;height:25px;border-radius:50%;background:var(--ember);color:var(--warm-sand);
  font-size:.6rem;font-weight:600;align-items:center;justify-content:center;margin-right:9px;
  font-family:'JetBrains Mono',monospace;vertical-align:middle}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker{animation:none}}

/* ===== CARDS ===== */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
.card{border:1px solid var(--line-light);border-radius:var(--r-card);padding:32px 28px;
  background:transparent}
.card p{font-size:.96rem;color:rgba(26,26,26,.76)}
.card .num{font-family:'JetBrains Mono',monospace;color:var(--ember-text);font-size:.78rem;display:block;margin-bottom:14px}

/* ===== OFFERS ===== */
.offer{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:center;
  border:1px solid var(--line-light);border-radius:var(--r-panel);padding:38px;margin-top:22px;
  background:transparent;transition:.18s}
.offer:hover{border-color:var(--ember);transform:translateY(-3px)}
.offer h3{font-size:1.65rem}
.offer p{color:rgba(26,26,26,.76);max-width:560px}
/* Three of the offer photos are portrait 1040x1300. A 16:10 box with cover
   showed only the middle half of their height, which sliced the top of the
   head off two of them. 4:3 keeps enough vertical room, and each card sets
   its own background-position so the crop lands below the chin, never
   through the face. Percentage positions are proportional, not pixel
   offsets: 16% means the point 16% down the image sits 16% down the box. */
.offer .vis{aspect-ratio:4/3;border-radius:12px;background-size:cover;background-position:center;
  border:1px solid var(--line-light)}
/* Two of the photos are studio cut-outs on a transparent background rather
   than framed shots. Boxing those in a bordered tile would fence off an
   empty panel with a figure floating in it, so they lose the frame and sit
   straight on the section, contained rather than covered so nothing is cut,
   and anchored to the bottom so the desk meets the card's baseline. */
.offer .vis--cut{aspect-ratio:3/2;border:none;border-radius:0;background-size:contain;
  background-position:center bottom;background-repeat:no-repeat}
.pill{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:14px;color:var(--carbon-ink)}
.pill-titan{background:var(--arctic)}
.pill-li{background:var(--sage)}
.pill-dfy{background:var(--rose)}
.offer .btn{margin-top:20px;padding:13px 26px;font-size:.94rem}

/* ===== ABOUT ===== */
/* The About photo is the credibility beat of the page, so it runs at the
   image's own 3:2 rather than being cropped to a portrait panel. The
   earlier 4:5 box showed only the middle 53 percent of the width, which
   cut off both the event logo in the bottom right and the outer half of
   the standing ovation: the two things the photo is there to prove. The
   columns are even so the photo has the width to carry them.

   The logo in the frame reads SPEAKING ACADEMY TALLINN. Confirmed with
   Neeraj on 14 August 2026: Speaking Academy was a Mindvalley programme,
   Tallinn is the capital of Estonia, so this is the Mindvalley stage in
   Estonia that the offer card and the speaking page both refer to. The
   copy is correct. Do not "fix" it. */
.about{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.aboutimg{aspect-ratio:3/2;border-radius:var(--r-panel);border:1px solid var(--line-dark);
  background:url('/photos/mindvalley.webp') center/cover}
.tag{font-style:italic;color:var(--amber-glow);display:block;margin-bottom:16px;font-size:1.04rem}
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.counter b{font-family:'JetBrains Mono',monospace;font-size:1.65rem;color:var(--amber-glow);display:block;line-height:1.1}
.counter small{font-size:.77rem;color:var(--sand-ghost)}
.badges{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.badge{font-size:.75rem;border:1px solid var(--line-dark);border-radius:100px;padding:8px 15px;color:var(--sand-ghost)}

/* ===== MAGNET ===== */
.magnet{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center;
  background:rgba(248,200,137,.3);border:1px solid var(--line-light);border-radius:20px;padding:48px}
/* The real cover, not a CSS mock-up of one. It is a transparent PNG whose
   own rendering already carries the spine and the page edge, so it needs no
   border or panel behind it: rule 13 rules out the drop shadow that would
   otherwise be the instinct here. */
.bookcover{width:100%;height:auto;display:block}
.magnet ol{margin:18px 0 26px 20px;font-size:.96rem;color:rgba(26,26,26,.8)}
.magnet li{margin-bottom:7px}

/* ===== FOOTER ===== */
footer{background:var(--deep-ink);color:var(--sand-ghost);border-top:1px solid var(--line-dark);
  padding:34px 0;font-size:.85rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
footer a{color:var(--sand-ghost);text-decoration:none;margin-left:20px}
footer a:hover{color:var(--amber-glow)}

@media(max-width:900px){
  .herogrid,.about,.magnet{grid-template-columns:1fr}
  .offer{grid-template-columns:1fr}
  .grid3,.counters{grid-template-columns:1fr 1fr}
  .navlinks a:not(.nav-cta){display:none}
  .fc1{left:8px}.fc2{right:8px}
}
@media(max-width:560px){.grid3,.counters{grid-template-columns:1fr}}

/* ---- writing / topic clusters ---- */
.topics{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
@media(max-width:820px){.topics{grid-template-columns:1fr}}
.topic{display:block;text-decoration:none;color:inherit;transition:border-color .15s ease,transform .15s ease}
.topic:hover{border-color:var(--ember);transform:translateY(-2px)}
.topic .more{display:block;margin-top:14px;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ember-text)}
.writing-note{margin-top:26px;font-size:.95rem;color:rgba(26,26,26,.7)}