:root{
  --bg:#05060a;
  --bg2:#070a11;
  --bg3:#060812;
  --panel: rgba(255,255,255,0.035);
  --panel2: rgba(255,255,255,0.055);
  --text:#e9f2ff;
  --muted:rgba(233,242,255,0.72);

  --neon:#39ffbd;
  --neon2:#00f0ff;
  --warn:#ff5bd6;

  --shadow: 0 18px 40px rgba(0,0,0,0.55);
  --stroke: rgba(255,255,255,0.10);

  --radius: 18px;
  --radius2: 24px;

  --container: 1160px;
  --padX: 20px;

  --hTop: 76px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* subtle global ambience (uniform, doesn't bleed between sections) */
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(900px 700px at 20% 10%, rgba(57,255,189,0.07), transparent 60%),
    radial-gradient(900px 700px at 85% 12%, rgba(0,240,255,0.06), transparent 60%),
    radial-gradient(800px 700px at 65% 92%, rgba(255,91,214,0.045), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%);
  opacity:1;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.skip{position:absolute; left:-999px; top:10px; background:#111; padding:10px 12px; border-radius:10px; z-index:9999}
.skip:focus{left:10px}

.container{width:min(var(--container), calc(100% - var(--padX)*2)); margin:0 auto;}

/* ------------------------------------------------------------
   Preloader
------------------------------------------------------------ */
.preloader{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  background: radial-gradient(900px 700px at 25% 25%, rgba(57,255,189,0.10), transparent 60%),
              radial-gradient(800px 700px at 75% 35%, rgba(0,240,255,0.09), transparent 60%),
              linear-gradient(180deg, rgba(6,8,12,0.98), rgba(6,8,12,0.98));
  transition: opacity .45s ease, visibility .45s ease;
}
.preloader.is-done{opacity:0; visibility:hidden}
.preloader__inner{display:flex; flex-direction:column; align-items:center; gap:14px}
.preloader__logo{
  letter-spacing:0.32em;
  font-weight:950;
  font-size:14px;
  color:rgba(233,242,255,0.92);
  text-shadow: 0 0 18px rgba(57,255,189,0.18);
}
.preloader__bar{
  width:220px;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  overflow:hidden;
}
.preloader__bar span{
  display:block;
  height:100%;
  width:46%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(57,255,189,0.0), rgba(57,255,189,0.75), rgba(0,240,255,0.75), rgba(255,91,214,0.25));
  filter: drop-shadow(0 0 14px rgba(57,255,189,0.22));
  animation: preload 1.15s ease-in-out infinite;
}
@keyframes preload{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(260%)}
}

/* ------------------------------------------------------------
   Custom cursor (desktop)
------------------------------------------------------------ */
.cursor, .cursor2{
  position:fixed;
  top:0; left:0;
  width:14px; height:14px;
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform: translate(-50%, -50%);
  opacity:0;
}
.cursor{background: rgba(57,255,189,0.9); filter: drop-shadow(0 0 12px rgba(57,255,189,0.35));}
.cursor2{
  width:36px; height:36px;
  border:1px solid rgba(233,242,255,0.22);
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(6px);
  transition: transform .12s ease, border-color .12s ease, opacity .18s ease;
}
.cursor.is-on, .cursor2.is-on{opacity:1}
.cursor2.is-hover{transform: translate(-50%,-50%) scale(1.25); border-color: rgba(57,255,189,0.40)}
@media (pointer:coarse){
  .cursor, .cursor2{display:none !important}
}

/* Scroll progress */
.progress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0;
  background: linear-gradient(90deg, rgba(57,255,189,0.85), rgba(0,240,255,0.85), rgba(255,91,214,0.35));
  z-index:999;
  box-shadow: 0 0 18px rgba(57,255,189,0.18);
}

/* ------------------------------------------------------------
   Topbar / Nav
------------------------------------------------------------ */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(6,8,12,0.92), rgba(6,8,12,0.72));
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.topbar__inner{height:var(--hTop); display:flex; align-items:center; justify-content:space-between; gap:16px}

.brand{display:flex; align-items:center; gap:12px; min-width:240px}
.brand__mark{width:42px; height:42px}
.brand__name{letter-spacing:0.18em; font-weight:850; font-size:14px}
.brand__tag{font-size:12px; color:var(--muted); margin-top:2px}

.nav{display:flex; align-items:center}
.nav__toggle{display:none; background:transparent; border:0; padding:10px; border-radius:12px}
.nav__toggleBars{display:block; width:24px; height:2px; background:rgba(233,242,255,0.8); position:relative}
.nav__toggleBars:before,.nav__toggleBars:after{content:""; position:absolute; left:0; width:24px; height:2px; background:rgba(233,242,255,0.8)}
.nav__toggleBars:before{top:-7px}
.nav__toggleBars:after{top:7px}

.nav__menu{display:flex; gap:18px; list-style:none; padding:0; margin:0}
.nav__link{
  display:inline-flex;
  padding:10px 12px;
  border-radius:12px;
  color:rgba(233,242,255,0.84);
  font-weight:750;
  font-size:13px;
  letter-spacing:0.04em;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.nav__link:hover{background:rgba(255,255,255,0.04)}
.nav__link.is-active{color:var(--text); background:rgba(57,255,189,0.12); box-shadow: inset 0 0 0 1px rgba(57,255,189,0.20)}

.topbar__actions{display:flex; align-items:center; gap:12px; min-width:240px; justify-content:flex-end}

.lang{display:flex; gap:6px; padding:6px; border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08)}
.lang__btn{border:0; padding:8px 10px; border-radius:12px; cursor:pointer; background:transparent; color:rgba(233,242,255,0.80); font-weight:800; font-size:12px}
.lang__btn.is-active{background:rgba(57,255,189,0.12); color:var(--text); box-shadow: inset 0 0 0 1px rgba(57,255,189,0.25)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  color:var(--text);
  font-weight:800;
  letter-spacing:0.04em;
  font-size:13px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn--primary{
  background: linear-gradient(135deg, rgba(57,255,189,0.20), rgba(0,240,255,0.14));
  border-color: rgba(57,255,189,0.35);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35), 0 0 0 1px rgba(57,255,189,0.12) inset;
}
.btn--primary:hover{box-shadow: 0 18px 36px rgba(0,0,0,0.45), 0 0 0 1px rgba(57,255,189,0.22) inset}
.btn--ghost{background: transparent; border-color: rgba(255,255,255,0.12)}
.btn--wide{width:100%}

/* ------------------------------------------------------------
   Sections (NO overlap by design)
------------------------------------------------------------ */
.section{
  position:relative;
  padding: clamp(54px, 6vw, 90px) 0;
  overflow:hidden;
  isolation:isolate; /* keep backgrounds inside section */
  background: var(--secBase, var(--bg));
}
.section__bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background: var(--secFx, none);
}
.section > .container{position:relative; z-index:1}

.section__header{max-width:780px; margin-bottom:28px}
.section__title{margin:0 0 10px; font-size: clamp(26px, 3vw, 36px); letter-spacing:0.02em}
.section__subtitle{margin:0; color:var(--muted); line-height:1.6}

.section__divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(57,255,189,0.35), transparent);
  opacity:0.55;
  margin-top: clamp(40px, 4.6vw, 62px);
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(57,255,189,0.08);
  border:1px solid rgba(57,255,189,0.18);
  color:rgba(233,242,255,0.92);
  letter-spacing:0.12em;
  font-weight:900;
  font-size:11px;
  text-transform:uppercase;
}

/* ------------------------------------------------------------
   Hero
------------------------------------------------------------ */
.hero{
  --secBase: var(--bg);
  --secFx:
    radial-gradient(820px 580px at 15% 35%, rgba(57,255,189,0.12), transparent 62%),
    radial-gradient(760px 560px at 86% 30%, rgba(0,240,255,0.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 38%);
}
.hero{
  padding-top: calc(var(--hTop) + 38px);
  padding-bottom: 74px;
}
.hero__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:0.55;
  pointer-events:none;
}
.hero__gridFx{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0.14;
  background:
    repeating-linear-gradient(90deg, rgba(57,255,189,0.10) 0, rgba(57,255,189,0.10) 1px, transparent 1px, transparent 84px),
    repeating-linear-gradient(0deg, rgba(0,240,255,0.09) 0, rgba(0,240,255,0.09) 1px, transparent 1px, transparent 84px);
  transform: translate3d(0,0,0);
  animation: gridDrift 22s linear infinite;
}
@keyframes gridDrift{
  from{transform: translate3d(0,0,0)}
  to{transform: translate3d(-84px,84px,0)}
}

.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(26px, 4vw, 60px);
  align-items:center;
}
.hero__title{
  margin:18px 0 14px;
  font-size: clamp(38px, 5vw, 62px);
  line-height:1.04;
  letter-spacing:-0.02em;
}
.hero__titleAccent{display:block; color: rgba(57,255,189,0.95); text-shadow: 0 0 22px rgba(57,255,189,0.16)}
.hero__lead{margin:0; color:var(--muted); font-size: 16px; line-height:1.75; max-width: 62ch}

.hero__type{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  color: rgba(233,242,255,0.86);
  font-weight:750;
}
.hero__typeLabel{letter-spacing:0.10em; text-transform:uppercase; font-size:11px; color: rgba(233,242,255,0.62)}
.hero__typeText{font-size:14px}
.typeCursor{opacity:0.9; animation: blink 0.9s steps(2,end) infinite}
@keyframes blink{50%{opacity:0.15}}

.hero__meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.pill{padding:10px 12px; border-radius:999px; background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.10); color:rgba(233,242,255,0.88); font-weight:700; font-size:12px}
.hero__cta{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap}

.hero__stats{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; margin-top:26px}
.stat{padding:14px 14px; border-radius: var(--radius); background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.10)}
.stat__value{font-size:24px; font-weight:950; letter-spacing:0.02em; color:var(--text)}
.stat__label{margin-top:4px; color:var(--muted); font-size:12px; line-height:1.35}

.hero__visual{position:relative; min-height: 520px; display:flex; align-items:flex-end; justify-content:center}
.hero__glow{position:absolute; width: 560px; height: 560px; border-radius: 999px;
  background: radial-gradient(circle at 50% 45%, rgba(57,255,189,0.24), transparent 62%),
              radial-gradient(circle at 45% 55%, rgba(0,240,255,0.18), transparent 60%),
              radial-gradient(circle at 55% 60%, rgba(255,91,214,0.10), transparent 70%);
  opacity: 0.85;
  transform: translateY(46px);
  filter: blur(6px);
}

.hero__img{
  max-height: 580px;
  width:auto;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.55)) drop-shadow(0 0 28px rgba(57,255,189,0.18));
  transform: translateY(8px);
  will-change: transform;
  /* soften edges to feel integrated */
  -webkit-mask-image: radial-gradient(closest-side at 52% 52%, #000 70%, transparent 100%);
  mask-image: radial-gradient(closest-side at 52% 52%, #000 70%, transparent 100%);
}

.hero__scanlines{
  position:absolute;
  inset:-20px;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.022) 0px, rgba(255,255,255,0.022) 1px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 8px);
  opacity: 0.16;
  pointer-events:none;
  animation: scan 4s linear infinite;
}
@keyframes scan{0%{transform:translateY(0)}100%{transform:translateY(28px)}}

/* ------------------------------------------------------------
   About / Services / etc (distinct base colors to prevent bleeding)
------------------------------------------------------------ */
.about{--secBase: var(--bg2); --secFx:
  radial-gradient(950px 680px at 12% 25%, rgba(0,240,255,0.08), transparent 62%),
  linear-gradient(180deg, rgba(255,255,255,0.02), transparent 55%);
}

.services{--secBase: var(--bg3); --secFx:
  radial-gradient(1050px 740px at 90% 25%, rgba(57,255,189,0.09), transparent 62%),
  radial-gradient(900px 600px at 20% 75%, rgba(255,91,214,0.055), transparent 65%),
  linear-gradient(180deg, rgba(255,255,255,0.02), transparent 55%);
}

.portfolio{--secBase: var(--bg2); --secFx:
  radial-gradient(980px 660px at 50% 15%, rgba(0,240,255,0.08), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,0.02), transparent 55%);
}

.apps{--secBase: var(--bg3); --secFx:
  radial-gradient(1000px 650px at 12% 30%, rgba(57,255,189,0.085), transparent 62%),
  radial-gradient(820px 540px at 86% 70%, rgba(255,91,214,0.055), transparent 62%),
  linear-gradient(180deg, rgba(255,255,255,0.02), transparent 55%);
}

.coverage{--secBase: var(--bg2); --secFx:
  radial-gradient(1100px 760px at 70% 35%, rgba(0,240,255,0.08), transparent 62%),
  linear-gradient(180deg, rgba(255,255,255,0.02), transparent 55%);
}

.contact{--secBase: var(--bg3); --secFx:
  radial-gradient(1100px 760px at 10% 20%, rgba(57,255,189,0.08), transparent 62%),
  radial-gradient(900px 600px at 90% 70%, rgba(0,240,255,0.07), transparent 62%),
  linear-gradient(180deg, rgba(255,255,255,0.02), transparent 55%);
}

/* ------------------------------------------------------------
   Grids / cards
------------------------------------------------------------ */
.about__grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px}
.about__card{padding:18px 18px; border-radius: var(--radius2); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10); box-shadow: var(--shadow)}
.about__card h3{margin:0 0 10px; font-size:16px}
.about__card p{margin:0 0 12px; color:var(--muted); line-height:1.7}

.bullets{margin:0; padding-left:18px; color:rgba(233,242,255,0.84)}
.bullets li{margin:8px 0; line-height:1.5}

.callout{border-radius: 16px; padding:14px 14px; background: linear-gradient(135deg, rgba(57,255,189,0.10), rgba(0,240,255,0.06)); border:1px solid rgba(57,255,189,0.20)}
.callout__title{font-weight:950; letter-spacing:0.08em; font-size:12px; text-transform:uppercase}
.callout__body{margin-top:8px; color:rgba(233,242,255,0.86); line-height:1.55}
.tagcloud{display:flex; flex-wrap:wrap; gap:8px}
.tag{padding:8px 10px; border-radius:999px; background: rgba(57,255,189,0.08); border:1px solid rgba(57,255,189,0.16); font-weight:900; font-size:12px; letter-spacing:0.04em}

.services__grid{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px}
.svc{padding:18px 16px; border-radius: var(--radius2); background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.10); box-shadow: var(--shadow); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease}
.svc:hover{transform: translateY(-3px); border-color: rgba(57,255,189,0.22); box-shadow: 0 22px 55px rgba(0,0,0,0.58)}
.svc__top{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.svc__icon{width:36px; height:36px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: rgba(57,255,189,0.10); border:1px solid rgba(57,255,189,0.18); color:rgba(233,242,255,0.95); font-weight:950}
.svc h3{margin:0; font-size:14px}
.svc p{margin:0; color:var(--muted); line-height:1.7}

/* Portfolio */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 18px}
.chip{padding:10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color:rgba(233,242,255,0.85); font-weight:900; letter-spacing:0.06em; font-size:12px; cursor:pointer; transition: transform .12s ease, background .12s ease, border-color .12s ease}
.chip:hover{transform: translateY(-1px)}
.chip.is-active{background: rgba(57,255,189,0.12); border-color: rgba(57,255,189,0.24); color:var(--text)}

.grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px}
.work{margin:0; border-radius: var(--radius2); overflow:hidden; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.10); box-shadow: var(--shadow); cursor:pointer; transform: translateZ(0); transition: transform .18s ease, border-color .18s ease}
.work:hover{transform: translateY(-4px); border-color: rgba(0,240,255,0.20)}
.work img{width:100%; height: 260px; object-fit: cover; object-position: center}
/* Portfolio crop tweaks (avoid awkward cuts) */
.work img[src*="portfolio_horse_field"]{object-position: center 35%;}
.work img[src*="portfolio_stage"]{object-position: center 32%;}
.work img[src*="portfolio_western_rider"]{object-position: center 30%;}
.work img[src*="portfolio_fashion_hat"]{object-position: center 28%;}

.work figcaption{padding:12px 14px; border-top: 1px solid rgba(255,255,255,0.08)}
.work__title{font-weight:950; letter-spacing:0.02em}
.work__meta{margin-top:4px; color:var(--muted); font-size:12px}

.work.is-hiding{opacity:0; transform: translateY(8px) scale(0.98); pointer-events:none}
.work.is-showing{opacity:1; transform:none}

/* Lightbox */
.lightbox{position:fixed; inset:0; background: rgba(0,0,0,0.78); display:none; place-items:center; z-index:200; padding: 22px}
.lightbox.is-open{display:grid; animation: lbFade .18s ease}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
.lightbox img{max-width: min(1100px, 92vw); max-height: 78vh; border-radius: 18px; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 30px 80px rgba(0,0,0,0.6)}
.lightbox__cap{margin-top: 12px; color: rgba(233,242,255,0.86); text-align:center}
.lightbox__close{position:fixed; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: var(--text); font-size: 16px; cursor:pointer}

/* Apps */
.apps__grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px}
.app{padding:18px 18px; border-radius: var(--radius2); background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.10); box-shadow: var(--shadow); transition: transform .16s ease, border-color .16s ease}
.app:hover{transform: translateY(-3px); border-color: rgba(57,255,189,0.22)}
.app h3{margin:0 0 8px; font-size:15px}
.app p{margin:0; color:var(--muted); line-height:1.7}

/* Coverage */
.coverage__grid{display:grid; grid-template-columns: 1fr 1fr; gap:16px}
.coverage__card{padding:18px 18px; border-radius: var(--radius2); background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.10); box-shadow: var(--shadow)}
.quotes{display:grid; gap:10px; margin-top:12px}
.quote{padding:12px 12px; border-radius: 16px; background: rgba(57,255,189,0.08); border:1px solid rgba(57,255,189,0.16); color: rgba(233,242,255,0.90); line-height:1.55}


/* Q&A */
.qa{--secBase: var(--bg2); --secFx:
  radial-gradient(1000px 700px at 15% 15%, rgba(0,240,255,0.07), transparent 62%),
  radial-gradient(900px 650px at 85% 80%, rgba(57,255,189,0.07), transparent 64%);
}
.qa__list{display:grid; gap:12px; max-width:980px; margin:0 auto}
.qa__item{border-radius:var(--radius2); background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.10); box-shadow:var(--shadow); overflow:hidden; transition:border-color .16s ease, background .16s ease}
.qa__item:hover,.qa__item[open]{border-color:rgba(57,255,189,0.24); background:rgba(255,255,255,0.045)}
.qa__item summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 20px; font-weight:950; line-height:1.4}
.qa__item summary::-webkit-details-marker{display:none}
.qa__plus{position:relative; flex:0 0 22px; width:22px; height:22px; border-radius:50%; border:1px solid rgba(57,255,189,0.28); background:rgba(57,255,189,0.08)}
.qa__plus::before,.qa__plus::after{content:""; position:absolute; left:50%; top:50%; width:10px; height:2px; background:var(--accent); transform:translate(-50%,-50%); transition:transform .18s ease}
.qa__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa__item[open] .qa__plus::after{transform:translate(-50%,-50%) rotate(0)}
.qa__answer{padding:0 20px 20px; color:var(--muted); line-height:1.75; max-width:90ch}

/* Contact */
.contact__grid{display:grid; grid-template-columns: 1.1fr 0.9fr; gap:16px}
.contact__card{padding:18px 18px; border-radius: var(--radius2); background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.10); box-shadow: var(--shadow)}
.contact__row{display:grid; grid-template-columns: 150px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.06)}
.contact__row:last-child{border-bottom:0}
.contact__k{color:var(--muted); font-weight:900; letter-spacing:0.08em; text-transform:uppercase; font-size:11px}
.contact__v{color:rgba(233,242,255,0.92); font-weight:700}
.contact__cta{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap}
.fine{margin-top:12px; color:rgba(233,242,255,0.60); font-size:12px; line-height:1.55}

.contact__form{padding:18px 18px; border-radius: var(--radius2); background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.10); box-shadow: var(--shadow); display:flex; flex-direction:column; gap:12px}
.field{display:flex; flex-direction:column; gap:8px}
.field span{font-weight:900; letter-spacing:0.06em; text-transform:uppercase; font-size:11px; color:rgba(233,242,255,0.75)}
input,textarea{width:100%; border-radius: 14px; border:1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.18); color:var(--text); padding:12px 12px; outline:none}
input:focus,textarea:focus{border-color: rgba(57,255,189,0.35); box-shadow: 0 0 0 3px rgba(57,255,189,0.10)}
.toast{min-height:18px; color:rgba(57,255,189,0.90); font-weight:850; font-size:12px}

.footer{margin-top: 24px}
.footer__line{height:1px; background: linear-gradient(90deg, transparent, rgba(57,255,189,0.35), transparent); opacity:0.7}
.footer__grid{display:flex; justify-content:space-between; gap:12px; padding:16px 0; color:rgba(233,242,255,0.65); font-size:12px}

/* ------------------------------------------------------------
   Reveal animations (variants)
------------------------------------------------------------ */
.reveal{opacity:0; transform: translateY(14px); transition: opacity .60s ease, transform .60s ease}
.reveal[data-anim="fade-left"]{transform: translateX(-18px)}
.reveal[data-anim="fade-right"]{transform: translateX(18px)}
.reveal[data-anim="zoom"]{transform: scale(0.985)}
.reveal.is-visible{opacity:1; transform:none}

/* ------------------------------------------------------------
   Responsive
------------------------------------------------------------ */
@media (max-width: 1020px){
  .hero__grid{grid-template-columns: 1fr}
  .hero__visual{min-height: 420px}
  .hero__img{max-height: 500px}
  .services__grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .about__grid{grid-template-columns: 1fr}
  .apps__grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .coverage__grid{grid-template-columns: 1fr}
  .contact__grid{grid-template-columns: 1fr}
  .brand{min-width:auto}
  .topbar__actions{min-width:auto}
}
@media (max-width: 760px){
  :root{--hTop: 70px}
  .nav__toggle{display:inline-flex}
  .nav__menu{
    position:absolute;
    top: calc(var(--hTop) + 8px);
    right: var(--padX);
    left: var(--padX);
    flex-direction:column;
    gap:8px;
    background: rgba(6,8,12,0.94);
    border:1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.55);
    display:none;
  }
  .nav__menu.is-open{display:flex}
  .nav__link{width:100%}
  .topbar__actions .btn{display:none}
  .hero__stats{grid-template-columns: 1fr}
  .grid{grid-template-columns: 1fr}
  .services__grid{grid-template-columns: 1fr}
  .apps__grid{grid-template-columns: 1fr}
  .contact__row{grid-template-columns: 120px 1fr}
}


/* Streaming page additions */
.hero--page .hero__grid{ padding-top: 26px; }
.hero--page .hero__title{ font-size: clamp(34px, 5vw, 54px); }
.hero--page .hero__lead{ max-width: 58ch; }

.streaming__list{
  margin-top: 26px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  padding: 18px 18px;
}
.streaming__listTitle{
  margin: 0 0 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(233,242,255,0.84);
}
.streaming__ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(233,242,255,0.78);
  line-height: 1.7;
  font-weight: 650;
}
.streaming__ul li{ margin: 6px 0; }

.vgrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 14px;
}
.vcard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  overflow:hidden;
}
.vcard__media video{
  width: 100%;
  height: auto;
  display:block;
  background: #000;
}
.vcard__cap{
  padding: 12px 14px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(233,242,255,0.78);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.grid--press .work img{ object-fit: contain; background: rgba(0,0,0,0.25); }
.work--press{ min-height: 210px; }
.press__note{
  margin-top: 14px;
  color: rgba(233,242,255,0.62);
  font-size: 12px;
  line-height: 1.6;
}

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