/* ============================================================
   LUMINARY CONCEPTS — blue + amber, always-night
   Dependency-free. Fraunces (display) + Manrope (text).
   ============================================================ */

@font-face{
  font-family:'Clash Display';
  src:url('assets/fonts/clash-500.woff2') format('woff2');
  font-weight:500; font-display:swap; font-style:normal;
}
@font-face{
  font-family:'Clash Display';
  src:url('assets/fonts/clash-600.woff2') format('woff2');
  font-weight:600; font-display:swap; font-style:normal;
}
@font-face{
  font-family:'Clash Display';
  src:url('assets/fonts/clash-700.woff2') format('woff2');
  font-weight:700; font-display:swap; font-style:normal;
}
@font-face{
  font-family:'Manrope';
  src:url('assets/fonts/manrope.woff2') format('woff2');
  font-weight:300 800; font-display:swap; font-style:normal;
}

@property --pos{ syntax:'<percentage>'; inherits:false; initial-value:50%; }

:root{
  --night-900:#04060d; --night-850:#070b16; --night-800:#0a1020; --night-700:#0e1730;
  --blue:#3d7ec2; --blue-2:#2a5c96; --blue-deep:#0b1e3a; --blue-glow:#5aa0e6;
  --amber:#ffb463; --amber-hot:#ffd9a1; --amber-core:#fff4e2; --amber-deep:#e08a3a;
  --fg:#eaf1fb; --muted:#93a6c4; --line:rgba(120,150,190,.16);
  --display:'Clash Display',Futura,'Avenir Next',sans-serif;
  --sans:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --maxw:1200px; --pad:clamp(20px,5vw,64px);
  --glow-amber:0 0 22px rgba(255,180,99,.55), 0 0 60px rgba(255,150,60,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
  --night-progress:0;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans); color:var(--fg); line-height:1.6;
  background:
    radial-gradient(1200px 700px at 78% 120px, rgba(61,126,194,.28), transparent 60%),
    radial-gradient(900px 500px at 12% 40px, rgba(255,180,99,.07), transparent 55%),
    linear-gradient(180deg, var(--blue-deep) 0%, var(--night-850) 18%, var(--night-900) 46%, #030509 100%);
  background-repeat:no-repeat;
  background-color:var(--night-900);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
/* night deepens as you scroll */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 120%, #000 0%, transparent 70%);
  opacity:var(--night-progress); transition:opacity .4s linear;
}
.grain{
  position:fixed; inset:0; z-index:1; 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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main{position:relative; z-index:2}

/* ---------- Scroll-powered light string ---------- */
.wire{position:absolute; top:0; left:0; z-index:0; pointer-events:none}
.wire__cold{fill:none; stroke:#2e4260; stroke-width:1.5; stroke-dasharray:3 8; opacity:.55}
.wire__glow{fill:none; stroke:rgba(255,172,84,.2); stroke-width:10; stroke-linecap:round; stroke-dasharray:0 99999}
.wire__hot{fill:none; stroke:#ffc98a; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:0 99999;
  filter:drop-shadow(0 0 5px rgba(255,180,100,.8))}
.wbulb__halo{fill:rgba(255,172,84,0); transition:fill .5s var(--ease)}
.wbulb__core{fill:#22334e; stroke:#3a4f70; stroke-width:1; transition:fill .35s var(--ease), stroke .35s}
.wbulb.on .wbulb__halo{fill:rgba(255,172,84,.16)}
.wbulb.on .wbulb__core{fill:#ffe9c4; stroke:#ffc47e; filter:drop-shadow(0 0 7px rgba(255,190,110,.95)) drop-shadow(0 0 18px rgba(255,160,70,.5))}
.wire__spark{opacity:0; transition:opacity .3s}
.wire__sparkhalo{fill:rgba(255,190,110,.22); animation:sparkPulse 1.6s ease-in-out infinite}
.wire__sparkcore{fill:#fff4e0; filter:drop-shadow(0 0 8px rgba(255,220,160,1)) drop-shadow(0 0 22px rgba(255,170,80,.8))}
@keyframes sparkPulse{0%,100%{opacity:.6}50%{opacity:1}}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.04; letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.15rem,2.1vw,1.5rem)}
.eyebrow{
  font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.24em;
  font-size:.72rem; color:var(--blue-glow); margin-bottom:1rem;
}
.eyebrow--amber{color:var(--amber)}
.lit{
  color:var(--amber);
  text-shadow:0 0 26px rgba(255,170,80,.35);
}

/* ---------- Buttons ---------- */
.btn{
  --b:var(--amber);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:700; font-size:.95rem; letter-spacing:.01em;
  padding:.85em 1.4em; border-radius:100px; cursor:pointer; border:1px solid transparent;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s;
  white-space:nowrap;
}
.btn--lg{padding:1.05em 1.8em; font-size:1rem}
.btn--amber{
  background:linear-gradient(180deg,var(--amber-hot),var(--amber));
  color:#3a1f05; box-shadow:0 8px 30px rgba(255,150,60,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--amber:hover{transform:translateY(-2px); box-shadow:0 12px 40px rgba(255,160,70,.5), inset 0 1px 0 rgba(255,255,255,.5)}
.btn--ghost{
  background:rgba(255,255,255,.04); color:var(--fg); border-color:var(--line);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{border-color:var(--blue-glow); color:#fff; transform:translateY(-2px); box-shadow:0 8px 30px rgba(61,126,194,.25)}

/* ---------- Logo ---------- */

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:1.5rem;
  padding:1.1rem var(--pad);
  transition:padding .35s var(--ease), background .35s, backdrop-filter .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding:.6rem var(--pad);
  background:rgba(6,10,20,.72); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.nav__brand{display:flex; align-items:center; gap:.6rem; margin-right:auto}
.nav__logo{height:34px; width:auto; display:block; filter:drop-shadow(0 0 10px rgba(90,170,230,.45))}
.nav__word{font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.11em; font-size:.82rem; color:#fff; line-height:1}
.nav__links{display:flex; gap:1.6rem}
.nav__links a{font-weight:600; font-size:.92rem; color:var(--muted); position:relative; transition:color .25s}
.nav__links a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--amber); box-shadow:var(--glow-amber); transition:width .3s var(--ease)}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{width:100%}
.nav__cta{display:flex; align-items:center; gap:.7rem}
.nav__cta .btn--ghost{font-size:.85rem; padding:.6em 1em}
.nav__cta .btn--amber{font-size:.85rem; padding:.65em 1.1em}
.nav__burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px}
.nav__burger span{width:24px; height:2px; background:#fff; border-radius:2px; transition:.3s var(--ease)}
.nav.open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav__burger span:nth-child(2){opacity:0}
.nav.open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobilemenu{
  position:fixed; inset:0 0 0 auto; width:min(82vw,360px); z-index:49;
  background:rgba(8,12,22,.96); backdrop-filter:blur(18px);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column; gap:.4rem; padding:6rem 2rem 2rem;
  transform:translateX(100%); transition:transform .4s var(--ease); visibility:hidden;
}
.mobilemenu.open{transform:none; visibility:visible}
.mobilemenu a{font-family:var(--display); font-weight:600; font-size:1.35rem; padding:.5rem 0; color:var(--fg); border-bottom:1px solid var(--line)}
.mobilemenu a:hover{color:var(--amber)}
.mm__cta{color:var(--amber)!important; border:0!important; margin-top:1rem}
.mm__phone{border:0!important; color:var(--muted)!important; font-family:var(--sans)!important; font-size:1rem!important}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:7rem var(--pad) 5rem; overflow:hidden}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__img{width:100%; height:100%; object-fit:cover; object-position:center 40%; transform:scale(1.06); will-change:transform}
.hero__wash{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,14,32,.55) 0%, rgba(6,10,22,.35) 38%, rgba(4,6,13,.86) 84%, var(--night-900) 100%),
    linear-gradient(90deg, rgba(4,8,18,.7) 0%, transparent 55%);
}
.hero__glow{
  position:absolute; left:6%; top:34%; width:min(60vw,620px); aspect-ratio:1; z-index:1;
  background:radial-gradient(circle, rgba(255,180,100,.28), rgba(255,150,70,.08) 40%, transparent 68%);
  filter:blur(10px); pointer-events:none;
}
.hero__inner{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100%}
.hero__logo{display:flex; align-items:center; gap:1.3rem; margin-bottom:2.2rem}
.emblem{width:72px; height:auto; overflow:visible;
  filter:drop-shadow(0 0 16px rgba(62,190,232,.35)); animation:emGlow 5s ease-in-out 2s infinite}
@keyframes emGlow{
  0%,100%{filter:drop-shadow(0 0 16px rgba(62,190,232,.35))}
  50%{filter:drop-shadow(0 0 24px rgba(62,190,232,.55)) drop-shadow(0 0 40px rgba(255,215,94,.18))}
}
/* power-on: bolt strikes → filament draws → crescent glows → bulb fills */
.em-bolt{animation:emStrike .55s ease-out both}
.em-sliver{animation:emStrike .55s ease-out .12s both}
@keyframes emStrike{
  0%{opacity:0; transform:translateY(-8px)}
  35%{opacity:1; transform:none} 45%{opacity:.35} 55%{opacity:1} 68%{opacity:.55} 80%{opacity:1}
  100%{opacity:1; transform:none}
}
.em-bulb{animation:emFill 1s var(--ease) .45s both}
@keyframes emFill{from{opacity:.18}to{opacity:1}}
.em-fil{stroke-dasharray:100; stroke-dashoffset:100; animation:emDraw .7s var(--ease) .65s forwards}
@keyframes emDraw{to{stroke-dashoffset:0}}
.em-tick{animation:emFade .4s ease .95s both}
.em-cres{animation:emFade .6s ease 1.15s both}
@keyframes emFade{from{opacity:0}to{opacity:1}}
.hero__brand{display:flex; flex-direction:column; gap:.35rem}
.hero__brandname{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.25rem,2.6vw,1.7rem); letter-spacing:.13em; line-height:1;
  background:linear-gradient(90deg,#3fd6c8,#3f9fe8);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero__brandtag{font-weight:600; text-transform:uppercase; font-size:.6rem; letter-spacing:.42em; color:#8fb4d8}
.foot__logo{display:inline-flex; align-items:center; gap:.55rem}
.foot__logo img{height:30px; width:auto; filter:drop-shadow(0 0 8px rgba(90,170,230,.4))}
.hero__headline{font-size:clamp(2.6rem,7vw,5.4rem); max-width:16ch; margin-bottom:1.4rem; opacity:0; transform:translateY(20px); animation:riseIn 1s var(--ease) .5s forwards}
.hero__sub{font-size:clamp(1.02rem,1.5vw,1.22rem); color:#cdd9ec; max-width:56ch; margin-bottom:2rem; opacity:0; transform:translateY(20px); animation:riseIn 1s var(--ease) .7s forwards}
.hero__sub strong{color:#fff}
.hero__actions{display:flex; gap:1rem; flex-wrap:wrap; opacity:0; animation:riseIn 1s var(--ease) .9s forwards}
.hero__badges{list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-top:2.4rem; opacity:0; animation:riseIn 1s var(--ease) 1.1s forwards}
.hero__badges li{font-size:.82rem; font-weight:600; color:var(--muted); letter-spacing:.02em; display:flex; align-items:center; gap:.55rem}
.hero__badges li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:var(--glow-amber)}
@keyframes riseIn{to{opacity:1; transform:none}}
.hero__scroll{position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:.5rem; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted)}
.hero__scroll-line{width:1px; height:40px; background:linear-gradient(var(--amber),transparent); animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.3; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}

/* ============================================================
   SECTIONS (shared)
   ============================================================ */
.section{position:relative; z-index:1; padding:clamp(4.5rem,10vw,8rem) var(--pad); max-width:var(--maxw); margin:0 auto}
.section__head{max-width:60ch; margin-bottom:3rem}
.section__head h2{margin-top:.3rem}
.section__note{color:var(--muted); margin-top:.8rem; font-size:.95rem}

/* reveal-on-scroll — visible by default; JS adds .is-hidden to below-fold elements and animates them in */
.reveal{transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.is-hidden{opacity:0; transform:translateY(26px)}

/* ---------- Intro ---------- */
.intro{text-align:left; max-width:900px}
.intro__spot{position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(340px 340px at var(--mx,50%) var(--my,40%), rgba(255,180,100,.14), transparent 70%);
  opacity:0; transition:opacity .5s}
.intro:hover .intro__spot{opacity:1}
.intro__headline{position:relative; z-index:1; font-size:clamp(1.7rem,3.6vw,2.9rem); line-height:1.12; margin-bottom:1.6rem}
.intro__lead{position:relative; z-index:1; font-size:clamp(1.02rem,1.4vw,1.18rem); color:#c3d0e6; max-width:64ch}

/* ---------- Services ---------- */
.svc-group{margin-bottom:3rem}
.svc-group__label{font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; color:var(--muted); padding-bottom:1rem; margin-bottom:1.4rem; border-bottom:1px solid var(--line)}
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem}
.svc{
  position:relative; padding:1.6rem 1.5rem; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border:1px solid var(--line);
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.svc::before{content:""; position:absolute; inset:0; border-radius:16px; padding:1px;
  background:linear-gradient(120deg, transparent 40%, rgba(255,180,100,.5), transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s}
.svc:hover{transform:translateY(-4px); border-color:rgba(255,180,100,.4); box-shadow:0 18px 50px rgba(0,0,0,.4)}
.svc:hover::before{opacity:1}
.svc__dot{display:block; width:11px; height:11px; border-radius:50%; margin-bottom:1rem;
  background:#2c3c58; transition:background .6s var(--ease), box-shadow .6s var(--ease)}
.svc.lit-on .svc__dot{background:var(--amber); box-shadow:var(--glow-amber)}
.svc.lit-on .svc__dot--rgb{background:var(--blue-glow); box-shadow:0 0 22px rgba(90,160,230,.7),0 0 60px rgba(60,120,220,.4)}
.svc.lit-on .svc__dot--amber{background:var(--amber-hot); box-shadow:0 0 26px rgba(255,190,110,.8),0 0 70px rgba(255,150,60,.5)}
.svc h4{font-family:var(--display); font-weight:600; font-size:1.08rem; margin-bottom:.4rem}
.svc p{font-size:.92rem; color:var(--muted)}
.svc p a{color:var(--amber); font-weight:600}

/* ---------- Amber / turtle (compact callout band) ---------- */
.amberband{padding-top:0; padding-bottom:0}
.amberband__inner{display:flex; align-items:center; gap:1.6rem;
  background:linear-gradient(90deg, rgba(255,170,80,.08), rgba(255,255,255,.015) 60%);
  border:1px solid rgba(255,180,100,.22); border-radius:18px; padding:1.5rem 1.8rem}
.amberband__lamp{flex:none; width:12px; height:12px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 14px rgba(255,180,100,.8), 0 0 44px rgba(255,150,60,.45)}
.amberband__copy{flex:1}
.amberband__copy h3{font-size:1.15rem; margin-bottom:.3rem}
.amberband__copy p{color:var(--muted); font-size:.94rem; max-width:72ch}
.amberband .btn{flex:none}
@media (max-width:700px){
  .amberband__inner{flex-direction:column; align-items:flex-start; gap:1rem}
}

/* ---------- Work / before-after / gallery ---------- */
.ba{margin-bottom:2rem; border-radius:20px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ba__frame{position:relative; aspect-ratio:16/9; user-select:none; touch-action:pan-y; cursor:ew-resize}
.ba__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba__before{position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); transition:--pos .8s var(--ease)}
.ba__img--before{filter:brightness(.26) saturate(.55) hue-rotate(200deg) contrast(1.05)}
.ba__handle{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:var(--amber); box-shadow:var(--glow-amber); transform:translateX(-1px); transition:left .8s var(--ease); display:grid; place-items:center}
.ba__grip{width:44px; height:44px; border-radius:50%; background:rgba(10,14,24,.8); border:2px solid var(--amber); box-shadow:var(--glow-amber); backdrop-filter:blur(4px); position:relative}
.ba__grip::before,.ba__grip::after{content:""; position:absolute; top:50%; width:0;height:0; border:5px solid transparent; transform:translateY(-50%)}
.ba__grip::before{left:8px; border-right-color:var(--amber)}
.ba__grip::after{right:8px; border-left-color:var(--amber)}
.ba.dragging .ba__before,.ba.dragging .ba__handle{transition:none}
.ba__tag{position:absolute; bottom:14px; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.35em .7em; border-radius:100px; backdrop-filter:blur(6px)}
.ba__tag--on{right:14px; color:var(--amber); background:rgba(10,14,24,.6); border:1px solid rgba(255,180,100,.4)}
.ba__tag--off{left:14px; color:var(--muted); background:rgba(10,14,24,.6); border:1px solid var(--line)}

.gallery{column-count:3; column-gap:14px; margin-top:2rem}
.gal{position:relative; break-inside:avoid; margin-bottom:14px; border-radius:14px; overflow:hidden; cursor:pointer; border:1px solid var(--line)}
.gal img{width:100%; transition:transform .6s var(--ease), filter .6s}
.gal figcaption{position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1rem .9rem; font-size:.82rem; font-weight:600; color:#fff;
  background:linear-gradient(transparent, rgba(4,8,16,.85)); opacity:0; transform:translateY(8px); transition:.4s var(--ease)}
.gal::after{content:""; position:absolute; inset:0; border-radius:14px; box-shadow:inset 0 0 0 1px rgba(255,180,100,0); transition:box-shadow .4s}
.gal:hover img{transform:scale(1.05)}
.gal:hover figcaption{opacity:1; transform:none}
.gal:hover::after{box-shadow:inset 0 0 0 1px rgba(255,180,100,.6), inset 0 0 40px rgba(255,160,70,.15)}

/* lightbox */
.lightbox{position:fixed; inset:0; z-index:100; background:rgba(3,5,11,.92); backdrop-filter:blur(6px); display:grid; place-items:center; padding:4vw; opacity:0; visibility:hidden; transition:opacity .3s}
.lightbox.open{opacity:1; visibility:visible}
.lightbox img{max-width:100%; max-height:90vh; border-radius:12px; box-shadow:0 30px 90px rgba(0,0,0,.7)}
.lightbox__close{position:absolute; top:1.4rem; right:1.6rem; background:none; border:0; color:#fff; font-size:2rem; cursor:pointer; line-height:1}

/* ---------- Process ---------- */
.steps{list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; position:relative}
.steps::before{content:""; position:absolute; top:34px; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,180,100,.5), transparent)}
.step{position:relative; padding-top:0}
.step__no{display:grid; place-items:center; width:64px; height:64px; border-radius:50%;
  font-family:var(--display); font-weight:600; font-size:1.2rem; color:var(--amber); margin-bottom:1.2rem;
  background:var(--night-800); border:1px solid rgba(255,180,100,.35); box-shadow:0 0 30px rgba(255,160,70,.25); position:relative; z-index:1}
.step h3{margin-bottom:.4rem}
.step p{color:var(--muted); font-size:.92rem}

/* ---------- Trade ---------- */
.trade__inner{display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:center}
.trade__text h2{margin:.4rem 0 1.2rem}
.trade__text p{color:#cdd9ec; max-width:52ch}
.trade__actions{display:flex; flex-direction:column; gap:.8rem; margin-top:1.6rem; align-items:flex-start}
.trade__soon{font-size:.82rem; color:var(--muted); letter-spacing:.02em}
.trade__media{border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 24px 60px rgba(0,0,0,.45)}
.trade__media img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}

/* ---------- Quotes ---------- */
.quote-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.quote{padding:2rem 1.8rem; border-radius:18px; background:linear-gradient(180deg, rgba(61,126,194,.08), rgba(255,255,255,.01)); border:1px solid var(--line); position:relative}
.quote{border-left:2px solid rgba(255,180,100,.55)}
.quote p{font-size:1rem; line-height:1.55; color:#e9eff8; margin:0 0 1rem}
.quote cite{font-family:var(--sans); font-style:normal; font-weight:700; color:var(--amber); font-size:.9rem}

/* ---------- Area ---------- */
.area{text-align:center; max-width:820px}
.area h2{margin:.3rem 0 1.6rem}
.area__list{list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem}
.area__list li{padding:.5em 1.1em; border-radius:100px; border:1px solid var(--line); font-size:.9rem; font-weight:600; color:#cdd9ec; background:rgba(255,255,255,.02); transition:.3s}
.area__list li:hover{border-color:var(--amber); color:#fff; box-shadow:0 0 24px rgba(255,160,70,.2)}

/* ---------- Contact ---------- */
.contact__inner{display:grid; grid-template-columns:1fr 1fr; gap:3rem; max-width:var(--maxw); margin:0 auto;
  background:radial-gradient(120% 120% at 0% 0%, rgba(61,126,194,.14), transparent 55%);
  border:1px solid var(--line); border-radius:26px; padding:clamp(2rem,4vw,3.4rem)}
.contact__pitch h2{margin:.4rem 0 1rem}
.contact__pitch>p{color:#cdd9ec; margin-bottom:1.8rem}
.contact__meta{display:flex; flex-direction:column; gap:.5rem; color:var(--muted); font-size:.94rem}
.contact__meta a{transition:color .25s}
.contact__meta a:hover{color:var(--amber)}
.contact__meta strong{font-size:1.3rem; color:var(--amber)}
.contact__form{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.field{display:flex; flex-direction:column; gap:.4rem}
.field--full{grid-column:1/-1}
.field label{font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:.95rem; color:#fff; padding:.8em .9em; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); transition:border-color .25s, box-shadow .25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(255,180,100,.15)}
.field select option{background:var(--night-800)}
.field textarea{resize:vertical}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.contact__ok{grid-column:1/-1; color:var(--amber); font-size:.95rem; font-weight:600}
.contact__ok a{text-decoration:underline}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{position:relative; z-index:2; margin-top:3rem; padding-top:3rem; border-top:1px solid var(--line); background:linear-gradient(180deg, transparent, rgba(4,6,13,.6))}
.foot__lights{height:2px; background:repeating-linear-gradient(90deg, var(--amber) 0 4px, transparent 4px 26px);
  box-shadow:0 0 12px rgba(255,170,80,.6); opacity:.7; margin:0 var(--pad) 3rem; border-radius:2px; animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.5}50%{opacity:.9}}
.foot__inner{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.foot__brand .nav__word{font-size:1.4rem}
.foot__brand p{color:var(--muted); font-size:.9rem; margin-top:.8rem; max-width:34ch}
.foot__nav{display:flex; flex-direction:column; gap:.6rem}
.foot__nav a{color:var(--muted); font-size:.92rem; transition:color .25s}
.foot__nav a:hover{color:var(--amber)}
.foot__contact{display:flex; flex-direction:column; gap:.6rem; font-size:.92rem}
.foot__contact>a{color:#cdd9ec}
.foot__contact>a:hover{color:var(--amber)}
.foot__social{display:flex; gap:1rem; margin-top:.4rem}
.foot__social a{font-weight:600; color:var(--amber); font-size:.86rem}
.foot__base{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; max-width:var(--maxw); margin:2.5rem auto 0; padding:1.5rem var(--pad); border-top:1px solid var(--line); color:var(--muted); font-size:.82rem}
.foot__privacy:hover{color:var(--amber)}

/* sticky mobile call bar */
.callbar{position:fixed; left:0; right:0; bottom:0; z-index:45; display:none; text-align:center;
  padding:.9rem; font-weight:700; font-size:.9rem; color:#3a1f05;
  background:linear-gradient(180deg,var(--amber-hot),var(--amber)); box-shadow:0 -6px 30px rgba(255,150,60,.35)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__burger{display:flex}
  .trade__inner,.contact__inner{grid-template-columns:1fr; gap:2rem}
  .steps{grid-template-columns:1fr 1fr}
  .steps::before{display:none}
  .quote-grid{grid-template-columns:1fr}
  .gallery{column-count:2}
  .contact__form{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .hero{min-height:100svh}
  .gallery{column-count:1}
  .steps{grid-template-columns:1fr}
  .contact__form{grid-template-columns:1fr}
  .foot__inner{grid-template-columns:1fr; gap:1.6rem}
  .callbar{display:block}
  body{padding-bottom:3.2rem}
  .hero__actions .btn{flex:1}
}

/* ============================================================
   REDUCED MOTION — show the lit end-state, kill motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  .reveal{opacity:1; transform:none}
  .hero__headline,.hero__sub,.hero__actions,.hero__badges{opacity:1; transform:none}
  .svc .svc__dot{background:var(--amber); box-shadow:var(--glow-amber)}
  .reveal,.reveal.is-hidden{opacity:1!important; transform:none!important}
  .em-bolt,.em-sliver,.em-bulb,.em-cres,.em-tick{opacity:1!important; transform:none!important; animation:none!important}
  .em-fil{stroke-dashoffset:0!important; animation:none!important}
}