/* ============================================================
   Rework × Revolut — CLEAN layer (loaded LAST).
   The thing that makes revolut.com feel clean & premium:
   a DARK↔LIGHT rhythm, generous whitespace, calmer accents.
   ============================================================ */

/* ---------- more air everywhere ---------- */
section.block{padding:148px 0;}
.sec-head{margin-bottom:64px;}
.hero-stage{min-height:720px;}

/* refined eyebrow — pill, quieter */
.eyebrow{font-size:12px;letter-spacing:.2em;color:var(--muted);}

/* ============================================================
   LIGHT WORLD — warm off-white sections (Revolut rhythm)
   ============================================================ */
.light{
  background:#F6F3EB;
  color:#14140F;
  --ink:#14140F;
  --soft:#3C3C34;
  --muted:#73736A;
  --faint:#A6A69A;
  --surface:#FFFFFF;
  --surface-2:#FBFAF5;
  --surface-3:#F1EEE4;
  --line:rgba(20,20,12,.09);
  --line-2:rgba(20,20,12,.16);
  /* deep amber→coral so var(--gradient) text stays legible on white */
  --gradient:linear-gradient(100deg,#E8A200 0%,#FF7A1A 55%,#FF5A47 100%);
  position:relative;
}
.light h1,.light h2,.light h3,.light h4{color:var(--ink);}
/* soft seam between dark and light */
.light::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:rgba(255,255,255,.06);}

/* hide noisy mesh inside light; replace with one faint warm wash */
.light .mesh{display:none;}
.light .light-wash{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.light .light-wash::before{content:"";position:absolute;width:60vw;height:60vw;left:50%;top:-30%;
  transform:translateX(-50%);border-radius:50%;filter:blur(80px);
  background:radial-gradient(circle, rgba(254,214,10,.16), transparent 62%);}

/* cards on light get a soft realistic lift instead of glow */
.light .bcard{background:var(--surface);border-color:var(--line);
  box-shadow:0 1px 2px rgba(20,20,12,.04), 0 18px 40px -28px rgba(20,20,12,.22);}
.light .bcard:hover{background:var(--surface);border-color:var(--line-2);
  box-shadow:0 1px 2px rgba(20,20,12,.05), 0 28px 60px -30px rgba(20,20,12,.30);}
.light .bcard .bglow{background:radial-gradient(circle,rgba(232,162,0,.30),transparent 64%);}
.light .bcard .bi{background:rgba(232,162,0,.16);}
/* dark phone reads beautifully on the white card — keep as is */

/* FAQ on light */
.light .faq-q{color:var(--ink);}
.light .faq-item{box-shadow:0 1px 2px rgba(20,20,12,.04), 0 14px 36px -30px rgba(20,20,12,.20);}
.light .faq-q .pm::before,.light .faq-q .pm::after{background:#C98A00;}
.light .faq-a .inner p{color:var(--soft);}

/* eyebrow accent stays yellow but darker for contrast on light */
.light .eyebrow{color:#8A7400;}
.light .eyebrow.accent,.light .accent{color:#C98A00;}

/* ghost button on light */
.light .btn-ghost{background:rgba(20,20,12,.04);color:#14140F;border-color:var(--line-2);}
.light .btn-ghost:hover{background:rgba(20,20,12,.08);border-color:rgba(20,20,12,.28);}

/* ============================================================
   STORIES — testimonial cards on the light world
   ============================================================ */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.story{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 32px 30px;
  box-shadow:0 1px 2px rgba(20,20,12,.04), 0 18px 44px -30px rgba(20,20,12,.22);
  transition:transform .3s var(--ease), box-shadow .3s;}
.story:hover{transform:translateY(-5px);box-shadow:0 1px 2px rgba(20,20,12,.05), 0 30px 64px -32px rgba(20,20,12,.30);}
.story .stars{display:flex;gap:3px;margin-bottom:18px;color:#FFB200;font-size:15px;letter-spacing:2px;}
.story blockquote{margin:0;font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.42;
  letter-spacing:-.02em;color:var(--ink);text-wrap:pretty;}
.story .who{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:26px;}
.story .ava{width:50px;height:50px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--surface-3);box-shadow:0 0 0 1px var(--line) inset;}
.story .ava image-slot{width:100%;height:100%;}
.story .who b{display:block;font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.02em;color:var(--ink);}
.story .who span{display:block;font-size:13.5px;color:var(--muted);margin-top:1px;}
.story .mark{position:absolute;top:24px;right:30px;font-family:var(--font-display);font-weight:800;
  font-size:64px;line-height:1;color:rgba(232,162,0,.16);user-select:none;}
@media(max-width:900px){.stories{grid-template-columns:1fr;max-width:560px;margin:0 auto;}}

/* ============================================================
   HERO — calmer, more confident, more whitespace
   ============================================================ */
.act-copy .kick{background:rgba(255,255,255,.04);border-color:var(--line);}
.act-copy h1{letter-spacing:-.05em;}
.act-copy .sub{color:var(--soft);}

/* refine floating chips — quieter, glassier, less candy */
.chip{background:rgba(18,18,22,.6);border-color:rgba(255,255,255,.1);box-shadow:0 24px 60px -28px rgba(0,0,0,.8);}
.chip .ico{background:rgba(254,214,10,.14);}

/* refine the phone halo to a single clean warm glow */
.phone-halo{background:radial-gradient(circle at 50% 40%, rgba(254,214,10,.34), transparent 66%);filter:blur(56px);}

/* ---------- trust band: quieter, more premium ---------- */
.trust{background:transparent;border-color:var(--line);}
.trust .stat b{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---------- feature cards: cleaner tops ---------- */
.fcard{background:var(--surface);}
.fcard .ftop .mesh-mini::before{filter:blur(10px);opacity:.8;}

/* ---------- section heads: tighter, bigger ---------- */
.sec-head h2{letter-spacing:-.045em;}

/* ---------- responsive air ---------- */
@media(max-width:760px){
  section.block{padding:88px 0;}
  .sec-head{margin-bottom:44px;}
  .hero-stage{min-height:0;}
}