:root{
    --bg-0: #060504;
    --bg-1: #0c0a08;
    --amber-1: #ff8a1e;
    --amber-2: #ffb347;
    --amber-glow: #ff7a00;
    --text-hi: #f5f2ee;
    --text-mid: #c9c2b8;
    --text-lo: #8a8378;
    --line: rgba(255,255,255,0.08);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

  html, body{
    height:100%;
    width:100%;
    background: var(--bg-0);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-hi);
    overflow-x:hidden;
  }

  body{
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    padding: clamp(20px, 6vw, 40px) clamp(16px, 5vw, 24px);
  }

  /* Layered background: glow + grid */
  .bg-glow{
    position:fixed;
    inset:0;
    z-index:0;
    background:
      radial-gradient(ellipse 900px 600px at 50% 0%, rgba(255,122,0,0.35) 0%, rgba(255,122,0,0.12) 35%, transparent 70%),
      radial-gradient(ellipse 1200px 800px at 50% 100%, rgba(255,90,0,0.08) 0%, transparent 60%),
      var(--bg-0);
  }

  .bg-grid{
    position:fixed;
    inset:0;
    z-index:0;
    opacity:0.35;
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 900px 650px at 50% 20%, black 10%, transparent 75%);
    mask-image: radial-gradient(ellipse 900px 650px at 50% 20%, black 10%, transparent 75%);
  }

  .bg-noise{
    position:fixed;
    inset:0;
    z-index:0;
    opacity:0.025;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .orb{
    position:fixed;
    z-index:0;
    border-radius:50%;
    filter: blur(80px);
    pointer-events:none;
  }
  .orb-1{
    width:500px; height:500px;
    top:-200px; left:50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255,140,20,0.45) 0%, transparent 70%);
    animation: pulse-orb 6s ease-in-out infinite;
  }
  @keyframes pulse-orb{
    0%,100%{ opacity:0.7; }
    50%{ opacity:1; }
  }

  .card{
    position:relative;
    z-index:1;
    width:100%;
    max-width:640px;
    margin:0 auto;
    text-align:center;
    animation: rise-in 0.9s cubic-bezier(0.16,1,0.3,1) both;
  }

  @keyframes rise-in{
    from{ opacity:0; transform: translateY(24px); }
    to{ opacity:1; transform: translateY(0); }
  }

  /* Logo */
  .logo{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom: clamp(32px, 7vw, 56px);
    animation: rise-in 0.9s cubic-bezier(0.16,1,0.3,1) both;
    animation-delay: 0.05s;
    max-width:100%;
    padding: 0 6px;
  }
  .logo-mark{
    width: clamp(28px, 6vw, 34px);
    height: clamp(28px, 6vw, 34px);
    border-radius:9px;
    background: linear-gradient(135deg, var(--amber-2), var(--amber-glow));
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 0 24px rgba(255,122,0,0.5), inset 0 1px 1px rgba(255,255,255,0.4);
    flex-shrink:0;
  }
  .logo-mark svg{ width:55%; height:55%; }
  .logo-text{
    font-weight:900;
    font-size: clamp(16px, 4.2vw, 22px);
    letter-spacing:0.01em;
    color:var(--text-hi);
    white-space:nowrap;
  }
  .logo-text .accent{ color: var(--amber-2); }

  /* Success icon */
  .check-wrap{
    width: clamp(60px, 14vw, 76px);
    height: clamp(60px, 14vw, 76px);
    margin: 0 auto clamp(20px, 5vw, 32px);
    border-radius:50%;
    background: radial-gradient(circle, rgba(255,140,20,0.18) 0%, transparent 72%);
    display:flex;
    align-items:center;
    justify-content:center;
    animation: rise-in 0.9s cubic-bezier(0.16,1,0.3,1) both;
    animation-delay: 0.1s;
  }
  .check-circle{
    width: clamp(44px, 10vw, 56px);
    height: clamp(44px, 10vw, 56px);
    border-radius:50%;
    background: linear-gradient(160deg, #1a1512, #0e0b09);
    border: 1px solid rgba(255,150,50,0.35);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 0 30px rgba(255,122,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  .check-circle svg{ width:46%; height:46%; }

  h1{
    font-size: clamp(26px, 8vw, 52px);
    font-weight:900;
    line-height:1.15;
    letter-spacing:-0.02em;
    background: linear-gradient(180deg, #ffffff 0%, #d9d3ca 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    margin-bottom: clamp(16px, 4vw, 24px);
    animation: rise-in 0.9s cubic-bezier(0.16,1,0.3,1) both;
    animation-delay: 0.15s;
    text-wrap: balance;
  }

  .subtext{
    font-size: clamp(14px, 3.6vw, 18px);
    line-height:1.65;
    color: var(--text-mid);
    max-width: 520px;
    margin: 0 auto clamp(28px, 6vw, 44px);
    font-weight:400;
    animation: rise-in 0.9s cubic-bezier(0.16,1,0.3,1) both;
    animation-delay: 0.2s;
    padding: 0 4px;
  }
  .subtext b{
    color: var(--amber-2);
    font-weight:700;
  }

  /* Progress tracker */
  .progress-wrap{
    margin: 0 auto clamp(28px, 6vw, 44px);
    max-width: 480px;
    width:100%;
    animation: rise-in 0.9s cubic-bezier(0.16,1,0.3,1) both;
    animation-delay: 0.25s;
  }

  .progress-track{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
  }

  .progress-line-bg{
    position:absolute;
    top: clamp(14px, 3.4vw, 16px);
    left: clamp(14px, 3.4vw, 16px);
    right: clamp(14px, 3.4vw, 16px);
    height:2px;
    background: var(--line);
    z-index:0;
  }

  .progress-line-fill{
    position:absolute;
    top: clamp(14px, 3.4vw, 16px);
    left: clamp(14px, 3.4vw, 16px);
    height:2px;
    background: linear-gradient(90deg, var(--amber-1), var(--amber-2));
    z-index:1;
    width: 38%;
    box-shadow: 0 0 10px rgba(255,140,20,0.7);
    animation: fillGrow 1.8s cubic-bezier(0.16,1,0.3,1) 0.6s both;
  }
  @keyframes fillGrow{
    from{ width:0%; }
    to{ width:38%; }
  }

  .step{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    flex:1;
    min-width:0;
    padding:0 2px;
  }

  .step-dot{
    width: clamp(26px, 6.4vw, 32px);
    height: clamp(26px, 6.4vw, 32px);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: clamp(11px, 2.6vw, 13px);
    font-weight:700;
    border: 2px solid var(--line);
    background: var(--bg-0);
    color: var(--text-lo);
    transition: all 0.3s ease;
    flex-shrink:0;
  }

  .step.done .step-dot{
    background: linear-gradient(135deg, var(--amber-2), var(--amber-glow));
    border-color: transparent;
    color: #1a0f00;
    box-shadow: 0 0 16px rgba(255,140,20,0.55);
  }
  .step.done .step-dot svg{ width:44%; height:44%; }

  .step.active .step-dot{
    border-color: var(--amber-2);
    color: var(--amber-2);
    background: rgba(255,140,20,0.08);
    box-shadow: 0 0 0 4px rgba(255,140,20,0.12), 0 0 16px rgba(255,140,20,0.35);
    animation: dot-pulse 1.8s ease-in-out infinite;
  }
  @keyframes dot-pulse{
    0%,100%{ box-shadow: 0 0 0 4px rgba(255,140,20,0.12), 0 0 16px rgba(255,140,20,0.35); }
    50%{ box-shadow: 0 0 0 8px rgba(255,140,20,0.06), 0 0 22px rgba(255,140,20,0.5); }
  }

  .step-label{
    font-size: clamp(10px, 2.6vw, 12px);
    font-weight:600;
    color: var(--text-lo);
    letter-spacing:0.01em;
    text-align:center;
    max-width:100%;
    word-break:break-word;
    hyphens:auto;
  }
  .step.done .step-label,
  .step.active .step-label{
    color: var(--text-hi);
  }

  .status-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: clamp(6px, 1.8vw, 7px) clamp(12px, 3.6vw, 16px);
    border-radius:100px;
    background: rgba(255,140,20,0.1);
    border:1px solid rgba(255,140,20,0.25);
    font-size: clamp(11.5px, 3vw, 13px);
    font-weight:600;
    color: var(--amber-2);
    margin-top: 6px;
    max-width:100%;
    text-align:center;
  }
  .status-pill .dot{
    width:7px; height:7px;
    border-radius:50%;
    background: var(--amber-2);
    box-shadow: 0 0 8px var(--amber-2);
    animation: blink 1.4s ease-in-out infinite;
  }
  @keyframes blink{
    0%,100%{ opacity:1; }
    50%{ opacity:0.3; }
  }

  /* Important note */
  .notice{
    display:flex;
    align-items:flex-start;
    gap:12px;
    text-align:left;
    padding: clamp(14px, 3.6vw, 18px) clamp(16px, 4.4vw, 22px);
    border-radius:14px;
    background: linear-gradient(180deg, rgba(255,140,20,0.07), rgba(255,140,20,0.02));
    border: 1px solid rgba(255,140,20,0.2);
    max-width: 520px;
    width:100%;
    margin: 0 auto;
    animation: rise-in 0.9s cubic-bezier(0.16,1,0.3,1) both;
    animation-delay: 0.3s;
  }
  .notice svg{
    width:20px; height:20px;
    flex-shrink:0;
    margin-top:2px;
    color: var(--amber-2);
  }
  .notice p{
    font-size: clamp(12.5px, 3.2vw, 14px);
    line-height:1.6;
    color: var(--text-mid);
    font-style:italic;
  }
  .notice b{ color: var(--text-hi); font-style:normal; font-weight:600; }

  .footer-note{
    margin-top: clamp(28px, 6vw, 40px);
    font-size: clamp(11px, 2.8vw, 12.5px);
    color: var(--text-lo);
    letter-spacing:0.02em;
    padding:0 8px;
    animation: rise-in 0.9s cubic-bezier(0.16,1,0.3,1) both;
    animation-delay: 0.35s;
  }

  /* ===== Responsive breakpoints ===== */

  /* Tablets */
  @media (max-width: 768px){
    .orb-1{ width:400px; height:400px; }
  }

  /* Large phones */
  @media (max-width: 480px){
    body{ align-items:flex-start; padding-top: 32px; }
    .logo{ margin-bottom:36px; }
    .step-label{ letter-spacing:0; }
    .notice{ border-radius:12px; }
    .orb-1{ width:320px; height:320px; top:-140px; filter: blur(60px); }
  }

  /* Small phones */
  @media (max-width: 360px){
    .logo-text{ font-size:15px; }
    .logo-mark{ width:26px; height:26px; }
    .step-dot{ width:24px; height:24px; font-size:10px; }
    .status-pill{ white-space:normal; }
  }

  /* Short viewports / landscape phones */
  @media (max-height: 620px) and (orientation: landscape){
    body{ align-items:flex-start; padding-top:20px; padding-bottom:20px; }
    .logo{ margin-bottom:20px; }
    .check-wrap{ margin-bottom:14px; width:52px; height:52px; }
    .check-circle{ width:40px; height:40px; }
    h1{ font-size: clamp(22px, 5vw, 34px); margin-bottom:12px; }
    .subtext{ margin-bottom:20px; }
    .progress-wrap{ margin-bottom:20px; }
    .footer-note{ margin-top:20px; }
  }

  /* Large desktop */
  @media (min-width: 1440px){
    .card{ max-width:700px; }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  }
/* Wrapper adaptation (page rendered inside a React root div) */
.flowapi-page{
  min-height:100vh;
  min-height:100dvh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding: clamp(20px, 6vw, 40px) clamp(16px, 5vw, 24px);
  background: var(--bg-0);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-hi);
  overflow-x:hidden;
}
@media (max-width: 480px){
  .flowapi-page{ align-items:flex-start; padding-top:32px; }
}
@media (max-height: 620px) and (orientation: landscape){
  .flowapi-page{ align-items:flex-start; padding-top:20px; padding-bottom:20px; }
}