/* ═══════════════════════════════════════════════
   Rzzro v3 — Design System
   Typography: Playfair Display / IBM Plex Mono / Inter
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@300;400;500;600&display=swap');

/* ── Reset & Variables ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --p:#4F46E5;--pl:#3d35d4;
  --ink:#0F0F0F;--ink2:#3D3D3D;--ink3:#8A8A8A;
  --border:#E8E8E8;--surf:#F5F5F3;--white:#FFFFFF;
  --mono:'IBM Plex Mono',monospace;
  --body:'Inter',sans-serif;
  --display:'Playfair Display',serif;
  /* Backward compat with old pages */
  --primary:#4F46E5;--accent:#6D5EF7;
  --text:#111827;--secondary:#6B7280;
  --bg-light:#F7F8FA;--bg-white:#FFFFFF;
}

/* ── Base ── */
body{font-family:var(--body);background:var(--white);color:var(--ink);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;}

/* ── Animations ── */
@keyframes breathe{
  0%  {opacity:1;transform:scale(1) translate(0,0);}
  25% {opacity:.88;transform:scale(1.03) translate(18px,-12px);}
  50% {opacity:.95;transform:scale(.97) translate(-10px,16px);}
  75% {opacity:.90;transform:scale(1.02) translate(14px,8px);}
  100%{opacity:1;transform:scale(.99) translate(-6px,-8px);}
}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── NAV ── */
nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 56px;height:60px;
  background:rgba(255,255,255,.93);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;
}
.logo{
  font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:-.01em;
  color:var(--ink);display:flex;align-items:center;gap:6px;text-decoration:none;
}
.ldot{width:7px;height:7px;border-radius:50%;background:var(--p);display:inline-block;margin-bottom:2px;}
.nav-links{display:flex;gap:28px;list-style:none;}
.nav-links a{font-size:13px;color:var(--ink3);text-decoration:none;transition:color .2s;}
.nav-links a:hover{color:var(--ink);}
.nav-links a.on{color:var(--ink);font-weight:500;}
.nav-r{display:flex;gap:10px;align-items:center;}
.btn-text{font-size:13px;font-weight:500;color:var(--ink2);background:none;border:none;cursor:pointer;transition:color .2s;}
.btn-text:hover{color:var(--ink);}
.btn-solid{
  font-size:13px;font-weight:500;color:white;background:var(--p);border:none;border-radius:6px;
  padding:9px 20px;cursor:pointer;transition:all .2s;
}
.btn-solid:hover{background:var(--pl);transform:translateY(-1px);}

/* ── Shared Hero Elements ── */
.hero{position:relative;background:#07061A;overflow:hidden;}
.mesh{position:absolute;inset:0;z-index:0;}
.mesh{background:radial-gradient(ellipse 60% 80% at 8% 50%,rgba(79,70,229,.65) 0%,transparent 55%),radial-gradient(ellipse 45% 60% at 70% 15%,rgba(109,94,247,.45) 0%,transparent 50%),radial-gradient(ellipse 35% 45% at 85% 75%,rgba(139,131,255,.35) 0%,transparent 50%),radial-gradient(ellipse 60% 40% at 40% 90%,rgba(79,70,229,.25) 0%,transparent 55%);animation:breathe 10s ease-in-out infinite alternate;}
.grain{position:absolute;inset:0;z-index:1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");opacity:.4;pointer-events:none;}
.gl{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(79,70,229,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(79,70,229,.09) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(ellipse 60% 70% at 20% 30%,black 10%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 60% 70% at 20% 30%,black 10%,transparent 70%);}
.hi{position:relative;z-index:2;}
.kick{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(139,131,255,.8);margin-bottom:18px;display:flex;align-items:center;gap:10px;}
.kick::before{content:'';display:block;width:24px;height:1px;background:rgba(109,94,247,.6);}
.hero h1,.hi h1{font-family:var(--display);font-size:52px;font-weight:400;color:white;letter-spacing:-.02em;line-height:1.05;}
.hsub{font-size:16px;font-weight:300;color:rgba(255,255,255,.45);line-height:1.7;max-width:560px;}

/* ── Section Labels ── */
.s-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--p);margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.s-label::before{content:'';display:block;width:20px;height:1px;background:var(--p);}
.s-title{font-family:var(--display);font-size:42px;font-weight:400;color:var(--ink);letter-spacing:-.02em;line-height:1.1;}
.s-sub{font-size:15px;color:var(--ink3);line-height:1.7;max-width:560px;font-weight:400;}

/* ── FOOTER ── */
footer{
  background:var(--surf);padding:40px 56px;
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--border);
}
.f-logo{font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:6px;}
.f-dot{width:7px;height:7px;border-radius:50%;background:var(--p);margin-bottom:2px;}
.f-tag{font-family:var(--mono);font-size:10px;color:var(--ink3);margin-top:4px;letter-spacing:.03em;}
.f-links{display:flex;gap:24px;list-style:none;}
.f-links a{font-family:var(--mono);font-size:10px;color:var(--ink3);text-decoration:none;letter-spacing:.06em;text-transform:uppercase;transition:color .2s;}
.f-links a:hover{color:var(--p);}
.f-copy{font-family:var(--mono);font-size:9px;color:var(--ink3);opacity:.4;}

/* ── MOBILE (≤768px) ── */
@media (max-width: 768px) {
  nav{padding:0 20px;height:52px;}
  .nav-links{display:none;}
  .nav-r{gap:6px;}
  .btn-text{font-size:11px;}
  .btn-solid{font-size:11px;padding:7px 14px;}

  .hero h1,.hi h1{font-size:34px;}
  .hsub{font-size:14px;}
  .hero[style]{padding:40px 20px 32px !important;}

  footer{flex-direction:column;gap:20px;align-items:flex-start;padding:28px 20px;}
  .f-links{flex-wrap:wrap;gap:14px;}

  .s-title{font-size:30px;}
  .s-sub{font-size:14px;}
}