/* ==========================================
   HomeVue — styles.css v3
   ========================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --pink:           #CC44CC;
  --pink-dark:      #A835A8;
  --purple:         #994CCC;
  --purple-dark:    #7B3DA6;
  --purple-light:   #B97DE0;
  --purple-pale:    #F3EAFA;
  --purple-ghost:   rgba(153,76,204,0.07);

  --warning:        #D4357A;
  --insight:        #7B3DA6;

  --grad-start:     #A845D9;
  --grad-mid:       #9433C9;
  --grad-end:       #AB29AB;

  /* Hero/footer gradient — bright magenta→purple matching App Store screenshots */
  --hero-bg-1:      #CC00CC;
  --hero-bg-2:      #9B0FCC;
  --hero-bg-3:      #7A0FCC;
  --hero-accent:    rgba(255,100,255,0.25);

  --ink:            #1C1426;
  --ink-mid:        #4A3D5C;
  --ink-light:      #7E7291;
  --ink-faint:      #B0A6BD;
  --white:          #FFFFFF;
  --off-white:      #FDFBFE;
  --cream:          #F9F6FC;
  --warm-gray:      #F0ECF4;

  --surface:        rgba(255,255,255,0.13);
  --surface-border: rgba(255,255,255,0.22);
  --pill-bg:        rgba(255,255,255,0.13);
  --pill-border:    rgba(255,255,255,0.2);
  --pill-bg-light:  rgba(153,76,204,0.07);
  --pill-border-light: rgba(153,76,204,0.18);

  --radius:    14px;
  --radius-lg: 22px;
  --pill-r:    20px;

  --shadow-soft:     0 2px 20px rgba(28,20,38,0.06);
  --shadow-card:     0 4px 32px rgba(153,76,204,0.10);
  --shadow-elevated: 0 12px 48px rgba(153,76,204,0.18);

  --font-body:    'DM Sans', -apple-system, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); color: var(--ink); background: var(--white); line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 740px; }

/* Typography */
h1,h2,h3,h4 { line-height: 1.15; }
h1 { font-family: var(--font-display); font-size: clamp(2.2rem,5vw,3.6rem); font-weight: 700; letter-spacing: -0.02em; }
h1 em { font-style: italic; color: rgba(255,255,255,0.9); }
h2 { font-family: var(--font-display); font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 700; letter-spacing: -0.01em; }
h2 em { font-style: italic; background: linear-gradient(90deg,var(--pink),var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; }
h4 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; }

.section-head { text-align: center; max-width: 620px; margin: 0 auto 3.5rem; }
.section-head p { color: var(--ink-mid); margin-top: 0.75rem; font-size: 1.05rem; }

/* Buttons */
.btn { display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:0.95rem;padding:12px 24px;border-radius:50px;border:none;cursor:pointer;transition:all 0.3s var(--ease);white-space:nowrap; }
.btn-lg { padding:16px 32px;font-size:1rem; }
.btn-primary { background:linear-gradient(135deg,var(--pink),var(--purple));color:var(--white);box-shadow:0 4px 20px rgba(204,68,204,0.35); }
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 8px 28px rgba(204,68,204,0.45); }
.btn-ghost { background:transparent;color:var(--ink);border:2px solid var(--warm-gray); }
.btn-ghost:hover { border-color:var(--purple);color:var(--purple); }
/* Ghost on dark bg */
.btn-ghost-dark { background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.9);border:2px solid rgba(255,255,255,0.2); }
.btn-ghost-dark:hover { background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.4); }
.btn-white { background:var(--white);color:var(--purple);font-weight:700; }
.btn-white:hover { background:var(--off-white);transform:translateY(-2px); }

.badge { display:inline-block;padding:5px 14px;border-radius:50px;background:var(--purple-pale);color:var(--purple);font-size:0.78rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase; }
.badge-dark { background:rgba(255,255,255,0.13);color:rgba(255,255,255,0.88); }

/* ── NAV ── */
.nav { position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,0.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--warm-gray);transition:all 0.3s var(--ease); }
.nav--scrolled { border-bottom-color:var(--warm-gray);background:rgba(255,255,255,0.98); }
.nav-inner { max-width:1160px;margin:0 auto;padding:0 24px;display:flex;align-items:center;height:64px;gap:32px; }
.nav-logo { display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem; }
.nav-logo-img { border-radius:8px; }
.nav-links { display:flex;gap:28px;margin-left:auto; }
.nav-links a { font-size:0.9rem;font-weight:500;color:var(--ink-mid);transition:color 0.2s; }
.nav-links a:hover { color:var(--purple); }
.nav-cta { display:inline-flex;align-items:center;gap:6px;margin-left:16px;padding:10px 20px;border-radius:50px;font-size:0.85rem;font-weight:600;background:linear-gradient(135deg,var(--pink),var(--purple));color:var(--white);transition:all 0.3s var(--ease);box-shadow:0 3px 14px rgba(204,68,204,0.3); }
.nav-cta:hover { transform:translateY(-1px);box-shadow:0 6px 20px rgba(204,68,204,0.4); }
.nav-toggle { display:none;background:none;border:none;cursor:pointer;width:28px;height:20px;position:relative; }
.nav-toggle span { display:block;position:absolute;left:0;width:100%;height:2px;background:var(--ink);border-radius:2px;transition:all 0.3s; }
.nav-toggle span:nth-child(1){top:0}.nav-toggle span:nth-child(2){top:9px}.nav-toggle span:nth-child(3){top:18px}
.nav-toggle.open span:nth-child(1){top:9px;transform:rotate(45deg)}.nav-toggle.open span:nth-child(2){opacity:0}.nav-toggle.open span:nth-child(3){top:9px;transform:rotate(-45deg)}
.nav-mobile { display:none;flex-direction:column;gap:8px;padding:16px 24px 24px;background:var(--white);border-bottom:1px solid var(--warm-gray); }
.nav-mobile a { padding:10px 0;font-weight:500;color:var(--ink-mid); }
.nav-mobile a:hover { color:var(--purple); }
.nav-mobile .btn { margin-top:8px;justify-content:center; }
.nav-mobile.open { display:flex; }
@media(max-width:768px){.nav-links,.nav-cta{display:none}.nav-toggle{display:block;margin-left:auto}}

/* ── HERO (dark gradient — matches App Store screenshots) ── */
.hero {
  position: relative;
  padding: 130px 0 100px;
  background: linear-gradient(135deg, #CC00CC 0%, #A00CCF 35%, #7A0FCC 70%, #5C0FA8 100%);
  overflow: hidden;
  color: white;
}
/* Ambient glows */
.hero::before {
  content: ''; position: absolute; top: -120px; right: -120px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,150,255,0.22) 0%, transparent 65%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; bottom: -80px; left: -80px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(160,60,220,0.2) 0%, transparent 65%);
  pointer-events: none;
}
.hero-inner { position:relative;z-index:1; }
.hero-eyebrow { display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:50px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);font-size:0.82rem;font-weight:600;color:rgba(255,255,255,0.85);margin-bottom:24px;backdrop-filter:blur(8px); }
.hero-eyebrow-dot { width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--purple-light));animation:pulse 2s ease infinite; }
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}

.hero-grid { display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center; }
.hero-text h1 { color:white;margin-bottom:18px; }
.hero-text > p { font-size:1.1rem;color:rgba(255,255,255,0.72);line-height:1.75;max-width:500px;margin-bottom:32px; }
.hero-actions { display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px; }
.hero-proof { display:flex;gap:20px;flex-wrap:wrap; }
.hero-proof span { font-size:0.84rem;font-weight:500;color:rgba(255,255,255,0.5); }
.hero-proof span::before { content:'✓ ';color:var(--purple-light); }

/* Home Pulse Widget */
.hero-pulse-wrap { display:flex;justify-content:center;align-items:center; }
.home-pulse-widget {
  width:100%;max-width:520px;
  background:linear-gradient(135deg,var(--grad-start),var(--grad-mid),var(--grad-end));
  border-radius:18px;border:1px solid rgba(255,255,255,0.35);
  box-shadow:0 16px 56px rgba(153,76,204,0.35),0 2px 8px rgba(0,0,0,0.2);
  padding:18px 20px 16px;color:white;overflow:hidden;position:relative;
}
.home-pulse-widget::before { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(to bottom,rgba(255,255,255,0.18),transparent);border-radius:18px 18px 0 0;pointer-events:none; }
.hpw-title-row { display:flex;align-items:center;gap:8px;margin-bottom:14px; }
.hpw-title { font-size:16px;font-weight:700; }
.hpw-badges { display:flex;gap:6px;margin-left:auto; }
.hpw-badge { display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:50px;background:rgba(255,255,255,0.88);font-size:12px;font-weight:600; }
.hpw-badge.warning { color:var(--warning); }
.hpw-badge.insight { color:var(--insight); }

/* Widget body: top row (score + info) then pillar row below */
.hpw-body { display:flex;flex-direction:column;gap:14px; }
.hpw-top-row { display:flex;align-items:center;gap:16px; }
.hpw-ring-wrap { position:relative;flex-shrink:0; }
.hpw-ring-svg { transform:rotate(-90deg); }
.hpw-ring-track { fill:none;stroke:rgba(255,255,255,0.15);stroke-width:4; }
.hpw-ring-progress { fill:none;stroke:white;stroke-width:4;stroke-linecap:round;stroke-dasharray:245;stroke-dashoffset:245;transition:stroke-dashoffset 1.2s cubic-bezier(0.22,1,0.36,1); }
.hpw-ring-score { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:22px;font-weight:700;color:white;line-height:1; }
.hpw-ring-label { font-size:10px;font-weight:600;color:rgba(255,255,255,0.65);text-align:center;margin-top:4px;line-height:1.3; }
.hpw-info { flex:1;min-width:0; }
.hpw-tier { font-size:20px;font-weight:700;margin-bottom:4px; }
.hpw-desc { font-size:12px;color:rgba(255,255,255,0.72);margin-bottom:10px; }
.hpw-trend { display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:50px;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.35);font-size:12px;font-weight:600;color:white; }

/* Pillar row — full width, 4 columns */
.hpw-pillars-row { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.15); }
.hpw-pillar { display:flex;flex-direction:column;align-items:center;gap:5px; }
.hpw-p-ring { position:relative;flex-shrink:0; }
.hpw-p-track { fill:none;stroke:rgba(255,255,255,0.15);stroke-width:3.5; }
.hpw-p-progress { fill:none;stroke:white;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:163;stroke-dashoffset:163;transition:stroke-dashoffset 1s cubic-bezier(0.22,1,0.36,1); }
.hpw-p-score { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:15px;font-weight:700;color:white;line-height:1; }
.hpw-p-label { font-size:11px;font-weight:500;color:rgba(255,255,255,0.72);text-align:center; }

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:40px}
  .hero-text>p{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-proof{justify-content:center}
  .hero-eyebrow{margin-left:auto;margin-right:auto;display:inline-flex}
}
@media(max-width:480px){
  .hpw-pillars-row{grid-template-columns:repeat(4,1fr);gap:4px}
  .hpw-p-label{font-size:9px}
}

/* ── PULSE SECTION ── */
.pulse-section { padding:96px 0;background:var(--white); }
.pulse-layout { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center; }
/* Pillar list — no card backgrounds */
.pillar-list { display:flex;flex-direction:column;gap:16px;margin-top:24px; }
.pillar-item { display:flex;align-items:flex-start;gap:14px; }
.pillar-item-icon { font-size:22px;flex-shrink:0;line-height:1;margin-top:1px; }
.pillar-item-text strong { display:block;font-size:0.95rem;color:var(--ink);margin-bottom:3px; }
.pillar-item-text p { font-size:0.86rem;color:var(--ink-mid);line-height:1.55;margin:0; }
.pulse-card { background:linear-gradient(135deg,var(--grad-start),var(--grad-mid),var(--grad-end));border-radius:18px;padding:18px 18px 14px;border:1px solid rgba(255,255,255,0.3);box-shadow:0 16px 56px rgba(153,76,204,0.28);position:relative;overflow:hidden; }
.pulse-card::before { content:'';position:absolute;top:0;left:0;right:0;height:45%;background:linear-gradient(to bottom,rgba(255,255,255,0.15),transparent);pointer-events:none; }
.pulse-card-title { display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:white;margin-bottom:12px; }
.pulse-chart-svg { width:100%;display:block; }
@media(max-width:860px){.pulse-layout{grid-template-columns:1fr}}

/* ── VUE SECTION ── */
.vue-section { padding:96px 0;background:var(--white); }
.vue-layout { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center; }
.vue-copy p { color:var(--ink-mid);font-size:1.05rem;line-height:1.75;margin-bottom:16px; }
.vue-demo { background:linear-gradient(160deg,#1E0830 0%,#2D0F4A 60%,#1A082E 100%);border-radius:20px;padding:20px;border:1px solid rgba(255,255,255,0.1);box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.vue-demo-title { display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:rgba(255,255,255,0.9);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.1); }
.vue-cards-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px; }
.vue-card { padding:12px;border-radius:14px;background:rgba(255,255,255,0.07);opacity:0;transform:scale(0.9) translateY(8px);transition:opacity 0.4s var(--ease),transform 0.4s var(--ease); }
.vue-card.visible { opacity:1;transform:scale(1) translateY(0); }
.vue-card.warning { border:1px solid rgba(212,53,122,0.35); }
.vue-card.insight { border:1px solid rgba(123,61,166,0.4); }
.vue-card-top { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px; }
.vue-card-icon { width:20px;height:20px;flex-shrink:0; }
.vue-card-icon.warning { color:var(--warning); }
.vue-card-icon.insight { color:#B07AE0; }
.vue-card-count { font-size:22px;font-weight:700; }
.vue-card-count.warning { color:var(--warning); }
.vue-card-count.insight { color:#B07AE0; }
.vue-card-label { font-size:13px;font-weight:600;color:rgba(255,255,255,0.9);margin-bottom:3px; }
.vue-card-hint { font-size:10px;color:rgba(255,255,255,0.45);line-height:1.4; }
.vue-insights-row { opacity:0;transform:translateY(8px);transition:opacity 0.4s var(--ease),transform 0.4s var(--ease); }
.vue-insights-row.visible { opacity:1;transform:translateY(0); }
.vue-insights-label { display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:rgba(255,255,255,0.55);margin-bottom:8px; }
.vue-insights-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.vue-insight-card { padding:10px 8px;border-radius:12px;background:rgba(255,255,255,0.07);border:1px solid rgba(123,61,166,0.35);opacity:0;transform:scale(0.9);transition:opacity 0.35s var(--ease),transform 0.35s var(--ease); }
.vue-insight-card.visible { opacity:1;transform:scale(1); }
.vue-insight-top { display:flex;justify-content:space-between;align-items:center;margin-bottom:4px; }
.vue-insight-icon { width:16px;height:16px;color:#B07AE0; }
.vue-insight-count { font-size:16px;font-weight:700;color:#B07AE0; }
.vue-insight-label { font-size:11px;font-weight:600;color:rgba(255,255,255,0.8);line-height:1.3; }
@media(max-width:860px){.vue-layout{grid-template-columns:1fr}}

/* ── ADD ITEMS ── */
.add-section { padding:96px 0;background:var(--cream); }
.add-layout { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center; }
.add-demo { background:linear-gradient(160deg,#1E0830 0%,#2D0F4A 60%,#1A082E 100%);border-radius:20px;padding:20px;border:1px solid rgba(255,255,255,0.1);box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.add-demo-title { font-size:13px;font-weight:600;color:rgba(255,255,255,0.7);margin-bottom:14px; }
.photo-scan-wrap { position:relative;width:200px;height:130px;border-radius:14px;overflow:hidden;margin:0 auto 14px;background:#1a1a2e;box-shadow:0 8px 24px rgba(204,68,204,0.25);border:2px solid transparent;background-clip:padding-box; outline: 2px solid transparent; position:relative; }
.photo-scan-wrap::before { content:'';position:absolute;inset:0;border-radius:12px;background:linear-gradient(135deg,rgba(204,68,204,0.4),rgba(153,76,204,0.4)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;pointer-events:none; }
.photo-scan-img { width:100%;height:100%;object-fit:cover;border-radius:12px;display:block; }
.photo-scan-placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:36px;opacity:0.3; }
.scan-line { position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(204,68,204,0.9),transparent);top:-4px;animation:none; }
.scan-line.scanning { animation:scanDown 1.2s ease-in-out forwards; }
@keyframes scanDown{0%{top:0;opacity:1}90%{top:128px;opacity:1}100%{top:128px;opacity:0}}
.scan-label { position:absolute;bottom:6px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:8px;background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);font-size:11px;font-weight:500;color:var(--pink);white-space:nowrap;opacity:0;transition:opacity 0.3s; }
.scan-label.visible { opacity:1; }
.scan-spinner { width:10px;height:10px;border-radius:50%;border:1.5px solid var(--pink);border-top-color:transparent;animation:spin 0.7s linear infinite; }
@keyframes spin{to{transform:rotate(360deg)}}
.pills-flow { display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;min-height:60px; }
.item-pill { display:inline-flex;align-items:center;padding:7px 12px;border-radius:var(--pill-r);background:var(--pill-bg);border:1px solid var(--pill-border);font-size:13px;font-weight:500;color:rgba(255,255,255,0.9);opacity:0;transform:scale(0.85) translateY(6px);transition:opacity 0.35s var(--ease),transform 0.35s var(--ease); }
.item-pill.visible { opacity:1;transform:scale(1) translateY(0); }
.score-bar-wrap { opacity:0;transform:translateY(8px);transition:opacity 0.4s var(--ease),transform 0.4s var(--ease); }
.score-bar-wrap.visible { opacity:1;transform:translateY(0); }
.score-bar-card { background:rgba(255,255,255,0.07);border:1px solid rgba(204,68,204,0.25);border-radius:12px;padding:12px 14px; }
.score-bar-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px; }
.score-bar-label { display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:rgba(255,255,255,0.65); }
.score-bar-value { font-size:14px;font-weight:700;color:var(--purple-light); }
.score-bar-track { position:relative;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--warning),var(--insight));margin-bottom:6px; }
.score-bar-dot { position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:var(--purple-light);box-shadow:0 0 8px rgba(153,76,204,0.5);left:0%;transition:left 1.2s cubic-bezier(0.22,1,0.36,1); }
.score-bar-axis { display:flex;justify-content:space-between;font-size:10px;font-weight:600; }
.score-bar-axis span:first-child { color:var(--warning); }
.score-bar-axis span:last-child { color:#B07AE0; }
.add-methods { display:flex;flex-direction:column;gap:14px;margin-top:24px; }
.add-method { display:flex;align-items:flex-start;gap:14px;padding:16px;border-radius:14px;background:var(--white);border:1px solid var(--warm-gray);box-shadow:var(--shadow-soft);transition:transform 0.2s,box-shadow 0.2s; }
.add-method:hover { transform:translateY(-2px);box-shadow:var(--shadow-card); }
.add-method-icon { width:42px;height:42px;border-radius:12px;flex-shrink:0;background:var(--purple-pale);display:flex;align-items:center;justify-content:center;font-size:20px; }
.add-method h4 { margin-bottom:2px;color:var(--ink); }
.add-method p { font-size:0.88rem;color:var(--ink-mid); }
@media(max-width:860px){.add-layout{grid-template-columns:1fr}}

/* ── AI SEARCH ── */
.search-section { padding:96px 0;background:var(--white); }
.search-layout { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center; }
.search-demo { background:linear-gradient(160deg,#1E0830 0%,#2D0F4A 60%,#1A082E 100%);border-radius:20px;padding:20px;border:1px solid rgba(255,255,255,0.1);box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.search-box { display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:rgba(255,255,255,0.08);border:1.5px solid rgba(204,68,204,0.4);margin-bottom:14px; }
.search-box-icon { color:var(--pink);font-size:16px;flex-shrink:0; }
.search-typed { font-size:14px;color:rgba(255,255,255,0.9);flex:1;min-height:18px; }
.search-cursor { width:2px;height:16px;background:var(--pink);animation:blink 1s ease infinite; }
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.search-results { display:flex;flex-wrap:wrap;gap:7px;min-height:140px;align-content:flex-start; }
.result-pill { display:inline-flex;align-items:center;gap:0;padding:7px 12px;border-radius:var(--pill-r);background:var(--pill-bg);border:1px solid var(--pill-border);font-size:13px;color:rgba(255,255,255,0.9);opacity:0;transform:translateY(8px);transition:opacity 0.35s var(--ease),transform 0.35s var(--ease); }
.result-pill.visible { opacity:1;transform:translateY(0); }
.result-pill-name { font-weight:500; }
.result-pill-loc { color:rgba(255,255,255,0.5);margin-left:3px;font-size:12px; }
.search-disclaimer { font-size:11px;color:rgba(255,255,255,0.3);margin-top:10px;opacity:0;transition:opacity 0.4s; }
.search-disclaimer.visible { opacity:1; }
@media(max-width:860px){.search-layout{grid-template-columns:1fr}}

/* ── SIRI ── */
.siri-section { padding:96px 0; }
.section-dark { background:linear-gradient(160deg,#2A0A3E 0%,#3D1260 50%,#2E0A3A 100%);color:white; }
.section-dark .section-head h2 { color:white; }
.section-dark .section-head h2 em { background:linear-gradient(90deg,#F080F0,#C080FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.section-dark .section-head p { color:rgba(255,255,255,0.65); }
.siri-layout { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center; }
.siri-demo { background:linear-gradient(160deg,#1E0830 0%,#2D0F4A 60%,#1A082E 100%);border-radius:20px;padding:24px 20px;border:1px solid rgba(255,255,255,0.1);box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.siri-orb-wrap { display:flex;justify-content:center;margin-bottom:20px; }
.siri-orb { width:72px;height:72px;border-radius:50%;position:relative;background:radial-gradient(circle at 40% 35%,#222,#0A0A16);opacity:0;transform:scale(0.6);transition:opacity 0.6s var(--ease),transform 0.6s var(--ease); }
.siri-orb.visible { opacity:1;transform:scale(1); }
.siri-orb-glow { position:absolute;inset:-12px;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(0,240,255,0.25),transparent,rgba(168,85,247,0.25),transparent,rgba(255,100,200,0.2),transparent);filter:blur(8px);animation:orbRotate 4s linear infinite; }
@keyframes orbRotate{to{transform:rotate(360deg)}}
.siri-orb-inner { position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle at 40% 30%,rgba(0,200,255,0.12),transparent 60%),radial-gradient(circle at 70% 70%,rgba(180,60,255,0.12),transparent 50%); }
.siri-row { margin-bottom:12px;opacity:0;transform:translateX(-16px);transition:opacity 0.45s var(--ease),transform 0.45s var(--ease); }
.siri-row.visible { opacity:1;transform:translateX(0); }
.siri-query { padding:10px 14px;border-radius:12px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);font-size:14px;color:rgba(255,255,255,0.9);margin-bottom:7px; }
.siri-response { display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;background:rgba(204,68,204,0.15);border:1px solid rgba(204,68,204,0.3);font-size:13px;font-weight:600;color:#E080E0; }
.siri-reasoning { display:flex;flex-direction:column;gap:5px;padding-left:8px;margin-top:7px; }
.siri-reason-step { display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,0.7);opacity:0;transform:translateX(8px);transition:opacity 0.3s var(--ease),transform 0.3s var(--ease); }
.siri-reason-step.visible { opacity:1;transform:translateX(0); }
.siri-reason-step.result { color:#E080E0;font-weight:600; }
.siri-reason-val { font-weight:600;color:rgba(255,255,255,0.9); }
.siri-reason-step.result .siri-reason-val { color:#E080E0; }
@media(max-width:860px){.siri-layout{grid-template-columns:1fr}}

/* ── FAMILY ── */
.family-section { padding:96px 0; }
.family-layout { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center; }
.family-demo { background:linear-gradient(160deg,#1E0830 0%,#2D0F4A 60%,#1A082E 100%);border-radius:20px;padding:24px 20px;border:1px solid rgba(255,255,255,0.1);box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.family-avatars { display:flex;justify-content:center;margin-bottom:20px;opacity:0;transform:translateY(12px);transition:opacity 0.5s var(--ease),transform 0.5s var(--ease); }
.family-avatars.visible { opacity:1;transform:translateY(0); }
.avatar-stack { display:flex; }
.avatar { width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:22px;margin-left:-12px;box-shadow:0 0 0 2.5px var(--pink); }
.avatar:first-child { margin-left:0; }
.notif-card { padding:12px 14px;border-radius:14px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);margin-bottom:9px;display:flex;gap:12px;align-items:flex-start;opacity:0;transform:translateY(16px);transition:opacity 0.45s var(--ease),transform 0.45s var(--ease); }
.notif-card.visible { opacity:1;transform:translateY(0); }
.notif-avatar { width:38px;height:38px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,rgba(204,68,204,0.25),rgba(153,76,204,0.25));display:flex;align-items:center;justify-content:center;font-size:20px; }
.notif-content { flex:1;min-width:0; }
.notif-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:2px; }
.notif-app { font-size:10px;font-weight:600;color:rgba(255,255,255,0.45); }
.notif-time { font-size:10px;color:rgba(255,255,255,0.35); }
.notif-title { font-size:12px;font-weight:600;color:rgba(255,255,255,0.9);margin-bottom:1px;line-height:1.4; }
.notif-detail { font-size:11px;color:rgba(255,255,255,0.5); }
.privacy-strip { background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:8px;margin-top:4px; }
.privacy-strip-text { font-size:12px;color:rgba(255,255,255,0.65); }
@media(max-width:860px){.family-layout{grid-template-columns:1fr}}

/* ── CALENDAR ── */
.calendar-section { padding:96px 0;background:var(--cream); }
.calendar-layout { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center; }
.calendar-demo { background:linear-gradient(160deg,#1E0830 0%,#2D0F4A 60%,#1A082E 100%);border-radius:20px;padding:20px;border:1px solid rgba(255,255,255,0.1);box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.cal-event-card { background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:12px;padding:12px 14px;margin-bottom:14px;display:flex;align-items:center;gap:12px; }
.cal-event-title { font-size:14px;font-weight:700;color:white; }
.cal-event-date { font-size:12px;color:rgba(255,255,255,0.5); }
.cal-suggested-label { font-size:11px;font-weight:600;color:rgba(255,255,255,0.45);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px; }
.cal-pills-flow { display:flex;flex-wrap:wrap;gap:7px; }
.cal-pill { padding:7px 12px;border-radius:var(--pill-r);background:var(--pill-bg);border:1px solid var(--pill-border);font-size:13px;font-weight:500;color:rgba(255,255,255,0.9);opacity:0;transform:translateY(6px);transition:opacity 0.35s var(--ease),transform 0.35s var(--ease); }
.cal-pill.visible { opacity:1;transform:translateY(0); }
@media(max-width:860px){.calendar-layout{grid-template-columns:1fr}}

/* ── PRIVACY ── */
.privacy-section { padding:96px 0; }
.privacy-layout { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center; }
.privacy-demo { display:flex;flex-direction:column;align-items:center;gap:24px; }
.privacy-icloud { position:relative;display:inline-flex;opacity:0;transform:scale(0.6);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease); }
.privacy-icloud.visible { opacity:1;transform:scale(1); }
.privacy-icloud-icon { font-size:80px;line-height:1; }
.privacy-icloud-lock { position:absolute;bottom:-4px;right:-8px;width:36px;height:36px;border-radius:50%;background:var(--white);box-shadow:0 2px 12px rgba(0,0,0,0.12);display:flex;align-items:center;justify-content:center;font-size:18px;opacity:0;transform:scale(0.2);transition:opacity 0.5s var(--ease),transform 0.5s var(--ease); }
.privacy-icloud-lock.visible { opacity:1;transform:scale(1); }
.privacy-badges { display:flex;flex-direction:column;gap:12px;width:100%;max-width:300px; }
.privacy-badge { display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--pill-r);background:var(--purple-pale);border:1px solid rgba(153,76,204,0.18);font-size:14px;font-weight:500;color:var(--ink);opacity:0;transform:scale(0.85) translateY(10px);transition:opacity 0.4s var(--ease),transform 0.4s var(--ease); }
.privacy-badge.visible { opacity:1;transform:scale(1) translateY(0); }
.privacy-badge svg { color:var(--purple);flex-shrink:0; }
@media(max-width:860px){.privacy-layout{grid-template-columns:1fr}.privacy-demo{order:-1}}

/* ── MORE FEATURES ── */
.more-section { padding:80px 0;background:var(--cream); }
.more-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.more-card { padding:22px;border-radius:16px;background:var(--white);border:1px solid var(--warm-gray);box-shadow:var(--shadow-soft);transition:transform 0.2s,box-shadow 0.2s; }
.more-card:hover { transform:translateY(-3px);box-shadow:var(--shadow-card); }
.more-card-icon { font-size:28px;margin-bottom:10px; }
.more-card h4 { margin-bottom:5px;color:var(--ink); }
.more-card p { font-size:0.88rem;color:var(--ink-mid);line-height:1.6; }
@media(max-width:860px){.more-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.more-grid{grid-template-columns:1fr}}

/* ── PRICING ── */
.pricing-section { padding:96px 0;background:var(--white); }
.pricing-row { display:flex;gap:24px;justify-content:center;flex-wrap:wrap; }
.price-card { flex:1;min-width:260px;max-width:360px;padding:32px;border-radius:22px;background:var(--white);border:2px solid var(--warm-gray);box-shadow:var(--shadow-soft);position:relative;opacity:0;transform:translateY(20px);transition:opacity 0.5s var(--ease),transform 0.5s var(--ease),box-shadow 0.3s; }
.price-card.visible { opacity:1;transform:translateY(0); }
.price-card:hover { box-shadow:var(--shadow-elevated); }
.price-card--featured { border-color:var(--purple);box-shadow:0 0 0 1px var(--purple),var(--shadow-elevated); }
.price-label { display:inline-block;padding:4px 12px;border-radius:50px;font-size:0.75rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;background:var(--purple-pale);color:var(--purple);margin-bottom:16px; }
.price-card--featured .price-label { background:linear-gradient(135deg,var(--pink),var(--purple));color:white; }
.price-card h3 { font-size:1.2rem;margin-bottom:12px;color:var(--ink); }
.price-amount { display:flex;align-items:baseline;gap:4px;margin-bottom:6px; }
.price-big { font-family:var(--font-display);font-size:2.8rem;font-weight:700;color:var(--ink); }
.price-per { font-size:1rem;color:var(--ink-light); }
.price-save { display:inline-block;padding:3px 10px;border-radius:50px;background:linear-gradient(135deg,rgba(204,68,204,0.12),rgba(153,76,204,0.12));color:var(--purple);font-size:0.8rem;font-weight:600;margin-bottom:20px; }
.price-card ul { margin-bottom:28px;display:flex;flex-direction:column;gap:9px; }
.price-card li { font-size:0.9rem;color:var(--ink-mid);padding-left:22px;position:relative; }
.price-card li::before { content:'✓';position:absolute;left:0;color:var(--purple);font-weight:700; }
.price-household { font-size:0.82rem;color:var(--ink-light);text-align:center;margin-top:12px; }
.price-household strong { color:var(--purple); }

/* ── CTA — dark gradient matching hero ── */
.cta-section {
  padding: 100px 0;
  background: linear-gradient(135deg, #CC00CC 0%, #A00CCF 35%, #7A0FCC 70%, #5C0FA8 100%);
  position: relative; overflow: hidden;
}
.cta-section::before { content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,150,255,0.18) 0%,transparent 65%);pointer-events:none; }
.cta-section::after { content:'';position:absolute;bottom:-80px;left:-80px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(160,60,220,0.16) 0%,transparent 65%);pointer-events:none; }
.cta-inner { text-align:center;position:relative;z-index:1; }
.cta-inner h2 { color:white;font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.2rem);margin-bottom:16px; }
.cta-inner p { color:rgba(255,255,255,0.7);font-size:1.1rem;max-width:520px;margin:0 auto 36px; }
.cta-badges { display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:24px; }
.cta-badge { display:flex;align-items:center;gap:6px;padding:7px 16px;border-radius:50px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);font-size:0.82rem;font-weight:500;color:rgba(255,255,255,0.8); }

/* ── FOOTER — dark gradient matching hero ── */
.footer {
  background: linear-gradient(135deg, #8B0099 0%, #6A0DAD 50%, #4A0A8A 100%);
  color: rgba(255,255,255,0.7);
  padding: 60px 0 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-grid { display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:40px; }
.footer-logo { display:flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;color:white;margin-bottom:12px; }
.footer-logo img { border-radius:8px; }
.footer-brand p { font-size:0.88rem;line-height:1.65;max-width:280px; }
.footer-col h4 { color:white;font-size:0.9rem;margin-bottom:14px; }
.footer-col a { display:block;font-size:0.88rem;color:rgba(255,255,255,0.45);margin-bottom:10px;transition:color 0.2s; }
.footer-col a:hover { color:var(--purple-light); }
.footer-disc { font-size:0.75rem;color:rgba(255,255,255,0.2);line-height:1.6;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-bottom { display:flex;justify-content:space-between;align-items:center; }
.footer-bottom p { font-size:0.82rem; }
.footer-legal { display:flex;gap:20px; }
.footer-legal a { font-size:0.82rem;color:rgba(255,255,255,0.35);transition:color 0.2s; }
.footer-legal a:hover { color:white; }
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column;gap:12px;text-align:center}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* ── CONTENT PAGES ── */
.page-header { padding:110px 0 48px;background:linear-gradient(135deg,#CC00CC 0%,#A00CCF 35%,#7A0FCC 70%,#5C0FA8 100%);border-bottom:1px solid rgba(255,255,255,0.1); }
.page-header h1 { color:white;margin-bottom:8px;font-size:clamp(2rem,4vw,2.8rem); }
.page-header p { color:rgba(255,255,255,0.6);font-size:1rem; }
.page-content { padding:56px 0 80px; }
.content-section { margin-bottom:40px; }
.content-section h2 { font-family:var(--font-display);font-size:1.5rem;color:var(--ink);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--warm-gray); }
.content-section h3 { font-size:1.05rem;color:var(--ink);margin:18px 0 8px; }
.content-section p { color:var(--ink-mid);line-height:1.75;margin-bottom:12px; }
.content-section ul { list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:12px; }
.content-section li { color:var(--ink-mid);padding-left:20px;position:relative;line-height:1.65; }
.content-section li::before { content:'•';position:absolute;left:0;color:var(--purple);font-weight:700; }
.content-section a { color:var(--purple);text-decoration:underline;text-underline-offset:2px; }
.content-section a:hover { color:var(--purple-dark); }
.highlight-box { padding:16px 20px;border-radius:12px;background:var(--purple-pale);border-left:3px solid var(--purple);margin:16px 0; }
.highlight-box p { color:var(--ink);margin:0; }
.contact-info { display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:40px; }
.contact-card { padding:28px;border-radius:18px;background:var(--white);border:1px solid var(--warm-gray);box-shadow:var(--shadow-soft);text-align:center; }
.contact-icon { width:52px;height:52px;border-radius:14px;margin:0 auto 14px;background:var(--purple-pale);display:flex;align-items:center;justify-content:center; }
.contact-icon svg { width:24px;height:24px;color:var(--purple); }
.contact-card h3 { margin-bottom:8px; }
.contact-card p { font-size:0.9rem;color:var(--ink-mid);margin-bottom:12px; }
.contact-card a { color:var(--purple);font-weight:600; }
@media(max-width:600px){.contact-info{grid-template-columns:1fr}}

/* ── UTILITIES ── */
.fade-up { opacity:0;transform:translateY(24px);transition:opacity 0.6s var(--ease),transform 0.6s var(--ease); }
.fade-up.visible { opacity:1;transform:translateY(0); }

@media(max-width:600px){
  h1{font-size:2rem}h2{font-size:1.65rem}
  .btn-lg{padding:14px 26px}
  .pricing-row{flex-direction:column;align-items:center}
}

/* Footer social icons */
.footer-social {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  align-items: center;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.footer-social a:hover {
  opacity: 1;
}
.footer-social img {
  filter: brightness(0) invert(1);
  display: block;
}