/* ====================================================================
   SULTAN OF MULTAN — styles.css
   A sovereign SEO showcase
   -------------------------------------------------------------------- */

:root{
  /* PALETTE — deep ink, parchment, sovereign gold */
  --ink-0:#070708;
  --ink-1:#0c0d12;
  --ink-2:#13151c;
  --ink-3:#1a1d26;
  --ink-4:#232732;
  --line:#2a2f3d;
  --line-soft:#1e2230;

  --paper:#f6f1e6;       /* warm parchment */
  --paper-2:#ece5d3;
  --paper-3:#d9d0b8;
  --paper-4:#b5a984;

  --ink:#0b0c10;
  --muted:#6b6a63;
  --soft-mute:#9a988f;

  --gold:#e8b14a;          /* bright saffron-gold */
  --gold-2:#c89533;
  --gold-3:#f6cf78;
  --gold-soft:rgba(232,177,74,.18);
  --gold-glow:rgba(232,177,74,.45);

  --crimson:#c8472a;       /* subtle royal crimson accent */
  --emerald:#3a8c6b;

  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:10px;

  --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px -25px rgba(0,0,0,.7);
  --shadow-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 50px 120px -40px rgba(232,177,74,.25), 0 30px 80px -20px rgba(0,0,0,.8);

  --ease-out: cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  background:var(--ink-0);
}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--paper);
  background:var(--ink-0);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  line-height:1.55;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--gold);color:var(--ink)}

/* ====================================================================
   CUSTOM CURSOR
==================================================================== */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:9999;
  transform:translate3d(-100px,-100px,0);
  transition:transform .12s ease-out, width .25s, height .25s, background .25s, border .25s;
  mix-blend-mode:difference;
}
.cursor-dot{
  width:6px; height:6px;
  background:#fff;
  border-radius:50%;
}
.cursor-ring{
  width:38px; height:38px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:50%;
  transform:translate3d(-100px,-100px,0) translate(-50%,-50%);
}
body[data-cursor="hover"] .cursor-ring{
  width:64px; height:64px;
  background:rgba(232,177,74,.12);
  border-color:var(--gold);
}
body[data-cursor="hover"] .cursor-dot{ transform:translate3d(-100px,-100px,0) scale(.4); }
@media (max-width:900px){ .cursor-dot,.cursor-ring{display:none} }

/* ====================================================================
   LOADER
==================================================================== */
.page-loader{
  position:fixed; inset:0;
  background:var(--ink-0);
  z-index:10000;
  display:grid; place-items:center;
  transition:opacity .6s ease, visibility .6s;
}
.page-loader.is-hidden{ opacity:0; visibility:hidden; }
.loader-inner{ text-align:center; }
.loader-crest{
  font-family:'Fraunces',serif;
  font-size:80px; color:var(--gold);
  animation:pulse 1.6s ease-in-out infinite;
}
.loader-bar{
  width:160px; height:2px;
  background:var(--ink-3);
  margin:14px auto 10px;
  overflow:hidden; border-radius:2px;
}
.loader-bar span{
  display:block; width:40%; height:100%;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:slide 1.4s ease-in-out infinite;
}
.loader-text{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.18em;
  color:var(--soft-mute);
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes slide{ 0%{transform:translateX(-100%)} 100%{transform:translateX(350%)} }

/* ====================================================================
   NAV
==================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  padding:18px 0;
  transition:all .35s var(--ease-out);
}
.nav.scrolled{
  background:rgba(7,7,8,.72);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line-soft);
  padding:12px 0;
}
.nav-inner{
  max-width:1400px; margin:0 auto;
  padding:0 36px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.brand-crest{
  width:46px; height:46px;
  display:grid; place-items:center;
  font-family:'Fraunces',serif;
  font-size:24px; color:var(--ink);
  background:linear-gradient(135deg,var(--gold-3),var(--gold) 60%,var(--gold-2));
  border-radius:14px;
  box-shadow:0 8px 24px -10px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.5);
  position:relative;
}
.brand-crest::before{
  content:''; position:absolute; inset:1px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.18);
  pointer-events:none;
}
.brand-name{
  display:flex; flex-direction:column;
  line-height:1.05;
}
.brand-line1{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:18px;
  color:var(--paper);
}
.brand-line2{
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.25em;
  color:var(--gold);
  text-transform:uppercase;
}
.nav-links{
  display:flex; gap:6px;
  align-items:center;
}
.nav-links a{
  position:relative;
  padding:8px 14px;
  font-size:13px;
  color:var(--paper-2);
  border-radius:8px;
  transition:color .25s, background .25s;
}
.nav-links a::after{
  content:''; position:absolute;
  left:14px; right:14px; bottom:4px;
  height:1px;
  background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.nav-links a:hover{ color:var(--gold) }
.nav-links a:hover::after{ transform:scaleX(1) }

.nav-toggle{
  display:none;
  background:transparent;
  border:1px solid var(--line);
  width:42px; height:42px;
  border-radius:10px;
  flex-direction:column; gap:4px;
  align-items:center; justify-content:center;
}
.nav-toggle span{
  width:18px; height:1.5px;
  background:var(--paper);
  transition:transform .3s, opacity .3s;
}
.nav-toggle.is-open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

@media (max-width:900px){
  .nav-links{
    position:fixed; inset:72px 0 0 0;
    background:rgba(7,7,8,.96);
    backdrop-filter:blur(20px);
    flex-direction:column;
    padding:40px 24px;
    gap:4px;
    align-items:stretch;
    transform:translateX(100%);
    transition:transform .45s var(--ease-out);
    border-top:1px solid var(--line-soft);
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a{
    font-size:22px;
    font-family:'Fraunces',serif;
    padding:18px 4px;
    border-bottom:1px solid var(--line-soft);
    border-radius:0;
  }
  .nav-toggle{ display:flex; }
  .nav-inner{ padding:0 20px; }
}

/* ====================================================================
   HERO
==================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  padding:120px 36px 80px;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{ position:absolute; inset:0; z-index:-1; }
.hero-bg::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 80% 10%, rgba(232,177,74,.10), transparent 60%),
    radial-gradient(60% 50% at 10% 90%, rgba(200,71,42,.07), transparent 60%),
    linear-gradient(180deg, #0a0a0d 0%, #07070a 70%);
}
.grid-noise{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
  opacity:.7;
}
.hero-glow{
  position:absolute;
  width:480px; height:480px;
  left:-120px; top:25%;
  background:radial-gradient(circle, rgba(232,177,74,.22), transparent 65%);
  filter:blur(40px);
  pointer-events:none;
}

.hero-inner{
  max-width:1400px; margin:0 auto;
  display:grid;
  grid-template-columns:1.45fr 1fr;
  gap:80px;
  align-items:center;
}

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.25em;
  color:var(--gold);
  padding:8px 14px;
  border:1px solid rgba(232,177,74,.3);
  border-radius:100px;
  background:rgba(232,177,74,.06);
}
.dot-live{
  width:7px; height:7px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 12px var(--gold);
  animation:pulse 1.5s ease-in-out infinite;
}

.hero-title{
  font-family:'Fraunces',serif;
  font-weight:400;
  font-size:clamp(48px, 7vw, 108px);
  line-height:.95;
  letter-spacing:-0.025em;
  margin:24px 0 28px;
  color:var(--paper);
}
.ht-line{ display:block; }
.ht-serif{ font-style:italic; font-weight:300; }
.ht-serif em{ font-style:normal; color:var(--gold); font-weight:600; }
.ht-gold{
  background:linear-gradient(135deg,var(--gold-3),var(--gold) 50%,var(--gold-2));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  font-style:italic; font-weight:500;
}

.hero-sub{
  font-size:18px;
  line-height:1.65;
  color:var(--paper-3);
  max-width:560px;
  margin:0 0 36px;
}
.hero-sub em{ color:var(--gold); font-style:italic; }

.hero-ctas{
  display:flex; gap:14px; flex-wrap:wrap;
  margin-bottom:50px;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px;
  font-size:14px; font-weight:600;
  border-radius:12px;
  border:1px solid transparent;
  transition:transform .35s var(--ease-out), background .35s, color .35s, box-shadow .35s;
  cursor:pointer;
}
.btn svg{ width:16px; height:16px; transition:transform .35s var(--ease-out); }
.btn:hover{ transform:translateY(-2px); }
.btn:hover svg{ transform:translateX(4px); }
.btn-primary{
  background:var(--gold);
  color:var(--ink);
  box-shadow:0 10px 30px -12px var(--gold-glow);
}
.btn-primary:hover{ background:var(--gold-3); box-shadow:0 16px 40px -10px var(--gold-glow); }
.btn-ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--paper);
}
.btn-ghost:hover{ background:var(--ink-2); border-color:var(--gold); color:var(--gold); }
.btn-big{ padding:18px 28px; font-size:15px; }

.hero-marquee{
  overflow:hidden;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding:14px 0;
  margin:50px 0 0;
  mask-image:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.marquee-track{
  display:flex; gap:40px;
  animation:marquee 32s linear infinite;
  white-space:nowrap;
  font-family:'JetBrains Mono',monospace;
  font-size:12px; letter-spacing:.25em;
  color:var(--paper-3);
}
.marquee-track span[aria-hidden]{ color:var(--gold); }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* HERO RIGHT CARDS */
.hero-right{
  display:flex; flex-direction:column;
  gap:18px;
  position:relative;
}
.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow:var(--shadow-1);
  transition:transform .5s var(--ease-out), border-color .35s, background .35s;
  position:relative;
  overflow:hidden;
}
.hero-card::before{
  content:''; position:absolute;
  top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,177,74,.5), transparent);
  opacity:0; transition:opacity .35s;
}
.hero-card:hover{ transform:translateY(-4px); border-color:var(--gold-soft); }
.hero-card:hover::before{ opacity:1; }

.card-top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px;
}
.card-label{
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.2em;
  color:var(--soft-mute);
}
.card-status{
  font-size:11px;
  color:var(--gold);
  padding:3px 8px;
  border-radius:6px;
  background:var(--gold-soft);
}
.card-score{
  display:flex; align-items:baseline; gap:8px;
  margin-bottom:22px;
}
.card-score .big{
  font-family:'Fraunces',serif;
  font-size:64px; line-height:1;
  color:var(--paper);
  font-weight:400;
}
.card-score .unit{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  color:var(--soft-mute);
}
.card-bars{ display:flex; flex-direction:column; gap:10px; }
.bar-row{
  display:grid;
  grid-template-columns:80px 1fr 28px;
  align-items:center;
  gap:12px;
  font-size:11px;
  color:var(--paper-3);
}
.bar-row b{
  font-family:'JetBrains Mono',monospace;
  font-weight:600; color:var(--paper);
  text-align:right;
}
.bar{
  height:5px;
  background:var(--ink-3);
  border-radius:5px;
  overflow:hidden;
}
.bar i{
  display:block; height:100%;
  width:var(--w);
  background:linear-gradient(90deg, var(--gold-2), var(--gold));
  border-radius:5px;
  transform:scaleX(0); transform-origin:left;
  animation:barFill 1s var(--ease-out) .3s forwards;
}
@keyframes barFill{ to{ transform:scaleX(1); } }

.hero-card-mini{ display:flex; align-items:flex-end; gap:18px; }
.big-num{
  font-family:'Fraunces',serif;
  font-weight:400;
  font-size:62px; line-height:.9;
  color:var(--gold);
  letter-spacing:-0.04em;
  white-space:nowrap;
}
.big-label{
  font-size:13px;
  color:var(--paper-3);
  line-height:1.4;
  max-width:200px;
}

.scroll-cue{
  position:absolute;
  bottom:30px; left:50%;
  transform:translateX(-50%);
  width:24px; height:42px;
  border:1.5px solid var(--line);
  border-radius:14px;
  display:grid; place-items:center;
}
.scroll-cue span{
  width:2px; height:8px;
  background:var(--gold);
  border-radius:2px;
  animation:scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{ transform:translateY(-8px); opacity:0; }
  40%{ opacity:1; }
  100%{ transform:translateY(8px); opacity:0; }
}

@media (max-width:1100px){
  .hero-inner{ grid-template-columns:1fr; gap:48px; }
  .hero-right{ max-width:520px; }
}
@media (max-width:600px){
  .hero{ padding:110px 20px 60px; }
  .hero-card-mini{ flex-direction:column; align-items:flex-start; gap:8px; }
  .big-num{ font-size:48px; }
  .hero-card{ padding:20px; }
}

/* ====================================================================
   SECTION SHELL
==================================================================== */
.section{
  position:relative;
  padding:120px 36px;
  max-width:1400px;
  margin:0 auto;
}
.section-head{
  max-width:840px;
  margin-bottom:64px;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.25em;
  color:var(--gold);
  text-transform:uppercase;
}
.kicker span:first-child{
  display:inline-grid; place-items:center;
  width:28px; height:28px;
  border:1px solid var(--gold-soft);
  border-radius:50%;
  color:var(--gold);
  background:rgba(232,177,74,.07);
}
.kicker-light span:first-child{
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);
  color:var(--paper);
}
.section-title{
  font-family:'Fraunces',serif;
  font-weight:400;
  font-size:clamp(38px, 5vw, 76px);
  line-height:1.02;
  letter-spacing:-0.02em;
  color:var(--paper);
  margin:0 0 18px;
}
.section-title em{ font-style:italic; color:var(--gold); font-weight:300; }
.section-dek{
  font-size:18px; color:var(--paper-3);
  max-width:640px; line-height:1.65;
  margin:0;
}

/* ====================================================================
   ABOUT
==================================================================== */
.section-about{ border-top:1px solid var(--line-soft); }
.about-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:80px;
  align-items:center;
}
.about-photo{
  position:relative;
  aspect-ratio:1/1;
  display:grid; place-items:center;
}
.photo-frame{
  position:relative;
  width:100%;
  max-width:380px;
  aspect-ratio:4/5;
  border-radius:24px;
  background:
    linear-gradient(135deg, var(--ink-3), var(--ink-2));
  border:1px solid var(--line);
  display:grid; place-items:center;
  overflow:hidden;
  box-shadow:var(--shadow-2);
}
.photo-monogram{
  font-family:'Fraunces',serif;
  font-size:200px;
  font-weight:400;
  background:linear-gradient(135deg,var(--gold-3),var(--gold) 50%,var(--gold-2));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  letter-spacing:-.04em;
  line-height:1;
  text-shadow:0 30px 60px rgba(232,177,74,.25);
}
.photo-tag{
  position:absolute;
  bottom:18px; left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.3em;
  color:var(--paper-3);
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:100px;
  background:rgba(7,7,8,.7);
}
.photo-orbit{
  position:absolute;
  width:560px; height:560px;
  max-width:110%; max-height:110%;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  border:1px dashed rgba(232,177,74,.18);
  border-radius:50%;
  animation:spin 60s linear infinite;
}
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.about-text .lede{
  font-family:'Fraunces',serif;
  font-size:22px; line-height:1.55;
  color:var(--paper);
  font-weight:400;
  letter-spacing:-0.005em;
  margin:0 0 22px;
}
.about-text .lede strong{
  font-weight:600;
  background:linear-gradient(135deg,var(--gold-3),var(--gold));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.about-text p{
  color:var(--paper-3); font-size:16px; line-height:1.75;
  margin:0 0 24px;
}
.about-text p strong{ color:var(--paper); font-weight:600; }

.about-pillars{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.pillar{
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  transition:border-color .35s, transform .35s, background .35s;
}
.pillar:hover{
  border-color:var(--gold-soft);
  transform:translateY(-3px);
}
.pillar-no{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:24px;
  color:var(--gold);
  margin-bottom:8px;
}
.pillar h4{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:17px;
  margin:0 0 8px;
  color:var(--paper);
}
.pillar p{
  font-size:13px;
  color:var(--paper-3);
  line-height:1.55;
  margin:0;
}

@media (max-width:1000px){
  .about-grid{ grid-template-columns:1fr; gap:50px; }
  .about-photo{ max-width:380px; margin:0 auto; }
  .about-pillars{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .section{ padding:80px 20px; }
}

/* ====================================================================
   IMPORTANCE / STATS
==================================================================== */
.section-importance{ border-top:1px solid var(--line-soft); }

.importance-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-bottom:72px;
}
.stat-card{
  padding:28px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  position:relative;
  overflow:hidden;
  transition:transform .5s var(--ease-out), border-color .35s;
}
.stat-card::after{
  content:''; position:absolute;
  bottom:0; left:0;
  height:2px; width:0;
  background:var(--gold);
  transition:width .5s var(--ease-out);
}
.stat-card:hover{ transform:translateY(-4px); border-color:var(--gold-soft); }
.stat-card:hover::after{ width:100%; }
.stat-num{
  font-family:'Fraunces',serif;
  font-weight:400;
  font-size:60px; line-height:1;
  color:var(--gold);
  letter-spacing:-0.03em;
  margin-bottom:14px;
}
.stat-label{
  font-size:14px;
  color:var(--paper-3);
  line-height:1.55;
  margin-bottom:14px;
}
.stat-src{
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.18em;
  color:var(--soft-mute);
}

.pillars-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.pillar-card{
  position:relative;
  padding:28px;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(232,177,74,.06), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent);
  border:1px solid var(--line);
  transition:transform .5s var(--ease-out), border-color .35s, background .35s;
}
.pillar-card:hover{
  transform:translateY(-5px);
  border-color:var(--gold-soft);
}
.pc-icon{
  font-size:26px;
  margin-bottom:14px;
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:14px;
  background:rgba(232,177,74,.08);
  border:1px solid var(--gold-soft);
}
.pillar-card h4{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:20px;
  color:var(--paper);
  margin:0 0 10px;
}
.pillar-card p{
  font-size:13.5px;
  color:var(--paper-3);
  line-height:1.55;
  margin:0;
}

@media (max-width:1100px){
  .importance-grid{ grid-template-columns:repeat(2,1fr); }
  .pillars-strip{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .importance-grid{ grid-template-columns:1fr; }
  .pillars-strip{ grid-template-columns:1fr; }
}

/* ====================================================================
   IMPACT / CHARTS
==================================================================== */
.section-impact{ border-top:1px solid var(--line-soft); }

.charts-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.chart-card{
  padding:26px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(232,177,74,.04), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  position:relative;
  overflow:hidden;
  transition:border-color .35s, transform .5s var(--ease-out);
}
.chart-card::before{
  content:''; position:absolute;
  top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,177,74,.4), transparent);
}
.chart-card:hover{ border-color:var(--gold-soft); transform:translateY(-3px); }
.chart-card-wide{ grid-column:span 2; }
.chart-top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:18px; flex-wrap:wrap; gap:8px;
}
.chart-top h4{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:18px;
  color:var(--paper);
  margin:0;
}
.chart-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.18em;
  color:var(--gold);
  padding:5px 10px;
  border-radius:6px;
  background:var(--gold-soft);
}
.chart-card canvas{
  width:100%!important;
  height:280px!important;
}
.chart-card-wide canvas{
  height:320px!important;
}

@media (max-width:900px){
  .charts-grid{ grid-template-columns:1fr; }
  .chart-card-wide{ grid-column:auto; }
}

/* ====================================================================
   TOOLS GRID
==================================================================== */
.section-tools{ border-top:1px solid var(--line-soft); }

.tools-subhead{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin:48px 0 24px;
  padding:18px 24px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:
    linear-gradient(135deg, rgba(232,177,74,.06), rgba(255,255,255,.01) 60%);
  position:relative;
  overflow:hidden;
}
.tools-subhead::before{
  content:''; position:absolute;
  top:0; left:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--gold-3), var(--gold-2));
}
.tools-subhead:first-of-type{ margin-top:16px; }
.tools-subhead-left{
  display:flex; align-items:center; gap:12px;
}
.sub-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--soft-mute);
}
.sub-tag.gold{
  color:var(--gold);
  font-size:14px; font-weight:600;
  letter-spacing:.15em;
}
.sub-desc{
  font-size:13.5px;
  color:var(--paper-3);
  margin-left:auto;
  max-width:520px;
  line-height:1.5;
}
@media (max-width:700px){
  .sub-desc{ margin-left:0; }
}

.tools-filter{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:40px;
}
.chip{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.15em;
  padding:8px 16px;
  border:1px solid var(--line);
  border-radius:100px;
  background:transparent;
  color:var(--paper-3);
  text-transform:uppercase;
  transition:all .3s var(--ease-out);
}
.chip:hover{ border-color:var(--gold-soft); color:var(--gold); }
.chip.is-active{
  background:var(--gold);
  color:var(--ink);
  border-color:var(--gold);
  box-shadow:0 6px 18px -8px var(--gold-glow);
}

.tools-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.tool{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.025), transparent);
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease-out), border-color .35s;
}
.tool:hover{
  transform:translateY(-5px);
  border-color:var(--gold-soft);
}
.tool-img{
  height:130px;
  position:relative;
  display:grid; place-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.glogo{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:500;
  font-size:36px;
  color:rgba(255,255,255,.92);
  letter-spacing:-0.02em;
  text-shadow:0 4px 24px rgba(0,0,0,.4);
  position:relative; z-index:2;
  transition:transform .5s var(--ease-out);
}
.tool:hover .glogo{ transform:scale(1.05); }

/* Each tool image gets a unique brand-evoking gradient */
.t1{ background:linear-gradient(135deg,#0f2745,#2760c5 70%,#3b82f6); }
.t1::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%); }
.t2{ background:linear-gradient(135deg,#1a4731,#34a853 70%,#5bb974); }
.t2::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%, rgba(255,255,255,.2), transparent 60%); }
.t3{ background:linear-gradient(135deg,#5a2330,#e63946 70%,#ff6b7a); }
.t3::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 70%, rgba(255,255,255,.15), transparent 60%); }
.t4{ background:linear-gradient(135deg,#fbbc04 0%,#ea4335 50%,#4285f4 100%); }
.t4::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.3), transparent 60%); }
.t5{ background:linear-gradient(135deg,#0b3954,#087e8b 70%,#1ec8c8); }
.t5::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 70%, rgba(255,255,255,.15), transparent 60%); }
.t6{ background:linear-gradient(135deg,#1f2e4e,#3b6cd4 70%,#6da3ff); }
.t6::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.2), transparent 60%); }
.t7{ background:linear-gradient(135deg,#3a1d56,#7e3eb8 70%,#b181d4); }
.t7::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 30%, rgba(255,255,255,.2), transparent 60%); }
.t8{ background:linear-gradient(135deg,#4a1942,#d4356a 70%,#ff6b96); }
.t8::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 70%, rgba(255,255,255,.2), transparent 60%); }
.t9{ background:linear-gradient(135deg,#bb371a,#ff7849 70%,#ffa574); }
.t9::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.2), transparent 60%); }
.t10{ background:linear-gradient(135deg,#0f2027,#203a43 50%,#2c5364); }
.t10::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 30%, rgba(255,255,255,.18), transparent 60%); }
.t11{ background:linear-gradient(135deg,#1a1a2e,#3d3d6e 70%,#6b6bd6); }
.t11::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 30%, rgba(255,255,255,.2), transparent 60%); }
.t12{ background:linear-gradient(135deg,#ffc266,#ff8a00 70%,#c54e00); }
.t12::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 70%, rgba(255,255,255,.25), transparent 60%); }
.t13{ background:linear-gradient(135deg,#0a2e1f,#1eb980 70%,#3ee5a8); }
.t13::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 60%); }
.t14{ background:linear-gradient(135deg,#2a0e26,#9b287b 70%,#dc5fad); }
.t14::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%, rgba(255,255,255,.22), transparent 60%); }

.tool-body{
  padding:22px;
  display:flex; flex-direction:column; flex:1;
}
.tool-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:12px;
}
.tool-body h4{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:19px;
  color:var(--paper);
  margin:0;
}
.tool-price{
  font-family:'JetBrains Mono',monospace;
  font-size:9px; letter-spacing:.15em;
  padding:3px 8px;
  border-radius:6px;
  background:rgba(232,177,74,.08);
  color:var(--gold);
  border:1px solid var(--gold-soft);
}
.tool-price.free{
  background:rgba(58,140,107,.08);
  color:#7fc9a9;
  border-color:rgba(58,140,107,.3);
}
.tool-price.freemium{
  background:rgba(120,140,200,.08);
  color:#9eb1ee;
  border-color:rgba(120,140,200,.3);
}
.tool-body p{
  font-size:13px;
  color:var(--paper-3);
  line-height:1.55;
  margin:0 0 14px;
  flex:1;
}
.tool-meta{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:5px;
  background:var(--ink-3);
  color:var(--paper-3);
}

/* filtered-out state */
.tool.is-hidden{ display:none; }

@media (max-width:1100px){ .tools-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:800px){ .tools-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .tools-grid{ grid-template-columns:1fr; } }

/* ====================================================================
   PLAYBOOK
==================================================================== */
.section-playbook{ border-top:1px solid var(--line-soft); }
.playbook{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.step{
  padding:34px 30px;
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  transition:background .35s, transform .5s var(--ease-out);
  position:relative;
}
.step:hover{
  background:linear-gradient(180deg, rgba(232,177,74,.05), rgba(255,255,255,.02));
}
.step:nth-child(3n){ border-right:none; }
.step:nth-last-child(-n+3){ border-bottom:none; }
.step-no{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:42px;
  color:var(--gold);
  line-height:1;
  margin-bottom:14px;
  display:block;
  opacity:.6;
  transition:opacity .35s, transform .5s var(--ease-out);
}
.step:hover .step-no{ opacity:1; transform:translateY(-3px); }
.step-body h4{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:22px;
  color:var(--paper);
  margin:0 0 10px;
}
.step-body p{
  font-size:14px;
  color:var(--paper-3);
  line-height:1.6;
  margin:0;
}

@media (max-width:1000px){
  .playbook{ grid-template-columns:repeat(2,1fr); }
  .step:nth-child(3n){ border-right:1px solid var(--line-soft); }
  .step:nth-child(2n){ border-right:none; }
  .step:nth-last-child(-n+3){ border-bottom:1px solid var(--line-soft); }
  .step:nth-last-child(-n+2){ border-bottom:none; }
}
@media (max-width:600px){
  .playbook{ grid-template-columns:1fr; }
  .step{ border-right:none!important; border-bottom:1px solid var(--line-soft)!important; }
  .step:last-child{ border-bottom:none!important; }
}

/* ====================================================================
   CONTACT
==================================================================== */
.section-contact{ border-top:1px solid var(--line-soft); }
.contact-card{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--ink-1);
}
.contact-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 80% 30%, rgba(232,177,74,.16), transparent 60%),
    radial-gradient(50% 50% at 10% 80%, rgba(200,71,42,.08), transparent 60%),
    linear-gradient(135deg, #0c0d12, #07070a);
}
.contact-bg::after{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
  opacity:.6;
}
.contact-inner{
  position:relative; z-index:1;
  padding:80px 60px;
}
.big-headline{
  font-family:'Fraunces',serif;
  font-weight:400;
  font-size:clamp(38px, 5vw, 72px);
  line-height:1.02;
  letter-spacing:-0.02em;
  color:var(--paper);
  margin:14px 0 24px;
}
.big-headline em{ color:var(--gold); font-style:italic; }
.section-contact p{
  font-size:17px;
  color:var(--paper-3);
  line-height:1.65;
  max-width:600px;
  margin:0 0 36px;
}
.contact-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:60px; }

.contact-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  padding-top:36px;
  border-top:1px solid var(--line-soft);
}
.c-block{
  display:flex; flex-direction:column; gap:6px;
}
.c-label{
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.25em;
  color:var(--soft-mute);
  text-transform:uppercase;
}
.c-val{
  font-size:15px;
  color:var(--paper);
  display:flex; align-items:center; gap:8px;
  font-family:'Inter',sans-serif;
}

@media (max-width:800px){
  .contact-inner{ padding:50px 30px; }
  .contact-grid{ grid-template-columns:1fr; gap:16px; }
}

/* ====================================================================
   FOOTER
==================================================================== */
.footer{
  padding:50px 36px 28px;
  border-top:1px solid var(--line-soft);
  background:var(--ink-0);
}
.footer-top{
  max-width:1400px; margin:0 auto 30px;
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:24px;
}
.footer-tag{
  max-width:480px;
  font-size:14px;
  color:var(--paper-3);
  line-height:1.55;
  margin:0;
}
.footer-tag strong{ color:var(--gold); font-weight:600; }
.footer-bottom{
  max-width:1400px; margin:0 auto;
  padding-top:24px;
  border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; flex-wrap:wrap;
  gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.1em;
  color:var(--soft-mute);
}

/* ====================================================================
   REVEAL ANIMATIONS
==================================================================== */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important;}
  .reveal{opacity:1; transform:none;}
}

/* ====================================================================
   SCROLLBAR
==================================================================== */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--ink-1); }
::-webkit-scrollbar-thumb{ background:var(--ink-4); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-soft); }