/* Home visual language shared with the polished invitation app hero. */
:root:not([data-theme="dark"]) {
  --bg:#f8f7ff; --bg-rgb:248,247,255; --text:#29235f; --muted:#65627f;
  --primary:#6d5ce6; --pink:#c744ac;
  --grad-brand:linear-gradient(115deg,#3267da,#6545cf 58%,#b32e92);
  --grad-text:linear-gradient(100deg,#3f74e8,#7652dc 58%,#c746a8);
  --border:rgba(93,73,132,.14); --border-strong:rgba(93,73,132,.24);
}
:root:not([data-theme="dark"]) body { background:#f8f7ff; }
.unified-site-header { background:rgba(255,255,255,.84); border-bottom-color:#ddd8f3; box-shadow:0 4px 24px #3021470b; backdrop-filter:blur(18px); }
.unified-site-header .nav-links a[aria-current="page"] { color:#684ed1; background:#eeeafd; }
.unified-site-header .site-header-create,.hero .btn--primary { background:var(--grad-brand); box-shadow:0 14px 30px -16px #6242bd99; }
.hero { min-height:calc(100svh - 76px); padding:76px 0 92px; background:#f8f7ff; overflow:hidden; }
.hero::after { background:linear-gradient(90deg,rgba(248,247,255,.92) 0%,rgba(248,247,255,.74) 30%,rgba(248,247,255,.2) 60%,rgba(248,247,255,.04) 100%),linear-gradient(180deg,rgba(248,247,255,.12),rgba(248,247,255,.48)); }
.hero-grid { position:relative; z-index:1; max-width:1180px; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:30px; align-items:center; }
.hero-content { max-width:560px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none; }
:root:not([data-theme="dark"]) .hero-title,:root[data-theme="dark"] .hero-title { color:#29235f; font-family:Georgia,'Times New Roman',serif; font-size:clamp(48px,5.2vw,68px); font-weight:600; line-height:1.06; letter-spacing:-.035em; text-wrap:balance; }
.hero-title br { display:block; }
.hero-title .grad { background:var(--grad-text); background-clip:text; -webkit-background-clip:text; color:transparent; }
.hero-sub { max-width:500px; margin-top:25px; color:#625f7b; font-size:17px; line-height:1.7; }
.hero-cta { gap:12px; flex-wrap:wrap; margin-top:30px; }
.hero .btn--ghost { color:#4d476b; background:#ffffffa8; border-color:#b9b0d766; }
.hero .btn--ghost:hover { background:#fff; border-color:#937cc7; }
.hero-trust { border-top:1px solid #80658e25; padding-top:20px; margin-top:30px; }
.hero-trust-text { color:#6a6680; }
.hero-trust-text b { color:#30245e; }
.hero .avatar-stack span { border-color:#faf9ff; }
.device-showcase { position:relative; width:100%; height:590px; max-width:610px; margin-inline:auto; isolation:isolate; }
.device-showcase::before { content:""; position:absolute; inset:12% 8% 4%; border-radius:50%; background:radial-gradient(circle,rgba(126,103,238,.23),transparent 66%); filter:blur(28px); z-index:-1; }
.showcase-proof { position:absolute; top:12px; left:4%; z-index:5; display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border:1px solid #ffffffd9; border-radius:999px; color:#564e81; background:#ffffffd9; box-shadow:0 12px 25px -18px #4c3b8e88; font-size:12px; font-weight:750; }
.showcase-proof i { width:8px; height:8px; border-radius:50%; background:#49c993; box-shadow:0 0 0 5px #49c99324; }
.hero-phone { position:absolute; display:block; width:218px; height:484px; padding:7px; border:1px solid #ffffff80; border-radius:38px; background:linear-gradient(145deg,#3b396c,#17163b); box-shadow:0 36px 55px -30px #3a2b998f, inset 0 0 0 1px #ffffff2b; overflow:visible; }
.hero-phone > a { position:relative; display:block; width:100%; height:100%; overflow:hidden; border-radius:31px; background:#fff; }
.hero-phone img { display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
.hero-phone-notch { position:absolute; z-index:2; top:12px; left:50%; width:62px; height:17px; margin-left:-31px; border-radius:999px; background:#17153d; }
.hero-phone--back-left { left:1%; top:78px; transform:rotate(-6deg); z-index:1; }
.hero-phone--center { left:50%; top:28px; width:242px; height:510px; margin-left:-121px; border-color:#ffffff55; z-index:3; box-shadow:0 40px 65px -31px #1d174caa, inset 0 0 0 1px #ffffff2b; }
.hero-phone--center > a { border-radius:32px; background:#111; }
.hero-phone--back-right { right:1%; top:94px; transform:rotate(6deg); z-index:2; }
.hero-phone-tag { position:absolute; left:50%; bottom:-17px; transform:translateX(-50%); padding:8px 14px; border:1px solid #ffffffef; border-radius:999px; color:#49417e; background:#fffffff0; box-shadow:0 12px 26px -16px #30205d99; font-size:11px; font-weight:750; white-space:nowrap; }
@keyframes home-phone-float { 0%,100% { translate:0 0; } 50% { translate:0 -7px; } }
.hero-phone--center { animation:home-phone-float 6s ease-in-out infinite; }
@media (max-width:1000px) {
  .hero { padding:58px 0 66px; }
  .hero-grid { grid-template-columns:1fr; max-width:760px; gap:28px; }
  .hero-content { max-width:650px; }
  .device-showcase { height:540px; max-width:610px; }
  .hero::after { background:linear-gradient(180deg,rgba(248,247,255,.84) 0%,rgba(248,247,255,.68) 40%,rgba(248,247,255,.24) 76%,rgba(248,247,255,.62)); }
}
@media (max-width:600px) {
  .hero { padding:40px 0 48px; }
  .hero-grid { padding-inline:20px; gap:14px; }
  :root:not([data-theme="dark"]) .hero-title,:root[data-theme="dark"] .hero-title { font-size:clamp(39px,11.5vw,52px); line-height:1.08; letter-spacing:-.03em; }
  .hero-sub { margin-top:19px; font-size:15px; line-height:1.62; }
  .hero-cta .btn { padding-inline:18px; }
  .hero-trust { margin-top:23px; padding-top:17px; }
  .device-showcase { height:376px; margin-top:4px; }
  .showcase-proof { top:0; left:2%; padding:7px 11px; font-size:10px; }
  .hero-phone { width:127px; height:286px; padding:5px; border-radius:25px; }
  .hero-phone > a { border-radius:20px; }
  .hero-phone-notch { top:8px; width:38px; height:10px; margin-left:-19px; }
  .hero-phone--back-left { left:2%; top:61px; }
  .hero-phone--center { top:33px; width:157px; height:327px; margin-left:-78.5px; border-radius:27px; }
  .hero-phone--back-right { right:2%; top:72px; }
  .hero-phone-tag { bottom:-13px; padding:6px 9px; font-size:9px; }
}
@media (prefers-reduced-motion:reduce) { .hero-phone--center { animation:none; } }

/* Comfortable photo controls and compact mobile composition. */
.hero-photo-dots { gap:0; }
.hero-photo-dot,.hero-photo-dot[aria-pressed="true"] {
  position:relative; flex:none; width:28px; height:32px; border-radius:8px; background:none;
}
.hero-photo-dot::after { content:""; position:absolute; left:50%; top:50%; translate:-50% -50%; width:8px; height:8px; border-radius:999px; background:#ffffffb3; }
.hero-photo-dot[aria-pressed="true"]::after { width:20px; background:#cfbaff; }
.hero-photo-dot:hover { background:#ffffff14; transform:none; }
.hero-photo-switcher { min-height:44px; padding-block:4px; background:#4b405cbd; }
.category-card { box-shadow:0 8px 22px -16px #34226038; }
.hero .btn { min-height:48px; }
@media(max-width:600px) {
  .hero { padding-top:28px; }
  :root:not([data-theme="dark"]) .hero-title,:root[data-theme="dark"] .hero-title { font-size:clamp(34px,9.6vw,40px); line-height:1.12; }
  .hero-sub { font-size:15px; color:#514a68; }
  .hero-photo-switcher { margin-bottom:20px; }
  .hero-cta { margin-top:22px; }
  .device-showcase { margin-top:14px; }
}

.phone-showcase-controls { position:absolute; z-index:5; bottom:-30px; left:50%; translate:-50% 0; display:flex; align-items:center; gap:4px; padding:4px 6px 4px 14px; color:#4c436b; background:#fffffff2; border:1px solid #ded9ef; border-radius:999px; box-shadow:0 5px 18px -12px #34226066; white-space:nowrap; font-size:11px; }
.phone-showcase-controls button { flex:none; display:grid; place-items:center; padding:0; width:44px; height:44px; border:0; border-radius:50%; color:#57439a; background:transparent; cursor:pointer; font-size:17px; }
.phone-showcase-controls button:hover { background:#eee9f8; }
.phone-showcase-controls button:focus-visible { outline:2px solid #6545cf; outline-offset:1px; }

.hero .hero-phone [data-phone-image]{object-position:top center;}
@media(max-width:600px){.device-showcase{margin-bottom:66px}.device-showcase .phone-showcase-controls{bottom:-60px}}