/* Surf · Derin Okyanus skin for subpages (pricing, legal). Load after styles.css. */

@font-face { font-family: 'Geist'; font-weight: 400; font-display: swap; src: url('fonts/geist-regular.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 500; font-display: swap; src: url('fonts/geist-medium.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 600; font-display: swap; src: url('fonts/geist-semibold.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 700 800; font-display: swap; src: url('fonts/geist-bold.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('fonts/nunito-extrabold.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 900; font-display: swap; src: url('fonts/nunito-black.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 400 600; font-display: swap; src: url('fonts/geist-mono-medium.woff2') format('woff2'); }

:root {
  --bg: #f3f9fb;
  --surface: #ffffff;
  --surface-2: #e8f3f6;
  --border: #d3e4ea;
  --text: #0b1a2a;
  --text-muted: #4f6577;
  --accent: #0e8f86;
  --accent-2: #1f8fd6;
  --accent-soft: rgba(14, 143, 134, 0.1);
  --gradient: linear-gradient(120deg, #3fe0d0 0%, #1f8fd6 100%);
  --gradient-soft: linear-gradient(135deg, rgba(63, 224, 208, 0.14), rgba(31, 143, 214, 0.1));
  --radius: 18px;
  --radius-lg: 24px;
}
html[data-theme="dark"] {
  --bg: #050a14;
  --surface: #0c1626;
  --surface-2: #0f1c2e;
  --border: #1a2d47;
  --text: #eaf6f8;
  --text-muted: #8fa6b8;
  --accent: #3fe0d0;
  --accent-2: #1f8fd6;
  --accent-soft: rgba(63, 224, 208, 0.12);
  --gradient-soft: linear-gradient(135deg, rgba(63, 224, 208, 0.14), rgba(31, 143, 214, 0.12));
  --shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
}

body { font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
h1, h2, .pricing-header h1, .legal h1 { font-family: 'Nunito', 'Geist', sans-serif; font-weight: 900; letter-spacing: -0.015em; }
.legal h2 { font-family: 'Nunito', 'Geist', sans-serif; font-weight: 800; }
.eyebrow { font-family: 'Geist Mono', monospace; letter-spacing: 0.16em; color: var(--accent); }

/* Header */
header { background: rgba(243, 249, 251, 0.82); border-bottom-color: var(--border); }
html[data-theme="dark"] header { background: rgba(5, 10, 20, 0.78); }
.logo { background: none; color: var(--text); -webkit-text-fill-color: currentColor; font-family: 'Nunito', 'Geist', sans-serif; font-weight: 900; font-size: 21px; letter-spacing: -0.01em; }
.logo b { color: var(--accent); font-weight: 900; }
.logo-img { width: 42px; height: auto; border-radius: 0; object-fit: contain; }
html:not([data-theme="dark"]) .logo-img { filter: brightness(0.62) saturate(1.6); }

/* Buttons */
.btn { border-radius: 999px; font-weight: 700; }
.btn-primary { background: #3fe0d0; color: #04121a; animation: none; box-shadow: 0 10px 30px -12px rgba(63, 224, 208, 0.8); }
.btn-primary::after { background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent); }
.btn-primary:hover { background: #7af5ea; box-shadow: 0 14px 38px -12px rgba(63, 224, 208, 0.95); }
.btn-ghost { border-radius: 999px; }

/* Pricing */
.plan { border-radius: 26px; }
.plan.featured { border: 1px solid rgba(63, 224, 208, 0.55); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 42%); }
.plan .plan-badge { background: #ffb547; color: #1a1204; }
.faq-item { border-radius: 18px; }

/* A calm swell above the footer on every subpage */
footer { position: relative; margin-top: 110px; border-top: 0; background: linear-gradient(180deg, #0e4e8a 0%, #072a4c 45%, #04101f 100%); color: rgba(234, 246, 248, 0.85); }
footer::before { content: ''; position: absolute; left: 0; right: 0; top: -44px; height: 46px; background: no-repeat bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 30C160 6 320 6 480 26s320 22 480 2 320-22 480 2v16H0z' fill='%230e4e8a'/%3E%3Cpath d='M0 30C160 6 320 6 480 26s320 22 480 2 320-22 480 2' fill='none' stroke='%237af5ea' stroke-opacity='.55' stroke-width='2'/%3E%3C/svg%3E"); pointer-events: none; }
footer span, footer a { color: rgba(234, 246, 248, 0.8); }
footer a:hover { color: #fff; }