* { box-sizing: border-box; }
:root{
  --text:#f8f4ff; --muted:#c8bfd7; --muted-strong:#ddd4eb;
  --border:rgba(255,255,255,.12);
  --lilac:#c8a7ff; --pink:#f2b8d9; --sky:#b9dcff;
  --shadow:0 24px 80px rgba(0,0,0,.35);
}
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--text); font-family:"DM Sans",system-ui,sans-serif; overflow-x:hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(130,90,255,.16), transparent 26%),
    radial-gradient(circle at 86% 10%, rgba(255,164,206,.13), transparent 24%),
    radial-gradient(circle at 78% 72%, rgba(170,126,255,.12), transparent 26%),
    linear-gradient(180deg,#100b20 0%, #0c0818 45%, #110b20 100%);
}
button,input{ font:inherit; } button{ cursor:pointer; } img{ max-width:100%; } .hidden{ display:none !important; }
.ambient{ position:fixed; width:34vw; aspect-ratio:1; border-radius:50%; filter:blur(120px); pointer-events:none; z-index:-2; opacity:.16; }
.ambient-one{ background:#764eff; top:4%; left:-10%; }
.ambient-two{ background:#ff8ec6; right:-10%; top:20%; }
.ambient-three{ background:#6287ff; bottom:8%; left:20%; opacity:.10; }
.stars{
  position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.34;
  background-image:
    radial-gradient(circle at 15% 18%, #fff 0 1px, transparent 1.7px),
    radial-gradient(circle at 61% 23%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 88% 10%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 28% 76%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 80% 70%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 50% 52%, #fff 0 1px, transparent 1.6px);
  background-size:240px 240px,300px 300px,380px 380px,260px 260px,340px 340px,420px 420px;
}
.glass{
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  border:1px solid var(--border);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  box-shadow:var(--shadow);
}
.tiny-kicker,.eyebrow,.card-label{
  display:block; text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; font-weight:700; color:var(--lilac);
}
h1,h2,h3{ font-family:"Playfair Display", Georgia, serif; font-weight:700; margin:0; }
.gate{ min-height:100svh; width:min(100% - 32px, 1180px); margin:0 auto; display:grid; place-items:center; }
.gate-card{ width:min(560px,100%); border-radius:32px; padding:clamp(28px,6vw,54px); }
.gate h1{ font-size:clamp(2.4rem,8vw,4.2rem); line-height:1; margin:12px 0 16px; }
.gate p{ color:var(--muted); line-height:1.75; }
.login-form{ display:grid; gap:18px; margin-top:26px; }
.login-form label{ display:grid; gap:8px; }
.login-form label span{ color:var(--muted-strong); font-size:.92rem; }
.login-form input{
  width:100%; padding:15px 16px; border-radius:16px; background:rgba(8,6,18,.5); color:var(--text); border:1px solid var(--border); outline:none;
}
.login-form input:focus{ border-color:rgba(200,167,255,.55); box-shadow:0 0 0 4px rgba(200,167,255,.10); }
.form-error{ min-height:1.2em; color:#ffc0d8; margin:0; }
.security-note{ margin-top:20px; font-size:.8rem; opacity:.75; }
.primary-btn,.ghost-btn,.gallery-nav{
  padding:14px 22px; border-radius:999px; border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}
.primary-btn{ background:linear-gradient(135deg, var(--lilac), var(--pink)); color:#1a1027; font-weight:800; box-shadow:0 8px 24px rgba(215,168,255,.18); }
.ghost-btn,.gallery-nav{ background:rgba(255,255,255,.05); color:var(--text); border-color:rgba(255,255,255,.12); }
.primary-btn:hover,.ghost-btn:hover,.support-card:hover,.letter-card:hover,.gallery-nav:hover{ transform:translateY(-3px); }
.primary-btn:hover{ box-shadow:0 14px 30px rgba(215,168,255,.24); }
.ghost-btn:hover,.gallery-nav:hover{ background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.22); }
.primary-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
#app{ width:100%; }
.topbar{
  width:min(1160px, calc(100% - 28px)); margin:12px auto 0; padding:10px 12px; border-radius:20px; position:sticky; top:12px; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ border:0; background:transparent; color:var(--text); display:flex; align-items:center; gap:10px; text-align:left; }
.brand strong,.brand small{ display:block; } .brand small{ color:var(--muted); }
.brand-mark{
  width:38px; height:38px; border-radius:13px; background:linear-gradient(135deg, var(--lilac), var(--pink));
  display:grid; place-items:center; color:#1b1229; font-family:"Playfair Display", serif; font-weight:700;
}
.nav-menu{ display:flex; gap:6px; }
.nav-menu button{ padding:10px 12px; color:var(--muted); background:transparent; border:0; border-radius:12px; }
.nav-menu button:hover{ background:rgba(255,255,255,.07); color:var(--text); }
.menu-button{ display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.04); padding:10px; }
.menu-button span{ display:block; height:2px; margin:5px 0; background:var(--text); }
.section{ width:min(1160px, calc(100% - 36px)); margin:0 auto; padding:90px 0; }
.hero{
  min-height:calc(100svh - 76px); display:grid; grid-template-columns:1.03fr .97fr; gap:56px; align-items:center; padding-top:52px;
}
.hero-title{
  font-size:clamp(4rem, 9vw, 8rem); line-height:.87; letter-spacing:-.048em; margin:18px 0 30px; overflow:visible;
}
.hero-line{ display:block; overflow:visible; } .hero-line + .hero-line{ margin-top:.02em; }
.accent-line{ padding-bottom:.14em; }
.accent{
  display:inline-block; padding-bottom:.10em;
  background:linear-gradient(90deg, var(--lilac), var(--pink), var(--sky));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-subtitle{ max-width:620px; font-size:clamp(1.05rem,2vw,1.34rem); line-height:1.72; color:var(--muted); }
.route-line{ margin-top:22px; display:flex; flex-wrap:wrap; gap:8px 10px; color:#e4dced; font-size:.92rem; }
.route-line span{ color:var(--pink); }
.hero-actions{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }
.hero-orbit{ position:relative; min-height:520px; display:grid; place-items:center; }
.orbit{ position:absolute; border:1px solid rgba(255,255,255,.10); border-radius:50%; animation:spin 20s linear infinite; }
.orbit-one{ width:340px; height:190px; transform:rotate(-14deg); animation-duration:21s; }
.orbit-two{ width:470px; height:270px; transform:rotate(18deg); animation-duration:28s; }
.orbit-three{ width:260px; height:260px; animation-duration:16s; }
@keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.planet{
  width:220px; aspect-ratio:1; border-radius:50%; position:relative; display:grid; place-items:center;
  background:radial-gradient(circle at 34% 22%, rgba(255,255,255,.46), transparent 16%), radial-gradient(circle at 35% 35%, #d9c2ff 0, #a27cff 35%, #6440d0 68%, #2c1957 100%);
  box-shadow:0 0 0 16px rgba(176,130,255,.05), 0 0 90px rgba(139,100,255,.38);
  animation:floatPlanet 6s ease-in-out infinite;
}
@keyframes floatPlanet{ 0%,100%{ transform:translateY(0px); } 50%{ transform:translateY(-10px); } }
.planet-glow{ position:absolute; inset:-18px; border-radius:50%; border:1px solid rgba(200,167,255,.25); }
.nazar-eye{ position:relative; width:86px; height:86px; border-radius:50%; display:grid; place-items:center; filter:drop-shadow(0 8px 16px rgba(14,28,74,.35)); }
.nazar-ring{ position:absolute; border-radius:50%; display:block; }
.nazar-ring.outer{ width:86px; height:86px; background:#7bd5ff; }
.nazar-ring.middle{ width:62px; height:62px; background:#1b4da9; }
.nazar-ring.inner{ width:36px; height:36px; background:#ffffff; }
.nazar-ring.core{ width:18px; height:18px; background:#0f163f; }
.floating-note{
  position:absolute; padding:9px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(17,11,32,.72);
  color:#e5dbef; font-size:.82rem; box-shadow:var(--shadow); animation:floatTag 5.8s ease-in-out infinite;
}
.note-one{ top:14%; left:10%; } .note-two{ top:32%; right:4%; animation-delay:-1.4s; }
.note-three{ bottom:15%; left:14%; animation-delay:-2.2s; } .note-four{ top:50%; left:4%; padding:10px 12px; animation-delay:-3.1s; }
.note-five{ bottom:24%; right:12%; padding:10px 12px; animation-delay:-4s; }
@keyframes floatTag{ 0%,100%{ transform:translateY(0px); } 50%{ transform:translateY(-8px); } }
.section-heading{ max-width:780px; margin-bottom:34px; }
.section-heading-tight h2{ max-width:660px; }
.section-heading h2{ font-size:clamp(2.4rem,5vw,4.8rem); line-height:1.03; letter-spacing:-.02em; margin:14px 0 0; }
.section-heading p{ color:var(--muted); line-height:1.72; margin:16px 0 0; }
.today-grid{
  display:grid; grid-template-columns:1.12fr .88fr; grid-template-areas:"destination clock" "destination countdown"; gap:18px; align-items:start;
}
.destination-card{ grid-area:destination; } .clock-card{ grid-area:clock; } .countdown-card{ grid-area:countdown; }
.destination-card{ border-radius:34px; padding:30px 32px; display:flex; flex-direction:column; justify-content:space-between; min-height:280px; }
.destination-top{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.big-flag{ font-size:3.25rem; line-height:1; }
.destination-body h3{ font-size:clamp(2.2rem,4.8vw,4rem); line-height:1.02; margin-bottom:14px; }
.destination-body p{ max-width:540px; font-size:1rem; line-height:1.72; color:var(--muted); margin:0; }
.clock-card,.countdown-card{ border-radius:30px; padding:24px 28px; }
.clock-row{ display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center; }
.clock-block strong{ display:block; margin-top:8px; font-size:2rem; letter-spacing:-.03em; position:relative; }
.clock-block strong::after{
  content:""; display:inline-block; width:8px; height:8px; margin-left:10px; border-radius:50%; background:var(--pink); opacity:.85; animation:pulse 1.2s ease-in-out infinite;
}
.clock-divider{ width:1px; height:54px; background:rgba(255,255,255,.15); }
.clock-card p{ margin:16px 0 0; color:var(--muted); line-height:1.58; font-size:1rem; }
.countdown-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:16px; }
.countdown-card h3{ font-size:2rem; line-height:1; }
.countdown{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.countdown span{ text-align:center; border-radius:18px; padding:15px 8px 13px; background:rgba(255,255,255,.06); animation:softGlow 2.8s ease-in-out infinite; }
.countdown span:nth-child(2){ animation-delay:.25s; } .countdown span:nth-child(3){ animation-delay:.5s; } .countdown span:nth-child(4){ animation-delay:.75s; }
.countdown strong{ display:block; font-size:1.7rem; line-height:1; }
.countdown small{ display:block; margin-top:8px; color:var(--muted); font-size:.82rem; text-transform:lowercase; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.4; } 50%{ transform:scale(1.18); opacity:1; } }
@keyframes softGlow{ 0%,100%{ box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(214,177,255,0); } 50%{ box-shadow: inset 0 0 20px rgba(255,255,255,.02), 0 0 22px rgba(214,177,255,.09); } }
.timeline{ position:relative; display:grid; gap:14px; }
.timeline::before{ content:""; position:absolute; left:29px; top:24px; bottom:24px; width:1px; background:linear-gradient(var(--lilac), rgba(255,255,255,.08)); }
.timeline-item{ display:grid; grid-template-columns:60px 1fr; gap:14px; }
.timeline-dot{
  width:24px; height:24px; border-radius:50%; margin:26px auto 0; border:5px solid #100b20; background:#43375c;
  box-shadow:0 0 0 1px rgba(255,255,255,.10); position:relative; z-index:1;
}
.timeline-item.active .timeline-dot,.timeline-item.done .timeline-dot{ background:var(--pink); box-shadow:0 0 24px rgba(255,183,213,.55); }
.timeline-content{ border-radius:24px; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.timeline-content h3{ font-size:1.3rem; margin:6px 0; }
.timeline-content p{ margin:0; color:var(--muted); }
.timeline-state{ font-size:.76rem; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--muted); white-space:nowrap; }
.timeline-item.active .timeline-state{ color:#21162d; background:linear-gradient(135deg, var(--lilac), var(--pink)); }
.memory-stack{ display:grid; gap:16px; }
.memory-row{ display:grid; gap:16px; align-items:start; }
.row-two{ grid-template-columns:1.15fr .85fr; }
.row-three{ grid-template-columns:repeat(3,1fr); }
.memory-card{ border-radius:30px; padding:28px 86px 28px 28px; position:relative; overflow:hidden; min-height:0; }
.memory-number{
  position:absolute; top:18px; right:22px; font-size:3.1rem; color:rgba(255,255,255,.08); font-family:"Playfair Display", serif; line-height:1; z-index:0;
}
.memory-card h3,.memory-card p,.memory-card .card-label,.memory-card .memory-tags,.memory-photo-wrap{ position:relative; z-index:1; }
.memory-card h3{ font-size:clamp(1.82rem,3vw,2.75rem); line-height:1.02; margin:12px 0 14px; }
.memory-card p{ color:var(--muted); line-height:1.72; margin:0; font-size:1rem; }
.compact-card h3{ font-size:clamp(1.65rem,2.3vw,2.18rem); }
.compact-card p{ font-size:.98rem; }
.memory-photo-wrap{ border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.10); margin-top:18px; }
.memory-photo{ display:block; width:100%; max-height:280px; object-fit:cover; object-position:center 52%; }
.memory-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.memory-tags span{
  padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.055); border:1px solid var(--border); color:#e1d8eb; font-size:.82rem;
}
.highlight-copy{
  margin-top:18px !important; color:var(--text) !important; font-family:"Playfair Display", serif; font-size:clamp(1.28rem,2.15vw,1.85rem); line-height:1.45 !important;
}
.rose-card::before,.final-feeling-card::before{ content:""; position:absolute; border-radius:50%; pointer-events:none; }
.rose-card::before{ width:220px; height:220px; right:-70px; bottom:-70px; background:radial-gradient(circle, rgba(187,137,255,.18), transparent 68%); }
.final-feeling-card::before{ width:260px; height:260px; left:-90px; bottom:-100px; background:radial-gradient(circle, rgba(255,193,220,.12), transparent 68%); }
.letters-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.letter-card{
  min-height:228px; text-align:left; padding:26px; border-radius:26px; border:1px solid var(--border); color:var(--text);
  background:radial-gradient(circle at 80% 15%, rgba(200,167,255,.15), transparent 24%), linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease; display:flex; flex-direction:column; justify-content:flex-start;
}
.letter-card h3{ font-size:1.54rem; line-height:1.12; margin:22px 0 14px; }
.letter-card p{ margin:0; color:var(--muted); line-height:1.68; font-size:1rem; }
.letter-card .letter-icon{ font-size:1.2rem; color:var(--pink); opacity:.9; }
.letter-card.unlocked:hover{ border-color:rgba(200,167,255,.34); box-shadow:0 20px 36px rgba(0,0,0,.18); }
.letter-card.locked{ opacity:.76; }
.support-heading h2{ max-width:620px; line-height:1.03; margin-top:18px; }
.support-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.support-card{
  min-height:154px; border-radius:28px; border:1px solid var(--border); text-align:left; color:var(--text); padding:22px 26px 24px; display:flex; flex-direction:column; align-items:flex-start;
}
.support-card span{ display:block; color:var(--pink); font-size:.9rem; }
.support-card strong{
  margin-top:26px; font-size:1.42rem; line-height:1.16; font-family:"Playfair Display", Georgia, serif; font-weight:700;
}
.support-message{ margin-top:16px; padding:24px; border-radius:28px; color:#ece5f6; line-height:1.8; font-size:1.08rem; }
.gallery-heading{ margin-bottom:26px; }
.gallery-shell{ border-radius:34px; padding:24px; }
.gallery-toolbar{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.gallery-toolbar h3{ margin-top:10px; font-size:clamp(1.5rem,2.5vw,2rem); }
.gallery-controls{ display:flex; gap:10px; }
.gallery-nav{ width:46px; height:46px; padding:0; display:grid; place-items:center; font-size:1.15rem; }
.gallery-track{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none;
}
.gallery-track::-webkit-scrollbar{ display:none; }
.art-slide{ flex:0 0 clamp(260px, 78vw, 500px); scroll-snap-align:start; }
.art-frame{
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)), #0f0b1d;
  border:1px solid rgba(255,255,255,.12); border-radius:28px; padding:16px; box-shadow:var(--shadow);
}
.art-frame img{ width:100%; height:clamp(360px, 52vw, 540px); object-fit:contain; border-radius:18px; background:#090611; display:block; }
.art-caption{ padding:16px 8px 4px; }
.art-caption span{ display:block; color:#f2c7df; text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; margin-bottom:8px; }
.art-caption h3{ font-size:clamp(1.3rem,2.5vw,1.8rem); line-height:1.15; margin-bottom:10px; }
.art-caption p{ color:var(--muted); line-height:1.72; margin:0; }
.joke-card,.final-lock{ border-radius:32px; padding:clamp(32px,6vw,60px); text-align:center; }
.joke-card h2,.final-lock h2{ font-size:clamp(2.3rem,5vw,4.5rem); line-height:1; margin:12px 0 24px; }
.pos-ya-que{ margin-top:34px; }
.pos-ya-que strong{
  display:block; font-size:clamp(3rem,10vw,6.6rem); background:linear-gradient(90deg, var(--lilac), var(--pink)); -webkit-background-clip:text; color:transparent; line-height:.92;
}
.pos-ya-que span{ display:block; color:var(--muted-strong); margin-top:24px; font-size:1.12rem; }
.lock-icon{
  width:68px; height:68px; border-radius:50%; background:rgba(255,255,255,.06); display:grid; place-items:center; font-size:2rem; color:var(--pink); margin:0 auto 18px;
}
.flower-icon{ box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 20px rgba(242,184,217,.12); }
footer{
  width:min(1160px, calc(100% - 36px)); margin:0 auto; padding:10px 0 40px; border-top:1px solid rgba(255,255,255,.10); color:var(--muted); font-size:.82rem; display:flex; justify-content:space-between; gap:16px;
}
.letter-dialog{ width:min(680px, calc(100% - 28px)); border:0; background:transparent; padding:0; color:var(--text); }
.letter-dialog::backdrop{ background:rgba(4,3,8,.78); backdrop-filter:blur(8px); }
.letter-paper{
  border-radius:30px; padding:clamp(28px,6vw,52px); background:linear-gradient(160deg, rgba(36, 24, 55, .98), rgba(19, 13, 31, .98)); border:1px solid var(--border); box-shadow:var(--shadow);
}
.letter-paper h2{ font-size:clamp(2rem,5vw,3.8rem); line-height:.98; margin:12px 0 20px; }
.letter-paper p{ color:#e3daed; line-height:1.86; margin:0 0 14px; }
.dialog-close{
  position:absolute; right:14px; top:12px; z-index:2; width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:rgba(12, 8, 20, .8); color:var(--text); font-size:1.4rem;
}
@media (max-width:980px){
  .hero{ grid-template-columns:1fr; gap:34px; padding-top:72px; min-height:auto; }
  .hero-orbit{ min-height:360px; }
  .today-grid,.letters-grid,.support-grid,.row-two,.row-three{ grid-template-columns:1fr; }
  .today-grid{ grid-template-areas:"destination" "clock" "countdown"; }
  .menu-button{ display:block; }
  .nav-menu{
    display:none; position:absolute; right:0; top:calc(100% + 8px); width:min(280px, calc(100vw - 28px)); padding:10px;
    border:1px solid var(--border); border-radius:18px; background:rgba(18, 12, 32, .96);
  }
  .nav-menu.open{ display:grid; } .nav-menu button{ text-align:left; }
}
@media (max-width:680px){
  .section{ width:min(100% - 26px, 1160px); padding:74px 0; }
  .topbar{ width:calc(100% - 20px); top:8px; }
  .hero-title{ font-size:clamp(3.85rem,20vw,6rem); line-height:.88; }
  .accent-line{ padding-bottom:.18em; }
  .hero-actions{ display:grid; }
  .hero-actions button{ width:100%; }
  .hero-orbit{ min-height:300px; transform:scale(.88); }
  .section-heading h2{ font-size:clamp(2.2rem,14vw,4rem); line-height:1.05; }
  .clock-row{ gap:12px; }
  .clock-block strong{ font-size:1.6rem; }
  .countdown strong{ font-size:1.4rem; }
  .timeline-content{ flex-direction:column; align-items:flex-start; }
  .memory-card{ padding:26px 78px 24px 24px; }
  .support-card strong{ margin-top:22px; font-size:1.34rem; }
  .gallery-shell{ padding:18px; }
  .gallery-toolbar{ align-items:flex-start; flex-direction:column; }
  .art-slide{ flex:0 0 88%; }
  .art-frame img{ height:420px; }
  footer{ width:calc(100% - 26px); flex-direction:column; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}


/* ===== Premium final refinements ===== */
/* Login always visible on a fresh page load */
.gate{
  min-height:100svh;
  width:min(1180px, calc(100% - 32px));
  padding:34px 0;
}
.gate-shell{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0, 1.03fr) minmax(330px, .72fr);
  gap:18px;
  align-items:stretch;
}
.gate-card{
  width:100%;
  min-height:620px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(34px, 6vw, 68px);
}
.gate-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.gate-flower{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  color:var(--pink);
  background:rgba(255,255,255,.045);
}
.gate h1{
  font-size:clamp(3.2rem, 7vw, 6.2rem);
  line-height:.94;
  letter-spacing:-.035em;
  margin:22px 0 22px;
}
.gate-copy{
  max-width:590px;
  font-size:1.05rem;
}
.login-form{
  max-width:620px;
  width:100%;
  margin-top:30px;
}
.login-form input{
  min-height:54px;
}
.gate-enter{
  margin-top:4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.gate-signature{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:28px;
  color:rgba(232,223,242,.72);
  font-size:.82rem;
}
.gate-line{
  height:1px;
  flex:1;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}
.gate-scene{
  min-height:620px;
  border-radius:32px;
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.gate-scene::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 45%, rgba(157,113,255,.12), transparent 34%);
  pointer-events:none;
}
.gate-scene p{
  position:absolute;
  left:34px;
  right:34px;
  bottom:34px;
  margin:0;
  color:var(--muted);
  line-height:1.65;
  text-align:center;
  z-index:3;
}
.gate-scene-orbit{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.11);
  animation:spin 20s linear infinite;
}
.orbit-a{ width:330px; height:190px; }
.orbit-b{ width:230px; height:230px; animation-duration:14s; animation-direction:reverse; }
.gate-nazar{
  position:relative;
  width:132px;
  height:132px;
  display:grid;
  place-items:center;
  z-index:2;
  animation:floatPlanet 5.8s ease-in-out infinite;
}
.gate-nazar .outer{ width:132px; height:132px; }
.gate-nazar .middle{ width:94px; height:94px; }
.gate-nazar .inner{ width:54px; height:54px; }
.gate-nazar .core{ width:26px; height:26px; }
.gate-petal{
  position:absolute;
  color:rgba(255,203,226,.55);
  z-index:2;
  animation:floatTag 5.4s ease-in-out infinite;
}
.petal-a{ top:20%; left:18%; font-size:1.2rem; }
.petal-b{ top:28%; right:16%; font-size:1rem; animation-delay:-1.8s; }
.petal-c{ bottom:24%; right:26%; font-size:.9rem; animation-delay:-3.2s; }

/* Hero: keep the lines close, but never clip the descender of the g */
.hero-title{
  line-height:.89;
  margin-bottom:32px;
  overflow:visible;
}
.hero-line + .hero-line{ margin-top:-.005em; }
.accent-line{
  margin-top:.005em !important;
  line-height:1.08;
  padding-bottom:.24em;
  overflow:visible;
}
.accent{
  line-height:1.08;
  padding:0 .035em .16em 0;
  overflow:visible;
  vertical-align:top;
}

/* Memories: real masonry columns, so short cards never create giant holes */
.memory-stack,.memory-row{ display:none; }
.memory-masonry{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:start;
}
.memory-column{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}
.memory-card{
  width:100%;
  padding:28px;
}
.memory-number{
  top:22px;
  right:22px;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.04);
  color:rgba(236,226,247,.38);
  font-family:"DM Sans", system-ui, sans-serif;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.08em;
}
.memory-card .card-label,
.memory-card h3{
  padding-right:68px;
}
.memory-mini-path{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.memory-mini-path span{
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.045);
  color:#e4dced;
  font-size:.76rem;
}
.memory-mini-path i{
  color:var(--pink);
  font-style:normal;
  opacity:.7;
}
.blossom-memory::after{
  content:"❀";
  position:absolute;
  right:28px;
  bottom:20px;
  color:rgba(255,202,225,.25);
  font-size:2rem;
}

/* Support heading: slightly more breathing room inside the words and lines */
.support-heading{
  max-width:760px;
}
.support-heading h2{
  max-width:700px;
  line-height:1.08;
  letter-spacing:.006em;
  word-spacing:.035em;
  margin-top:20px;
}

@media (max-width:980px){
  .gate-shell{ grid-template-columns:1fr; }
  .gate-scene{ min-height:340px; }
  .memory-masonry{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .gate{ padding:14px 0 30px; }
  .gate-card{ min-height:auto; padding:30px 24px; }
  .gate-scene{ min-height:280px; }
  .hero-title{ line-height:.91; }
  .accent-line{ padding-bottom:.28em; }
  .support-heading h2{ letter-spacing:.004em; word-spacing:.02em; }
  .memory-card{ padding:24px; }
  .memory-number{ width:44px; height:44px; top:18px; right:18px; }
  .memory-card .card-label,.memory-card h3{ padding-right:58px; }
}


/* ===== Premium Final V3 ===== */

/* Hero: close the large visual gap below the title without clipping the g descender. */
.hero-title{
  line-height:.885;
  margin-bottom:10px;
}
.hero-line + .hero-line{
  margin-top:-.012em;
}
.accent-line{
  line-height:1.08;
  padding-bottom:.26em;
  margin-bottom:-.12em;
  overflow:visible;
}
.accent{
  line-height:1.08;
  padding-bottom:.17em;
  overflow:visible;
}
.hero-subtitle{
  margin-top:0;
}

/* Memories: columns flow independently, so a tall photo card never creates an empty row. */
.memory-masonry{
  grid-template-columns:minmax(0, .94fr) minmax(0, 1.06fr);
}
.memory-column{
  gap:14px;
}
.story-card{
  padding-bottom:24px;
}
.memory-mini-path{
  margin-top:18px;
}
.memory-card h3{
  text-wrap:balance;
}

/* Trip chapters are interactive once their date arrives. */
.timeline-content{
  width:100%;
  color:var(--text);
  text-align:left;
  border:1px solid var(--border);
  font:inherit;
  cursor:pointer;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.timeline-content.chapter-ready:hover{
  transform:translateY(-2px);
  border-color:rgba(200,167,255,.28);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}
.timeline-content.chapter-locked{
  cursor:not-allowed;
  opacity:.72;
}
.chapter-hint{
  display:inline-block;
  margin-top:12px;
  color:var(--pink);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.035em;
}
.chapter-locked .chapter-hint{
  color:var(--muted);
  font-weight:500;
}

/* Flight state replaces a stale 00:00 countdown after departure. */
.countdown.flight-mode{
  display:block;
}
.flight-live{
  min-height:72px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 18px;
  overflow:hidden;
}
.flight-live strong,
.flight-live small{
  display:block;
}
.flight-live strong{
  font-size:1.12rem;
}
.flight-live small{
  color:var(--muted);
  margin-top:4px;
}
.flight-plane{
  display:inline-block;
  font-size:2rem;
  animation:flightDrift 2.4s ease-in-out infinite;
}
@keyframes flightDrift{
  0%,100%{ transform:translateX(0) translateY(1px) rotate(-7deg); }
  50%{ transform:translateX(10px) translateY(-4px) rotate(2deg); }
}

/* Envelopes visibly unlock and then become interactive. */
.letter-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.letter-status{
  font-size:.68rem;
  letter-spacing:.09em;
  color:var(--muted);
  text-transform:uppercase;
}
.letter-card.unlocked{
  opacity:1;
  border-color:rgba(242,184,217,.24);
  box-shadow:0 14px 40px rgba(116,78,255,.08);
  animation:letterGlow 3.8s ease-in-out infinite;
}
.letter-card.unlocked .letter-status{
  color:var(--pink);
}
.letter-card.locked{
  opacity:.64;
  cursor:not-allowed;
}
@keyframes letterGlow{
  0%,100%{ box-shadow:0 14px 40px rgba(116,78,255,.05); }
  50%{ box-shadow:0 18px 48px rgba(242,184,217,.12); }
}

/* Support responses rotate on every click and gently re-enter. */
.support-message.message-pop{
  animation:messagePop .28s ease;
}
@keyframes messagePop{
  from{ opacity:.25; transform:translateY(5px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Final flower blooms when the last letter unlocks. */
.flower-icon.bloom{
  animation:finalBloom 2.8s ease-in-out infinite;
  color:#ffd0e5;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 30px rgba(242,184,217,.22);
}
@keyframes finalBloom{
  0%,100%{ transform:scale(1) rotate(0); }
  50%{ transform:scale(1.08) rotate(5deg); }
}

@media (max-width:680px){
  .hero-title{
    margin-bottom:8px;
    line-height:.9;
  }
  .accent-line{
    padding-bottom:.30em;
    margin-bottom:-.14em;
  }
}


/* ===== Production V4: final responsive safeguards ===== */
/*
   Keep the two independent masonry columns on desktop, but flatten them on
   phones/tablets so every memory uses the full width and can be restored to
   chronological order. These rules intentionally live at the END of the file
   so later premium overrides can never re-enable the two-column layout.
*/
@media (max-width:980px){
  .memory-masonry{
    display:flex !important;
    flex-direction:column;
    gap:14px;
  }
  .memory-column{
    display:contents;
  }

  .memory-column:nth-child(1) .memory-card:nth-child(1){ order:1; } /* 01 */
  .memory-column:nth-child(2) .memory-card:nth-child(1){ order:2; } /* 02 */
  .memory-column:nth-child(1) .memory-card:nth-child(2){ order:3; } /* 03 */
  .memory-column:nth-child(2) .memory-card:nth-child(2){ order:4; } /* 04 */
  .memory-column:nth-child(1) .memory-card:nth-child(3){ order:5; } /* 05 */
  .memory-column:nth-child(2) .memory-card:nth-child(3){ order:6; } /* 06 */
  .memory-column:nth-child(1) .memory-card:nth-child(4){ order:7; } /* 07 */

  .memory-card{
    width:100%;
    min-width:0;
  }
}

@media (max-width:680px){
  .memory-masonry{ gap:12px; }
  .memory-card{
    padding:24px !important;
    border-radius:26px;
  }
  .memory-number{
    width:42px;
    height:42px;
    top:18px;
    right:18px;
  }
  .memory-card .card-label,
  .memory-card h3{
    padding-right:54px;
  }
  .memory-photo{
    max-height:none;
    aspect-ratio:4 / 3;
    object-fit:cover;
  }
}