/* ==========================================================================
   EchoDraw — Companion Site
   Theme: matched to the app icon — deep navy + camera-viewfinder blue
   ========================================================================== */

:root{
  --bg: #0f1b2c;
  --bg-alt: #14263c;
  --surface: #1a2c46;
  --surface-2: #203353;
  --border: #2c4467;
  --text: #f2f6fc;
  --text-muted: #aebfdb;
  --text-faint: #7e91b3;
  --accent: #4a76ac;
  --accent-2: #7ba4d9;
  --accent-soft: rgba(74,118,172,0.18);
  --teal: #7fd4de;
  --danger: #ff6b6b;
  --on-accent: #0d1826;
  --radius: 16px;
  --radius-sm: 10px;
  --max: 1120px;
  --shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
  font-size: 16px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(74,118,172,0.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(127,212,222,0.07), transparent 60%);
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:'Fraunces','Georgia',serif; font-weight:600; line-height:1.15; margin:0 0 .5em; letter-spacing:-0.01em; }
p{ margin:0 0 1em; color: var(--text-muted); }
ul{ margin:0; padding:0; }
.script{ font-family:'Caveat', cursive; }

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 24px; position:relative; z-index:1; }
.section{ padding: 88px 0; position:relative; z-index:1; }
.section-tight{ padding: 56px 0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 0.8rem; text-transform:uppercase; letter-spacing:0.14em;
  color: var(--accent-2); font-weight:600; margin-bottom: 14px;
}
.eyebrow::before{ content:""; width:18px; height:2px; background: var(--accent); display:inline-block; border-radius:2px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 14px 26px; border-radius: 999px; font-weight:600; font-size:0.98rem;
  border: 1px solid transparent; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn-primary{ background: linear-gradient(180deg, var(--accent-2), var(--accent)); color:var(--on-accent); box-shadow: 0 10px 30px -8px rgba(74,118,172,0.55); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(74,118,172,0.65); }
.btn-ghost{ background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent-2); }
.btn-sm{ padding: 10px 18px; font-size:0.88rem; }
.btn-block{ width:100%; }

/* ---------- Nav ---------- */
.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(15,27,44,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 16px 24px; max-width: var(--max); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:700; font-size:1.25rem; color:var(--text); }
.brand-mark{
  width:34px; height:34px; border-radius:9px;
  background: linear-gradient(145deg, var(--accent-2), var(--accent));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 16px -4px rgba(74,118,172,0.6);
  position: relative;
  overflow: hidden;
}
.brand-mark::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.55), transparent 55%);
}
.brand-mark svg{ position:relative; z-index:1; }
.brand small{ display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--text-faint); margin-top:-2px; }

.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ color: var(--text-muted); font-size:0.93rem; font-weight:500; transition: color .15s ease; }
.nav-links a:hover, .nav-links a.active{ color: var(--accent-2); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:1px solid var(--border); color:var(--text); width:40px; height:40px; border-radius:10px; align-items:center; justify-content:center; }

@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-cta .btn-ghost{ display:none; }
}

/* ---------- Hero ---------- */
.hero{ padding: 72px 0 40px; position:relative; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items:center; }
.hero h1{ font-size: clamp(2.3rem, 4.6vw, 3.6rem); margin-bottom:20px; }
.hero h1 em{ font-style:normal; color: var(--accent-2); }
.hero-sub{ font-size:1.12rem; max-width: 520px; }
.hero-actions{ display:flex; align-items:center; gap:16px; margin-top: 30px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:24px; margin-top: 34px; flex-wrap:wrap; }
.hero-meta div{ font-size:0.85rem; color: var(--text-faint); }
.hero-meta strong{ display:block; font-family:'Fraunces',serif; font-size:1.5rem; color: var(--text); font-weight:600; }

@media (max-width: 860px){ .hero-grid{ grid-template-columns: 1fr; } }

/* Phone mockup */
.phone-mock{ position:relative; margin:0 auto; width: min(320px, 80vw); }
.phone-frame{
  border-radius: 42px; background: linear-gradient(155deg, #23385a, #0c1524);
  border: 1px solid #2c4467; padding: 14px; box-shadow: var(--shadow);
  position:relative;
}
.phone-screen{
  border-radius: 30px; overflow:hidden; aspect-ratio: 9/19.5;
  background: linear-gradient(200deg,#23385a,#0c1524 60%);
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
}
.phone-screenshot{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top;
}
.phone-notch{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:90px; height:22px; background:#0c1524; border-radius:14px; z-index:2; }
.phone-slider{
  position:absolute; bottom: 22px; left:50%; transform:translateX(-50%);
  width: 78%; background: rgba(15,27,44,0.65); backdrop-filter: blur(6px);
  border:1px solid rgba(123,164,217,0.35); border-radius:999px; padding:8px 14px;
  display:flex; align-items:center; gap:10px; font-size:0.72rem; color:var(--accent-2);
}
.phone-slider .track{ flex:1; height:4px; border-radius:4px; background: rgba(255,255,255,0.15); position:relative; }
.phone-slider .track::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:62%; background: linear-gradient(90deg,var(--accent-2),var(--accent)); border-radius:4px; }
.float-badge{
  position:absolute; background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px; box-shadow: var(--shadow);
  font-size:0.78rem; display:flex; align-items:center; gap:8px; color: var(--text);
}
.float-badge.b1{ top: 8%; left: -14%; }
.float-badge.b2{ bottom: 12%; right: -12%; }
.float-badge .dot{ width:8px; height:8px; border-radius:50%; background: var(--teal); }

/* ---------- Cards / features ---------- */
.grid{ display:grid; gap: 22px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-3, .grid-4, .grid-2{ grid-template-columns: 1fr; } }

.card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 28px; transition: border-color .15s ease, transform .15s ease;
}
.card:hover{ border-color: rgba(74,118,172,0.5); transform: translateY(-3px); }
.card .icon{
  width:44px; height:44px; border-radius:12px; background: var(--accent-soft);
  display:flex; align-items:center; justify-content:center; color: var(--accent-2); margin-bottom:16px;
}
.card h3{ font-size:1.08rem; margin-bottom:8px; }
.card p{ margin:0; font-size:0.94rem; }

.section-head{ max-width: 640px; margin: 0 auto 48px; text-align:center; }
.section-head p{ font-size:1.05rem; }
.section-head.left{ margin: 0 0 44px; text-align:left; }

/* ---------- Steps ---------- */
.steps{ counter-reset: step; display:grid; gap: 18px; }
.step{
  display:grid; grid-template-columns: 56px 1fr; gap:20px; align-items:flex-start;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 24px;
}
.step-num{
  width:44px; height:44px; border-radius:50%; background: linear-gradient(180deg,var(--accent-2),var(--accent));
  color:var(--on-accent); font-weight:700; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif;
}
.step h3{ font-size:1.05rem; margin-bottom:6px; }
.step p{ margin:0; font-size:0.95rem; }

/* ---------- Testimonial ---------- */
.quote-card{
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius: var(--radius); padding: 40px;
  position:relative;
}
.quote-card::before{ content:"\201C"; font-family:'Fraunces',serif; font-size:5rem; color: var(--accent); opacity:0.35; position:absolute; top:8px; left:24px; line-height:1; }
.quote-card p{ font-size:1.2rem; color: var(--text); font-style:italic; margin: 18px 0 18px 12px; }
.quote-by{ display:flex; align-items:center; gap:12px; margin-left:12px; }
.quote-by .avatar{ width:38px; height:38px; border-radius:50%; background: var(--accent-soft); display:flex; align-items:center; justify-content:center; color:var(--accent-2); font-weight:700; }
.stars{ color: var(--accent-2); letter-spacing:2px; }

/* ---------- App store badge ---------- */
.store-badge{
  display:inline-flex; align-items:center; gap:10px; background:#000; color:#fff;
  border:1px solid #2c2c2c; border-radius: 12px; padding: 10px 18px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.store-badge:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(0,0,0,0.5); }
.store-badge .txt small{ display:block; font-size:0.62rem; letter-spacing:0.03em; }
.store-badge .txt strong{ display:block; font-size:1.15rem; font-family:'Fraunces',serif; line-height:1.1; }

/* ---------- CTA band ---------- */
.cta-band{
  background: linear-gradient(135deg, #1a2c46, #14263c 60%);
  border:1px solid var(--border); border-radius: 24px; padding: 56px; text-align:center;
  position:relative; overflow:hidden;
}
.cta-band::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% 0%, rgba(74,118,172,0.24), transparent 55%); }
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ font-size: clamp(1.7rem,3vw,2.3rem); }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--border); padding: 56px 0 32px; background: var(--bg-alt); position:relative; z-index:1; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; }
.footer-grid h4{ font-size:0.8rem; text-transform:uppercase; letter-spacing:0.1em; color: var(--text-faint); margin-bottom:16px; font-family:'Inter',sans-serif; }
.footer-grid ul li{ list-style:none; margin-bottom:10px; }
.footer-grid ul li a{ color: var(--text-muted); font-size:0.92rem; }
.footer-grid ul li a:hover{ color: var(--accent-2); }
.footer-bottom{ margin-top: 48px; padding-top:24px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:0.85rem; color: var(--text-faint); }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ padding: 64px 0 20px; text-align:center; }
.page-hero .eyebrow{ justify-content:center; }
.page-hero h1{ font-size: clamp(2rem, 4vw, 2.8rem); }
.page-hero p{ max-width: 620px; margin: 0 auto; font-size:1.05rem; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom: 1px solid var(--border); padding: 22px 0; }
.faq-item summary{ cursor:pointer; font-weight:600; font-size:1.02rem; color: var(--text); display:flex; justify-content:space-between; align-items:center; list-style:none; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.4rem; color: var(--accent-2); font-weight:400; margin-left: 12px; }
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item p{ margin-top:12px; font-size:0.95rem; }

/* ---------- Idea Generator ---------- */
.generator{
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius: 24px; padding: 40px;
}
.generator-output{
  background: var(--bg); border:1px dashed rgba(123,164,217,0.45); border-radius: var(--radius);
  padding: 34px; text-align:center; min-height: 130px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.generator-output .prompt-text{ font-family:'Fraunces',serif; font-size:1.5rem; color:var(--text); }
.generator-output .prompt-tags{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:6px; }
.tag{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; padding:5px 10px; border-radius:999px; background: var(--accent-soft); color: var(--accent-2); border:1px solid rgba(74,118,172,0.4); }
.generator-controls{ display:flex; gap:14px; justify-content:center; margin-top:26px; flex-wrap:wrap; }
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom: 26px; }
.filter-chip{
  border:1px solid var(--border); background: var(--surface); color: var(--text-muted);
  padding: 8px 16px; border-radius:999px; font-size:0.85rem; cursor:pointer; transition: all .15s ease;
}
.filter-chip.active{ border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft); }
.saved-list{ margin-top: 40px; }
.saved-list ul{ display:grid; gap:10px; }
.saved-list li{
  list-style:none; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 18px; display:flex; justify-content:space-between; align-items:center; font-size:0.92rem;
}
.saved-list li button{ background:none; border:none; color: var(--text-faint); cursor:pointer; font-size:1.1rem; }
.saved-list li button:hover{ color: var(--danger); }

/* ---------- Blog ---------- */
.post-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.post-thumb{ height: 160px; background: linear-gradient(140deg, var(--accent-soft), transparent), linear-gradient(200deg,#1c2c46,#0f1b2c); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--border); }
.post-body{ padding: 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-meta{ font-size:0.78rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; }
.post-body h3{ font-size:1.15rem; margin:0; }
.post-body p{ font-size:0.92rem; margin:0; flex:1; }
.read-more{ font-size:0.88rem; color: var(--accent-2); font-weight:600; }

.article{ max-width: 720px; margin: 0 auto; }
.article h1{ font-size: clamp(2rem,4vw,2.6rem); }
.article .post-meta{ margin-bottom: 24px; }
.article p{ color: var(--text-muted); font-size:1.05rem; }
.article h2{ font-size:1.4rem; margin-top:2em; }
.article ul{ margin: 0 0 1.2em; padding-left: 1.3em; color: var(--text-muted); }
.article li{ margin-bottom:0.5em; }
.article blockquote{ border-left: 3px solid var(--accent); margin: 1.6em 0; padding: 4px 0 4px 20px; font-style:italic; color: var(--text); font-size:1.1rem; }

/* ---------- Utility ---------- */
.center{ text-align:center; }
.mt-0{ margin-top:0; }
.divider{ height:1px; background: var(--border); margin: 64px 0; }
.text-accent{ color: var(--accent-2); }
.badge-row{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }