@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #07070a; color: #fff; font-family: 'Inter Tight', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

:root {
  --bg: #07070a;
  --bg-soft: #0d0d12;
  --ink: #ffffff;
  --ink-2: rgba(255,255,255,0.62);
  --ink-3: rgba(255,255,255,0.42);
  --line: rgba(255,255,255,0.08);
  --accent-a: #b5fd5b;
  --accent-b: #6ee7ff;
  --accent-c: #d894ff;
}

.font-serif { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.01em; }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.italic-serif { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }

/* ───────────── Liquid Glass ─────────────  */
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: none;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    0 10px 40px -10px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.18) 20%,
    rgba(255,255,255,0.02) 40%,
    rgba(255,255,255,0.02) 60%,
    rgba(255,255,255,0.18) 80%,
    rgba(255,255,255,0.55) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.liquid-glass-strong {
  background: rgba(20, 20, 26, 0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.10),
    0 20px 60px -20px rgba(0,0,0,0.6);
  position: relative;
  overflow: hidden;
}
.liquid-glass-strong::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(255,255,255,0.35), rgba(255,255,255,0.04) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.20));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ───────────── Grain ───────────── */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.18;
}

/* ───────────── Gradient text ───────────── */
.gradient-ink {
  background: linear-gradient(110deg, var(--accent-a) 0%, var(--accent-b) 45%, var(--accent-c) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ───────────── Scroll reveal ───────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ───────────── Marquee ───────────── */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 40s linear infinite; }

/* ───────────── Float orb ───────────── */
@keyframes floaty {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(0,-30px,0) scale(1.05); }
}
.floaty { animation: floaty 9s ease-in-out infinite; }

/* ───────────── Spin ring ───────────── */
@keyframes spin-slow { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.spin-slow { animation: spin-slow 60s linear infinite; }
@keyframes spin-rev { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
.spin-rev { animation: spin-rev 80s linear infinite; }

/* ───────────── Buttons ───────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  background: #fff; color: #07070a;
  font-weight: 500; font-size: 15px; letter-spacing: -0.01em;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
  cursor: pointer; border: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -16px rgba(255,255,255,0.4); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px;
  color: #fff; font-weight: 500; font-size: 15px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: background .3s, border-color .3s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); }

/* ───────────── Inputs ───────────── */
.input-bare {
  flex: 1;
  background: transparent; border: none; outline: none;
  color: #fff; font: inherit;
  font-size: 16px;
}
.input-bare::placeholder { color: rgba(255,255,255,0.4); }

.field {
  width: 100%; padding: 16px 18px; border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff; font: inherit; font-size: 15px;
  transition: border-color .3s, background .3s;
  outline: none;
}
.field:focus { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.05); }
.field::placeholder { color: rgba(255,255,255,0.35); }

/* ───────────── Card hover ───────────── */
.tilt-card { transition: transform .4s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; will-change: transform; }

.glow-edge { position: relative; }
.glow-edge::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.10), transparent 40%);
  opacity: 0; transition: opacity .3s;
}
.glow-edge:hover::after { opacity: 1; }

/* ───────────── Section ───────────── */
.section { position: relative; padding: 140px 24px; }
.container { max-width: 1280px; margin: 0 auto; }
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.kicker .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--accent-a); box-shadow: 0 0 12px var(--accent-a); }

.section-title {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.section-eyebrow { color: rgba(255,255,255,0.55); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; }

/* ───────────── 3D ring (CSS only) ───────────── */
.ring-3d {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events: none;
}

/* ───────────── Scrollbar ───────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #07070a; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

/* ───────────── Tilt 3D card stack ───────────── */
.persp { perspective: 1400px; }

/* ───────────── Marquee tags ───────────── */
.tag-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  font-size: 14px; color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  white-space: nowrap;
}

/* ───────────── Pulse dot ───────────── */
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(181,253,91,0.55); } 50% { box-shadow: 0 0 0 12px rgba(181,253,91,0); } }
.pulse-dot { animation: pulse-dot 2.4s ease-out infinite; }

/* ───────────── Footer link ───────────── */
.footer-link { color: rgba(255,255,255,0.5); font-size: 14px; transition: color .25s; display: block; padding: 6px 0; }
.footer-link:hover { color: #fff; }

/* ───────────── Service card ───────────── */
.service-card { position: relative; padding: 32px; border-radius: 24px; overflow: hidden; transition: transform .5s cubic-bezier(.2,.7,.2,1), background .5s; cursor: pointer; }
.service-card:hover { transform: translateY(-4px); }

/* ───────────── Highlight numbers ───────────── */
.big-num {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(64px, 8vw, 124px);
  line-height: 0.85;
  font-weight: 400;
}

/* ───────────── Glow blobs ───────────── */
.blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }

/* ───────────── Map dot ───────────── */
.map-dot {
  width: 10px; height: 10px; border-radius: 99px;
  background: var(--accent-a);
  box-shadow: 0 0 0 4px rgba(181,253,91,0.18), 0 0 18px var(--accent-a);
}

/* ───────────── Selection ───────────── */
::selection { background: rgba(181, 253, 91, 0.35); color: #fff; }