:root{
  --green:#00C853;
  --green-deep:#0FA34A;
  --green-dark:#0B7D3B;
  --ink:#26292B;
  --muted:#5E616E;
  --coral:#F16261;
  --sky:#63CDF1;
  --bg:#F5F5F5;
  --white:#FFFFFF;
  --line:#E3E6E5;
  --r-lg:22px;
  --r-md:16px;
  --r-sm:10px;
  --shadow-card:0 10px 28px rgba(20,30,25,0.14);
  --shadow-btn:0 8px 20px rgba(0,200,83,0.35);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0; height:100%; background:#0d0f10; overscroll-behavior:none;}
body{
  font-family:'Inter',sans-serif;
  display:flex; align-items:center; justify-content:center;
  -webkit-touch-callout:none; user-select:none;
  min-height:100vh;
}
#stage-wrap{
  width:100%; max-width:420px; height:100vh; max-height:900px;
  position:relative; overflow:hidden;
  background:var(--bg);
  box-shadow:0 0 60px rgba(0,0,0,0.5);
}
@media (min-width:421px) and (orientation:portrait){
  #stage-wrap{ border-radius:28px; height:min(900px, 92vh); }
}
@media (orientation:landscape){
  #stage-wrap{ width:100vw; height:100vh; max-width:none; max-height:none; border-radius:0; }
}
#stage{ position:absolute; inset:0; overflow:hidden; }

/* =========================================================
   FRAME GRID SYSTEM
   ========================================================= */
.frame{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto auto 1fr auto;
  grid-template-areas:"top" "head" "main" "cta";
  opacity:0; visibility:hidden;
  padding-top:calc(20px + var(--safe-top));
  padding-bottom:calc(20px + var(--safe-bottom));
  padding-left:var(--safe-left); padding-right:var(--safe-right);
  background:var(--bg);
}
.frame.active{ opacity:1; visibility:visible; }
.topbar{ grid-area:top; padding:0 22px; display:flex; align-items:center; justify-content:space-between; }
h1.headline{ grid-area:head; font-family:'Poppins',sans-serif; font-weight:800; font-size:27px; line-height:1.15; color:var(--ink); margin:14px 0 0; padding:0 22px; letter-spacing:-0.3px; }
h1.headline .accent{ color:var(--coral); }
.frame-main{ grid-area:main; min-height:0; min-width:0; display:flex; flex-direction:column; overflow-y:auto; justify-content:flex-start; gap:2px; }
.cta-zone{ grid-area:cta; padding:0 22px; display:flex; flex-direction:column; align-items:center; gap:10px; align-self:end; width:100%; }

@media (orientation:landscape){
  .frame{
    grid-template-columns:38% 62%;
    grid-template-rows:auto 1fr auto;
    grid-template-areas:"top top" "head main" "cta main";
    column-gap:16px;
    padding-top:calc(12px + var(--safe-top));
    padding-bottom:calc(12px + var(--safe-bottom));
  }
  .topbar{ padding:0 18px; }
  h1.headline{ font-size:20px !important; line-height:1.1; margin-top:6px !important; padding:0 18px !important; }
  .frame-main{ padding:4px 4px 0 18px; }
  .frame-main::-webkit-scrollbar{ display:none; }
  .cta-zone{ padding:0 18px !important; margin-top:8px !important; gap:6px !important; }
  .btn{ padding:13px 16px; font-size:14px; }
  .hook-sub{ font-size:12.5px !important; }
  .scene1, .scene5{ margin:8px 18px 0 0 !important; }
  .who-row, .dest-row{ margin:8px 18px 0 0 !important; }
  .plan-cards{ margin:8px 18px 0 0 !important; }
  .route-wrap{ margin:6px 18px 0 0 !important; }
  .package-card{ margin:10px 18px 0 0 !important; }
}
@media (orientation:landscape) and (max-height:420px){
  .frame{ padding-top:calc(8px + var(--safe-top)); padding-bottom:calc(8px + var(--safe-bottom)); }
  h1.headline{ font-size:17px !important; margin-top:4px !important; }
  .ctkt-logo svg{ width:20px; height:20px; }
  .ctkt-logo .wordmark{ font-size:15px; }
}

/* ---------- Logo lockup ---------- */
.ctkt-logo{ display:flex; align-items:center; gap:8px; }
.ctkt-logo svg{ width:26px; height:26px; flex:none; }
.ctkt-logo .wordmark{ font-family:'Poppins',sans-serif; font-weight:700; font-size:18px; letter-spacing:-0.2px; }
.ctkt-logo .wordmark .c1{ color:var(--ink); }
.ctkt-logo .wordmark .c2{ color:var(--green); }

/* ---------- Buttons ---------- */
.btn{
  border:none; border-radius:16px; font-family:'Inter',sans-serif;
  font-weight:700; font-size:17px; letter-spacing:0.1px;
  padding:17px 20px; width:100%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  -webkit-appearance:none; appearance:none;
  transition:transform .12s ease, box-shadow .12s ease, opacity .2s ease;
}
.btn:active{ transform:scale(0.96); }
.btn-primary{ background:var(--green); color:#fff; box-shadow:var(--shadow-btn); }
.btn-primary.pulse{ animation:pulseBtn 2.1s ease-in-out infinite; }
.btn-primary:disabled{ background:#BFE8CC; box-shadow:none; color:#fff; cursor:default; }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:disabled{ background:#C7C9CA; color:#fff; cursor:default; }
.btn-outline{ background:transparent; color:var(--green-dark); border:2px solid var(--green); font-weight:700; }
@keyframes pulseBtn{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.025); } }

/* =================================================================
   FRAME 1 — EMOTIONAL HOOK
   ================================================================= */
.hook-sub{ padding:0 22px; margin:8px 0 0; color:var(--muted); font-size:15px; line-height:1.4; }
.hook-sub.sm{ font-size:13.5px; margin-top:4px; }
.scene1{ margin:14px 22px 0; border-radius:var(--r-lg); overflow:hidden; flex:1; min-height:0; background:#1c2126; }
.scene1 > picture, .scene1 > picture > img{ width:100%; height:100%; display:block; object-fit:cover; }

/* =================================================================
   FRAME 2 — CHOOSE THE JOURNEY
   ================================================================= */
.who-row{ display:flex; gap:12px; padding:0 22px; margin-top:12px; }
.who-card{
  flex:1; background:#fff; border-radius:var(--r-md); padding:14px 10px 12px;
  border:2.5px solid transparent; box-shadow:var(--shadow-card); position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center; cursor:pointer;
  transition:border-color .15s ease, transform .15s ease;
}
.who-card.selected{ border-color:var(--green); transform:translateY(-2px); }
.who-icon{ width:64px; height:64px; }
.who-label{ font-family:'Poppins',sans-serif; font-weight:700; font-size:13.5px; color:var(--ink); margin-top:6px; }
.check-badge{
  position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%;
  background:var(--green); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(0.4); transition:transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.check-badge.sm{ width:20px; height:20px; }
.who-card.selected .check-badge, .dest-card.selected .check-badge{ opacity:1; transform:scale(1); }
.check-badge svg{ width:13px; height:13px; }
.check-badge.sm svg{ width:11px; height:11px; }

.sub-headline{ font-family:'Poppins',sans-serif; font-weight:800; font-size:18px; color:var(--ink); padding:0 22px; margin:18px 0 0; }
.dest-row{ display:flex; gap:10px; padding:0 22px; margin-top:10px; }
.dest-card{
  flex:1; background:#fff; border-radius:var(--r-md); padding:6px; border:2.5px solid transparent;
  box-shadow:var(--shadow-card); position:relative; cursor:pointer; transition:border-color .15s ease, transform .15s ease;
}
.dest-card.selected{ border-color:var(--green); transform:translateY(-2px); }
.dest-scene{ border-radius:10px; overflow:hidden; aspect-ratio:4/5; }
.dest-scene svg{ width:100%; height:100%; display:block; }
.dest-label{ font-family:'Poppins',sans-serif; font-weight:700; font-size:12px; color:var(--ink); text-align:center; margin-top:6px; line-height:1.25; }

.step-progress{ width:100%; }
.step-bar{ height:5px; border-radius:5px; background:var(--line); position:relative; overflow:hidden; }
.step-bar .fill{ position:absolute; inset:0; background:var(--green); border-radius:5px; }
.step-row{ display:flex; align-items:center; width:100%; }
.step-count{ font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap; }

/* =================================================================
   FRAME 3 — COMPLETE THE PLAN
   ================================================================= */
.ready-tracker{ display:flex; align-items:center; padding:0 22px; margin-top:14px; }
.rt-dot{ width:22px; height:22px; border-radius:50%; background:var(--line); flex:none; position:relative; transition:background .3s ease; }
.rt-dot.done{ background:var(--green); }
.rt-dot.done::after{ content:''; position:absolute; left:6px; top:5px; width:8px; height:5px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg); }
.rt-line{ flex:1; height:3px; background:var(--line); transition:background .3s ease; }
.rt-line.done{ background:var(--green); }
.ready-count{ text-align:center; font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:0.4px; margin-top:8px; }

.plan-cards{ display:flex; flex-direction:column; gap:10px; padding:0 22px; margin-top:12px; }
.plan-card{
  display:flex; align-items:center; gap:12px; background:#fff; border-radius:var(--r-md);
  padding:12px 14px; box-shadow:var(--shadow-card); border:2px solid transparent;
  cursor:pointer; transition:border-color .2s ease, opacity .2s ease, transform .15s ease;
}
.plan-card.unlocked{ border-color:var(--green); }
.plan-card.completed{ border-color:var(--green); background:#F3FBF5; }
.plan-card.locked{ opacity:0.55; cursor:default; }
.plan-card:active:not(.locked){ transform:scale(0.98); }
.plan-icon{ width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center; background:#F0F1EF; border-radius:10px; }
.plan-icon.photo{ width:56px; height:56px; overflow:hidden; }
.plan-icon svg{ width:22px; height:22px; }
.plan-card.completed .plan-icon{ background:#DFF7E7; }
.plan-text{ flex:1; min-width:0; }
.plan-title{ font-family:'Poppins',sans-serif; font-weight:800; font-size:13.5px; color:var(--ink); letter-spacing:0.3px; }
.plan-desc{ font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.3; }
.plan-state{ font-size:10.5px; font-weight:800; letter-spacing:0.3px; color:var(--green-dark); white-space:nowrap; flex:none; }
.plan-card.locked .plan-state{ color:#9AA3A0; }
.plan-card.completed .plan-state{ color:var(--green-dark); }

/* =================================================================
   FRAME 4 — JOURNEY READY
   ================================================================= */
.route-wrap{ display:flex; gap:14px; padding:0 22px; margin-top:10px; align-items:flex-start; }
.route-scene{ width:84px; flex:none; border-radius:var(--r-md); overflow:hidden; aspect-ratio:3/2.6; }
.route-scene svg{ width:100%; height:100%; display:block; }
.route-list{ flex:1; padding-top:2px; }
.route-chip{ display:inline-block; background:#fff; border:1.5px solid var(--line); border-radius:8px; padding:5px 12px; font-family:'Poppins',sans-serif; font-weight:800; font-size:12px; color:var(--ink); }
.route-line{ width:2px; height:14px; background:var(--green); margin-left:9px; }
.route-stop{ display:flex; align-items:center; gap:10px; }
.route-dot{ width:20px; height:20px; border-radius:50%; background:var(--line); flex:none; display:flex; align-items:center; justify-content:center; }
.route-dot.done{ background:var(--green); }
.route-dot.done::after{ content:'✓'; color:#fff; font-size:11px; font-weight:800; }
.route-stop-label{ font-size:11.5px; font-weight:700; color:var(--ink); letter-spacing:0.2px; }

.package-card{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:18px 20px; margin:16px 22px 0; }
.package-title{ font-family:'Poppins',sans-serif; font-weight:800; font-size:19px; color:var(--ink); line-height:1.2; }
.package-sub{ font-size:13px; color:var(--muted); margin-top:6px; line-height:1.4; }
.package-divider{ height:1px; background:var(--line); margin:12px 0; }
.package-item{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink); margin-bottom:8px; }
.package-item svg{ width:17px; height:17px; flex:none; }
.package-note{ margin-top:10px; background:#F5F5F5; border-radius:8px; padding:7px 10px; font-size:10.5px; color:var(--muted); text-align:center; }

/* =================================================================
   FRAME 5 — EXPLORE PACKAGES
   ================================================================= */
.tags-row{ padding:0 22px; margin-top:10px; font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:0.3px; display:flex; gap:6px; flex-wrap:wrap; }
.tags-row .dot{ color:var(--coral); }
.scene5{ margin:12px 22px 0; border-radius:var(--r-lg); overflow:hidden; flex:1; min-height:0; background:#c97a56; }
.scene5 > picture, .scene5 > picture > img{ width:100%; height:100%; display:block; object-fit:cover; }

/* ---------- Steam wipe transition ---------- */
#wipe{
  position:absolute; inset:0; z-index:50; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(180,235,200,0.95), rgba(20,60,35,0.98) 70%);
  opacity:0; clip-path:circle(0% at 50% 50%);
}
#wipe.play{ animation:wipeAnim 0.7s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes wipeAnim{
  0%{ opacity:1; clip-path:circle(0% at 50% 50%); }
  50%{ opacity:1; clip-path:circle(75% at 50% 50%); }
  100%{ opacity:0; clip-path:circle(140% at 50% 50%); }
}

@media (prefers-reduced-motion: reduce){
  .btn-primary.pulse, .check-badge, #wipe.play { animation:none !important; }
}