/* ============================================================
   RENONCIN — 2026 premium build. Dark metal + red. Depth-first.
   ============================================================ */
:root{
  --bg:#08080a; --bg-2:#0c0c10; --ink:#f4f1ea; --muted:#a7a7b2; --muted-2:#6d6d78;
  --red:#e5342a; --red-hot:#ff5544; --red-deep:#7d1811; --red-2:#ff6a3c;
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.02); --stroke:rgba(255,255,255,.09); --stroke-2:rgba(255,255,255,.05);
  --redglow:rgba(229,52,42,.45); --redglow-2:rgba(229,52,42,.16);
  --display:"Oswald","Arial Narrow",sans-serif; --body:"Sora",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --wrap:1220px; --ease:cubic-bezier(.22,.61,.24,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --sh-1:0 2px 6px rgba(0,0,0,.4); --sh-card:0 1px 0 rgba(255,255,255,.05) inset, 0 40px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.35);
  --mx:50%; --my:30%;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--bg); }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{ font-family:var(--body); color:var(--ink); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; position:relative; background:var(--bg); }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:26px; position:relative; z-index:2; }
.mono{ font-family:var(--mono); }
h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1; letter-spacing:.005em; }
::selection{ background:var(--red); color:#fff; }
html.is-loading{ overflow:hidden; height:100%; }
html.is-loading body{ overflow:hidden; height:100%; }
/* hide animatable content until JS reveals (fallback shows all) */
.js [data-reveal]{ opacity:0; transform:translateY(30px); }
.js [data-split]{ opacity:0; }
.js .tile, .js .svc{ opacity:0; transform:translateY(44px); }
.no-anim [data-reveal], .no-anim [data-split], .no-anim .tile, .no-anim .svc{ opacity:1 !important; transform:none !important; }

/* ============ GLOBAL FX ============ */
#stage{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; }
.fx-grid{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0/64px 64px;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 15%, transparent 75%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 15%, transparent 75%); }
.fx-mouse{ position:fixed; inset:0; z-index:0; pointer-events:none; transition:background .3s;
  background:radial-gradient(340px 340px at var(--mx) var(--my), var(--redglow-2), transparent 70%); }
.fx-vignette{ position:fixed; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 0 240px 60px rgba(0,0,0,.9); background:radial-gradient(130% 130% at 50% 40%, transparent 55%, rgba(0,0,0,.6)); }
.fx-grain{ position:fixed; inset:-50%; z-index:60; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite; }
@keyframes grain{ to{ transform:translate(6%,-4%); } }
.scroll-bar{ position:fixed; top:0; left:0; right:0; height:2px; z-index:70; background:rgba(255,255,255,.05); }
.scroll-bar > i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--red),var(--red-hot)); box-shadow:0 0 14px var(--red); transform-origin:left; }

/* ============ CURSOR ============ */
.cursor{ position:fixed; top:0; left:0; z-index:120; pointer-events:none; mix-blend-mode:screen; will-change:transform; }
.cursor__dot{ position:absolute; width:6px; height:6px; border-radius:50%; background:var(--red); transform:translate(-50%,-50%); box-shadow:0 0 10px var(--red); }
.cursor__ring{ position:absolute; width:38px; height:38px; border:1px solid rgba(255,255,255,.5); border-radius:50%; transform:translate(-50%,-50%); transition:width .3s var(--ease), height .3s var(--ease), border-color .3s, background .3s; }
.cursor.is-hover .cursor__ring{ width:66px; height:66px; border-color:var(--red); background:rgba(229,52,42,.1); }
.cursor.is-view .cursor__ring{ width:88px; height:88px; border-color:var(--red); background:rgba(229,52,42,.16); }
.cursor.is-hide .cursor__ring{ width:0; height:0; opacity:0; } .cursor.is-hide .cursor__dot{ opacity:0; }
.cursor__label{ position:absolute; transform:translate(-50%,-50%); font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; opacity:0; transition:opacity .25s; white-space:nowrap; }
.cursor.is-view .cursor__label{ opacity:1; }
@media (hover:none){ .cursor{ display:none; } }
html.cursor-none, html.cursor-none *{ cursor:none !important; }

/* ============ PRELOADER ============ */
.loader{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:var(--bg); }
.loader__in{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.loader__logo{ width:88px; height:88px; filter:drop-shadow(0 0 30px var(--redglow)); animation:lspin 3s var(--ease-out) infinite; }
@keyframes lspin{ 0%,100%{ transform:rotate(-4deg) } 50%{ transform:rotate(4deg) } }
.loader__word{ font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,6vw,2.6rem); letter-spacing:.42em; padding-left:.42em; color:var(--ink); }
.loader__word .char{ display:inline-block; }
.loader__bar{ width:min(280px,60vw); height:2px; background:rgba(255,255,255,.1); overflow:hidden; }
.loader__bar > i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--red),var(--red-hot)); box-shadow:0 0 12px var(--red); }
.loader__count{ font-family:var(--mono); font-size:.8rem; color:var(--muted); letter-spacing:.1em; }
.loader__count em{ color:var(--red); font-style:normal; }
.loader__curtain{ position:absolute; inset:0; background:var(--bg); transform:translateY(100%); z-index:-1; }

/* ============ BUTTONS ============ */
.btn{ position:relative; display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; font-size:.92rem; padding:15px 28px; border-radius:12px; border:1px solid transparent;
  cursor:pointer; overflow:hidden; transition:transform .3s var(--ease-out), box-shadow .3s, border-color .3s; will-change:transform; }
.btn > span,.btn > i{ position:relative; z-index:2; }
.btn--red{ color:#fff; background:linear-gradient(180deg,var(--red-hot),var(--red)); box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 14px 34px -8px var(--redglow); }
.btn--red::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,#fff5,transparent 40%); opacity:0; transition:opacity .3s; }
.btn--red:hover{ transform:translateY(-3px); box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 22px 50px -8px var(--redglow); } .btn--red:hover::before{ opacity:.5; }
.btn--glass{ color:var(--ink); background:var(--glass); border-color:var(--stroke); backdrop-filter:blur(10px); }
.btn--glass:hover{ transform:translateY(-3px); border-color:var(--red); box-shadow:0 16px 40px -12px var(--redglow); }
.btn--sm{ padding:10px 18px; font-size:.8rem; border-radius:10px; }
.btn__arrow{ width:16px; height:10px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath fill='%23000' d='M11 0l5 5-5 5-1.4-1.4L12.2 6H0V4h12.2L9.6 1.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath fill='%23000' d='M11 0l5 5-5 5-1.4-1.4L12.2 6H0V4h12.2L9.6 1.4z'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .3s var(--ease-out); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

/* ============ eyebrow / headings ============ */
.eyebrow{ display:inline-flex; align-items:center; gap:11px; font-family:var(--mono); font-weight:500; font-size:.74rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.pulse{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--red); }
.pulse::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--red); animation:pulse 2s ease-out infinite; }
@keyframes pulse{ 0%{ transform:scale(.6); opacity:1 } 100%{ transform:scale(1.8); opacity:0 } }
.shead{ margin-bottom:52px; max-width:760px; }
.shead__title,.contact__big{ font-family:var(--display); font-weight:600; text-transform:uppercase; }
.shead__title{ font-size:clamp(2rem,5.2vw,3.4rem); margin:16px 0 12px; line-height:1.02; }
.shead__sub{ color:var(--muted); font-size:1.05rem; max-width:56ch; }
.line{ display:block; overflow:hidden; }
.line--accent{ color:transparent; background:linear-gradient(100deg,#fff 10%,var(--red) 55%,var(--red-2)); -webkit-background-clip:text; background-clip:text; }
.char,.word{ display:inline-block; will-change:transform; }

/* ============ NAV ============ */
.nav{ position:fixed; top:0; left:0; right:0; z-index:90; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px 30px; transition:transform .5s var(--ease-out), background .3s, padding .3s, backdrop-filter .3s; }
.nav.scrolled{ background:rgba(8,8,10,.6); backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid var(--stroke-2); padding-block:12px; }
.nav.hide{ transform:translateY(-110%); }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:42px; height:42px; filter:drop-shadow(0 0 12px rgba(229,52,42,.35)); }
.brand__name{ font-family:var(--display); font-weight:700; font-size:1.16rem; letter-spacing:.1em; }
.nav__links{ display:flex; gap:8px; margin-left:auto; }
.nav__links a{ position:relative; padding:8px 14px; font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); transition:color .2s; }
.nav__links a::before{ content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out); }
.nav__links a:hover{ color:var(--ink); } .nav__links a:hover::before{ transform:scaleX(1); }
.nav__right{ display:flex; align-items:center; gap:12px; }
.lang{ font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; color:var(--muted); background:var(--glass); border:1px solid var(--stroke); border-radius:9px; padding:8px 11px; cursor:pointer; display:flex; gap:5px; transition:border-color .2s; }
.lang:hover{ border-color:var(--red); } .lang__flag{ color:var(--red); } .lang__sep{ opacity:.4; }
.nav__burger{ display:none; flex-direction:column; gap:6px; background:none; border:0; cursor:pointer; padding:6px; }
.nav__burger span{ width:26px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .3s; }
.nav__burger.open span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.nav__burger.open span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

/* ============ HERO ============ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:130px 0 70px; }
.hero__glowfield{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 50% at 78% 42%, var(--redglow-2), transparent 62%), radial-gradient(40% 40% at 12% 78%, rgba(229,52,42,.08), transparent 65%); }
.hero__grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:40px; align-items:center; width:100%; z-index:2; }
.hero__eyebrow{ margin-bottom:22px; }
.hero__title{ font-size:clamp(2.7rem,7.2vw,5.4rem); text-transform:uppercase; letter-spacing:-.01em; margin-bottom:26px; }
.hero__lead{ font-size:1.12rem; color:var(--muted); max-width:50ch; }
.hero__cta{ display:flex; gap:15px; margin:30px 0 34px; flex-wrap:wrap; }
.hero__stats{ display:flex; gap:34px; list-style:none; flex-wrap:wrap; border-top:1px solid var(--stroke-2); padding-top:24px; }
.hero__stats b{ display:block; font-family:var(--display); font-size:1.9rem; color:#fff; line-height:1; }
.hero__stats li:first-child b, .hero__stats li:nth-child(3) b{ color:var(--red); }
.hero__stats span{ font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }

/* -- avatar stage -- */
.hero__stage{ position:relative; justify-self:center; width:min(480px,88vw); aspect-ratio:1; display:grid; place-items:center; transform-style:preserve-3d; }
.av__halo{ position:absolute; inset:14%; border-radius:50%; background:radial-gradient(circle,var(--redglow),transparent 62%); filter:blur(30px); animation:halo 4s ease-in-out infinite; }
@keyframes halo{ 50%{ transform:scale(1.12); opacity:.8 } }
.av__rings{ position:absolute; inset:0; animation:spin 40s linear infinite; }
.av__rings svg{ width:100%; height:100%; }
.av__ring1{ animation:spin 24s linear infinite; transform-origin:center; }
.av__ring2{ animation:spin 34s linear infinite reverse; transform-origin:center; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.av__scan{ position:absolute; inset:16%; border-radius:50%; overflow:hidden; opacity:.5; mix-blend-mode:screen; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(229,52,42,.14) 0 1px, transparent 1px 4px);
  -webkit-mask:radial-gradient(circle, #000 60%, transparent 72%); mask:radial-gradient(circle, #000 60%, transparent 72%);
  animation:scanmove 5s linear infinite; }
@keyframes scanmove{ to{ background-position:0 40px; } }
.av__img-wrap{ position:relative; z-index:3; width:78%; will-change:transform; }
.av__img{ width:100%; height:auto; filter:drop-shadow(0 24px 40px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(229,52,42,.25)); animation:float 6s ease-in-out infinite; }
@keyframes float{ 50%{ transform:translateY(-16px); } }
.av__reflect{ position:absolute; left:8%; right:8%; top:96%; height:40%; background:linear-gradient(180deg, rgba(229,52,42,.18), transparent 70%); filter:blur(10px); transform:scaleY(-1); opacity:.4; -webkit-mask:linear-gradient(#000,transparent); mask:linear-gradient(#000,transparent); }
.hud{ position:absolute; font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; z-index:4; }
.hud b{ color:var(--red); }
.hud--tl{ top:4%; left:-2%; } .hud--tr{ top:4%; right:-2%; } .hud--bl{ bottom:4%; left:-2%; } .hud--br{ bottom:4%; right:-2%; }
.hud__corner{ position:absolute; width:22px; height:22px; z-index:4; }
.hud__corner::before,.hud__corner::after{ content:""; position:absolute; background:var(--red); }
.hud__corner::before{ width:100%; height:2px; } .hud__corner::after{ width:2px; height:100%; }
.c--tl{ top:0; left:0; } .c--tr{ top:0; right:0; } .c--tr::after{ right:0; } .c--tr::before{ right:0; }
.c--bl{ bottom:0; left:0; } .c--bl::before{ bottom:0; } .c--br{ bottom:0; right:0; } .c--br::before{ bottom:0; right:0; } .c--br::after{ right:0; }

.hero__scroll{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); }
.hero__scroll i{ width:1px; height:36px; background:linear-gradient(var(--red),transparent); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; inset:0; background:var(--red); animation:scrolldot 1.8s ease-in-out infinite; }
@keyframes scrolldot{ 0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(100%) } }

/* ============ MARQUEE ============ */
.marquee{ overflow:hidden; border-top:1px solid var(--stroke-2); border-bottom:1px solid var(--stroke-2); background:linear-gradient(90deg,transparent,rgba(229,52,42,.04),transparent); padding:20px 0; position:relative; z-index:2; }
.marquee__track{ display:inline-flex; align-items:center; gap:30px; white-space:nowrap; will-change:transform; }
.marquee__track span{ font-family:var(--display); font-weight:500; font-size:1.5rem; text-transform:uppercase; letter-spacing:.02em; color:rgba(244,241,234,.85); transition:color .3s; }
.marquee:hover .marquee__track span{ color:var(--muted-2); } .marquee__track span:hover{ color:var(--red) !important; }
.marquee__track i{ color:var(--red); font-style:normal; font-size:.6rem; }

/* ============ SECTIONS ============ */
.section{ padding:120px 0; position:relative; z-index:2; }
.section--services{ background:linear-gradient(180deg, transparent, rgba(255,255,255,.012), transparent); }

/* ============ WORK / GALLERY ============ */
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px; perspective:1200px; }
.tile{ position:relative; grid-column:span 4; border-radius:18px; overflow:hidden; cursor:pointer; transform-style:preserve-3d;
  border:1px solid var(--stroke); background:var(--bg-2); box-shadow:var(--sh-card); aspect-ratio:4/3; transition:box-shadow .4s, border-color .4s; will-change:transform; }
.tile--xl{ grid-column:span 8; aspect-ratio:16/9; } .tile--wide{ grid-column:span 7; aspect-ratio:16/9; }
.tile:nth-child(8){ grid-column:span 5; aspect-ratio:16/9; }
.tile__media{ position:absolute; inset:0; overflow:hidden; }
.tile__media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .8s var(--ease-out), filter .5s; filter:saturate(.9) brightness(.82); }
.tile:hover{ border-color:var(--red); box-shadow:var(--sh-card), 0 30px 70px -20px var(--redglow); }
.tile:hover .tile__media img{ transform:scale(1.12); filter:saturate(1.1) brightness(1); }
.tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,6,8,.9), rgba(6,6,8,.15) 45%, transparent); opacity:.9; transition:opacity .4s; }
.tile:hover::after{ opacity:1; }
.tile__num{ position:absolute; top:16px; left:18px; z-index:3; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:rgba(255,255,255,.6);
  border:1px solid var(--stroke); background:rgba(0,0,0,.35); backdrop-filter:blur(6px); padding:4px 9px; border-radius:20px; }
.tile figcaption{ position:absolute; left:20px; right:20px; bottom:18px; z-index:3; transform:translateY(10px); transition:transform .45s var(--ease-out); }
.tile:hover figcaption{ transform:translateY(0); }
.tile figcaption b{ font-family:var(--display); font-weight:600; font-size:1.15rem; text-transform:uppercase; letter-spacing:.02em; display:block; }
.tile figcaption span{ font-family:var(--mono); font-size:.72rem; color:var(--red); letter-spacing:.04em; }
.tile figcaption::before{ content:""; display:block; width:26px; height:2px; background:var(--red); margin-bottom:10px; transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-out); }
.tile:hover figcaption::before{ transform:scaleX(1); }

/* ============ SERVICES ============ */
.svcs{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; perspective:1200px; }
.svc{ position:relative; padding:30px 28px 30px; border-radius:18px; background:linear-gradient(165deg,var(--glass),var(--glass-2));
  border:1px solid var(--stroke); backdrop-filter:blur(8px); overflow:hidden; box-shadow:var(--sh-card); transform-style:preserve-3d; will-change:transform; transition:border-color .4s, box-shadow .4s; }
.svc::before{ content:""; position:absolute; width:340px; height:340px; left:var(--gx,50%); top:var(--gy,0%); transform:translate(-50%,-50%);
  background:radial-gradient(circle, var(--redglow-2), transparent 70%); opacity:0; transition:opacity .4s; pointer-events:none; }
.svc:hover::before{ opacity:1; }
.svc__border{ position:absolute; inset:0; border-radius:18px; padding:1px; pointer-events:none; opacity:0; transition:opacity .4s;
  background:conic-gradient(from var(--a,0deg), transparent 0 62%, var(--red) 78%, transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:borderspin 5s linear infinite; }
.svc:hover .svc__border{ opacity:1; }
@keyframes borderspin{ to{ --a:360deg; } }
@property --a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.svc:hover{ border-color:transparent; box-shadow:var(--sh-card), 0 30px 60px -24px var(--redglow); }
.svc__idx{ position:absolute; top:24px; right:26px; font-family:var(--mono); font-size:.72rem; color:var(--muted-2); letter-spacing:.1em; }
.svc__ico{ width:56px; height:56px; border-radius:14px; background:rgba(229,52,42,.12); border:1px solid rgba(229,52,42,.3); display:grid; place-items:center; margin-bottom:20px; transition:transform .4s var(--ease-out), background .4s; }
.svc:hover .svc__ico{ transform:translateY(-4px) rotate(-6deg); background:rgba(229,52,42,.22); }
.svc__ico::before{ content:""; width:28px; height:28px; background:var(--red); mask-size:contain; -webkit-mask-size:contain; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; mask-position:center; -webkit-mask-position:center; transition:background .3s; }
.svc:hover .svc__ico::before{ background:var(--red-hot); }
.svc h3{ font-size:1.28rem; text-transform:uppercase; letter-spacing:.01em; margin-bottom:10px; position:relative; z-index:2; }
.svc p{ color:var(--muted); font-size:.94rem; position:relative; z-index:2; }

/* icon masks (shared) */
[data-ico="ped"]::before{ mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a4 4 0 100 8 4 4 0 000-8zm-7 20a7 7 0 0114 0z'/%3E%3C/svg%3E"); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a4 4 0 100 8 4 4 0 000-8zm-7 20a7 7 0 0114 0z'/%3E%3C/svg%3E"); }
[data-ico="gear"]::before{ mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 2h6l1 3h2a2 2 0 012 2v13a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h2l1-3zm-1 8v3h8v-3H8z'/%3E%3C/svg%3E"); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 2h6l1 3h2a2 2 0 012 2v13a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h2l1-3zm-1 8v3h8v-3H8z'/%3E%3C/svg%3E"); }
[data-ico="mlo"]::before{ mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 21V9l9-6 9 6v12h-6v-7H9v7H3z'/%3E%3C/svg%3E"); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 21V9l9-6 9 6v12h-6v-7H9v7H3z'/%3E%3C/svg%3E"); }
[data-ico="car"]::before{ mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 11l1.5-4.5A2 2 0 018.4 5h7.2a2 2 0 011.9 1.5L19 11h1a1 1 0 011 1v5h-3a2 2 0 11-4 0h-4a2 2 0 11-4 0H3v-5a1 1 0 011-1h1zm2 0h10l-1-3H8l-1 3z'/%3E%3C/svg%3E"); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 11l1.5-4.5A2 2 0 018.4 5h7.2a2 2 0 011.9 1.5L19 11h1a1 1 0 011 1v5h-3a2 2 0 11-4 0h-4a2 2 0 11-4 0H3v-5a1 1 0 011-1h1zm2 0h10l-1-3H8l-1 3z'/%3E%3C/svg%3E"); }
[data-ico="prop"]::before{ mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2l9 5v10l-9 5-9-5V7l9-5zm0 2.3L5 8.1v7.8l7 3.9 7-3.9V8.1l-7-3.8z'/%3E%3C/svg%3E"); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2l9 5v10l-9 5-9-5V7l9-5zm0 2.3L5 8.1v7.8l7 3.9 7-3.9V8.1l-7-3.8z'/%3E%3C/svg%3E"); }
[data-ico="tex"]::before{ mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 3h18v18H3V3zm2 2v6h6V5H5zm8 0v6h6V5h-6zM5 13v6h6v-6H5zm8 0v6h6v-6h-6z'/%3E%3C/svg%3E"); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 3h18v18H3V3zm2 2v6h6V5H5zm8 0v6h6V5h-6zM5 13v6h6v-6H5zm8 0v6h6v-6h-6z'/%3E%3C/svg%3E"); }

/* ============ ABOUT ============ */
.section--about{ overflow:hidden; }
.about{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.about__frame{ position:relative; aspect-ratio:1; display:grid; place-items:center; border-radius:24px;
  background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.04), transparent 60%), var(--bg-2);
  border:1px solid var(--stroke); box-shadow:var(--sh-card); overflow:hidden; }
.about__frame::before{ content:""; position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/28px 28px, linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/28px 28px; opacity:.5; }
.frame__glow{ position:absolute; inset:18%; border-radius:50%; background:radial-gradient(circle,var(--redglow),transparent 62%); filter:blur(34px); animation:halo 5s ease-in-out infinite; }
.frame__scan{ position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(229,52,42,.05) 0 2px,transparent 2px 6px); opacity:.4; animation:scanmove 6s linear infinite; }
.about__img{ position:relative; z-index:2; width:66%; filter:drop-shadow(0 20px 40px rgba(0,0,0,.5)); will-change:transform; }
.frame__corner{ position:absolute; width:26px; height:26px; z-index:3; }
.frame__corner::before,.frame__corner::after{ content:""; position:absolute; background:var(--red); }
.frame__corner::before{ width:100%; height:2px; } .frame__corner::after{ width:2px; height:100%; }
.frame__corner.c--tl{ top:16px; left:16px; } .frame__corner.c--tr{ top:16px; right:16px; } .frame__corner.c--tr::before,.frame__corner.c--tr::after{ right:0; }
.frame__corner.c--bl{ bottom:16px; left:16px; } .frame__corner.c--bl::before{ bottom:0; } .frame__corner.c--br{ bottom:16px; right:16px; } .frame__corner.c--br::before,.frame__corner.c--br::after{ bottom:0; right:0; }
.frame__hud{ position:absolute; z-index:3; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; display:flex; flex-direction:column; gap:2px; }
.frame__hud span{ color:var(--muted-2); } .frame__hud b{ color:var(--ink); } .frame__hud b.ok{ color:#6ee7a0; }
.frame__hud--top{ top:26px; left:52px; } .frame__hud--bot{ bottom:26px; left:52px; }
.frame__read{ position:absolute; right:26px; bottom:26px; z-index:3; list-style:none; text-align:right; display:flex; flex-direction:column; gap:8px; }
.frame__read li span{ display:block; font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
.frame__read li b{ font-family:var(--mono); font-size:.72rem; color:var(--red); }
.about__text p{ color:var(--muted); margin-bottom:16px; max-width:52ch; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 26px; }
.chips span{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border:1px solid var(--stroke); border-radius:999px; padding:7px 14px; background:var(--glass-2); transition:border-color .2s,color .2s; }
.chips span:hover{ border-color:var(--red); color:var(--ink); }

/* ============ CONTACT ============ */
.section--contact{ text-align:center; padding:150px 0 130px; overflow:hidden; }
.contact__bg{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 80% at 50% 120%, var(--redglow-2), transparent 60%); }
.contact__in{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.contact__in .eyebrow{ margin-bottom:18px; }
.contact__big{ font-size:clamp(2.6rem,8vw,6rem); line-height:.98; margin-bottom:20px; }
.contact__big .line{ text-align:center; }
.cta-huge{ position:relative; display:inline-flex; align-items:center; gap:20px; margin:36px 0 30px; padding:22px 34px; border-radius:20px;
  background:linear-gradient(180deg,var(--red-hot),var(--red)); color:#fff; overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 24px 60px -14px var(--redglow); transition:transform .4s var(--ease-out), box-shadow .4s; will-change:transform; }
.cta-huge::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at var(--mx,50%) 50%, rgba(255,255,255,.35), transparent 60%); opacity:0; transition:opacity .3s; }
.cta-huge:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 34px 80px -14px var(--redglow); } .cta-huge:hover::before{ opacity:1; }
.cta-huge__ico{ width:44px; height:44px; display:grid; place-items:center; background:rgba(0,0,0,.2); border-radius:12px; flex:none; }
.cta-huge__ico::before{ content:""; width:26px; height:26px; background:#fff; mask-size:contain; -webkit-mask-size:contain; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; mask-position:center; -webkit-mask-position:center; }
.cta-huge__txt{ text-align:left; } .cta-huge__txt b{ font-family:var(--display); font-weight:600; font-size:1.3rem; text-transform:uppercase; letter-spacing:.03em; display:block; }
.cta-huge__txt em{ font-family:var(--mono); font-style:normal; font-size:.78rem; opacity:.8; }
.cta-huge__arrow{ width:22px; height:22px; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); transition:transform .3s; } .cta-huge:hover .cta-huge__arrow{ transform:rotate(45deg) translate(3px,-3px); }
.contact__row{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:12px; }
.clink{ display:flex; align-items:center; gap:14px; background:linear-gradient(165deg,var(--glass),var(--glass-2)); border:1px solid var(--stroke); backdrop-filter:blur(8px); border-radius:14px; padding:16px 20px; min-width:280px; text-align:left; transition:transform .3s var(--ease-out), border-color .3s, box-shadow .3s; }
.clink:hover{ transform:translateY(-3px); border-color:var(--red); box-shadow:0 20px 40px -16px var(--redglow); }
.clink__ico{ width:44px; height:44px; border-radius:11px; background:rgba(229,52,42,.12); display:grid; place-items:center; flex:none; }
.clink__ico::before{ content:""; width:24px; height:24px; background:var(--red); mask-size:contain; -webkit-mask-size:contain; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; mask-position:center; -webkit-mask-position:center; }
.clink b{ font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.03em; display:block; }
.clink span{ font-size:.84rem; color:var(--muted); } .clink .mono{ font-size:.78rem; }
.clink__arrow{ margin-left:auto; width:18px; height:18px; border-top:2px solid var(--muted); border-right:2px solid var(--muted); transform:rotate(45deg); transition:border-color .2s; }
.clink:hover .clink__arrow{ border-color:var(--red); }
.clink--static:hover{ transform:none; border-color:var(--stroke); box-shadow:none; }
.copy{ margin-left:auto; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--red); background:none; border:1px solid var(--stroke); border-radius:8px; padding:8px 13px; cursor:pointer; transition:all .2s; }
.copy:hover{ background:var(--red); color:#fff; border-color:var(--red); }
[data-ico="discord"]::before{ mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M19.3 5.3A16 16 0 0015.5 4l-.2.4a12 12 0 013.4 1.7 11 11 0 00-9.4 0A12 12 0 0112.7 4.4L12.5 4a16 16 0 00-3.8 1.3C5.6 9.9 4.8 14.3 5.2 18.7A16 16 0 009.9 21l.4-.6a10 10 0 01-1.6-.8l.4-.3a11.4 11.4 0 009.8 0l.4.3a10 10 0 01-1.6.8l.4.6a16 16 0 004.7-2.3c.5-5.1-.8-9.5-3.9-13.4zM9.7 15.9c-.9 0-1.7-.9-1.7-1.9s.7-1.9 1.7-1.9 1.7.9 1.7 1.9-.7 1.9-1.7 1.9zm4.6 0c-.9 0-1.7-.9-1.7-1.9s.7-1.9 1.7-1.9 1.7.9 1.7 1.9-.8 1.9-1.7 1.9z'/%3E%3C/svg%3E"); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M19.3 5.3A16 16 0 0015.5 4l-.2.4a12 12 0 013.4 1.7 11 11 0 00-9.4 0A12 12 0 0112.7 4.4L12.5 4a16 16 0 00-3.8 1.3C5.6 9.9 4.8 14.3 5.2 18.7A16 16 0 009.9 21l.4-.6a10 10 0 01-1.6-.8l.4-.3a11.4 11.4 0 009.8 0l.4.3a10 10 0 01-1.6.8l.4.6a16 16 0 004.7-2.3c.5-5.1-.8-9.5-3.9-13.4zM9.7 15.9c-.9 0-1.7-.9-1.7-1.9s.7-1.9 1.7-1.9 1.7.9 1.7 1.9-.7 1.9-1.7 1.9zm4.6 0c-.9 0-1.7-.9-1.7-1.9s.7-1.9 1.7-1.9 1.7.9 1.7 1.9-.8 1.9-1.7 1.9z'/%3E%3C/svg%3E"); }
[data-ico="youtube"]::before{ mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M23 12s0-3.6-.5-5.3a2.7 2.7 0 00-1.9-1.9C18.9 4.3 12 4.3 12 4.3s-6.9 0-8.6.5a2.7 2.7 0 00-1.9 1.9C1 8.4 1 12 1 12s0 3.6.5 5.3a2.7 2.7 0 001.9 1.9c1.7.5 8.6.5 8.6.5s6.9 0 8.6-.5a2.7 2.7 0 001.9-1.9C23 15.6 23 12 23 12zM9.8 15.3V8.7l5.7 3.3-5.7 3.3z'/%3E%3C/svg%3E"); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M23 12s0-3.6-.5-5.3a2.7 2.7 0 00-1.9-1.9C18.9 4.3 12 4.3 12 4.3s-6.9 0-8.6.5a2.7 2.7 0 00-1.9 1.9C1 8.4 1 12 1 12s0 3.6.5 5.3a2.7 2.7 0 001.9 1.9c1.7.5 8.6.5 8.6.5s6.9 0 8.6-.5a2.7 2.7 0 001.9-1.9C23 15.6 23 12 23 12zM9.8 15.3V8.7l5.7 3.3-5.7 3.3z'/%3E%3C/svg%3E"); }
[data-ico="tag"]::before{ mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M10 3h4l-1 4h4l-1 4h-4l-1 4H7l1-4H4l1-4h4l1-4z'/%3E%3C/svg%3E"); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M10 3h4l-1 4h4l-1 4h-4l-1 4H7l1-4H4l1-4h4l1-4z'/%3E%3C/svg%3E"); }

/* ============ FOOTER ============ */
.footer{ position:relative; z-index:2; padding:60px 0 40px; border-top:1px solid var(--stroke-2); overflow:hidden; }
.footer__mark{ font-family:var(--display); font-weight:700; font-size:clamp(3rem,16vw,13rem); text-align:center; line-height:.9; letter-spacing:.02em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.06); text-stroke:1px rgba(255,255,255,.06); user-select:none; margin-bottom:20px; }
.footer__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer .brand img{ width:32px; height:32px; }
.footer__note{ color:var(--muted-2); font-size:.84rem; } .footer__note a{ color:var(--red); }
.footer__links{ display:flex; gap:20px; } .footer__links a{ color:var(--muted); font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; } .footer__links a:hover{ color:var(--red); }

/* ============ LIGHTBOX ============ */
.lightbox{ position:fixed; inset:0; z-index:150; display:none; align-items:center; justify-content:center; padding:40px; background:rgba(5,5,7,.96); backdrop-filter:blur(10px); }
.lightbox.open{ display:flex; }
.lightbox__stage{ position:relative; max-width:92vw; max-height:86vh; }
.lightbox__img{ max-width:92vw; max-height:80vh; border-radius:12px; border:1px solid var(--stroke); box-shadow:0 40px 100px rgba(0,0,0,.7); }
.lightbox__cap{ position:absolute; left:0; bottom:-32px; font-family:var(--mono); font-size:.8rem; color:var(--muted); letter-spacing:.05em; }
.lightbox__cap b{ color:var(--ink); font-weight:500; } .lightbox__cap em{ color:var(--red); font-style:normal; }
.lightbox__close{ position:absolute; top:22px; right:28px; font-size:2.4rem; line-height:1; color:var(--ink); background:none; border:0; cursor:pointer; }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; border-radius:50%; background:rgba(20,20,24,.6); border:1px solid var(--stroke); color:var(--ink); font-size:1.8rem; cursor:pointer; transition:background .2s, border-color .2s; }
.lightbox__nav:hover{ background:var(--red); border-color:var(--red); } .lightbox__prev{ left:24px; } .lightbox__next{ right:24px; }
.lightbox__count{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:.78rem; color:var(--muted); letter-spacing:.1em; }

/* ============ RESPONSIVE ============ */
@media (max-width:960px){
  .hero__grid{ grid-template-columns:1fr; text-align:center; gap:26px; }
  .hero__text{ order:2; } .hero__eyebrow,.hero__cta,.hero__stats{ justify-content:center; } .hero__eyebrow{ display:inline-flex; }
  .hero__stage{ order:1; width:min(360px,74vw); }
  .svcs{ grid-template-columns:repeat(2,1fr); }
  .about{ grid-template-columns:1fr; gap:36px; } .about__frame{ max-width:420px; margin-inline:auto; width:100%; } .about__text{ text-align:center; } .about__text .eyebrow,.chips{ justify-content:center; } .about__text .btn{ margin-inline:auto; } .about__text p{ margin-inline:auto; }
  .tile,.tile--xl,.tile--wide,.tile:nth-child(8){ grid-column:span 6; aspect-ratio:4/3; }
  .nav__links{ display:none; }
  .nav__links.open{ display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0; padding:10px 26px 18px; background:rgba(8,8,10,.96); backdrop-filter:blur(16px); border-bottom:1px solid var(--stroke); }
  .nav__links.open a{ padding:13px 0; font-size:.9rem; border-bottom:1px solid var(--stroke-2); }
  .nav__burger{ display:flex; }
}
@media (max-width:600px){
  .gallery{ grid-template-columns:1fr 1fr; }
  .tile,.tile--xl,.tile--wide,.tile:nth-child(8){ grid-column:span 2; aspect-ratio:16/11; }
  .svcs{ grid-template-columns:1fr; }
  .hero__stats{ gap:22px; } .section{ padding:88px 0; }
  .clink{ min-width:0; width:100%; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  html{ scroll-behavior:auto; }
  /* Reveal-forcing removed on purpose: with reduced motion the JS runs a "lite"
     path (gentle opacity crossfades, no movement) so the page still feels alive.
     If JS/GSAP fails, .no-anim (line 31) + the 5s <head> safety timeout reveal all. */
}