/* Telomer — landing page styles
 * Mirrors the app's design tokens (tokens.css) so the marketing site
 * feels like the same product. Single file, no build step. */

:root {
  /* Palette (max 5 + 1 secondary, per UI-Pro-Max rule) */
  --bg:        #F5F5DC;
  --bg-soft:   #FBFAEC;
  --surface:   #FFFFFF;
  --border:    rgba(127,159,106,0.18);
  --text:      #1A1A1A;
  --muted:     #6E6E76;
  --accent:    #f19863;
  --accent-2:  #e08a55;
  --pri:       #5a7a5a;   /* secondary — used sparingly for science accents */

  /* Type scale (geometric ~1.3) */
  --t-xs: 11px;
  --t-sm: 13px;
  --t-md: 15px;
  --t-lg: 19px;
  --t-2xl: 28px;
  --t-4xl: 48px;
  --t-5xl: 64px;

  /* Spacing — 4 base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;
  --s-24: 96px; --s-32: 128px;

  /* Radii */
  --r-card: 24px;
  --r-btn:  16px;
  --r-chip: 10px;

  /* Motion */
  --e-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 150ms;
  --d-base: 250ms;

  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ─── Layout helpers ─── */
.section-head { max-width: 720px; margin: 0 auto var(--s-12); text-align: center; }
.section-head h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: var(--s-3) 0 0;
}
.eyebrow {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pri);
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-chip);
  background: var(--surface);
}

/* ─── Header ─── */
.hdr {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-6);
  background: rgba(245,245,220,0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.01em;
}
.brand img { border-radius: 8px; }
.nav { display: flex; gap: var(--s-6); font-size: var(--t-md); color: var(--muted); }
.nav a { transition: color var(--d-fast); }
.nav a:hover { color: var(--text); }
.hdr-right { display: flex; align-items: center; gap: var(--s-3); }

.lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-chip);
  padding: 6px 10px; font: 600 var(--t-sm)/1 var(--font);
  cursor: pointer; color: var(--muted);
  transition: border-color var(--d-fast), background var(--d-fast);
}
.lang-toggle:hover { border-color: rgba(127,159,106,0.35); }
.lang-opt { padding: 0 2px; cursor: pointer; transition: color var(--d-fast); }
.lang-opt.active { color: var(--text); }
.lang-sep { color: var(--border); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 18px;
  border-radius: var(--r-btn); font-weight: 600; font-size: var(--t-md);
  background: var(--text); color: var(--bg);
  border: 1px solid var(--text);
  transition: transform var(--d-fast) var(--e-out),
              background var(--d-fast),
              box-shadow var(--d-base);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(26,26,26,0.18); }
.btn-mini { height: 36px; padding: 0 14px; font-size: var(--t-sm); border-radius: 12px; }

/* ─── App Store badge ─── */
.appstore-badge {
  display: inline-block;
  border-radius: 12px;
  transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-base);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.08);
}
.appstore-badge:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 12px 28px rgba(0,0,0,.12); }
.appstore-badge svg { display: block; border-radius: inherit; }
.appstore-lg { transform-origin: center; }

/* ─── Hero ─── */
.hero {
  padding: var(--s-16) var(--s-6) var(--s-24);
  max-width: 1200px; margin: 0 auto;
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  align-items: center; gap: var(--s-16);
}
.hero-text h1 {
  font-size: clamp(36px, 5.6vw, 64px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: var(--s-4) 0 var(--s-6);
}
.lead {
  font-size: var(--t-lg);
  color: var(--muted);
  line-height: 1.5;
  max-width: 540px;
  margin: 0 0 var(--s-8);
}
.hero-cta { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
.hero-meta { display: flex; flex-direction: column; font-size: var(--t-sm); color: var(--muted); line-height: 1.4; }
.meta-rating { color: var(--accent); font-size: var(--t-md); letter-spacing: 1px; }

.hero-mock { position: relative; display: flex; justify-content: center; align-items: center; }
.hero-blob {
  position: absolute; inset: -40px; z-index: 0;
  background: radial-gradient(circle at 50% 50%, rgba(241,152,99,0.28), transparent 60%);
  filter: blur(40px);
}

/* ─── Phone mock-up frame ─── */
.phone {
  position: relative; z-index: 1;
  width: 320px; aspect-ratio: 9 / 19.5;
  background: #1f1f23;
  border-radius: 44px;
  padding: 8px;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.08),
    0 1px 2px rgba(0,0,0,.06),
    0 30px 60px rgba(0,0,0,.18);
}
.phone-screen {
  width: 100%; height: 100%; border-radius: 36px; overflow: hidden;
  background: var(--bg); position: relative;
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }
.phone-notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 28px; background: #1f1f23; border-radius: 20px; z-index: 2;
}
.phone-sm { width: 220px; }
.phone-sm .phone-notch { width: 70px; height: 22px; top: 12px; }
.phone-sm .phone-screen { border-radius: 30px; }

/* ─── Features grid ─── */
.features { padding: var(--s-16) var(--s-6); max-width: 1200px; margin: 0 auto; }
.grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-8);
  transition: border-color var(--d-base), transform var(--d-base) var(--e-out);
}
.card:hover { border-color: rgba(127,159,106,0.35); transform: translateY(-2px); }
.card h3 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em; margin: var(--s-4) 0 var(--s-2); }
.card p { font-size: var(--t-md); color: var(--muted); margin: 0; line-height: 1.55; }

.icon-box {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(241,152,99,0.18), rgba(90,122,90,0.10));
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.icon-box::after {
  content: ''; width: 24px; height: 24px;
  background: var(--accent);
  -webkit-mask: var(--svg) center/contain no-repeat;
          mask: var(--svg) center/contain no-repeat;
}
.icon-camera { --svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3Z'/><circle cx='12' cy='13' r='4'/></svg>"); }
.icon-chart { --svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><path d='M7 14l4-4 4 4 5-5'/></svg>"); }
.icon-target { --svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='12' r='6'/><circle cx='12' cy='12' r='2'/></svg>"); }
.icon-flame { --svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 14.5A2.5 2.5 0 0 0 11 17c2 0 3-1 3-3 0-1.5-1.5-2-1.5-3.5 0-1 .5-2 .5-3 0-1.5-1-2.5-2-3.5C10 3 9 4 9 5c0 2 1 3 1 5s-1.5 2-1.5 4.5Z'/></svg>"); }
.icon-history { --svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 3-6.7'/><path d='M3 4v5h5'/><path d='M12 7v5l3 2'/></svg>"); }
.icon-spark { --svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1'/></svg>"); }

/* ─── How it works ─── */
.how { padding: var(--s-16) var(--s-6); max-width: 1100px; margin: 0 auto; }
.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6);
  counter-reset: step;
}
.steps li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-8);
  position: relative;
}
.step-num {
  display: inline-block;
  font: 600 var(--t-lg)/1 var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  letter-spacing: 0;
  margin-bottom: var(--s-4);
}
.steps h3 { font-size: var(--t-lg); font-weight: 600; margin: 0 0 var(--s-2); letter-spacing: -0.01em; }
.steps p { color: var(--muted); margin: 0; line-height: 1.55; }

/* ─── Screens carousel ─── */
.screens { padding: var(--s-16) var(--s-6); max-width: 1200px; margin: 0 auto; overflow: hidden; }
.screens-row {
  display: flex; gap: var(--s-6); justify-content: center;
  overflow-x: auto; padding: var(--s-4) var(--s-2) var(--s-8);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.screens-row::-webkit-scrollbar { display: none; }
.screens-row .phone { scroll-snap-align: center; flex: 0 0 auto; }

/* ─── CTA ─── */
.cta {
  padding: var(--s-24) var(--s-6);
  text-align: center;
}
.cta-inner {
  max-width: 720px; margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 32px;
  padding: var(--s-16) var(--s-8);
}
.cta-inner h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600; letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
}
.cta-sub { color: var(--muted); font-size: var(--t-lg); margin: 0 0 var(--s-8); }

/* ─── Footer ─── */
.ft { border-top: 1px solid var(--border); padding: var(--s-12) var(--s-6); }
.ft-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-6);
  flex-wrap: wrap;
}
.ft-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.ft-brand img { border-radius: 6px; }
.ft-meta { display: flex; gap: var(--s-6); color: var(--muted); font-size: var(--t-sm); flex-wrap: wrap; }
.ft-meta a { transition: color var(--d-fast); }
.ft-meta a:hover { color: var(--text); }

/* ─── Animations ─── */
/* Reveal: subtle translate-only. No opacity:0 to avoid "blank section" if
 * IntersectionObserver or JS fails / is delayed. Content stays readable. */
.reveal { transform: translateY(8px); transition: transform 600ms var(--e-out); will-change: transform; }
.reveal.in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .nav { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-12); }
  .hero-mock { order: -1; }
  .phone { width: 260px; }
  .grid-6 { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .hero { padding: var(--s-12) var(--s-4) var(--s-16); }
  .features, .how, .screens { padding-left: var(--s-4); padding-right: var(--s-4); }
}
@media (max-width: 540px) {
  .grid-6 { grid-template-columns: 1fr; }
  .hdr { padding: var(--s-3) var(--s-4); }
  .brand span { display: none; }
  .hero-text h1 { font-size: 36px; }
  .lead { font-size: var(--t-md); }
  .phone-sm { width: 180px; }
}