@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900&family=Playfair+Display:wght@600;700&display=swap");

:root{
  --background: oklch(0.09 0.028 260);
  --card: oklch(0.13 0.032 260);
  --card-2: oklch(0.16 0.04 258);
  --foreground: oklch(0.96 0.006 240);
  --muted: oklch(0.56 0.055 258);
  --border: oklch(0.24 0.045 260);
  --primary: oklch(0.58 0.28 263);
  --primary-2: oklch(0.84 0.18 208);
  --primary-fg: oklch(0.06 0.02 260);
  --glow: oklch(0.62 0.26 260);
  --radius: 0.9rem;
  --vh:1vh;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  background:var(--background);
  color:var(--foreground);
  min-height:100vh;
  min-height:calc(var(--vh, 1vh) * 100);
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}

/* ===== animated background ===== */
.bg-fx{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(55% 40% at 15% -8%, oklch(0.58 0.28 263 / .28), transparent 62%),
    radial-gradient(45% 38% at 105% 15%, oklch(0.52 0.22 278 / .18), transparent 65%),
    radial-gradient(60% 55% at 50% 115%, oklch(0.58 0.28 263 / .16), transparent 70%),
    var(--background);
}
.bg-fx::before{
  content:'';position:absolute;inset:0;opacity:.9;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, oklch(0.96 0.006 240 / .55) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, oklch(0.96 0.006 240 / .4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 68%, oklch(0.84 0.18 208 / .5) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 82%, oklch(0.96 0.006 240 / .35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 60%, oklch(0.96 0.006 240 / .3) 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 40%, oklch(0.96 0.006 240 / .3) 50%, transparent 51%);
  background-size: 640px 640px;
  animation: drift 60s linear infinite;
}
@keyframes drift{ from{ background-position:0 0; } to{ background-position:-640px -320px; } }

/* ===== topbar ===== */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:max(16px, env(safe-area-inset-top)) 20px 14px;
  background:linear-gradient(to bottom, oklch(0.09 0.028 260 / .92) 60%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.topbar-inner{width:100%;max-width:640px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;}
.topbar-logo{height:30px;width:auto;filter:drop-shadow(0 2px 12px oklch(0.58 0.28 263 / .4));}
.lang-switch{display:flex;gap:3px;background:oklch(0.13 0.032 260 / .8);border:1px solid var(--border);border-radius:10px;padding:3px;}
.lang-btn{
  background:transparent;border:none;color:var(--muted);
  font-family:'Inter',sans-serif;font-size:12px;font-weight:700;letter-spacing:.3px;
  padding:7px 11px;border-radius:7px;cursor:pointer;min-width:32px;
  transition:all .2s ease;
}
.lang-btn.active{background:linear-gradient(135deg, var(--primary), var(--primary-2));color:#fff;}

/* progress: sticky, always horizontal, full width */
.progress-wrap{
  position:sticky;top:60px;z-index:19;
  width:100%;max-width:640px;margin:0 auto;padding:0 20px 14px;
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(to bottom, oklch(0.09 0.028 260 / .85), transparent);
}
.progress-bar{flex:1;height:5px;border-radius:99px;background:oklch(0.96 0.006 240 / .08);overflow:hidden;}
.progress-fill{
  height:100%;width:6%;border-radius:99px;
  background:linear-gradient(90deg, var(--primary), var(--primary-2));
  box-shadow:0 0 10px oklch(0.58 0.28 263 / .6);
  transition:width .35s ease;
}
.progress-label{
  flex:none;font-size:12px;color:var(--muted);
  letter-spacing:.5px;font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ===== screens — column flex, this was the layout bug ===== */
.screen{
  position:relative;z-index:2;
  display:none;
  flex-direction:column;
  align-items:center;
  min-height:calc(100svh - 130px);
  padding:8px 16px 50px;
}
.screen.active{display:flex;}

.intro-card, .step{
  width:100%;max-width:600px;
  background:linear-gradient(160deg, var(--card), var(--card-2));
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 6px);
  padding:32px 28px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 70px oklch(0 0 0 / .4), inset 0 1px 0 oklch(1 0 0 / .05);
  margin-top:14px;
  position:relative;
  overflow:hidden;
}
/* subtle animated sheen sweeping across the card */
.intro-card::before, .step::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, oklch(0.96 0.006 240 / .05) 50%, transparent 60%);
  background-size:200% 200%;
  animation:sheen 8s ease-in-out infinite;
}
@keyframes sheen{ 0%,100%{background-position:200% 0;} 50%{background-position:-40% 0;} }

.eyebrow, .step-num{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--primary-2);font-weight:700;margin-bottom:12px;
}

h1{
  font-family:'Playfair Display', serif;
  font-size:29px;font-weight:700;line-height:1.2;
  margin-bottom:14px;
  background:linear-gradient(180deg, #ffffff, oklch(0.84 0.02 260));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
h2{
  font-size:20px;font-weight:700;line-height:1.35;
  margin-bottom:10px;color:#fff;
  letter-spacing:-.2px;
}

.hello{font-size:16px;font-weight:500;margin-bottom:8px;}
.intro-card p, .step-hint{
  color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:12px;
}
.meta-row{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0;}
.meta-pill{
  background:oklch(0.58 0.28 263 / .12);border:1px solid oklch(0.58 0.28 263 / .3);
  color:var(--primary-2);font-size:12.5px;font-weight:600;
  padding:7px 14px;border-radius:999px;
}

/* trust line */
.trust-line{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12px;color:var(--muted);
}
.trust-line a{color:var(--primary-2);text-decoration:none;font-weight:600;}
.trust-line a:hover{text-decoration:underline;}

.btn-primary{
  margin-top:18px;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:var(--primary-fg);border:none;border-radius:12px;
  padding:15px 26px;font-size:15px;font-weight:700;
  font-family:'Inter',sans-serif;
  cursor:pointer;letter-spacing:.2px;
  box-shadow:0 10px 28px oklch(0.58 0.28 263 / .38);
  transition:transform .15s ease, box-shadow .15s ease;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  -webkit-appearance:none;touch-action:manipulation;
  min-height:50px;position:relative;
}
.btn-primary:active{transform:scale(.98);}
@media (hover:hover){
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px oklch(0.58 0.28 263 / .5);}
  .btn-primary:hover .arrow{transform:translateX(4px);}
}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.btn-primary .arrow{transition:transform .2s ease;}

.btn-ghost{
  background:oklch(0.96 0.006 240 / .04);border:1px solid var(--border);
  color:var(--muted);border-radius:12px;padding:14px 20px;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:600;
  cursor:pointer;transition:all .2s ease;min-height:50px;
  touch-action:manipulation;
}
@media (hover:hover){
  .btn-ghost:hover{color:#fff;border-color:var(--primary-2);}
}

.btn-skip{
  background:transparent;border:none;
  color:var(--muted);font-family:'Inter',sans-serif;
  font-size:13px;font-weight:600;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;
  padding:14px 10px;min-height:50px;flex:none !important;
  touch-action:manipulation;
}
@media (hover:hover){
  .btn-skip:hover{color:var(--primary-2);}
}
@media (max-width:640px){
  .btn-skip{font-size:12.5px;padding:14px 6px;}
}

/* form fields */
input[type=text], input[type=email], input[type=tel], textarea{
  width:100%;background:oklch(0.06 0.02 260 / .5);
  border:1px solid var(--border);
  border-radius:12px;padding:14px 15px;
  color:#fff;font-family:'Inter',sans-serif;font-size:16px;
  margin-bottom:12px;resize:vertical;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
  -webkit-appearance:none;appearance:none;
}
input::placeholder, textarea::placeholder{color:oklch(0.56 0.055 258 / .7);}
input:focus, textarea:focus{
  outline:none;border-color:var(--primary-2);
  background:oklch(0.06 0.02 260 / .8);
  box-shadow:0 0 0 3px oklch(0.58 0.28 263 / .15);
}

.chip-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.chip{position:relative;cursor:pointer;touch-action:manipulation;}
.chip input{position:absolute;opacity:0;width:0;height:0;}
.chip span{
  display:inline-block;padding:10px 16px;border-radius:999px;
  border:1px solid var(--border);color:var(--muted);
  font-size:13px;font-weight:600;transition:all .2s ease;
}
.chip input:checked + span{
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;border-color:transparent;
  box-shadow:0 6px 18px oklch(0.58 0.28 263 / .4);
}

/* upload */
.upload-box{position:relative;margin-bottom:12px;}
.upload-box input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.upload-inner{
  border:2px dashed var(--border);border-radius:14px;
  padding:26px 16px;text-align:center;color:var(--muted);
  font-size:13.5px;display:flex;flex-direction:column;gap:8px;align-items:center;
  transition:border-color .2s ease, background .2s ease;
}
.upload-icon{font-size:24px;}
.upload-inner small{color:oklch(0.56 0.055 258 / .8);font-size:11.5px;}
.upload-box.dragover .upload-inner, .upload-box.has-file .upload-inner{
  border-color:var(--primary-2);background:oklch(0.58 0.28 263 / .08);color:#fff;
}

.step-nav{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:10px;}
.step-nav .btn-primary, .step-nav .btn-ghost{margin-top:0;flex:1;}

.step{display:none;}
.step.active{display:block;animation:fadeUp .35s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.reveal{animation:fadeUp .5s ease;}

.highlight{
  color:var(--primary-2);font-weight:600;font-size:15px;
  border-left:2px solid var(--primary-2);padding-left:14px;margin-top:16px;
}
.signature{margin-top:20px;color:var(--muted);font-style:italic;font-size:13.5px;}

/* success checkmark burst */
.check-burst{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;box-shadow:0 0 40px oklch(0.58 0.28 263 / .5);
  animation:pop .5s cubic-bezier(.34,1.56,.64,1);
}
.check-burst svg{width:30px;height:30px;stroke:#fff;stroke-width:3;fill:none;}
@keyframes pop{ 0%{transform:scale(0);} 70%{transform:scale(1.15);} 100%{transform:scale(1);} }

.site-footer{
  position:relative;z-index:2;text-align:center;
  color:oklch(0.56 0.055 258 / .8);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  padding:20px 16px max(20px, env(safe-area-inset-bottom));
}
.site-footer a{color:var(--primary-2);text-decoration:none;}

/* ===== mobile ===== */
@media (max-width: 640px){
  .topbar{padding:max(12px, env(safe-area-inset-top)) 14px 10px;}
  .topbar-logo{height:24px;}
  .lang-btn{padding:6px 9px;font-size:10.5px;}
  .progress-wrap{top:50px;padding:0 14px 10px;}
  .intro-card, .step{padding:22px 18px;border-radius:16px;margin-top:8px;}
  h1{font-size:22px;}
  h2{font-size:18px;}
  .hello{font-size:15px;}
  .intro-card p, .step-hint{font-size:13.5px;}
  .meta-pill{font-size:11px;padding:6px 12px;}
  .step-nav{flex-wrap:nowrap;}
  .btn-primary, .btn-ghost{font-size:13.5px;padding:14px 14px;}
  .chip span{padding:9px 13px;font-size:12.5px;}
  .screen{padding:4px 12px 40px;}
}
@media (max-width: 380px){
  h1{font-size:20px;} h2{font-size:16.5px;}
  .intro-card, .step{padding:18px 15px;}
}
@media (prefers-reduced-motion: reduce){
  .bg-fx::before, .intro-card::before, .step::before{animation:none;}
}