/* ============================================================
   SCRIBL — marketing site
   Aesthetic: "premium school notebook" — warm paper background,
   grid-paper texture, dark device UI floating above it, one
   confident accent (cobalt blue) + the same multi-color notebook
   palette used inside the real app. Caveat for the handwritten
   voice, Satoshi for everything structural.
   ============================================================ */

@font-face { font-family: 'Satoshi'; src: url('assets/fonts/Satoshi-Light.otf'); font-weight: 300; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/Satoshi-Regular.otf'); font-weight: 400; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/Satoshi-Medium.otf'); font-weight: 500; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/Satoshi-Bold.otf'); font-weight: 700; }
@font-face { font-family: 'Caveat'; src: url('assets/fonts/Caveat-Regular.ttf'); font-weight: 400; }

:root {
  --paper: #F3F1EA;
  --paper-line: #DEDACB;
  --ink: #15140F;
  --ink-soft: rgba(21,20,15,0.62);
  --ink-faint: rgba(21,20,15,0.38);
  --cobalt: #2D5BD9;
  --cobalt-deep: #1E3F9E;
  --green: #1E8F6B;
  --orange: #C2410C;
  --purple: #7C3AED;
  --pink: #BE185D;
  --card: #FFFFFF;
  --radius: 20px;
  --maxw: 1180px;
}

* { box-sizing: border-box; }
/* overflow-x:hidden on BOTH html and body — iOS Safari has a long-standing bug where setting it
   only on body doesn't reliably stop a too-wide absolutely-positioned descendant (see
   .hero-bg-grid below) from expanding the page's layout viewport itself, which then drags every
   position:fixed element (the nav) along with it, rendering it partly off-screen. Belt-and-
   suspenders: this stops the viewport from growing, and .hero gets its own overflow:hidden below
   so the oversized glow is clipped at the source instead of relying on this alone to catch it. */
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Satoshi', -apple-system, sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  position: relative;
  width: 100%;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- texture layers ---------- */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.noise-bg {
  position: fixed; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 0%, transparent 75%);
}

/* ---------- reveal-on-scroll ---------- */
.reveal, .reveal-img {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);
}
.reveal-img { transform: translateY(40px) scale(0.97); }
.reveal.in, .reveal-img.in { opacity: 1; transform: none; }

/* ============== NAV ============== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 18px 0;
  /* The 0 horizontal padding here is fine on desktop because max-width + auto-margin on
     .nav-inner already creates the side inset — but on narrow viewports that auto-margin
     collapses to ~0, so without an explicit side gutter the pill stretches edge-to-edge and
     stops looking like a contained pill. The PHONE breakpoint below overrides this padding. */
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(243,241,234,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(21,20,15,0.08);
  border-radius: 999px;
  height: 58px;
  position: relative;
}
.nav-left { display: flex; align-items: center; gap: 10px; }
.nav-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; }
.nav-icon { width: 26px; height: 26px; border-radius: 7px; }
.nav-section-links { display: flex; align-items: center; gap: 28px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); }
.nav-section-links a:hover { color: var(--ink); }
.nav-controls { display: flex; align-items: center; gap: 14px; }
.nav-cta {
  background: var(--ink); color: var(--paper) !important;
  padding: 9px 18px; border-radius: 999px; font-weight: 700;
}

/* Hidden on desktop — .nav-section-links is shown inline there. Only appears (see PHONE
   breakpoint) once the links move into the collapsible dropdown. */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center; gap: 4px;
  width: 30px; height: 30px; padding: 0;
  background: none; border: none; cursor: pointer;
}
.hamburger span {
  display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav.menu-open .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.menu-open .hamburger span:nth-child(2) { opacity: 0; }
.nav.menu-open .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.lang-switch {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1px solid rgba(21,20,15,0.16);
  border-radius: 999px; padding: 7px 12px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  cursor: pointer; color: var(--ink-faint);
  transition: border-color 0.2s ease;
}
.lang-switch:hover { border-color: var(--ink); }
.lang-switch .lang-sep { color: var(--ink-faint); font-weight: 400; }
.lang-switch [data-lang-opt] { transition: color 0.2s ease; }
.lang-switch [data-lang-opt].active { color: var(--ink); }

.nav-redeem {
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.nav-redeem:hover { color: var(--ink); }
.nav-redeem-mobile { display: none; }

/* ============== HERO ============== */
.hero {
  position: relative;
  padding: 168px 28px 0;
  max-width: var(--maxw); margin: 0 auto;
  text-align: center;
}
.hero-kicker {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cobalt); font-weight: 700; margin-bottom: 18px;
}
.hero-title {
  font-size: clamp(48px, 8.5vw, 104px);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 26px;
}
.hero-script {
  font-family: 'Caveat', cursive;
  font-weight: 400;
  color: var(--cobalt);
  font-size: 1.18em;
  display: inline-block;
  transform: rotate(-2deg) translateY(0.04em);
}
.hero-sub {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--ink-soft);
  max-width: 560px; margin: 0 auto 38px;
  line-height: 1.55;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; margin-bottom: 80px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 28px; border-radius: 999px;
  font-weight: 700; font-size: 15.5px;
  transition: transform 0.25s cubic-bezier(.16,1,.3,1), box-shadow 0.25s ease;
}
.btn-primary {
  background: var(--ink); color: var(--paper);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 24px rgba(21,20,15,0.18);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(21,20,15,0.24); }
.btn-ghost { color: var(--ink); border: 1.5px solid rgba(21,20,15,0.18); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-lg { padding: 18px 36px; font-size: 17px; }

.hero-bg-grid {
  position: absolute; top: -40px; left: 50%;
  /* max-width:100vw is the actual fix for the nav "going off-screen" bug — this glow used to be
     a flat 1400px regardless of viewport, which on a narrow phone overflowed past the screen
     edges. iOS Safari can let a too-wide absolutely-positioned descendant like this one inflate
     the whole page's layout viewport, dragging every position:fixed element (the nav) along with
     it — capping the width here removes the overflow at its source. */
  width: 1400px; max-width: 100vw; height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 0%, rgba(45,91,217,0.10), transparent 70%);
  z-index: -1;
}

.hero-shot {
  position: relative;
  margin: 0 auto; max-width: 880px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 90px -20px rgba(21,20,15,0.35), 0 1px 0 rgba(255,255,255,0.4) inset;
  border: 1px solid rgba(21,20,15,0.07);
}
.hero-shot img { width: 100%; }

/* ============== MARQUEE ============== */
.marquee {
  margin-top: 86px;
  padding: 18px 0;
  background: var(--ink);
  overflow: hidden;
  white-space: nowrap;
  transform: rotate(-1.1deg) scale(1.02);
}
.marquee-track {
  display: inline-flex; gap: 22px; align-items: center;
  animation: marquee 28s linear infinite;
  font-size: 14px; font-weight: 700; letter-spacing: 0.06em;
  color: rgba(243,241,234,0.85);
}
.marquee-track span:nth-child(2n) { color: var(--cobalt); opacity: 0.9; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============== FEATURES ============== */
.feature {
  max-width: var(--maxw); margin: 0 auto;
  padding: 140px 28px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
.feature-rev { direction: rtl; }
.feature-rev > * { direction: ltr; }

.feature-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tag, var(--cobalt));
  margin-bottom: 18px;
}
.feature-tag::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tag, var(--cobalt));
}
.feature h2 {
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.08; font-weight: 700; letter-spacing: -0.015em;
  margin: 0 0 20px;
}
.feature p {
  font-size: 17px; line-height: 1.65; color: var(--ink-soft);
  max-width: 460px; margin: 0 0 24px;
}
.feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.feature-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
.dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }

.feature-shot {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 70px -16px rgba(21,20,15,0.3);
  border: 1px solid rgba(21,20,15,0.07);
}
.feature-shot img { width: 100%; }
.tilt-right { transform: rotate(1.4deg); }
.tilt-left { transform: rotate(-1.4deg); }
.feature-shot:hover { transform: rotate(0deg) scale(1.015); transition: transform 0.5s cubic-bezier(.16,1,.3,1); }

/* Soft color-matched glow behind each feature screenshot, tying the shot back to its
   .feature-tag accent color without introducing any new palette values. */
.feature-shot { position: relative; }
.feature-shot::before {
  content: '';
  position: absolute; inset: -14% -10%;
  background: radial-gradient(ellipse 60% 60% at 50% 45%, var(--tag, var(--cobalt)), transparent 70%);
  opacity: 0.16;
  filter: blur(50px);
  z-index: -1;
}

@media (max-width: 880px) {
  .feature, .feature-rev { grid-template-columns: 1fr; direction: ltr; gap: 40px; padding: 80px 24px; }
}

/* ============== AI SECTION ============== */
.ai-section {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: 140px 28px;
  overflow: hidden;
  margin-top: 40px;
}
.ai-bg-glow {
  position: absolute; top: -200px; right: -200px; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(124,58,237,0.35), transparent 65%);
  filter: blur(40px);
}
.ai-inner {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: center;
}
.ai-title { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.06; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 22px; }
.ai-text p { font-size: 17px; line-height: 1.65; color: rgba(243,241,234,0.68); max-width: 480px; margin-bottom: 36px; }
.ai-points { display: flex; flex-direction: column; gap: 22px; }
.ai-point { display: flex; gap: 16px; align-items: flex-start; }
.ai-point-num { font-family: 'Caveat', cursive; font-size: 30px; color: var(--cobalt); line-height: 1; flex-shrink: 0; width: 38px; }
.ai-point p { font-size: 15px; color: rgba(243,241,234,0.75); margin: 0; line-height: 1.5; }

.ai-shot {
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.08);
}
.ai-shot img { width: 100%; }

@media (max-width: 880px) {
  .ai-inner { grid-template-columns: 1fr; }
}

/* ============== CLOSING ============== */
.closing {
  text-align: center;
  padding: 160px 28px;
  max-width: 720px; margin: 0 auto;
}
.closing-title {
  font-size: clamp(36px, 6vw, 60px);
  line-height: 1.06; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 40px;
}
.closing-note { margin-top: 18px; font-size: 14px; color: var(--ink-faint); }

/* ============== PRIVACY ============== */
.privacy { background: var(--card); padding: 130px 28px; border-top: 1px solid var(--paper-line); }
.privacy-inner { max-width: var(--maxw); margin: 0 auto; }
.privacy h2 { font-size: clamp(30px, 4vw, 42px); font-weight: 700; letter-spacing: -0.015em; margin: 0 0 6px; line-height: 1.1; }
.privacy-updated { color: var(--ink-faint); font-size: 13.5px; margin-bottom: 54px; }
.privacy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.privacy-card {
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform 0.3s cubic-bezier(.16,1,.3,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.privacy-card:hover {
  transform: translateY(-3px);
  border-color: rgba(21,20,15,0.16);
  box-shadow: 0 14px 30px -12px rgba(21,20,15,0.14);
}
.privacy-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.privacy-card p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.privacy-card a { color: var(--cobalt); font-weight: 600; }
@media (max-width: 880px) { .privacy-grid { grid-template-columns: 1fr; } }

/* ============== PHONE ============== */
@media (max-width: 700px) {
  /* This side gutter is the actual fix for "the pill stretches edge to edge" — see the .nav
     comment above. 16px keeps it adaptive to whatever the device width is, instead of one fixed
     length, and matches the page's own side padding so the pill lines up with the content below. */
  .nav { padding: 12px 16px; }
  .nav-inner { padding: 0 14px; height: 50px; }
  .nav-brand { font-size: 15px; gap: 7px; }
  .nav-icon { width: 22px; height: 22px; }
  .nav-controls { gap: 8px; }
  .lang-switch { padding: 6px 9px; font-size: 11px; }
  .nav-cta { padding: 8px 13px; font-size: 13px; }
  .nav-redeem { display: none; }

  /* Section links move off the inline pill and into a dropdown panel that hangs just below it,
     toggled by the hamburger — same content as desktop, just tucked away until asked for instead
     of being permanently removed. */
  .hamburger { display: flex; }
  .nav-section-links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: rgba(243,241,234,0.96);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(21,20,15,0.08);
    border-radius: 18px;
    padding: 10px;
    opacity: 0; transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .nav-section-links a {
    padding: 11px 12px; border-radius: 11px; font-weight: 600;
  }
  .nav-section-links a:active { background: rgba(21,20,15,0.06); }
  .nav.menu-open .nav-section-links {
    opacity: 1; transform: translateY(0); pointer-events: auto;
  }
  .nav-redeem-mobile { display: block; }

  .hero { padding: 100px 18px 0; }
  .hero-kicker { font-size: 11.5px; margin-bottom: 14px; }
  .hero-sub { font-size: 16px; padding: 0 4px; }
  .hero-actions { margin-bottom: 56px; }
  .btn { padding: 13px 22px; font-size: 14.5px; }
  .hero-shot { border-radius: 18px; }

  .marquee { margin-top: 56px; padding: 13px 0; }
  .marquee-track { font-size: 12px; gap: 16px; }

  .feature, .feature-rev { padding: 56px 18px; gap: 28px; }
  .feature p { font-size: 15.5px; }
  .feature-shot.tilt-right, .feature-shot.tilt-left { transform: rotate(0deg); }
  .feature-shot:hover { transform: none; }

  .ai-section { padding: 80px 18px; }
  .ai-text p { font-size: 15.5px; }
  .ai-points { gap: 18px; }

  .closing { padding: 90px 18px; }
  .closing-note { padding: 0 8px; }

  .privacy { padding: 80px 18px; }
  .privacy-updated { margin-bottom: 36px; }
  .privacy-card { padding: 22px; }

  .footer-inner { justify-content: center; text-align: center; }
}

@media (max-width: 380px) {
  .nav-brand span { display: none; }
  .hero-title { letter-spacing: -0.01em; }
}

/* ============== FOOTER ============== */
.footer { padding: 50px 28px; border-top: 1px solid var(--paper-line); }
.footer-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.footer-icon { width: 22px; height: 22px; border-radius: 6px; }
.footer-credit { font-size: 13.5px; color: var(--ink-faint); }
.footer-links { display: flex; gap: 22px; font-size: 14px; color: var(--ink-soft); }
.footer-links a:hover { color: var(--ink); }