/* ============================================================
   BIZMUTH — Crystal editorial design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* ---- Surfaces ---- */
  --cream:    #F6F3EC;
  --cream-2:  #F1ECE1;
  --cream-3:  #EAE4D6;
  --ink:      #0C0D12;
  --ink-soft: #2A2B33;
  --dark:     #08090F;
  --dark-2:   #0E1019;
  --dark-3:   #14172299;
  --line:     #1c1d24;
  --line-cream: #D9D3C5;

  /* ---- Aurora / oxidized bismuth ---- */
  --teal:    #2fe9c9;
  --turq:    #2fc6e3;
  --cyan:    #38a8ee;
  --indigo:  #4b4bf0;
  --indigo-d:#2a2cae;
  --violet:  #7b3ff2;
  --lav:     #b9a3f6;
  --magenta: #ec5bc4;
  --rose:    #e35a8e;
  --gold:    #edc56a;
  --silver:  #c8cdda;

  /* ---- Type ---- */
  --sans: 'Montserrat', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --exp:  'Montserrat', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --mono: 'Space Mono', 'SFMono-Regular', ui-monospace, monospace;

  --pad: clamp(20px, 4.2vw, 80px);
  --maxw: 1560px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--violet); color:#fff; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
svg{ display:block; }

/* shared defs svg lives off-canvas */
.defs-svg{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---------- Micro / utility type ---------- */
.label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:400;
}
.mono{ font-family:var(--mono); }
.eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-soft);
}
.eyebrow::after{ content:""; width:42px; height:1px; background:currentColor; opacity:.45; }
.on-dark .eyebrow{ color:#8a8fa6; }

/* tiny aurora text */
.aurora-text{
  background:linear-gradient(96deg,var(--teal),var(--cyan) 28%,var(--violet) 55%,var(--magenta) 78%,var(--gold));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  background-size:220% 100%;
  animation:auroraSlide 9s ease-in-out infinite;
}
@keyframes auroraSlide{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* ---------- Buttons / links ---------- */
.btn-dark{
  display:inline-flex; align-items:center; gap:30px;
  background:var(--ink); color:#fff;
  font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  padding:17px 24px; border:none; cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), background .35s;
}
.btn-dark .arr{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.btn-dark:hover{ background:#1a1b22; }
.btn-dark:hover .arr{ transform:translate(4px,-4px); }

.link-ul{
  display:inline-flex; align-items:center; gap:16px;
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  padding-bottom:14px; position:relative; width:max-content;
}
.link-ul::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; opacity:.32;
}
.link-ul .ul-fill{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:linear-gradient(90deg,var(--teal),var(--violet),var(--magenta));
  transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.link-ul:hover .ul-fill{ transform:scaleX(1); }
.link-ul .arr{ transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.link-ul:hover .arr{ transform:translate(4px,-4px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:stretch; justify-content:space-between;
  height:74px;
  padding-left:var(--pad);
  background:transparent;
  transition:background .4s, box-shadow .4s, height .4s;
}
.nav.scrolled{
  background:color-mix(in srgb, var(--cream) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 1px 0 var(--line-cream);
  height:64px;
}
.nav.on-dark-nav.scrolled{
  background:color-mix(in srgb, var(--dark) 78%, transparent);
  box-shadow:0 1px 0 #20222e;
}
.brand{
  display:flex; align-items:center;
  font-family:var(--exp); font-weight:800;
  font-size:22px; letter-spacing:.34em;
  padding-right:.34em;
}
.nav-mid{ display:flex; align-items:center; gap:38px; }
.nav-mid a{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  position:relative; opacity:.78; transition:opacity .3s;
}
.nav-mid a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav-mid a:hover{ opacity:1; }
.nav-mid a:hover::after{ transform:scaleX(1); }
.nav-mid a.active{ opacity:1; }
.nav-mid a.active::after{ transform:scaleX(1); background:linear-gradient(90deg,var(--teal),var(--violet),var(--magenta)); }
.nav-cta{
  display:flex; align-items:center; gap:30px;
  align-self:stretch; padding:0 26px;
  background:var(--ink); color:#fff;
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  transition:gap .35s, background .35s;
}
.nav-cta:hover{ gap:38px; background:#17181f; }
.nav.on-dark-nav .brand,
.nav.on-dark-nav .nav-mid a{ color:#fff; }
.nav.on-dark-nav .nav-cta{ background:#fff; color:var(--ink); }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.section{ position:relative; }
.on-dark{ background:var(--dark); color:#fff; }
.on-dark .label,.on-dark .eyebrow{ color:#7f859c; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

/* periodic Bi marker */
.element{
  display:inline-grid; gap:2px;
  border:1px solid currentColor; padding:10px 14px 9px;
  width:max-content; line-height:1;
  position:relative;
}
.element .num{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; opacity:.7; }
.element .sym{ font-family:var(--exp); font-weight:700; font-size:34px; letter-spacing:.02em; margin:1px 0; }
.element .mass{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; opacity:.7; }

/* decorative tickers */
.tick{ position:absolute; font-family:var(--mono); font-size:11px; opacity:.55; }
.plus{ position:absolute; width:9px; height:9px; opacity:.5; }
.plus::before,.plus::after{ content:""; position:absolute; background:currentColor; }
.plus::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.plus::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }
.dot{ position:absolute; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.6; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; padding-top:74px;
  background:
    radial-gradient(120% 90% at 82% 14%, color-mix(in srgb,var(--lav) 16%, transparent), transparent 55%),
    var(--cream);
  overflow:hidden;
}
.hero-grid{
  position:relative; z-index:3;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  padding-bottom:clamp(110px,16vh,190px);
}
.hero-meta{
  display:flex; align-items:flex-start; gap:22px;
  padding-top:clamp(40px,7vh,104px);
}
.hero-meta .meta-txt{ font-family:var(--mono); font-size:12px; letter-spacing:.26em; line-height:1.7; text-transform:uppercase; padding-top:6px; color:var(--ink-soft); }
.hero h1{
  font-family:var(--exp); font-weight:800;
  font-size:clamp(40px, 6.8vw, 104px);
  line-height:.94; letter-spacing:-.035em; text-transform:uppercase;
  margin-top:clamp(30px,5.5vh,62px);
  max-width:12ch;
}
.hero h1 .next{
  background:linear-gradient(95deg,var(--teal),var(--cyan) 25%,var(--violet) 60%,var(--magenta) 88%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  background-size:200% 100%; animation:auroraSlide 8s ease-in-out infinite;
}
.hero h1 .dot-end{ color:var(--magenta); }
.hero-lower{
  display:flex; flex-direction:column; align-items:flex-start; gap:32px;
  margin-top:clamp(46px,7.5vh,88px); max-width:30ch; position:relative;
}
.hero-lead{ max-width:30ch; font-size:clamp(15px,1.15vw,18px); line-height:1.55; color:var(--ink-soft); }
.hero-stage{
  position:absolute; z-index:2;
  top:2%; right:3%;
  width:min(47vw, 810px);
  height:92%;
  pointer-events:none;
}
.hero-stage svg{ width:100%; height:100%; overflow:visible; }
.hero-stage .depth{ will-change:transform; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
/* technical drafting marks layer (sits on the cream, around the structure) */
.hero-draft{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.85; }
.hero-draft .draft-svg{ position:absolute; inset:0; width:100%; height:100%; }
.hero-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, var(--cream) 34%, color-mix(in srgb,var(--cream) 55%, transparent) 50%, transparent 62%);
  pointer-events:none;
}
.hero-foot{
  position:absolute; bottom:22px; left:var(--pad); right:var(--pad); z-index:4;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft);
  border-top:1px solid var(--line-cream); padding-top:14px;
}
.scroll-cue{ display:inline-flex; align-items:center; gap:12px; }
.scroll-cue .bar{ width:1px; height:22px; background:currentColor; opacity:.4; position:relative; overflow:hidden; }
.scroll-cue .bar::after{ content:""; position:absolute; inset:0; background:var(--violet); animation:cue 2.2s ease-in-out infinite; }
@keyframes cue{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ============================================================
   SERVICES (dark)
   ============================================================ */
.services{ padding:clamp(80px,10vh,140px) 0 clamp(70px,9vh,120px); position:relative; }
.services .aurora-field{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    radial-gradient(50% 60% at 12% 6%, color-mix(in srgb,var(--violet) 34%,transparent), transparent 70%),
    radial-gradient(46% 50% at 96% 92%, color-mix(in srgb,var(--indigo) 28%,transparent), transparent 70%);
}
.services-head{ display:grid; grid-template-columns:minmax(280px,1fr) auto; gap:40px; align-items:end; position:relative; z-index:2; }
.services-head h2{
  font-family:var(--exp); font-weight:700; font-size:clamp(30px,3.6vw,56px);
  line-height:1.0; letter-spacing:-.028em; margin-top:22px; max-width:18ch;
}
.services-head h2 em{ font-style:normal; color:var(--turq); }
.svc-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-top:clamp(50px,7vh,92px); position:relative; z-index:2;
  border-top:1px solid var(--line);
}
.svc{
  padding:40px 30px 38px 0; border-left:1px solid var(--line);
  padding-left:30px; position:relative;
  transition:background .4s;
}
.svc:first-child{ border-left:none; padding-left:0; }
.svc-art{ height:150px; margin-bottom:30px; position:relative; }
.svc-art svg{ width:100%; height:100%; overflow:visible; transition:transform .55s cubic-bezier(.2,.8,.2,1); }
.svc:hover .svc-art svg{ transform:translateY(-10px) scale(1.04); }
.svc .svc-num{ font-family:var(--mono); font-size:12px; color:#7a8098; letter-spacing:.12em; }
.svc h3{ font-family:var(--sans); font-weight:700; font-size:18px; letter-spacing:.02em; text-transform:uppercase; margin:14px 0 14px; }
.svc p{ font-size:14px; line-height:1.6; color:#9298ac; max-width:24ch; }
.svc .svc-glow{ position:absolute; inset:0 0 0 -1px; background:linear-gradient(180deg,color-mix(in srgb,var(--violet) 16%,transparent),transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none; }
.svc:hover .svc-glow{ opacity:1; }

/* ============================================================
   WORK (cream)
   ============================================================ */
.work{ padding:clamp(80px,10vh,140px) 0 clamp(70px,9vh,120px); position:relative; }
.work-head{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; }
.work-head h2{ font-family:var(--exp); font-weight:700; font-size:clamp(28px,3.2vw,50px); line-height:1.02; letter-spacing:-.028em; margin:20px 0 26px; max-width:16ch; }
.work-head h2 em{ font-style:normal; color:var(--violet); }
.work-nav{ display:flex; align-items:center; gap:14px; justify-self:end; }
.work-nav .arrow{
  width:54px; height:54px; border:1px solid var(--line-cream); background:transparent;
  display:grid; place-items:center; cursor:pointer; color:var(--ink);
  transition:background .35s,color .35s,border-color .35s;
}
.work-nav .arrow:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.work-nav .arrow:disabled{ opacity:.3; cursor:not-allowed; }
.work-count{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; margin-left:6px; min-width:48px; }

.work-rail-wrap{ margin-top:clamp(40px,6vh,72px); overflow:hidden; }
.work-rail{ display:flex; gap:26px; transition:transform .7s cubic-bezier(.2,.8,.2,1); will-change:transform; }
.work-card{
  flex:0 0 clamp(300px, 30vw, 420px);
  background:var(--dark); color:#fff; position:relative;
  cursor:pointer; overflow:hidden;
}
.work-card .scene{ aspect-ratio:1/1.16; position:relative; overflow:hidden; background:#07070d; }
.work-card .scene .crystal-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:2; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.work-card:hover .scene .crystal-svg{ transform:scale(1.06); }
.work-card .scene::after{ content:""; position:absolute; inset:0; z-index:3; background:linear-gradient(180deg,transparent 52%,rgba(5,6,12,.88)); }
.work-card .meta{ position:absolute; left:0; right:0; bottom:0; z-index:4; padding:22px 24px 24px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.work-card .meta .num{ font-family:var(--mono); font-size:11px; color:#aeb3c6; letter-spacing:.14em; }
.work-card .meta h4{ font-family:var(--sans); font-weight:700; font-size:17px; letter-spacing:.06em; text-transform:uppercase; margin:8px 0 5px; }
.work-card .meta .cat{ font-family:var(--mono); font-size:11px; color:#9aa0b6; letter-spacing:.05em; }
.work-card .meta .go{ width:34px; height:34px; border:1px solid #33384a; display:grid; place-items:center; flex:0 0 auto; transition:background .35s,color .35s; color:#cfd3e0; }
.work-card:hover .meta .go{ background:#fff; color:var(--ink); border-color:#fff; }
.work-card::before{ content:""; position:absolute; inset:0; border:1px solid transparent; z-index:3; pointer-events:none; transition:border-color .4s; }
.work-card:hover::before{ border-color:color-mix(in srgb,var(--violet) 55%,transparent); }

/* ============================================================
   CTA (dark, big crystal bleed)
   ============================================================ */
.cta{ position:relative; overflow:hidden; padding:clamp(90px,13vh,180px) 0 clamp(90px,13vh,180px); }
.cta-crystal{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.cta-crystal svg{ position:absolute; right:-4%; bottom:-10%; width:min(82vw,1500px); height:auto; overflow:visible; opacity:.96; }
.cta .wrap{ position:relative; z-index:3; }
.cta h2{
  font-family:var(--exp); font-weight:700; font-size:clamp(34px,5.6vw,92px);
  line-height:.96; letter-spacing:-.03em; max-width:15ch; margin:22px 0 40px;
}
.cta .scrim{ position:absolute; inset:0; z-index:2; background:linear-gradient(95deg,var(--dark) 24%,transparent 60%); pointer-events:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--cream); color:var(--ink); padding:30px 0; border-top:1px solid var(--line-cream); }
.footer .row{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); display:flex; align-items:center; justify-content:space-between; gap:30px; }
.footer .left{ display:flex; align-items:center; gap:34px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.footer .left .sep{ width:1px; height:16px; background:var(--line-cream); }
.footer .socials{ display:flex; gap:26px; }
.footer .socials a{ position:relative; opacity:.7; transition:opacity .3s; }
.footer .socials a:hover{ opacity:1; }
.footer .right{ display:flex; align-items:center; gap:26px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; }
.footer .el-mini{ border:1px solid var(--ink); width:46px; height:46px; display:grid; place-items:center; font-family:var(--exp); font-weight:700; font-size:20px; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
/* settle fallback — forces final visible state even if the compositor
   pauses the transition (offscreen iframes / print / PDF export) */
.reveal.settled{ opacity:1 !important; transform:none !important; transition:none !important; }

/* crystal grow-in for service art */
.grow{ clip-path:inset(0 0 100% 0); transition:clip-path 1.1s cubic-bezier(.2,.8,.2,1); }
.grow.in{ clip-path:inset(0 0 0 0); }
.grow.settled{ clip-path:none !important; transition:none !important; }

/* ============================================================
   CRYSTAL MODEL ANIMATIONS  (oscillate around base = safe frozen)
   ============================================================ */
svg g[class^="cr-"]{ transform-box:fill-box; transform-origin:center; }
@keyframes crFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes crFloatB{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-24px)} }
@keyframes crSepUp { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
@keyframes crSepDn { 0%,100%{transform:translateY(0)} 50%{transform:translateY(14px)} }
@keyframes crBob   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes crGlowP { 0%,100%{opacity:.5; transform:scale(1)} 50%{opacity:.9; transform:scale(1.16)} }
.cr-fa{ animation:crFloat 6s ease-in-out infinite; }
.cr-fb{ animation:crFloat 7.4s ease-in-out infinite .5s; }
.cr-fc{ animation:crFloatB 9s ease-in-out infinite .9s; }
.cr-sa{ animation:crSepDn 5.6s ease-in-out infinite; }
.cr-sb{ animation:crSepUp 5.6s ease-in-out infinite; }
.cr-bob{ animation:crBob 6.5s ease-in-out infinite; }
.cr-glow{ animation:crGlowP 5s ease-in-out infinite; }
.cr-wire{ animation:crSepUp 11s ease-in-out infinite; }

/* ============================================================
   WORK CARD ATMOSPHERE (nebula + stars + celestial orb)
   ============================================================ */
.wc-atmo{ position:absolute; inset:0; z-index:0; }
.wc-stars{ position:absolute; inset:0; z-index:0; opacity:.7;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 24%, #fff, transparent),
    radial-gradient(1px 1px at 62% 16%, #cfe6ff, transparent),
    radial-gradient(1.2px 1.2px at 82% 40%, #fff, transparent),
    radial-gradient(1px 1px at 34% 62%, #ffe9d6, transparent),
    radial-gradient(1px 1px at 74% 72%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 46% 38%, #e9d7ff, transparent),
    radial-gradient(1px 1px at 12% 78%, #fff, transparent),
    radial-gradient(1px 1px at 90% 60%, #cfe6ff, transparent),
    radial-gradient(1px 1px at 56% 86%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 28% 12%, #fff, transparent);
  animation:wcTwinkle 6.5s ease-in-out infinite;
}
@keyframes wcTwinkle{ 0%,100%{opacity:.4} 50%{opacity:.85} }
.wc-orb{ position:absolute; z-index:1; border-radius:50%; filter:blur(.5px);
  box-shadow:0 0 50px 14px rgba(232,154,214,.30);
  animation:crGlowP 6.5s ease-in-out infinite; }

/* ============================================================
   SERVICE ICON HOVER ANIMATIONS — architectural, each distinct
   (idle: still. The bismuth gradients & energy keep flowing.)
   ============================================================ */
.svc-art g[class^="ss-"], .svc-art g[class^="pd-"],
.svc-art g[class^="dv-"], .svc-art g[class^="ex-"]{
  transform-box:fill-box; transform-origin:center;
  transition:transform .75s cubic-bezier(.22,.9,.24,1), opacity .7s ease;
}
.svc:hover .svc-art svg{ transform:translateY(-6px); }

/* 01 STRATEGY — strata levitate & pull apart into an exploded section */
.svc:hover .ss-a{ transform:translateY(14px); }
.svc:hover .ss-c{ transform:translateY(-16px); }
.svc:hover .ss-o{ transform:translateY(-34px) scale(1.12); }

/* 02 WEB DESIGN — the portal opens: pillars part, lintel lifts, steps cascade */
.svc:hover .pd-l{ transform:translate(-12px,5px); }
.svc:hover .pd-r{ transform:translate(12px,5px); }
.svc:hover .pd-top{ transform:translateY(-16px); }
.svc:hover .pd-steps{ transform:translateY(9px); }

/* 03 DEVELOPMENT — the floating staircase ascends, platforms draw apart */
.svc:hover .dv-pa{ transform:translateY(12px); }
.svc:hover .dv-pb{ transform:translateY(-14px); }
.svc:hover .dv-stair{ transform:translate(4px,-9px); }

/* 04 EXPERIENCES — the pathway lifts and the portal blooms */
.svc:hover .ex-path{ transform:translateY(-7px); }
.svc:hover .ex-portal{ transform:translateY(-20px) scale(1.18); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .grow{ clip-path:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav-mid{ display:none; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .svc:nth-child(3){ border-left:none; padding-left:0; }
  .svc{ padding-top:40px; }
  .hero-stage{ opacity:.85; }
  .work-head{ grid-template-columns:1fr; gap:24px; }
  .work-nav{ justify-self:start; }
}
@media (max-width:680px){
  .svc-grid{ grid-template-columns:1fr; }
  .svc{ border-left:none; padding-left:0; }
  .services-head{ grid-template-columns:1fr; }
  .hero-stage{ position:relative; width:118%; height:60vh; right:-9%; top:0; margin-top:20px; }
  .hero{ min-height:auto; }
  .hero-scrim{ display:none; }
  .hero-foot{ position:static; margin:30px var(--pad) 20px; }
  .footer .row{ flex-direction:column; align-items:flex-start; gap:18px; }
  .footer .left{ flex-wrap:wrap; gap:12px 22px; }
}

/* ============================================================
   INDUSTRIES — BIZMUTH CITY (dark)
   ============================================================ */
.industries{ position:relative; overflow:hidden; padding:clamp(82px,11vh,150px) 0 clamp(74px,10vh,128px); }
.industries.on-dark{ background:var(--dark); }
.ind-field{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background:
    radial-gradient(44% 48% at 15% 16%, color-mix(in srgb,var(--violet) 26%,transparent), transparent 70%),
    radial-gradient(50% 54% at 86% 74%, color-mix(in srgb,var(--indigo) 24%,transparent), transparent 72%); }
.ind-draft{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.45; }
.ind-draft .draft-svg{ position:absolute; inset:0; width:100%; height:100%; }
.industries .wrap{ position:relative; z-index:3; }
.ind-head{ max-width:64ch; }
.ind-head h2{ font-family:var(--exp); font-weight:700; font-size:clamp(30px,3.8vw,58px); line-height:1.02; letter-spacing:-.028em; margin:22px 0 22px; max-width:17ch; color:#fff; }
.ind-head h2 em{ font-style:normal; color:transparent;
  background:linear-gradient(95deg,var(--teal),var(--cyan) 26%,var(--violet) 60%,var(--magenta) 90%);
  -webkit-background-clip:text; background-clip:text; background-size:200% 100%; animation:auroraSlide 8s ease-in-out infinite; }
.ind-lead{ font-size:clamp(15px,1.15vw,18px); line-height:1.55; color:#aab0c4; max-width:54ch; }

/* ---- city stage ---- */
.city-wrap{ position:relative; z-index:3; margin-top:clamp(26px,4.5vh,52px); }
.city-stage{ position:relative; max-width:1720px; margin:0 auto; }
.city-stage::before{ content:""; position:absolute; left:0; right:0; top:-3%; bottom:6%; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(122,150,230,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(122,150,230,.07) 1px,transparent 1px);
  background-size:clamp(34px,3.4vw,52px) clamp(34px,3.4vw,52px);
  -webkit-mask-image:radial-gradient(82% 72% at 50% 42%,#000,transparent 82%); mask-image:radial-gradient(82% 72% at 50% 42%,#000,transparent 82%); }
.city-svg{ position:relative; z-index:1; }
.city-svg .city-crystal{ width:100%; height:auto; display:block; overflow:visible; }
.city-crystal .cd{ transition:opacity .45s ease, filter .45s ease; cursor:pointer; }
#cityStage.is-hover .cd{ opacity:.42; }
#cityStage.is-hover .cd.lit{ opacity:1; }
.city-crystal .cd.lit{ filter:drop-shadow(0 0 14px rgba(123,63,242,.9)) drop-shadow(0 0 34px rgba(47,198,227,.45)); }

/* ---- floating annotations (spread out, JS-linked to districts) ---- */
.city-annos{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.city-anno{ position:absolute; width:min(216px,42vw); pointer-events:none; }
.ca-box{ pointer-events:auto; cursor:pointer;
  background:rgba(10,12,24,.66); backdrop-filter:blur(10px) saturate(1.1);
  border:1px solid rgba(150,162,212,.26); padding:12px 15px 13px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s, background .4s; }
.ca-head{ display:flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.07em; text-transform:uppercase; color:#fff; }
.ca-hex{ width:13px; height:14px; flex:0 0 auto; background:linear-gradient(135deg,var(--teal),var(--violet));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.ca-desc{ margin-top:8px; font-family:var(--sans); font-size:12px; line-height:1.5; color:#aab0c4; }
.city-anno.active .ca-box, .ca-box:hover{ transform:translateY(-3px) scale(1.03); border-color:rgba(184,200,255,.7);
  background:rgba(14,17,34,.86); box-shadow:0 20px 44px -18px rgba(70,44,140,.75), 0 0 0 1px rgba(123,63,242,.28); }

/* ---- connector overlay (lines from labels to districts, drawn by JS) ---- */
.city-links{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:visible; }
.city-links .cl{ stroke:rgba(184,194,242,.46); stroke-width:1; vector-effect:non-scaling-stroke; transition:stroke .35s, stroke-width .35s; }
.city-links .cl.on{ stroke:var(--cyan); stroke-width:1.6; }
.city-links .cn{ fill:#cfe0ff; transition:fill .35s; }
.city-links .cn.on{ fill:#fff; }

@media (max-width:760px){
  .city-links{ display:none; }
  .city-annos{ position:static; display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; padding:0 var(--pad); }
  .city-anno{ position:static; width:auto; }
}

/* ============================================================
   WORK — premium feature grid (video / animated preview + modal)
   ============================================================ */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:clamp(42px,6vh,74px); }
.work-intro{ justify-self:end; align-self:end; max-width:34ch; font-size:14px; line-height:1.62; color:var(--ink-soft); }
.wf-card{ background:var(--dark); color:#fff; position:relative; cursor:pointer; overflow:hidden; border:1px solid #15161f; contain:layout style paint;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
.wf-card:hover{ transform:translateY(-7px); box-shadow:0 36px 70px -34px rgba(48,24,96,.8); }
.wf-card::before{ content:""; position:absolute; inset:0; border:1px solid transparent; z-index:7; pointer-events:none; transition:border-color .4s; }
.wf-card:hover::before{ border-color:color-mix(in srgb,var(--violet) 55%,transparent); }

.wf-preview{ position:relative; aspect-ratio:16/11; overflow:hidden; background:#06060c; }
.wf-bar{ position:absolute; top:0; left:0; right:0; height:30px; z-index:5; display:flex; align-items:center; gap:7px;
  padding:0 13px; background:rgba(9,10,18,.9); border-bottom:1px solid #1b1d29; }
.wf-bar .d{ width:8px; height:8px; border-radius:50%; background:#363b4d; }
.wf-bar .u{ margin-left:12px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:#7a8098;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-screen{ position:absolute; inset:30px 0 0 0; overflow:hidden; background:var(--cream); }
.wf-video{ position:absolute; inset:30px 0 0 0; width:100%; height:calc(100% - 30px); object-fit:cover; z-index:3; background:#06060c; }
.wf-scroll{ position:absolute; top:0; left:0; width:100%; transform:translateY(0); }
.wf-scroll.playing{ animation:wfScroll var(--sd,6.5s) cubic-bezier(.5,0,.5,1) infinite alternate; }
@keyframes wfScroll{ 0%{transform:translateY(0)} 12%{transform:translateY(0)} 100%{transform:translateY(var(--shift,-58%))} }
.wf-hint{ position:absolute; left:0; right:0; bottom:0; z-index:6; padding:30px 16px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:linear-gradient(180deg,transparent,rgba(5,6,12,.92));
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#dfe2ee;
  opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s; }
.wf-card:hover .wf-hint{ opacity:1; transform:none; }
.wf-hint .play{ display:inline-flex; align-items:center; gap:9px; }
.wf-hint .play::before{ content:""; width:0; height:0; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent #fff; }
.wf-card:hover .wf-hint .play::before{ border-width:5px 0 5px 0; border-left-width:0; width:8px; height:9px; border-style:double; border-color:#fff; border-width:0 3px; }

.wf-meta{ padding:22px 23px 25px; }
.wf-meta .row1{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.wf-meta h3{ font-family:var(--sans); font-weight:700; font-size:19px; letter-spacing:.05em; text-transform:uppercase; }
.wf-meta .ind{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#8a90a6; flex:0 0 auto; }
.wf-desc{ font-size:14px; line-height:1.62; color:#9298ac; margin:13px 0 17px; max-width:36ch; }
.wf-svcs{ display:flex; flex-wrap:wrap; gap:7px; }
.wf-svcs span{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#aeb3c6; border:1px solid #2a2e3e; padding:5px 9px; }

/* ---- live iframe preview (desktop-width scaled down) ---- */
.preview-scale-wrap{
  width:1440px;
  height:950px;
  transform:scale(0.31);
  transform-origin:top left;
  transition:transform var(--scroll-duration,9s) ease;
  will-change:transform;
}
.wf-card:hover .preview-scale-wrap{
  transform:scale(0.31) translateY(var(--scroll-amount,-620px));
}
.preview-frame{
  width:1440px;
  height:950px;
  border:0;
  pointer-events:none;
  display:block;
}
/* link styles inside hint overlay */
.wf-hint a{ color:inherit; text-decoration:none; pointer-events:auto; }
/* keep play triangle static (no pause-icon toggle) */
.wf-card:hover .wf-hint .play::before{
  border-width:5px 0 5px 8px; border-style:solid;
  width:0; height:0;
  border-color:transparent transparent transparent #fff;
}

/* ---- mock website (animated fallback preview) ---- */
.mock{ font-family:var(--sans); color:#15161d; }
.mock .m-nav{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; }
.mock .m-logo{ font-weight:800; font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.mock .m-links{ display:flex; gap:9px; }
.mock .m-links i{ width:22px; height:5px; border-radius:3px; background:currentColor; opacity:.35; }
.mock .m-hero{ padding:26px 16px 30px; }
.mock .m-h{ height:13px; border-radius:3px; margin-bottom:8px; }
.mock .m-h.w1{ width:78%; } .mock .m-h.w2{ width:54%; } .mock .m-h.w3{ width:40%; }
.mock .m-cta{ display:inline-block; margin-top:12px; padding:8px 16px; border-radius:30px; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; }
.mock .m-band{ padding:22px 16px; }
.mock .m-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.mock .m-tile{ aspect-ratio:1/1.1; border-radius:6px; }
.mock .m-strip{ height:64px; border-radius:7px; margin:10px 0; }
.mock .m-foot{ padding:18px 16px; display:flex; gap:8px; }
.mock .m-foot i{ flex:1; height:8px; border-radius:3px; background:currentColor; opacity:.18; }
.mock .m-line{ height:7px; border-radius:3px; background:#cfc8b8; margin-bottom:7px; }
.mock .m-line.s{ width:60%; }

/* ============================================================
   CASE STUDY MODAL
   ============================================================ */
.case-modal{ position:fixed; inset:0; z-index:120; display:none; }
.case-modal.open{ display:block; }
.cm-backdrop{ position:absolute; inset:0; background:rgba(4,5,10,.74); backdrop-filter:blur(9px) saturate(1.05); opacity:0; transition:opacity .42s; }
.case-modal.open .cm-backdrop{ opacity:1; }
.cm-dialog{ position:absolute; inset:0; overflow-y:auto; display:flex; align-items:flex-start; justify-content:center; padding:clamp(18px,5vh,66px) var(--pad); }
.cm-panel{ position:relative; width:min(1120px,100%); background:var(--dark); color:#fff; border:1px solid #20222e;
  transform:translateY(28px) scale(.985); opacity:0; transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.case-modal.open .cm-panel{ transform:none; opacity:1; }
.cm-close{ position:absolute; top:15px; right:15px; z-index:9; width:46px; height:46px; border:1px solid #33384a;
  background:rgba(8,9,15,.55); backdrop-filter:blur(6px); color:#fff; display:grid; place-items:center; cursor:pointer;
  font-family:var(--mono); font-size:17px; transition:background .3s,color .3s,border-color .3s; }
.cm-close:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.cm-preview{ position:relative; aspect-ratio:16/8; overflow:hidden; background:#06060c; border-bottom:1px solid #1b1d29; }
.cm-preview .wf-bar{ height:34px; }
.cm-preview .wf-screen{ inset:34px 0 0 0; }
.cm-preview .wf-video{ inset:34px 0 0 0; height:calc(100% - 34px); }
.cm-body{ padding:clamp(28px,4vw,56px); }
.cm-eyebrow{ display:inline-flex; align-items:center; gap:14px; font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#8a90a6; }
.cm-eyebrow::after{ content:""; width:38px; height:1px; background:currentColor; opacity:.45; }
.cm-title{ font-family:var(--exp); font-weight:700; font-size:clamp(30px,4.2vw,58px); line-height:.98; letter-spacing:-.03em; margin:18px 0 8px; }
.cm-sub{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#9aa0b6; }
.cm-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,3.4vw,56px); margin-top:clamp(32px,4vh,52px); }
.cm-block h4{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--turq); margin-bottom:14px; }
.cm-block.sol h4{ color:var(--lav); }
.cm-block p{ font-size:clamp(15px,1.1vw,17px); line-height:1.62; color:#c4c9d8; }
.cm-svcs{ margin-top:clamp(30px,4vh,48px); border-top:1px solid #20222e; padding-top:28px; }
.cm-svcs .lab{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#8a90a6; margin-bottom:16px; }
.cm-svcs .chips{ display:flex; flex-wrap:wrap; gap:9px; }
.cm-svcs .chips span{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#dfe2ee; border:1px solid #2e3346; padding:8px 13px; }
.cm-foot{ margin-top:clamp(32px,4vh,50px); display:flex; flex-wrap:wrap; align-items:center; gap:22px; }

/* ============================================================
   PROCESS (warm cream band, crystal pathway)
   ============================================================ */
.process{ padding:clamp(82px,11vh,150px) 0; position:relative; background:var(--cream-2); border-top:1px solid var(--line-cream); }
.proc-head{ max-width:60ch; }
.proc-head h2{ font-family:var(--exp); font-weight:700; font-size:clamp(30px,3.8vw,58px); line-height:1.02; letter-spacing:-.028em; margin:22px 0 0; max-width:18ch; }
.proc-head h2 em{ font-style:normal; color:var(--violet); }
.proc-track{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,42px); margin-top:clamp(52px,7vh,92px); position:relative; }
.proc-node{ position:relative; padding-top:26px; }
.proc-node::before{ content:""; position:absolute; top:0; left:0; right:calc(-1 * clamp(20px,2.4vw,42px)); height:1px;
  background:linear-gradient(90deg,var(--violet),var(--line-cream) 30%); }
.proc-node:last-child::before{ right:0; background:var(--violet); opacity:.5; }
.proc-node::after{ content:""; position:absolute; top:-5px; left:0; width:10px; height:10px; transform:rotate(45deg);
  background:var(--cream-2); border:1.5px solid var(--violet); }
.proc-num{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.22em; color:var(--violet); }
.proc-art{ height:128px; margin:18px 0 22px; }
.proc-art svg{ width:100%; height:100%; overflow:visible; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.proc-node:hover .proc-art svg{ transform:translateY(-8px) scale(1.03); }
.proc-node h3{ font-family:var(--sans); font-weight:700; font-size:19px; letter-spacing:.02em; text-transform:uppercase; margin:0 0 12px; }
.proc-node p{ font-size:14px; line-height:1.6; color:var(--ink-soft); max-width:26ch; }
.proc-art g[class^="pr-"]{ transform-box:fill-box; transform-origin:center; transition:transform .72s cubic-bezier(.22,.9,.24,1); }
.proc-node:hover .pr-a{ transform:translateY(8px); }
.proc-node:hover .pr-b{ transform:translateY(-11px); }
.proc-node:hover .pr-c{ transform:translateY(-19px); }

/* ============================================================
   FINAL CTA (dark, wide bridge + masked moving aurora)
   ============================================================ */
.final-cta{ position:relative; overflow:hidden; background:var(--dark); color:#fff;
  padding:clamp(92px,13vh,176px) 0 clamp(150px,22vh,300px); }
.fc-stars{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.7;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent),
    radial-gradient(1px 1px at 26% 64%, #cfe0ff, transparent),
    radial-gradient(1.2px 1.2px at 8% 48%, #fff, transparent),
    radial-gradient(1px 1px at 41% 30%, #e9d7ff, transparent),
    radial-gradient(1.3px 1.3px at 33% 12%, #fff, transparent),
    radial-gradient(1px 1px at 54% 52%, #fff, transparent),
    radial-gradient(1px 1px at 18% 80%, #cfe0ff, transparent),
    radial-gradient(1.2px 1.2px at 46% 74%, #fff, transparent),
    radial-gradient(1px 1px at 62% 18%, #fff, transparent),
    radial-gradient(1px 1px at 30% 46%, #fff, transparent);
  animation:wcTwinkle 6.5s ease-in-out infinite; }
.fc-draft{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.92; }
.fc-draft .draft-svg{ position:absolute; inset:0; width:100%; height:100%; }
.fc-bridge{ position:absolute; right:-4%; left:auto; width:51%; top:7%; bottom:auto; height:78%; z-index:1; pointer-events:none; }
.fc-bridge svg{ width:100%; height:100%; overflow:visible; }
.fc-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, var(--dark) 24%, color-mix(in srgb,var(--dark) 40%,transparent) 52%, transparent 74%); }
.fc-scrim-b{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(0deg, var(--dark) 4%, transparent 38%); }
.final-cta .wrap{ position:relative; z-index:4; }
.final-cta h2{ font-family:var(--exp); font-weight:700; font-size:clamp(34px,5.4vw,90px); line-height:.98; letter-spacing:-.03em; max-width:15ch; margin:22px 0 26px; }
.final-cta h2 em{ font-style:normal; background:linear-gradient(95deg,var(--teal),var(--cyan) 26%,var(--violet) 60%,var(--magenta) 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; background-size:200% 100%; animation:auroraSlide 8s ease-in-out infinite; }
.fc-lead{ max-width:52ch; font-size:clamp(15px,1.2vw,19px); line-height:1.6; color:#aab0c4; margin-bottom:42px; }
.fc-email{ font-size:clamp(18px,1.4vw,24px); font-family:var(--mono); color:#fff; font-weight:600; margin-bottom:42px; letter-spacing:.02em; }
.fc-actions{ display:flex; flex-wrap:wrap; gap:16px; }
.btn-primary{ display:inline-flex; align-items:center; gap:26px; background:#fff; color:var(--ink);
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; padding:18px 26px; border:none; cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), background .35s; }
.btn-primary:hover{ background:#ece9e1; transform:translateY(-2px); }
.btn-primary .arr{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.btn-primary:hover .arr{ transform:translate(4px,-4px); }
.btn-ghost{ display:inline-flex; align-items:center; gap:26px; background:transparent; color:#fff; border:1px solid #3a3f52;
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; padding:18px 26px; cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, background .35s; }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.05); transform:translateY(-2px); }
.btn-ghost .arr{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.btn-ghost:hover .arr{ transform:translate(4px,-4px); }

/* ---- new-section responsive ---- */
@media (max-width:1080px){
  .ind-grid{ grid-template-columns:repeat(2,1fr); }
  .ind-card:nth-child(3){ border-left:none; }
  .work-grid{ grid-template-columns:repeat(2,1fr); }
  .proc-track{ grid-template-columns:repeat(2,1fr); row-gap:46px; }
  .proc-node:nth-child(3)::before{ background:linear-gradient(90deg,var(--violet),var(--line-cream) 30%); }
  .cm-cols{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .ind-grid{ grid-template-columns:1fr; }
  .ind-card{ border-left:none; }
  .work-grid{ grid-template-columns:1fr; }
  .proc-track{ grid-template-columns:1fr; }
  .proc-node::before, .proc-node::after{ display:none; }
}

/* ============================================================
   PORTFOLIO PAGE
   ============================================================ */
.pf-top{ padding:calc(74px + clamp(40px,7vh,90px)) 0 clamp(30px,4vh,52px); position:relative; overflow:hidden;
  background:
    radial-gradient(120% 80% at 86% 4%, color-mix(in srgb,var(--lav) 18%, transparent), transparent 52%),
    var(--cream);
}
.pf-top .pf-deco{ position:absolute; top:6%; right:-4%; width:min(40vw,560px); height:120%; z-index:0; pointer-events:none; opacity:.92; }
.pf-top .pf-deco svg{ width:100%; height:100%; overflow:visible; }
.pf-head{ position:relative; z-index:2; display:grid; grid-template-columns:1fr; gap:18px; }
.pf-head h1{
  font-family:var(--exp); font-weight:800; text-transform:uppercase;
  font-size:clamp(44px,8vw,116px); line-height:.88; letter-spacing:-.04em; max-width:13ch;
}
.pf-head h1 em{ font-style:normal; color:transparent;
  background:linear-gradient(95deg,var(--teal),var(--cyan) 28%,var(--violet) 62%,var(--magenta) 90%);
  -webkit-background-clip:text; background-clip:text; background-size:200% 100%; animation:auroraSlide 8s ease-in-out infinite; }
.pf-lead{ max-width:46ch; font-size:clamp(15px,1.1vw,18px); line-height:1.55; color:var(--ink-soft); }

/* controls bar */
.pf-controls{ position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:24px; margin-top:clamp(34px,5vh,58px); padding-bottom:22px; border-bottom:1px solid var(--line-cream);
  max-width:66%; }
.pf-search{ position:relative; display:flex; align-items:center; gap:14px; min-width:min(420px,100%); flex:1 1 320px; }
.pf-search .ic{ font-family:var(--mono); font-size:13px; color:var(--ink-soft); }
.pf-search input{
  flex:1; border:none; background:transparent; outline:none;
  font-family:var(--exp); font-weight:500; font-size:clamp(20px,2.4vw,34px); letter-spacing:-.01em; color:var(--ink);
  padding:6px 0;
}
.pf-search input::placeholder{ color:#b9b2a1; }
.pf-search::after{ content:""; position:absolute; left:0; right:0; bottom:-22px; height:2px; background:var(--ink); transform:scaleX(.0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.pf-search.active::after{ transform:scaleX(1); background:linear-gradient(90deg,var(--teal),var(--violet),var(--magenta)); }
.pf-count{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }

/* tag chips */
.pf-tags{ display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0; position:relative; z-index:2; max-width:66%; }
.pf-chip{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:9px 15px; border:1px solid var(--line-cream); background:transparent; color:var(--ink-soft);
  cursor:pointer; transition:border-color .3s, color .3s, background .3s; white-space:nowrap;
}
.pf-chip:hover{ border-color:var(--ink); color:var(--ink); }
.pf-chip .c{ opacity:.5; margin-left:8px; }
.pf-chip.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.pf-chip.on .c{ opacity:.6; }

/* grid */
.pf-grid-wrap{ background:var(--cream); padding:clamp(34px,5vh,60px) 0 clamp(70px,9vh,120px); }
.pf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.pf-card{ background:var(--dark); color:#fff; position:relative; cursor:pointer; overflow:hidden; }
.pf-card.hide{ display:none; }
.wf-card.hide{ display:none; }
.pf-card .scene{ aspect-ratio:1/1.04; position:relative; overflow:hidden; background:#07070d; }
.pf-card .scene .crystal-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:2; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.pf-card:hover .scene .crystal-svg{ transform:scale(1.06); }
.pf-card .scene::after{ content:""; position:absolute; inset:0; z-index:3; background:linear-gradient(180deg,transparent 50%,rgba(5,6,12,.9)); }
.pf-card .meta{ position:relative; z-index:4; padding:20px 22px 22px; }
.pf-card .meta .top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.pf-card .meta .num{ font-family:var(--mono); font-size:11px; color:#aeb3c6; letter-spacing:.14em; }
.pf-card .meta h3{ font-family:var(--sans); font-weight:700; font-size:18px; letter-spacing:.05em; text-transform:uppercase; margin:8px 0 4px; }
.pf-card .meta .cat{ font-family:var(--mono); font-size:11px; color:#9aa0b6; letter-spacing:.05em; }
.pf-card .meta .go{ width:34px; height:34px; border:1px solid #33384a; display:grid; place-items:center; flex:0 0 auto; transition:background .35s,color .35s; color:#cfd3e0; }
.pf-card:hover .meta .go{ background:#fff; color:var(--ink); border-color:#fff; }
.pf-card .chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.pf-card .chips span{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#aeb3c6; border:1px solid #2a2e3e; padding:5px 9px; transition:border-color .3s,color .3s; }
.pf-card .chips span.hot{ color:#fff; border-color:#5a4fd0; }
.pf-card::before{ content:""; position:absolute; inset:0; border:1px solid transparent; z-index:5; pointer-events:none; transition:border-color .4s; }
.pf-card:hover::before{ border-color:color-mix(in srgb,var(--violet) 55%,transparent); }

/* empty state */
.pf-empty{ display:none; padding:80px 0; text-align:center; }
.pf-empty.show{ display:block; }
.pf-empty .big{ font-family:var(--exp); font-weight:700; font-size:clamp(24px,3vw,40px); color:var(--ink); margin-bottom:12px; }
.pf-empty p{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--ink-soft); }
.pf-empty .reset{ margin-top:22px; }

@media (max-width:1080px){ .pf-grid{ grid-template-columns:repeat(2,1fr); } .pf-top .pf-deco{ opacity:.4; } }
@media (max-width:680px){
  .pf-grid{ grid-template-columns:1fr; }
  .pf-controls{ flex-direction:column; align-items:stretch; max-width:100%; gap:14px; }
  .pf-search{ flex:1 1 auto; min-width:0; }
  .pf-count{ align-self:flex-start; }
  .pf-tags{ max-width:100%; }
  .pf-top .pf-deco{ opacity:.22; width:min(58vw,560px); }
}