:root {
  --bg: #07070a;
  --bg2: #0e0f14;
  --text: #f2efe9;
  --dim: rgba(242, 239, 233, 0.55);
  --orange: #ff7a1a;
  --orange2: #ffb347;
  --glass: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.12);
  --grad: linear-gradient(135deg, #ffb347 0%, #ff7a1a 55%, #ff4d00 100%);
  --head: "Poppins", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body { background: var(--bg); color: var(--text); font-family: var(--head); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.mono { font-family: var(--mono); letter-spacing: 0.14em; font-size: 12px; }
.dim { color: var(--dim); }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
.eyebrow { color: var(--orange2); margin-bottom: 18px; }
.h2 { font-size: clamp(36px, 6vw, 84px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; }
.glass { background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 30px 80px rgba(0,0,0,0.4); }
section { position: relative; }
.section-head { padding: 0 var(--gutter); margin-bottom: clamp(32px, 5vw, 64px); }
.section-head.row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border-radius: 999px; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; transition: transform .25s, box-shadow .25s, background .25s; white-space: nowrap; }
.btn-primary { background: var(--grad); color: #140700; box-shadow: 0 10px 40px rgba(255,122,26,0.35); }
.btn-primary:hover { box-shadow: 0 14px 60px rgba(255,122,26,0.6); }
.btn-glass { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(12px); }
.btn-glass:hover { background: rgba(255,255,255,0.16); }
.btn.wide { width: 100%; }

/* loader */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
.loader-logo { width: min(320px, 70vw); opacity: 0.95; }
.loader-bar { width: min(320px, 70vw); height: 3px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 0; background: var(--grad); }
.loader-count { color: var(--dim); }

/* cursor */
.cursor { position: fixed; z-index: 90; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); pointer-events: none; mix-blend-mode: difference; transform: translate(-50%, -50%); transition: width .25s, height .25s, background .25s; left: -50px; top: -50px; }
.cursor.big { width: 64px; height: 64px; background: #fff; }
@media (hover: none) { .cursor { display: none; } }

/* nav */
.nav { position: fixed; z-index: 50; top: 16px; left: var(--gutter); right: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 12px 10px 22px; border-radius: 999px; background: rgba(10,10,14,0.45); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); transition: transform .4s; }
.nav { opacity: 0; transform: translateY(-80px); transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .5s; }
.nav.in { opacity: 1; transform: none; }
.nav.in.hide { transform: translateY(-130%); }
.nav-logo img { height: 34px; width: auto; }
.nav-links { display: flex; gap: 30px; font-weight: 500; font-size: 14px; }
.nav-links a { opacity: 0.8; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; color: var(--orange2); }
.nav-cta { padding: 12px 22px; font-size: 14px; }
.nav-burger { display: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.1); flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.nav-burger span { width: 18px; height: 2px; background: #fff; transition: transform .3s; }
.mobile-menu { position: fixed; inset: 0; z-index: 45; background: rgba(7,7,10,0.96); backdrop-filter: blur(20px); display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter); gap: 18px; font-size: 40px; font-weight: 800; letter-spacing: -0.03em; opacity: 0; pointer-events: none; transition: opacity .35s; }
.mobile-menu.open { opacity: 1; pointer-events: auto; }
@media (max-width: 900px) { .nav-links, .nav-cta { display: none; } .nav-burger { display: flex; } }

/* hero */
.hero { height: 100svh; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; }
.hero-media, .hero-media > * { position: absolute; inset: 0; }
.hero-poster { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.hero-video { overflow: hidden; }
.hero-video iframe { position: absolute; top: 50%; left: 50%; width: 177.78vh; height: 56.25vw; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%) scale(1.15); pointer-events: none; }
.hero-shade { background: linear-gradient(180deg, rgba(7,7,10,0.45) 0%, rgba(7,7,10,0.15) 35%, rgba(7,7,10,0.65) 75%, var(--bg) 100%); }
.hero-content { position: relative; z-index: 2; padding: 0 var(--gutter) clamp(90px, 12vh, 140px); max-width: 1200px; }
.hero-title { font-size: clamp(56px, 11vw, 168px); font-weight: 900; letter-spacing: -0.055em; line-height: 0.88; margin-bottom: 26px; }
.hero-title .line { display: block; overflow: hidden; padding: 0 0.04em 0.2em; margin-bottom: -0.14em; }
.hero-title .word { display: inline-block; padding: 0.02em 0.05em 0.3em 0; margin-bottom: -0.3em; }
.hero-sub { font-size: clamp(16px, 1.6vw, 20px); color: rgba(242,239,233,0.8); max-width: 560px; line-height: 1.5; margin-bottom: 32px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-hud { position: absolute; z-index: 2; top: 100px; right: var(--gutter); text-align: right; display: flex; flex-direction: column; gap: 8px; color: rgba(255,255,255,0.75); }
.hero-hud span { color: #ff3b30; font-weight: 600; margin-right: 8px; }
.rec-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; animation: blink 1.2s infinite; vertical-align: middle; }
@keyframes blink { 50% { opacity: 0.15; } }
.scroll-cue { position: absolute; z-index: 2; bottom: 28px; right: var(--gutter); color: var(--dim); writing-mode: vertical-rl; }
.scroll-cue::after { content: ""; display: block; width: 1px; height: 46px; background: linear-gradient(var(--orange), transparent); margin: 12px auto 0; animation: drop 1.6s infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 700px) { .hero-hud { display: none; } }

/* marquee */
.marquee { padding: 40px 0 70px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.marquee-track { display: flex; gap: 34px; white-space: nowrap; font-size: clamp(22px, 3.2vw, 42px); font-family: var(--head); font-weight: 800; letter-spacing: -0.02em; width: max-content; animation: marq 38s linear infinite; }
.marquee-track b { color: var(--orange); font-weight: 400; }
@keyframes marq { to { transform: translateX(-50%); } }
.logos { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 64px); margin-top: 40px; flex-wrap: wrap; padding: 0 var(--gutter); }
.logos img { height: 28px; width: auto; opacity: 0.75; filter: grayscale(1) brightness(1.6); }
.logos img.invert { filter: invert(1) grayscale(1); }

/* services */
.services { padding: clamp(80px, 12vw, 160px) 0; }
.panels { display: flex; gap: 14px; height: clamp(520px, 72vh, 720px); padding: 0 var(--gutter); }
.panel { position: relative; flex: 1; border-radius: 34px; overflow: hidden; cursor: pointer; transition: flex .7s cubic-bezier(.22,1,.36,1); border: 1px solid var(--line); }
.panel.active { flex: 3.2; }
.panel-bg { position: absolute; inset: 0; background: var(--img) center/cover; transform: scale(1.06); transition: transform 1.2s cubic-bezier(.22,1,.36,1), filter .6s; filter: brightness(0.55) saturate(1.1); }
.panel.active .panel-bg { transform: scale(1); filter: brightness(0.7); }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(5,5,8,0.92) 100%); }
.panel-num { position: absolute; z-index: 2; top: 26px; left: 28px; color: var(--orange2); font-size: 14px; }
.panel-body { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 28px; }
.panel h3 { font-size: clamp(26px, 3vw, 44px); font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
.panel:not(.active) h3 { font-size: clamp(20px, 1.8vw, 26px); white-space: normal; line-height: 1.05; }
.panel p, .panel ul { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .7s, opacity .5s; }
.panel.active p, .panel.active ul { max-height: 320px; opacity: 1; }
.panel p { color: rgba(242,239,233,0.8); max-width: 520px; line-height: 1.5; margin-top: 10px; }
.panel ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.panel li { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); font-size: 11px; }
@media (max-width: 900px) { .panels { flex-direction: column; height: auto; } .panel { min-height: 110px; flex: none; } .panel.active { min-height: 460px; } .panel h3 { white-space: normal; } }

/* aerial */
.aerial { height: 400vh; }
.aerial-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.aerial-bg, .aerial-bg img, .aerial-shade { position: absolute; inset: 0; }
.aerial-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 1s, transform 6s linear; }
.aerial-bg img.on { opacity: 1; transform: scale(1); }
.aerial-shade { background: radial-gradient(ellipse at 70% 50%, transparent 20%, rgba(7,7,10,0.75) 80%), linear-gradient(90deg, rgba(7,7,10,0.85) 0%, rgba(7,7,10,0.2) 55%); }
.flight { position: absolute; inset: 0; width: 100%; height: 100%; }
.flight path { fill: none; stroke: rgba(255,179,71,0.85); stroke-width: 2.5; stroke-dasharray: 6 10; vector-effect: non-scaling-stroke; }
.drone { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; filter: drop-shadow(0 0 18px rgba(255,122,26,0.8)); }
.drone svg { width: 100%; height: 100%; animation: hover 1.6s ease-in-out infinite; }
@keyframes hover { 50% { transform: translateY(-5px); } }
.hud { position: absolute; top: clamp(90px, 14vh, 140px); right: var(--gutter); padding: 18px 22px; border-radius: 22px; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(10px); display: grid; gap: 8px; min-width: 210px; }
.hud-row { display: grid; grid-template-columns: 52px 1fr auto; align-items: baseline; gap: 8px; }
.hud-row span { color: var(--dim); }
.hud-row b { font-size: 22px; font-weight: 600; color: #fff; letter-spacing: 0.02em; text-align: right; }
.hud-row i { font-style: normal; color: var(--orange2); }
.hud-sat { color: var(--dim); font-size: 10px; margin-top: 4px; }
.aerial-steps { position: absolute; left: var(--gutter); bottom: clamp(70px, 12vh, 130px); width: min(520px, calc(100% - 2 * var(--gutter))); }
.step { position: absolute; bottom: 0; left: 0; right: 0; opacity: 0; transform: translateY(40px); transition: opacity .6s, transform .6s cubic-bezier(.22,1,.36,1); }
.step.on { opacity: 1; transform: none; }
.step-n { color: var(--orange2); }
.step h3 { font-size: clamp(34px, 5vw, 68px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin: 12px 0; }
.step p { color: rgba(242,239,233,0.8); line-height: 1.5; font-size: 17px; }
.aerial-steps .eyebrow { position: absolute; bottom: 230px; }
@media (max-width: 700px) { .hud { top: 80px; min-width: 0; padding: 12px 14px; } .hud-row b { font-size: 16px; } .aerial-steps .eyebrow { bottom: 250px; } }

/* work */
.work { padding: clamp(80px, 12vw, 160px) 0; }
.filters { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); }
.filters button { padding: 10px 16px; border-radius: 999px; font-size: 11px; letter-spacing: 0.14em; transition: background .3s, color .3s; }
.filters button.on { background: var(--grad); color: #140700; font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; grid-auto-flow: dense; gap: 12px; padding: 0 var(--gutter); }
.tile { position: relative; border-radius: 22px; overflow: hidden; cursor: zoom-in; background: var(--bg2); }
.tile.w2 { grid-column: span 2; }
.tile.h2 { grid-row: span 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22,1,.36,1), filter .5s; filter: brightness(0.85); }
.tile:hover img { transform: scale(1.07); filter: brightness(1); }
.tile .tag { position: absolute; left: 14px; bottom: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); font-size: 10px; opacity: 0; transform: translateY(8px); transition: .4s; }
.tile:hover .tag { opacity: 1; transform: none; }
.tile.hidden { display: none; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; } }

/* process */
.process { padding: clamp(80px, 12vw, 160px) 0; background: linear-gradient(180deg, var(--bg), var(--bg2) 50%, var(--bg)); }
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 40px var(--gutter) 0; }
.tl-line { position: absolute; top: 12px; left: var(--gutter); right: var(--gutter); height: 2px; background: var(--line); }
.tl-line span { display: block; height: 100%; width: 0; background: var(--grad); box-shadow: 0 0 20px var(--orange); }
.tl-step { position: relative; padding-top: 26px; }
.tl-step::before { content: ""; position: absolute; top: -34px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--orange); }
.tl-step span { color: var(--orange2); }
.tl-step h4 { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; margin: 10px 0; }
.tl-step p { color: var(--dim); line-height: 1.55; }
@media (max-width: 900px) { .timeline { grid-template-columns: 1fr 1fr; row-gap: 50px; } .tl-line { display: none; } .tl-step::before { top: 0; } .tl-step { padding-top: 30px; } }
@media (max-width: 520px) { .timeline { grid-template-columns: 1fr; } }

/* about */
.about { padding: clamp(80px, 12vw, 160px) var(--gutter); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.about-media { position: relative; border-radius: 34px; overflow: hidden; aspect-ratio: 4/5; }
.about-media img { width: 100%; height: 115%; object-fit: cover; }
.about-badge { position: absolute; left: 20px; bottom: 20px; padding: 12px 18px; border-radius: 999px; color: #fff; }
.about-copy > p { color: rgba(242,239,233,0.78); line-height: 1.65; font-size: 17px; margin: 24px 0 30px; }
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.member { border-radius: 24px; padding: 22px; }
.member h4 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.member span { color: var(--orange2); font-size: 10px; display: block; margin: 6px 0 12px; }
.member p { color: var(--dim); font-size: 14px; line-height: 1.55; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } .team { grid-template-columns: 1fr; } .about-media { aspect-ratio: 4/3; } }

/* contact */
.contact { padding: clamp(80px, 12vw, 160px) var(--gutter); overflow: hidden; }
.contact-bg { position: absolute; inset: 0; }
.contact-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.3) saturate(1.1); }
.contact-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, transparent 30%, transparent 70%, var(--bg) 100%); }
.contact-wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.contact-copy > p { color: rgba(242,239,233,0.8); font-size: 18px; margin: 20px 0 30px; }
.contact-lines { display: grid; gap: 14px; font-size: 13px; }
.contact-lines a:hover { color: var(--orange2); }
.form { border-radius: 30px; padding: clamp(22px, 3vw, 36px); display: grid; gap: 16px; }
.form label { display: grid; gap: 8px; }
.form label span { color: var(--dim); font-size: 10px; }
.form input, .form textarea { width: 100%; padding: 15px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.35); color: var(--text); font: 500 16px var(--head); outline: none; transition: border .25s, box-shadow .25s; resize: vertical; }
.form input:focus, .form textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,122,26,0.18); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); font-size: 10px; letter-spacing: 0.12em; transition: .25s; }
.chips button.on { background: var(--grad); color: #140700; border-color: transparent; font-weight: 600; }
.send-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-wa { background: #25d366; color: #06210f; box-shadow: 0 10px 40px rgba(37,211,102,0.3); }
@media (max-width: 520px) { .send-row { grid-template-columns: 1fr; } }
.form-note { color: var(--orange2); min-height: 14px; font-size: 11px; }
@media (max-width: 900px) { .contact-wrap { grid-template-columns: 1fr; } .row2 { grid-template-columns: 1fr; } }

/* footer */
.footer { padding: 60px var(--gutter) 40px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer img { height: 36px; width: auto; }
.socials { display: flex; gap: 22px; flex-wrap: wrap; }
.socials a:hover { color: var(--orange2); }

/* whatsapp float */
.wa-float { position: fixed; z-index: 40; right: 22px; bottom: 22px; width: 62px; height: 62px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 10px 30px rgba(37,211,102,0.45); }

/* modal */
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(4,4,6,0.92); backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .35s; padding: var(--gutter); }
.modal.open { opacity: 1; pointer-events: auto; }
.modal-inner { width: min(1200px, 100%); }
.modal-inner .ratio { position: relative; padding-top: 56.25%; border-radius: 22px; overflow: hidden; }
.modal-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.modal-inner img { width: 100%; max-height: 86vh; object-fit: contain; border-radius: 18px; }
.modal-x { position: absolute; top: 20px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.12); font-size: 18px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ===== v2 additions ===== */
.hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; filter: brightness(0.72); }
.panel.active .panel-vid.ready { opacity: 1; }
.aerial-bg video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1s, transform 6s linear; }
.aerial-bg video.on { opacity: 1; transform: scale(1); }

/* credentials */
.creds { padding: clamp(80px, 12vw, 160px) 0 clamp(40px, 6vw, 80px); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0 var(--gutter); }
.stat { border-radius: 28px; padding: 28px 24px; }
.stat b { display: block; font-size: clamp(44px, 5vw, 72px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.08em; }
.stat span { display: block; color: var(--text); margin: 12px 0 10px; font-size: 11px; }
.stat p { color: var(--dim); font-size: 14px; line-height: 1.5; }
.compliance { margin: 14px var(--gutter) 0; border-radius: 28px; padding: 22px 28px; display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); flex-wrap: wrap; }
.compliance > span { color: var(--orange2); }
.compliance div { display: flex; flex-direction: column; }
.compliance b { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; }
.compliance small { color: var(--dim); font-size: 12px; max-width: 220px; }
.compliance em { font-style: normal; color: var(--dim); font-size: 10px; margin-left: auto; }
@media (max-width: 1000px) { .stats { grid-template-columns: 1fr 1fr; } .compliance em { margin-left: 0; } }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr; } }

/* reels / phones */
.reels { padding: clamp(80px, 12vw, 160px) 0; overflow: hidden; }
.phones { display: flex; justify-content: center; align-items: center; gap: clamp(16px, 4vw, 56px); padding: 0 var(--gutter); perspective: 1400px; }
.phone { display: flex; flex-direction: column; align-items: center; gap: 18px; transform: rotateY(14deg) scale(0.9); transition: transform .8s cubic-bezier(.22,1,.36,1); }
.phone:last-child { transform: rotateY(-14deg) scale(0.9); }
.phone.mid { transform: translateY(-20px) scale(1.04); }
.phone:hover { transform: scale(1.06); }
.phone-screen { width: clamp(180px, 22vw, 290px); aspect-ratio: 9/19.5; border-radius: 44px; overflow: hidden; background: #000; border: 10px solid #1b1c22; box-shadow: 0 0 0 2px #3a3b44, 0 40px 90px rgba(0,0,0,0.6), 0 0 80px rgba(255,122,26,0.12); position: relative; }
.phone-screen::before { content: ""; position: absolute; z-index: 2; top: 10px; left: 50%; width: 34%; height: 22px; transform: translateX(-50%); background: #000; border-radius: 20px; }
.phone-screen video { width: 100%; height: 100%; object-fit: cover; }
.phone span { color: var(--dim); font-size: 10px; }
@media (max-width: 700px) { .phones { gap: 10px; } .phone, .phone:last-child { transform: none; } .phone.mid { transform: translateY(-14px); } .phone-screen { border-width: 6px; border-radius: 28px; } .phone-screen::before { height: 14px; top: 6px; } .phone span { display: none; } }

/* freelance */
.freelance { padding: clamp(60px, 10vw, 140px) var(--gutter); display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.fl-media { border-radius: 34px; overflow: hidden; aspect-ratio: 16/11; border: 1px solid var(--line); }
.fl-media video { width: 100%; height: 100%; object-fit: cover; }
.fl-copy > p { color: rgba(242,239,233,0.78); line-height: 1.65; font-size: 17px; margin: 22px 0 24px; }
.roles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.roles span { padding: 10px 14px; border-radius: 999px; background: rgba(255,122,26,0.1); border: 1px solid rgba(255,122,26,0.35); font-size: 10px; }
@media (max-width: 900px) { .freelance { grid-template-columns: 1fr; } }

/* video tiles in the grid */
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile .play-badge { position: absolute; top: 12px; right: 12px; padding: 5px 9px; border-radius: 999px; background: rgba(0,0,0,0.55); font-size: 9px; }

/* ===== drone cursor + trail (shown once a real mouse moves; touch never sees it) ===== */
html.has-mouse, html.has-mouse body, html.has-mouse a, html.has-mouse button, html.has-mouse .panel, html.has-mouse .tile { cursor: none; }
html.has-mouse input, html.has-mouse textarea { cursor: text; }
.cursor { display: none !important; }
.trail { position: fixed; inset: 0; z-index: 89; pointer-events: none; display: none; }
.dcursor { position: fixed; z-index: 90; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none; filter: drop-shadow(0 0 10px rgba(255,122,26,0.7)); transition: width .3s cubic-bezier(.22,1,.36,1), height .3s, margin .3s; will-change: transform; display: none; }
html.has-mouse .trail, html.has-mouse .dcursor { display: block; }
.dcursor svg { width: 100%; height: 100%; overflow: visible; }
.dcursor.big { width: 74px; height: 74px; margin: -37px 0 0 -37px; }
.dcursor.down svg { transform: scale(0.85); }

/* ===== sound toggle ===== */
.sound-btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); font-size: 10px; letter-spacing: 0.14em; transition: background .3s, border-color .3s; }
.sound-btn:hover { background: rgba(255,255,255,0.14); }
.sound-btn.on { border-color: rgba(255,122,26,0.6); background: rgba(255,122,26,0.14); color: var(--orange2); }
.sound-btn .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sound-btn .bars i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; }
.sound-btn.on .bars i { animation: eq 0.9s ease-in-out infinite; }
.sound-btn.on .bars i:nth-child(2) { animation-delay: .2s; } .sound-btn.on .bars i:nth-child(3) { animation-delay: .4s; } .sound-btn.on .bars i:nth-child(4) { animation-delay: .1s; }
@keyframes eq { 0%,100% { height: 3px; } 50% { height: 12px; } }
.sound-btn.big { font-size: 14px; padding: 16px 22px; align-self: flex-start; margin-top: 10px; }
@media (max-width: 900px) { .nav .sound-btn { display: none; } }