/* ═══════════════════════════════════════════════════════════════
   JOYBOY MEDIA — DESIGN SYSTEM v2
   Navy / Orange / Gold · Cinzel display · DM Sans body
═══════════════════════════════════════════════════════════════ */
:root {
  --navy:#0A1628; --navy2:#0D1F38; --navy3:#0F2442;
  --ink:#050C18;
  --orange:#FF6B35; --orange2:#E8572A;
  --gold:#E8C84A; --white:#F5F0E8; --muted:#7A8A9A;
  --line:rgba(232,200,74,0.14);
  --line-soft:rgba(245,240,232,0.08);
  --container:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--navy); color:var(--white);
  font-family:'DM Sans',sans-serif; font-size:16px; line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
::selection { background:var(--orange); color:#fff; }

/* Film-grain overlay — the "expensive" texture */
body::after {
  content:''; position:fixed; inset:-50%; z-index:2000; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  animation:grain 9s steps(10) infinite;
}
@keyframes grain {
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-3%,2%)} 30%{transform:translate(4%,-2%)}
  50%{transform:translate(-2%,4%)} 70%{transform:translate(3%,1%)} 90%{transform:translate(-4%,-3%)}
}

a,button,select,summary,input[type=file],.work-filters button { cursor:pointer; }

/* ── SCROLLBAR + PROGRESS ── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--navy); }
::-webkit-scrollbar-thumb { background:var(--orange); border-radius:2px; }
.scroll-progress { position:fixed; top:0; left:0; height:2px; width:0; background:linear-gradient(90deg,var(--orange),var(--gold)); z-index:1200; transition:width .1s linear; }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1100;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px 48px; min-height:76px;
  background:linear-gradient(180deg,rgba(5,12,24,.68) 0%,rgba(5,12,24,.28) 70%,transparent 100%);
  transition:background .4s,backdrop-filter .4s,transform .45s var(--ease),border-color .4s;
  border-bottom:1px solid transparent;
}
nav.scrolled { background:rgba(5,12,24,0.88); backdrop-filter:blur(20px); border-bottom-color:var(--line); }
nav.nav-hidden { transform:translateY(-100%); }
.nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.nav-logo img { height:44px; width:44px; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(255,107,53,.35)); transition:transform .3s; }
.nav-logo:hover img { transform:scale(1.06); }
.nav-logo-text { font-family:'Cinzel',serif; font-weight:700; font-size:clamp(15px,1.4vw,19px); letter-spacing:2.5px; line-height:1; white-space:nowrap; }
.outline-joy { color:var(--orange); }
.outline-boy { color:var(--white); }
.outline-media { color:rgba(245,240,232,.55); margin-left:.35em; font-weight:600; }
.nav-links { display:flex; gap:6px; list-style:none; align-items:center; }
.nav-links a { position:relative; color:rgba(245,240,232,.78); text-decoration:none; font-size:12.5px; letter-spacing:1.6px; text-transform:uppercase; font-weight:600; white-space:nowrap; transition:color .25s,background .25s; padding:10px 16px; border-radius:999px; }
.nav-links a:not(.nav-cta):hover { color:var(--white); background:rgba(245,240,232,.07); }
.nav-links a.active { color:var(--white); background:rgba(255,107,53,.14); }
.nav-links li:last-child { margin-left:14px; }
.nav-cta { display:inline-block; background:linear-gradient(135deg,var(--orange),var(--orange2)); color:#fff !important; padding:12px 26px; border-radius:999px; font-weight:700; overflow:hidden; position:relative; box-shadow:0 6px 18px rgba(255,107,53,.32); transition:transform .2s,box-shadow .25s; }
.nav-cta::before { content:''; position:absolute; top:0; left:-80%; width:60%; height:100%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); opacity:0; transition:left .6s var(--ease),opacity .2s; }
.nav-cta:hover::before { left:130%; opacity:1; }
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(255,107,53,.45); }

/* Burger */
.nav-burger { display:none; width:44px; height:44px; background:none; border:none; flex-direction:column; justify-content:center; align-items:center; gap:6px; z-index:1300; }
.nav-burger span { width:26px; height:2px; background:var(--white); transition:transform .35s var(--ease),opacity .3s; }
.nav-burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* Mobile menu */
.mobile-menu {
  position:fixed; inset:0; z-index:1050; background:rgba(5,12,24,.97); backdrop-filter:blur(24px);
  display:flex; flex-direction:column; justify-content:center; padding:0 32px;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease),visibility .4s;
}
.mobile-menu.open { opacity:1; visibility:visible; }
.mobile-menu a { font-family:'Cinzel',serif; font-size:clamp(28px,8vw,42px); font-weight:700; color:var(--white); text-decoration:none; padding:14px 0; border-bottom:1px solid var(--line-soft); letter-spacing:1px; opacity:0; transform:translateY(24px); transition:opacity .5s var(--ease),transform .5s var(--ease),color .25s; }
.mobile-menu.open a { opacity:1; transform:translateY(0); }
.mobile-menu a:hover, .mobile-menu a.active { color:var(--orange); }
.mobile-menu .mm-cta { color:var(--orange); }
.mobile-menu .mm-meta { margin-top:28px; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); opacity:0; transition:opacity .5s .3s; }
.mobile-menu.open .mm-meta { opacity:1; }

/* ── SECTIONS / LAYOUT ── */
section { padding:130px 48px; position:relative; }
.container { max-width:var(--container); margin:0 auto; }
.section-label { font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--orange); font-weight:600; display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.section-label::before { content:''; display:block; width:30px; height:2px; background:var(--orange); }
.section-label.centered { justify-content:center; }
.section-label.centered::after { content:''; display:block; width:30px; height:2px; background:var(--orange); }
.section-title { font-family:'Cinzel',serif; font-size:clamp(34px,4.4vw,62px); font-weight:700; line-height:1.06; letter-spacing:-.5px; color:var(--white); }
.section-title em { font-style:normal; color:var(--orange); }
.section-intro { color:rgba(245,240,232,.62); font-size:16.5px; font-weight:300; line-height:1.8; max-width:640px; margin-top:20px; }
.section-head-row { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:64px; flex-wrap:wrap; }

/* ── PAGE HERO (sub-pages) ── */
.page-hero { min-height:52vh; display:flex; align-items:flex-end; padding:180px 48px 72px; position:relative; overflow:hidden; background:var(--ink); }
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 78% 110%,rgba(255,107,53,.22),transparent 65%),radial-gradient(ellipse 45% 40% at 15% -10%,rgba(232,200,74,.08),transparent 60%); }
.page-hero::after { content:attr(data-word); position:absolute; right:-2%; bottom:-6%; font-family:'Cinzel',serif; font-size:clamp(110px,22vw,340px); font-weight:900; color:transparent; -webkit-text-stroke:1px rgba(255,107,53,.09); letter-spacing:-8px; pointer-events:none; line-height:1; white-space:nowrap; }
.page-hero .container { position:relative; z-index:2; }
.page-hero h1 { font-family:'Cinzel',serif; font-size:clamp(40px,6.4vw,88px); font-weight:900; line-height:1.02; letter-spacing:-1px; }
.page-hero h1 em { font-style:normal; color:var(--orange); }
.page-hero .page-hero-sub { margin-top:22px; max-width:620px; color:rgba(245,240,232,.68); font-weight:300; font-size:clamp(15px,1.4vw,18px); line-height:1.8; }
.breadcrumb { font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); margin-bottom:24px; }
.breadcrumb a { color:var(--muted); text-decoration:none; transition:color .2s; }
.breadcrumb a:hover { color:var(--orange); }
.breadcrumb span { color:var(--gold); }

/* ── HOME HERO (pinned scroll-scrub) ── */
#hero-pin { position:relative; height:300vh; background:var(--ink); }
#hero-pin.no-scrub { height:auto; }
#hero { position:sticky; top:0; height:100vh; min-height:640px; display:flex; align-items:center; overflow:hidden; background:var(--ink); padding:0; }
#hero-pin.no-scrub #hero { position:relative; min-height:100vh; }
#hero-scrub { position:absolute; inset:0; width:100%; height:100%; background:#050C18 url('../hero-frames/poster.jpg') center/cover no-repeat; }
.hero-stage { transition:none; will-change:opacity,transform; }
.hero-stage-center { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:0 24px; opacity:0; pointer-events:none; }
.hero-stage-h { font-family:'Cinzel',serif; font-size:clamp(32px,4.6vw,72px); font-weight:900; line-height:1.05; letter-spacing:-1px; color:var(--white); margin-bottom:18px; text-shadow:0 22px 60px rgba(0,0,0,.6); max-width:900px; }
.hero-stage-h em { font-style:normal; color:var(--orange); }
.hero-stage-sub { font-size:clamp(14px,1.5vw,18px); color:rgba(245,240,232,.85); font-weight:300; line-height:1.8; max-width:560px; margin-bottom:30px; }
.hero-stage-actions { justify-content:center; }
.hero-video-overlay { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,rgba(5,12,24,.94) 0%,rgba(10,22,40,.78) 37%,rgba(10,22,40,.28) 68%,rgba(5,12,24,.68) 100%),
             linear-gradient(180deg,rgba(5,12,24,.42) 0%,rgba(5,12,24,.06) 48%,rgba(5,12,24,.9) 100%); }
.hero-content { position:relative; z-index:2; padding:110px 48px 80px; max-width:960px; width:100%; margin-right:auto; }
.hero-badge { display:inline-flex; align-items:center; gap:10px; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:18px; opacity:0; animation:fadeUp .8s .25s forwards; font-weight:500; }
.hero-badge::before { content:''; display:block; width:34px; height:1.5px; background:var(--gold); }
.hero-h1 { font-family:'Cinzel',serif; font-size:clamp(32px,min(4.1vw,8.5vh),62px); font-weight:900; line-height:1.1; letter-spacing:-1px; color:var(--white); margin-bottom:16px; text-shadow:0 22px 60px rgba(0,0,0,.55); }
.hero-h1 em { font-style:normal; color:var(--orange); }
.hero-h1 .line { display:block; overflow:hidden; }
.hero-h1 .word { display:inline-block; transform:translateY(110%); animation:riseUp 1s var(--ease-out) forwards; }
.hero-slogan { font-family:'Cinzel',serif; font-size:clamp(15px,1.7vw,22px); font-weight:700; color:var(--white); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:14px; opacity:0; animation:fadeUp .9s 1.05s forwards; }
.hero-slogan em { font-style:normal; color:var(--orange); }
.hero-sub { font-size:clamp(14px,1.4vw,17px); color:rgba(245,240,232,.88); font-weight:300; line-height:1.75; max-width:580px; margin-bottom:26px; opacity:0; animation:fadeUp .9s 1.2s forwards; }
.hero-service-rail { display:flex; flex-wrap:wrap; gap:9px; max-width:660px; margin-bottom:32px; opacity:0; animation:fadeUp .9s 1.32s forwards; }
.hero-service-rail span { font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:rgba(245,240,232,.8); border:1px solid rgba(232,200,74,.28); background:rgba(13,31,56,.58); padding:7px 12px; border-radius:999px; backdrop-filter:blur(10px); transition:border-color .3s,color .3s; }
.hero-service-rail span:hover { border-color:var(--gold); color:var(--gold); }
.hero-actions { display:flex; gap:20px; align-items:center; flex-wrap:wrap; opacity:0; animation:fadeUp .9s 1.45s forwards; }
.hero-scroll-hint { position:absolute; bottom:36px; left:48px; z-index:2; display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); opacity:0; animation:fadeUp 1s 1.9s forwards; }
.scroll-line { width:44px; height:1px; background:var(--muted); position:relative; overflow:hidden; }
.scroll-line::after { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:var(--orange); animation:scrollLine 2s 2s infinite; }

/* ── BUTTONS ── */
.btn-primary { position:relative; overflow:hidden; background:linear-gradient(135deg,var(--orange),var(--orange2)); color:#fff; padding:16px 36px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; border:none; border-radius:999px; cursor:pointer; text-decoration:none; box-shadow:0 8px 22px rgba(255,107,53,.28); transition:background .22s,transform .18s,box-shadow .25s; display:inline-block; white-space:nowrap; }
.btn-primary::before { content:''; position:absolute; top:0; left:-80%; width:55%; height:100%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); opacity:0; transition:left .65s var(--ease),opacity .2s; }
.btn-primary:hover::before { left:135%; opacity:1; }
.btn-primary:hover { background:var(--orange2); transform:translateY(-2px); box-shadow:0 14px 34px rgba(255,107,53,.3); }
.btn-ghost { color:var(--white); font-size:14px; font-weight:500; letter-spacing:1px; text-decoration:none; display:inline-flex; align-items:center; gap:10px; transition:gap .25s,color .25s; white-space:nowrap; }
.btn-ghost::after { content:'→'; font-size:18px; color:var(--orange); transition:transform .25s; }
.btn-ghost:hover { gap:16px; color:var(--orange); }
.btn-whatsapp-outline { color:#25D366; background:transparent; border:1.5px solid rgba(37,211,102,.5); padding:15px 32px; font-size:14px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; border-radius:999px; cursor:pointer; text-decoration:none; transition:border-color .22s,background .22s,transform .18s; display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.btn-whatsapp-outline:hover { border-color:#25D366; background:rgba(37,211,102,.08); transform:translateY(-2px); }

/* ── MARQUEE ── */
.marquee-section { padding:16px 0; background:var(--orange); overflow:hidden; white-space:nowrap; position:relative; z-index:2; }
.marquee-track { display:inline-flex; animation:marquee 26s linear infinite; }
.marquee-section:hover .marquee-track { animation-play-state:paused; }
.marquee-item { font-family:'Cinzel',serif; font-size:13px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.72); padding:0 38px; }
.marquee-item strong { color:#fff; }
.marquee-sep { color:rgba(255,255,255,.4); padding:0 8px; }

/* ── STATS ── */
.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:50px; }
.stat-box { background:rgba(255,107,53,.06); border:1px solid rgba(255,107,53,.12); padding:28px 24px; transition:background .3s,border-color .3s; }
.stat-box:hover { background:rgba(255,107,53,.1); border-color:rgba(255,107,53,.3); }
.stat-number { font-family:'Cinzel',serif; font-size:42px; font-weight:900; color:var(--orange); line-height:1; margin-bottom:6px; }
.stat-label { font-size:12px; color:var(--muted); letter-spacing:1px; }

/* ── ABOUT ── */
#about { background:var(--navy2); overflow:hidden; }
#about::before { content:'JOYBOY'; position:absolute; right:-40px; top:50%; transform:translateY(-50%); font-family:'Cinzel',serif; font-size:220px; font-weight:900; color:rgba(255,107,53,.03); pointer-events:none; letter-spacing:-10px; white-space:nowrap; }
.about-grid { display:grid; grid-template-columns:.95fr 1.85fr; gap:44px; align-items:center; }
.about-left p { color:rgba(245,240,232,.65); font-size:16px; font-weight:300; margin-bottom:18px; line-height:1.8; }
.about-left .section-title { margin-bottom:28px; }
.ai-wrap { position:relative; width:min(112%,820px); height:720px; margin-left:auto; transform:translateX(26px); border-radius:4px; }
#aiCanvas { width:100%; height:100%; display:block; border-radius:4px; border:1px solid rgba(255,107,53,.1); }
.ai-badge { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); font-family:'Cinzel',serif; font-size:10px; letter-spacing:3px; color:var(--orange); text-transform:uppercase; border:1px solid rgba(255,107,53,.3); padding:6px 20px; background:rgba(10,22,40,.9); white-space:nowrap; }

/* ── SERVICE CARDS (spotlight hover) ── */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.service-card { --mx:50%; --my:50%; position:relative; background:var(--navy2); padding:46px 30px 42px; border-top:3px solid transparent; transition:border-color .3s,transform .35s var(--ease),background .3s; overflow:hidden; cursor:pointer; text-decoration:none; display:block; }
.service-card::before { content:''; position:absolute; inset:0; background:radial-gradient(360px circle at var(--mx) var(--my),rgba(255,107,53,.12),transparent 65%); opacity:0; transition:opacity .35s; pointer-events:none; }
.service-card:hover::before { opacity:1; }
.service-card:hover { border-top-color:var(--orange); transform:translateY(-6px); background:var(--navy3); }
.service-icon { color:var(--gold); margin-bottom:24px; transition:transform .35s var(--ease); }
.service-card:hover .service-icon { transform:translateY(-3px) scale(1.08); }
.service-num { position:absolute; top:18px; right:20px; font-family:'Cinzel',serif; font-size:11px; color:rgba(255,107,53,.3); }
.service-name { font-family:'DM Sans',sans-serif; font-size:16.5px; font-weight:700; color:var(--white); letter-spacing:.2px; margin-bottom:12px; line-height:1.35; }
.service-desc { font-size:13.5px; color:var(--muted); line-height:1.7; font-weight:300; }
.service-more { display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); opacity:0; transform:translateY(6px); transition:opacity .3s,transform .3s; }
.service-card:hover .service-more { opacity:1; transform:translateY(0); }

/* ── SERVICE DETAIL (services page) ── */
.svc-detail { display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; padding:90px 0; border-top:1px solid var(--line-soft); }
.svc-detail:first-of-type { border-top:none; }
.svc-detail.flip .svc-copy { order:2; }
.svc-kicker { font-family:'Cinzel',serif; font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:14px; display:flex; gap:14px; align-items:center; }
.svc-kicker .num { color:rgba(255,107,53,.55); }
.svc-title { font-family:'Cinzel',serif; font-size:clamp(26px,3vw,42px); font-weight:700; line-height:1.12; margin-bottom:18px; }
.svc-title em { font-style:normal; color:var(--orange); }
.svc-copy p { color:rgba(245,240,232,.68); font-weight:300; line-height:1.85; margin-bottom:16px; font-size:15.5px; }
.svc-list { list-style:none; margin:22px 0 30px; display:flex; flex-direction:column; gap:11px; }
.svc-list li { font-size:14px; color:rgba(245,240,232,.82); display:flex; gap:12px; align-items:flex-start; line-height:1.55; }
.svc-list li::before { content:'✓'; color:var(--gold); font-weight:700; flex-shrink:0; }
.svc-visual { position:relative; border:1px solid var(--line); border-radius:4px; min-height:380px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(145deg,var(--navy2),var(--ink)); }
.svc-visual::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 70% at 70% 100%,rgba(255,107,53,.16),transparent 65%); }
.svc-visual svg { position:relative; z-index:1; opacity:.85; }
.svc-visual .svc-price-chip { position:absolute; bottom:18px; left:18px; z-index:2; font-family:'Cinzel',serif; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); border:1px solid rgba(232,200,74,.35); background:rgba(5,12,24,.85); padding:7px 16px; border-radius:2px; }

/* Branded gear live preview */
.svc-visual-demo { align-items:stretch; justify-content:stretch; min-height:auto; overflow:visible; }
.svc-visual-demo::before { border-radius:4px; pointer-events:none; }
.merch-demo { position:relative; z-index:1; width:100%; padding:22px; display:flex; flex-direction:column; gap:14px; }
.merch-demo-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.merch-demo-head .svc-kicker { margin-bottom:8px; font-size:10px; letter-spacing:2.2px; }
.merch-demo h3 { font-family:'Cinzel',serif; font-size:clamp(18px,2vw,25px); font-weight:900; line-height:1.05; color:var(--white); }
.merch-demo-chip { flex-shrink:0; font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--gold); border:1px solid rgba(232,200,74,.28); background:rgba(5,12,24,.72); padding:6px 10px; border-radius:2px; }
.merch-demo-toolbar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.merch-item-btn,.merch-secondary-btn,.merch-download-btn { min-height:44px; font-family:'DM Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:1.15px; text-transform:uppercase; border-radius:2px; cursor:pointer; transition:background .2s,border-color .2s,color .2s,transform .15s; }
.merch-item-btn { color:rgba(245,240,232,.72); border:1px solid rgba(232,200,74,.2); background:rgba(10,22,40,.72); }
.merch-item-btn:hover,.merch-item-btn.active { color:#fff; border-color:var(--orange); background:rgba(255,107,53,.18); }
.merch-item-btn.active { box-shadow:inset 0 0 0 1px rgba(255,107,53,.32); }
#merchPreviewCanvas { width:100%; aspect-ratio:9/7; display:block; background:#f0ede6; border:1px solid rgba(232,200,74,.18); border-radius:4px; touch-action:none; cursor:grab; }
#merchPreviewCanvas.dragging { cursor:grabbing; }
.merch-upload { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px dashed rgba(232,200,74,.28); background:rgba(10,22,40,.48); border-radius:3px; }
.merch-upload label,.merch-range span { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
.merch-upload input { min-width:0; max-width:230px; color:rgba(245,240,232,.78); font-size:12px; }
.merch-upload input::file-selector-button { margin-right:10px; border:1px solid rgba(255,107,53,.5); background:rgba(255,107,53,.14); color:#fff; padding:8px 10px; border-radius:2px; font-family:'DM Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; cursor:pointer; }
.merch-range { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:14px; }
.merch-range input { width:100%; accent-color:var(--orange); }
.merch-download-row { display:grid; grid-template-columns:.8fr 1.2fr; gap:10px; }
.merch-secondary-btn { color:var(--white); border:1px solid rgba(232,200,74,.24); background:rgba(10,22,40,.72); }
.merch-download-btn { color:#fff; border:1px solid var(--orange); background:var(--orange); }
.merch-secondary-btn:hover,.merch-download-btn:hover { transform:translateY(-1px); }
.merch-secondary-btn:hover { border-color:rgba(232,200,74,.5); }
.merch-download-btn:hover { background:var(--orange2); border-color:var(--orange2); }
.merch-status { min-height:20px; color:rgba(245,240,232,.7); font-size:12px; line-height:1.55; }
.merch-status.error { color:#ff9c7c; }
.merch-status.success { color:var(--gold); }
.merch-quote-cta { display:none; text-align:center; text-decoration:none; color:#25D366; border:1px solid rgba(37,211,102,.45); background:rgba(37,211,102,.08); padding:12px 14px; border-radius:2px; font-size:11px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; transition:background .2s,border-color .2s,transform .15s; }
.merch-quote-cta.visible { display:block; }
.merch-quote-cta:hover { border-color:#25D366; background:rgba(37,211,102,.14); transform:translateY(-1px); }

/* Standalone gear preview page */
.gear-preview-page { padding-top:76px; padding-bottom:92px; overflow:hidden; }
.gear-preview-shell { display:grid; grid-template-columns:.84fr 1.16fr; gap:56px; align-items:center; border-top:1px solid var(--line-soft); padding-top:28px; }
.gear-preview-copy { max-width:520px; }
.gear-preview-copy p { color:rgba(245,240,232,.68); font-weight:300; line-height:1.85; margin-bottom:16px; font-size:15.5px; }
.gear-preview-shell .svc-visual-demo { width:100%; max-width:760px; margin-left:auto; box-shadow:0 28px 90px rgba(0,0,0,.34); }
.gear-preview-shell .merch-demo { padding:24px; }

/* ── PORTFOLIO ── */
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.portfolio-card { position:relative; background:rgba(13,31,56,.6); border:1px solid rgba(232,200,74,.12); border-radius:4px; overflow:hidden; transition:border-color .35s,transform .35s var(--ease),box-shadow .35s; transform-style:preserve-3d; }
.portfolio-card:hover { border-color:rgba(232,200,74,.45); transform:translateY(-6px); box-shadow:0 26px 60px rgba(0,0,0,.45); }
.portfolio-thumb { height:200px; background:rgba(10,22,40,.9); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.portfolio-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.portfolio-card:hover .portfolio-thumb img { transform:scale(1.06); }
.portfolio-thumb-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.portfolio-tag { position:absolute; top:12px; left:12px; z-index:2; font-family:'Cinzel',serif; font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; background:var(--navy); color:var(--gold); border:1px solid rgba(232,200,74,.4); padding:3px 10px; border-radius:2px; }
.portfolio-body { padding:22px 22px 26px; }
.portfolio-title { font-family:'DM Sans',sans-serif; font-size:16.5px; font-weight:700; color:var(--white); margin-bottom:8px; letter-spacing:.2px; }
.portfolio-desc { font-size:13px; color:rgba(245,240,232,.65); line-height:1.65; }
/* Feature card (work page) */
.work-feature { grid-column:span 3; display:grid; grid-template-columns:1.35fr 1fr; min-height:340px; }
.work-feature .portfolio-thumb { height:100%; min-height:280px; }
.work-feature .portfolio-body { padding:44px 40px; display:flex; flex-direction:column; justify-content:center; }
.work-feature .portfolio-title { font-size:clamp(20px,2.2vw,30px); margin-bottom:14px; }
.work-feature .portfolio-desc { font-size:14.5px; line-height:1.8; }
/* Filters */
.work-filters { display:flex; flex-wrap:wrap; gap:10px; margin:44px 0 40px; }
.work-filters button { background:transparent; border:1px solid var(--line); color:var(--muted); font-family:'DM Sans',sans-serif; font-size:11px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; padding:10px 20px; border-radius:999px; cursor:pointer; transition:color .25s,border-color .25s,background .25s; }
.work-filters button:hover { color:var(--white); border-color:rgba(232,200,74,.5); }
.work-filters button.active { background:var(--orange); border-color:var(--orange); color:#fff; }
.portfolio-card.filtered-out { display:none; }

/* ── RESULT / CASE CARDS ── */
.results-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.result-card { background:rgba(13,31,56,.7); border:1px solid rgba(232,200,74,.25); border-radius:4px; padding:38px 34px; transition:border-color .3s,transform .3s; }
.result-card:hover { border-color:rgba(232,200,74,.6); transform:translateY(-4px); }
.result-label { font-family:'Cinzel',serif; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.result-title { font-family:'Cinzel',serif; font-size:22px; font-weight:700; color:var(--white); margin-bottom:14px; line-height:1.3; }
.result-body { font-size:14px; color:rgba(245,240,232,.75); line-height:1.75; margin-bottom:24px; }
.result-pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.result-pill { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; background:rgba(232,200,74,.12); color:var(--gold); border:1px solid rgba(232,200,74,.3); padding:4px 12px; border-radius:2px; }
.result-link { font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--orange); text-decoration:none; transition:color .2s; }
.result-link:hover { color:var(--white); }

/* ── PROCESS ── */
#process { background:var(--navy2); overflow:hidden; }
.process-steps { display:grid; grid-template-columns:repeat(4,1fr); position:relative; margin-top:70px; }
.process-steps::before { content:''; position:absolute; top:32px; left:10%; right:10%; height:1px; background:linear-gradient(to right,transparent,var(--orange) 20%,var(--orange) 80%,transparent); opacity:.25; }
.process-step { padding:0 22px; }
.step-dot { width:64px; height:64px; background:var(--navy); border:2px solid var(--orange); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:28px; font-family:'Cinzel',serif; font-size:20px; font-weight:700; color:var(--orange); position:relative; z-index:1; transition:background .3s,color .3s,box-shadow .3s; }
.process-step:hover .step-dot { background:var(--orange); color:var(--white); box-shadow:0 0 30px rgba(255,107,53,.4); }
.step-title { font-family:'DM Sans',sans-serif; font-size:16px; font-weight:700; color:var(--white); margin-bottom:12px; letter-spacing:.2px; }
.step-desc { font-size:13.5px; color:var(--muted); line-height:1.7; font-weight:300; }

/* ── TRUST ── */
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:60px; }
.trust-card { background:var(--navy); padding:42px 34px; border-left:3px solid transparent; transition:border-color .3s,background .3s; }
.trust-card:hover { border-left-color:var(--orange); background:var(--navy3); }
.trust-stars { color:var(--gold); font-size:14px; margin-bottom:18px; letter-spacing:2px; }
.trust-quote { font-size:15px; color:rgba(245,240,232,.75); line-height:1.8; font-weight:300; font-style:italic; margin-bottom:28px; }
.trust-author { font-size:13px; color:var(--orange); font-weight:600; letter-spacing:1px; }
.trust-role { font-size:12px; color:var(--muted); margin-top:3px; }
.trust-disclaimer { font-size:11px; color:var(--muted); text-align:center; margin-top:20px; opacity:.65; }

/* ── PRICING ── */
.pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:56px; }
.pricing-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.pricing-card { background:rgba(13,31,56,.7); border:1px solid rgba(232,200,74,.15); border-radius:4px; padding:42px 32px; position:relative; transition:border-color .3s,transform .3s,box-shadow .3s; display:flex; flex-direction:column; }
.pricing-card:hover { border-color:rgba(232,200,74,.45); transform:translateY(-6px); box-shadow:0 24px 50px rgba(0,0,0,.35); }
.pricing-card.featured { border-color:var(--gold); background:rgba(232,200,74,.07); }
.pricing-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--gold); color:var(--navy); font-family:'Cinzel',serif; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 16px; border-radius:2px; white-space:nowrap; }
.pricing-tier { font-family:'Cinzel',serif; font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.pricing-price { font-family:'Cinzel',serif; font-size:clamp(28px,3vw,42px); font-weight:900; color:var(--white); line-height:1; }
.pricing-price span { font-size:16px; font-weight:400; color:var(--muted); }
.pricing-price .suffix { font-size:14px; font-weight:400; color:var(--muted); }
.pricing-tagline { font-size:13px; color:var(--muted); margin-top:8px; margin-bottom:24px; line-height:1.6; }
.pricing-divider { border:none; border-top:1px solid rgba(255,255,255,.08); margin-bottom:24px; }
.pricing-features { list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.pricing-features li { font-size:13.5px; color:rgba(245,240,232,.8); display:flex; align-items:flex-start; gap:10px; line-height:1.5; }
.pricing-features li::before { content:'✓'; color:var(--gold); font-weight:700; flex-shrink:0; margin-top:2px; }
.pricing-cta { display:block; text-align:center; padding:13px 24px; background:transparent; border:1.5px solid rgba(255,107,53,.5); color:var(--white); font-size:13px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; border-radius:999px; transition:background .2s,border-color .2s,color .2s; cursor:pointer; margin-top:auto; }
.pricing-cta:hover { background:var(--orange); border-color:var(--orange); color:#fff; }
.pricing-card.featured .pricing-cta { background:var(--orange); border-color:var(--orange); color:#fff; }
.pricing-card.featured .pricing-cta:hover { background:var(--orange2); }
.pricing-note { text-align:center; margin-top:36px; font-size:13px; color:var(--muted); }
.pricing-fineprint { font-size:11px; color:var(--muted); text-align:center; margin-top:10px; }
.addon-box { background:rgba(255,255,255,.04); border:1px solid rgba(232,200,74,.2); border-radius:3px; padding:16px 16px 14px; margin-bottom:20px; }
.addon-label { font-family:'Cinzel',serif; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
.addon-subtitle { font-size:11.5px; color:var(--muted); margin-bottom:12px; line-height:1.5; }
.addon-select { width:100%; background:rgba(10,22,40,.85); border:1px solid rgba(232,200,74,.25); color:var(--white); font-family:'DM Sans',sans-serif; font-size:12px; padding:8px 10px; border-radius:2px; outline:none; appearance:none; -webkit-appearance:none; cursor:pointer; }
.addon-select option { background:#0A1628; color:var(--white); }
.addon-pricing { display:none; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.addon-pricing.visible { display:flex; }
.addon-original { font-size:12px; color:var(--muted); text-decoration:line-through; }
.addon-discounted { font-family:'Cinzel',serif; font-size:15px; font-weight:700; color:var(--gold); }
.addon-badge { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; background:rgba(232,200,74,.15); color:var(--gold); padding:2px 8px; border-radius:2px; }

/* ── FAQ ── */
.faq-inner { max-width:780px; margin:0 auto; }
.faq-list { margin-top:48px; display:flex; flex-direction:column; gap:2px; }
.faq-item { border-top:1px solid rgba(255,255,255,.08); }
.faq-item:last-child { border-bottom:1px solid rgba(255,255,255,.08); }
details.faq-item summary { display:flex; justify-content:space-between; align-items:center; padding:22px 0; cursor:pointer; list-style:none; }
details.faq-item summary::-webkit-details-marker { display:none; }
.faq-q { font-family:'DM Sans',sans-serif; font-size:15.5px; font-weight:600; color:var(--white); letter-spacing:.2px; line-height:1.45; padding-right:20px; }
.faq-icon { flex-shrink:0; width:24px; height:24px; border-radius:50%; border:1.5px solid rgba(255,107,53,.5); display:flex; align-items:center; justify-content:center; color:var(--orange); font-size:18px; line-height:1; font-weight:300; transition:transform .25s,background .25s,color .25s; }
details.faq-item[open] .faq-icon { transform:rotate(45deg); background:var(--orange); color:#fff; }
.faq-answer { font-size:14.5px; color:rgba(245,240,232,.7); line-height:1.85; padding:4px 0 22px; max-width:680px; }

/* ── CTA / CONTACT ── */
#cta { background:linear-gradient(135deg,#0f1e35 0%,#1a0d00 100%); text-align:center; overflow:hidden; }
#cta::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(255,107,53,.13) 0%,transparent 65%); pointer-events:none; }
#cta > * { position:relative; }
.cta-title { font-family:'Cinzel',serif; font-size:clamp(36px,5.4vw,72px); font-weight:900; line-height:1.05; color:var(--white); margin-bottom:22px; }
.cta-title em { font-style:normal; color:var(--orange); }
.cta-sub { font-size:17px; color:rgba(245,240,232,.6); font-weight:300; margin:0 auto 54px; max-width:540px; line-height:1.75; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:3px; max-width:620px; margin:0 auto 42px; }
.contact-card { background:rgba(255,107,53,.06); border:1px solid rgba(255,107,53,.12); padding:28px 24px; text-align:left; transition:border-color .3s; }
.contact-card:hover { border-color:rgba(255,107,53,.35); }
.contact-name { font-family:'Cinzel',serif; font-size:14px; font-weight:700; color:var(--white); letter-spacing:1px; margin-bottom:12px; }
.contact-name span { color:var(--orange); font-weight:400; }
.contact-detail { display:flex; align-items:center; gap:10px; font-size:13px; color:rgba(245,240,232,.65); margin-bottom:8px; font-weight:300; }
.contact-detail a { color:rgba(245,240,232,.65); text-decoration:none; transition:color .2s; }
.contact-detail a:hover { color:var(--orange); }
.contact-icon { color:var(--orange); font-size:13px; flex-shrink:0; }
.cta-steps { display:flex; justify-content:center; max-width:700px; margin:0 auto 46px; flex-wrap:wrap; }
.cta-step { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 24px; position:relative; flex:1; min-width:160px; }
.cta-step:not(:last-child)::after { content:'→'; position:absolute; right:-6px; top:18px; font-size:18px; color:rgba(255,107,53,.4); }
.cta-step-num { width:40px; height:40px; border:1.5px solid rgba(255,107,53,.5); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Cinzel',serif; font-size:13px; font-weight:700; color:var(--orange); margin-bottom:12px; }
.cta-step-title { font-family:'Cinzel',serif; font-size:12px; font-weight:600; color:var(--white); letter-spacing:.5px; margin-bottom:6px; }
.cta-step-label { font-size:13px; color:rgba(245,240,232,.7); line-height:1.5; font-weight:300; }
.cta-btns { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:40px; }
.cta-or { text-align:center; margin-bottom:26px; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.cta-contact { font-size:13px; color:var(--muted); letter-spacing:1px; }
.cta-contact a { color:var(--orange); text-decoration:none; }
.cta-contact a:hover { text-decoration:underline; }

/* Contact form */
.contact-form-wrap { background:rgba(13,31,56,.7); border:1px solid rgba(232,200,74,.2); border-radius:4px; padding:36px 32px; margin:0 auto 36px; max-width:580px; text-align:left; }
.contact-form-title { font-family:'Cinzel',serif; font-size:14px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); margin-bottom:22px; text-align:center; }
.contact-form { display:flex; flex-direction:column; gap:14px; }
.contact-form input,.contact-form select,.contact-form textarea { background:rgba(10,22,40,.8); border:1px solid rgba(232,200,74,.2); color:var(--white); font-family:'DM Sans',sans-serif; font-size:13.5px; padding:12px 14px; border-radius:2px; outline:none; width:100%; transition:border-color .2s,box-shadow .2s; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:rgba(232,200,74,.55); box-shadow:0 0 0 3px rgba(232,200,74,.08); }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:rgba(245,240,232,.3); }
.contact-form select option { background:#0A1628; }
.contact-form textarea { resize:vertical; min-height:96px; }
.contact-form-btn { padding:15px 24px; background:linear-gradient(135deg,var(--orange),var(--orange2)); border:none; color:#fff; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; border-radius:999px; cursor:pointer; box-shadow:0 6px 18px rgba(255,107,53,.25); transition:background .2s,transform .15s,box-shadow .2s; width:100%; }
.contact-form-btn:hover { background:var(--orange2); transform:translateY(-1px); }
.contact-form-note { font-size:11px; color:var(--muted); text-align:center; margin-top:4px; }

/* ── CTA BANNER (subpages) ── */
.cta-banner { background:linear-gradient(135deg,#0f1e35 0%,#1a0d00 100%); border:1px solid var(--line); border-radius:6px; padding:70px 48px; text-align:center; position:relative; overflow:hidden; }
.cta-banner::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 120%,rgba(255,107,53,.2),transparent 60%); pointer-events:none; }
.cta-banner > * { position:relative; }
.cta-banner h2 { font-family:'Cinzel',serif; font-size:clamp(26px,3.4vw,46px); font-weight:900; line-height:1.1; margin-bottom:14px; }
.cta-banner h2 em { font-style:normal; color:var(--orange); }
.cta-banner p { color:rgba(245,240,232,.62); font-weight:300; max-width:520px; margin:0 auto 34px; }
.cta-banner .cta-btns { margin-bottom:0; }

/* ── FOOTER ── */
footer { background:var(--ink); padding:80px 48px 40px; border-top:1px solid rgba(255,107,53,.1); }
.footer-grid { max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:48px; padding-bottom:56px; border-bottom:1px solid var(--line-soft); }
.footer-brand img { height:64px; width:64px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(255,107,53,.4)); margin-bottom:16px; }
.footer-logo-text { font-family:'Cinzel',serif; font-size:17px; font-weight:900; letter-spacing:3px; }
.footer-tagline { font-size:12.5px; color:var(--muted); margin-top:10px; line-height:1.7; max-width:280px; font-weight:300; }
.footer-social { display:flex; gap:18px; margin-top:20px; }
.footer-social a { color:var(--muted); transition:color .25s,transform .25s; display:flex; }
.footer-social a:hover { color:var(--orange); transform:translateY(-2px); }
.footer-h { font-family:'Cinzel',serif; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer-col a { font-size:13px; color:var(--muted); text-decoration:none; transition:color .2s; }
.footer-col a:hover { color:var(--white); }
.footer-col .fc-detail { font-size:13px; color:var(--muted); line-height:1.7; }
.footer-col .fc-detail a { color:rgba(245,240,232,.75); }
.footer-copy { font-size:11px; color:rgba(122,138,154,.5); margin-top:28px; text-align:center; }

/* ── WHATSAPP FLOAT ── */
.whatsapp-float { position:fixed; bottom:30px; right:30px; z-index:900; }
.whatsapp-float a { display:flex; align-items:center; gap:10px; background:#25D366; color:#fff; padding:13px 20px; border-radius:50px; text-decoration:none; font-size:14px; font-weight:600; box-shadow:0 4px 20px rgba(37,211,102,.35); transition:transform .2s,box-shadow .2s; white-space:nowrap; cursor:pointer; animation:waPulse 2.5s infinite; }
.whatsapp-float a:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(37,211,102,.5); }
@keyframes waPulse { 0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.5);} 50%{box-shadow:0 0 0 14px rgba(37,211,102,0);} }

/* ── COOKIE BANNER ── */
.cookie-banner { position:fixed; bottom:0; left:0; right:0; z-index:950; background:var(--navy2); border-top:1px solid rgba(255,107,53,.2); padding:14px 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.cookie-banner p { font-size:12px; color:rgba(245,240,232,.65); font-weight:300; line-height:1.5; }
.cookie-banner a { color:var(--orange); text-decoration:none; }
.cookie-banner button { background:var(--orange); color:#fff; border:none; padding:8px 22px; font-family:'DM Sans',sans-serif; font-size:12px; font-weight:600; letter-spacing:1px; border-radius:2px; cursor:pointer; transition:background .2s; flex-shrink:0; }
.cookie-banner button:hover { background:var(--orange2); }

/* ── REVEAL ENGINE ── */
.reveal { opacity:0; transform:translateY(36px); filter:blur(6px); transition:opacity .85s var(--ease),transform .85s var(--ease),filter .85s var(--ease); transition-delay:calc(var(--d,0)*95ms); will-change:opacity,transform,filter; }
.reveal.visible { opacity:1; transform:translateY(0); filter:blur(0); }
.reveal-left { opacity:0; transform:translateX(-44px); transition:opacity .9s var(--ease),transform .9s var(--ease); transition-delay:calc(var(--d,0)*95ms); }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(44px); transition:opacity .9s var(--ease),transform .9s var(--ease); transition-delay:calc(var(--d,0)*95ms); }
.reveal-right.visible { opacity:1; transform:translateX(0); }
.reveal-scale { opacity:0; transform:scale(.92); transition:opacity .9s var(--ease),transform .9s var(--ease); transition-delay:calc(var(--d,0)*95ms); }
.reveal-scale.visible { opacity:1; transform:scale(1); }

/* ── SKIP NAV / A11Y ── */
.skip-nav { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; z-index:9999; }
.skip-nav:focus { position:fixed; top:0; left:0; width:auto; height:auto; padding:16px 24px; background:var(--orange); color:#fff; font-weight:600; font-size:14px; z-index:10000; text-decoration:none; }
a:focus-visible,button:focus-visible { outline:2.5px solid var(--orange); outline-offset:3px; border-radius:2px; }

/* ── KEYFRAMES ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(28px);} to{opacity:1;transform:translateY(0);} }
@keyframes riseUp { to{transform:translateY(0);} }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes scrollLine { 0%{left:-100%;} 100%{left:200%;} }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1100px) {
  .about-grid { grid-template-columns:1fr; gap:44px; }
  .ai-wrap { width:100%; height:460px; transform:none; margin:0 auto; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .pricing-grid { grid-template-columns:repeat(2,1fr); }
  .svc-detail { grid-template-columns:1fr; gap:36px; padding:70px 0; }
  .svc-detail.flip .svc-copy { order:0; }
  .svc-visual { min-height:280px; }
  .svc-visual-demo { max-width:620px; margin:0 auto; width:100%; }
  .gear-preview-shell { grid-template-columns:1fr; gap:36px; }
  .gear-preview-copy { max-width:720px; }
  .gear-preview-shell .svc-visual-demo { margin:0 auto; max-width:720px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .work-feature { grid-column:span 2; grid-template-columns:1fr; }
}
@media (max-width:900px) {
  nav { padding:12px 24px; }
  .nav-links { display:none; }
  .nav-burger { display:flex; }
  section { padding:96px 28px; }
  .page-hero { padding:150px 28px 56px; }
  .hero-content { padding:130px 28px 90px; }
  .hero-scroll-hint { left:28px; }
  .process-steps { grid-template-columns:repeat(2,1fr); gap:44px 20px; }
  .process-steps::before { display:none; }
  .trust-grid { grid-template-columns:repeat(2,1fr); }
  .about-stats { grid-template-columns:repeat(2,1fr); }
  .results-grid { grid-template-columns:1fr; }
  footer { padding:64px 28px 32px; }
}
@media (max-width:768px) {
  .hero-h1 { font-size:clamp(30px,8.4vw,50px); }
  .hero-actions { flex-direction:column; align-items:flex-start; gap:16px; }
  .services-grid { grid-template-columns:1fr; }
  .pricing-grid,.pricing-grid.cols-3 { grid-template-columns:1fr; max-width:440px; margin-left:auto; margin-right:auto; }
  .contact-grid { grid-template-columns:1fr; }
  .cta-btns { flex-direction:column; align-items:center; }
  .cta-step:not(:last-child)::after { display:none; }
  .cta-steps { gap:24px; }
  .portfolio-grid { grid-template-columns:1fr; }
  .work-feature { grid-column:span 1; }
  .trust-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:36px; }
  .whatsapp-float { bottom:20px; right:20px; }
  .whatsapp-float a span { display:none; }
  .whatsapp-float a { padding:14px; }
  .merch-upload { align-items:flex-start; flex-direction:column; }
  .merch-upload input { max-width:100%; width:100%; }
  .merch-demo-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .merch-download-row { grid-template-columns:1fr; }
  .gear-preview-page { padding-top:56px; padding-bottom:72px; }
  .gear-preview-shell { padding-top:22px; }
}
@media (max-width:480px) {
  section { padding:72px 18px; }
  .page-hero { padding:130px 18px 48px; }
  .hero-content { padding:120px 18px 80px; }
  .hero-scroll-hint { left:18px; }
  .section-title { font-size:clamp(28px,8vw,44px); }
  .stat-number { font-size:30px; }
  .stat-box { padding:20px 16px; }
  .ai-wrap { height:340px; }
  #hero-pin { height:220vh; }
  nav { padding:10px 16px; }
  .nav-logo img { height:46px; width:46px; }
  .nav-logo-text { font-size:13px; letter-spacing:1.5px; }
  .merch-demo { padding:16px; }
  .merch-demo-head { flex-direction:column; gap:10px; }
  .merch-demo-toolbar { gap:6px; }
  .merch-item-btn,.merch-secondary-btn,.merch-download-btn { font-size:10px; letter-spacing:1px; }
  .merch-range { grid-template-columns:1fr; gap:8px; }
  .gear-preview-shell .merch-demo { padding:16px; }
  footer { padding:52px 18px 28px; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  html { scroll-behavior:auto; }
  #hero-pin { height:auto; }
  #hero { position:relative; }
  .hero-stage-center { display:none; }
  .marquee-track { animation:none; }
  .reveal,.reveal-left,.reveal-right,.reveal-scale { opacity:1; transform:none; filter:none; }
  .hero-h1 .word { transform:none; animation:none; }
  .hero-badge,.hero-slogan,.hero-sub,.hero-service-rail,.hero-actions,.hero-scroll-hint { opacity:1; animation:none; }
  .scroll-line::after { animation:none; }
  .whatsapp-float a { animation:none; }
}


/* SEARCH EXPANSION PAGES */
.search-page-hero{min-height:560px;display:flex;align-items:flex-end}
.search-content{padding-top:84px}
.answer-box{max-width:880px;padding:28px 30px;border-left:3px solid var(--orange);background:rgba(255,107,53,.06);margin-bottom:48px}
.answer-box strong{display:block;color:var(--gold);font-family:'Cinzel',serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.answer-box p{color:rgba(245,240,232,.82);line-height:1.8}
.search-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.search-card{padding:30px;border:1px solid var(--line);background:rgba(13,31,56,.62)}
.search-card h2{font-family:'Cinzel',serif;font-size:20px;line-height:1.3;color:var(--white);margin-bottom:14px}
.search-card p{color:rgba(245,240,232,.68);line-height:1.75;font-weight:300}
.related-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
@media(max-width:900px){.search-card-grid{grid-template-columns:1fr}.search-page-hero{min-height:500px}}

.footer-discovery{max-width:var(--container);margin:28px auto 0;display:flex;justify-content:center;gap:10px 18px;flex-wrap:wrap}
.footer-discovery a{color:var(--muted);font-size:12px;text-decoration:none}.footer-discovery a:hover{color:var(--orange)}

.source-box{margin-top:40px;padding:28px 30px;border:1px solid var(--line);background:rgba(232,200,74,.05)}
.source-box h2{font-family:'Cinzel',serif;font-size:18px;color:var(--gold);margin-bottom:14px}.source-box ul{padding-left:20px}.source-box li{color:rgba(245,240,232,.72);line-height:1.7;margin:8px 0}.source-box a{color:var(--orange)}

.btn-secondary{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 22px;border:1px solid var(--orange);background:transparent;color:var(--white);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;transition:background .2s ease,color .2s ease,transform .2s ease}
.btn-secondary:hover{background:var(--orange);color:var(--navy);transform:translateY(-1px)}.btn-secondary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.form-label{display:block;margin:4px 0 7px;color:var(--white);font-size:13px;font-weight:600}.pricing-addons{max-width:760px;margin:32px auto 0;padding:0;list-style:none;border:1px solid var(--line)}.pricing-addons li{display:flex;justify-content:space-between;gap:20px;padding:16px 18px;border-bottom:1px solid var(--line);color:rgba(245,240,232,.8)}.pricing-addons li:last-child{border-bottom:0}.pricing-addons strong{color:var(--gold);white-space:nowrap}
@media(max-width:600px){.hero-actions .btn-secondary,.cta-btns .btn-secondary,.related-actions .btn-secondary{width:100%}.pricing-addons li{align-items:flex-start;flex-direction:column;gap:6px}}


/* ACCESSIBILITY CONTRAST CONTRACTS */
.marquee-item{color:var(--navy)}
.marquee-item strong{color:var(--navy)}
.marquee-sep{color:var(--navy)}
.stat-label{color:#8495A5}
.pricing-card.featured .pricing-cta{color:var(--navy)}
.pricing-card.featured .pricing-cta:hover{color:var(--navy)}
.footer-copy{color:#8495A5}
.footer-copy a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.pricing-note a{color:inherit!important;text-decoration:underline!important;text-underline-offset:3px}