/* ===========================================================
   PGSPACE — shared design system
   Brand gradient (from logo): teal #2F8195 -> violet #7A5F86 -> coral #CE4D62
   =========================================================== */

:root{
  /* ---- brand ---- */
  --teal:   #3fa0b8;
  --teal-deep: #2f8195;
  --violet: #8a6f97;
  --coral:  #e0566e;
  --coral-deep: #ce4d62;

  --grad: linear-gradient(110deg, var(--teal) 0%, var(--violet) 50%, var(--coral) 100%);
  --grad-soft: linear-gradient(110deg, #2f8195 0%, #7a5f86 52%, #ce4d62 100%);

  /* ---- space neutrals (cool, low chroma) ---- */
  --bg:        #07080f;
  --bg-2:      #0b0d18;
  --surface:   #10121f;
  --surface-2: #161a2b;
  --line:      rgba(180,190,225,0.12);
  --line-2:    rgba(180,190,225,0.20);

  --ink:      #eef0f8;
  --ink-soft: #b7bdd2;
  --ink-mute: #7d8399;

  /* ---- type ---- */
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "Sora", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* ---- structure ---- */
  --maxw: 1200px;
  --radius: 18px;
  --radius-lg: 26px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:rgba(224,86,110,.32); color:#fff; }

/* ---- scrollbar ---- */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#222640; border-radius:20px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#33384f; }

/* ===========================================================
   Background field (fixed) — stars + parallax orbs
   =========================================================== */
.field{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.field .stars{ position:absolute; inset:-10%; }
.field .orb{
  position:absolute; border-radius:50%;
  filter:blur(70px); opacity:.45; will-change:transform;
}
.orb.a{ width:560px; height:560px; background:radial-gradient(circle, #2f8195 0%, transparent 68%); top:-160px; left:-120px; }
.orb.b{ width:620px; height:620px; background:radial-gradient(circle, #ce4d62 0%, transparent 68%); top:36vh; right:-200px; opacity:.32; }
.orb.c{ width:520px; height:520px; background:radial-gradient(circle, #7a5f86 0%, transparent 70%); top:120vh; left:18%; opacity:.3; }
.field::after{ /* subtle grain/vignette */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 50% -10%, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* ===========================================================
   Layout helpers
   =========================================================== */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.page{ position:relative; z-index:1; }
section{ position:relative; z-index:1; }

.eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--ink-mute);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:24px; height:1px;
  background:var(--grad); display:inline-block;
}
.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.05; letter-spacing:-0.02em; margin:0; }
.h-xl{ font-size:clamp(44px, 7vw, 92px); }
.h-lg{ font-size:clamp(34px, 4.6vw, 60px); }
.h-md{ font-size:clamp(26px, 3vw, 38px); }
.lead{ font-size:clamp(17px,1.5vw,21px); color:var(--ink-soft); max-width:60ch; }
.muted{ color:var(--ink-soft); }

/* ===========================================================
   Buttons
   =========================================================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:600; font-size:15.5px;
  padding:14px 26px; border-radius:999px; cursor:pointer;
  border:1px solid transparent; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{
  position:relative; color:#fff; background:var(--grad);
  box-shadow:0 8px 30px -8px rgba(224,86,110,.5), 0 4px 14px -6px rgba(47,129,149,.5);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 44px -10px rgba(224,86,110,.6), 0 6px 20px -6px rgba(47,129,149,.55); }
.btn-ghost{
  color:var(--ink); background:rgba(255,255,255,.03);
  border:1px solid var(--line-2); backdrop-filter:blur(8px);
}
.btn-ghost:hover{ border-color:rgba(255,255,255,.4); transform:translateY(-2px); background:rgba(255,255,255,.06); }
.btn .arr{ transition:transform .3s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

/* ===========================================================
   Glass card
   =========================================================== */
.card{
  position:relative; background:linear-gradient(180deg, rgba(22,26,43,.7), rgba(16,18,31,.7));
  border:1px solid var(--line); border-radius:var(--radius);
  backdrop-filter:blur(10px);
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.card:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:0 24px 60px -28px rgba(0,0,0,.8); }
.card.glow::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad); -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 .45s;
}
.card.glow:hover::before{ opacity:.7; }

/* status pills */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; border:1px solid var(--line-2);
}
.pill .dot{ width:7px; height:7px; border-radius:50%; }
.pill.live{ color:#7fe0c8; } .pill.live .dot{ background:#3fd6b0; box-shadow:0 0 10px #3fd6b0; }
.pill.dev{ color:#cdb3e0; } .pill.dev .dot{ background:#b388d6; box-shadow:0 0 10px #b388d6; }
.pill.plan{ color:#f0a5b3; } .pill.plan .dot{ background:#e0566e; box-shadow:0 0 10px #e0566e; }

/* divider line */
.hr{ height:1px; background:var(--line); border:0; margin:0; }

/* reveal-on-scroll + directional / 3D variants */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); will-change:transform,opacity; }
.reveal.r3{ transform:perspective(1000px) rotateX(20deg) translateY(50px); transform-origin:50% 100%; }
.reveal.rl{ transform:translateX(-52px); }
.reveal.rr{ transform:translateX(52px); }
.reveal.rz{ transform:scale(.9); }
.reveal.rblur{ filter:blur(10px); }
.reveal.in{ opacity:1; transform:none; filter:none; }

/* ---- page-load entrance ---- */
@keyframes pageIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.page{ animation:pageIn .75s var(--ease) both; }
@keyframes navIn{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:none; } }
.nav{ animation:navIn .7s var(--ease) both .05s; }

/* ---- 3D mouse-tilt cards ---- */
[data-tilt]{ transform-style:preserve-3d; transition:transform .3s var(--ease), box-shadow .3s var(--ease); will-change:transform; }
[data-tilt] .tz{ transform:translateZ(38px); transform-style:preserve-3d; }
[data-tilt] .tz2{ transform:translateZ(20px); }
[data-tilt]:hover{ box-shadow:0 30px 70px -28px rgba(0,0,0,.85); }
.shine{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(360px 360px at var(--mx,50%) var(--my,0%), rgba(255,255,255,.12), transparent 60%); }
[data-tilt]:hover .shine{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .reveal, .page, .nav{ animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; filter:none !important; }
}

/* ===========================================================
   Nav
   =========================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(7,8,15,.72); backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--line); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:40px; width:auto; filter:drop-shadow(0 4px 14px rgba(224,86,110,.25)); }
.brand .wm{ font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:.02em; }
.brand .wm small{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.34em; color:var(--ink-mute); margin-top:1px; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ font-size:15px; color:var(--ink-soft); transition:color .25s; position:relative; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; height:1.5px; width:0; background:var(--grad); transition:width .3s var(--ease); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.3s; }
.mobile-menu{ display:none; }

@media (max-width:880px){
  .nav-links, .nav-cta .btn{ display:none; }
  .burger{ display:flex; }
  .mobile-menu{
    display:flex; flex-direction:column; gap:4px;
    position:fixed; top:74px; left:0; right:0; z-index:55;
    background:rgba(8,9,18,.96); backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line); padding:14px 28px 24px;
    transform:translateY(-120%); transition:transform .4s var(--ease);
  }
  .mobile-menu.open{ transform:translateY(0); }
  .mobile-menu a{ padding:14px 4px; font-size:18px; font-family:var(--display); border-bottom:1px solid var(--line); }
  .mobile-menu .btn{ margin-top:16px; justify-content:center; }
}

/* ===========================================================
   Footer
   =========================================================== */
.footer{ position:relative; z-index:1; border-top:1px solid var(--line); margin-top:120px; padding:72px 0 40px; background:linear-gradient(180deg, transparent, rgba(11,13,24,.6)); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; }
.footer h5{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 18px; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.footer ul a{ color:var(--ink-soft); font-size:15px; transition:color .25s; }
.footer ul a:hover{ color:var(--ink); }
.footer .brand img{ height:54px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-top:56px; padding-top:28px; border-top:1px solid var(--line); color:var(--ink-mute); font-size:13.5px; }
.footer-bottom .links{ display:flex; gap:22px; flex-wrap:wrap; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:34px; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   Generic page header (sub pages)
   =========================================================== */
.page-head{ padding:160px 0 56px; }
.page-head .lead{ margin-top:20px; }

/* prose for legal pages */
.prose{ max-width:760px; }
.prose h2{ font-size:24px; margin:48px 0 14px; }
.prose h3{ font-size:18px; font-family:var(--body); font-weight:700; margin:26px 0 8px; color:var(--ink); }
.prose p, .prose li{ color:var(--ink-soft); font-size:16px; line-height:1.75; }
.prose ul{ padding-left:20px; }
.prose li{ margin:6px 0; }
.prose a{ color:var(--teal); border-bottom:1px solid rgba(63,160,184,.4); }
.prose strong{ color:var(--ink); }

/* utility */
.grid{ display:grid; }
.flex{ display:flex; }
@media (max-width:880px){ :root{ --radius:16px; } }