/* =========================================================
   ADISYAHVFX — Video Editor Portfolio
   Theme: deep black base + orange / cyan accents, cinematic parallax
   ========================================================= */

/* ---------- 0. FONTS (self hosted, SIL Open Font License) ----------
   Kept local so the first paint never waits on a third party request.
   One variable file per family covers every weight the site uses.      */
@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:500 700;font-display:swap;
  src:url(../fonts/space-grotesk.woff2) format("woff2");
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:300 500;font-display:swap;
  src:url(../fonts/inter.woff2) format("woff2");
}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/jetbrains-mono.woff2) format("woff2");
}

/* ---------- 1. TOKENS & RESET ---------- */
:root{
  --bg:#050506;
  --bg-1:#0e0e11;
  --bg-2:#15151a;
  --bg-3:#1d1d23;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.22);
  --txt:#f7f7f9;
  --muted:#a6a6b2;
  --dim:#76767f;
  --accent:#ff6a2b;
  --accent-2:#35dfff;
  --accent-soft:rgba(255,106,43,.16);
  --cyan-soft:rgba(53,223,255,.13);
  --ff-display:"Space Grotesk",system-ui,sans-serif;
  --ff-body:"Inter",system-ui,sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,monospace;
  --pad:clamp(20px,5vw,80px);
  --maxw:1280px;
  --ease:cubic-bezier(.16,1,.3,1);
  /* one depth language for the whole page: a lit top edge over a soft, wide shadow */
  --r:16px;
  --r-s:13px;
  --hair:inset 0 1px 0 rgba(255,255,255,.055);
  --lift:0 24px 60px -30px rgba(0,0,0,.95);
  --lift-hi:0 34px 80px -30px rgba(0,0,0,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--ff-body);
  font-weight:300;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* soft colour wash so the page never reads as flat black */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 12% -8%,rgba(255,106,43,.16),transparent 62%),
    radial-gradient(900px 560px at 92% 12%,rgba(53,223,255,.10),transparent 62%),
    radial-gradient(1000px 700px at 50% 108%,rgba(255,106,43,.08),transparent 65%),
    var(--bg);
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
picture{display:contents}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--accent);color:#0a0a0a}

svg:not(.sprite){width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.sprite{display:none}

/* Scrollbar */
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:#0a0a0c}
::-webkit-scrollbar-thumb{background:#2c2c34;border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* Blinking REC dot */
.rec{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  display:inline-block;flex:none;animation:blink 1.6s steps(1,end) infinite;
  box-shadow:0 0 10px var(--accent);
}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.15}}

/* ---------- 2. FILM OVERLAYS ---------- */
.fx-grain,.fx-vignette,.fx-scan{position:fixed;inset:-50px;pointer-events:none;z-index:900}
.fx-grain{
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity:.04;animation:grain .7s steps(4,end) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}
}
.fx-vignette{background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.34) 92%,rgba(0,0,0,.6) 100%);z-index:899}
.fx-scan{
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);
  opacity:.4;z-index:898;
}

/* ---------- 4. NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:800;
  display:flex;align-items:center;gap:20px;
  padding:18px var(--pad);
  transition:background .4s,backdrop-filter .4s,border-color .4s,padding .4s;
  border-bottom:1px solid transparent;
}
.nav.stuck{background:rgba(8,8,10,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--line);padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;padding:7px 0}
.brand-mark{
  width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:7px;
  font-size:15px;color:var(--accent);transition:border-color .3s,background .3s;
}
.brand:hover .brand-mark{border-color:var(--accent);background:var(--accent-soft)}
.brand-txt{font-family:var(--ff-display);font-weight:700;font-size:14px;letter-spacing:.16em;line-height:1;display:flex;flex-direction:column;gap:4px}
.brand-txt em{font-family:var(--ff-mono);font-style:normal;font-size:8.5px;letter-spacing:.3em;color:var(--dim);font-weight:400}

.nav-links{display:flex;gap:2px}
.nav-links a{
  position:relative;display:flex;align-items:center;gap:6px;
  padding:8px 11px;border-radius:100px;
  font-size:12.5px;letter-spacing:.02em;color:var(--muted);
  transition:color .3s,background .3s;
}
.nav-links a:hover,.nav-links a.active{color:var(--txt);background:rgba(255,255,255,.07)}
.nav-links a.active{box-shadow:inset 0 -2px 0 var(--accent)}

.nav-tc{
  display:flex;align-items:baseline;gap:8px;padding:7px 13px;
  border:1px solid var(--line);border-radius:100px;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);
}
.nav-tc[hidden]{display:none}
.nav-tc .rec{align-self:center}
#visitCount{color:var(--txt);font-variant-numeric:tabular-nums}
.nav-tc em{font-style:normal;font-size:9px;letter-spacing:.2em;color:var(--dim)}

/* Burger */
.burger{display:none;width:42px;height:42px;place-items:center;border:1px solid var(--line);border-radius:10px}
.burger span{display:block;width:16px;height:1.4px;background:var(--txt);transition:transform .35s var(--ease),opacity .3s}
.burger span+span{margin-top:5px}
.burger.open span:first-child{transform:translateY(3.2px) rotate(45deg)}
.burger.open span:last-child{transform:translateY(-3.2px) rotate(-45deg)}

/* Mobile menu */
.menu{
  position:fixed;inset:0;z-index:790;background:rgba(5,5,6,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;justify-content:center;gap:2px;padding:80px var(--pad) 40px;
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:.45s var(--ease);overflow-y:auto;
}
.menu.open{opacity:1;visibility:visible;transform:none}
.menu a{display:flex;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);
  font-family:var(--ff-display);font-size:clamp(22px,6.5vw,34px);font-weight:600;letter-spacing:-.02em}
.menu-foot{display:flex;flex-direction:column;gap:0;margin-top:24px;font-family:var(--ff-mono);font-size:11px;color:var(--muted)}
.menu-foot a{font-family:var(--ff-mono);font-size:11px;border:0;padding:13px 0;font-weight:400;letter-spacing:0}

/* ---------- 5. RAIL (right-side timeline) ---------- */
.rail{
  position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:700;
  display:flex;flex-direction:column;gap:22px;padding:6px 0;
}
.rail-line{position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--line)}
.rail-fill{position:absolute;top:0;left:0;width:100%;height:0;background:linear-gradient(180deg,var(--accent),var(--accent-2));box-shadow:0 0 8px rgba(255,106,43,.6)}
.rail a{position:relative;display:flex;align-items:center;gap:12px}
.rail .kf{
  width:11px;height:11px;flex:none;background:#101014;border:1px solid var(--line-2);
  transform:rotate(45deg);transition:.35s var(--ease);
}
.rail a:hover .kf{border-color:var(--txt)}
.rail a.active .kf{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px var(--accent)}
.rail em{
  font-family:var(--ff-mono);font-style:normal;font-size:9.5px;letter-spacing:.16em;color:var(--muted);
  white-space:nowrap;opacity:0;transform:translateX(-6px);transition:.35s var(--ease);
}
.rail a:hover em,.rail a.active em{opacity:1;transform:none}
.rail a.active em{color:var(--txt)}
@media (max-width:1240px){.rail{display:none}}

/* ---------- 6. HERO ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:120px var(--pad) 90px;overflow:hidden;
}
.px-layers{position:absolute;inset:-8%;pointer-events:none;z-index:0}
.px-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,#000 10%,transparent 78%);
  opacity:.5;
}
.px-glow{
  position:absolute;left:50%;top:44%;width:min(1000px,120vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,106,43,.14),transparent 62%);
}
.px-glow.cy{left:82%;top:70%;width:min(700px,90vw);background:radial-gradient(circle,rgba(53,223,255,.12),transparent 62%)}
.px-ico{
  position:absolute;left:var(--x);top:var(--y);
  font-size:calc(120px * var(--s));color:#fff;opacity:.12;
}
.px-ico.cy{color:var(--accent-2);opacity:.16}
.px-ico svg{stroke-width:.9}
.px-ico.d1{animation:float 13s ease-in-out infinite}
.px-ico.d2{animation:float 17s ease-in-out infinite reverse}
.px-ico.d3{animation:float 21s ease-in-out infinite}
@keyframes float{0%,100%{margin-top:0}50%{margin-top:-22px}}
.px-word{
  position:absolute;left:28px;top:50%;z-index:0;pointer-events:none;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.5em;
  color:var(--accent-2);opacity:.3;white-space:nowrap;
}
@media (max-width:1240px){.px-word{display:none}}

.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto}
.hero-title{
  margin:0 0 22px;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(42px,13vw,186px);line-height:.86;letter-spacing:-.045em;
}
.hero-title .line{display:block}
.hero-title span span{
  display:block;
  background:linear-gradient(180deg,#fff 22%,#9a9aa6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-title .line span i{
  font-style:normal;
  background:linear-gradient(180deg,var(--accent) 18%,#ffb27f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
  display:flex;align-items:center;flex-wrap:wrap;gap:clamp(10px,1.6vw,20px);
  font-family:var(--ff-mono);font-size:clamp(10px,1.35vw,13.5px);letter-spacing:.28em;color:var(--muted);
  padding-bottom:26px;border-bottom:1px solid var(--line);
}
.hero-sub b{width:22px;height:1px;background:var(--line-2);display:block}
.hero-sub .hl{color:var(--accent)}
.hero-sub .cy{color:var(--accent-2)}
.hero-desc{max-width:62ch;margin-top:26px;font-size:clamp(14.5px,1.5vw,17px);color:#c9c9d3;line-height:1.75}

.hero-stats{display:flex;align-items:center;gap:clamp(16px,3vw,34px);margin-top:28px;flex-wrap:wrap}
.hs{display:flex;align-items:baseline;gap:11px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.hs b{
  font-family:var(--ff-display);font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(135deg,var(--accent) 10%,#ffb37a 90%);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hs+.hs-div+.hs b{background:linear-gradient(135deg,var(--accent-2) 10%,#a9f2ff 90%);-webkit-background-clip:text;background-clip:text}
.hs b em{font-style:normal;font-size:.62em}
.hs-div{width:1px;height:34px;background:var(--line-2)}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

.btn{
  display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:100px;
  border:1px solid var(--line-2);font-size:13.5px;letter-spacing:.03em;
  transition:.35s var(--ease);background:rgba(255,255,255,.03);
}
.btn svg{font-size:15px;transition:transform .35s var(--ease)}
.btn:hover{border-color:#fff;background:rgba(255,255,255,.09)}
.btn:hover svg{transform:translate(3px,-3px)}
.btn-primary{
  background:linear-gradient(120deg,var(--accent),#ff9152);border-color:transparent;color:#140901;font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 34px -14px rgba(255,106,43,.85);
}
.btn-primary:hover{background:linear-gradient(120deg,#ff8047,#ffa96f);border-color:transparent;color:#140901;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 18px 44px -14px rgba(255,106,43,.95)}

.hero-bar{
  position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:64px auto 0;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.26em;color:var(--dim);
}
.hero-scroll{display:flex;align-items:center;gap:10px;color:var(--muted)}
.hero-scroll b{width:34px;height:1px;background:var(--line-2);position:relative;overflow:hidden;display:block}
.hero-scroll b::after{content:"";position:absolute;inset:0;background:var(--accent);animation:scrub 2.4s var(--ease) infinite}
@keyframes scrub{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* Film perforation */
.perf{
  position:absolute;left:0;right:0;bottom:0;height:15px;
  background:repeating-linear-gradient(90deg,transparent 0 24px,rgba(255,255,255,.09) 24px 40px);
  border-top:1px solid var(--line);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}

/* ---------- 7. SECTION SHELL ---------- */
.sec{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(44px,5.5vw,78px) var(--pad)}
.sec>*:not(.sec-glow):not(.sec-ico){position:relative;z-index:1}
.sec-glow{
  position:absolute;left:50%;top:0;width:min(980px,94%);height:460px;
  transform:translate(-50%,-32%);pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,var(--accent-soft),transparent 68%);
}
.sec-glow.cy{background:radial-gradient(ellipse at center,var(--cyan-soft),transparent 68%)}

/* One large, very faint tool drawing per section, sitting behind the copy.
   Fainter than the hero cloud (.06 against .12) because these sit behind body
   text rather than behind a headline, and never animated - atmosphere should
   not cost paint. */
.sec>.sec-ico{
  position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);
  font-size:calc(120px * var(--s,1));
  color:#fff;opacity:.06;pointer-events:none;z-index:0;
}
.sec>.sec-ico.cy{color:var(--accent-2);opacity:.075}
.sec>.sec-ico svg{stroke-width:.9}
.sec-head{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.sec-title{font-family:var(--ff-display);font-weight:600;font-size:clamp(26px,4.4vw,50px);letter-spacing:-.035em;line-height:1.05}
.sec-line{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),rgba(255,255,255,.02) 70%,transparent)}
.sec-tag{font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em;color:var(--accent-2);opacity:.75}
@media (max-width:640px){.sec-tag{display:none}}
.sec-desc{max-width:60ch;color:var(--muted);font-size:15px;margin-bottom:30px}

/* ---------- 8. ABOUT ---------- */
.about{display:grid;grid-template-columns:1.25fr .95fr;gap:clamp(30px,5vw,80px);align-items:start}
.about-txt p{color:#b6b6c1;font-size:15.5px;margin-bottom:18px;max-width:58ch}
.about-txt p b{color:#fff;font-weight:500}
.about-txt .lead{font-size:clamp(18px,2.3vw,25px);line-height:1.5;color:var(--txt);font-weight:300;margin-bottom:26px}
.about-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.about-list li{
  display:flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid var(--line);border-radius:100px;
  font-size:12.5px;color:var(--muted);transition:.35s var(--ease);background:rgba(255,255,255,.02);
}
.about-list li svg{font-size:15px;color:var(--accent)}
.about-list li:nth-child(even) svg{color:var(--accent-2)}
.about-list li:hover{border-color:var(--line-2);color:var(--txt);transform:translateY(-2px);background:rgba(255,255,255,.05)}

/* full-width background band */
.bgband{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bgband-head{
  display:flex;align-items:center;gap:14px;max-width:var(--maxw);margin:0 auto;
  padding:20px var(--pad) 14px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.26em;color:var(--dim);
}
.bgband-head i{flex:1;height:1px;background:var(--line)}
.bgband-head em{font-style:normal;letter-spacing:.12em;color:var(--dim)}
@media (max-width:700px){.bgband-head em{display:none}}
.bgrow{
  position:relative;display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);
  padding:clamp(16px,2.4vw,28px) var(--pad);border-top:1px solid var(--line);
  overflow:hidden;transition:background .5s var(--ease);
}
.bgrow::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease);
  background:linear-gradient(90deg,rgba(255,106,43,.16),transparent 60%);
}
.bgrow.cy::before{background:linear-gradient(90deg,rgba(53,223,255,.14),transparent 60%)}
.bgrow:hover::before{opacity:1}
.bgrow-ico{
  position:relative;flex:none;width:clamp(42px,4.4vw,62px);height:clamp(42px,4.4vw,62px);
  display:grid;place-items:center;border:1px solid var(--line-2);border-radius:14px;
  font-size:clamp(20px,2.2vw,28px);color:var(--accent);transition:.5s var(--ease);
}
.bgrow.cy .bgrow-ico{color:var(--accent-2)}
.bgrow:hover .bgrow-ico{border-color:currentColor;background:rgba(255,255,255,.05);transform:scale(1.06) rotate(-5deg)}
.bgrow-txt{
  position:relative;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(26px,5.4vw,72px);line-height:1.02;letter-spacing:-.045em;
  color:#e9e9ef;transition:color .5s var(--ease);
}
.bgrow:hover .bgrow-txt{color:var(--accent)}
.bgrow.cy:hover .bgrow-txt{color:var(--accent-2)}
.bgrow-meta{
  position:relative;margin-left:auto;font-family:var(--ff-mono);font-size:9.5px;
  letter-spacing:.2em;color:var(--dim);white-space:nowrap;
}
@media (max-width:900px){.bgrow-meta{display:none}}

.about-side{display:flex;flex-direction:column;gap:16px}
.frame{border:1px solid var(--line);background:var(--bg-1);border-radius:var(--r);
  box-shadow:var(--hair),var(--lift);overflow:hidden}
.frame-tag{
  display:block;padding:11px 15px;border-bottom:1px solid var(--line);
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.24em;color:var(--dim);
}
.frame-art{
  position:relative;aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,rgba(255,106,43,.14),transparent 62%),var(--bg-2);
}
/* the photo, shown as it is - nothing is applied to the pixels */
.frame-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  transition:transform .8s var(--ease);
}
.frame-art.has-photo{background:var(--bg-2)}

/* The vignette, and nothing else. Three gradients: both sides held dark, a
   little extra weight along the top and bottom edges, and a soft round falloff
   over the whole frame. Neutral black - no tint, no directional light. */
.frame-light{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0}
.has-photo .frame-light{
  opacity:1;
  background:
    linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.3) 11%,transparent 28%,
                    transparent 72%,rgba(0,0,0,.3) 89%,rgba(0,0,0,.82) 100%),
    linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.16) 16%,transparent 38%),
    linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,.12) 14%,transparent 34%),
    radial-gradient(118% 92% at 50% 46%,transparent 34%,rgba(0,0,0,.66) 100%);
  transition:opacity .6s var(--ease);
}
.frame:hover .frame-photo{transform:scale(1.035)}
.frame:hover .frame-light{opacity:.72}
.frame-hint{
  position:relative;z-index:3;text-align:center;padding:0 22px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.18em;color:var(--muted);line-height:2;
}
.frame-hint svg{font-size:32px;display:block;margin:0 auto 12px;color:#5a5a66}
.frame-hint b{display:block;margin-top:8px;color:var(--accent);font-weight:400;letter-spacing:.08em}
.frame-grid{
  position:absolute;inset:14px;z-index:4;pointer-events:none;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px),linear-gradient(var(--line) 1px,transparent 1px);
  background-size:33.33% 33.33%;
}
.has-photo .frame-grid{opacity:.5}
.frame-grid::before,.frame-grid::after{
  content:"";position:absolute;width:14px;height:14px;border:1px solid rgba(255,255,255,.3)
}
.frame-grid::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.frame-grid::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.frame-bar{display:flex;gap:4px;padding:12px 15px;border-top:1px solid var(--line)}
.frame-bar span{height:3px;border-radius:3px;background:#2a2a32;flex:1}
.frame-bar span:first-child{background:var(--accent);flex:2.4}
.frame-bar span:nth-child(2){background:var(--accent-2);flex:1.2;opacity:.7}

@media (max-width:900px){.about{grid-template-columns:1fr}}

/* ---------- 9. WORK GRID ---------- */
/* section filter */
.work-filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px}
.wf{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:100px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  font-size:12.5px;color:var(--muted);transition:.35s var(--ease);
}
.wf:hover{color:var(--txt);border-color:var(--line-2);transform:translateY(-2px)}
.wf.on{background:linear-gradient(120deg,var(--accent),#ff9152);border-color:transparent;color:#140901;font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 28px -12px rgba(255,106,43,.8)}
.work-card.off,.work-card.nocat{display:none}
.work-empty{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:clamp(44px,7vw,76px) 24px;text-align:center;
  border:1px dashed var(--line-2);border-radius:16px;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 12px,transparent 12px 24px);
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;color:var(--dim);line-height:2;
}
.work-empty svg{font-size:28px;color:#3a3a44;margin-bottom:8px}
.work-empty b{font-family:var(--ff-display);font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--txt)}
.work-empty[hidden]{display:none}

/* Rows are packed by layoutWork() in main.js, which sets each card's width and the
   shared row height (--mh). Mixed 16:9 and 9:16 clips therefore share a row with
   identical gaps and no leftover space. */
.work-grid{--gp:clamp(8px,1vw,14px);display:flex;flex-wrap:wrap;gap:var(--gp);align-items:flex-start}
.work-card{flex:none;width:100%}

.work-card{position:relative}
.work-media{position:relative;display:block;aspect-ratio:16/9}
.work-card.vert .work-media{aspect-ratio:9/16}
.work-thumb{
  position:relative;display:block;width:100%;height:100%;border-radius:var(--r-s);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-1);
  transition:.45s var(--ease);
}
.work-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .45s;
  /* contrast below 1 pivots on mid grey: it lifts the near-black thumbnails
     and pulls the blown-out white ones down, so the wall reads as one set */
  filter:grayscale(.9) brightness(.72) contrast(.76)}
.work-card:hover .work-thumb{border-color:var(--line-2);transform:translateY(-5px);box-shadow:var(--lift-hi)}
.work-card:hover .work-thumb img{transform:scale(1.06);filter:grayscale(0) brightness(1) contrast(1)}
.work-thumb::after{
  content:"";position:absolute;inset:0;transition:opacity .45s var(--ease);
  /* the flat wash is what actually evens the set out: it takes far more off a
     white thumbnail than off an already dark one */
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.22) 58%,rgba(0,0,0,.14)),
             rgba(0,0,0,.1);
  opacity:1;
}
.work-card:hover .work-thumb::after{opacity:.34}
.work-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);z-index:2;
  width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,106,43,.9);border:1px solid rgba(255,255,255,.35);color:#150a02;
  font-size:22px;opacity:0;transition:.4s var(--ease);
}
.work-card:hover .work-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.work-tag{
  position:absolute;left:12px;top:12px;z-index:2;padding:5px 10px;border-radius:100px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:var(--ff-mono);font-size:9px;letter-spacing:.16em;color:#e6e6ee;
}
.work-meta{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:9px 2px 0;min-height:46px;
}
.work-meta h3{
  min-width:0;font-family:var(--ff-display);font-size:14.5px;font-weight:500;letter-spacing:-.01em;
  line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.work-meta p{flex:none;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.16em;color:var(--accent-2);opacity:.8;white-space:nowrap}

/* empty slot */
.work-thumb.empty{
  display:grid;place-items:center;border-style:dashed;border-color:rgba(255,255,255,.16);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 12px,transparent 12px 24px),var(--bg-1);
  cursor:default;
}
.work-thumb.empty::after{display:none}
.work-slot{text-align:center;font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em;color:var(--dim);line-height:2}
.work-slot svg{font-size:26px;display:block;margin:0 auto 12px;color:#3a3a44}
.work-card.is-empty:hover .work-thumb{transform:none;box-shadow:none}
.work-more{
  display:block;margin:26px auto 0;padding:13px 26px;border-radius:100px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.18em;color:var(--muted);
  transition:.35s var(--ease);
}
.work-more:hover{border-color:var(--accent);color:var(--txt);background:var(--accent-soft)}
.work-more[hidden]{display:none}

.work-note{margin-top:24px;font-size:13.5px;color:var(--muted)}
.work-note a{display:inline-block;color:var(--txt);border-bottom:1px solid var(--accent);padding:8px 0 3px;margin:-8px 0 -3px}
.work-note a:hover{color:var(--accent)}

/* ---------- 10. REEL GALLERY (infinite slider) ---------- */
.sec-gallery{max-width:none;padding-left:0;padding-right:0}
.sec-gallery .sec-head,.sec-gallery .sec-desc,.sec-gallery .reel-foot{
  max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad);
}
.sec-gallery .sec-glow{top:6%}
.reel{
  position:relative;overflow:hidden;cursor:grab;user-select:none;touch-action:pan-y;
  padding:6px 0;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.reel.drag{cursor:grabbing}
.reel-track{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);width:max-content;will-change:transform}
.reel-item{
  position:relative;flex:none;height:clamp(190px,24vw,300px);aspect-ratio:16/9;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-1);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.reel-item.vert{aspect-ratio:9/16}
.reel-item.vert img{object-fit:cover}     /* fills the card, never letterboxed */
.reel-item img{width:100%;height:100%;object-fit:cover;filter:grayscale(.88) brightness(.72) contrast(.76);
  transition:filter .45s,transform .7s var(--ease);pointer-events:none}
.reel-item::after{content:"";position:absolute;inset:0;transition:opacity .45s var(--ease);
  background:linear-gradient(to top,rgba(0,0,0,.74),rgba(0,0,0,.22) 58%,rgba(0,0,0,.14)),rgba(0,0,0,.1)}
.reel-item:hover::after{opacity:.36}
.reel-item:hover{border-color:var(--accent-2);transform:translateY(-4px)}
.reel-item:hover img{filter:grayscale(0) brightness(1) contrast(1);transform:scale(1.05)}
.reel-lab{
  position:absolute;left:12px;bottom:11px;z-index:2;
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.16em;color:#e8e8f0;
}
.reel-badge{
  position:absolute;right:10px;top:10px;z-index:2;padding:4px 8px;border-radius:100px;
  background:rgba(53,223,255,.16);border:1px solid rgba(53,223,255,.4);color:#bff4ff;
  font-family:var(--ff-mono);font-size:8.5px;letter-spacing:.14em;
}
.reel-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);z-index:2;
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,106,43,.92);color:#150a02;font-size:19px;opacity:0;transition:.4s var(--ease);
}
.reel-item:hover .reel-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.reel-item.empty{
  display:grid;place-items:center;border-style:dashed;border-color:rgba(255,255,255,.14);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 12px,transparent 12px 24px),var(--bg-1);
}
.reel-item.empty::after{display:none}
.reel-item.empty:hover{transform:none;border-color:rgba(255,255,255,.24)}
.reel-empty{text-align:center;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.18em;color:var(--dim);line-height:2;padding:0 14px}
.reel-empty svg{font-size:24px;display:block;margin:0 auto 10px;color:#3a3a44}
.reel-empty b{display:block;color:var(--muted);font-weight:400;letter-spacing:.14em}
.reel-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.18em;color:var(--dim)}
.reel-hint{display:flex;align-items:center;gap:9px;color:var(--muted)}
.reel-hint svg{font-size:15px;color:var(--accent-2)}

/* ---------- 11. REVIEWS (screenshots) ---------- */
.sec-reviews{padding-bottom:clamp(56px,7vw,96px);max-width:none;padding-left:0;padding-right:0}
.sec-reviews .sec-head,.sec-reviews .sec-desc,.sec-reviews .review-foot{
  max-width:var(--maxw);margin-left:auto;margin-right:auto;
  padding-left:var(--pad);padding-right:var(--pad);
}
/* the field of testimonials drifts sideways for ever */
.rv-strip{
  position:relative;overflow:hidden;cursor:grab;user-select:none;touch-action:pan-y;
  padding:14px 0 6px;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.rv-strip.drag{cursor:grabbing}
.reviews{display:flex;align-items:center;gap:clamp(16px,2vw,26px);width:max-content;will-change:transform}
.rv-col{
  display:flex;flex-direction:column;justify-content:center;gap:clamp(26px,2.8vw,38px);
  width:clamp(250px,25vw,340px);flex:none;
}
/* every screenshot floats on its own rhythm - scattered pile look */
.review-wrap{
  position:relative;
  transform:translate3d(0,var(--py,0px),0);
  animation:drift var(--dur,9s) ease-in-out infinite var(--delay,0s),
            wobble calc(var(--dur,9s) * 1.7) ease-in-out infinite var(--delay,0s);
}
/* the generic reveal must not overwrite the parallax offset */
.review-wrap[data-reveal],.review-wrap[data-reveal].in{transform:translate3d(0,var(--py,0px),0)}
@keyframes drift{
  0%,100%{translate:0 0}
  25%{translate:var(--fx,5px) calc(var(--fy,7px) * -1)}
  50%{translate:calc(var(--fx,5px) * -.65) var(--fy,7px)}
  75%{translate:calc(var(--fx,5px) * .45) calc(var(--fy,7px) * -.5)}
}
@keyframes wobble{0%,100%{rotate:0deg}50%{rotate:var(--fr,1deg)}}
.review{
  --rx:0deg;--ry:0deg;
  position:relative;display:block;width:fit-content;max-width:100%;
  border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:var(--bg-1);
  box-shadow:var(--hair),var(--lift);
  transform:rotate(var(--rot,0deg)) translateY(var(--dy,0px)) scale(var(--sc,1)) perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:filter .45s var(--ease),opacity .45s var(--ease),transform .35s var(--ease),border-color .4s,box-shadow .4s;
}
/* hover: focus one, blur the rest */
/* the pile holds still the moment one card is picked */
.reviews.hovering .review-wrap,
.reviews.idle .review-wrap{animation-play-state:paused}
.reviews.hovering .review{filter:blur(4px) saturate(.55);opacity:.42}
.reviews.hovering .review.focus{
  filter:none;opacity:1;z-index:5;border-color:var(--line-2);
  transform:rotate(0deg) translateY(var(--dy,0px)) scale(1.06) perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow:var(--hair),var(--lift-hi),0 0 0 1px rgba(53,223,255,.22);
}
/* --- drawn testimonials: sharp at any size, no image to go soft --- */
.rv-chat{padding:15px 15px 11px;background:linear-gradient(168deg,#191920,#101014)}
.rv-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;
  font-family:var(--ff-mono);font-size:9px;letter-spacing:.14em;color:var(--dim)}
.rv-av{width:22px;height:22px;border-radius:50%;flex:none;opacity:.9;
  background:linear-gradient(140deg,var(--accent),var(--accent-2))}
.rv-head b{font-family:var(--ff-display);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--txt)}
.rv-head em{margin-left:auto;font-style:normal}
.rv-bubbles{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.rv-b{
  max-width:100%;padding:9px 13px;border-radius:15px 15px 15px 5px;
  background:#282830;color:#ececf2;font-size:13.5px;line-height:1.45;
}
.rv-foot{display:flex;align-items:center;gap:8px;margin-top:10px;
  font-family:var(--ff-mono);font-size:8.5px;letter-spacing:.12em;color:var(--dim)}
.rv-react{padding:2px 8px;border-radius:100px;background:#282830}
.rv-time{margin-left:auto}

.rv-bubbles.avi{padding-left:34px;position:relative}
.rv-bubbles.avi::before{
  content:"";position:absolute;left:0;bottom:2px;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(140deg,#3a3a46,#22222a);border:1px solid var(--line-2);
}
.rv-thread{display:flex;flex-direction:column;gap:11px}
.rv-row{display:flex;gap:10px;align-items:flex-start}
.rv-av.sm{width:26px;height:26px}
.rv-who{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.rv-who b{font-family:var(--ff-display);font-size:12.5px;font-weight:600;color:var(--txt)}
.rv-who em{font-style:normal;font-family:var(--ff-mono);font-size:8.5px;letter-spacing:.1em;color:var(--dim)}
.rv-row p{font-size:13.5px;line-height:1.45;color:#ececf2}

.rv-star{padding:17px 17px 15px}
.rv-stars{display:flex;align-items:center;gap:3px;margin-bottom:10px}
.rv-stars svg{font-size:13px;color:#3d3d47;stroke-width:1.4}
.rv-stars svg.on{color:var(--accent);fill:var(--accent)}
.rv-stars b{margin-left:7px;font-family:var(--ff-mono);font-size:11px;font-weight:400;color:var(--txt)}
.rv-stars em{margin-left:auto;font-style:normal;font-family:var(--ff-mono);font-size:8.5px;
  letter-spacing:.1em;color:var(--dim);white-space:nowrap}
.rv-job{font-family:var(--ff-display);font-size:12.5px;font-weight:500;color:var(--muted);
  margin-bottom:9px;line-height:1.35}
.rv-quote{
  font-size:13.5px;line-height:1.62;color:#dcdce4;
  display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;
}
.rv-quote::before{content:"\201C"}
.rv-quote::after{content:"\201D"}
.rv-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.rv-tags span{padding:4px 9px;border-radius:100px;border:1px solid var(--line);
  font-family:var(--ff-mono);font-size:8px;letter-spacing:.1em;color:var(--dim)}

.rv-nav{
  display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;
  max-width:var(--maxw);margin-left:auto;margin-right:auto;
  padding-left:var(--pad);padding-right:var(--pad);
}
.rv-btn{
  width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--muted);
  font-size:17px;transition:.35s var(--ease);box-shadow:var(--hair);
}
.rv-btn:hover{border-color:var(--accent);color:var(--txt);background:var(--accent-soft);transform:scale(1.06)}
.rv-btn:active{transform:scale(.94)}
.rv-hint{
  display:flex;align-items:center;gap:9px;
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.18em;color:var(--dim);
}
.rv-hint svg{font-size:15px;color:var(--accent-2)}
@media (max-width:560px){.rv-hint{display:none}}

.review-foot{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;justify-content:center}
.rf-item{
  display:flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid var(--line);border-radius:100px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;color:var(--muted);background:rgba(255,255,255,.02);
}
.rf-item svg{font-size:15px;color:var(--accent)}
.rf-item:nth-child(2) svg{color:var(--accent-2)}

/* ---------- 12. SKILLS ---------- */
.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px)}
@media (max-width:900px){.skills{grid-template-columns:1fr}}
.skill{
  position:relative;padding:28px;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(170deg,var(--bg-2),var(--bg-1) 60%);
  box-shadow:var(--hair),var(--lift);
  overflow:hidden;transition:.45s var(--ease);
}
.skill::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s;
  background:radial-gradient(420px circle at 50% 0,rgba(255,255,255,.07),transparent 70%);
}
.skill:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:var(--hair),var(--lift-hi)}
.skill:hover::before{opacity:1}
.skill-ico{
  position:relative;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--ff-display);font-weight:700;font-size:20px;letter-spacing:-.02em;margin-bottom:20px;
}
.skill-ico.pr{background:#3a0a47;color:#f0b7ff;border:1px solid #6a1a7e}
.skill-ico.ae{background:#0a0a7d;color:#bcc6ff;border:1px solid #2b2bb4}
.skill-ico.mg{background:linear-gradient(140deg,#3a1608,#0d2a30);color:var(--accent);border:1px solid #5c2c12;font-size:24px}
.skill h3{position:relative;font-family:var(--ff-display);font-size:18px;font-weight:600;letter-spacing:-.02em;margin-bottom:9px}
.skill p{position:relative;font-size:13.5px;color:var(--muted);line-height:1.65;margin-bottom:24px;min-height:66px}

.bar{position:relative;height:2px;background:rgba(255,255,255,.13);border-radius:2px;overflow:hidden}
.bar span{
  position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:2px;transition:width 1.4s var(--ease);
}
.bar.in span{width:var(--v)}
.bar.sm{margin-top:12px}
.skill-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em}
.skill-foot em{font-style:normal;color:var(--dim)}
.skill-foot b{color:var(--muted);font-weight:400}

.lang{margin-top:clamp(26px,3.4vw,40px)}
.lang-head{display:flex;align-items:center;gap:12px;margin-bottom:22px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.24em;color:var(--muted)}
.lang-head svg{font-size:16px;color:var(--accent-2)}
.lang-head i{flex:1;height:1px;background:var(--line)}
.lang-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,20px)}
@media (max-width:700px){.lang-row{grid-template-columns:1fr}}
.lang-item{padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg-1);
  box-shadow:var(--hair);transition:.4s var(--ease)}
.lang-item:hover{border-color:var(--line-2);background:var(--bg-2)}
.lang-item b{display:block;font-family:var(--ff-display);font-size:17px;font-weight:500;letter-spacing:-.01em}
.lang-item em{display:block;margin-top:4px;font-style:normal;font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;color:var(--dim)}

.type-row{display:flex;flex-wrap:wrap;gap:9px}
.type-row li{display:flex}
.type-row li>*{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border:1px solid var(--line);border-radius:100px;font-size:12.5px;color:var(--muted);
  background:rgba(255,255,255,.02);transition:.35s var(--ease);
}
.type-row svg{font-size:14px;color:var(--accent-2)}
.type-row a:hover{color:var(--txt);border-color:var(--accent-2);background:rgba(53,223,255,.1);transform:translateY(-2px)}
.type-row li.soon>*{opacity:.55;border-style:dashed}
.lang-hint{font-style:normal;font-family:var(--ff-mono);font-size:9px;letter-spacing:.16em;color:var(--dim);white-space:nowrap}
@media (max-width:700px){.lang-hint{display:none}}

/* ---------- 13. CLIENTS ---------- */
.marquee{
  position:relative;margin:0 calc(var(--pad) * -1);padding:30px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;gap:46px;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee-item{display:flex;align-items:center;gap:46px;font-family:var(--ff-display);font-weight:600;
  font-size:clamp(20px,3vw,34px);letter-spacing:-.02em;color:#8e8e9c;white-space:nowrap;transition:color .4s}
.marquee-item svg{font-size:18px;color:var(--accent);opacity:.8}
.marquee:hover .marquee-item{color:var(--txt)}


#clients{padding-bottom:clamp(44px,5vw,66px)}

/* ---------- 14. CONTACT ---------- */
.sec-contact{padding-bottom:clamp(52px,6.5vw,88px)}
.contact-h{font-family:var(--ff-display);font-weight:600;font-size:clamp(30px,6vw,72px);line-height:1.02;letter-spacing:-.045em;margin-bottom:22px}
.contact-h span{
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.contact-p{max-width:52ch;color:var(--muted);font-size:15px;margin-bottom:44px}
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px)}
@media (max-width:900px){.contact-cards{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.contact-cards{grid-template-columns:1fr}}
.ccard{
  position:relative;display:flex;align-items:center;justify-content:center;gap:14px;
  min-height:96px;padding:26px 30px;text-align:center;
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(170deg,var(--bg-2),var(--bg-1) 65%);
  box-shadow:var(--hair),var(--lift);
  overflow:hidden;transition:.45s var(--ease);
}
.ccard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.ccard.cy::before{background:var(--accent-2)}
.ccard.wa::before{background:#25d366}
.ccard.wa .ccard-ico{color:#25d366}
.ccard.wa:hover{border-color:rgba(37,211,102,.45)}
.ccard:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:var(--hair),var(--lift-hi)}
.ccard:hover::before{transform:scaleY(1)}
.ccard-ico{flex:none;font-size:26px;color:var(--accent)}
.ccard.cy .ccard-ico{color:var(--accent-2)}
.ccard-act{
  font-family:var(--ff-display);font-size:clamp(16px,1.5vw,19px);
  font-weight:500;letter-spacing:-.015em;line-height:1.2;
}
/* the arrow sits in the corner as an "this leaves the site" hint, so it never
   pulls the label off centre */
.ccard-go{position:absolute;right:18px;top:18px;font-size:16px;color:var(--dim);transition:.4s var(--ease)}
.ccard:hover .ccard-go{color:var(--txt);transform:translate(3px,-3px)}

.plat{margin-top:46px}
.plat-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.24em;color:var(--muted)}
.plat-head svg{font-size:16px;color:var(--accent)}
.plat-head i{flex:1;height:1px;background:var(--line)}
.plat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px)}
@media (max-width:760px){.plat-row{grid-template-columns:1fr}}
.pcard{
  position:relative;display:flex;align-items:center;gap:14px;padding:17px 20px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg-1);
  box-shadow:var(--hair);transition:.4s var(--ease);
}
.pcard-dot{width:9px;height:9px;border-radius:50%;background:var(--pc);box-shadow:0 0 12px var(--pc);flex:none}
.pcard b{display:block;font-family:var(--ff-display);font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--pc)}
.pcard i{display:block;font-style:normal;font-family:var(--ff-mono);font-size:9px;letter-spacing:.14em;color:var(--dim);margin-top:4px}
.pcard svg{margin-left:auto;font-size:16px;color:var(--dim);transition:.4s var(--ease)}
.pcard:hover{border-color:var(--pc);background:var(--bg-2);transform:translateY(-3px)}
.pcard:hover svg{color:var(--txt);transform:translate(3px,-3px)}
.pcard.soon{border-style:dashed}
.pcard.soon:hover{transform:none;border-color:var(--line-2);background:var(--bg-1)}
.pcard.soon svg{opacity:.4}

.copy{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:11px 18px;
  border:1px solid var(--line);border-radius:100px;font-size:12.5px;color:var(--muted);transition:.35s var(--ease);
}
.copy svg{font-size:15px}
.copy .c-ok{display:none;color:var(--accent-2)}
.copy:hover{border-color:var(--line-2);color:var(--txt);background:rgba(255,255,255,.04)}
.copy.ok{border-color:var(--accent-2);color:var(--txt)}
.copy.ok .c-copy{display:none}
.copy.ok .c-ok{display:inline-block}
.avail{display:flex;align-items:center;gap:10px;margin-top:34px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.18em;color:var(--muted)}

/* ---------- 15. FOOTER ---------- */
.foot{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:26px var(--pad);border-top:1px solid var(--line);
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;color:var(--dim);
}
.foot-mid{text-align:center}
.foot-top{display:flex;align-items:center;gap:7px;padding:14px 4px;color:var(--muted);transition:color .3s}
.foot-top:hover{color:var(--accent)}
@media (max-width:640px){.foot{justify-content:center;text-align:center}.foot-mid{width:100%}}

/* ---------- 16. LIGHTBOX ---------- */
.lb{
  position:fixed;inset:0;z-index:1100;background:rgba(3,3,4,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:grid;place-items:center;padding:var(--pad);
  opacity:0;visibility:hidden;transition:.4s var(--ease);
}
.lb.open{opacity:1;visibility:visible}
.lb-box{width:min(1100px,100%);transform:scale(.97);transition:transform .45s var(--ease)}
.lb.open .lb-box{transform:none}
.lb-frame{position:relative;aspect-ratio:16/9;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:#000}
.lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-frame.vert{aspect-ratio:9/16;width:auto;height:min(76vh,860px);margin:0 auto}
.lb-cap{margin-top:14px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.18em;color:var(--muted);text-align:center}
/* the way out when the embed will not play */
.lb-out{
  display:flex;width:fit-content;align-items:center;gap:9px;margin:14px auto 0;
  padding:9px 18px;border-radius:100px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);color:var(--muted);
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;
  transition:.35s var(--ease);
}
.lb-out svg{font-size:15px;color:var(--accent)}
.lb-out:hover{border-color:var(--accent);color:var(--txt);background:var(--accent-soft)}
.lb-close{
  position:absolute;top:22px;right:26px;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line-2);display:grid;place-items:center;font-size:15px;color:var(--muted);transition:.35s var(--ease);
}
.lb-close:hover{border-color:#fff;color:#fff;transform:rotate(90deg)}

/* ---------- 17. REVEAL ---------- */
/* Scoped to .anim, which only JavaScript adds. If the script is blocked, fails
   to load, or throws before the reveal observer is wired, the class is never
   there and every one of these elements is simply visible. Hiding content by
   default and switching it on from JS is how a portfolio goes blank. */
.anim [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.anim [data-reveal].in{opacity:1;transform:none}
.hero-title .line{opacity:1;transform:none}
/* Same rule as [data-reveal] above: the hero title clips itself out of sight
   and only JavaScript brings it back, so the hiding is scoped to .anim too.
   Without this the name is the one thing missing from a failed page. */
.anim .hero-title .line span{
  clip-path:inset(105% -4% -14% 0);transform:translateY(.07em);
  transition:clip-path 1.15s var(--ease),transform 1.15s var(--ease);
}
.anim .hero-title .line.in span{clip-path:inset(-16% -4% -14% 0);transform:none}

/* ---------- 18. PARALLAX TRANSFORM (driven by main.js) ---------- */
.px-layers{opacity:var(--fade,1)}
.px-grid{transform:translate3d(var(--tx,0px),var(--ty,0px),0)}
.px-ico,.px-glow{
  transform:translate3d(calc(-50% + var(--tx,0px)),calc(-50% + var(--ty,0px)),0);
}
.px-word{
  transform:translate3d(calc(-50% + var(--tx,0px)),calc(-50% + var(--ty,0px)),0) rotate(-90deg);
}

/* ---------- 19. RESPONSIVE NAV ---------- */
@media (max-width:1240px){
  .nav-links,.nav-tc{display:none}
  .burger{display:grid}
}

/* ---------- 20. LIGHTWEIGHT MODE (phones / tablets) ----------
   Everything expensive to paint is switched off below 900px so the
   page stays smooth on mid range phones: no full screen grain or
   scanlines, no backdrop blur, no floating/rotating review cards,
   fewer decorative hero icons.                                        */
@media (max-width:900px){
  .fx-grain,.fx-scan{display:none}
  .fx-vignette{background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.3) 100%)}
  .nav.stuck{background:rgba(8,8,10,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
  .menu{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,5,6,.99)}
  .work-tag{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,0,0,.68)}
  .lb{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(3,3,4,.97)}
  .px-ico.m-hide{display:none}
  .px-glow.cy{display:none}
  .review-wrap{animation:none}
  .review{transform:translateY(var(--dy,0px))}
  .reviews.hovering .review{filter:none;opacity:1}
  .reviews.hovering .review.focus{transform:translateY(var(--dy,0px));box-shadow:0 16px 40px rgba(0,0,0,.45)}
  .skill:hover,.ccard:hover,.work-card:hover .work-thumb{box-shadow:none}
  .sec-glow,.sec-ico{display:none}
}
@media (max-width:640px){
  .review{transform:none;margin-bottom:0}
  .review-wrap{margin-bottom:14px}
  .hs-div{display:none}                       /* the row wraps, so the divider divides nothing */
  .hero-stats{gap:18px 26px}
}

/* ---------- 21. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none}
  .hero-title .line span{transform:none;clip-path:none}
  .fx-grain,.fx-scan{display:none}
  .reviews.hovering .review{filter:none;opacity:1}
  .review-wrap{animation:none;transform:none}
  .review{transform:none}
}