/* ===================================================================
   PARIKH — "SYNERGISTIC FUTURISM"
   Editorial-brutalist VC theme · bone+ink + detonated color blocks
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,700;12..96,800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* bright accent spectrum — used as deliberate color blocks */
  --cobalt:  #1F3BFF;
  --flame:   #FF4A1C;
  --viridian:#04A66B;
  --violet:  #6A2CF5;
  --acid:    #D8F23A;
  --sky:     #36C6F0;

  /* spectral helpers (kept so gradient imagery still renders — in blue/violet/green) */
  --sp-cyan: #36C6F0;
  --sp-indigo:#1F3BFF;
  --sp-violet:#6A2CF5;
  --sp-teal: #04A66B;
  --spectral: linear-gradient(100deg,#BCD2F2 0%,#C7C2F0 42%,#AFD8EE 74%,#A9E0DE 100%);

  --sky-1:#BCD2F2;
  --sky-2:#C7C2F0;
  --sky-3:#AFD8EE;
  --sky-4:#A9E0DE;

  --serif: "Bricolage Grotesque", Georgia, serif;
  --sans:  "Space Grotesk", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1480px;
  --gut: clamp(18px, 4.5vw, 72px);
  --ease: cubic-bezier(.19,1,.22,1);
  --ease2: cubic-bezier(.83,0,.17,1);
  --bd: 1.5px;
}

/* LIGHT (default) — warm bone + ink */
:root,[data-theme="light"]{
  --paper:  #E9EDF5;
  --paper-2:#DCE3F0;
  --card:   #F4F7FC;
  --ink:    #121420;
  --ink-2:  #4C5266;
  --ink-3:  #828BA3;
  --line:   #121420;
  --line-soft: rgba(18,20,32,.16);
  --hair:   rgba(18,20,32,.12);
  --accent: #4F63CC;
  --grain-op: .045;
  --invert-ink:#E9EDF5;
  --invert-bg:#121420;
}
/* DARK — Sky-derived midnight (coordinates with the periwinkle light theme) */
html[data-theme="dark"]{
  --paper:  #0A0D18;
  --paper-2:#11162A;
  --card:   #161C33;
  --ink:    #ECEFFA;
  --ink-2:  #9BA4C2;
  --ink-3:  #5F6788;
  --line:   #ECEFFA;
  --line-soft: rgba(236,239,250,.22);
  --hair:   rgba(236,239,250,.13);
  --accent: #8E9DFF;
  --grain-op: .06;
  --invert-ink:#0A0D18;
  --invert-bg:#ECEFFA;
  /* luminous sky so the motion + emblem glow on dark */
  --sky-1:#5BA8FF;
  --sky-2:#8C7CFF;
  --sky-3:#5BD6FF;
  --sky-4:#4FE0C8;
  --spectral: linear-gradient(100deg,#5BA8FF 0%,#8C7CFF 42%,#5BD6FF 74%,#4FE0C8 100%);
}
/* B/W — V7-inspired monochrome: pure white, ink black, zero chroma */
html[data-theme="bw"]{
  --paper:#FFFFFF;
  --paper-2:#F2F2F3;
  --card:#FAFAFA;
  --ink:#0B0B0C;
  --ink-2:#52525B;
  --ink-3:#9A9AA3;
  --line:#0B0B0C;
  --line-soft:rgba(11,11,12,.20);
  --hair:rgba(11,11,12,.10);
  --accent:#0B0B0C;
  --grain-op:.026;
  --invert-ink:#FFFFFF;
  --invert-bg:#0B0B0C;
  --cobalt:#0B0B0C;--flame:#0B0B0C;--viridian:#0B0B0C;--violet:#0B0B0C;--acid:#0B0B0C;--sky:#0B0B0C;
  --sky-1:#E4E4E7;--sky-2:#A1A1AA;--sky-3:#D4D4D8;--sky-4:#F4F4F5;
  --spectral:linear-gradient(100deg,#E4E4E7 0%,#A1A1AA 42%,#D4D4D8 74%,#F4F4F5 100%);
}
/* B/W: desaturate decorative imagery + neutralize hardcoded accents */
[data-theme="bw"] .hero-sky,
[data-theme="bw"] .splash-svg,
[data-theme="bw"] .cap-net,
[data-theme="bw"] .pf-card .pf-media,
[data-theme="bw"] .em-mark,
[data-theme="bw"] .brand .pk-logo,
[data-theme="bw"] .foot-top .pk-mark-fl{filter:grayscale(1)}
[data-theme="bw"] .sheet a.mlink:hover{color:#FFFFFF;opacity:.55}
[data-theme="bw"] .mark{background:#0B0B0C;color:#FFFFFF}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
body{
  font-family:var(--sans);background:var(--paper);color:var(--ink);
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .6s var(--ease),color .6s var(--ease);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}

/* grain + scanline texture overlay */
.grain{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:var(--grain-op);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44JyBudW1PY3RhdmVzPSczJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+")}
[data-theme="dark"] .grain{mix-blend-mode:screen}

/* ---------- custom cursor ---------- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:300;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cursor{width:46px;height:46px;border:1.5px solid #fff;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),background .3s,opacity .3s}
.cursor-dot{width:6px;height:6px;background:#fff;transform:translate(-50%,-50%)}
.cursor.grow{width:84px;height:84px;background:#fff}
.cursor.hide,.cursor-dot.hide{opacity:0}
.cursor .clabel{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#000;opacity:0;transition:opacity .25s;text-transform:uppercase}
.cursor.grow .clabel{opacity:1}
@media (pointer:coarse){.cursor,.cursor-dot{display:none}}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.full{padding-inline:var(--gut)}
section{position:relative}
.rule{height:var(--bd);background:var(--line);border:0}
.rule-soft{height:1px;background:var(--hair);border:0}

/* ---------- type ---------- */
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.ey{font-family:var(--mono);font-size:clamp(10px,1vw,12.5px);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);display:inline-flex;gap:10px;align-items:center}
.ey .sq{width:8px;height:8px;background:var(--accent);display:inline-block}
.display{font-family:var(--serif);font-weight:800;line-height:.84;letter-spacing:-.03em;text-transform:uppercase;
  font-size:clamp(58px,14vw,230px)}
.h1{font-family:var(--serif);font-weight:800;line-height:.9;letter-spacing:-.025em;text-transform:uppercase;font-size:clamp(40px,7.5vw,120px)}
.h2{font-family:var(--serif);font-weight:700;line-height:.92;letter-spacing:-.02em;text-transform:uppercase;font-size:clamp(32px,5vw,78px)}
.h3{font-family:var(--serif);font-weight:700;line-height:1;letter-spacing:-.01em;font-size:clamp(22px,2.6vw,38px)}
.lede{font-size:clamp(17px,1.5vw,23px);line-height:1.45;color:var(--ink-2);max-width:60ch;font-weight:400}
.big-body{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3.4vw,52px);line-height:1.16;letter-spacing:-.015em}
.mark{background:var(--acid);color:#14130F;padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.oc{color:transparent;-webkit-text-stroke:1.4px var(--ink)}
[data-theme="dark"] .oc{-webkit-text-stroke-color:var(--ink)}
.serif-it{font-style:italic;font-weight:500}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.7em;font-family:var(--mono);font-size:13px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;padding:17px 26px;border:var(--bd) solid var(--line);
  position:relative;overflow:hidden;isolation:isolate;transition:color .4s var(--ease)}
.btn .arw{transition:transform .4s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover{color:var(--paper)}
.btn:hover::before{transform:translateY(0)}
.btn:hover .arw{transform:translate(4px,-4px)}
.btn-fill{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-fill::before{background:var(--accent);transform:translateY(101%)}
.btn-fill:hover{color:#fff;border-color:var(--accent)}
.btn-acc{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-acc::before{background:var(--ink)}
.btn-acc:hover{border-color:var(--ink)}

/* ---------- header ---------- */
.head{position:fixed;top:0;left:0;right:0;z-index:120;transition:transform .5s var(--ease),background .4s,border-color .4s}
.head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--bd);background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.head.solid{background:color-mix(in oklab,var(--paper) 82%,transparent);backdrop-filter:blur(14px) saturate(1.3)}
.head.solid::after{transform:scaleX(1)}
.head.hide{transform:translateY(-104%)}
.nav{display:flex;align-items:center;justify-content:space-between;height:clamp(64px,8vh,84px)}
.brand{display:flex;align-items:center;gap:12px;z-index:2;position:relative}
/* soft halo behind the mark so it reads on dark hero backgrounds */
.brand::before{content:"";position:absolute;left:-14px;top:50%;width:78px;height:78px;transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(circle,color-mix(in oklab,var(--accent) 36%,transparent) 0%,transparent 68%);
  opacity:0;transition:opacity .5s var(--ease);pointer-events:none;z-index:-1}
.brand:has(.pk-scrolled)::before{opacity:0}
.brand img{height:30px;width:auto}
.brand .wm{font-family:var(--serif);font-weight:800;font-size:27px;letter-spacing:-.015em;text-transform:lowercase}
/* ---- brand orb — the P medallion; HIDDEN on desktop, shown only on mobile ---- */
.brand .pk-word{display:flex;align-items:center}
.brand .pk-word svg{display:block;height:78px !important;width:auto !important}
.brand-orb{display:none;position:relative;flex:0 0 auto;width:46px;height:46px;border-radius:50%;place-items:center;overflow:hidden;
  background:radial-gradient(125% 120% at 30% 16%, #1b2748 0%, #0a0e1d 72%);
  border:1.5px solid rgba(150,180,255,.30);
  box-shadow:0 8px 22px -8px rgba(91,168,255,.6), inset 0 1.5px 0 rgba(255,255,255,.16)}
.brand-orb::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:0;
  background:conic-gradient(from 0deg,transparent,rgba(91,168,255,.55),transparent 30%,rgba(140,124,255,.5),transparent 60%,rgba(54,198,240,.55),transparent 88%);
  -webkit-mask:radial-gradient(closest-side,transparent 78%,#000 80%);mask:radial-gradient(closest-side,transparent 78%,#000 80%);
  opacity:.9;mix-blend-mode:screen}
.brand-orb .pk-mark{position:relative;z-index:1;display:block;filter:drop-shadow(0 2px 6px rgba(43,217,232,.4))}
.brand-orb .pk-mark svg{display:block}
@keyframes orbspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:no-preference){.brand-orb::before{animation:orbspin 14s linear infinite}}
.em-mark svg{display:block;width:100% !important;height:auto !important}
.foot-big .pk-word{display:block}
.foot-big .pk-word svg{display:block;width:auto !important;height:clamp(88px,16vw,236px) !important}
#loader .lword .pk-word{display:block}
#loader .lword .pk-word svg{display:block;width:auto !important;height:clamp(56px,15vw,200px) !important}
.nav-c{display:flex;align-items:center;gap:4px}
.nav-c a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:10px 14px;color:var(--ink-2);transition:color .3s;position:relative}
.nav-c a:hover{color:var(--ink)}
.nav-c a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-c a:hover::after,.nav-c a.active::after{transform:scaleX(1)}
.nav-r{display:flex;align-items:center;gap:10px}
.tgl{width:44px;height:44px;border:none;background:transparent;display:grid;place-items:center;transition:background .3s,color .3s}
.tgl:hover{background:transparent;color:var(--accent)}
.tgl svg{width:18px;height:18px}
.burger{display:none;width:44px;height:44px;border:var(--bd) solid var(--line);place-items:center}
.burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative;transition:.3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);transition:.3s}
.burger span::before{top:-6px}.burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{top:0;transform:rotate(45deg)}
body.menu-open .burger span::after{top:0;transform:rotate(-45deg)}
body.menu-open{overflow:hidden}

/* fullscreen menu */
.sheet{position:fixed;inset:0;z-index:110;background:var(--ink);color:var(--paper);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease2);pointer-events:none;display:flex;flex-direction:column;justify-content:center;padding:var(--gut)}
.sheet.open{clip-path:inset(0 0 0 0);pointer-events:auto}
.sheet a.mlink{font-family:var(--serif);font-weight:800;text-transform:uppercase;font-size:clamp(40px,11vw,130px);line-height:.92;letter-spacing:-.03em;
  display:flex;align-items:baseline;gap:18px;padding:clamp(9px,1.9vh,22px) 0;color:var(--paper);opacity:0;transform:translateY(40px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;-webkit-text-stroke:0}
.sheet.open a.mlink{opacity:1;transform:none}
.sheet a.mlink:hover{color:var(--acid)}
.sheet a.mlink .mi{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.4em;color:var(--paper);opacity:1;-webkit-text-fill-color:initial}
.sheet-foot{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(20px,4vh,40px);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* progress */
.prog{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:var(--accent);z-index:130}

/* ---------- marquee ---------- */
.mq{overflow:hidden;display:flex;border-block:var(--bd) solid var(--line);background:var(--ink);color:var(--paper)}
.mq.alt{background:var(--paper);color:var(--ink)}
.mq-row{display:flex;gap:0;width:max-content;animation:mqx 30s linear infinite;flex:none}
.mq.rev .mq-row{animation-direction:reverse}
.mq:hover .mq-row{animation-play-state:paused}
.mq-row .it{display:inline-flex;align-items:center;gap:26px;padding:16px 26px;font-family:var(--serif);font-weight:800;
  font-size:clamp(20px,2.4vw,34px);text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap}
.mq-row .it .st{color:var(--accent);font-size:.5em}
@keyframes mqx{to{transform:translateX(-50%)}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
.clip{display:inline-block;overflow:hidden;vertical-align:bottom}
.clip>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease)}
.clip.in>span{transform:none}

@media (max-width:920px){
  .nav-c{display:none}
  .burger{display:grid}
}
/* ---- chrome: mobile + open-menu contrast (shared system) ---- */
/* When the fullscreen menu is open, header controls sit over the dark sheet —
   force them light so the X, theme icon and burger read clearly. */
body.menu-open .head{color:var(--paper)}
body.menu-open .burger{border-color:transparent}
body.menu-open .burger span::before,
body.menu-open .burger span::after{background:var(--paper)}
body.menu-open .tgl{color:var(--paper);border-color:transparent}
body.menu-open .tgl:hover{background:transparent;color:var(--paper)}
/* fullscreen menu: hide the flat header logo and show a self-contained vivid emblem
   inside the sheet (top-left) — reads on any sheet colour, in every theme. */
body.menu-open .head .brand{opacity:0 !important;pointer-events:none}
.sheet-brand{position:absolute;top:clamp(14px,3vh,26px);left:var(--gut);display:inline-flex;align-items:center;z-index:3;
  opacity:0;transform:translateY(-6px);transition:opacity .5s var(--ease) .12s,transform .5s var(--ease) .12s}
.sheet.open .sheet-brand{opacity:1;transform:none}
.sheet-brand .pk-mark,.sheet-brand .pk-mark svg{display:block}
.sheet-brand .pk-mark svg{height:clamp(42px,7vh,54px) !important;width:auto !important}
/* bright/vivid brandmark (no tile) on the dark sheet — light & dark themes alike */
.sheet-brand .sb-bw{display:none}
/* B&W stays monochrome: clean white mark */
html[data-theme="bw"] .sheet-brand .sb-color{display:none}
html[data-theme="bw"] .sheet-brand .sb-bw{display:block}
@media (max-width:560px){
  /* clean mobile header: bare P mark only (no circle), no wordmark, no Connect pill */
  .brand .pk-word{display:none}
  .brand-orb{display:grid !important;width:auto;height:auto;background:none;border:0;box-shadow:none;overflow:visible}
  .brand-orb::before{display:none}
  .brand-orb .pk-mark{filter:none}
  .brand-orb .pk-mark svg{height:43px !important;width:auto !important}
  .nav-r .nav-connect{display:none}
  .nav-r{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body.no-motion *,body.no-motion *::before,body.no-motion *::after{animation-play-state:paused!important}