/* =====================================================================
   VODIWA LANDING PAGE
   ---------------------------------------------------------------------
   This file is organized in three layers:
   1) Base styles and design tokens
   2) Layout and components
   3) Mobile interaction polish and state styles

   The CSS is intentionally sectioned so future developers can jump
   straight to the part they need without reading the entire file.
===================================================================== */

/* =====================================================================
   RESET
   ---------------------------------------------------------------------
   Basic reset to make rendering consistent across browsers.
===================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:'Roboto',sans-serif;
  background:#0c0e11;
  color:#eaeaea;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
button,input,select{font-family:inherit}
a{color:inherit;text-decoration:none}

/* =====================================================================
   DESIGN TOKENS
   ---------------------------------------------------------------------
   These variables control the visual system of the page.
   Update them here instead of editing dozens of individual rules.
===================================================================== */
:root{
  --bg:#0c0e11;
  --card:#111419;
  --card-2:#13171d;
  --accent:#f5c33a;
  --accent-08:rgba(245,195,58,.08);
  --accent-15:rgba(245,195,58,.15);
  --accent-30:rgba(245,195,58,.30);
  --accent-50:rgba(245,195,58,.50);
  --text-1:#eaeaea;
  --text-2:#8f96a3;
  --text-3:#c4cbd6;
  --border:rgba(255,255,255,.06);
  --border-md:rgba(255,255,255,.11);
  --border-hi:rgba(255,255,255,.18);
  --danger:#f26060;
  --success:#4ade80;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:24px;
  --font-d:'Roboto',sans-serif;
  --font-b:'Roboto',sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* =====================================================================
   LAYOUT HELPERS
   ---------------------------------------------------------------------
   Utility classes used throughout the page.
===================================================================== */
.wrap{
  width:100%;max-width:1280px;
  margin:0 auto;
  padding:0 20px;
}
@media(min-width:640px){.wrap{padding:0 32px}}
@media(min-width:1024px){.wrap{padding:0 56px}}

/* Screen-reader-only content. Visible to assistive tech, hidden visually. */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* =====================================================================
   NAVBAR
   ---------------------------------------------------------------------
   Sticky top navigation with logo and beta badge.
===================================================================== */
.navbar{
  position:sticky;top:0;z-index:80;
  background:rgba(12,14,17,.94);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.navbar-inner{
  display:flex;align-items:center;
  justify-content:space-between;
  height:64px;
}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{
  width:34px;height:34px;
  background:var(--accent);border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-weight:800;font-size:17px;
  color:#0c0e11;flex-shrink:0;
}
.logo-name{
  font-family:var(--font-d);font-weight:700;
  font-size:21px;color:var(--accent);letter-spacing:-.4px;
}
.nav-right{display:flex;align-items:center;gap:10px}
.chip-beta{
  background:var(--accent-08);
  border:1px solid var(--accent-30);
  color:var(--accent);
  font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 10px;border-radius:20px;
}
.nav-join{
  display:none;
  background:var(--accent);color:#0c0e11;
  border:none;border-radius:var(--r-sm);
  padding:8px 16px;font-weight:600;font-size:13px;
  cursor:pointer;transition:opacity .15s,transform .12s;
}
.nav-join:hover{opacity:.88;transform:translateY(-1px)}
@media(min-width:560px){.nav-join{display:block}}

/* =====================================================================
   HERO
   ---------------------------------------------------------------------
   Desktop uses a two-column layout.
   Mobile stacks the content vertically for easier scrolling.
===================================================================== */
.hero{display:block}
@media(min-width:1024px){
  .hero{
    display:grid;
    grid-template-columns:1fr 440px;
    min-height:calc(100vh - 64px);
    align-items:start;
  }
}

/* Left column content on desktop, top content on mobile */
.hero-copy{padding:48px 20px 36px}
@media(min-width:640px){.hero-copy{padding:52px 32px 40px}}
@media(min-width:1024px){
  .hero-copy{
    padding:64px 56px 64px 56px;
    position:sticky;top:64px;
    max-height:calc(100vh - 64px);
    overflow-y:auto;
  }
}

.eyebrow-row{
  display:flex;flex-wrap:wrap;gap:7px;margin-bottom:28px;
}
.eyebrow-chip{
  display:flex;align-items:center;gap:6px;
  background:var(--card);border:1px solid var(--border-md);
  border-radius:20px;padding:5px 12px 5px 8px;
  font-size:11.5px;font-weight:500;color:var(--text-3);
}
.chip-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);flex-shrink:0;
}

.hero-h1{
  font-family:var(--font-d);font-weight:800;
  font-size:clamp(50px,7vw,62px);
  line-height:1.04;letter-spacing:-2px;
  color:var(--text-1);margin-bottom:18px;
}
.hero-h1 em{font-style:normal;color:var(--accent)}

.hero-p{
  font-size:clamp(18px,1.5vw,20px);
  line-height:1.72;color:var(--text-2);
  max-width:500px;margin-bottom:32px;
}

/* We render two versions of the hero copy and swap them on mobile */
.mobile-text{display:none}
@media (max-width: 639px){
  .desktop-text{display:none}
  .mobile-text{display:block}
}

/* Mobile CTA in the hero. Hidden on wider screens to keep desktop cleaner. */
.hero-cta{display:none}
@media (max-width: 639px){
  .hero-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin:20px 0 28px;
    background:var(--accent);
    color:#0c0e11;
    border:none;
    border-radius:var(--r-sm);
    padding:16px 20px;
    font-weight:700;
    font-size:16px;
    cursor:pointer;
    transition:opacity .15s, transform .1s;
    box-shadow:0 0 0 1px var(--accent-08), 0 4px 14px rgba(245,195,58,.25);
    transform:scale(1.02);
  }
  .hero-cta:active{transform:scale(0.97);opacity:.9}
}

/* Callout block used to preview the product value proposition */
.callout{
  position:relative;overflow:hidden;
  background:rgba(12,16,25,.7);
  border:1px solid var(--accent-30);
  border-radius:var(--r-md);
  padding:20px 22px;margin-bottom:36px;
}
.callout::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-50),transparent);
}
.callout-tag{
  font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px;
}
.callout-text{font-size:17px;line-height:1.65;color:var(--text-3)}
.callout-text em{color:var(--accent);}

/* Stats row below the callout */
.stats{display:flex;flex-wrap:wrap;gap:40px}
.stat-item{display:flex;flex-direction:column;gap:2px}
.stat-n{
  font-family:var(--font-d);font-weight:800;
  font-size:30px;color:var(--text-1);letter-spacing:-.5px;
}
.stat-l{font-size:15px;color:var(--text-2)}

/* =====================================================================
   BETA RELEASE DASHBOARD ANNOUNCEMENTS
   ===================================================================== */
.beta-top-announcement {
  background: linear-gradient(90deg, #F6C234 0%, #dca315 100%);
  color: #0c0e11;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 100;
}

.inline-gate-link {
  color: #0c0e11;
  text-decoration: underline;
  font-weight: 800;
  transition: opacity 0.2s;
}
.inline-gate-link:hover {
  opacity: 0.8;
}

.hero-beta-status-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(246, 194, 52, 0.2);
  border-radius: 12px;
  padding: 24px;
  margin: 24px auto;
  max-width: 480px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.pulse-indicator-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #1dc99a;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(29, 201, 154, 0.7);
  animation: pulseGlow 1.8s infinite;
}

@keyframes pulseGlow {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(29, 201, 154, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(29, 201, 154, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(29, 201, 154, 0); }
}

.pulse-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #1dc99a;
}

.beta-status-text {
  font-size: 14px;
  line-height: 1.5;
  color: #eaeaea;
  margin-bottom: 20px;
}

.launch-app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #F6C234;
  color: #0c0e11;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.2px;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.launch-app-btn:hover {
  background: #fff3d6;
  transform: translateY(-2px);
}

/* =====================================================================
   FORM COLUMN
   ---------------------------------------------------------------------
   The signup form lives in a sticky panel on desktop.
===================================================================== */
.form-col{
  border-top:1px solid var(--border);
  background:var(--card);
}
@media(min-width:1024px){
  .form-col{
    border-top:none;border-left:1px solid var(--border);
    position:sticky;top:64px;
    min-height:calc(100vh - 64px);
    overflow-y:auto;
  }
}

/* The form uses a sliding track so Step 1 and Step 2 can move horizontally */
.steps-shell{overflow:hidden;position:relative}
.steps-track{
  display:flex;
  transition:transform .45s var(--ease);
}
.step-pane{
  flex:0 0 100%;
  padding:36px 20px 48px;
}
@media(min-width:640px){.step-pane{padding:40px 32px 52px}}
@media(min-width:1024px){.step-pane{padding:48px 40px 56px 44px}}

/* Step header */
.step-head{margin-bottom:28px}
.step-num{
  font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:8px;
}
.step-title{
  font-family:var(--font-d);font-weight:700;
  font-size:21px;letter-spacing:-.3px;
  color:var(--text-1);margin-bottom:5px;
}
.step-sub{font-size:13px;color:var(--text-2);line-height:1.55}

/* Progress bar at the top of the form */
.progress-bar{
  height:3px;background:var(--border-md);
  border-radius:2px;margin-bottom:32px;overflow:hidden;
}
.progress-fill{
  height:100%;background:var(--accent);
  border-radius:2px;
  transition:width .4s var(--ease);
}

/* =====================================================================
   FORM FIELDS
   ---------------------------------------------------------------------
   Includes text inputs, select dropdowns, and helper text.
===================================================================== */
.field-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:12px;margin-bottom:16px;
}
.field-row.full{grid-template-columns:1fr}
.field-group{display:flex;flex-direction:column;gap:5px}

.f-label{
  font-size:14px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-2);
}
.f-hint{
  font-size:14.5px;color:var(--text-2);
  margin-top:-2px;margin-bottom:4px;
  font-style:italic;
}
.f-input,.f-select{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-md);
  border-radius:var(--r-sm);
  padding:11px 13px;
  color:var(--text-1);font-size:14px;
  outline:none;width:100%;
  transition:border-color .15s,box-shadow .15s;
  -webkit-appearance:none;appearance:none;
}
.f-input::placeholder,.f-select::placeholder{color:var(--text-2);opacity:.55}
.f-input:focus,.f-select:focus{
  border-color:var(--accent-30);
  box-shadow:0 0 0 3px var(--accent-08);
}
.f-input.error{border-color:var(--danger)}

.hidden{display:none}

/* Select wrapper gives us a custom chevron without a separate icon asset */
.select-wrap{position:relative}
.select-wrap::after{
  content:'';
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  width:0;height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid var(--text-2);
  pointer-events:none;
}
.f-select{padding-right:36px;cursor:pointer}
.f-select option{background:#1a1e26;color:var(--text-1)}

/* =====================================================================
   PILL SELECT COMPONENTS
   ---------------------------------------------------------------------
   These are the clickable answer chips used for the onboarding questions.
===================================================================== */
.pill-question{margin-bottom:20px}

/* Mobile-only step-by-step reveal.
   Only one question is shown at a time to reduce cognitive load. */
@media (max-width: 768px) {
  .pill-question {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: all .3s ease;
  }
  .pill-question.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }
}

.pill-q-label{
  font-size:14px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-2);
  margin-bottom:5px;
  display:block;
}
.pill-q-hint{
  font-size:14.5px;color:var(--text-2);
  margin-bottom:10px;font-style:italic;
}
.pill-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.pill-opt{
  cursor:pointer;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-md);
  border-radius:var(--r-xl);
  padding:12px 18px;
  min-height:44px;
  display:flex;
  align-items:center;
  font-size:14px;
  font-weight:500;
  color:var(--text-3);
  transition:all .15s var(--ease);
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  outline:none;
  white-space:nowrap;
}
.pill-opt:focus,
.pill-opt:active{
  outline:none;
  box-shadow:none;
}
.pill-opt:active{transform:scale(0.97)}
.pill-opt:hover{
  background:rgba(255,255,255,.07);
  border-color:var(--border-hi);
  color:var(--text-1);
}
.pill-opt.selected{
  background:var(--accent-15);
  border:2px solid var(--accent);
  color:var(--accent);
  font-weight:600;
  box-shadow:0 0 0 1px var(--accent-50), 0 4px 14px rgba(245,195,58,.25);
  transform:scale(1.02);
}
.pill-opt.selected::before{
  content:'✓';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-right:6px;
  font-size:11px;
  font-weight:700;
  color:#0c0e11;
  background:var(--accent);
  border-radius:50%;
}

.q-error{
  font-size:11px;
  color:var(--danger);
  margin-top:6px;
  display:none;
}
.q-error.show{display:block}

/* =====================================================================
   EXCITEMENT RATING
   ---------------------------------------------------------------------
   A custom slider-like control for engagement and prioritization.
===================================================================== */
.rating-block{margin-bottom:24px}
.rating-top{
  display:flex;justify-content:space-between;
  align-items:baseline;margin-bottom:12px;
}
.rating-n{
  font-family:var(--font-d);font-weight:800;
  font-size:28px;color:var(--accent);line-height:1;
  margin-bottom:20px;
}
.rating-hint{font-size:11.5px;color:var(--text-2);font-style:italic}
.bars{
  display:flex;gap:4px;align-items:flex-end;
  height:40px;cursor:pointer;margin-bottom:7px;
}
.bar{
  flex:1;border-radius:3px 3px 2px 2px;
  background:rgba(255,255,255,.07);
  transition:background .12s,transform .1s var(--ease-spring);
}
.bar:hover{transform:scaleY(1.1)}
.bar.on{background:var(--accent)}
.bar-ticks{
  display:flex;justify-content:space-between;
  font-size:9.5px;color:var(--text-2);padding:0 1px;
}
.rating-mood{
  font-size:12px;color:var(--text-2);
  font-style:italic;margin-top:6px;min-height:16px;
}

/* =====================================================================
   SUBMIT BUTTONS
   ---------------------------------------------------------------------
   Shared button styles for Step 1 and Step 2 CTAs.
===================================================================== */
.submit-wrap{margin-top:8px}
.btn-submit{
  width:100%;
  background:var(--accent);color:#0c0e11;
  border:none;border-radius:var(--r-sm);
  padding:14px 20px;
  font-family:var(--font-d);font-weight:700;font-size:15px;
  letter-spacing:-.2px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition: opacity .2s ease, transform .15s ease, filter .2s ease;
  margin-bottom:10px;
}
.btn-submit:hover{opacity:.9;transform:translateY(-1px)}
.btn-submit:active{transform:translateY(0);opacity:.85}
.btn-submit:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow: none;
  filter: grayscale(20%);
}

.form-micro{
  text-align:center;font-size:11.5px;
  color:var(--text-2);line-height:1.55;
}
.form-micro strong{color:var(--text-3);font-weight:600}

/* =====================================================================
   STEP 2 / POST-SIGNUP SCREEN
   ---------------------------------------------------------------------
   This appears after the first form section is completed.
===================================================================== */
#step2{
  display:flex;flex-direction:column;
  align-items:center;text-align:center;
  padding:60px 20px 64px;
  min-height:360px;
}
@media(min-width:640px){#step2{padding:64px 32px 72px}}
@media(min-width:1024px){#step2{padding:72px 44px 80px 44px}}

.s2-badge{
  width:68px;height:68px;border-radius:50%;
  background:var(--accent-08);
  border:2px solid var(--accent-30);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 24px;
  animation:popIn .5s var(--ease-spring) both;
}
@keyframes popIn{
  from{transform:scale(.6);opacity:0}
  to{transform:scale(1);opacity:1}
}
.s2-tag{
  display:inline-block;
  background:var(--accent-08);border:1px solid var(--accent-30);
  color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 12px;border-radius:20px;
  margin-bottom:16px;
}
.s2-title{
  font-family:var(--font-d);font-weight:800;
  font-size:clamp(20px,4vw,26px);
  color:var(--text-1);letter-spacing:-.5px;
  margin-bottom:14px;
  animation:fadeUp .4s .15s var(--ease) both;
}
.s2-body{
  font-size:14px;line-height:1.7;
  color:var(--text-2);max-width:320px;
  margin:0 auto 32px;
  animation:fadeUp .4s .2s var(--ease) both;
}
.s2-body strong{color:var(--text-3);font-weight:600}
@keyframes fadeUp{
  from{transform:translateY(10px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

/* Small entrance motion for the second step on mobile */
@media (max-width: 768px) {
  #step2 { animation: stepReveal .5s ease; }
  @keyframes stepReveal {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

.s2-steps{
  display:flex;flex-direction:column;gap:10px;
  width:100%;max-width:300px;
  margin:0 auto 32px;
  animation:fadeUp .4s .25s var(--ease) both;
}
.s2-step-row{
  display:flex;align-items:center;gap:12px;
  text-align:left;
}
.s2-step-dot{
  width:28px;height:28px;border-radius:50%;
  background:var(--accent-15);border:1px solid var(--accent-30);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  font-size:11px;font-weight:700;color:var(--accent);
}
.s2-step-text{font-size:13px;color:var(--text-3)}

.btn-continue{
  display:flex;align-items:center;gap:9px;
  background:var(--accent);color:#0c0e11;
  border:none;border-radius:var(--r-sm);
  padding:14px 28px;
  font-family:var(--font-d);font-weight:700;font-size:17px;
  cursor:pointer;
  transition:opacity .15s,transform .1s;
  text-decoration:none;
  animation:fadeUp .4s .3s var(--ease) both;
}
.btn-continue:hover{opacity:.9;transform:translateY(-1px)}
.btn-continue:active{transform:translateY(0);opacity:.85}
.btn-continue:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* Animated glow and shimmer on mobile only.
   This is a subtle conversion cue, not a hard flash. */
@media (max-width: 768px) {
  .btn-continue {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 rgba(245,195,58,0);
  }
  .btn-continue::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(245,195,58,0.45), transparent 70%);
    opacity: 0;
    animation: glowPulse 2.2s infinite;
    pointer-events: none;
  }
  @keyframes glowPulse {
    0% { opacity: 0; transform: scale(0.95); }
    50% { opacity: 0.6; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.1); }
  }
  .btn-continue::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    animation: shimmer 3.5s infinite;
  }
  @keyframes shimmer {
    0% { left: -60%; }
    100% { left: 120%; }
  }
  .btn-continue:active { transform: scale(0.97); }
}

.s2-reassure{
  font-size:11.5px;color:var(--text-2);
  margin-top:14px;
  animation:fadeUp .4s .35s var(--ease) both;
}

/* =====================================================================
   FEATURES SECTION
===================================================================== */

.features{
  padding:40px 0 48px;
  border-top:1px solid var(--border);
}

.features .wrap{
  max-width:1100px;
  padding:0 20px;
  margin:0 auto;
}

.s-eyebrow{
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:20px;
}

/* GRID */
.feat-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

@media(min-width:640px){
  .feat-grid{
    grid-template-columns:repeat(4,1fr);
  }
}

/* =====================================================================
   FEATURE CARD
===================================================================== */

.feat-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;

  transition:
    transform .25s var(--ease),
    box-shadow .25s,
    border-color .2s;
}

/* =====================================================================
   STAGGERED HOVER EFFECT
   Each card gets a slightly different transition delay
===================================================================== */

/* Base transition (already exists, but we refine it) */
.feat-card{
  transition:
    transform .35s var(--ease),
    box-shadow .35s var(--ease),
    border-color .25s,
    opacity .25s;
}

/* Stagger delays */
.feat-card:nth-child(1){ transition-delay: 0ms; }
.feat-card:nth-child(2){ transition-delay: 40ms; }
.feat-card:nth-child(3){ transition-delay: 80ms; }
.feat-card:nth-child(4){ transition-delay: 120ms; }
.feat-card:nth-child(5){ transition-delay: 160ms; }

/* Optional: soften non-hovered cards slightly */
.feat-grid:hover .feat-card{
  opacity:0.85;
  transform:translateY(-2px) scale(0.99);
}

/* Bring hovered card forward */
.feat-grid .feat-card:hover{
  opacity:1;
  transform:translateY(-8px) scale(1.01);
  z-index:2;
}

/* Hover effect */
.feat-card:hover{
  transform:translateY(-6px);
  border-color:var(--accent-30);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Subtle glow */
.feat-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,var(--accent-08),transparent);
  opacity:0;
  transition:opacity .25s;
}

.feat-card:hover::before{
  opacity:1;
}

/* PRIMARY FEATURE */
@media(min-width:640px){
  .feat-card--primary{
    grid-column:span 2;
  }
}

/* =====================================================================
   ICON
===================================================================== */

.feat-icon-wrap{
  width:44px;
  height:44px;
  border-radius:10px;
  background:var(--accent-08);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:4px;
}

/* =====================================================================
   TAG (TOP RIGHT FLOATING)
===================================================================== */

.feat-tag{
  position:absolute;
  top:14px;
  right:14px;

  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--accent);
  opacity:.85;
}

/* =====================================================================
   TEXT
===================================================================== */

.feat-name{
  font-size:16px;
  font-weight:700;
  line-height:1.25;
  color:var(--text-1);
}

.feat-desc{
  font-size:13.5px;
  color:var(--text-2);
  line-height:1.55;
}

/* =========================================================
   MOBILE TAP RIPPLE EFFECT
   ========================================================= */

.feat-card{
  position:relative;
  overflow:hidden; /* required for ripple containment */
}

/* ripple element */
.feat-card .ripple{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  background:rgba(255,255,255,0.18);
  animation:ripple-animation .6s ease-out;
  pointer-events:none;
}

/* animation */
@keyframes ripple-animation{
  to{
    transform:scale(4);
    opacity:0;
  }
}

/* =====================================================================
   MOBILE VS DESKTOP CONTENT SWITCH
===================================================================== */

.mobile-desc,
.mobile-name{
  display:none;
}

.desktop-desc,
.desktop-name{
  display:block;
}

/* =====================================================================
   MOBILE TWEAKS
===================================================================== */

@media (max-width:768px){

  .feat-tag{
    top:12px;
    right:12px;
    font-size:8.5px;
  }

  .feat-card{
    padding:18px;
    gap:14px;
  }

  .feat-name{
    font-size:15.5px;
  }

  .feat-desc{
    font-size:14px;
    line-height:1.6;
  }

  .desktop-desc,
  .desktop-name{
    display:none;
  }

  .mobile-desc,
  .mobile-name{
    display:block;
  }
}

/* =====================================================================
   DESKTOP ENHANCEMENT
===================================================================== */

@media (min-width:1024px){

  .feat-card{
    padding:26px;
    padding-top:32px; /* space for tag */
    min-height:220px;
  }

  .feat-tag{
    top:16px;
    right:18px;
    font-size:9px;
    opacity:.75;
  }

  #primary-tag-name{
    font-size:24px;
  }
  .feat-name{
    font-size:21px;
    letter-spacing:-.3px;
  }

  .feat-desc{
    font-size:15px;
    line-height:1.75;
    max-width:34ch;
  }
}


/* Proof section: a small trust cue placed near the bottom */
.proof{
  padding:40px 0 60px;
}

.proof-inner{
  position:relative;
  background:var(--card-2);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--r-md);
  padding:28px 24px;
  overflow:hidden;
  max-width:900px;
  margin:0 auto;
}

/* glow animation */
.proof-inner::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:radial-gradient(circle, var(--accent-30), transparent 70%);
  opacity:0;
  animation:proofPulse 3s infinite;
}

@keyframes proofPulse{
  0%{opacity:0; transform:scale(.95)}
  50%{opacity:.4; transform:scale(1.05)}
  100%{opacity:0; transform:scale(1.1)}
}

/* CONTENT */
.proof-content{
  position:relative;
  z-index:1;
  text-align:center;
}

/* TITLE */
.proof-title{
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
}

/* DEMO */
.proof-demo{
  font-size:26px;
  font-weight:800;
  letter-spacing:2px;
  color:var(--text-1);
  margin-bottom:12px;
}

.proof-demo span{
  color:var(--text-2);
  margin:0 6px;
}

/* DESC */
.proof-desc{
  font-size:14px;
  color:var(--text-2);
  line-height:1.6;
  margin-bottom:20px;
}

/* CTA */
.proof-cta{
  background:var(--accent);
  color:#0c0e11;
  border:none;
  border-radius:var(--r-sm);
  padding:12px 18px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:transform .15s, opacity .15s;
}

.proof-cta:hover{
  transform:translateY(-2px);
  opacity:.9;
}
/* =====================================================================
   FOOTER
===================================================================== */
.site-footer{border-top:1px solid var(--border);padding:20px 0}
.footer-inner{
  display:flex;flex-direction:column;gap:6px;
  align-items:center;text-align:center;
}
@media(min-width:560px){.footer-inner{flex-direction:row;justify-content:space-between;text-align:left}}
.f-copy{font-size:11.5px;color:var(--text-2)}

/* =====================================================================
   DIVIDERS AND UTILITIES
===================================================================== */
.field-divider{height:1px;background:var(--border);margin:20px 0}
.divider-label{
  display:flex;align-items:center;gap:10px;
  font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2);
  margin-bottom:20px;
}
.divider-label::before,.divider-label::after{content:'';flex:1;height:1px;background:var(--border)}

/* Visible focus styles for keyboard users */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* Desktop typography is slightly smaller so the layout breathes more */
@media(min-width:1024px){
  .hero-h1{font-size:clamp(34px,4.8vw,56px)}
  .hero-p{font-size:15px}
  .step-title{font-size:20px}
  .step-sub{font-size:13px}
  .feat-name{font-size:13px}
  .feat-desc{font-size:12px}
  .rating-n{font-size:26px}
}

/* Misc helpers */
.required-mark{color:var(--accent)}
.field-row-spacing{margin-bottom:16px}
.field-row-spacing-sm{margin-bottom:4px}
.nationality-label-note{font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-2)}
.excitement-label{align-self:center}
.progress-fill-inline{width:0%}