/* ============ REAL BRAND FONTS ============ */
@font-face{font-family:'Metropolis';src:url('assets/fonts/Metropolis-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Metropolis';src:url('assets/fonts/Metropolis-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Metropolis';src:url('assets/fonts/Metropolis-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Metropolis';src:url('assets/fonts/Metropolis-BoldItalic.otf') format('opentype');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Metropolis';src:url('assets/fonts/Metropolis-ExtraBold.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Metropolis';src:url('assets/fonts/Metropolis-Black.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Metropolis';src:url('assets/fonts/Metropolis-BlackItalic.otf') format('opentype');font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:'Metropolis';src:url('assets/fonts/Metropolis-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Smiley Sans';src:url('assets/fonts/SmileySans-Oblique.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

/* ============================================
   TWS · BRAND DESIGN SYSTEM v3.1
   Uses real brand fonts: Metropolis + Smiley Sans
   F&B Growth Studio · Singapore
============================================ */

/* ============ REAL BRAND FONTS (embedded) ============ */
:root{
  /* Brand palette */
  --neon:#dfff5d;
  --neon-soft:#e9ffa0;
  --sage:#a8b89f;
  --sage-soft:#c8d4be;
  --cream:#ebe3d2;
  --cream-soft:#f3ecde;
  --ink:#1f2a1c;
  --ink-soft:#4a5544;
  --rust:#c54a2a;
  --gold:#c89858;
  --line:rgba(31,42,28,.12);
  --line-strong:rgba(31,42,28,.25);
  --white:#ffffff;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--cream);color:var(--ink);
  font-family:'Metropolis','Metropolis','Inter',sans-serif;font-weight:400;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--neon);color:var(--ink)}

/* ============ TYPOGRAPHY (using Metropolis) ============ */
.h-display{
  font-family:'Metropolis',sans-serif;font-weight:700;
  font-size:clamp(40px,9vw,120px);line-height:1.02;letter-spacing:-.035em;color:var(--ink);
}
.h-display .it{
  font-family:'Metropolis',sans-serif;font-style:italic;font-weight:700;
  color:var(--ink);letter-spacing:-.02em;
}
.h-display .block{display:block}
.h-display .highlight{
  background:var(--neon);padding:2px 16px;display:inline-block;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.h-display .highlight-sage{
  background:var(--sage);padding:2px 16px;display:inline-block;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

.h2{
  font-family:'Metropolis',sans-serif;font-weight:700;
  font-size:clamp(28px,5.5vw,52px);line-height:1.08;letter-spacing:-.025em;
}
.h2 .it{font-family:'Metropolis',sans-serif;font-style:italic;font-weight:700}
.h2 .highlight{background:var(--neon);padding:2px 12px;display:inline-block}
.h2 .highlight-sage{background:var(--sage);padding:2px 12px;display:inline-block}

.h3{
  font-family:'Metropolis',sans-serif;font-weight:600;
  font-size:clamp(22px,3.5vw,32px);line-height:1.15;letter-spacing:-.02em;
}
.h3 .it{font-family:'Metropolis',sans-serif;font-style:italic;font-weight:600}

.eyebrow{
  font-family:'Metropolis',sans-serif;font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:20px;height:2px;background:var(--ink)}
.eyebrow.dark{color:var(--neon)}
.eyebrow.dark::before{background:var(--neon)}
.eyebrow.center{justify-content:center}

.lead{font-family:'Metropolis',sans-serif;font-size:16px;line-height:1.65;color:var(--ink-soft);max-width:620px;font-weight:500}
@media (min-width:768px){.lead{font-size:18px}}

/* Smiley Sans utility for Chinese accents */
.smiley{font-family:'Smiley Sans','Metropolis',sans-serif;font-weight:400}

/* ============ HAND-DRAWN SVG ACCENTS ============ */
.draw-circle{
  position:absolute;inset:-6px -12px;pointer-events:none;z-index:-1;
  opacity:.95;
}
.has-circle{position:relative;display:inline-block;z-index:1}
.has-circle .draw-circle{z-index:0}

.draw-underline{
  position:absolute;left:-4px;right:-4px;bottom:-8px;
  width:calc(100% + 8px);height:14px;pointer-events:none;
}
.has-underline{position:relative;display:inline-block}

.draw-arrow{
  width:80px;height:40px;display:inline-block;
}
@media (min-width:768px){.draw-arrow{width:110px;height:50px}}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:50;background:var(--cream);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;max-width:1500px;margin:0 auto;gap:12px;
}
.logo{display:flex;align-items:center;line-height:1;flex-shrink:0}
.logo-img{height:78px;width:auto;display:block}
.logo-img.light{display:none}
@media (min-width:900px){.logo-img{height:99px}}
.nav-menu{display:none;gap:24px;font-size:14px;font-weight:600}
.nav-menu a{padding:6px 0;transition:color .2s;position:relative}
.nav-menu a:hover{color:var(--rust)}
.nav-menu a.active{color:var(--rust)}
.nav-menu a.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--neon);
}
.nav-cta{
  font-size:13px;font-weight:600;padding:10px 18px;
  background:var(--ink);color:var(--cream);border-radius:999px;
  transition:all .25s;flex-shrink:0;
}
.nav-cta:hover{background:var(--rust);transform:translateY(-1px)}

.menu-btn{
  display:flex;flex-direction:column;gap:5px;padding:8px;background:none;border:none;
}
.menu-btn span{width:22px;height:2px;background:var(--ink);transition:all .3s;border-radius:2px}
.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{
  position:fixed;top:60px;left:0;right:0;bottom:0;
  background:var(--cream);z-index:40;padding:32px 24px;
  transform:translateY(-100%);transition:transform .4s ease;
  display:flex;flex-direction:column;gap:0;overflow-y:auto;
}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{
  font-family:'Metropolis','Inter',sans-serif;font-size:26px;font-weight:700;letter-spacing:-.015em;
  padding:18px 0;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;color:var(--ink);
}
.mobile-menu a .arr{color:var(--rust);font-style:italic;font-size:22px;font-family:'Metropolis','Inter',sans-serif}
.mobile-menu a.active{color:var(--rust)}
.mobile-menu a.active .arr{color:var(--ink)}

@media (min-width:900px){
  .nav-inner{padding:18px 32px}
  .nav-menu{display:flex}
  .menu-btn{display:none}
  .mobile-menu{display:none}
}
@media (min-width:1200px){.nav-inner{padding:20px 48px}}

/* ============ SECTION BANDS ============ */
.band{padding:60px 24px}
.band-neon{background:var(--neon)}
.band-sage{background:var(--sage)}
.band-sage-soft{background:var(--sage-soft)}
.band-cream{background:var(--cream-soft)}
.band-ink{background:var(--ink);color:var(--cream)}
.band-rust{background:var(--rust);color:var(--cream)}
.band-inner{max-width:1500px;margin:0 auto}
@media (min-width:768px){.band{padding:90px 40px}}
@media (min-width:1200px){.band{padding:120px 48px}}

/* ============ CURVED ARC TEXT (signature element) ============ */
.curve-arc{
  display:block;width:100%;
  font-family:'Metropolis','Inter',sans-serif;font-weight:700;
  letter-spacing:.02em;
}
.curve-arc-band{
  padding:24px 0 8px;background:var(--neon);overflow:hidden;position:relative;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
}
.curve-arc-band svg{display:block;width:100%;height:auto;overflow:visible}
.curve-arc-band text{
  font-family:'Metropolis','Inter',sans-serif;font-weight:500;font-size:22px;
  letter-spacing:.01em;fill:var(--ink);text-transform:uppercase;
}
.curve-arc-band .star{font-family:'Metropolis','Inter',sans-serif;font-weight:300;font-style:italic}
@media (min-width:768px){.curve-arc-band text{font-size:28px}}
@media (min-width:1100px){.curve-arc-band text{font-size:34px}}

/* ============ MEGA MARQUEE (high impact scrolling) ============ */
.mega-marquee{
  overflow:hidden;white-space:nowrap;padding:28px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
}
.mega-marquee.ink{background:var(--ink);border-color:var(--ink)}
.mega-marquee.neon{background:var(--neon);border-color:var(--ink)}
.mega-marquee .marquee-track{animation:scroll 28s linear infinite;gap:48px}
.mega-marquee .marquee-track span{
  font-family:'Metropolis','Inter',sans-serif;font-weight:600;font-size:48px;
  letter-spacing:-.015em;text-transform:none;color:var(--ink);
}
.mega-marquee.ink .marquee-track span{color:var(--cream)}
.mega-marquee .marquee-track .it{font-family:'Metropolis',sans-serif;font-style:italic;font-weight:700;color:var(--rust)}
.mega-marquee.ink .marquee-track .it{color:var(--neon)}
.mega-marquee .marquee-track .star{
  font-family:'Metropolis',sans-serif;font-style:italic;font-weight:700;
  font-size:48px;color:var(--rust);
}
.mega-marquee.ink .marquee-track .star{color:var(--neon)}
@media (min-width:768px){
  .mega-marquee{padding:36px 0}
  .mega-marquee .marquee-track span,.mega-marquee .marquee-track .star{font-size:28px}
}
@media (min-width:1200px){
  .mega-marquee .marquee-track span,.mega-marquee .marquee-track .star{font-size:34px}
}

/* ============ RESULTS-MOTIVATED CALLOUT (chunky arrow + label) ============ */
.results-callout{
  display:flex;align-items:center;gap:18px;
}
.results-callout .arrow-big{flex-shrink:0}
.results-callout .label{
  font-family:'Metropolis','Inter',sans-serif;font-weight:700;font-size:clamp(20px,3.5vw,32px);
  letter-spacing:-.01em;line-height:1;text-transform:uppercase;color:var(--ink);
}
.results-callout .label .it{
  font-family:'Metropolis',sans-serif;font-style:italic;font-weight:700;text-transform:none;letter-spacing:-.02em;
}
.band-ink .results-callout .label{color:var(--cream)}
.band-ink .results-callout .label .it{color:var(--neon)}

/* ============ MEGA STAT (absolutely massive number) ============ */
.mega-stat{
  font-family:'Metropolis','Inter',sans-serif;font-weight:700;
  font-size:clamp(120px,28vw,360px);line-height:.82;letter-spacing:-.06em;
  color:var(--ink);display:inline-block;position:relative;
}
.mega-stat .it{
  font-family:'Metropolis',sans-serif;font-style:italic;font-weight:700;color:var(--rust);
}
.mega-stat .has-circle{display:inline-block;position:relative;padding:0 8px}
.mega-stat .has-circle svg{position:absolute;inset:-12px -20px;width:calc(100% + 40px);height:calc(100% + 24px);z-index:0;pointer-events:none}
.mega-stat .has-circle span{position:relative;z-index:1}

/* ============ WMM (What We Make Happen) ============ */
.wmm-row{
  padding:36px 0;border-bottom:2px solid var(--ink);
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
}
.wmm-row:first-of-type{border-top:2px solid var(--ink)}
.wmm-row .n{
  font-family:'Metropolis','Inter',sans-serif;font-weight:500;font-size:11px;
  color:var(--rust);letter-spacing:.14em;text-transform:uppercase;
}
.wmm-row .h{
  font-family:'Metropolis','Inter',sans-serif;font-weight:600;
  font-size:clamp(22px,4.6vw,46px);line-height:1.05;letter-spacing:-.03em;
}
.wmm-row .h .it{font-family:'Metropolis',sans-serif;font-style:italic;font-weight:700}
.wmm-row .h .hl{background:var(--neon);padding:0 8px;display:inline-block}
.wmm-row .h .hl-sage{background:var(--sage);padding:0 8px;display:inline-block}
.wmm-row .who{
  font-family:'Metropolis',sans-serif;font-style:italic;font-weight:700;
  font-size:13px;color:var(--ink-soft);text-align:right;line-height:1.3;
}
.wmm-row .who strong{font-style:normal;font-family:'Metropolis','Inter',sans-serif;font-weight:600;color:var(--ink);display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px}
@media (min-width:768px){.wmm-row{padding:48px 0;grid-template-columns:80px 1fr 220px;gap:32px}.wmm-row .who{font-size:14px}}

/* ============ BIG TESTIMONIAL (billboard moment) ============ */
.big-testi{
  padding:80px 24px;background:var(--neon);position:relative;overflow:hidden;
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
}
.big-testi-inner{max-width:1500px;margin:0 auto;position:relative;z-index:1}
.big-testi .mark{
  font-family:'Metropolis',sans-serif;font-style:italic;font-weight:700;
  font-size:clamp(120px,24vw,260px);line-height:.8;color:var(--ink);
  position:absolute;top:0;left:24px;pointer-events:none;
}
.big-testi blockquote{
  font-family:'Metropolis','Inter',sans-serif;font-weight:600;
  font-size:clamp(32px,7vw,88px);line-height:1.02;letter-spacing:-.035em;
  color:var(--ink);max-width:1300px;margin:60px 0 36px;
  position:relative;z-index:1;
}
.big-testi blockquote .em{font-family:'Metropolis',sans-serif;font-style:italic;font-weight:700}
.big-testi blockquote .has-underline{position:relative;display:inline-block}
.big-testi blockquote .has-underline svg{position:absolute;left:-4px;right:-4px;bottom:-12px;width:calc(100% + 8px);height:18px;pointer-events:none}
.big-testi cite{
  font-style:normal;font-family:'Metropolis','Inter',sans-serif;font-size:12px;
  color:var(--ink-soft);font-weight:600;letter-spacing:.04em;
}
.big-testi cite strong{
  color:var(--ink);display:block;margin-bottom:4px;font-size:15px;font-weight:700;
}
@media (min-width:768px){.big-testi{padding:120px 40px}.big-testi blockquote{margin:80px 0 48px}}

/* ============ TILTED STICKER ============ */
.sticker{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;background:var(--ink);color:var(--neon);
  border-radius:999px;font-family:'Metropolis','Inter',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
  transform:rotate(-3deg);
  border:2px solid var(--ink);
}
.sticker.neon{background:var(--neon);color:var(--ink)}
.sticker.rust{background:var(--rust);color:var(--cream)}
.sticker .star{font-family:'Metropolis',sans-serif;font-style:italic;font-weight:700}

/* ============ CURVED TEXT BAND ============ */
.curve-band{
  padding:48px 0;background:var(--neon);overflow:hidden;position:relative;
}
.curve-band svg{display:block;width:100%;height:auto}
.curve-band-text{
  font-family:'Metropolis','Inter',sans-serif;font-weight:600;font-size:36px;
  letter-spacing:-.02em;fill:var(--ink);
}
@media (min-width:768px){.curve-band{padding:80px 0}}

/* ============ MARQUEE ============ */
.marquee{
  overflow:hidden;white-space:nowrap;padding:14px 0;background:transparent;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.marquee.ink{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.marquee.neon{background:var(--neon);border-color:var(--neon)}
.marquee.sage{background:var(--sage);border-color:var(--sage)}
.marquee-track{
  display:inline-flex;animation:scroll 32s linear infinite;gap:42px;align-items:center;
}
.marquee-track span{
  font-family:'Metropolis','Inter',sans-serif;font-weight:400;font-size:14px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(31,42,28,.4);
}
.marquee.ink .marquee-track span{color:rgba(235,227,210,.45)}
.marquee.neon .marquee-track span, .marquee.sage .marquee-track span{color:rgba(31,42,28,.55)}
.marquee-track .star{font-size:13px;color:var(--ink);opacity:.5}
.marquee.ink .marquee-track .star{color:var(--neon);opacity:1}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Pinyin marquee — your signature */
.pinyin-marquee{
  overflow:hidden;white-space:nowrap;padding:14px 0;
}
.pinyin-marquee .marquee-track{animation:scroll 40s linear infinite;gap:64px}
.pinyin-marquee .marquee-track span{
  font-family:'Metropolis','Inter',sans-serif;font-weight:400;font-size:22px;
  letter-spacing:.04em;color:rgba(31,42,28,.18);text-transform:none;
}
@media (min-width:768px){
  .pinyin-marquee .marquee-track span{font-size:32px}
}

/* Pinyin marquee — featured (visible) */
.pinyin-marquee-featured{
  overflow:hidden;white-space:nowrap;padding:10px 0;border-top:1px solid rgba(31,42,28,.08);border-bottom:1px solid rgba(31,42,28,.08);
}
.pinyin-marquee-featured .marquee-track{animation:scroll 28s linear infinite;gap:40px;display:flex;align-items:center}
.pinyin-marquee-featured .marquee-track span{
  font-family:'Metropolis','Inter',sans-serif;font-weight:400;font-size:13px;
  letter-spacing:.12em;color:rgba(31,42,28,.4);text-transform:none;flex-shrink:0;
}
.pinyin-marquee-featured .marquee-track .sep{color:rgba(31,42,28,.2);font-size:10px}
@media (min-width:768px){
  .pinyin-marquee-featured{padding:12px 0}
  .pinyin-marquee-featured .marquee-track span{font-size:14px}
}

/* Feature image section */
.feature-img-section{padding:8px 24px 40px}
.feature-img-wrap{max-width:1500px;margin:0 auto;overflow:hidden;border-radius:18px}
.feature-img{width:100%;max-height:300px;border-radius:0;display:block;object-fit:cover;object-position:center center}
@media (min-width:768px){
  .feature-img-section{padding:8px 40px 60px}
  .feature-img{max-height:380px;border-radius:0}
}
@media (min-width:1200px){
  .feature-img-section{padding:8px 48px 70px}
  .feature-img{max-height:420px;border-radius:0}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;border-radius:999px;
  font-family:'Metropolis','Inter',sans-serif;font-weight:700;font-size:14px;
  transition:all .25s ease;
}
.btn-primary{background:var(--ink);color:var(--cream)}
.btn-primary:hover{background:var(--rust);transform:translateY(-2px)}
.btn-neon{background:var(--neon);color:var(--ink);font-weight:700}
.btn-neon:hover{background:var(--ink);color:var(--neon);transform:translateY(-2px)}
.btn-outline{border:2px solid var(--ink);font-weight:600}
.btn-outline:hover{background:var(--ink);color:var(--cream)}
.btn-large{padding:16px 32px;font-size:15px}

.text-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Metropolis','Inter',sans-serif;font-weight:600;font-size:14px;
  border-bottom:2px solid var(--ink);padding-bottom:3px;transition:all .25s;
}
.text-link:hover{color:var(--rust);border-color:var(--rust)}

/* ============ PAGE HERO ============ */
.page-hero{
  padding:48px 24px 56px;max-width:1500px;margin:0 auto;
  position:relative;overflow:hidden;
}
.page-hero .eyebrow{margin-bottom:28px}
@media (min-width:768px){.page-hero{padding:80px 40px 80px}}
@media (min-width:1200px){.page-hero{padding:100px 48px 96px}}

/* ============ STATS GRID ============ */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}
.stat{display:flex;flex-direction:column;gap:6px}
.stat .v{
  font-family:'Metropolis','Inter',sans-serif;font-weight:500;
  font-size:clamp(34px,6vw,56px);line-height:.95;letter-spacing:-.025em;color:var(--ink);
}
.stat .v .it{font-family:'Metropolis',sans-serif;font-style:italic;font-weight:700;color:var(--rust)}
.stat .v sub{
  font-family:'Metropolis','Inter',sans-serif;font-size:13px;font-weight:600;
  color:var(--ink-soft);vertical-align:baseline;margin-left:4px;
}
.stat .l{
  font-family:'Metropolis','Inter',sans-serif;font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);line-height:1.4;
}
.band-ink .stat .v{color:var(--cream)}
.band-ink .stat .v .it{color:var(--neon)}
.band-ink .stat .l{color:rgba(235,227,210,.65)}
.band-neon .stat .v .it, .band-sage .stat .v .it{color:var(--ink)}
@media (min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr);gap:40px}}

/* ============ FOOTER ============ */
footer{padding:48px 24px 28px;background:var(--ink);color:var(--cream)}
.footer-grid{
  max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:32px;
}
.footer-brand .logo-img{height:95px;width:auto;filter:invert(1) brightness(1.3)}
.footer-brand p{
  margin-top:16px;font-size:13px;color:rgba(235,227,210,.65);
  line-height:1.7;max-width:380px;font-weight:400;
}
.footer-col h5{
  font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;margin-bottom:14px;color:var(--neon);
}
.footer-col a, .footer-col p{
  display:block;font-size:13px;padding:4px 0;color:rgba(235,227,210,.85);
  transition:color .2s;
}
.footer-col a:hover{color:var(--neon)}
.footer-bottom{
  max-width:1500px;margin:36px auto 0;padding-top:20px;
  border-top:1px solid rgba(235,227,210,.12);
  display:flex;flex-direction:column;gap:6px;
  font-size:11px;color:rgba(235,227,210,.45);
}
@media (min-width:768px){
  footer{padding:72px 40px 36px}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr;gap:60px}
  .footer-bottom{margin-top:48px;padding-top:24px;flex-direction:row;justify-content:space-between;font-size:12px}
}

/* ============ CTA END ============ */
.cta-end{padding:80px 24px;text-align:center;position:relative}
.cta-end h2{
  font-family:'Metropolis','Inter',sans-serif;font-weight:500;
  font-size:clamp(32px,6vw,68px);line-height:1.05;letter-spacing:-.04em;margin-bottom:20px;
}
.cta-end h2 .it{font-family:'Metropolis',sans-serif;font-style:italic;font-weight:700}
.cta-end h2 .block{display:block}
.cta-end h2 .highlight{background:var(--neon);padding:2px 14px;display:inline-block}
.cta-end .small{
  font-family:'Metropolis','Inter',sans-serif;font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--ink-soft);margin-bottom:18px;
}
.cta-end .lead{margin:0 auto}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
@media (min-width:768px){.cta-end{padding:120px 40px 100px}.cta-actions{margin-top:40px}}

/* ============ SECTION ID (for serious pages) ============ */
.section-id{
  padding:14px 24px;background:var(--ink);color:var(--cream);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:'Metropolis','Inter',sans-serif;font-weight:500;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;
}
.section-id .num{color:var(--neon)}
.section-id .dot{color:rgba(235,227,210,.3)}
.section-id .right{display:none}
@media (min-width:600px){.section-id .right{display:inline}}
@media (min-width:768px){.section-id{padding:16px 40px;font-size:11px}}

/* ============ HERO TAGS ============ */
.hero-tags{display:flex;gap:6px;flex-wrap:wrap}
.hero-tag{
  padding:7px 14px;border:2px solid var(--ink);border-radius:999px;
  font-family:'Metropolis','Inter',sans-serif;font-weight:500;font-size:11px;letter-spacing:.06em;
  background:var(--cream);
}
.hero-tag.filled{background:var(--ink);color:var(--cream)}
.hero-tag.neon{background:var(--neon);color:var(--ink);border-color:var(--ink)}
.hero-tag.sage{background:var(--sage);color:var(--ink);border-color:var(--ink)}

/* ============ TWS OS DASHBOARD (for serious pages) ============ */
.os-dashboard{
  background:#0d150a;border-radius:18px;
  border:1px solid rgba(223,255,93,.15);overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
}
.os-chrome{
  padding:12px 16px;background:rgba(223,255,93,.04);
  border-bottom:1px solid rgba(223,255,93,.1);
  display:flex;align-items:center;gap:14px;
}
.os-dots{display:flex;gap:6px}
.os-dots span{width:10px;height:10px;border-radius:50%}
.os-dots span:nth-child(1){background:#ff5f57}
.os-dots span:nth-child(2){background:#ffbd2e}
.os-dots span:nth-child(3){background:#28ca42}
.os-title{
  flex:1;text-align:center;
  font-family:'Metropolis','Inter',sans-serif;font-weight:600;font-size:11px;
  color:rgba(235,227,210,.6);letter-spacing:.06em;
}
.os-title .acc{color:var(--neon)}
.os-live{
  display:flex;align-items:center;gap:6px;
  font-family:'Metropolis','Inter',sans-serif;font-weight:700;font-size:10px;
  color:var(--neon);letter-spacing:.12em;text-transform:uppercase;
}
.os-live .pulse{
  width:6px;height:6px;border-radius:50%;background:var(--neon);
  animation:pulse-live 1.8s ease-in-out infinite;
}
@keyframes pulse-live{
  0%,100%{box-shadow:0 0 0 0 rgba(223,255,93,.5)}
  50%{box-shadow:0 0 0 8px rgba(223,255,93,0)}
}
.os-grid{padding:14px;display:grid;grid-template-columns:1fr;gap:14px}
.os-widget{
  background:rgba(223,255,93,.03);border:1px solid rgba(223,255,93,.08);
  border-radius:12px;padding:18px;
  display:flex;flex-direction:column;gap:10px;min-height:160px;
}
.os-w-label{
  font-family:'Metropolis','Inter',sans-serif;font-weight:500;font-size:10px;
  text-transform:uppercase;letter-spacing:.14em;color:rgba(235,227,210,.5);
}
.os-w-score{
  font-family:'Metropolis','Inter',sans-serif;font-weight:600;font-size:60px;
  color:var(--cream);letter-spacing:-.04em;line-height:.95;
}
.os-w-score sub{
  font-family:'Metropolis','Inter',sans-serif;font-size:14px;font-weight:600;
  color:rgba(235,227,210,.4);vertical-align:baseline;margin-left:4px;
}
.os-w-trend{
  font-family:'Metropolis','Inter',sans-serif;font-weight:600;font-size:11px;
  color:var(--neon);letter-spacing:.04em;
}
.os-w-bar{
  height:5px;background:rgba(235,227,210,.08);border-radius:999px;
  overflow:hidden;margin-top:auto;
}
.os-w-bar-fill{
  height:100%;background:linear-gradient(90deg,var(--rust) 0%,var(--neon) 100%);
  border-radius:999px;
}
.os-w-stat{
  font-family:'Metropolis','Inter',sans-serif;font-weight:600;
  font-size:36px;color:var(--cream);letter-spacing:-.025em;line-height:1;
}
.os-w-stat .pct{
  font-family:'Metropolis','Inter',sans-serif;font-weight:600;
  font-size:13px;color:var(--neon);margin-left:8px;letter-spacing:.04em;
}
.os-w-line{width:100%;height:50px;margin-top:auto}
.os-w-flow{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.os-w-flow-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 11px;background:rgba(223,255,93,.04);border-radius:6px;
  font-family:'Metropolis','Inter',sans-serif;font-size:12px;
}
.os-w-flow-row span:first-child{color:rgba(235,227,210,.8)}
.os-w-flow-row .v{
  font-family:'Metropolis','Inter',sans-serif;font-weight:700;
  color:var(--neon);font-size:14px;
}
.os-w-bars{display:flex;flex-direction:column;gap:9px;margin-top:8px}
.os-w-bars > div{
  display:grid;grid-template-columns:60px 1fr 38px;gap:10px;align-items:center;
  font-family:'Metropolis','Inter',sans-serif;font-size:11px;color:rgba(235,227,210,.8);font-weight:500;
}
.os-w-bars .bar{height:6px;background:rgba(235,227,210,.06);border-radius:999px;overflow:hidden}
.os-w-bars .bar > div{height:100%;border-radius:999px}
.os-w-bars .bar-rust > div{background:var(--rust)}
.os-w-bars .bar-neon > div{background:var(--neon)}
.os-w-bars .bar-sage > div{background:var(--sage)}
.os-w-bars .bar-cream > div{background:rgba(235,227,210,.55)}
.os-w-bars .pct{
  text-align:right;font-family:'Metropolis','Inter',sans-serif;font-weight:700;
  color:var(--neon);font-size:12px;
}
@media (min-width:600px){.os-grid{grid-template-columns:1fr 1fr;gap:14px}}
@media (min-width:1024px){.os-grid{grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:14px}}

/* ── Footer social links ─────────────────────────────────────── */
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft, #888);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
  margin-bottom: 4px;
}
.footer-social:hover {
  color: var(--ink, #1a1a1a);
}