/* =============================================
   WE-AR VR — Brand Presentation
   ============================================= */
@font-face{font-family:'Gotham Rounded';src:local('Nunito Sans');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham Rounded';src:local('Nunito Sans');font-weight:100 900;font-style:italic;font-display:swap}

:root{
  --red:#BF051D;--red-m:#930014;--red-d:#690F1B;
  --dk:#222222;--lt:#C4C4C4;--wh:#FFFFFF;--bk:#000000;
  --grad:linear-gradient(135deg,var(--red-d),var(--red));
  --grad-h:linear-gradient(90deg,var(--red-d),var(--red));
  --ff:'Gotham Rounded','Nunito Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'SF Mono','Fira Code',monospace;
  --r-s:6px;--r-m:14px;--r-l:22px;--r-f:9999px;
  --ease:cubic-bezier(.4,0,.2,1);
  --sh-s:0 2px 10px rgba(0,0,0,.06);
  --sh-m:0 8px 30px rgba(0,0,0,.10);
  --sh-l:0 16px 60px rgba(0,0,0,.14);
  --sh-red:0 6px 30px rgba(191,5,29,.35);
}

/* ---------- RESET ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--ff);font-size:16px;line-height:1.7;color:var(--dk);background:var(--wh);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none;transition:color .3s var(--ease)}
a:hover{color:var(--red-m)}
::selection{background:var(--red);color:#fff}

/* ---------- PROGRESS BAR ---------- */
.progress-bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad-h);z-index:9999;transition:width .1s linear}

/* ---------- TOP NAV ---------- */
.top-nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;align-items:center;justify-content:space-between;padding:.9rem 2.5rem;transition:all .45s var(--ease)}
.top-nav.scrolled{background:rgba(34,34,34,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 1px 20px rgba(0,0,0,.15);padding:.65rem 2.5rem}
.nav-brand-img{height:28px;filter:brightness(0) invert(1);transition:height .3s var(--ease)}
.top-nav.scrolled .nav-brand-img{height:24px}
.nav-links{display:flex;gap:.15rem}
.nav-link{padding:.45rem .85rem;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.55);border-radius:var(--r-f);transition:all .3s var(--ease)}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-link.active{color:#fff;background:rgba(191,5,29,.35)}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:.5rem;flex-direction:column;gap:5px}
.menu-toggle span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:all .3s var(--ease)}
.menu-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bk)}
.hero-bg-wrap{position:absolute;inset:0}
.hero-bg{width:100%;height:100%;object-fit:cover;opacity:.45;transform:scale(1.08);transition:transform 12s linear,opacity 2s ease}
.hero-gradient{position:absolute;inset:0;background:linear-gradient(160deg,rgba(105,15,27,.88) 0%,rgba(34,34,34,.82) 50%,rgba(0,0,0,.9) 100%)}
.hero-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.5) 100%)}
.hero-canvas{position:absolute;inset:0;pointer-events:none}
.hero-inner{position:relative;z-index:2;text-align:center;max-width:780px;padding:2rem}
.hero-eyebrow{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.25em;color:rgba(255,255,255,.45);margin-bottom:2rem}
.hero-title{display:flex;align-items:baseline;justify-content:center;gap:.5em;margin-bottom:1.5rem}
.title-line{font-size:clamp(3.5rem,10vw,8rem);font-weight:900;color:var(--wh);letter-spacing:-.03em;line-height:1}
.title-accent{color:var(--red)}
.hero-sub{font-size:clamp(1rem,2vw,1.25rem);color:rgba(255,255,255,.6);line-height:1.8;margin-bottom:2.5rem;font-weight:300}
.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.scroll-cue{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;z-index:2}
.scroll-mouse{width:22px;height:36px;border:2px solid rgba(255,255,255,.3);border-radius:12px;display:flex;justify-content:center;padding-top:6px}
.scroll-dot{width:3px;height:8px;background:rgba(255,255,255,.6);border-radius:3px;animation:scrollDot 2s ease-in-out infinite}
.scroll-cue span{font-size:.65rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.3)}
@keyframes scrollDot{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(8px);opacity:0}}

/* ---------- VIDEO SECTION ---------- */
.video-section{padding-top:5rem;padding-bottom:5rem}
.video-wrap{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:0 20px 80px rgba(0,0,0,.4);aspect-ratio:16/9;background:var(--bk)}
.brand-video{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r-l)}
.video-wrap:hover{box-shadow:0 24px 90px rgba(191,5,29,.25)}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.8rem 2rem;font-family:var(--ff);font-size:.9rem;font-weight:700;border:2px solid transparent;border-radius:var(--r-f);cursor:pointer;transition:all .35s var(--ease);text-decoration:none;letter-spacing:.02em;position:relative;overflow:hidden}
.btn-lg{padding:1rem 2.6rem;font-size:1rem}
.btn-sm{padding:.55rem 1.3rem;font-size:.82rem}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--sh-red)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 40px rgba(191,5,29,.45);color:#fff}
.btn-primary:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.btn-secondary{background:var(--dk);color:#fff}
.btn-secondary:hover{background:var(--bk);color:#fff;transform:translateY(-3px)}
.btn-outline{background:transparent;color:var(--red);border-color:var(--red)}
.btn-outline:hover{background:var(--red);color:#fff;transform:translateY(-3px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.6)}

/* ---------- SECTIONS ---------- */
.section{padding:7rem 0}
.section-dark{background:var(--dk);color:var(--wh)}
.section-dark p,.section-dark .section-lead,.section-dark .block-desc{color:rgba(255,255,255,.65)}
.section-dark strong{color:#fff}
.container{max-width:1200px;margin:0 auto;padding:0 2.5rem}
.section-intro{margin-bottom:4rem}
.section-tag{display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--red);margin-bottom:.75rem}
.section-title{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;letter-spacing:-.03em;line-height:1.15;margin-bottom:1.25rem}
.section-lead{font-size:1.1rem;color:#666;max-width:680px;line-height:1.8}
.block{margin-top:4rem}
.block h3{font-size:1.4rem;font-weight:800;margin-bottom:.9rem;letter-spacing:-.01em}
.block-desc{font-size:.95rem;color:#666;max-width:640px;margin-bottom:1.5rem;line-height:1.75}
.block-img{border-radius:var(--r-l);box-shadow:var(--sh-m);width:100%}

/* ---------- REVEAL ANIMATION ---------- */
.reveal-item{opacity:0;transform:translateY(40px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-item.visible{opacity:1;transform:translateY(0)}

/* ---------- SPLIT LAYOUT ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.split-text h3{font-size:1.5rem;font-weight:800;margin-bottom:.8rem;margin-top:2.5rem}
.split-text h3:first-child{margin-top:0}
.split-text p{color:#555;line-height:1.85;margin-bottom:.9rem}
.media-img{border-radius:var(--r-l);box-shadow:var(--sh-l);margin-bottom:1.5rem;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.media-img:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 20px 60px rgba(0,0,0,.2)}
.split-even{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}

/* ---------- VALUES ---------- */
.values-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:4rem}
.value-pill{display:flex;align-items:flex-start;gap:.8rem;padding:1.3rem;background:#f7f7f7;border-radius:var(--r-m);border:1px solid #eee;transition:all .4s var(--ease)}
.value-pill:hover{border-color:var(--red);box-shadow:var(--sh-s);transform:translateY(-3px)}
.value-pill svg{flex-shrink:0;color:var(--red)}
.value-pill strong{display:block;font-size:.88rem;margin-bottom:.15rem}
.value-pill span{font-size:.78rem;color:#888;line-height:1.45}

/* ---------- LOGO SYSTEM ---------- */
.logo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.logo-grid-3{grid-template-columns:repeat(3,1fr)}
.logo-var-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.logo-card{border-radius:var(--r-l);padding:2.5rem 2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-height:190px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.logo-card:hover{transform:translateY(-5px);box-shadow:0 12px 40px rgba(0,0,0,.25)}
.logo-card img{max-height:90px;width:auto}
.logo-sm{max-height:60px!important}
.card-dark{background:#111}
.card-white{background:#fff;border:1px solid #e0e0e0}
.card-red{background:var(--red)}
.card-grey{background:#e0e0e0}
.card-gradient{background:var(--grad)}
.card-tag{position:absolute;top:.85rem;left:.85rem;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.4)}
.card-tag-dark{color:rgba(0,0,0,.3)}

/* ---------- COLORS ---------- */
.color-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.color-chip{border-radius:var(--r-l);overflow:hidden;background:#fff;box-shadow:var(--sh-s);border:1px solid #eee;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.color-chip:hover{transform:translateY(-5px);box-shadow:var(--sh-m)}
.chip-swatch{height:110px}
.swatch-border{border-bottom:1px solid #eee}
.chip-info{padding:1.2rem;display:flex;flex-direction:column;gap:.15rem}
.chip-info strong{font-size:.92rem}
.chip-info code{font-family:var(--mono);font-size:.82rem;color:#666;background:none;padding:0}
.chip-info span{font-size:.72rem;color:#999}
.copy-btn{margin-top:.45rem;padding:.3rem .8rem;font-size:.7rem;font-weight:700;font-family:var(--ff);border:1px solid #ddd;border-radius:var(--r-f);background:transparent;cursor:pointer;transition:all .3s var(--ease);align-self:flex-start}
.copy-btn:hover{background:var(--red);color:#fff;border-color:var(--red)}
.gradient-bars{display:flex;flex-direction:column;gap:1rem}
.grad-bar{height:80px;border-radius:var(--r-l);background:linear-gradient(90deg,var(--red-d),var(--red));display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;font-family:var(--mono);font-size:.8rem;color:rgba(255,255,255,.8);font-weight:600}
.grad-bar-alt{background:linear-gradient(90deg,var(--red-m),var(--red))}
.usage-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.usage-item{text-align:center}
.usage-dot{width:54px;height:54px;border-radius:50%;margin:0 auto 1rem}
.usage-item h4{font-size:.88rem;margin-bottom:.3rem}
.usage-item p{font-size:.8rem;color:#777;line-height:1.55}

/* ---------- TYPOGRAPHY ---------- */
.type-scale{display:flex;flex-direction:column}
.type-row{display:flex;align-items:baseline;gap:2rem;padding:1.6rem 0;border-bottom:1px solid rgba(255,255,255,.06)}
.type-meta{min-width:120px;flex-shrink:0}
.type-label{display:block;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:var(--red);margin-bottom:.15rem}
.type-spec{font-size:.7rem;color:rgba(255,255,255,.3)}
.type-sample{color:#fff;font-style:italic}
.ts-h1{font-size:clamp(2rem,5vw,4.2rem);font-weight:300}
.ts-h2{font-size:clamp(1.6rem,4vw,3.2rem);font-weight:300}
.ts-h3{font-size:clamp(1.3rem,3vw,2.4rem);font-weight:300}
.ts-h4{font-size:clamp(1.1rem,2vw,1.6rem);font-weight:300;color:var(--red)}
.ts-info{font-size:1.1rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.ts-body{font-size:1rem;font-weight:400;line-height:1.8;max-width:480px;color:rgba(255,255,255,.55)}
.ts-cta{font-size:1.7rem;font-weight:700}
.weight-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.weight-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:var(--r-l);padding:2rem;text-align:center;display:flex;flex-direction:column;gap:.4rem;align-items:center;transition:border-color .4s var(--ease)}
.weight-card:hover{border-color:rgba(191,5,29,.4)}
.wt-sample{font-size:4rem;line-height:1;color:var(--red);margin-bottom:.5rem}
.wt-light{font-weight:300}.wt-book{font-weight:400}.wt-bold{font-weight:800}
.weight-card strong{font-size:.88rem}
.weight-card span:last-child{font-size:.75rem;color:rgba(255,255,255,.35)}
.charset{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:var(--r-l);padding:2.5rem}
.charset-letters{font-size:1.5rem;font-weight:300;font-style:italic;color:var(--red);line-height:2.2;letter-spacing:.03em}
.charset-nums{font-size:1.5rem;font-weight:300;color:rgba(255,255,255,.65);margin-top:1rem;letter-spacing:.15em}
.charset-sym{font-size:1.2rem;font-weight:300;color:rgba(255,255,255,.35);letter-spacing:.2em}

/* ---------- ICONS ---------- */
.icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem}
.icon-cell{display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:1.4rem .8rem;background:#f7f7f7;border-radius:var(--r-m);border:1px solid #eee;transition:all .35s var(--ease);cursor:default}
.icon-cell:hover{background:var(--red);color:#fff;border-color:var(--red);transform:translateY(-4px);box-shadow:var(--sh-red)}
.icon-cell svg{width:26px;height:26px;color:var(--red-d);transition:color .3s var(--ease)}
.icon-cell:hover svg{color:#fff}
.icon-cell span{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}

/* ---------- UI COMPONENTS ---------- */
.btn-showcase{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-end}
.btn-demo{display:flex;flex-direction:column;align-items:center;gap:.65rem}
.btn-demo code{font-family:var(--mono);font-size:.68rem;color:rgba(255,255,255,.35);background:rgba(255,255,255,.05);padding:.2rem .55rem;border-radius:var(--r-s)}
.cards-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.ui-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-l);overflow:hidden;transition:all .45s var(--ease)}
.ui-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,0,0,.3)}
.ui-card-img{height:185px;background-size:cover;background-position:center;transition:transform .6s var(--ease)}
.ui-card:hover .ui-card-img{transform:scale(1.05)}
.ui-card-body{padding:1.5rem}
.ui-card-body h4{font-size:1.08rem;margin-bottom:.45rem}
.ui-card-body p{font-size:.84rem;color:rgba(255,255,255,.45);margin-bottom:1.15rem;line-height:1.6}
.form-demo{max-width:440px;display:flex;flex-direction:column;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.45)}
.field input,.field select{padding:.8rem 1rem;font-family:var(--ff);font-size:.92rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-m);color:#fff;transition:all .3s var(--ease);outline:none}
.field input::placeholder{color:rgba(255,255,255,.2)}
.field input:focus,.field select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(191,5,29,.12)}
.field select option{background:var(--dk)}
.badge-row{display:flex;flex-wrap:wrap;gap:.7rem}
.badge{display:inline-flex;align-items:center;padding:.4rem 1rem;font-size:.75rem;font-weight:700;border-radius:var(--r-f);letter-spacing:.04em}
.bg-red{background:var(--red);color:#fff}
.bg-dark{background:rgba(255,255,255,.08);color:#fff}
.bg-outline{background:transparent;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.65)}
.bg-muted{background:rgba(255,255,255,.05);color:rgba(255,255,255,.45)}

/* ---------- IMAGERY ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.gallery-3{grid-template-columns:repeat(3,1fr)}
.gal-img{border-radius:var(--r-l);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.gal-img:hover{transform:translateY(-5px) scale(1.01);box-shadow:var(--sh-l)}

/* ---------- COLLATERAL ---------- */
.merch-row{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.merch-item{text-align:center}
.merch-item img{border-radius:var(--r-l);transition:transform .5s var(--ease)}
.merch-item:hover img{transform:scale(1.02)}
.merch-item span{display:block;margin-top:.8rem;font-size:.82rem;color:rgba(255,255,255,.4)}
.qr-row{display:flex;gap:3rem;align-items:center}
.qr-box{flex-shrink:0}
.qr-box img{width:150px;height:150px;border-radius:var(--r-m);background:#fff;padding:.6rem}
.qr-text p{margin-bottom:.8rem}
.pitcrew-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.pitcrew-box{background:var(--bk);border-radius:var(--r-l);padding:2rem;text-align:center;transition:transform .4s var(--ease)}
.pitcrew-box:hover{transform:translateY(-4px)}
.pitcrew-box img{max-width:280px;margin:0 auto .8rem}
.pitcrew-box span{font-size:.72rem;color:rgba(255,255,255,.35)}

/* ---------- VR LANDSCAPE ---------- */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.stat-card{text-align:center;padding:2.2rem 1.5rem;background:linear-gradient(135deg,#f8f8f8,#fff);border:1px solid #eee;border-radius:var(--r-l);transition:all .4s var(--ease)}
.stat-card:hover{border-color:var(--red);box-shadow:var(--sh-m);transform:translateY(-4px)}
.stat-num{display:block;font-size:2.8rem;font-weight:900;color:var(--red);line-height:1.1;margin-bottom:.5rem;font-variant-numeric:tabular-nums}
.stat-lbl{font-size:.8rem;color:#777;line-height:1.45}
.segments{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.seg-card{padding:2rem;border:1px solid #eee;border-radius:var(--r-l);transition:all .4s var(--ease)}
.seg-card:hover{border-color:var(--red);box-shadow:var(--sh-m);transform:translateY(-3px)}
.seg-icon{width:48px;height:48px;background:rgba(191,5,29,.07);border-radius:var(--r-m);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.seg-icon svg{width:24px;height:24px;color:var(--red)}
.seg-card h4{font-size:1.02rem;margin-bottom:.4rem}
.seg-card p{font-size:.86rem;color:#666;line-height:1.65}
.table-wrap{overflow-x:auto;border-radius:var(--r-l);border:1px solid #eee}
.data-table{width:100%;border-collapse:collapse;font-size:.88rem}
.data-table th{text-align:left;padding:1rem 1.2rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--red);border-bottom:2px solid #eee;background:#f9f9f9}
.data-table td{padding:1rem 1.2rem;border-bottom:1px solid #eee;color:#555}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:rgba(191,5,29,.02)}
.edge-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.edge-card{padding:2rem;background:#f8f8f8;border-radius:var(--r-l);border:1px solid #eee;transition:all .4s var(--ease)}
.edge-card:hover{border-color:var(--red);box-shadow:var(--sh-m);transform:translateY(-3px)}
.edge-num{display:block;font-size:2.2rem;font-weight:900;color:var(--red);margin-bottom:.65rem;line-height:1}
.edge-card h4{font-size:.98rem;margin-bottom:.4rem}
.edge-card p{font-size:.83rem;color:#666;line-height:1.6}
.timeline{position:relative;padding-left:2.5rem}
.timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--red),var(--lt))}
.tl-item{position:relative;padding-bottom:2.5rem}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-2.5rem;top:.2rem;width:18px;height:18px;background:#fff;border:3px solid var(--red);border-radius:50%;z-index:1;transition:background .3s var(--ease),transform .3s var(--ease)}
.tl-item:hover .tl-dot{background:var(--red);transform:scale(1.3)}
.tl-body h4{font-size:1.02rem;margin-bottom:.35rem}
.tl-body p{font-size:.88rem;color:#666;line-height:1.65}

/* ---------- FOOTER ---------- */
.footer{background:var(--dk);padding:3.5rem 0;border-top:1px solid rgba(255,255,255,.05)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.footer-brand img{opacity:.5}
.footer-text p{font-size:.78rem;color:rgba(255,255,255,.3);line-height:1.7}
.footer-text a{color:var(--red)}
.footer-qr img{opacity:.25;border-radius:var(--r-s)}

/* ---------- TOAST ---------- */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(12px);background:var(--dk);color:#fff;padding:.7rem 1.5rem;border-radius:var(--r-f);font-size:.82rem;font-weight:600;opacity:0;transition:all .35s var(--ease);z-index:9999;pointer-events:none;box-shadow:var(--sh-m)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1200px){
  .logo-var-grid,.usage-row,.edge-row,.stats-row{grid-template-columns:repeat(2,1fr)}
  .cards-row{grid-template-columns:repeat(2,1fr)}
  .icon-grid{grid-template-columns:repeat(4,1fr)}
  .values-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:992px){
  .nav-links{position:fixed;top:0;right:0;width:280px;height:100vh;background:rgba(34,34,34,.97);backdrop-filter:blur(20px);flex-direction:column;padding:5rem 2rem 2rem;transform:translateX(100%);transition:transform .4s var(--ease)}
  .nav-links.open{transform:translateX(0)}
  .nav-link{padding:.7rem 0;font-size:.9rem;border-radius:0;border-bottom:1px solid rgba(255,255,255,.05)}
  .menu-toggle{display:flex}
  .split,.split-even{grid-template-columns:1fr}
  .gallery-3{grid-template-columns:repeat(2,1fr)}
  .segments{grid-template-columns:1fr}
  .qr-row{flex-direction:column;align-items:flex-start}
}
@media(max-width:768px){
  .container{padding:0 1.5rem}
  .section{padding:5rem 0}
  .top-nav{padding:.7rem 1.2rem}
  .section-title{font-size:1.8rem}
  .color-row,.logo-grid,.logo-grid-3,.weight-row,.merch-row,.pitcrew-row,.logo-var-grid{grid-template-columns:1fr}
  .icon-grid{grid-template-columns:repeat(3,1fr)}
  .cards-row{grid-template-columns:1fr}
  .values-strip{grid-template-columns:1fr}
  .gallery-grid,.gallery-3{grid-template-columns:1fr}
  .type-row{flex-direction:column;gap:.4rem}
  .type-meta{min-width:auto}
  .edge-row,.usage-row,.stats-row{grid-template-columns:1fr}
  .btn-showcase{flex-direction:column;align-items:flex-start}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .hero-title{flex-direction:column;gap:0}
}
@media(max-width:480px){
  .title-line{font-size:3rem}
}