/* =========================================================
   bownode. — shared design system
   dark, purple/blue, liquid-glass, textured buttons
   ========================================================= */

:root{
  /* base surface */
  --bg-0:#0a0714;
  --bg-1:#120c22;
  --bg-2:#1a1233;
  --bg-3:#241a44;

  /* brand gradient family */
  --purple:#8A5CFF;
  --indigo:#5B5FEF;
  --blue:#4277c2;
  --blue-bright:#5aa0e8;
  --pink:#ff6fb0;
  --yellow:#ffd166;
  --mint:#5eead4;

  --grad-brand: linear-gradient(120deg, var(--purple), var(--indigo) 55%, var(--blue));
  --grad-brand-2: linear-gradient(120deg, var(--pink), var(--purple) 60%, var(--indigo));

  /* text */
  --text-hi:#f6f4ff;
  --text-md:#c9c2eb;
  --text-lo:#8d84b8;

  /* glass */
  --glass-fill: rgba(255,255,255,0.06);
  --glass-fill-strong: rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.16);
  --glass-shadow: 0 20px 60px -20px rgba(20,10,50,0.65);

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-xl: 44px;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(138,92,255,0.20), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(66,119,194,0.18), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, rgba(255,111,176,0.10), transparent 60%),
    var(--bg-0);
  color:var(--text-hi);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}

h1,h2,h3,h4,.display{
  font-family:'Poppins','Inter',sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.08;
  text-transform:lowercase;
  margin:0 0 .5em;
}
p{ color:var(--text-md); line-height:1.7; margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

::selection{ background:rgba(138,92,255,0.4); color:#fff; }

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 28px;
}
.section{ padding:110px 0; position:relative; }
.section-sm{ padding:64px 0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Poppins',sans-serif; font-weight:600; text-transform:lowercase;
  font-size:13px; letter-spacing:.04em; color:var(--text-md);
  background:var(--glass-fill); border:1px solid var(--glass-border);
  padding:7px 16px; border-radius:100px; backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--yellow); box-shadow:0 0 10px var(--yellow); }

.grad-text{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- liquid glass panel ---------- */
.glass{
  position:relative;
  background:linear-gradient(160deg, var(--glass-fill-strong), var(--glass-fill) 60%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.18);
  overflow:hidden;
  /* belt-and-suspenders clip: overflow:hidden alone can visibly fail to
     round two corners in Chromium when a blurred child (.blob) forces a
     new compositing layer inside this panel — clip-path guarantees the
     rounding regardless of child compositing. */
  clip-path:inset(0 round var(--radius-lg));
}
.glass::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(560px 220px at 15% -10%, rgba(255,255,255,0.14), transparent 65%);
  pointer-events:none;
}
.glass-pad{ padding:36px; }

/* small gradient icon chip used on category / value cards across pages
   (previously only defined in ocean.css, so pages that don't load that
   stylesheet — about.html — rendered it as an unstyled full-width bar
   instead of a 52x52 rounded square; lives here now since it's a
   shared, generic component, not ocean-hero specific). */
.cat-icon{
  width:52px; height:52px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; margin-bottom:18px;
  box-shadow:0 10px 24px -8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* ---------- nav ---------- */
/* fixed (not sticky/in-flow) so each page's own background shows through
   behind it — the ocean hero's blue sky, in particular, should reach the
   very top of the page instead of stopping short above the nav bar. */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:16px 0;
  transition:padding .3s var(--ease);
}
.site-nav.scrolled{ padding:10px 0; }
.site-nav.scrolled .nav-inner{ box-shadow:0 14px 46px -18px rgba(0,0,0,0.75); }
.site-nav .nav-inner{
  max-width:1240px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(18,12,34,0.55);
  border:1px solid var(--glass-border);
  border-radius:100px;
  padding:10px 14px 10px 20px;
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 10px 40px -18px rgba(0,0,0,0.6);
}
.brand{ display:flex; align-items:center; gap:10px; font-family:'Poppins',sans-serif; font-weight:700; font-size:19px; }
.brand img{ height:30px; width:30px; border-radius:9px; }
.brand .b-dot{ color:var(--yellow); }

.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  padding:10px 16px; border-radius:100px; font-size:14.5px; color:var(--text-md);
  transition:.25s var(--ease);
  text-transform:lowercase;
}
.nav-links a:hover, .nav-links a.active{ color:var(--text-hi); background:var(--glass-fill); }

.nav-cta{ display:flex; align-items:center; gap:10px; }

.nav-toggle{ display:none; }

/* ---------- buttons (textured, glassy) ---------- */
.btn{
  --btnfg:#fff;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px;
  border-radius:100px;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:14.5px;
  text-transform:lowercase; letter-spacing:.01em;
  border:1px solid transparent;
  cursor:pointer;
  color:var(--btnfg);
  isolation:isolate;
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:scale(.96); }

.btn-primary{
  background:var(--grad-brand);
  box-shadow:0 14px 34px -12px rgba(91,95,239,0.65), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-primary::before{
  /* subtle diagonal texture */
  content:'';
  position:absolute; inset:0; z-index:-1;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,0.14) 0 2px, transparent 2px 8px);
  mix-blend-mode:overlay;
  opacity:.7;
}
.btn-primary::after{
  content:'';
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:skewX(-20deg);
  transition:left .7s var(--ease);
}
.btn-primary:hover::after{ left:130%; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 44px -14px rgba(91,95,239,0.8), inset 0 1px 0 rgba(255,255,255,0.4); }

.btn-glass{
  background:var(--glass-fill);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.btn-glass:hover{ background:var(--glass-fill-strong); transform:translateY(-2px); }

.btn-ghost{ background:transparent; color:var(--text-md); }
.btn-ghost:hover{ color:var(--text-hi); }

.btn-sm{ padding:10px 18px; font-size:13.5px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- chips / pills ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:100px;
  font-size:12.5px; font-weight:600; text-transform:lowercase;
  background:var(--glass-fill); border:1px solid var(--glass-border);
  color:var(--text-md);
}

/* ---------- cards ---------- */
.card{
  background:linear-gradient(160deg, var(--glass-fill-strong), var(--glass-fill));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  padding:28px;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  position:relative;
}
.card:hover{ transform:translateY(-6px); border-color:rgba(255,255,255,0.3); box-shadow:0 30px 60px -24px rgba(90,80,200,0.45); }

/* ---------- grid helpers ---------- */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- reveal-on-scroll ---------- */
/* content is visible by default; only hidden-then-revealed once JS confirms
   it's running (html.js), so no-JS / pre-hydration states never lose content */
.reveal{ opacity:1; transition:opacity .8s var(--ease-soft), transform .8s var(--ease-soft); }
html.js .reveal{ opacity:0; transform:translateY(28px); }
html.js .reveal.in{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }

/* ---------- footer ---------- */
.site-footer{ padding:70px 0 40px; position:relative; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:50px; }
.footer-col h4{ font-size:14px; color:var(--text-hi); text-transform:lowercase; margin-bottom:14px;}
.footer-col a{ display:block; padding:6px 0; color:var(--text-lo); font-size:14px; transition:.2s; }
.footer-col a:hover{ color:var(--text-hi); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--glass-border); color:var(--text-lo); font-size:13px; flex-wrap:wrap; gap:12px;}
.social-row{ display:flex; gap:10px; }
.social-row a{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--glass-fill); border:1px solid var(--glass-border); transition:.25s; }
.social-row a:hover{ background:var(--grad-brand); transform:translateY(-3px); }

/* ---------- forms ---------- */
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--text-md); margin-bottom:8px; text-transform:lowercase; letter-spacing:.02em; }
.field input, .field select, .field textarea{
  width:100%;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--glass-border);
  color:var(--text-hi);
  padding:14px 16px;
  border-radius:14px;
  font-family:inherit; font-size:14.5px;
  transition:.25s var(--ease);
  backdrop-filter:blur(8px);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--purple); background:rgba(138,92,255,0.08);
  box-shadow:0 0 0 4px rgba(138,92,255,0.18);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--text-lo); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; }
.checkbox-row input{ margin-top:4px; width:auto; }
.hint{ font-size:12.5px; color:var(--text-lo); margin-top:6px; }

/* ---------- misc utility ---------- */
.text-center{ text-align:center; }
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; } .gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;}
.muted{ color:var(--text-lo); }
.max-w{ max-width:640px; }
.center-col{ margin-left:auto; margin-right:auto; }

.divider{ height:1px; background:linear-gradient(90deg, transparent, var(--glass-border), transparent); margin:50px 0; }

.blob{
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.5; pointer-events:none; z-index:0;
}

.badge-glow{
  display:inline-block; padding:4px 12px; border-radius:100px; font-size:11.5px; font-weight:700;
  background:linear-gradient(90deg, var(--pink), var(--purple)); color:#fff; letter-spacing:.03em;
}

/* page hero top spacing (non-ocean pages) */
.page-hero{ padding:150px 0 60px; text-align:center; }
.page-hero h1{ font-size:clamp(38px,6vw,64px); }
.page-hero p{ font-size:18px; max-width:640px; margin-left:auto; margin-right:auto; }

/* ============ responsive ============ */
@media (max-width: 980px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px){
  .section{ padding:76px 0; }
  .nav-links{
    position:fixed; inset:78px 16px auto 16px;
    flex-direction:column; align-items:stretch; gap:4px;
    background:rgba(14,10,28,0.95);
    border:1px solid var(--glass-border);
    border-radius:24px; padding:14px;
    backdrop-filter:blur(24px);
    transform:translateY(-14px); opacity:0; visibility:hidden;
    transition:.35s var(--ease);
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
  }
  .nav-links.open{ transform:translateY(0); opacity:1; visibility:visible; }
  .nav-links a{ padding:14px 16px; }
  .nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:50%;
    background:var(--glass-fill); border:1px solid var(--glass-border);
    color:var(--text-hi); cursor:pointer;
  }
  .nav-cta .btn-sm.hide-mobile{ display:none; }
  .grid-4, .grid-3{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:26px; }
  .field-row{ grid-template-columns:1fr; }
}