/* ============================================================================
   Home redesign (index-12 reference) — PRESENTATION ONLY.
   Loaded AFTER style.css / site.css. Scoped under body.redesign to win
   specificity over existing rules without !important spam.
   No content/markup/logic changes — only visual material (tokens, glass,
   shadows, typography, background layers, preloader).
   ============================================================================ */

:root{
  --rd-ink:#0b1220; --rd-ink-soft:#243149; --rd-muted:#5d6987; --rd-muted-2:#8b94ac;
  --rd-line:rgba(22,46,98,.10); --rd-line-2:rgba(22,46,98,.07);
  --rd-brand:#2563eb; --rd-brand-d:#1b46c2; --rd-brand-l:#3b82f6; --rd-sky:#60a5fa;
  --rd-shadow-sm:0 1px 2px rgba(16,40,90,.05);
  --rd-shadow:0 14px 34px -16px rgba(20,45,110,.30);
  --rd-shadow-lg:0 34px 70px -30px rgba(20,45,110,.42);
  --rd-shadow-blue:0 22px 48px -18px rgba(37,99,235,.45);
  --rd-r-lg:26px; --rd-r:18px; --rd-r-sm:13px;
  --rd-fd:'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --rd-fb:'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---- base canvas ---- */
body.redesign{
  font-family:var(--rd-fb); color:var(--rd-ink);
  background:
    radial-gradient(900px 520px at 88% -6%, rgba(96,165,250,.28), transparent 60%),
    radial-gradient(820px 480px at 4% -2%, rgba(99,102,241,.18), transparent 58%),
    linear-gradient(180deg,#dde8fb 0%,#e8f0fd 32%,#dfe9fb 100%);
  background-attachment:fixed; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* old decorative glows replaced by the new .bg composition */
body.redesign .page-glow{display:none}

/* ---- background composition (decorative, mounted once, below content) ---- */
/* perf: no mix-blend-mode (it forces a repaint/blend of the fixed layer as content
   scrolls under it); plain low-opacity noise reads the same at .04 */
body.redesign .grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* perf: isolate the whole background into its own compositor layer so parallax
   transforms don't repaint page content (contain:paint + GPU promotion) */
body.redesign .bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:layout paint style;transform:translateZ(0)}
body.redesign .bg .layer{position:absolute;left:-6%;right:-6%;top:-12%;height:124%;will-change:transform;backface-visibility:hidden;contain:paint}
/* perf: NO runtime filter:blur on this parallax-moved layer (re-blur every frame is
   expensive); the radial-gradient stops are already soft, so it looks the same */
body.redesign .bg .l-blobs{background:
  radial-gradient(680px 540px at 8% 14%, rgba(99,102,241,.24), transparent 60%),
  radial-gradient(760px 600px at 92% 18%, rgba(34,211,238,.22), transparent 60%),
  radial-gradient(820px 660px at 46% 64%, rgba(37,99,235,.18), transparent 62%),
  radial-gradient(620px 520px at 86% 94%, rgba(56,189,248,.16), transparent 60%)}
body.redesign .bg .l-net{opacity:.92}
body.redesign .bg .l-arcs{opacity:.95}
body.redesign .bg .l-front{opacity:.9}
body.redesign .bg .layer svg{width:100%;height:100%;display:block}
/* perf: drop backdrop-filter on the glassy cards (set by style.css). They already
   use near-opaque gradients, so the runtime blur of whatever scrolls behind is
   barely visible but costs a paint each frame while on screen. Scope: these cards only. */
body.redesign .search-card,
body.redesign .promo-card,
body.redesign .destination-card,
body.redesign .step-card,
body.redesign .how-it-works,
body.redesign .hero-stat{backdrop-filter:none;-webkit-backdrop-filter:none}

/* keep real content above the background */
body.redesign .topbar,
body.redesign main,
body.redesign [data-site-footer],
body.redesign .site-footer{position:relative;z-index:1}

/* glossy material helper used by several cards */
body.redesign .topbar,
body.redesign .search-card,
body.redesign .promo-card,
body.redesign .step-card,
body.redesign .destination-card,
body.redesign .hero-stat,
body.redesign .how-it-works{ -webkit-font-smoothing:antialiased }

/* ============================ HEADER ============================ */
/* perf: sticky header WITHOUT backdrop-filter (it re-blurs the region behind on
   every scroll frame — a top cause of jank). Use a near-opaque bg + light shadow;
   visually almost identical because the bg behind is soft pastel anyway. */
body.redesign .topbar{border-bottom:1px solid var(--rd-line);
  background:rgba(244,248,255,.94);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 1px 0 rgba(20,45,110,.04)}
body.redesign .topbar__inner{height:70px;gap:32px}
body.redesign .brand{font-family:var(--rd-fd);font-weight:800;letter-spacing:-.02em;gap:11px}
body.redesign .brand__mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:19px;color:#fff;
  background:linear-gradient(150deg,#4c8bf6,#1d4ed8 55%,#1a358f);
  box-shadow:0 10px 24px -8px rgba(37,99,235,.6),inset 0 1px 0 rgba(255,255,255,.5);position:relative;overflow:hidden}
body.redesign .brand__mark::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 30% 18%,rgba(255,255,255,.6),transparent 70%)}
body.redesign .brand-main{color:var(--rd-ink);font-weight:800}
body.redesign .brand-dot{color:var(--rd-brand);font-weight:800}
/* nav = single row of plain links (index-12), NOT the project's pill-group.
   Neutralize style.css container pill + per-link pill + dark active capsule.
   Scope is strictly .main-nav / .main-nav__link — nothing else in .topbar. */
body.redesign .main-nav{display:flex;flex-wrap:nowrap;align-items:center;gap:26px;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body.redesign .main-nav__link{white-space:nowrap;min-height:auto;padding:0;border-radius:0;background:none;box-shadow:none;transform:none;color:#36425c;font-weight:500;font-size:15px;position:relative;transition:color .2s}
body.redesign .main-nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:-22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--rd-brand),var(--rd-sky));transition:right .28s}
body.redesign .main-nav__link:hover{background:none;box-shadow:none;transform:none;color:var(--rd-brand)}
body.redesign .main-nav__link.active{background:none;box-shadow:none;color:var(--rd-brand);font-weight:600}
body.redesign .main-nav__link:hover::after,
body.redesign .main-nav__link.active::after{right:0}
body.redesign .ghost-btn{padding:10px 20px;border-radius:999px;font-weight:700;font-size:14.5px;color:var(--rd-ink);
  background:linear-gradient(180deg,#ffffff,#edf2fc);border:1px solid rgba(120,150,210,.34);
  box-shadow:0 3px 8px -3px rgba(20,45,110,.22),inset 0 1px 0 rgba(255,255,255,.95);transition:transform .2s,box-shadow .2s}
body.redesign .ghost-btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px -14px rgba(37,99,235,.5),inset 0 1px 0 rgba(255,255,255,.95)}

/* ============================ HERO ============================ */
body.redesign .hero{position:relative;padding:30px 0 22px}
body.redesign .hero-layout{grid-template-columns:1fr 320px;gap:26px;align-items:start;margin-bottom:0}
body.redesign .hero-copy .badge{display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 13px;border-radius:999px;
  font-weight:700;font-size:13.5px;letter-spacing:.01em;color:var(--rd-brand);
  background:linear-gradient(180deg,#ffffff,#e7f0ff);border:1px solid rgba(96,150,255,.55);
  box-shadow:0 6px 16px -6px rgba(37,99,235,.35),inset 0 1px 0 rgba(255,255,255,.95)}
/* badge leading icon = sparkle (index-12), not a round dot */
body.redesign .hero-copy .badge>span:first-child{width:15px;height:15px;border-radius:0;box-shadow:none;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M12%203l1.7%204.3L18%209l-4.3%201.7L12%2015l-1.7-4.3L6%209l4.3-1.7L12%203Z%27%20fill%3D%27%232563eb%27%2F%3E%3Ccircle%20cx%3D%2718.5%27%20cy%3D%275.5%27%20r%3D%271.5%27%20fill%3D%27%232563eb%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
/* whole H1 in a single Manrope 800 face (set on h1 AND both spans directly so it
   does not rely on inheritance and beats style.css span rules); the gradient stays
   only on the colored sub-line and does not change the font/weight. */
body.redesign .hero h1,
body.redesign .hero-title-main,
body.redesign .hero-title-sub{font-family:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;font-weight:800;letter-spacing:-.035em}
body.redesign .hero h1{line-height:.99;font-size:clamp(38px,4.6vw,64px);margin:16px 0 0;color:var(--rd-ink)}
body.redesign .hero-title-main{display:block}
body.redesign .hero-title-sub{display:block;background:linear-gradient(98deg,#0b1220 0%,#1d4ed8 60%,#3b82f6 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.redesign .hero-copy p{margin:14px 0 0;font-size:18px;color:var(--rd-muted);font-weight:500;max-width:560px}
body.redesign .hero-copy p strong{color:var(--rd-brand);font-weight:700}

/* aside stat card */
body.redesign .hero-stat{position:relative;min-height:0;padding:22px 24px;border-radius:22px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(224,237,255,.86));border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--rd-shadow-blue),inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(120,160,255,.14)}
body.redesign .hero-stat::before{content:"";position:absolute;top:-46px;right:-40px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.55),transparent 70%);filter:blur(4px)}
body.redesign .hero-stat>span{font-size:13.5px;color:var(--rd-muted);font-weight:600;position:relative}
body.redesign .hero-stat>strong{display:block;font-family:var(--rd-fd);font-weight:800;letter-spacing:-.03em;font-size:46px;line-height:1;margin:6px 0 10px;position:relative;
  background:linear-gradient(120deg,#1d4ed8,#38bdf8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.redesign .hero-stat>p{font-size:14.5px;color:#36425c;font-weight:600;position:relative;margin:0;white-space:nowrap}

/* trip toggle */
body.redesign .trip-tabs{display:inline-flex;gap:5px;padding:6px;border-radius:16px;margin-top:22px;margin-bottom:0;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(238,244,255,.72));border:1px solid rgba(120,150,210,.3);
  box-shadow:0 6px 16px -8px rgba(20,45,110,.25),inset 0 1px 0 rgba(255,255,255,.9);position:relative;z-index:1}
body.redesign .trip-tabs__item{border:0;cursor:pointer;font-family:var(--rd-fb);font-weight:700;font-size:15px;padding:11px 26px;border-radius:11px;color:#3a465f;background:transparent;transition:all .2s}
body.redesign .trip-tabs__item:hover:not(.active){background:rgba(232,240,255,.7);color:var(--rd-brand)}
body.redesign .trip-tabs__item.active{color:#fff;background:linear-gradient(160deg,#26324f,#0b1220 72%);
  box-shadow:0 14px 28px -12px rgba(11,18,32,.9),0 6px 16px -10px rgba(37,99,235,.4),inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.06)}

/* ============================ SEARCH BAR ============================ */
body.redesign .search-card{margin-top:14px;padding:9px;border-radius:22px;position:relative;z-index:1;
  background:linear-gradient(180deg,#ffffff,#f6f9ff);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 30px 64px -28px rgba(20,45,110,.5),0 1px 0 rgba(255,255,255,.9) inset}
body.redesign .search-grid{display:flex;align-items:stretch;flex-wrap:wrap;gap:0}
/* each field looks like a glass .grp; label above value (column) */
body.redesign .search-field{display:flex;flex-direction:column;justify-content:center;gap:2px;flex:1 1 0;min-width:0;
  padding:12px 16px;border-radius:14px;cursor:text;transition:background .2s;background:transparent;border:0;margin:0}
body.redesign .search-field:hover{background:rgba(235,242,255,.6)}
body.redesign .search-field--city{flex:1.25 1 0}
body.redesign .search-field>span{font-size:11.5px;color:var(--rd-muted-2);font-weight:600;letter-spacing:.02em;text-transform:uppercase}
body.redesign .search-field input{border:0;background:transparent;padding:0;margin-top:2px;font-family:var(--rd-fb);font-size:15.5px;color:var(--rd-ink);font-weight:600;width:100%;min-width:0}
body.redesign .search-field input::placeholder{color:#b0b8cb;font-weight:500}
body.redesign .search-field input:focus{outline:none}
/* visible focus on the field wrapper for a11y */
body.redesign .search-field:focus-within{background:rgba(235,242,255,.7);box-shadow:0 0 0 2px rgba(37,99,235,.28)}
body.redesign .swap-btn{align-self:center;width:38px;height:38px;flex:none;margin:0 -10px;z-index:2;border-radius:11px;
  border:1px solid rgba(120,150,210,.4);background:linear-gradient(180deg,#ffffff,#eef3fc);color:var(--rd-brand);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 4px 10px -4px rgba(20,45,110,.3),inset 0 1px 0 rgba(255,255,255,.95);transition:transform .25s,box-shadow .2s}
body.redesign .swap-btn:hover{transform:rotate(180deg);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
/* passenger trigger styled as a field/group */
body.redesign .passenger-field{display:flex;flex-direction:column;justify-content:center;gap:2px;flex:1.15 1 0;min-width:0;text-align:left;
  padding:12px 16px;border-radius:14px;border:0;background:transparent;cursor:pointer;transition:background .2s}
body.redesign .passenger-field:hover{background:rgba(235,242,255,.6)}
body.redesign .passenger-field>span{font-size:11.5px;color:var(--rd-muted-2);font-weight:600;letter-spacing:.02em;text-transform:uppercase}
body.redesign .passenger-field>strong{font-size:15.5px;color:var(--rd-ink);font-weight:600;margin-top:2px}
/* glossy find button (layered gloss, no infinite animation) */
body.redesign .search-btn{position:relative;border:0;cursor:pointer;border-radius:15px;color:#fff;font-family:var(--rd-fd);font-weight:800;font-size:17px;letter-spacing:-.01em;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 48%),linear-gradient(180deg,#5a9bff 0%,#2f74ee 46%,#1a47bd 100%);
  box-shadow:0 18px 38px -14px rgba(37,99,235,.65),0 2px 6px -2px rgba(16,40,90,.45),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 6px rgba(8,28,80,.32);
  transition:transform .2s,box-shadow .2s}
body.redesign .search-btn--desktop{flex:none;align-self:stretch;margin-left:6px;padding:0 34px}
body.redesign .search-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.22);pointer-events:none}
body.redesign .search-btn:hover{transform:translateY(-1px);box-shadow:0 26px 52px -16px rgba(37,99,235,.72),0 2px 6px -2px rgba(16,40,90,.45),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 6px rgba(8,28,80,.32)}
body.redesign .search-btn:active{transform:translateY(0)}

/* options / checkboxes */
body.redesign .search-options{display:flex;gap:24px;margin-top:14px;padding-left:6px}
body.redesign .search-options .checkbox{display:flex;align-items:center;gap:9px;color:#46506b;font-weight:600;font-size:14.5px;cursor:pointer}

/* passenger popover material */
body.redesign .passenger-popover{border-radius:var(--rd-r);border:1px solid rgba(120,150,210,.3);
  background:linear-gradient(180deg,#ffffff,#f6f9ff);box-shadow:var(--rd-shadow-lg)}
body.redesign .class-chip{border-radius:999px;border:1px solid rgba(120,150,210,.3);background:linear-gradient(180deg,#ffffff,#eef3fc);color:#46506b;font-weight:600;transition:all .2s}
body.redesign .class-chip.active{color:#fff;background:linear-gradient(160deg,#3b82f6,#1d4ed8);border-color:transparent}
body.redesign .passenger-done{border-radius:12px;color:#fff;background:linear-gradient(160deg,#3b82f6,#1d4ed8);border:0;font-weight:700}

/* trust row chips */
body.redesign .trust-row>div{border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(244,248,255,.64));border:1px solid rgba(120,150,210,.26);box-shadow:0 4px 12px -6px rgba(20,45,110,.18),inset 0 1px 0 rgba(255,255,255,.85)}
body.redesign .trust-row i{color:var(--rd-brand)}

/* ============================ PROMO (trio) ============================ */
body.redesign .promo-grid{grid-template-columns:1.35fr 1fr 1fr;gap:16px;margin-top:20px}
body.redesign .promo-card{position:relative;min-height:0;border-radius:22px;padding:26px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.7));border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--rd-shadow);transition:transform .25s,box-shadow .25s}
body.redesign .promo-card:hover{transform:translateY(-4px);box-shadow:var(--rd-shadow-lg)}
body.redesign .promo-card .eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--rd-muted-2)}
body.redesign .promo-card h2,
body.redesign .promo-card h3{font-family:var(--rd-fd);font-weight:800;letter-spacing:-.02em;font-size:23px;margin:12px 0 0;color:var(--rd-ink)}
body.redesign .promo-card p{margin:11px 0 0;color:var(--rd-muted);font-size:15px;line-height:1.5}
body.redesign .promo-card__icon,
body.redesign .promo-visual{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:20px;
  background:linear-gradient(155deg,#f4f8ff,#dbe7ff);color:var(--rd-brand);border:1px solid rgba(120,160,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 10px -4px rgba(37,99,235,.25)}
body.redesign .promo-card--blue{color:#fff;border:1px solid rgba(255,255,255,.2);background:linear-gradient(155deg,#3b82f6 0%,#2563eb 52%,#1538a8 100%)}
body.redesign .promo-card--blue .eyebrow{color:rgba(255,255,255,.8)}
body.redesign .promo-card--blue h2{color:#fff;font-size:26px}
body.redesign .promo-card--blue p{color:rgba(255,255,255,.92)}
body.redesign .promo-card--blue .promo-visual{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.32)}

/* ============================ SECTION TITLES ============================ */
body.redesign .section-head h2,
body.redesign .how-it-works .section-head h2{font-family:var(--rd-fd);font-weight:800;letter-spacing:-.03em;font-size:clamp(28px,3.2vw,40px);color:var(--rd-ink);display:flex;align-items:center;gap:14px}
body.redesign .section-head h2::before,
body.redesign .how-it-works .section-head h2::before{content:"";width:7px;height:30px;border-radius:4px;background:linear-gradient(180deg,#4c8bf6,#1d4ed8);box-shadow:0 8px 16px -5px rgba(37,99,235,.7)}

/* ============================ HOW / STEPS ============================ */
body.redesign .how-it-works{padding:34px 38px;border-radius:var(--rd-r-lg);overflow:hidden;position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.66));border:1px solid rgba(255,255,255,.7);box-shadow:var(--rd-shadow-lg)}
body.redesign .how-it-works::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(620px 240px at 82% -10%,rgba(96,165,250,.16),transparent 60%)}
body.redesign .steps-grid{position:relative;z-index:1;gap:18px}
body.redesign .step-card{position:relative;border-radius:20px;padding:24px;background:linear-gradient(180deg,#ffffff,#f6f9ff);border:1px solid rgba(255,255,255,.85);box-shadow:var(--rd-shadow);transition:transform .25s,box-shadow .25s}
body.redesign .step-card:hover{transform:translateY(-4px);box-shadow:var(--rd-shadow-lg)}
body.redesign .step-card>span{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-family:var(--rd-fd);font-weight:800;font-size:21px;color:#fff;
  background:linear-gradient(160deg,#26324f,#0b1220 72%);box-shadow:0 14px 28px -14px rgba(11,18,32,.9),0 6px 16px -10px rgba(37,99,235,.4),inset 0 1px 0 rgba(255,255,255,.18)}
body.redesign .step-card i{color:var(--rd-brand)}
body.redesign .step-card strong{font-family:var(--rd-fd);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--rd-ink)}
body.redesign .step-card p{color:var(--rd-muted);font-size:14.5px;line-height:1.5}

/* ============================ POPULAR / DEST ============================ */
body.redesign .destination-grid{gap:16px}
body.redesign .destination-card{position:relative;border-radius:22px;padding:24px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.72));border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--rd-shadow);transition:transform .25s,box-shadow .25s;text-decoration:none}
body.redesign .destination-card::after{content:"";position:absolute;right:-30px;top:-26px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.16),transparent 70%);pointer-events:none}
body.redesign .destination-card:hover{transform:translateY(-5px);box-shadow:var(--rd-shadow-lg)}
body.redesign .destination-card .route{font-family:var(--rd-fd);font-weight:700;font-size:17px;color:var(--rd-ink)}
body.redesign .destination-card strong{display:block;font-family:var(--rd-fd);font-weight:800;letter-spacing:-.02em;font-size:28px;margin:10px 0 0;
  background:linear-gradient(120deg,#1d4ed8,#3b82f6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.redesign .destination-card small{display:block;margin:12px 0 0;color:var(--rd-muted);font-size:14px}
body.redesign .destination-card em{display:inline-flex;align-items:center;gap:5px;margin-top:14px;color:var(--rd-brand);font-weight:700;font-size:14.5px;font-style:normal}
body.redesign .destination-card__mark{position:absolute;top:20px;right:20px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(155deg,#f4f8ff,#dbe7ff);color:var(--rd-brand);border:1px solid rgba(120,160,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 3px 8px -3px rgba(37,99,235,.22);transition:transform .3s}
body.redesign .destination-card:hover .destination-card__mark{transform:translate(3px,-3px) rotate(8deg)}

/* ============================ FOOTER ============================ */
body.redesign .site-footer{border-top:0;background:transparent}
body.redesign .site-footer>.container{border-radius:var(--rd-r-lg);padding:40px 40px 30px;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(238,245,255,.72));border:1px solid rgba(255,255,255,.7);box-shadow:var(--rd-shadow)}
body.redesign .site-footer__col h2{font-family:var(--rd-fd);font-weight:800;font-size:15.5px;color:var(--rd-ink)}
body.redesign .site-footer__link{color:#5d6987;font-weight:500;font-size:14.5px;transition:color .2s,transform .2s}
body.redesign .site-footer__link:hover{color:var(--rd-brand);transform:translateX(3px)}
body.redesign .site-footer__bottom{border-top:1px solid var(--rd-line)}

/* ============================ FOCUS (a11y) ============================ */
body.redesign a:focus-visible,
body.redesign button:focus-visible,
body.redesign input:focus-visible{outline:2px solid var(--rd-brand);outline-offset:2px;border-radius:6px}

/* ============================ GEOMETRY / VERTICAL RHYTHM ============================ */
/* numbers transferred 1:1 from index-12.html (.wrap / section paddings / section-title);
   higher specificity than the project's @media + later rules so they win at all widths. */
body.redesign .container{box-sizing:border-box;width:100%;max-width:1200px;padding-left:28px;padding-right:28px;margin-left:auto;margin-right:auto}
body.redesign .content-section{padding:30px 0 0}
body.redesign .how-it-works{margin-bottom:28px}
body.redesign .section-head,
body.redesign .section-head--compact{margin-bottom:22px}
body.redesign .trust-row{margin-top:18px}
body.redesign .site-footer{padding:30px 0 40px}

/* ============================ PRELOADER ============================ */
#preloader{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .4s ease;
  background:
    radial-gradient(760px 520px at 50% 34%, rgba(214,231,255,.97), transparent 62%),
    radial-gradient(640px 600px at 84% 92%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(600px 560px at 12% 88%, rgba(99,102,241,.13), transparent 62%),
    linear-gradient(180deg,#eef3fe 0%,#e3ebf8 100%)}
#preloader.active{opacity:1;visibility:visible}
.pl-inner{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:580px;width:100%}
.pl-brand{display:flex;align-items:center;gap:10px;font-family:var(--rd-fd);font-weight:800;font-size:18px;letter-spacing:-.02em;opacity:.92;margin-bottom:6px}
.pl-brand .logo{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(150deg,#4c8bf6,#1d4ed8 55%,#1a358f);box-shadow:0 8px 20px -8px rgba(37,99,235,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.pl-brand .logo svg{width:18px;height:18px;color:#fff}
.pl-brand b{color:var(--rd-ink)}.pl-brand i{color:var(--rd-brand);font-style:normal}
.pl-core{position:relative;width:340px;height:340px;max-width:80vw;max-height:80vw;margin:6px 0 2px}
.pl-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pl-title{font-family:var(--rd-fd);font-weight:800;letter-spacing:-.025em;font-size:clamp(22px,3.6vw,30px);color:var(--rd-ink);margin:14px 0 0}
.pl-status{font-size:17px;font-weight:600;color:#46506b;margin-top:12px;min-height:26px;display:flex;align-items:center;justify-content:center}
.pl-caret{display:inline-block;width:2px;height:18px;background:var(--rd-brand);margin-left:3px;border-radius:2px;animation:plcaret 1s steps(1) infinite}
.pl-meta{margin-top:14px;font-size:14px;color:#8b94ac;font-weight:600}
.pl-meta b{color:var(--rd-brand);font-variant-numeric:tabular-nums}
.pl-prog{margin-top:18px;width:min(440px,78vw);height:6px;border-radius:999px;background:rgba(20,45,110,.1);overflow:hidden;position:relative}
.pl-prog i{position:absolute;left:0;top:0;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#2563eb,#22d3ee);box-shadow:0 0 12px rgba(59,130,246,.5)}
.pl-prog::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-100%);animation:plshim 1.9s ease-in-out infinite}
.pl-cancel{margin-top:22px;background:none;border:0;cursor:pointer;color:#8b94ac;font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.pl-cancel:hover{color:var(--rd-brand)}
/* cancel-confirmation dialog — child layer of #preloader, core/network keep animating
   behind a plain rgba scrim (NO backdrop-filter/blur). */
.pl-confirm{position:absolute;inset:0;z-index:10;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(10,18,40,.28);opacity:0;transition:opacity .15s ease}
.pl-confirm.is-open{opacity:1}
.pl-confirm__card{width:min(420px,88vw);background:#fff;border-radius:18px;padding:28px;text-align:center;box-shadow:0 30px 80px -20px rgba(11,18,32,.45),0 4px 14px -6px rgba(11,18,32,.25);transform:scale(.96);transition:transform .15s ease}
.pl-confirm.is-open .pl-confirm__card{transform:none}
.pl-confirm__title{font-family:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:800;font-size:22px;line-height:1.2;color:#0b1220;margin:0 0 10px}
.pl-confirm__text{font-size:15px;line-height:1.5;color:#5b6b8c;margin:0 0 22px}
.pl-confirm__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.pl-confirm__yes,.pl-confirm__no{cursor:pointer;border-radius:12px;padding:12px 22px;font:inherit;font-weight:700;font-size:15px;transition:background .15s ease}
.pl-confirm__yes{border:0;color:#fff;background:#2563eb}
.pl-confirm__yes:hover{background:#1d4ed8}
.pl-confirm__no{border:1px solid rgba(37,99,235,.3);color:#2563eb;background:transparent}
.pl-confirm__no:hover{background:rgba(37,99,235,.06)}
@media(max-width:560px){.pl-confirm__card{padding:22px}.pl-confirm__actions{flex-direction:column}.pl-confirm__yes,.pl-confirm__no{width:100%}}
@keyframes plcaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes plshim{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
/* PERF: while preloader is open hide heavy blurred background layers */
body.pl-open .bg,body.pl-open .grain{display:none!important}

/* ============================ RESPONSIVE ============================ */
@media(max-width:1080px){
  body.redesign .search-grid{flex-wrap:wrap}
  body.redesign .search-field,body.redesign .passenger-field{flex:1 1 44%}
  body.redesign .search-btn--desktop{flex:1 1 100%;margin-left:0;padding:15px}
  body.redesign .swap-btn{margin:0}
  /* geometry collapse (index-12 @1080): aside stacks, trio/steps single column, dest 2-up */
  body.redesign .hero-layout{grid-template-columns:1fr}
  body.redesign .promo-grid{grid-template-columns:1fr}
  body.redesign .steps-grid{grid-template-columns:1fr}
  body.redesign .destination-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  body.redesign .bg .l-front{display:none}
  body.redesign .bg .l-net{opacity:.85}
}
@media(max-width:560px){
  body.redesign .search-field,body.redesign .passenger-field{flex:1 1 100%}
  body.redesign .search-options{flex-direction:column;gap:11px}
  body.redesign .how-it-works{padding:24px 18px}
  body.redesign .destination-grid{grid-template-columns:1fr}
  body.redesign .hero-stat>p{white-space:normal}
  .pl-status{font-size:15.5px}.pl-title{font-size:22px}
}
@media(max-width:400px){
  body.redesign .hero h1{font-size:clamp(30px,9vw,40px)}
  body.redesign .site-footer>.container{padding:26px 18px 22px}
}
@media (prefers-reduced-motion:reduce){
  /* preloader is intentionally always-full-motion: do NOT disable its caret/shimmer here.
     Only the background parallax respects reduced motion. */
  body.redesign .bg .layer{transition:none!important}
}

/* ============================================================================
   Added decor (parity pass): step illustrations + connector arrows + dash.
   1:1 SVG from index-12.html, injected via CSS (no markup/content changes).
   ============================================================================ */
body.redesign .steps-grid::before,body.redesign .steps-grid::after{content:"";position:absolute;top:30px;width:30px;height:30px;border-radius:50%;transform:translateX(-50%);z-index:3;background:#fff url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M9%206l6%206-6%206%27%20stroke%3D%27%232563eb%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/15px 15px no-repeat;border:1px solid var(--rd-line);box-shadow:var(--rd-shadow-sm);pointer-events:none}
body.redesign .steps-grid::before{left:33.33%}
body.redesign .steps-grid::after{left:66.66%}
body.redesign .destination-card strong::after{content:"";display:block;width:100%;height:1px;margin:16px 0 0;-webkit-text-fill-color:initial;background-clip:border-box;background:repeating-linear-gradient(90deg,rgba(22,46,98,.18) 0 5px,transparent 5px 10px)}
@media(max-width:1080px){body.redesign .steps-grid::before,body.redesign .steps-grid::after{display:none}}

/* step illustrations: real .step-illu panels injected by home-redesign.js; styling
   mirrors index-12.html .step-illu (panel + inline svg). The .step-card is a CSS
   grid (auto 1fr), so the panel must span the full row, not sit in a narrow cell:
   grid-column:1/-1 (grid) + flex:1 0 100% (inert under grid, covers a flex card). */
body.redesign .step-card{flex-wrap:wrap}
body.redesign .step-card .step-illu{grid-column:1/-1;flex:1 0 100%;width:100%;max-width:100%;box-sizing:border-box;
  margin-top:18px;border-radius:15px;padding:12px;background:linear-gradient(180deg,#f4f8ff,#eef4ff);border:1px solid rgba(22,46,98,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
body.redesign .step-card .step-illu svg{display:block;width:100%;height:auto}

/* ============================ COLOR PARITY (index-12.html) ============================ */
/* Higher specificity (0,3,1) + last in file so they unambiguously beat style.css
   (.promo-card__icon / .hero-title-sub are only 0,1,0). Values are 1:1 from the reference. */
/* (1) Light premium chip on the NON-primary promo cards (Гибкие даты / Прозрачность).
       primary-card chip (.promo-card--blue .promo-visual) keeps its semi-white look. */
body.redesign .promo-card .promo-card__icon{background:linear-gradient(155deg,#f4f8ff,#dbe7ff);border:1px solid rgba(120,160,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 10px -4px rgba(37,99,235,.25);color:#2563eb}
/* ensure the glyph/icon itself is the saturated brand blue (text glyph or svg) */
body.redesign .promo-card .promo-card__icon,
body.redesign .promo-card .promo-card__icon svg{color:#2563eb;fill:#2563eb;opacity:1}
/* (2) H1 second line: saturated dark->blue gradient clipped to text (transparent fill ONLY here). */
body.redesign .hero .hero-title-sub{background:linear-gradient(98deg,#0b1220 0%,#1d4ed8 60%,#3b82f6 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* first line stays solid #0b1220 (not transparent), font/weight unchanged */
body.redesign .hero .hero-title-main{color:#0b1220;-webkit-text-fill-color:#0b1220}