/* ════════════════════════════════════════════════════════════════
   white-lands.com — v5.83 "Vivid Aurora Glass" — a CARDINALLY different
   direction: a living, colorful gradient-mesh canvas (not near-black)
   with frosted-glass floating panels, oversized hero, bold gradients.
   Loaded instead of redesign.css, scoped to body.wl-redesign.
   ════════════════════════════════════════════════════════════════ */

:root{
  --v-indigo:#2B1466;
  --v-violet:#7C3AED;
  --v-magenta:#E0218A;
  --v-coral:#FF4D5E;
  --v-orange:#FF8A5C;
  --v-cyan:#22D3EE;
  --v-teal:#2DD4BF;
  --glass:rgba(15,12,30,.55);
  --glass-bright:rgba(255,255,255,.08);
  --hair:rgba(255,255,255,.12);
}

/* ─── 1. Vivid living gradient-mesh canvas ─── */
body.wl-redesign{position:relative;background:#0c0820;color:#F4F2FF}
body.wl-redesign::before{
  content:"";position:fixed;inset:-25vmax;z-index:-2;pointer-events:none;
  background:
    radial-gradient(46vmax 46vmax at 12% 6%,  color-mix(in oklab,var(--v-coral) 62%,transparent), transparent 55%),
    radial-gradient(50vmax 50vmax at 92% 2%,  color-mix(in oklab,var(--v-violet) 66%,transparent), transparent 56%),
    radial-gradient(52vmax 52vmax at 86% 80%, color-mix(in oklab,var(--v-cyan) 50%,transparent), transparent 58%),
    radial-gradient(44vmax 44vmax at 4% 90%,  color-mix(in oklab,var(--v-magenta) 58%,transparent), transparent 55%),
    radial-gradient(40vmax 40vmax at 50% 48%, color-mix(in oklab,var(--v-indigo) 70%,transparent), transparent 60%),
    linear-gradient(160deg,#160a33 0%, #0c0820 55%, #07101f 100%);
  background-size:200% 200%, 200% 200%, 200% 200%, 200% 200%, 180% 180%, 100% 100%;
  filter:saturate(1.25);
  animation:wl2-mesh 30s ease-in-out infinite alternate;
}
body.wl-redesign::after{ /* grain + soft top light */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(130vmax 90vmax at 50% -5%, #000 30%, transparent 80%);
          mask-image:radial-gradient(130vmax 90vmax at 50% -5%, #000 30%, transparent 80%);
}
@keyframes wl2-mesh{
  0%  {background-position:0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%, 0 0}
  100%{background-position:30% 20%, 70% 10%, 60% 80%, 20% 70%, 55% 45%, 0 0}
}

/* sections transparent; content panels provide readable glass */
body.wl-redesign section{position:relative;background:transparent;isolation:isolate}

/* ─── 2. Header: vivid glass ─── */
body.wl-redesign .site-header{
  background:rgba(12,8,32,.5);backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--hair);transition:background .3s,box-shadow .3s}
body.wl-redesign.is-scrolled .site-header{
  background:rgba(12,8,32,.72);box-shadow:0 10px 40px -16px rgba(0,0,0,.7)}
body.wl-redesign .brand__mark{
  background:linear-gradient(135deg,var(--v-coral),var(--v-violet));color:#fff;
  box-shadow:0 0 20px -2px color-mix(in oklab,var(--v-violet) 70%,transparent)}
body.wl-redesign .site-nav a{position:relative;color:#E7E3FF;opacity:.82}
body.wl-redesign .site-nav a:hover{opacity:1}
body.wl-redesign .site-nav a::after{
  content:"";position:absolute;left:0;bottom:-5px;height:2px;width:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--v-coral),var(--v-cyan));transform:scaleX(0);transform-origin:left;transition:transform .25s}
body.wl-redesign .site-nav a:hover::after{transform:scaleX(1)}

/* ─── 3. Bold gradient buttons ─── */
body.wl-redesign .btn-primary{
  background:linear-gradient(120deg,var(--v-coral),var(--v-magenta) 55%,var(--v-violet));
  border:none;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 14px 40px -10px color-mix(in oklab,var(--v-magenta) 80%,transparent)}
body.wl-redesign .btn-primary::after{
  content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg)}
body.wl-redesign .btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 52px -10px color-mix(in oklab,var(--v-magenta) 92%,transparent)}
body.wl-redesign .btn-primary:hover::after{animation:wl2-sheen .85s ease}
@keyframes wl2-sheen{from{left:-120%}to{left:140%}}
body.wl-redesign .btn-secondary{
  background:rgba(255,255,255,.06);border:1px solid var(--hair);color:#F4F2FF;backdrop-filter:blur(8px)}
body.wl-redesign .btn-secondary:hover{border-color:color-mix(in oklab,var(--v-cyan) 60%,transparent);color:#fff;transform:translateY(-1px)}

/* ─── 4. HERO — oversized + glass ─── */
body.wl-redesign .hero-arb{padding:clamp(20px,3vw,44px) 0 clamp(20px,3vw,44px)}
body.wl-redesign .hero-arb::after{display:none} /* drop old dotted grid */
body.wl-redesign .hero-arb__eyebrow{
  background:rgba(255,255,255,.07);border:1px solid var(--hair);border-radius:999px;
  color:#EDEAFF;backdrop-filter:blur(8px);font-weight:600}
body.wl-redesign .hero-arb__eyebrow .dot{background:var(--v-cyan);box-shadow:0 0 14px 3px var(--v-cyan)}
body.wl-redesign .hero-arb h1{
  font-size:clamp(2.8rem,6vw,4.8rem);line-height:1.02;letter-spacing:-.035em;font-weight:850;color:#fff}
body.wl-redesign .hero-arb h1 em{
  font-style:normal;
  background:linear-gradient(110deg,var(--v-coral),var(--v-orange) 30%,var(--v-magenta) 60%,var(--v-cyan));
  background-size:230% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 34px color-mix(in oklab,var(--v-magenta) 55%,transparent));
  animation:wl2-shine 8s linear infinite}
@keyframes wl2-shine{to{background-position:230% center}}
body.wl-redesign .hero-arb__lead{color:#CFC9F0;font-size:1.18rem}
body.wl-redesign .hero-arb__stats{border-top:1px solid var(--hair)}
body.wl-redesign .hero-arb__stat strong{
  font-size:2rem;background:linear-gradient(120deg,#fff,var(--v-cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* v5.93 — number is a short token (word moved to the label), so keep it on a
     single line and use tabular figures → the count-up can't re-wrap or shift
     width (fixes the "мов" label jumping between lines / flicker). */
  display:block;white-space:nowrap;font-variant-numeric:tabular-nums}
body.wl-redesign .hero-arb__stat span{color:#B9B2E0}

/* ── HERO VISUAL: auto-scrolling slider of real land examples ──
   Desktop → VERTICAL (right of hero). Mobile → HORIZONTAL (below copy). */
/* align hero columns to the TOP so the slider starts high (no empty gap above) */
body.wl-redesign .hero-arb__grid{align-items:start}
/* No box / no background — the wheel floats directly on the hero and cards
   run off the edge (hard clip, no fade mask). */
/* hero section clips horizontally at the SCREEN edge so wheel cards run off-screen */
body.wl-redesign .hero-arb{overflow:clip}  /* clip BOTH axes → wheel cards fill the whole hero (top/bottom incl.) and run off the sides, but never escape into the header or next section */
body.wl-redesign .hero-vs{
  position:relative;aspect-ratio:auto;width:100%;max-width:520px;justify-self:stretch;
  height:clamp(580px,70vw,760px);margin-top:-4px;
  overflow:visible;background:transparent;perspective:1200px;
  /* no clipping — cards float freely off every edge (top, bottom, right);
     the front card is positioned to clear the copy on the left */
  clip-path:none;}
/* v5.90 — soft BLUR+fade strips at the very top & bottom so edge cards shrink
   into a blurry dissolve (no hard straight cut). Sit above the cards but below
   the chip. Extend a bit past the box to also catch the section padding. */
body.wl-redesign .hero-vs::before,
body.wl-redesign .hero-vs::after{
  content:"";position:absolute;left:-50px;right:-50px;height:76px;z-index:6;pointer-events:none;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
body.wl-redesign .hero-vs::before{top:-46px;
  background:linear-gradient(180deg,rgba(9,7,20,.96),rgba(9,7,20,0));
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
/* v5.93 — taller bottom dissolve that reaches UP into the wheel so the bottom
   (entering) land-cards fade to the dark page bg right at the hero floor — no
   light/grey card block left sitting beside the stats row. */
/* v5.87 — push the bottom dissolve LOWER + make the solid-dark zone deeper so an
   entering land-card emerges ALREADY inside the dark (no clear gap below the fade
   where a fully-lit card pops in before darkening). */
body.wl-redesign .hero-vs::after{bottom:-72px;height:240px;
  background:linear-gradient(0deg,rgba(9,7,20,1) 46%,rgba(9,7,20,0));
  -webkit-mask-image:linear-gradient(0deg,#000 80%,transparent);mask-image:linear-gradient(0deg,#000 80%,transparent)}
/* default (mobile fallback) = flex row/col; desktop wheel overrides below */
body.wl-redesign .hero-vs__track{
  display:flex;flex-direction:column;gap:22px;will-change:transform}
body.wl-redesign .hero-vs__card{
  flex:0 0 auto;width:clamp(290px,92%,360px);margin:0 auto;
  border-radius:16px;overflow:hidden;position:relative;
  border:1px solid rgba(255,255,255,.2);background:rgba(20,16,40,.65);
  box-shadow:0 38px 80px -28px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.18);
  transform-origin:center center}
body.wl-redesign .hero-vs__card img{display:block;width:100%;height:auto}
/* ── DESKTOP WHEEL: cards absolutely placed on a circle by JS ── */
body.wl-redesign .hero-vs__track--wheel{
  display:block;position:absolute;inset:0;transform-style:preserve-3d;
  /* soft fade top & bottom so extreme cards dissolve into the hero instead of
     being hard-cut by the sticky header (top) or hero edge (bottom).
     repeat-x keeps the RIGHT run-off un-clipped (cards still leave the screen);
     applied to the track only → the "live" chip (sibling) stays fully visible */
  /* v5.87 — bottom fade ON THE TRACK ITSELF (z-index-independent, unlike the
     ::after overlay which renders BEHIND the high-z entering cards). Entering
     land-cards now dissolve into the dark right at the hero floor instead of
     popping in fully-lit below the fade. Vertical only → side run-off intact. */
  -webkit-mask-image:linear-gradient(to top,transparent 2%,#000 17%);
          mask-image:linear-gradient(to top,transparent 2%,#000 17%)}
body.wl-redesign .hero-vs__track--wheel .hero-vs__card{
  position:absolute;top:0;left:0;margin:0;width:clamp(244px,66%,310px);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  will-change:transform,opacity}
body.wl-redesign .hero-vs__bar{
  display:flex;gap:6px;align-items:center;padding:8px 11px;
  background:rgba(12,9,26,.92);border-bottom:1px solid rgba(255,255,255,.08)}
body.wl-redesign .hero-vs__bar i{width:8px;height:8px;border-radius:50%;background:#ff5f57;display:block}
body.wl-redesign .hero-vs__bar i:nth-child(2){background:#febc2e}
body.wl-redesign .hero-vs__bar i:nth-child(3){background:#28c840}
/* "live" chip */
body.wl-redesign .hero-vs__chip{
  position:absolute;z-index:9;bottom:14px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  font-size:.8rem;font-weight:650;color:#fff;white-space:nowrap;
  background:rgba(20,16,42,.7);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(12px) saturate(1.4);box-shadow:0 10px 30px -14px rgba(0,0,0,.8)}
body.wl-redesign .hero-vs__chip-dot{width:8px;height:8px;border-radius:50%;
  background:var(--v-teal);box-shadow:0 0 12px 2px var(--v-teal);animation:wl2-blink 2.2s ease-in-out infinite}
@keyframes wl2-blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ── MOBILE: slider drops below copy + becomes HORIZONTAL ── */
@media(max-width:920px){
  body.wl-redesign .hero-vs{
    height:auto;width:100%;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
  body.wl-redesign .hero-vs__track{
    flex-direction:row;gap:12px;align-items:flex-start;
    animation:wl2-hscroll 30s linear infinite}
  /* v5.87 — smaller cards on mobile so they comfortably fit the screen (was
     min(74vw,300px) which overflowed the viewport). */
  body.wl-redesign .hero-vs__card{width:min(46vw,185px);margin:0;transform:none;opacity:1}
}
@keyframes wl2-hscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ─── 5. CONTENT SECTIONS as floating glass panels ─── */
body.wl-redesign .values > .container,
body.wl-redesign .how > .container,
body.wl-redesign .langs > .container,
body.wl-redesign .faq > .container,
body.wl-redesign .showcase > .container{
  background:var(--glass);
  border:1px solid var(--hair);
  border-radius:28px;
  padding:clamp(34px,5vw,68px) clamp(20px,4vw,52px);
  backdrop-filter:blur(22px) saturate(1.25);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08);
}
/* colored top-edge accent per section (variety) */
body.wl-redesign section > .container{position:relative;overflow:hidden}
body.wl-redesign .values > .container::before,
body.wl-redesign .how > .container::before,
body.wl-redesign .langs > .container::before,
body.wl-redesign .showcase > .container::before,
body.wl-redesign .faq > .container::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px}
body.wl-redesign .values > .container::before{background:linear-gradient(90deg,var(--v-violet),var(--v-magenta))}
body.wl-redesign .showcase > .container::before{background:linear-gradient(90deg,var(--v-cyan),var(--v-violet))}
body.wl-redesign .langs > .container::before{background:linear-gradient(90deg,var(--v-teal),var(--v-cyan))}
body.wl-redesign .how > .container::before{background:linear-gradient(90deg,var(--v-orange),var(--v-coral))}
body.wl-redesign .faq > .container::before{background:linear-gradient(90deg,var(--v-magenta),var(--v-violet))}

/* headings */
body.wl-redesign .values__eyebrow{
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;
  background:linear-gradient(90deg,var(--v-coral),var(--v-cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
body.wl-redesign .values__title{color:#fff;letter-spacing:-.02em}
body.wl-redesign .values__lead{color:#CFC9F0}

/* inner cards within glass panels */
body.wl-redesign .values__grid > *,
body.wl-redesign .how__step,
body.wl-redesign .price-card{
  background:rgba(255,255,255,.05);border:1px solid var(--hair);border-radius:18px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s}
body.wl-redesign .values__grid > *:hover,
body.wl-redesign .how__step:hover,
body.wl-redesign .price-card:hover{
  transform:translateY(-6px);border-color:color-mix(in oklab,var(--v-cyan) 55%,transparent);
  box-shadow:0 26px 60px -28px color-mix(in oklab,var(--v-violet) 75%,transparent)}
body.wl-redesign .how__num{
  background:linear-gradient(135deg,var(--v-coral),var(--v-magenta));color:#fff;
  box-shadow:0 0 24px -4px color-mix(in oklab,var(--v-magenta) 75%,transparent)}

/* ─── 5b. Animated section backgrounds (moving pattern + sheen) ─── */
body.wl-redesign .values,
body.wl-redesign .how,
body.wl-redesign .langs,
body.wl-redesign .showcase,
body.wl-redesign .faq{overflow:hidden}
/* drifting dot-field behind each content section */
body.wl-redesign .values::after,
body.wl-redesign .how::after,
body.wl-redesign .langs::after,
body.wl-redesign .showcase::after,
body.wl-redesign .faq::after{
  content:"";position:absolute;inset:-40px;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 0);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
          mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
  animation:wl2-drift 40s linear infinite}
@keyframes wl2-drift{from{background-position:0 0}to{background-position:340px 340px}}
/* slow sheen sweeping across the glass panels */
body.wl-redesign section > .container::after{
  content:"";position:absolute;top:0;bottom:0;left:-30%;width:30%;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.06),transparent);
  transform:skewX(-14deg);animation:wl2-sweep 9s ease-in-out infinite;animation-delay:1.5s}
body.wl-redesign section > .container > *{position:relative;z-index:1}
@keyframes wl2-sweep{0%{left:-30%}55%,100%{left:130%}}

/* ─── 6. Scroll-reveal ─── */
body.wl-redesign [data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
body.wl-redesign [data-reveal].is-in{opacity:1;transform:none}
body.wl-redesign [data-reveal-stagger]>*{opacity:0;transform:translateY(22px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
body.wl-redesign [data-reveal-stagger].is-in>*{opacity:1;transform:none}
body.wl-redesign [data-reveal-stagger].is-in>*:nth-child(2){transition-delay:.07s}
body.wl-redesign [data-reveal-stagger].is-in>*:nth-child(3){transition-delay:.14s}
body.wl-redesign [data-reveal-stagger].is-in>*:nth-child(4){transition-delay:.21s}
body.wl-redesign [data-reveal-stagger].is-in>*:nth-child(5){transition-delay:.28s}
body.wl-redesign [data-reveal-stagger].is-in>*:nth-child(6){transition-delay:.35s}

@media (prefers-reduced-motion: reduce){
  body.wl-redesign::before,
  body.wl-redesign .hero-arb h1 em,
  body.wl-redesign .hero-vs::before,
  body.wl-redesign .hero-vs__track,
  body.wl-redesign .hero-vs__chip-dot,
  body.wl-redesign .values::after,
  body.wl-redesign .how::after,
  body.wl-redesign .langs::after,
  body.wl-redesign .showcase::after,
  body.wl-redesign .faq::after,
  body.wl-redesign section > .container::after{animation:none}
  body.wl-redesign [data-reveal],
  body.wl-redesign [data-reveal-stagger]>*{opacity:1;transform:none;transition:none}
}