/* ============================================================
   Aura Cycles — landing page styles (v3)
   ============================================================ */

/* ---------- landing hero ---------- */
.hero-split { display: flex; align-items: center; gap: 48px; max-width: 1160px; margin: 0 auto; padding: 80px 32px 60px; position: relative; z-index: 2; }
/* hero illustration — painterly figure, right side */
.hero-illustration {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 45%; max-width: 600px; height: 100%; min-height: 500px;
  background: url('/static/img/hero-illustration.png') no-repeat right center / contain;
  opacity: 0.55; pointer-events: none; z-index: 1;
}
@media (max-width: 768px) {
  .hero-illustration { display: none; }
}
.hero-text { flex: 1; }
.hero-kicker { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.hero-text h1 { font-family: var(--serif); font-size: clamp(36px, 7vw, 64px); font-weight: 400; color: var(--cream); line-height: 1.12; margin: 0 0 20px; }
.hero-text h1 em { font-style: italic; color: var(--accent); }
.hero-desc { color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 520px; margin-bottom: 28px; }
.hero-desc strong { color: var(--ink); }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-btns .cta { width: auto; padding: 14px 28px; }
.hero-oss { margin: 18px 0 0; font-size: 13px; color: var(--muted-2); }
.hero-oss a { color: var(--accent-3); }
.cta-outline { display: inline-block; padding: 13px 28px; border: 1.5px solid var(--line); border-radius: 14px; color: var(--muted); font-size: 15px; font-weight: 600; text-decoration: none; transition: all 0.15s; }
.cta-outline:hover { border-color: var(--accent); color: var(--ink); }

/* phone mockup */
.hero-phone { flex: 0 0 320px; }
.phone-frame { width: 260px; margin: 0 auto; background: #0a0e1c; border-radius: 32px; padding: 12px 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 2px rgba(197,111,79,0.25); position: relative; }
.phone-frame.small { width: 220px; padding: 8px 6px; border-radius: 24px; }
.phone-notch { width: 60px; height: 6px; background: #1a1f2e; border-radius: 999px; margin: 0 auto 10px; }
.phone-screen { border-radius: 20px; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #1a2240, #0a0e1c); padding: 12px 10px; min-height: 360px; display: flex; flex-direction: column; gap: 10px; }
.phone-frame.small .phone-screen { border-radius: 16px; padding: 10px 8px; min-height: 280px; }

/* Today view mock */
.app-mock { padding: 10px; gap: 8px; }
.mock-banner { background: var(--grad-banner); border-radius: 14px; padding: 14px 12px; color: var(--ink); }
.mock-emoji { font-size: 26px; display: block; margin-bottom: 4px; }
.mock-title { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.1; }
.mock-blurb { font-size: 10px; opacity: 0.94; margin-top: 4px; line-height: 1.4; }
.mock-affirm { margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: 11px; color: var(--peach); }
.mock-facts { display: flex; gap: 6px; }
.mock-fact { flex: 1; background: var(--card); border-radius: 8px; padding: 8px 4px; text-align: center; }
.mock-fact span { display: block; font-size: 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.mock-fact strong { font-size: 15px; font-weight: 700; color: var(--ink); }
.mock-rec { background: var(--card); border-radius: 10px; padding: 9px 10px; }
.mock-rec-head { font-family: var(--serif); font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.mock-rec-body { font-size: 9.5px; color: var(--muted); line-height: 1.4; }
.mock-tabbar { margin-top: auto; display: flex; justify-content: space-around; border-top: 1px solid var(--line); padding-top: 7px; font-size: 8px; color: var(--muted-2); }
.mock-tabbar span.on { color: var(--accent); }

/* Calendar view mock */
.cal-screen { padding: 10px; gap: 8px; }
.mock-cal-hero { text-align: center; }
.mock-cal-hero-icon { font-size: 22px; }
.mock-cal-hero-title { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--accent); }
.mock-cal-hero-desc { font-family: var(--serif); font-style: italic; font-size: 10px; color: var(--muted-2); }
.mock-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; font-size: 7.5px; color: var(--muted); line-height: 1.7; }
.mock-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; vertical-align: -1px; margin-right: 2px; }
.mock-sep { color: var(--muted-2); }
.mock-month-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; text-align: center; }
.mock-weekdays, .mock-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mock-weekdays span { font-size: 8px; color: var(--muted-2); text-align: center; }
.mock-day { aspect-ratio: 1/1.05; border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mock-day .md-num { font-size: 9px; font-weight: 700; color: var(--ink); text-shadow: 0 1px 3px rgba(0,0,0,0.5); line-height: 1; }
.mock-day .md-cd { font-size: 7px; color: var(--ink); opacity: 0.75; line-height: 1; }
.mock-day.blank { background: transparent; }
.mock-day.today { outline: 1.5px solid var(--cream); outline-offset: -1.5px; }
.mock-day.start { position: relative; }
.mock-day.start::after { content: ""; position: absolute; bottom: 2px; width: 3px; height: 3px; border-radius: 50%; background: var(--cream); }

/* ---------- features section ---------- */
.features { max-width: 1100px; margin: 0 auto; padding: 80px 32px 60px; }
.section-title { font-family: var(--serif); font-size: clamp(28px, 5vw, 42px); font-weight: 400; color: var(--cream); text-align: center; margin: 0 0 48px; }
.section-title em { font-style: italic; color: var(--accent); }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.feat { text-align: center; padding: 24px 16px; }
.feat-icon { font-size: 36px; margin-bottom: 14px; }
.feat h3 { font-family: var(--sans); font-size: 12px; letter-spacing: 2px; color: var(--accent); margin: 0 0 10px; }
.feat p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }
.feat p em { color: var(--cream); font-style: italic; }
.stretch-list { list-style: none; margin: 6px 0 0; padding: 0; text-align: left; }
.stretch-list li { font-size: 14px; color: var(--muted); line-height: 1.7; }
.stretch-list li strong { color: var(--cream); font-family: var(--sans); letter-spacing: 0.5px; }
.stretch-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.stretch-table th, .stretch-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid rgba(233, 212, 189, 0.12); color: var(--muted); }
.stretch-table th { font-family: var(--sans); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid rgba(233, 212, 189, 0.22); }
.stretch-table td:first-child { color: var(--cream); font-weight: 600; }

/* ---------- showcase / manifesto ---------- */
.showcase { max-width: 1160px; margin: 0 auto; padding: 60px 32px 80px; }
.showcase-split { display: flex; gap: 60px; align-items: flex-start; }
.showcase-left { flex: 1; }
blockquote { font-family: var(--serif); font-size: clamp(24px, 4vw, 36px); font-weight: 400; color: var(--cream); font-style: italic; margin: 0 0 36px; position: relative; }
blockquote::before { content: ""; color: var(--accent); font-size: 80px; line-height: 0; position: absolute; top: 0; left: -8px; }
.showcase-phone { margin-bottom: 24px; }

.showcase-right { flex: 1; }
.showcase-header { font-size: 10px; letter-spacing: 3px; color: var(--accent); margin-bottom: 12px; }
.showcase-right h2 { font-family: var(--serif); font-size: clamp(24px, 4vw, 34px); font-weight: 400; color: var(--cream); line-height: 1.2; margin: 0 0 16px; }
.showcase-right h2 em { font-style: italic; color: var(--accent); }
.showcase-right p { font-size: 15px; color: var(--muted); line-height: 1.7; margin-bottom: 28px; }

.store-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.store-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1.5px solid var(--line); border-radius: 12px; color: var(--cream); text-decoration: none; font-size: 14px; font-weight: 600; transition: all 0.15s; }
.store-btn:hover { border-color: var(--accent); background: rgba(197,111,79,0.08); }
button.store-btn { background: transparent; cursor: pointer; font-family: inherit; }
.install-hint { font-size: 12px; color: var(--muted-2); line-height: 1.5; margin: -16px 0 28px; }
.sb-icon { font-size: 22px; }
.sb-text small { display: block; font-size: 9px; color: var(--muted); font-weight: 400; line-height: 1.3; }

.privacy-box { display: flex; gap: 14px; align-items: flex-start; background: rgba(11,23,36,0.5); border: 1px solid rgba(197,111,79,0.12); border-radius: 14px; padding: 16px; }
.pb-icon { font-size: 28px; flex-shrink: 0; }
.pb-text { font-size: 13px; color: var(--muted); line-height: 1.6; }
.pb-text strong { color: var(--ink); }

/* ---------- footer ---------- */
.foot { text-align: center; padding: 60px 24px 40px; position: relative; z-index: 1; }
.foot-brand { font-family: var(--serif); font-size: 26px; letter-spacing: 4px; color: var(--accent); margin-bottom: 16px; text-transform: uppercase; }
.motto { font-family: var(--serif); font-size: clamp(18px, 3vw, 24px); font-style: italic; color: var(--cream); margin-bottom: 20px; }
.motto em { color: var(--accent); }
.foot-links { display: flex; justify-content: center; gap: 24px; margin-bottom: 20px; color: var(--muted); font-size: 13px; }
.gh-link { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-2); font-size: 13px; text-decoration: none; transition: color 0.15s; }
.gh-link svg { display: block; }
.gh-link:hover { color: var(--accent); }
.coming-soon { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 24px; }
.cs-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 1.5px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 14px; font-weight: 600; background: rgba(11,23,36,0.4); }
.cs-badge strong { color: var(--cream); font-weight: 600; }
.cs-apple { display: inline-block; width: 16px; height: 16px; background: var(--cream); -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>') no-repeat center / contain; }
.cs-note { font-size: 12px; color: var(--muted-2); }

/* ---------- responsive ---------- */
@media (max-width: 768px) {
  .hero-split { flex-direction: column; text-align: center; padding: 48px 20px 40px; }
  .hero-text { text-align: center; }
  .hero-desc { max-width: 100%; }
  .hero-btns { justify-content: center; }
  .hero-phone { flex: 0 0 auto; margin-top: 24px; }
  .showcase-split { flex-direction: column; gap: 32px; }
  .showcase-left { text-align: center; }
  .showcase-phone { display: flex; justify-content: center; }
  .showcase-right { text-align: center; }
  .store-btns { justify-content: center; }
  .privacy-box { text-align: left; }
}