/* Comediq Media v3. Palette: change this one line to rebrand. */
:root{--bg:#f7f7f7;--ink:#050505;--mute:#313135;--acc:#ffd23f;--accdeep:#e6b800;--ring:#050505;--dark:#050505;--card:#ffffff;--line:#e3e3e6;--e:cubic-bezier(.16,1,.3,1);--e2:cubic-bezier(.645,.045,.355,1)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:500 16px/1.5 'Archivo',system-ui,sans-serif;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{text-transform:uppercase;font-weight:800;letter-spacing:-.06em;line-height:.95}
h1{font-size:clamp(2.6rem,8.5vw,7.5rem);font-weight:800}
h2{font-size:clamp(1.9rem,5vw,4.2rem)}
b{color:inherit}
main{max-width:1600px;margin:0 auto}
section{padding:clamp(60px,9vw,130px) clamp(16px,4vw,56px)}

/* floating pill nav */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;display:flex;gap:6px;align-items:center;padding:6px;background:rgba(5,5,5,.88);backdrop-filter:blur(12px);border-radius:99px;border:3px solid var(--ink);transition:transform .5s var(--e)}
.nav.hide{transform:translate(-50%,-140%)}
.logo{font-family:'Pixelify Sans',monospace;font-weight:700;font-size:1.25rem;color:#fff;padding:6px 16px;letter-spacing:0}
.logo span{color:var(--acc)}
footer .logo{color:var(--ink);padding:0}
.menu-btn{background:#19191b;color:#fff;border:0;border-radius:99px;padding:10px 18px;font:600 15px 'Archivo';cursor:pointer;display:flex;gap:10px;align-items:center}
.menu-btn i{width:16px;height:10px;border-block:2px solid #fff;display:block;position:relative}
.menu-btn i::after{content:'';position:absolute;left:0;right:4px;top:2px;height:2px;background:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;background:var(--acc);color:var(--ink);font-weight:700;padding:12px 24px;border-radius:99px;border:3px solid var(--ring);box-shadow:0 4px 0 var(--ring);transition:transform .35s var(--e),box-shadow .35s var(--e);cursor:pointer;font-family:inherit;font-size:15px;will-change:transform}
.btn:hover{transform:translateY(3px);box-shadow:0 1px 0 var(--ring)}
.btn-lg{font-size:1.1rem;padding:18px 34px}
.nav .btn{white-space:nowrap;padding:10px 18px;font-size:14px}

/* full-screen drawer: visibility hidden kills bleed-through, not just opacity */
.drawer{position:fixed;inset:0;z-index:55;background:var(--dark);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:0 8vw;gap:10px;clip-path:circle(0 at 50% 0);visibility:hidden;transition:clip-path .8s var(--e2),visibility 0s .8s}
.drawer.open{clip-path:circle(150% at 50% 0);visibility:visible;transition:clip-path .8s var(--e2)}
.drawer a{font-size:clamp(2.2rem,8vw,5rem);font-weight:800;text-transform:uppercase;letter-spacing:-.05em;color:#fff}
.drawer a:hover{color:var(--acc)}

/* hero */
.hero{text-align:center;padding-top:150px;overflow:hidden}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.split .w>span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--e)}
.split.in .w>span{transform:none}
.lede{color:var(--mute);max-width:560px;margin:26px auto 30px;font-size:1.1rem}
/* Three equal phone mockups in a row: the outer two tilt outward about 7deg (set in JS from
   data-rot, combined with scroll parallax) and sit a touch lower, the middle one stays
   upright and stacks in front (higher z-index), so the group reads as a loose fan of real
   footage rather than one hero device with side cards. Width/height are both spelled out in
   px (via clamp) instead of CSS aspect-ratio, which was unreliable here previously. */
.stage{display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,3vw,32px);margin-top:50px}
.device{position:relative;width:clamp(90px,19vw,280px);height:clamp(190px,40.1vw,591px);background:#000;border:8px solid #0b0b0c;border-radius:42px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.28);flex:none;will-change:transform}
.device video{width:100%;height:100%;object-fit:cover;display:block}
.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:36%;height:22px;background:#0b0b0c;border-radius:0 0 16px 16px;z-index:3}
.device.ph:not(.mid){margin-bottom:clamp(0px,3vw,34px);z-index:1}
.device.ph.mid{z-index:2}

/* brand wall */
.wall h2{max-width:900px;margin:0 auto 50px;text-align:center}
.wall-note{text-align:center;color:var(--mute);font:500 13px 'JetBrains Mono',monospace;margin-top:26px;opacity:.8}
.rows{display:flex;flex-direction:column;gap:14px}
.marquee{overflow:hidden;mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee:hover .track{animation-play-state:paused}
.track{display:flex;gap:16px;width:max-content;animation:slide 140s linear infinite}
.marquee.rev .track{animation-direction:reverse}
@keyframes slide{to{transform:translateX(-50%)}}
.pill{display:flex;align-items:center;gap:14px;padding:10px 30px 10px 10px;background:var(--card);border:3px solid var(--ink);border-radius:99px;box-shadow:0 4px 0 var(--ink);white-space:nowrap}
.pill i{width:64px;height:64px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;font:700 1.6rem 'Pixelify Sans',monospace;font-style:normal;color:var(--mute);overflow:hidden;flex:none}
.pill i.dk{background:var(--ink);border-color:var(--ink)}
.pill i img{width:76%;height:76%;object-fit:contain}
.pill strong{font-size:1.4rem;font-weight:800;text-transform:uppercase;letter-spacing:-.04em}

/* stats: empty until real numbers exist */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:0}
.stat{background:var(--dark);color:#fff;border-radius:22px;padding:30px;min-height:240px;display:flex;flex-direction:column;justify-content:space-between}
.stat h3{font-family:'Pixelify Sans';font-size:clamp(3rem,6vw,5.5rem);color:var(--acc);letter-spacing:-.02em;text-transform:none}
.stat p{color:#b9b9c0}

/* process: dark stage + pinned stacking cards */
.process{padding:16px}
.dark{background:var(--dark);border-radius:28px;padding:clamp(50px,8vw,110px) clamp(16px,5vw,70px) 0;text-align:center;color:#fff}
.pix{font-family:'Pixelify Sans',monospace;font-weight:700;letter-spacing:0;line-height:1.05;font-size:clamp(2.4rem,7vw,6rem)}
.pix b{color:var(--acc)}
.dlede{color:#b9b9c0;margin:20px auto 60px;max-width:520px}
.stack{max-width:760px;margin:auto;padding-bottom:30px}
.scard{position:sticky;top:90px;background:var(--bg);color:var(--ink);border-radius:20px;padding:clamp(26px,4vw,48px);min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;margin-bottom:26px;border:3px solid var(--ink);transition:transform .4s var(--e),opacity .4s var(--e)}
.scard:nth-child(2){top:110px}
.scard:nth-child(3){top:130px}
.scard:nth-child(4){top:150px}
.scard small{font:500 13px 'JetBrains Mono',monospace;color:var(--mute);letter-spacing:.1em}
.scard h3{font-size:clamp(1.8rem,4vw,3rem)}
.scard p{max-width:480px;color:var(--mute)}

/* three-beat section + gallery cards share this card pattern */
.beats{text-align:center}
.fsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:50px;text-align:left}
.card{background:var(--card);border:3px solid var(--ink);border-radius:22px;padding:30px;box-shadow:0 5px 0 var(--ink);transition:transform .4s var(--e),box-shadow .4s var(--e)}
.card:hover{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.card i{font:normal 500 13px 'JetBrains Mono';color:var(--mute)}
.card h3{font-size:2.2rem;margin:50px 0 10px}
.card p{color:var(--mute)}

/* video gallery */
.gallery{padding-inline:0;overflow:hidden}
.gallery h2{padding-inline:clamp(16px,4vw,56px);margin-bottom:40px;text-align:center}
.vtrack{display:flex;gap:14px;width:max-content;animation:slide 60s linear infinite;padding-left:14px}
.vrow:hover .vtrack{animation-play-state:paused}
.tile{width:clamp(170px,19vw,260px);aspect-ratio:9/16;border-radius:20px;overflow:hidden;border:3px solid var(--ink);background:#111;cursor:pointer;transition:transform .5s var(--e)}
.tile:hover{transform:translateY(-10px) rotate(-1.5deg)}
.tile video{width:100%;height:100%;object-fit:cover;display:block}

/* faq */
.faq{max-width:900px;margin:auto}
.faq h2{margin-bottom:30px}
details{border-bottom:3px solid var(--ink);padding:22px 0}
summary{cursor:pointer;font-size:1.3rem;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::after{content:'+';font-size:1.6rem;line-height:1;transition:transform .3s var(--e)}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--mute);margin-top:12px}

/* closing cta */
.cta{padding:16px}
.ctabox{background:var(--dark);color:#fff;border-radius:28px;text-align:center;padding:clamp(80px,14vw,200px) 20px;display:flex;flex-direction:column;align-items:center;gap:40px}
.ctabox h2{font-size:clamp(2.4rem,7vw,6rem);max-width:900px}
.ctabox b{color:var(--acc)}
.ctabox .btn{border-color:#fff;box-shadow:0 4px 0 #fff}

footer{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;padding:40px clamp(16px,4vw,56px);color:var(--mute);max-width:1600px;margin:0 auto}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--e),transform .9s var(--e)}
.reveal.in{opacity:1;transform:none}

@media(max-width:820px){
  .stats,.fsteps{grid-template-columns:1fr}
  .stat{min-height:160px}
  .scard{top:80px!important}
}
@media(max-width:420px){
  .nav{gap:4px;width:calc(100vw - 24px);justify-content:space-between}
  .logo{padding:6px 10px;font-size:1.05rem}
  .menu-btn{padding:9px 12px}
  .nav .btn{padding:9px 12px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.split .w>span{opacity:1;transform:none}
}