/* =====================================================================
   צור סטודיו · design file
   colors: deep blue, sky blue, white · RTL · accessible
   ===================================================================== */

:root{
  --navy:#0C1442;        /* deep blue with a hint of purple: backgrounds and headings */
  --navy-2:#1A1F63;
  --violet:#7B5CF0;      /* soft purple: the new combination with the blue */
  --lilac:#B9A4FF;
  --lilac-2:#E9E2FF;
  --royal:#2853C9;       /* main blue: buttons and links */
  --sky:#7FC4F2;         /* sky blue: highlights */
  --sky-2:#B9E1FB;
  --ice:#EEF7FE;         /* very light blue: section backgrounds */
  --pearl:#F7FAFF;
  --white:#FFFFFF;
  --ink:#0E1A3A;         /* body text */
  --muted:#4F5D7E;
  --line:#DCE7F7;
  --wa:#1FAF55;          /* WhatsApp */
  --wa-dark:#178C44;

  --grad: linear-gradient(120deg, #2853C9 0%, #5B5BE6 45%, #9B7CF7 75%, #C2A8FF 100%);
  --grad-2: linear-gradient(120deg, #7FC4F2 0%, #9B7CF7 100%);
  --grad-soft: linear-gradient(160deg, #F5F8FF 0%, #ECEBFF 55%, #E6F2FD 100%);
  --radius: 22px;
  --radius-lg: 34px;
  --shadow: 0 18px 50px -18px rgba(10,27,69,.28);
  --shadow-sm: 0 6px 20px -8px rgba(10,27,69,.22);
  --ease: cubic-bezier(.2,.7,.2,1);
  --wrap: 1200px;
  --fs: 1;               /* text size (changed by the accessibility menu) */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:"Assistant", "Rubik", system-ui, sans-serif;
  font-size:calc(18px * var(--fs)); line-height:1.65;
  direction:rtl; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; cursor:pointer}
h1,h2,h3,h4{font-family:"Rubik", sans-serif; line-height:1.15; margin:0 0 .5em; color:var(--navy); letter-spacing:-.01em}
h1{font-size:clamp(2.4rem, 6.4vw, 5rem); font-weight:800}
h2{font-size:clamp(2rem, 4.4vw, 3.3rem); font-weight:800}
h3{font-size:1.35rem; font-weight:700}
p{margin:0 0 1em}
.wrap{width:min(var(--wrap), 100% - 40px); margin-inline:auto}
.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* gradient text highlight */
.hl{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.on-dark .hl{background:linear-gradient(120deg,#9FD4FF 0%,#C8B4FF 55%,#F1EBFF 100%); -webkit-background-clip:text; background-clip:text}

/* ---------- accessibility: skip link and focus ---------- */
.skip{position:fixed; top:-60px; right:16px; z-index:9999; background:var(--navy); color:#fff; padding:12px 20px; border-radius:12px; text-decoration:none; font-weight:700; transition:top .2s}
.skip:focus{top:16px}
:focus-visible{outline:3px solid var(--royal); outline-offset:3px; border-radius:6px}
.on-dark :focus-visible, .site-header :focus-visible{outline-color:var(--sky)}

/* ---------- buttons ---------- */
.btn{
  --bg:linear-gradient(120deg,#2853C9,#6A5AE8); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:54px; padding:.8em 1.6em; border-radius:999px; border:0;
  background:var(--bg); color:var(--fg); text-decoration:none;
  font-family:"Rubik"; font-weight:700; font-size:1.02rem;
  box-shadow:0 10px 26px -10px rgba(91,91,230,.65);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s;
  position:relative; overflow:hidden; isolation:isolate;
}
.btn::after{ /* shine sweep on hover */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(120%); transition:transform .8s var(--ease);
}
.btn:hover{transform:translateY(-3px); box-shadow:0 16px 34px -12px rgba(40,83,201,.75)}
.btn:hover::after{transform:translateX(-120%)}
.btn svg{width:22px; height:22px; flex:none}
.btn-wa{--bg:var(--wa); box-shadow:0 10px 26px -10px rgba(31,175,85,.7)}
.btn-wa:hover{--bg:var(--wa-dark); box-shadow:0 16px 34px -12px rgba(31,175,85,.8)}
.btn-ghost{--bg:transparent; --fg:var(--navy); box-shadow:inset 0 0 0 2px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--royal)}
.on-dark .btn-ghost{--fg:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.45); backdrop-filter:blur(6px)}
.on-dark .btn-ghost:hover{box-shadow:inset 0 0 0 2px #fff}
.btn-white{--bg:#fff; --fg:var(--navy)}
.btn-lg{min-height:62px; font-size:1.12rem; padding:.9em 2em}

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto; z-index:100; color:#fff;
  transition:background .4s, box-shadow .4s, transform .4s var(--ease);
}
.site-header .bar{display:flex; align-items:center; gap:24px; height:84px; transition:height .4s}
.site-header.scrolled, .site-header.solid{background:rgba(10,27,69,.86); backdrop-filter:blur(14px) saturate(1.4); box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.site-header.scrolled .bar{height:70px}
.site-header.hide{transform:translateY(-100%)}
.logo{display:block; width:112px; height:43px; flex:none;
  -webkit-mask:url(../img/zur-logo.png) center/contain no-repeat; mask:url(../img/zur-logo.png) center/contain no-repeat;
  background:linear-gradient(120deg,#fff,#CFE8FF)}
.nav{display:flex; gap:4px; margin-inline-start:auto}
.nav a{position:relative; padding:10px 14px; text-decoration:none; font-family:"Rubik"; font-weight:500; font-size:.98rem; color:rgba(255,255,255,.88); border-radius:10px; transition:color .2s}
.nav a::after{content:""; position:absolute; right:14px; left:14px; bottom:4px; height:2px; border-radius:2px; background:var(--sky); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease)}
.nav a:hover, .nav a[aria-current="page"]{color:#fff}
.nav a:hover::after, .nav a[aria-current="page"]::after{transform:scaleX(1)}
.header-cta{min-height:46px; padding:.55em 1.2em; font-size:.95rem}
.burger{display:none; margin-inline-start:auto; width:48px; height:48px; border:0; border-radius:14px; background:rgba(255,255,255,.12); color:#fff; align-items:center; justify-content:center}
.burger span, .burger span::before, .burger span::after{display:block; width:22px; height:2px; background:currentColor; border-radius:2px; position:relative; transition:transform .35s var(--ease), background .2s}
.burger span::before, .burger span::after{content:""; position:absolute; right:0}
.burger span::before{top:-7px} .burger span::after{top:7px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:translateY(7px) rotate(45deg)}
.menu-open .burger span::after{transform:translateY(-7px) rotate(-45deg)}

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:90; background:radial-gradient(120% 80% at 100% 0%, #1D3D96 0%, var(--navy) 60%);
  display:flex; flex-direction:column; justify-content:center; padding:100px 28px 40px; gap:6px;
  clip-path:circle(0 at calc(100% - 44px) 42px); visibility:hidden;
  transition:clip-path .7s var(--ease), visibility 0s .7s;
}
.menu-open .mobile-menu{clip-path:circle(150% at calc(100% - 44px) 42px); visibility:visible; transition:clip-path .7s var(--ease)}
.mobile-menu a{color:#fff; text-decoration:none; font-family:"Rubik"; font-size:1.9rem; font-weight:700; padding:8px 0; opacity:0; transform:translateY(16px); transition:opacity .4s, transform .5s var(--ease)}
.mobile-menu a[aria-current="page"]{color:var(--sky)}
.menu-open .mobile-menu a{opacity:1; transform:none}
.mobile-menu .btn{margin-top:22px; font-size:1.1rem}
.menu-open{overflow:hidden}

/* ---------- section basics ---------- */
section{position:relative}
.sec{padding:clamp(80px, 11vw, 140px) 0}
.sec-ice{background:var(--grad-soft)}
.sec-navy{background:var(--navy); color:#E8F1FF}
.sec-navy h2, .sec-navy h3{color:#fff}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:"Rubik"; font-weight:600; font-size:.88rem; letter-spacing:.14em; color:var(--royal); text-transform:uppercase; margin-bottom:14px}
.eyebrow::before{content:""; width:28px; height:2px; background:currentColor; border-radius:2px}
.on-dark .eyebrow, .sec-navy .eyebrow{color:var(--sky)}
.sec-head{max-width:760px; margin-bottom:56px}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head.center .eyebrow::after{content:""; width:28px; height:2px; background:currentColor; border-radius:2px}
.lead{font-size:1.18rem; color:var(--muted)}
.sec-navy .lead, .on-dark .lead{color:#C4D6F5}

/* soft decorative shapes */
.blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; pointer-events:none; z-index:0}
.blob.a{width:420px; height:420px; background:#BFE3FF; top:-120px; left:-120px}
.blob.b{width:360px; height:360px; background:#D9E4FF; bottom:-100px; right:-80px}
.sec > .wrap{position:relative; z-index:1}

/* ---------- hero ---------- */
.hero{min-height:100svh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; isolation:isolate; padding:140px 0 70px}
.hero-media{position:absolute; inset:0; z-index:-2; background:var(--navy)}
.hero-media img, .hero-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-media img{animation:kenburns 22s ease-in-out infinite alternate}
.hero-media video{opacity:0; transition:opacity 1.2s}
.hero-media video.ready{opacity:1}
.hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(10,27,69,.96) 0%, rgba(10,27,69,.55) 45%, rgba(10,27,69,.25) 75%, rgba(10,27,69,.6) 100%),
    radial-gradient(80% 60% at 85% 100%, rgba(40,83,201,.55), transparent 70%)}
@keyframes kenburns{from{transform:scale(1.04)} to{transform:scale(1.16) translate(-1.5%, -1%)}}
.hero-inner{max-width:880px}
.hero-badge{display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 18px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(10px); font-family:"Rubik"; font-weight:500; font-size:.95rem; margin-bottom:24px}
.hero-badge .dot{width:9px; height:9px; border-radius:50%; background:var(--sky); box-shadow:0 0 0 0 rgba(127,196,242,.8); animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(127,196,242,0)} 100%{box-shadow:0 0 0 0 rgba(127,196,242,0)}}
.hero h1{color:#fff; margin-bottom:.35em}
.hero h1 .line{display:block; overflow:hidden; padding-bottom:.08em}
.hero h1 .line > span{display:inline-block; transform:translateY(110%); animation:rise 1s var(--ease) forwards}
.hero h1 .line:nth-child(2) > span{animation-delay:.12s}
.hero h1 .line:nth-child(3) > span{animation-delay:.24s}
@keyframes rise{to{transform:none}}
.hero-sub{font-size:clamp(1.1rem,1.8vw,1.35rem); color:#D7E5FF; max-width:640px; margin-bottom:32px}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:46px}
.hero-proof{display:flex; flex-wrap:wrap; gap:14px}
.proof{display:flex; align-items:center; gap:14px; padding:14px 22px 14px 18px; border-radius:20px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(12px)}
.proof b{font-family:"Rubik"; font-size:1.9rem; font-weight:800; line-height:1; color:#fff}
.proof span{font-size:.95rem; line-height:1.3; color:#CFE0FF}
.fade-up{opacity:0; transform:translateY(24px); animation:fadeUp .9s var(--ease) forwards}
@keyframes fadeUp{to{opacity:1; transform:none}}
.scroll-cue{position:absolute; bottom:26px; left:50%; translate:-50% 0; width:28px; height:44px; border:2px solid rgba(255,255,255,.5); border-radius:20px}
.scroll-cue::after{content:""; position:absolute; top:8px; left:50%; width:4px; height:8px; margin-left:-2px; border-radius:4px; background:#fff; animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0; transform:translateY(0)} 30%{opacity:1} 100%{opacity:0; transform:translateY(14px)}}

/* page hero for inner pages */
.page-hero{padding:170px 0 90px; color:#fff; overflow:hidden; isolation:isolate; background:var(--navy)}
.page-hero .bg{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; opacity:.35; animation:kenburns 26s ease-in-out infinite alternate}
.page-hero::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,27,69,.55), var(--navy) 95%), radial-gradient(70% 70% at 90% 10%, rgba(40,83,201,.6), transparent 70%)}
.page-hero h1{color:#fff; font-size:clamp(2.3rem,5.5vw,4.2rem)}
.page-hero .lead{max-width:680px}
.crumbs{font-size:.9rem; color:#A9C2EE; margin-bottom:18px}
.crumbs a{color:#A9C2EE; text-decoration:none} .crumbs a:hover{color:#fff}

/* ---------- ticker ---------- */
.ticker{background:var(--grad); color:#fff; overflow:hidden; padding:18px 0; transform:skewY(-1.5deg); margin:-14px 0; position:relative; z-index:3; box-shadow:var(--shadow)}
.ticker-track{display:flex; width:max-content; animation:marquee 40s linear infinite}
.ticker span{font-family:"Rubik"; font-weight:700; font-size:1.25rem; padding:0 26px; white-space:nowrap; display:flex; align-items:center; gap:52px}
.ticker span::after{content:"✦"; font-size:.85rem; opacity:.75}
@keyframes marquee{to{transform:translateX(50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* ---------- counters ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.stat{padding:30px 24px; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); border:1px solid var(--line); text-align:center}
.stat b{display:block; font-family:"Rubik"; font-weight:800; font-size:clamp(2.4rem,4.5vw,3.4rem); line-height:1; margin-bottom:8px}
.stat span{color:var(--muted); font-weight:600}

/* ---------- Adi: what makes him different ---------- */
.adi{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(40px,6vw,90px); align-items:center}
.adi-photos{position:relative; aspect-ratio:4/5}
.adi-photos figure{margin:0; position:absolute; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow)}
.adi-photos img{width:100%; height:100%; object-fit:cover}
.adi-photos .p1{inset:0 0 14% 18%}
.adi-photos .p2{width:46%; aspect-ratio:3/4; left:0; bottom:0; border:6px solid #fff}
.adi-photos .tag{position:absolute; top:24px; left:-10px; z-index:2; background:#fff; border-radius:18px; padding:14px 18px; box-shadow:var(--shadow); display:flex; align-items:center; gap:12px; font-weight:700; color:var(--navy); line-height:1.25}
.adi-photos .tag b{font-family:"Rubik"; font-size:1.9rem; color:var(--royal)}
.quote{font-family:"Rubik"; font-size:clamp(1.4rem,2.4vw,1.85rem); font-weight:600; color:var(--navy); line-height:1.35; border-inline-start:4px solid var(--sky); padding-inline-start:20px; margin:0 0 26px}
.diff{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:30px 0 34px}
.diff li{list-style:none; padding:20px; border-radius:18px; background:var(--pearl); border:1px solid var(--line); transition:transform .4s var(--ease), box-shadow .4s, border-color .3s}
.diff li:hover{transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:var(--sky-2)}
.diff ul{padding:0; margin:0}
.diff .ic{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--grad); color:#fff; margin-bottom:12px}
.diff .ic svg{width:22px; height:22px}
.diff h3{font-size:1.1rem; margin-bottom:.3em}
.diff p{font-size:.98rem; color:var(--muted); margin:0}

/* ---------- process ---------- */
.process{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; counter-reset:step}
.process::before{content:""; position:absolute; top:38px; right:12%; left:12%; height:3px; background:rgba(255,255,255,.12); border-radius:3px}
.process .line-fill{position:absolute; top:38px; right:12%; height:3px; width:0; max-width:76%; background:linear-gradient(90deg,var(--sky),#fff); border-radius:3px; transition:width 2.2s var(--ease)}
.process.in .line-fill{width:76%}
.step{text-align:center; position:relative; z-index:1}
.step .num{width:78px; height:78px; margin:0 auto 22px; border-radius:50%; display:grid; place-items:center; font-family:"Rubik"; font-weight:800; font-size:1.7rem; color:var(--navy); background:#fff; box-shadow:0 0 0 8px rgba(127,196,242,.18), 0 14px 30px -10px rgba(0,0,0,.5)}
.step h3{font-size:1.25rem}
.step p{color:#BCD0F2; font-size:1rem}

/* ---------- for whom ---------- */
.who{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.who-card{position:relative; padding:30px 28px; border-radius:var(--radius); background:#fff; border:1px solid var(--line); overflow:hidden; transition:transform .45s var(--ease), box-shadow .45s}
.who-card::before{content:""; position:absolute; inset:auto 0 0 0; height:4px; background:var(--grad); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease)}
.who-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.who-card:hover::before{transform:scaleX(1)}
.who-card .emo{font-size:2rem; margin-bottom:10px; display:block}
.who-card h3{font-size:1.2rem}
.who-card p{color:var(--muted); margin:0; font-size:1rem}

/* ---------- class cards ---------- */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px}
.chip{border:1.5px solid var(--line); background:#fff; color:var(--navy); padding:10px 18px; border-radius:999px; font-family:"Rubik"; font-weight:500; font-size:.95rem; transition:all .25s}
.chip:hover{border-color:var(--royal)}
.chip[aria-pressed="true"]{background:var(--navy); color:#fff; border-color:var(--navy)}
.class-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.class-card{position:relative; border-radius:var(--radius-lg); overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .5s var(--ease), box-shadow .5s}
.class-card:hover{transform:translateY(-8px); box-shadow:var(--shadow)}
.class-card .ph{position:relative; aspect-ratio:4/3.4; overflow:hidden}
.class-card .ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.class-card:hover .ph img{transform:scale(1.08)}
.class-card .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,27,69,.75), transparent 55%)}
.class-card .en{position:absolute; bottom:14px; right:20px; z-index:1; color:#fff; font-family:"Rubik"; font-weight:800; letter-spacing:.12em; font-size:.85rem; opacity:.85}
.class-card .badge{position:absolute; top:16px; right:16px; z-index:1; background:#fff; color:var(--navy); font-weight:700; font-size:.82rem; padding:6px 12px; border-radius:999px; box-shadow:var(--shadow-sm)}
.class-card .bd{padding:22px 24px 26px; display:flex; flex-direction:column; flex:1}
.class-card .area{font-size:.85rem; color:var(--royal); font-weight:700; margin-bottom:4px}
.class-card h3{margin-bottom:.4em}
.class-card p{color:var(--muted); font-size:1rem}
.meta{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.9rem; color:var(--muted); margin:auto 0 0; padding-top:14px; border-top:1px dashed var(--line)}
.meta > span{display:inline-flex; align-items:center; gap:6px}
.dots{display:inline-flex; gap:3px}
.dots i{width:8px; height:8px; border-radius:50%; background:var(--line)}
.dots i.on{background:var(--royal)}
.fit{list-style:none; padding:0; margin:0 0 16px; display:grid; gap:6px}
.fit li{display:flex; gap:8px; font-size:.97rem}
.fit li::before{content:"✓"; color:var(--royal); font-weight:800}
.class-card .actions{display:flex; gap:10px; margin-top:16px}
.class-card .actions .btn{min-height:46px; font-size:.92rem; padding:.5em 1.1em; flex:1}

/* ---------- carousel (results / gallery) ---------- */
.rail-wrap{position:relative}
.rail{display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:6px 4px 26px; cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing; scroll-snap-type:none}
.rail > *{scroll-snap-align:start; flex:none}
.ba-card{width:clamp(260px, 30vw, 380px); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); background:#fff; border:0; padding:0; position:relative}
.ba-card img{width:100%; aspect-ratio:1; object-fit:cover; transition:transform .8s var(--ease); pointer-events:none}
.ba-card:hover img{transform:scale(1.04)}
.rail-btns{display:flex; gap:10px}
.rail-btn{width:52px; height:52px; border-radius:50%; border:1.5px solid var(--line); background:#fff; color:var(--navy); display:grid; place-items:center; transition:all .25s}
.rail-btn:hover{background:var(--navy); color:#fff; border-color:var(--navy)}
.rail-btn svg{width:20px; height:20px}
.head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px}
.head-row .sec-head{margin:0}

/* ---------- Rezult band ---------- */
.rezult-band{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; padding:clamp(34px,5vw,64px); border-radius:40px; background:radial-gradient(120% 120% at 0% 0%, #2B5BD6 0%, var(--navy) 60%); color:#DCE8FF; overflow:hidden; position:relative}
.rezult-band::after{content:""; position:absolute; width:520px; height:520px; border-radius:50%; border:1px solid rgba(255,255,255,.12); left:-160px; bottom:-260px; box-shadow:0 0 0 60px rgba(255,255,255,.03), 0 0 0 120px rgba(255,255,255,.02)}
.rezult-band h2{color:#fff}
.rezult-band .ba-stack{position:relative; aspect-ratio:1; max-width:440px; justify-self:center; width:100%}
.rezult-band .ba-stack img{position:absolute; width:78%; border-radius:26px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6); border:5px solid #fff}
.rezult-band .ba-stack img:first-child{top:0; right:0; rotate:4deg}
.rezult-band .ba-stack img:last-child{bottom:0; left:0; rotate:-5deg}
.checks{list-style:none; padding:0; margin:20px 0 30px; display:grid; gap:12px}
.checks li{display:flex; gap:12px; align-items:flex-start}
.checks li::before{content:""; flex:none; width:24px; height:24px; margin-top:3px; border-radius:50%; background:var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1B45' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat}
.sec:not(.sec-navy) .checks li::before{background-color:var(--sky-2)}

/* ---------- gallery ---------- */
.masonry{columns:3 280px; column-gap:18px}
.masonry .g-item{break-inside:avoid; margin:0 0 18px; border-radius:var(--radius); overflow:hidden; position:relative; display:block; border:0; padding:0; width:100%; background:var(--ice)}
.masonry img{width:100%; transition:transform 1s var(--ease)}
.masonry .g-item:hover img{transform:scale(1.06)}
.masonry .g-item::after{content:attr(data-cap); position:absolute; inset:auto 0 0; padding:40px 18px 16px; color:#fff; font-weight:700; text-align:right; background:linear-gradient(to top,rgba(10,27,69,.8),transparent); opacity:0; transform:translateY(10px); transition:all .4s var(--ease)}
.masonry .g-item:hover::after, .masonry .g-item:focus-visible::after{opacity:1; transform:none}
.strip{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.strip .g-item{aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; border:0; padding:0; background:var(--ice)}
.strip .g-item:nth-child(even){margin-top:40px}
.strip img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.strip .g-item:hover img{transform:scale(1.07)}

/* lightbox */
.lightbox{position:fixed; inset:0; z-index:500; background:rgba(6,15,40,.94); display:flex; align-items:center; justify-content:center; padding:60px 70px; opacity:0; visibility:hidden; transition:opacity .35s, visibility 0s .35s}
.lightbox.open{opacity:1; visibility:visible; transition:opacity .35s}
.lightbox img{max-height:84vh; width:auto; border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.5); transform:scale(.94); transition:transform .45s var(--ease)}
.lightbox.open img{transform:none}
.lightbox button{position:absolute; width:54px; height:54px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center}
.lightbox button:hover{background:rgba(255,255,255,.25)}
.lightbox button svg{width:22px; height:22px}
.lb-close{top:20px; left:20px} .lb-prev{right:16px; top:50%; translate:0 -50%} .lb-next{left:16px; top:50%; translate:0 -50%}

/* ---------- tabs ---------- */
.tabs{display:inline-flex; padding:6px; border-radius:999px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); margin-bottom:40px; position:relative}
.tabs button{position:relative; z-index:1; border:0; background:none; padding:12px 24px; border-radius:999px; font-family:"Rubik"; font-weight:600; color:var(--muted); transition:color .3s}
.tabs button[aria-selected="true"]{color:#fff}
.tabs .pill{position:absolute; top:6px; bottom:6px; border-radius:999px; background:var(--navy); transition:all .45s var(--ease)}
.panel[hidden]{display:none}
.panel{animation:fadeUp .6s var(--ease)}
.ba-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.ba-grid .ba-card{width:auto}

/* ---------- timetable ---------- */
.tt-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px}
.live{display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--royal); font-size:.95rem}
.live i{width:9px; height:9px; border-radius:50%; background:#20C46B; box-shadow:0 0 0 0 rgba(32,196,107,.6); animation:ping2 1.8s infinite}
@keyframes ping2{70%{box-shadow:0 0 0 10px rgba(32,196,107,0)}100%{box-shadow:0 0 0 0 rgba(32,196,107,0)}}
.days{display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin-bottom:22px}
.day{border:1.5px solid var(--line); background:#fff; border-radius:18px; padding:12px 6px; text-align:center; font-family:"Rubik"; transition:all .25s; color:var(--navy)}
.day b{display:block; font-size:1.05rem}
.day small{display:block; color:var(--muted); font-size:.8rem}
.day:hover{border-color:var(--royal)}
.day[aria-pressed="true"]{background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 10px 24px -10px rgba(40,83,201,.7)}
.day[aria-pressed="true"] small{color:#E2EEFF}
.slots{display:grid; gap:12px}
.slot{display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:20px; padding:18px 22px; border-radius:20px; background:#fff; border:1px solid var(--line); transition:transform .35s var(--ease), box-shadow .35s, border-color .3s; animation:fadeUp .5s var(--ease) both}
.slot:hover{transform:translateX(-4px); box-shadow:var(--shadow-sm); border-color:var(--sky-2)}
.slot .time{font-family:"Rubik"; font-weight:800; font-size:1.35rem; color:var(--navy); line-height:1.1}
.slot .time small{display:block; font-weight:500; font-size:.85rem; color:var(--muted)}
.slot .info{display:flex; align-items:center; gap:16px; min-width:0}
.slot .info img{width:58px; height:58px; border-radius:16px; object-fit:cover; flex:none}
.slot h3{font-size:1.15rem; margin:0}
.slot .info span{font-size:.9rem; color:var(--muted)}
.slot .btn{min-height:44px; font-size:.9rem; padding:.45em 1.1em}
.slot.past > *{opacity:.45}
.slot.past .btn{visibility:hidden}
.slot.now{border-color:var(--royal); box-shadow:0 0 0 3px rgba(40,83,201,.12)}
.slot .now-tag{display:inline-block; background:var(--royal); color:#fff; font-size:.75rem; font-weight:700; border-radius:999px; padding:2px 10px; margin-inline-start:8px; vertical-align:middle}
.empty{text-align:center; padding:50px 20px; color:var(--muted); background:#fff; border-radius:20px; border:1px dashed var(--line)}
.tt-layout{display:grid; grid-template-columns:1fr 340px; gap:30px; align-items:start}
.side-card{position:sticky; top:100px; padding:28px; border-radius:var(--radius-lg); background:var(--navy); color:#D6E4FF}
.side-card h3{color:#fff}
.hours{width:100%; border-collapse:collapse; margin:10px 0 18px; font-size:.95rem}
.hours th, .hours td{padding:9px 4px; text-align:right; border-bottom:1px solid rgba(255,255,255,.12)}
.hours th{color:var(--sky); font-weight:600}
.demo-note{display:inline-block; font-size:.82rem; background:#FFF5D6; color:#6B5200; padding:4px 12px; border-radius:999px; font-weight:600}

/* ---------- FAQ ---------- */
.faq{max-width:860px; margin-inline:auto; display:grid; gap:12px}
.faq details{border-radius:20px; background:#fff; border:1px solid var(--line); transition:box-shadow .3s, border-color .3s}
.faq details[open]{box-shadow:var(--shadow-sm); border-color:var(--sky-2)}
.faq summary{list-style:none; cursor:pointer; padding:22px 26px; font-family:"Rubik"; font-weight:600; font-size:1.1rem; color:var(--navy); display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--ice); color:var(--royal); font-size:1.4rem; transition:transform .35s var(--ease), background .3s}
.faq details[open] summary::after{transform:rotate(45deg); background:var(--royal); color:#fff}
.faq .ans{padding:0 26px 22px; color:var(--muted)}

/* ---------- final CTA ---------- */
.cta-final{text-align:center; padding:clamp(60px,8vw,100px) 24px; border-radius:44px; background:var(--grad); color:#fff; position:relative; overflow:hidden; isolation:isolate}
.cta-final::before, .cta-final::after{content:""; position:absolute; border-radius:50%; z-index:-1; background:rgba(255,255,255,.12)}
.cta-final::before{width:380px; height:380px; top:-160px; right:-100px; animation:float 9s ease-in-out infinite}
.cta-final::after{width:260px; height:260px; bottom:-120px; left:-60px; animation:float 11s ease-in-out infinite reverse}
@keyframes float{50%{transform:translate(20px,24px)}}
.cta-final h2{color:#fff}
.cta-final p{font-size:1.2rem; color:#EAF3FF; max-width:600px; margin:0 auto 30px}
.cta-final .btn-white:hover{box-shadow:0 16px 34px -12px rgba(0,0,0,.35)}

/* ---------- Rezult page ---------- */
.pain{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:900px; margin-inline:auto}
.pain div{padding:22px 24px; border-radius:20px; background:#fff; border:1px solid var(--line); display:flex; gap:14px; align-items:flex-start; font-size:1.05rem}
.pain div::before{content:"✕"; flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#FFE9EE; color:#C2264B; font-weight:800; font-size:.9rem}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.feature{padding:30px; border-radius:var(--radius); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); transition:transform .4s var(--ease), background .3s}
.feature:hover{transform:translateY(-6px); background:rgba(255,255,255,.1)}
.feature .ic{width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:var(--grad); color:#fff; margin-bottom:18px}
.feature .ic svg{width:26px; height:26px}
.feature p{color:#BCD0F2; margin:0}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center}
.split img{border-radius:var(--radius-lg); box-shadow:var(--shadow); width:100%; aspect-ratio:4/5; object-fit:cover}
.yes-no{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.yes-no > div{padding:32px; border-radius:var(--radius-lg); background:#fff; border:1px solid var(--line)}
.yes-no .no li::before{background:#FFE9EE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2264B' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/12px no-repeat}
.guarantee{display:flex; gap:22px; align-items:center; padding:28px 32px; border-radius:var(--radius-lg); background:var(--ice); border:1px solid var(--line); max-width:900px; margin:50px auto 0}
.guarantee .ic{flex:none; width:64px; height:64px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center}
.guarantee .ic svg{width:30px; height:30px}
.guarantee p{margin:0; color:var(--muted)}

/* ---------- footer ---------- */
.site-footer{background:#071433; color:#AFC3E8; padding:80px 0 120px; margin-top:0}
.foot{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
.site-footer h4{color:#fff; font-size:1.05rem; margin-bottom:16px}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.site-footer a{color:#AFC3E8; text-decoration:none; transition:color .2s}
.site-footer a:hover{color:#fff}
.site-footer .logo{width:140px; height:54px; margin-bottom:16px}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:50px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); font-size:.9rem}
.socials{display:flex; gap:10px; margin-top:18px}
.socials a{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.08); transition:background .25s, transform .3s var(--ease)}
.socials a:hover{background:var(--royal); transform:translateY(-3px)}
.socials svg{width:20px; height:20px}

/* ---------- floating WhatsApp ---------- */
.wa-float{position:fixed; left:22px; bottom:22px; z-index:200; display:flex; align-items:center; gap:10px; text-decoration:none}
.wa-float .circle{width:64px; height:64px; border-radius:50%; background:var(--wa); color:#fff; display:grid; place-items:center; box-shadow:0 12px 30px -8px rgba(31,175,85,.7); position:relative; transition:transform .35s var(--ease)}
.wa-float .circle::before{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa); animation:waRing 2.4s infinite}
@keyframes waRing{0%{transform:scale(1); opacity:.8} 100%{transform:scale(1.6); opacity:0}}
.wa-float svg{width:34px; height:34px}
.wa-float:hover .circle{transform:scale(1.08) rotate(-6deg)}
.wa-float .bubble{order:2; background:#fff; color:var(--navy); font-weight:700; padding:10px 16px; border-radius:16px 16px 16px 4px; box-shadow:var(--shadow); font-size:.95rem; white-space:nowrap; opacity:0; transform:translateX(-10px); pointer-events:none; transition:all .5s var(--ease)}
.wa-float.show-bubble .bubble, .wa-float:hover .bubble{opacity:1; transform:none}

/* mobile WhatsApp bar */
.m-bar{display:none}

/* ---------- accessibility menu ---------- */
.a11y-btn{position:fixed; right:22px; bottom:22px; z-index:200; width:52px; height:52px; border-radius:50%; border:0; background:var(--navy); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-sm)}
.a11y-btn svg{width:28px; height:28px}
.a11y-panel{position:fixed; right:22px; bottom:86px; z-index:201; width:300px; max-width:calc(100vw - 44px); background:#fff; border-radius:24px; box-shadow:0 30px 70px -20px rgba(10,27,69,.5); padding:22px; border:1px solid var(--line); opacity:0; visibility:hidden; transform:translateY(12px); transition:all .3s var(--ease)}
.a11y-panel.open{opacity:1; visibility:visible; transform:none}
.a11y-panel h2{font-size:1.15rem; margin-bottom:14px}
.a11y-panel .grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.a11y-panel button{border:1.5px solid var(--line); background:var(--pearl); border-radius:14px; padding:12px 8px; font-size:.9rem; font-weight:600; color:var(--navy)}
.a11y-panel button[aria-pressed="true"]{background:var(--navy); color:#fff; border-color:var(--navy)}
.a11y-panel .reset{grid-column:1/-1; background:#fff}
.a11y-panel a{display:block; text-align:center; margin-top:12px; font-size:.9rem; color:var(--royal)}

/* accessibility modes */
html.a11y-contrast{filter:contrast(1.25)}
html.a11y-contrast body{background:#fff}
html.a11y-contrast .lead, html.a11y-contrast p{color:#000 !important}
html.a11y-links a{text-decoration:underline !important; text-underline-offset:3px; outline:2px dashed #E8A100; outline-offset:2px}
html.a11y-readable body, html.a11y-readable h1, html.a11y-readable h2, html.a11y-readable h3{font-family:Arial, sans-serif !important; letter-spacing:.02em; word-spacing:.12em}
html.a11y-gray{filter:grayscale(1)}
html.a11y-stop *, html.a11y-stop *::before, html.a11y-stop *::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
html.a11y-stop [data-reveal]{opacity:1 !important; transform:none !important}
html.a11y-stop .hero h1 .line > span{transform:none}
html.a11y-stop .fade-up{opacity:1; transform:none}

/* ---------- scroll reveal ---------- */
[data-reveal]{opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:var(--d, 0s)}
[data-reveal="left"]{transform:translateX(-50px)}
[data-reveal="right"]{transform:translateX(50px)}
[data-reveal="zoom"]{transform:scale(.92)}
[data-reveal].in{opacity:1; transform:none}
.no-js [data-reveal]{opacity:1; transform:none}

/* scroll progress bar */
.progress{position:fixed; top:0; right:0; left:0; height:3px; z-index:300; background:var(--grad); transform-origin:right; transform:scaleX(0)}

/* ---------- reduced motion (accessibility) ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  [data-reveal]{opacity:1; transform:none}
  .hero h1 .line > span{transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav, .header-cta{display:none}
  .burger{display:flex}
  .class-grid, .who, .feature-grid, .ba-grid{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr 1fr}
  .tt-layout{grid-template-columns:1fr}
  .side-card{position:static}
  .strip{grid-template-columns:repeat(3,1fr)} .strip .g-item:nth-child(n+4){display:none}
}
@media (max-width:820px){
  body{font-size:calc(17px * var(--fs))}
  .adi, .rezult-band, .split, .yes-no{grid-template-columns:1fr}
  .adi-photos{max-width:480px; width:100%; margin-inline:auto}
  .stats{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:1fr 1fr; row-gap:40px}
  .process::before, .process .line-fill{display:none}
  .pain{grid-template-columns:1fr}
  .head-row{flex-direction:column; align-items:flex-start}
  .days{grid-template-columns:repeat(7, minmax(64px,1fr)); overflow-x:auto; padding-bottom:6px}
  .slot{grid-template-columns:1fr auto; gap:12px}
  .slot .time{grid-column:1/-1; display:flex; gap:10px; align-items:baseline}
  .slot .info img{width:48px; height:48px}
}
@media (max-width:600px){
  .wrap{width:calc(100% - 32px)}
  .class-grid, .who, .feature-grid, .ba-grid, .diff, .foot{grid-template-columns:1fr}
  .hero{padding-bottom:110px}
  .hero-ctas .btn{flex:1 1 100%}
  .proof{padding:10px 14px; flex:1 1 calc(50% - 14px)}
  .proof b{font-size:1.5rem}
  .proof span{font-size:.85rem}
  .stats{gap:12px} .stat{padding:22px 12px}
  .process{grid-template-columns:1fr}
  .tabs{display:flex; width:100%} .tabs button{flex:1; padding:12px 8px; font-size:.92rem}
  .lightbox{padding:60px 12px}
  .lb-prev, .lb-next{top:auto; bottom:20px; translate:none}
  /* on mobile: a fixed WhatsApp bar at the bottom instead of the floating button */
  .wa-float{display:none}
  .m-bar{display:flex; position:fixed; inset:auto 0 0; z-index:200; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); gap:10px; background:rgba(255,255,255,.92); backdrop-filter:blur(14px); box-shadow:0 -10px 30px -16px rgba(10,27,69,.4); transform:translateY(110%); transition:transform .5s var(--ease)}
  .m-bar.show{transform:none}
  .m-bar .btn{flex:1; min-height:52px}
  .a11y-btn{bottom:auto; top:96px; right:12px; width:44px; height:44px}
  .a11y-panel{bottom:auto; top:148px; right:12px}
  .site-footer{padding-bottom:140px}
}

/* numbers with + always show the right way round (+3,000 and not 3,000+) */
.proof b, .stat b, .adi-photos .tag b{direction:ltr; unicode-bidi:isolate}
.proof{min-width:0}

/* prevents sideways scrolling on mobile (decorative circles poking past the edge) */
html, body{overflow-x:clip}
main > section{overflow-x:clip}
@media (max-width:600px){
  .a11y-btn{top:auto; bottom:84px; right:12px}
  .a11y-panel{top:auto; bottom:136px}
}

/* =====================================================================
   round 2: purple + blue, curtain, diving into the logo, Adi's story, who it's for
   ===================================================================== */

/* purple glows in the dark sections */
.sec-navy{background:radial-gradient(70% 60% at 100% 0%, rgba(123,92,240,.35), transparent 60%), radial-gradient(60% 60% at 0% 100%, rgba(40,83,201,.4), transparent 60%), var(--navy)}
.blob.a{background:#D9CCFF} .blob.b{background:#C8E6FF}
.step .num{box-shadow:0 0 0 8px rgba(155,124,247,.22), 0 14px 30px -10px rgba(0,0,0,.5)}
.process .line-fill{background:linear-gradient(90deg,var(--sky),var(--lilac),#fff)}
.chip[aria-pressed="true"], .tabs .pill{background:linear-gradient(120deg,var(--navy),#3A2E8F)}
.dots i.on{background:var(--violet)}
.class-card .area, .eyebrow{color:#5B4FD9}
.on-dark .eyebrow, .sec-navy .eyebrow{color:var(--lilac)}
.progress{background:var(--grad)}

/* ---------- WhatsApp: hidden bubble no longer pushes the button inward ---------- */
.wa-float{left:20px; bottom:20px}
.wa-float .bubble{position:absolute; left:76px; bottom:12px; order:0}

/* ---------- opening curtain ---------- */
.preloader{position:fixed; inset:0; z-index:1000; pointer-events:none}
.preloader .door{position:absolute; top:0; bottom:0; width:50.5%; transition:transform 1.15s cubic-bezier(.77,0,.18,1)}
.door-r{right:0; background:linear-gradient(200deg,#2A2A8C 0%,var(--navy) 70%)}
.door-l{left:0; background:linear-gradient(160deg,#4B2FA8 0%,var(--navy) 70%)}
.door::after{content:""; position:absolute; top:0; bottom:0; width:2px; background:linear-gradient(transparent,var(--lilac),transparent); opacity:.6}
.door-r::after{left:0} .door-l::after{right:0}
.preloader.open .door-r{transform:translateX(102%)}
.preloader.open .door-l{transform:translateX(-102%)}
.pl-center{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:22px; transition:opacity .4s, transform .6s var(--ease)}
.preloader.open .pl-center{opacity:0; transform:scale(1.15)}
.pl-logo{width:min(320px,60vw); aspect-ratio:760/291; -webkit-mask:url(../img/zur-logo.png) center/contain no-repeat; mask:url(../img/zur-logo.png) center/contain no-repeat;
  background:linear-gradient(110deg,#8FA4D8 0%,#8FA4D8 40%,#fff 50%,#C9B5FF 60%,#8FA4D8 70%) 0 0/300% 100%; animation:plShine 1.8s .2s ease-in-out forwards, plIn .9s var(--ease) both}
@keyframes plShine{to{background-position:100% 0}}
@keyframes plIn{from{opacity:0; transform:scale(.85); filter:blur(8px)}}
.pl-count{color:#C9D4F5; font-family:"Rubik"; font-size:1.05rem; opacity:0; animation:fadeUp .7s .5s var(--ease) forwards}
.pl-count b{color:#fff; font-size:1.3rem; display:inline-block; min-width:4.2ch; direction:ltr; unicode-bidi:isolate}
html.pl-done .preloader{display:none}

/* ---------- diving into the logo ---------- */
.iz{height:230vh; background:var(--navy)}
.iz-sticky{position:sticky; top:0; height:100svh; overflow:hidden; color:#fff}
.iz-media{position:absolute; inset:0; background:var(--navy)}
.iz-media img, .iz-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.iz-slides img{opacity:0; animation:izSlide 20s infinite}
.iz-slides img:nth-child(2){animation-delay:4s} .iz-slides img:nth-child(3){animation-delay:8s}
.iz-slides img:nth-child(4){animation-delay:12s} .iz-slides img:nth-child(5){animation-delay:16s}
@keyframes izSlide{0%{opacity:0; transform:scale(1.15)} 5%{opacity:1} 20%{opacity:1} 26%{opacity:0; transform:scale(1)} 100%{opacity:0}}
.iz-media video{opacity:0; transition:opacity 1s}
.iz-media video.ready{opacity:1}
.iz-shade{position:absolute; inset:0; opacity:0; background:linear-gradient(to top, rgba(12,20,66,.95) 0%, rgba(12,20,66,.55) 45%, rgba(40,20,110,.25) 75%, rgba(12,20,66,.55) 100%), radial-gradient(70% 60% at 85% 100%, rgba(123,92,240,.5), transparent 70%)}
/* the logo as a window: the purple-blue layer covers everything except the letters */
.iz-mask{position:absolute; inset:-2px; will-change:transform, opacity;
  background:radial-gradient(60% 70% at 50% 40%, #241C6E 0%, var(--navy) 70%);
  -webkit-mask:url(../img/zur-logo.png) center 42%/min(78vw,980px) auto no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:url(../img/zur-logo.png) center 42%/min(78vw,980px) auto no-repeat exclude, linear-gradient(#000 0 0)}
.iz-teaser{position:absolute; inset:auto 0 9vh; text-align:center; will-change:opacity}
.iz-teaser p{font-family:"Rubik"; font-weight:700; font-size:clamp(1.3rem,2.6vw,2rem); margin:0 0 6px; background:linear-gradient(120deg,#A9D8FF,#D3C2FF); -webkit-background-clip:text; background-clip:text; color:transparent}
.iz-teaser span{color:#AFBDE8; font-size:1.05rem; letter-spacing:.04em}
.iz-cue{display:block; margin:26px auto 0; font-style:normal; font-size:.85rem; letter-spacing:.2em; color:#C9C2F5; position:relative; padding-bottom:44px}
.iz-cue::after{content:""; position:absolute; bottom:0; left:50%; width:2px; height:34px; margin-left:-1px; background:linear-gradient(var(--lilac),transparent); animation:cueLine 1.8s infinite}
@keyframes cueLine{0%{transform:scaleY(0); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}
.iz-content{position:absolute; inset:auto 0 0; margin-inline:auto; padding-bottom:clamp(40px,8vh,80px); pointer-events:none}
.iz-content > *{opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .9s var(--ease)}
.iz.show .iz-content{pointer-events:auto}
.iz.show .iz-content > *{opacity:1; transform:none}
.iz.show .iz-content > :nth-child(2){transition-delay:.08s} .iz.show .iz-content > :nth-child(3){transition-delay:.16s}
.iz.show .iz-content > :nth-child(4){transition-delay:.24s} .iz.show .iz-content > :nth-child(5){transition-delay:.32s}
.iz .hero-badge, .iz h1{color:#fff}
.iz h1 .line > span{animation:none; transform:translateY(110%); transition:transform 1s var(--ease)}
.iz.show h1 .line > span{transform:none}
.iz.show h1 .line:nth-child(2) > span{transition-delay:.1s} .iz.show h1 .line:nth-child(3) > span{transition-delay:.2s}
/* without animations: a regular hero, no diving */
.iz.static{height:auto} .iz.static .iz-sticky{position:relative; min-height:100svh}
.iz.static .iz-mask, .iz.static .iz-teaser{display:none} .iz.static .iz-shade{opacity:1}

/* ---------- Adi's story ---------- */
.adi-story{background:radial-gradient(60% 70% at 0% 30%, rgba(123,92,240,.38), transparent 65%), radial-gradient(50% 60% at 100% 100%, rgba(40,83,201,.45), transparent 60%), #0A0F33; color:#C9D3F2; overflow:hidden}
.adi-story h2{color:#fff}
.adi-bg-word{position:absolute; top:40px; right:0; display:flex; white-space:nowrap; pointer-events:none; animation:marquee 60s linear infinite; opacity:.07}
.adi-bg-word span{font-family:"Rubik"; font-weight:800; font-size:clamp(5rem,12vw,10rem); color:transparent; -webkit-text-stroke:1.5px #fff; padding-left:.3em}
.adi2{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,7vw,100px); align-items:center}
.adi-portrait{position:relative; max-width:480px; width:100%; justify-self:center}
.adi-portrait .frame{position:relative; border-radius:220px 220px 36px 36px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 40px 80px -30px rgba(0,0,0,.7); isolation:isolate}
.adi-portrait .frame::before{content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; padding:3px; background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.adi-portrait .frame::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,15,51,.75), transparent 45%)}
.adi-portrait img{width:100%; height:100%; object-fit:cover; object-position:22% 40%; transition:transform 1.4s var(--ease)}
.adi-portrait:hover img{transform:scale(1.05)}
.adi-portrait .sig{position:absolute; bottom:26px; right:30px; z-index:2; display:grid}
.adi-portrait .sig b{font-family:"Rubik"; font-size:1.7rem; color:#fff; line-height:1.1}
.adi-portrait .sig span{color:var(--lilac); font-size:.95rem}
.float-stat{position:absolute; z-index:3; display:grid; padding:14px 20px; border-radius:20px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(14px); animation:float 7s ease-in-out infinite}
.float-stat b{font-family:"Rubik"; font-size:1.7rem; color:#fff; line-height:1; direction:ltr; unicode-bidi:isolate; text-align:right}
.float-stat span{font-size:.9rem; color:#CFC6FF}
.float-stat.s1{top:18%; left:-34px} .float-stat.s2{top:48%; right:-30px; animation-delay:-3s}
.adi-text p{font-size:1.08rem}
.adi-story .quote{color:#fff; border-color:var(--violet)}
.adi-points{list-style:none; padding:0; margin:28px 0 32px; display:grid; gap:10px}
.adi-points li{display:flex; align-items:center; gap:16px; padding:14px 18px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); transition:background .3s, transform .4s var(--ease)}
.adi-points li:hover{background:rgba(155,124,247,.14); transform:translateX(-6px)}
.adi-points b{font-family:"Rubik"; font-size:.9rem; color:var(--lilac); letter-spacing:.1em}
.adi-points span{color:#E3E8FA; font-weight:600}
.adi-ctas{display:flex; flex-wrap:wrap; gap:12px}

/* ---------- who it's for: list + reel ---------- */
.who2{background:linear-gradient(180deg,#0A0F33 0%, #121552 100%); color:#C9D3F2; overflow:hidden}
.who2 h2{color:#fff}
.who2 .glow{position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none}
.who2 .g1{width:480px; height:480px; background:rgba(123,92,240,.35); top:10%; left:-160px}
.who2 .g2{width:420px; height:420px; background:rgba(40,120,230,.3); bottom:-120px; right:-120px}
.who2-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,6vw,90px); align-items:center}
.who-list{list-style:none; margin:0; padding:0; counter-reset:w}
.who-list li{border-bottom:1px solid rgba(255,255,255,.1); position:relative}
.who-list li::before{content:""; position:absolute; bottom:-1px; right:0; height:2px; width:100%; background:var(--grad-2); transform:scaleX(0); transform-origin:right; transition:transform .6s var(--ease)}
.who-list li.active::before{transform:scaleX(1)}
.who-list button{all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:flex; align-items:baseline; gap:20px; padding:22px 4px 18px}
.who-list button:focus-visible{outline:3px solid var(--lilac); outline-offset:4px; border-radius:8px}
.who-list button b{font-family:"Rubik"; font-size:.95rem; color:#7C86B8; letter-spacing:.1em; transition:color .3s}
.who-list button span{font-family:"Rubik"; font-weight:700; font-size:clamp(1.35rem,2.5vw,2rem); color:#8F98C6; transition:color .35s, transform .5s var(--ease)}
.who-list li:hover button span{color:#DCE2FA}
.who-list li.active button span{background:linear-gradient(120deg,#fff,#CBB8FF); -webkit-background-clip:text; background-clip:text; color:transparent; transform:translateX(-8px)}
.who-list li.active button b{color:var(--lilac)}
.who-list p{margin:0; padding:0 46px 0 4px; max-height:0; overflow:hidden; opacity:0; color:#BFC8EA; font-size:1.05rem; transition:max-height .6s var(--ease), opacity .4s, padding .5s}
.who-list li.active p{max-height:140px; opacity:1; padding-bottom:22px}
.phone-wrap{position:relative; justify-self:center; width:min(340px,86vw)}
.phone{position:relative; aspect-ratio:9/18.5; border-radius:46px; padding:12px; background:linear-gradient(145deg,#2B2F6E,#0B0E2E); box-shadow:0 0 0 2px rgba(255,255,255,.08), 0 50px 90px -30px rgba(0,0,0,.8), 0 0 80px -10px rgba(123,92,240,.45)}
.phone::before{content:""; position:absolute; top:22px; left:50%; translate:-50% 0; width:90px; height:24px; border-radius:20px; background:#05071c; z-index:2}
.phone iframe{width:100%; height:100%; border:0; border-radius:36px; background:#fff}
.chip-float{position:absolute; z-index:3; padding:10px 16px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(12px); color:#fff; font-weight:700; font-size:.92rem; white-space:nowrap; animation:float 6s ease-in-out infinite}
.chip-float.c1{top:12%; right:-56px} .chip-float.c2{top:46%; left:-70px; animation-delay:-2s} .chip-float.c3{bottom:12%; right:-40px; animation-delay:-4s}

/* ---------- before/after smaller, nothing gets cut ---------- */
.ba-card{width:clamp(210px, 21vw, 270px); border-radius:24px}
.ba-grid{grid-template-columns:repeat(4,1fr); gap:18px}
.rezult-band .ba-stack{max-width:380px}

@media (max-width:1080px){
  .ba-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .adi2, .who2-grid{grid-template-columns:1fr}
  .adi-portrait{max-width:380px}
  .float-stat.s1{left:-8px} .float-stat.s2{right:-8px}
  .chip-float.c1{right:-10px} .chip-float.c2{left:-14px} .chip-float.c3{right:-6px}
  .ba-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .ba-card{width:68vw}
  .iz-mask{-webkit-mask-size:88vw auto, auto; mask-size:88vw auto, auto}
  .iz-content .hero-proof{display:none}
}
@media (prefers-reduced-motion: reduce){ .preloader{display:none} }
html.a11y-stop .preloader{display:none}

/* ---------- before/after: small, uniform cards, like the AdVision testimonials ---------- */
.ba-card{display:block; width:100%; aspect-ratio:1; height:auto; cursor:zoom-in; transition:transform .45s var(--ease), box-shadow .45s var(--ease); z-index:0}
.ba-card img{height:100% !important; width:100%; aspect-ratio:auto; object-fit:cover}   /* the bug: the height="800" attribute stretched the image */
.ba-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px}
.ba-grid.ba-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.ba-card .zoom{position:absolute; inset:auto auto 10px 10px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.92); color:var(--navy); opacity:0; transform:scale(.7); transition:all .35s var(--ease)}
.ba-card .zoom svg{width:18px; height:18px}
@media (hover:hover){
  .ba-card:hover{transform:scale(1.12) translateY(-6px); z-index:2; box-shadow:0 26px 50px -18px rgba(12,20,66,.55)}
  .ba-card:hover img{transform:none}
  .ba-card:hover .zoom{opacity:1; transform:none}
}
.ba-card:focus-visible .zoom{opacity:1; transform:none}
@media (max-width:1080px){ .ba-grid, .ba-grid.ba-6{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:600px){ .ba-grid, .ba-grid.ba-6{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px} .ba-card{width:100%} .ba-card .zoom{opacity:1; transform:none; width:30px; height:30px} }

/* =====================================================================
   HERO v3: a moving 3D photo wall
   ===================================================================== */
.h3{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; isolation:isolate; color:#fff;
  background:#080B2A; padding:120px 0 90px; --d0:0ms}
/* moving aurora lighting in the background */
.h3-aurora{position:absolute; inset:0; z-index:-3; overflow:hidden}
.h3-aurora i{position:absolute; border-radius:50%; filter:blur(110px); opacity:.55; animation:aur 18s ease-in-out infinite alternate}
.h3-aurora i:nth-child(1){width:60vw; height:60vw; background:#4B2FC9; top:-25%; left:-15%}
.h3-aurora i:nth-child(2){width:45vw; height:45vw; background:#1C49C9; bottom:-30%; right:10%; animation-duration:22s}
.h3-aurora i:nth-child(3){width:30vw; height:30vw; background:#9B6CFF; top:30%; left:30%; opacity:.25; animation-duration:26s}
@keyframes aur{to{transform:translate(8vw,6vh) scale(1.15)}}
/* light that follows the mouse */
.h3-spot{position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .6s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(170,140,255,.18), transparent 70%)}
.h3:hover .h3-spot{opacity:1}

/* the wall: 3 columns tilted in 3D perspective */
.h3-wall-wrap{position:absolute; z-index:-2; top:-25%; bottom:-25%; left:-2%; width:60%; perspective:1600px; pointer-events:none}
.h3-wall{height:100%; display:flex; gap:20px; transform-style:preserve-3d;
  transform:rotateX(14deg) rotateY(-22deg) rotateZ(10deg) translate3d(var(--px,0), var(--py,0), 0); transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.h3-col{flex:1; overflow:hidden; opacity:0; transform:translateY(120px); animation:colIn 1.4s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(var(--d0) + var(--cd,0s))}
.h3-col.c1{--cd:.05s} .h3-col.c2{--cd:.2s; margin-top:-140px} .h3-col.c3{--cd:.35s; margin-top:-60px}
@keyframes colIn{to{opacity:1; transform:none}}
.h3-track{display:flex; flex-direction:column; gap:20px; animation:colUp 46s linear infinite}
.h3-col.c2 .h3-track{animation-name:colDown; animation-duration:54s}
.h3-col.c3 .h3-track{animation-duration:40s}
@keyframes colUp{from{transform:translateY(0)} to{transform:translateY(calc(-50% - 10px))}}
@keyframes colDown{from{transform:translateY(calc(-50% - 10px))} to{transform:translateY(0)}}
.h3-track img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:26px; filter:saturate(.95) brightness(.88);
  box-shadow:0 30px 60px -25px rgba(0,0,0,.8); outline:1px solid rgba(255,255,255,.08); outline-offset:-1px}
/* darkens toward the text so it stays readable */
.h3-fade{position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to left, #080B2A 0%, rgba(8,11,42,.92) 38%, rgba(8,11,42,.35) 62%, rgba(8,11,42,.1) 80%),
             linear-gradient(to top, #080B2A 0%, transparent 22%), linear-gradient(to bottom, rgba(8,11,42,.8) 0%, transparent 20%)}

/* the text */
.h3-content{position:relative}
.h3-content > *{max-width:640px}
.h3 h1{color:#fff; font-size:clamp(2.7rem,6.2vw,5.4rem); margin-bottom:.25em}
.h3 h1 .line{display:block; overflow:hidden; padding-bottom:.06em}
.h3-in{opacity:0; transform:translateY(40px); filter:blur(8px); animation:h3In 1.1s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(var(--d0) + .25s + var(--i) * .1s)}
.h3 h1 .h3-in{display:inline-block; transform:translateY(105%); filter:none}
@keyframes h3In{to{opacity:1; transform:none; filter:none}}
.h3-rot{font-family:"Rubik"; font-size:clamp(1.25rem,2.3vw,1.75rem); font-weight:500; color:#D2DAF7; margin-bottom:18px; display:flex; flex-wrap:wrap; gap:.35em; align-items:baseline}
.rot{position:relative; display:inline-grid; font-weight:800}
.rot b{grid-area:1/1; white-space:nowrap; background:linear-gradient(120deg,#9FD4FF,#C9B5FF 60%,#fff); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform:translateY(60%); filter:blur(6px); transition:opacity .6s, transform .7s cubic-bezier(.2,.7,.2,1), filter .6s}
.rot b.on{opacity:1; transform:none; filter:none}
.rot b.out{opacity:0; transform:translateY(-60%); filter:blur(6px)}
.h3 .hero-sub{color:#B7C2E8; margin-bottom:30px}
.h3 .hero-ctas{margin-bottom:40px}
.h3-stats{display:flex; flex-wrap:wrap; padding:18px 6px; border-radius:24px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(14px); width:fit-content}
.h3-stats div{display:grid; padding:0 24px; border-inline-start:1px solid rgba(255,255,255,.12)}
.h3-stats div:first-child{border:0}
.h3-stats b{font-family:"Rubik"; font-size:1.9rem; font-weight:800; line-height:1.1; direction:ltr; unicode-bidi:isolate; text-align:right; background:linear-gradient(120deg,#fff,#CBB8FF); -webkit-background-clip:text; background-clip:text; color:transparent}
.h3-stats span{font-size:.88rem; color:#9EABD6}
.h3 .scroll-cue{border-color:rgba(255,255,255,.3)}

@media (max-width:900px){
  .h3{align-items:flex-end; padding-bottom:70px}
  .h3-wall-wrap{width:120%; left:-10%; opacity:.55}
  .h3-fade{background:linear-gradient(to top, #080B2A 0%, rgba(8,11,42,.92) 45%, rgba(8,11,42,.4) 75%, rgba(8,11,42,.75) 100%)}
  .h3-stats{width:100%; justify-content:space-between; padding:14px 4px}
  .h3-stats div{padding:0 10px}
  .h3-stats b{font-size:1.4rem} .h3-stats span{font-size:.78rem}
  .h3 .scroll-cue{display:none}
}
@media (prefers-reduced-motion: reduce){
  .h3-track, .h3-aurora i{animation:none}
  .h3-col, .h3-in, .h3 h1 .h3-in{opacity:1; transform:none; filter:none; animation:none}
}
html.a11y-stop .h3-col, html.a11y-stop .h3-in, html.a11y-stop .h3 h1 .h3-in{opacity:1; transform:none; filter:none}

/* =====================================================================
   HEADER v2: a floating glass capsule with a traveling light
   ===================================================================== */
@property --ang{syntax:"<angle>"; initial-value:0deg; inherits:false}
.site-header{top:14px; background:none !important; box-shadow:none !important}
.site-header .wrap{width:min(1320px, 100% - 28px)}
.site-header .bar{position:relative; height:78px; gap:18px; padding:0 14px 0 26px; border-radius:999px;
  background:linear-gradient(120deg, rgba(14,16,58,.72), rgba(28,18,72,.62)); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 18px 50px -20px rgba(4,6,30,.8), inset 0 1px 0 rgba(255,255,255,.08);
  transition:height .45s var(--ease), background .4s, box-shadow .4s}
/* frame with a beam of light traveling around it */
.site-header .bar::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--ang), rgba(255,255,255,.07) 0deg, rgba(255,255,255,.07) 250deg, #7FC4F2 290deg, #B79BFF 320deg, rgba(255,255,255,.07) 350deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spinAng 7s linear infinite}
@keyframes spinAng{to{--ang:360deg}}
/* soft glow under the capsule */
.site-header .bar::after{content:""; position:absolute; inset:auto 12% -1px; height:1px; background:linear-gradient(90deg,transparent,rgba(183,155,255,.7),transparent); filter:blur(.5px)}
.site-header.scrolled .bar{height:64px; background:linear-gradient(120deg, rgba(10,12,44,.9), rgba(24,14,62,.86))}
.site-header .logo{width:104px; height:40px}

.nav{position:relative; margin-inline:auto; gap:2px; padding:6px; border-radius:999px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06)}
.nav a{z-index:1; padding:10px 18px; border-radius:999px; color:rgba(225,230,255,.78); font-size:.97rem; transition:color .3s}
.nav a::after{display:none}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:#fff; font-weight:600}
.nav a[aria-current="page"]::before{content:""; position:absolute; bottom:3px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:#B79BFF; box-shadow:0 0 10px 2px rgba(183,155,255,.9)}
.nav-ind{position:absolute; top:6px; bottom:6px; right:auto; left:0; width:0; border-radius:999px; opacity:0; pointer-events:none;
  background:linear-gradient(120deg, rgba(127,196,242,.16), rgba(155,124,247,.22)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 6px 20px -8px rgba(155,124,247,.6);
  transition:transform .5s cubic-bezier(.3,1.3,.5,1), width .5s cubic-bezier(.3,1.3,.5,1), opacity .3s}

.bar-actions{display:flex; align-items:center; gap:10px}
.icon-btn{width:50px; height:50px; border-radius:50%; display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); transition:all .3s var(--ease)}
.icon-btn svg{width:20px; height:20px}
.icon-btn:hover{background:rgba(155,124,247,.25); border-color:rgba(183,155,255,.6); transform:rotate(-12deg) scale(1.05)}
.header-cta{min-height:52px; padding:.5em 1.5em; font-size:1rem; --bg:linear-gradient(120deg,#3A63E0,#7B5CF0 60%,#A37CFF);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 10px 30px -6px rgba(123,92,240,.75), 0 0 40px -10px rgba(127,196,242,.6)}
.header-cta:hover{box-shadow:0 0 0 1px rgba(255,255,255,.3) inset, 0 14px 38px -6px rgba(123,92,240,.95), 0 0 50px -6px rgba(127,196,242,.8)}
.burger{width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); margin:0}

@media (max-width:1080px){
  .site-header .bar{height:66px; padding:0 10px 0 20px}
  .nav{display:none} .header-cta{display:none}
  .burger{display:flex}
  .bar-actions{margin-inline-start:auto}
}
@media (max-width:600px){
  .site-header{top:10px}
  .site-header .wrap{width:calc(100% - 20px)}
  .site-header .bar{height:60px}
  .site-header .logo{width:88px; height:34px}
  .icon-btn, .burger{width:44px; height:44px}
}
@media (prefers-reduced-motion: reduce){ .site-header .bar::before{animation:none} }
html.a11y-stop .site-header .bar::before{animation:none}
/* the page heroes start a bit lower because the capsule floats */
.page-hero{padding-top:190px}

/* ---------- testimonials page: the videos ---------- */
.reels{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; max-width:1100px; margin-inline:auto}
.reels.few{display:flex; justify-content:center; flex-wrap:wrap}
.reels.few .reel-card{width:min(360px,100%)}
.reel-card{margin:0; display:flex; flex-direction:column; gap:14px}
.reel-frame{position:relative; aspect-ratio:9/16.6; border-radius:30px; overflow:hidden; padding:8px; background:linear-gradient(145deg,#1E2468,#0B0E2E);
  box-shadow:0 30px 60px -28px rgba(12,20,66,.6), 0 0 0 1px rgba(123,92,240,.25); transition:transform .5s var(--ease), box-shadow .5s}
.reel-frame:hover{transform:translateY(-8px); box-shadow:0 40px 70px -26px rgba(12,20,66,.7), 0 0 0 2px rgba(155,124,247,.6), 0 0 60px -12px rgba(155,124,247,.5)}
.reel-frame iframe{width:100%; height:100%; border:0; border-radius:23px; background:#fff}
.reel-card figcaption{display:grid; gap:6px; padding:0 6px}
.reel-card figcaption b{font-family:"Rubik"; color:var(--navy); font-size:1.08rem}
.reel-tag{justify-self:start; font-size:.8rem; font-weight:700; color:#5B4FD9; background:var(--lilac-2); padding:4px 12px; border-radius:999px}
@media (max-width:900px){ .reels{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .reels{grid-template-columns:1fr; max-width:360px} }

/* =====================================================================
   class types carousel: 3D coverflow
   ===================================================================== */
.cf-sec{background:radial-gradient(60% 50% at 50% 60%, rgba(91,91,230,.28), transparent 70%), linear-gradient(180deg,#0A0F33 0%,#0D1140 100%); color:#C9D3F2; overflow:hidden}
.cf-sec h2{color:#fff}
.cf-sec .glow{position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none}
.cf-sec .g1{width:420px; height:420px; background:rgba(123,92,240,.35); top:30%; left:-120px}
.cf-sec .g2{width:420px; height:420px; background:rgba(40,120,230,.3); top:40%; right:-140px}
.cf{position:relative; height:600px; perspective:1800px; outline:none; user-select:none; -webkit-user-select:none; touch-action:pan-y}
.cf:focus-visible{outline:3px solid var(--lilac); outline-offset:-6px; border-radius:30px}
.cf-stage{position:absolute; inset:0; transform-style:preserve-3d}
/* "floor" of light under the cards */
.cf::after{content:""; position:absolute; left:50%; bottom:10px; width:min(760px,90%); height:80px; translate:-50% 0; border-radius:50%;
  background:radial-gradient(closest-side, rgba(123,140,255,.45), transparent); filter:blur(18px); pointer-events:none}
.cf-card{position:absolute; top:20px; left:50%; width:360px; height:540px; margin-left:-180px; cursor:pointer;
  transition:transform .85s cubic-bezier(.22,.8,.2,1), opacity .6s, filter .6s; transform-style:preserve-3d; will-change:transform}
.cf-card.active{cursor:default}
.cf-inner{position:relative; height:100%; border-radius:30px; overflow:hidden; background:#0B0F33; transform-style:preserve-3d;
  transition:transform .4s var(--ease), box-shadow .6s; box-shadow:0 40px 70px -30px rgba(0,0,0,.85)}
.cf-inner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), filter .6s;
  filter:brightness(calc(1 - var(--dim,0))) saturate(calc(1 - var(--dim,0) * .6))}
.cf-card.active .cf-inner img{transform:scale(1.06)}
.cf-shade{position:absolute; inset:0; background:linear-gradient(to top, rgba(8,11,42,.97) 0%, rgba(8,11,42,.75) 38%, rgba(8,11,42,.1) 70%), linear-gradient(to bottom, rgba(8,11,42,.45), transparent 25%)}
/* glare that follows the mouse */
.cf-glare{position:absolute; inset:0; opacity:0; transition:opacity .4s; mix-blend-mode:soft-light; pointer-events:none;
  background:radial-gradient(500px circle at var(--gx,50%) var(--gy,30%), rgba(255,255,255,.55), transparent 45%)}
.cf-card.active:hover .cf-glare{opacity:1}
/* glowing frame with a traveling light, only on the active card */
.cf-inner::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; pointer-events:none; z-index:4;
  background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.cf-card.active .cf-inner::after{padding:2.5px; background:conic-gradient(from var(--ang), #2B5BFF, #7FC4F2, #B79BFF, #6A4CF0, #2B5BFF); animation:spinAng 5s linear infinite}
.cf-card.active .cf-inner{box-shadow:0 0 0 1px rgba(127,196,242,.25), 0 30px 90px -20px rgba(91,91,230,.75), 0 0 120px -30px rgba(155,124,247,.9)}
.cf-star{position:absolute; top:18px; right:18px; z-index:3; padding:6px 14px; border-radius:999px; font-size:.82rem; font-weight:700; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(10px)}
.cf-body{position:absolute; inset:auto 0 0; z-index:3; padding:26px 26px 30px; text-align:center; transform:translateZ(40px)}
.cf-ic{width:52px; height:52px; margin:0 auto 12px; display:grid; place-items:center; border-radius:16px; color:#fff; background:var(--grad); box-shadow:0 10px 30px -8px rgba(123,92,240,.9)}
.cf-ic svg{width:24px; height:24px}
.cf-en{font-family:"Rubik"; font-weight:800; font-size:2rem; letter-spacing:.06em; color:#fff; margin:0 0 4px; direction:ltr}
.cf-he{margin:0 0 10px; font-family:"Rubik"; font-weight:700; font-size:1.05rem; background:linear-gradient(120deg,#9FD4FF,#C9B5FF); -webkit-background-clip:text; background-clip:text; color:transparent}
.cf-he span{font-weight:500}
.cf-desc, .cf-meta, .cf-btns{transition:opacity .5s, transform .6s var(--ease), max-height .6s var(--ease)}
.cf-desc{font-size:.98rem; color:#C9D2F0; margin:0 0 12px; line-height:1.55}
.cf-meta{display:flex; justify-content:center; align-items:center; gap:14px; font-size:.85rem; color:#9EABD6; margin-bottom:16px}
.cf-meta .dots i{background:rgba(255,255,255,.18)} .cf-meta .dots i.on{background:#B79BFF}
.cf-btns{display:flex; gap:8px; justify-content:center}
.cf-btns .btn{min-height:46px; padding:.45em 1.2em; font-size:.92rem}
.cf-card:not(.active) .cf-desc, .cf-card:not(.active) .cf-meta, .cf-card:not(.active) .cf-btns{opacity:0; transform:translateY(16px); max-height:0; margin:0; overflow:hidden}
.cf-card:not(.active) .cf-en{font-size:1.6rem}
/* progress bar for the automatic rotation */
.cf-bar{position:absolute; inset:auto 30px 12px; height:3px; border-radius:3px; background:rgba(255,255,255,.1); z-index:5; overflow:hidden; opacity:0; transition:opacity .4s}
.cf-bar i{display:block; height:100%; width:100%; background:linear-gradient(90deg,#7FC4F2,#B79BFF); transform-origin:right; transform:scaleX(0)}
.cf-card.run .cf-bar{opacity:1}
.cf-card.run .cf-bar i{animation:cfBar 5s linear forwards}
@keyframes cfBar{to{transform:scaleX(1)}}
.cf-arrow{position:absolute; top:50%; z-index:30; width:58px; height:58px; margin-top:-29px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(10px); transition:all .3s var(--ease)}
.cf-arrow:hover{background:var(--grad); border-color:transparent; transform:scale(1.08); box-shadow:0 10px 30px -8px rgba(123,92,240,.9)}
.cf-arrow svg{width:22px; height:22px}
.cf-arrow.prev{right:max(20px, calc(50% - 560px))} .cf-arrow.next{left:max(20px, calc(50% - 560px))}
/* row of class names */
.cf-names{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:10px}
.cf-names button{border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:#AEB8E0; padding:9px 18px; border-radius:999px; font-family:"Rubik"; font-weight:500; font-size:.92rem; transition:all .3s var(--ease)}
.cf-names button:hover{color:#fff; border-color:rgba(183,155,255,.5)}
.cf-names button[aria-selected="true"]{color:#fff; background:var(--grad); border-color:transparent; box-shadow:0 8px 24px -8px rgba(123,92,240,.9)}

@media (max-width:700px){
  .cf{height:540px}
  .cf-card{width:78vw; margin-left:-39vw; height:500px}
  .cf-en{font-size:1.6rem}
  .cf-body{padding:20px 18px 26px}
  .cf-arrow{top:auto; bottom:-6px; width:48px; height:48px}
  .cf-arrow.prev{right:calc(50% - 70px)} .cf-arrow.next{left:calc(50% - 70px)}
  .cf-names{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding:4px 2px 8px; scrollbar-width:none; margin-top:30px}
  .cf-names::-webkit-scrollbar{display:none}
  .cf-names button{flex:none}
}
@media (prefers-reduced-motion: reduce){ .cf-card{transition:none} .cf-card.active .cf-inner::after{animation:none} }
@media (max-width:700px){ .cf{height:590px} .cf-arrow{bottom:0} .cf::after{bottom:60px} }

/* =====================================================================
   matching quiz
   ===================================================================== */
.quiz-sec{background:linear-gradient(180deg,#0D1140 0%, #0A0F33 100%); color:#C9D3F2; overflow:hidden}
.quiz-sec h2{color:#fff}
.quiz-sec .glow{position:absolute; border-radius:50%; filter:blur(110px); pointer-events:none}
.quiz-sec .g1{width:460px; height:460px; background:rgba(123,92,240,.33); top:20%; right:-160px}
.quiz-sec .g2{width:380px; height:380px; background:rgba(40,120,230,.28); bottom:-100px; left:-100px}
.quiz{position:relative; max-width:1080px; margin-inline:auto; display:grid; grid-template-columns:340px 1fr; min-height:560px; border-radius:36px; overflow:hidden;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(16px); box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.quiz::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:3;
  background:conic-gradient(from var(--ang), rgba(255,255,255,.06) 0deg 260deg, #7FC4F2 300deg, #B79BFF 330deg, rgba(255,255,255,.06) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:spinAng 9s linear infinite}
/* side panel: an image that changes with each step + a step tracker */
.qz-side{position:relative; overflow:hidden}
.qz-side img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.12); transition:opacity .9s, transform 6s ease-out}
.qz-side img.on{opacity:1; transform:scale(1)}
.qz-side-shade{position:absolute; inset:0; background:linear-gradient(to top, rgba(10,12,48,.95) 15%, rgba(40,24,120,.45) 60%, rgba(10,12,48,.35))}
.qz-track{position:absolute; inset:auto 28px 30px; list-style:none; margin:0; padding:0; display:grid; gap:12px}
.qz-track li{display:flex; align-items:center; gap:12px; color:rgba(220,226,250,.5); font-family:"Rubik"; font-weight:500; transition:color .4s}
.qz-track i{width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:.85rem; font-weight:700;
  border:1.5px solid rgba(255,255,255,.25); transition:all .45s var(--ease)}
.qz-track li.cur{color:#fff}
.qz-track li.cur i{background:var(--grad); border-color:transparent; box-shadow:0 0 0 5px rgba(155,124,247,.25), 0 0 24px rgba(155,124,247,.8)}
.qz-track li.done{color:#C9C2F5}
.qz-track li.done i{background:rgba(155,124,247,.3); border-color:rgba(183,155,255,.6)}
/* main panel */
.qz-main{display:flex; flex-direction:column; padding:clamp(26px,4vw,44px)}
.qz-top{display:flex; align-items:center; gap:16px; margin-bottom:26px}
.qz-count{font-size:.9rem; color:#9EABD6; white-space:nowrap; font-weight:600}
.qz-bar{flex:1; height:6px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden}
.qz-bar i{display:block; height:100%; background:linear-gradient(90deg,#7FC4F2,#9B7CF7,#C2A8FF); transform-origin:right; transform:scaleX(0); transition:transform .6s var(--ease); box-shadow:0 0 14px rgba(155,124,247,.8)}
.qz-panel{flex:1; outline:none}
.qz-panel.in{animation:qzIn .55s var(--ease)}
@keyframes qzIn{from{opacity:0; transform:translateX(calc(var(--dir,1) * -40px))}}
.qz-panel h3{color:#fff; font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:6px}
.qz-sub{color:#9EABD6; margin-bottom:24px}
.qz-opts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.qz-opt{position:relative; display:flex; align-items:center; gap:14px; text-align:right; padding:16px 18px; border-radius:20px; color:#fff;
  background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.1); transition:all .35s var(--ease); animation:fadeUp .5s var(--ease) both; animation-delay:calc(var(--k) * .05s)}
.qz-opt:hover{border-color:rgba(183,155,255,.55); background:rgba(155,124,247,.08); transform:translateY(-3px)}
.qz-e{width:50px; height:50px; flex:none; border-radius:15px; display:grid; place-items:center; font-size:1.6rem; background:rgba(255,255,255,.07); transition:transform .4s var(--ease)}
.qz-opt:hover .qz-e{transform:scale(1.1) rotate(-6deg)}
.qz-t{display:grid; flex:1}
.qz-t b{font-family:"Rubik"; font-size:1.05rem}
.qz-t small{color:#9EABD6; font-size:.88rem}
.qz-check{width:24px; height:24px; flex:none; border-radius:50%; border:1.5px solid rgba(255,255,255,.25); transition:all .3s var(--ease)}
.qz-opt[aria-checked="true"]{border-color:transparent; background:linear-gradient(120deg, rgba(43,91,255,.28), rgba(155,124,247,.32)); box-shadow:0 0 0 1.5px #A98BFF, 0 14px 34px -14px rgba(155,124,247,.9)}
.qz-opt[aria-checked="true"] .qz-check{border-color:transparent; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B4FD9' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat; transform:scale(1.1)}
.qz-opt[aria-checked="true"] .qz-e{background:var(--grad)}
.qz-field{display:grid; gap:8px; max-width:440px}
.qz-field span{font-weight:600; color:#C9D2F0}
.qz-field input{font:inherit; font-size:1.2rem; padding:16px 20px; border-radius:18px; color:#fff; background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.15); outline:none; transition:border-color .3s, box-shadow .3s}
.qz-field input:focus{border-color:#A98BFF; box-shadow:0 0 0 4px rgba(155,124,247,.25)}
.qz-field input::placeholder{color:#7C86B8}
.qz-nav{display:flex; justify-content:space-between; gap:12px; margin-top:28px}
.qz-nav .btn{min-height:52px}
.qz-next:disabled{opacity:.35; pointer-events:none}
.qz-next[hidden]{display:none}
/* result */
.qz-res{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px}
.qz-card{position:relative; border-radius:20px; overflow:hidden; aspect-ratio:3/3.6; animation:fadeUp .7s var(--ease) both; animation-delay:calc(.15s + var(--k) * .12s)}
.qz-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.qz-card::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,11,42,.95), transparent 60%)}
.qz-card > div{position:absolute; inset:auto 14px 14px; z-index:1; display:grid}
.qz-card b{color:#fff; font-family:"Rubik"; font-size:1.1rem}
.qz-card small{color:#C9C2F5; font-size:.8rem}
.qz-rank{position:absolute; top:10px; right:10px; z-index:1; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; background:var(--grad); box-shadow:0 0 18px rgba(155,124,247,.8)}
.qz-card:first-child{box-shadow:0 0 0 2px #A98BFF, 0 18px 40px -16px rgba(155,124,247,.9)}
.qz-rez{font-size:.98rem; color:#D6DCF5} .qz-rez a{color:#C9B5FF}
.qz-send{width:100%}
.qz-note{text-align:center; font-size:.88rem; color:#8E99C6; margin:10px 0 4px}
.qz-restart{display:block; margin:0 auto; background:none; border:0; color:#9EABD6; text-decoration:underline; font-size:.9rem}

@media (max-width:860px){
  .quiz{grid-template-columns:1fr}
  .qz-side{height:150px}
  .qz-track{inset:auto 16px 16px; display:flex; justify-content:space-between}
  .qz-track span{display:none}
  .qz-opts{grid-template-columns:1fr}
}
@media (max-width:600px){ .qz-res{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px} .qz-card b{font-size:.92rem} .qz-card small{display:none} }

/* =====================================================================
   FAQ v2
   ===================================================================== */
.faq2-sec{background:linear-gradient(180deg,#F7F8FF 0%,#EFEEFF 100%); overflow:hidden}
.faq2{display:grid; grid-template-columns:380px 1fr; gap:clamp(30px,5vw,70px); align-items:start}
.faq2-side{position:sticky; top:120px}
.faq2-help{margin-top:28px; padding:24px; border-radius:28px; color:#D6DCF5; position:relative; overflow:hidden; display:grid; gap:14px;
  background:radial-gradient(120% 120% at 0% 0%, #3B2E9E 0%, var(--navy) 60%); box-shadow:0 30px 60px -30px rgba(12,20,66,.7)}
.faq2-help > div{display:grid}
.faq2-help b{color:#fff; font-family:"Rubik"; font-size:1.15rem}
.faq2-help span{font-size:.95rem}
.faq2-av{width:50px; height:50px; border-radius:16px; display:grid; place-items:center; font-size:1.5rem; background:rgba(255,255,255,.1)}
.faq2-help .btn{width:100%}
.faq2-search{display:flex; align-items:center; gap:12px; padding:0 20px; border-radius:20px; background:#fff; border:1.5px solid var(--line); box-shadow:var(--shadow-sm); margin-bottom:18px; transition:border-color .3s, box-shadow .3s}
.faq2-search:focus-within{border-color:#9B7CF7; box-shadow:0 0 0 4px rgba(155,124,247,.18)}
.faq2-search svg{width:22px; height:22px; color:#7B6FD9; flex:none}
.faq2-search input{flex:1; border:0; outline:none; font:inherit; padding:17px 0; background:none; color:var(--ink)}
.faq2-cats{margin-bottom:22px}
.faq2-list{display:grid; gap:12px}
.fq{border-radius:22px; background:#fff; border:1px solid var(--line); position:relative; overflow:hidden; transition:box-shadow .4s, border-color .4s, transform .4s var(--ease)}
.fq::before{content:""; position:absolute; top:0; bottom:0; right:0; width:4px; background:var(--grad); transform:scaleY(0); transition:transform .5s var(--ease)}
.fq:hover{border-color:#D9D2FF}
.fq.open{box-shadow:0 22px 50px -26px rgba(60,40,160,.45); border-color:#D9D2FF}
.fq.open::before{transform:scaleY(1)}
.fq h3{margin:0; font-size:inherit}
.fq-q{all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:flex; align-items:center; gap:16px; padding:20px 24px}
.fq-q:focus-visible{outline:3px solid #9B7CF7; outline-offset:-3px; border-radius:22px}
.fq-n{font-family:"Rubik"; font-weight:700; font-size:.85rem; color:#A9A3D9; letter-spacing:.06em; transition:color .3s}
.fq.open .fq-n{color:#6B5CE7}
.fq-t{flex:1; font-family:"Rubik"; font-weight:600; font-size:1.08rem; color:var(--navy)}
.fq-ic{width:36px; height:36px; flex:none; border-radius:50%; background:var(--lilac-2); position:relative; transition:background .35s, transform .45s var(--ease)}
.fq-ic::before, .fq-ic::after{content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; margin:-1px 0 0 -7px; border-radius:2px; background:#6B5CE7; transition:transform .45s var(--ease), background .3s}
.fq-ic::after{transform:rotate(90deg)}
.fq.open .fq-ic{background:var(--grad); transform:rotate(180deg)}
.fq.open .fq-ic::before, .fq.open .fq-ic::after{background:#fff}
.fq.open .fq-ic::after{transform:rotate(0)}
/* smooth height animation without JS */
.fq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease)}
.fq-a > div{overflow:hidden}
.fq.open .fq-a{grid-template-rows:1fr}
.fq-a p{margin:0; padding:0 64px 22px 24px; color:var(--muted); opacity:0; transform:translateY(-6px); transition:opacity .4s .1s, transform .5s var(--ease)}
.fq.open .fq-a p{opacity:1; transform:none}
.fq-a a{color:#5B4FD9; font-weight:600}
.faq2-empty{text-align:center; padding:30px; color:var(--muted)} .faq2-empty a{color:#5B4FD9; font-weight:700}
@media (max-width:960px){ .faq2{grid-template-columns:1fr} .faq2-side{position:static} }
@media (max-width:600px){ .fq-q{padding:16px 16px; gap:12px} .fq-t{font-size:1rem} .fq-a p{padding:0 16px 18px} .faq2-cats{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none} .faq2-cats .chip{flex:none} }

/* =====================================================================
   DARK THEME: one uniform background in blue-purple across the whole site, no white
   (this block comes last and overrides the light colors from earlier)
   ===================================================================== */
:root{
  --bg:#0E1240;                 /* the site's base color: blue-purple */
  --bg-2:#141550;
  --card:rgba(255,255,255,.045);
  --card-b:rgba(255,255,255,.10);
  --txt:#E6E9FA;
  --txt-2:#AEB7DE;
  --line:rgba(255,255,255,.10);
}
html{background:var(--bg)}
body{color:var(--txt);
  background:
    radial-gradient(60vw 60vw at 100% 0%, rgba(110,80,230,.22), transparent 60%),
    radial-gradient(55vw 55vw at 0% 40%, rgba(40,90,220,.20), transparent 60%),
    radial-gradient(60vw 60vw at 100% 85%, rgba(130,90,240,.18), transparent 60%),
    linear-gradient(180deg, #0D1140 0%, #121350 50%, #0E1240 100%);
  background-attachment:fixed}
h1,h2,h3,h4{color:#fff}
.lead, p{color:var(--txt-2)}
.lead b, p b{color:#fff}
.hl{background:linear-gradient(120deg,#9FD4FF 0%,#B9A4FF 50%,#E4D9FF 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.eyebrow{color:#B9A4FF}
a{color:inherit}

/* all sections take on the same base, so there's no "cut" between white and dark */
.sec, .sec-ice, .sec-navy, .faq2-sec, .cf-sec, .quiz-sec, .who2, .adi-story{background:transparent}
.sec-ice{background:linear-gradient(180deg, transparent, rgba(110,80,230,.07) 30%, rgba(110,80,230,.07) 70%, transparent)}
.blob{opacity:.35} .blob.a{background:#5B3FD0} .blob.b{background:#2A5AD8}
.site-footer{background:rgba(5,8,32,.75); border-top:1px solid var(--line)}
.page-hero{background:transparent}
.page-hero::before{background:linear-gradient(180deg, rgba(14,18,64,.55), var(--bg) 96%), radial-gradient(70% 70% at 90% 10%, rgba(110,80,230,.5), transparent 70%)}

/* buttons */
.btn-ghost{--fg:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #B9A4FF; background:rgba(155,124,247,.12)}
.btn-white{--bg:#fff; --fg:#1A1650}

/* cards: dark glass instead of white */
.stat, .who-card, .diff li, .class-card, .slot, .day, .chip, .tabs, .fq, .faq2-search, .pain div, .yes-no > div, .guarantee, .empty,
.rail-btn, .masonry .g-item, .strip .g-item, .ba-card, .faq details{background:var(--card); border-color:var(--card-b); color:var(--txt)}
.stat span, .who-card p, .diff p, .class-card p, .meta, .slot .info span, .day small, .guarantee p{color:var(--txt-2)}
.class-card .area{color:#B9A4FF}
.class-card .bd{background:transparent}
.dots i{background:rgba(255,255,255,.16)} .dots i.on{background:#B79BFF}
.fit li{color:var(--txt)} .fit li::before{color:#B79BFF}
.meta{border-top-color:var(--line)}
.chip{color:var(--txt)} .chip:hover{border-color:#B9A4FF}
.chip[aria-pressed="true"]{background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 8px 24px -10px rgba(123,92,240,.9)}
.tabs button{color:var(--txt-2)} .tabs .pill{background:var(--grad)}
.rail-btn{color:#fff} .rail-btn:hover{background:var(--grad); border-color:transparent}
.quote{color:#fff; border-color:#9B7CF7}
.checks li{color:var(--txt)}
.sec:not(.sec-navy) .checks li::before{background-color:#B9A4FF}
.yes-no h3{color:#fff}
.pain div{color:var(--txt)} .pain div::before{background:rgba(255,90,130,.15); color:#FF8FAE}

/* timetable */
.day{color:#fff} .day:hover{border-color:#B9A4FF}
.day[aria-pressed="true"]{background:var(--grad); box-shadow:0 10px 26px -10px rgba(123,92,240,.9)}
.slot .time{color:#fff}
.slot:hover{border-color:rgba(185,164,255,.45)}
.slot.now{border-color:#9B7CF7; box-shadow:0 0 0 3px rgba(155,124,247,.2)}
.live{color:#9FD4FF}
.side-card{background:linear-gradient(160deg, rgba(110,80,230,.25), rgba(255,255,255,.04)); border:1px solid var(--card-b)}
.demo-note{background:rgba(255,214,102,.14); color:#FFD98A}

/* FAQ */
.fq-t{color:#fff}
.fq-n{color:#8C86C9} .fq.open .fq-n{color:#C9B5FF}
.fq-ic{background:rgba(185,164,255,.15)} .fq-ic::before, .fq-ic::after{background:#C9B5FF}
.fq:hover, .fq.open{border-color:rgba(185,164,255,.4)}
.fq.open{background:rgba(255,255,255,.07); box-shadow:0 22px 50px -26px rgba(0,0,0,.6)}
.fq-a a, .faq2-empty a{color:#C9B5FF}
.faq2-search{box-shadow:none} .faq2-search input{color:#fff} .faq2-search input::placeholder{color:#8790BE} .faq2-search svg{color:#B9A4FF}
.faq2-help{background:linear-gradient(160deg, rgba(110,80,230,.4), rgba(40,90,220,.2)); border:1px solid var(--card-b)}
.faq summary{color:#fff} .faq summary::after{background:rgba(185,164,255,.15); color:#C9B5FF}
.faq .ans{color:var(--txt-2)}

/* testimonials + gallery */
.reel-card figcaption b{color:#fff}
.reel-tag{background:rgba(185,164,255,.16); color:#D9CCFF}
.masonry .g-item, .strip .g-item{background:rgba(255,255,255,.04)}

/* mobile: the bottom WhatsApp bar on dark glass */
.m-bar{background:rgba(14,18,64,.85); box-shadow:0 -10px 30px -16px rgba(0,0,0,.7); border-top:1px solid var(--line)}

/* accessibility menu: matches the theme */
.a11y-panel{background:#16195A; border-color:var(--card-b)}
.a11y-panel h2{color:#fff}
.a11y-panel button{background:rgba(255,255,255,.06); border-color:var(--card-b); color:#fff}
.a11y-panel button[aria-pressed="true"]{background:var(--grad); border-color:transparent}
.a11y-panel .reset{background:transparent}
.a11y-panel a{color:#C9B5FF}
.a11y-btn{background:linear-gradient(135deg,#3A63E0,#7B5CF0)}
html.a11y-contrast body{background:#05071E}
html.a11y-contrast .lead, html.a11y-contrast p{color:#fff !important}

/* accessibility statement page */
body[data-page="a11y"] main .sec p{color:var(--txt)}

/* =====================================================================
   opening: the storm
   ===================================================================== */
.storm{position:fixed; inset:0; z-index:1000; overflow:hidden; background:#04051A; pointer-events:auto; --flash:.6}
/* stormy sky: moving dark clouds */
.storm-sky{position:absolute; inset:-10%; background:
   radial-gradient(40% 30% at 20% 20%, rgba(70,60,160,.35), transparent 70%),
   radial-gradient(45% 35% at 80% 15%, rgba(40,70,170,.3), transparent 70%),
   radial-gradient(60% 50% at 50% 110%, rgba(110,70,230,.35), transparent 70%),
   radial-gradient(30% 25% at 60% 40%, rgba(30,30,90,.6), transparent 70%);
  animation:clouds 6s ease-in-out infinite alternate}
@keyframes clouds{to{transform:translate(-3%,2%) scale(1.08)}}
/* rain */
.storm-rain{position:absolute; inset:-50% -20%; opacity:0; transition:opacity .6s;
  background-image:repeating-linear-gradient(105deg, transparent 0 18px, rgba(180,200,255,.14) 18px 19px, transparent 19px 46px);
  animation:rain .35s linear infinite}
.storm.go .storm-rain{opacity:1}
@keyframes rain{to{background-position:-60px 220px}}
/* lightning bolts */
.storm-bolts{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.bolt path{fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:2000; stroke-dashoffset:2000; animation:boltDraw .09s linear forwards, boltFade .55s .09s ease-out forwards}
.bolt .glow{stroke:#9FB4FF; stroke-width:14; opacity:.45; filter:blur(6px)}
.bolt .core{stroke:#fff; stroke-width:3.2}
.bolt .br{stroke:#DCE4FF; stroke-width:1.6}
.bolt.big .core{stroke-width:6} .bolt.big .glow{stroke-width:30; stroke:#B79BFF; opacity:.7}
@keyframes boltDraw{to{stroke-dashoffset:0}}
@keyframes boltFade{0%{opacity:1} 20%{opacity:.25} 35%{opacity:1} 100%{opacity:0}}
/* flash of the whole screen */
.storm-flash{position:absolute; inset:0; background:radial-gradient(circle at 50% 40%, #E9EEFF, #A9B8FF 60%, #6A5AE0); opacity:0; mix-blend-mode:screen; pointer-events:none}
.storm.flash .storm-flash{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:0} 8%{opacity:var(--flash)} 18%{opacity:.08} 28%{opacity:calc(var(--flash) * .7)} 100%{opacity:0}}
/* tremor from the thunder */
.storm.quake .storm-logo, .storm.quake .storm-sky{animation-name:quake; animation-duration:.45s; animation-timing-function:linear}
@keyframes quake{0%,100%{transform:none} 10%{transform:translate(-8px,4px)} 20%{transform:translate(7px,-5px)} 30%{transform:translate(-6px,-3px)} 40%{transform:translate(5px,5px)} 55%{transform:translate(-4px,2px)} 70%{transform:translate(3px,-2px)} 85%{transform:translate(-1px,1px)}}

/* the logo: three layers (blue, purple, white) that separate during the shaking, like an electric "glitch" */
.storm-logo{position:absolute; left:50%; top:47%; width:min(560px,78vw); aspect-ratio:760/291; translate:-50% -50%}
.sl{position:absolute; inset:0; -webkit-mask:url(../img/zur-logo.png) center/contain no-repeat; mask:url(../img/zur-logo.png) center/contain no-repeat}
.sl-main{background:linear-gradient(110deg,#6E7AA8 0%,#C9D3F5 45%,#fff 50%,#C9D3F5 55%,#6E7AA8 100%) 0 0/250% 100%; opacity:0; filter:brightness(.4)}
.sl-b{background:#38A8FF; opacity:0; mix-blend-mode:screen}
.sl-p{background:#B06CFF; opacity:0; mix-blend-mode:screen}
.storm.go .sl-main{animation:logoIn 1.2s .3s ease-out forwards, logoShine 2.4s .4s ease-in-out infinite}
@keyframes logoIn{0%{opacity:0; filter:brightness(.2) blur(6px)} 30%{opacity:1; filter:brightness(2.2) blur(0)} 45%{filter:brightness(.6)} 100%{opacity:1; filter:brightness(1)}}
@keyframes logoShine{to{background-position:100% 0}}
/* shaking + electric charge */
.storm.charged .storm-logo{animation:jitter .12s steps(2) infinite}
@keyframes jitter{0%{transform:translate(1px,-1px) rotate(-.4deg)} 50%{transform:translate(-2px,1px) rotate(.5deg)} 100%{transform:translate(1px,2px) rotate(-.2deg)}}
.storm.charged .sl-b{animation:glitchB .18s steps(2) infinite; opacity:.75}
.storm.charged .sl-p{animation:glitchP .22s steps(2) infinite; opacity:.75}
@keyframes glitchB{0%{transform:translate(-5px,1px)} 50%{transform:translate(4px,-2px)} 100%{transform:translate(-3px,0)}}
@keyframes glitchP{0%{transform:translate(5px,-1px)} 50%{transform:translate(-4px,2px)} 100%{transform:translate(3px,1px)}}
.storm.charged .storm-logo{filter:drop-shadow(0 0 18px rgba(120,160,255,.85)) drop-shadow(0 0 50px rgba(160,110,255,.6))}
/* the big strike: the logo lights up completely */
.storm.hit .sl-main{filter:brightness(3) !important; background:#fff}
.storm.hit .storm-logo{filter:drop-shadow(0 0 30px #fff) drop-shadow(0 0 90px #B79BFF); animation:jitter .06s steps(2) infinite}
/* the burst into the site */
.storm.burst{animation:stormOut .75s cubic-bezier(.7,0,.3,1) forwards; pointer-events:none}
.storm.burst .storm-logo{animation:none; transition:transform .75s cubic-bezier(.7,0,.2,1), opacity .6s .1s, filter .6s; transform:scale(9); opacity:0; filter:blur(10px) drop-shadow(0 0 60px #fff)}
@keyframes stormOut{0%{opacity:1} 60%{opacity:1} 100%{opacity:0}}
.storm-skip{position:absolute; bottom:28px; left:28px; z-index:3; background:rgba(255,255,255,.08); color:#C9D2F5; border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:9px 18px; font-size:.9rem; backdrop-filter:blur(8px); transition:background .3s}
.storm-skip:hover{background:rgba(255,255,255,.18); color:#fff}
.storm.burst .storm-skip{opacity:0}
@media (prefers-reduced-motion: reduce){ .storm{display:none} }
html.a11y-stop .storm{display:none}

/* ---- storm v2: natural motion driven by JS, more lightning, exit with a "scroll" up ---- */
.storm.charged .storm-logo, .storm.hit .storm-logo, .storm.quake .storm-logo{animation:none}
.storm.charged .sl-b, .storm.charged .sl-p{animation:none}
.storm-logo{will-change:transform; --glow:.25;
  filter:drop-shadow(0 0 calc(10px + var(--glow) * 30px) rgba(120,160,255,calc(var(--glow) * .9))) drop-shadow(0 0 calc(var(--glow) * 70px) rgba(160,110,255,calc(var(--glow) * .7)))}
.storm.charged .storm-logo{filter:drop-shadow(0 0 calc(10px + var(--glow) * 30px) rgba(120,160,255,calc(var(--glow) * .9))) drop-shadow(0 0 calc(var(--glow) * 70px) rgba(160,110,255,calc(var(--glow) * .7)))}
.storm.hit .storm-logo{filter:drop-shadow(0 0 30px #fff) drop-shadow(0 0 100px #B79BFF)}
.sl-b, .sl-p{transition:none}
.storm-sky{animation:none; will-change:transform}
/* distant bolts: thinner and paler */
.bolt.far .core{stroke-width:1.6; opacity:.6} .bolt.far .glow{stroke-width:8; opacity:.25}
/* cloud lightning: the clouds light up from inside */
.storm-sky::after{content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(35% 25% at var(--sx,30%) 18%, rgba(190,200,255,.55), transparent 70%), radial-gradient(30% 22% at 75% 12%, rgba(170,150,255,.4), transparent 70%)}
.storm.sheet .storm-sky::after{animation:sheet .7s ease-out}
@keyframes sheet{0%{opacity:0} 15%{opacity:.8} 30%{opacity:.2} 45%{opacity:.6} 100%{opacity:0}}
/* exit: the storm slides up like a scroll, with a glowing line at its bottom edge */
.storm.lift{transform:translateY(-102%); transition:transform 1.25s cubic-bezier(.76,0,.24,1); pointer-events:none; animation:none}
.storm::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,transparent,#7FC4F2,#B79BFF,transparent); box-shadow:0 0 30px 6px rgba(155,124,247,.7); opacity:0; transition:opacity .3s}
.storm.lift::after{opacity:1}
.storm.lift .storm-skip{opacity:0}
/* the home page rises from below while the storm goes up */
html.intro-lift main{animation:pageRise 1.25s cubic-bezier(.76,0,.24,1)}
@keyframes pageRise{from{transform:translateY(18vh)}}

/* =====================================================================
   the studio: a bento grid of the 4 areas
   ===================================================================== */
.studio-head{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,5vw,70px); align-items:end; margin-bottom:46px}
.studio-head .lead{margin:0}
.bento{display:grid; grid-template-columns:1.25fr 1fr 1fr; grid-template-rows:300px 260px; gap:18px}
.bn{position:relative; display:block; border-radius:30px; overflow:hidden; text-decoration:none; color:#fff; isolation:isolate;
  border:1px solid rgba(255,255,255,.1); box-shadow:0 30px 60px -30px rgba(0,0,0,.7); transition:transform .6s var(--ease), box-shadow .6s, border-color .4s}
.bn-1{grid-row:span 2}
.bn-4{grid-column:span 2}
.bn img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.4s var(--ease), filter .6s; filter:saturate(.9) brightness(.85)}
.bn-shade{position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(10,12,48,.95) 0%, rgba(30,20,90,.55) 45%, rgba(10,12,48,.05) 80%)}
.bn:hover{transform:translateY(-6px); border-color:rgba(185,164,255,.5); box-shadow:0 40px 80px -30px rgba(0,0,0,.8), 0 0 60px -20px rgba(155,124,247,.7)}
.bn:hover img{transform:scale(1.08); filter:saturate(1.05) brightness(.95)}
.bn-num{position:absolute; top:18px; right:22px; font-family:"Rubik"; font-weight:800; font-size:2.6rem; line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.55)}
.bn-body{position:absolute; inset:auto 0 0; padding:24px 26px; display:grid; gap:6px}
.bn-en{font-family:"Rubik"; font-size:.78rem; letter-spacing:.18em; color:#B9A4FF; direction:ltr; text-align:right}
.bn-name{font-family:"Rubik"; font-size:clamp(1.3rem,2vw,1.7rem); font-weight:800}
.bn-desc{color:#C9D2F0; font-size:.98rem; line-height:1.5; max-width:440px}
.bn-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.bn-tags i{font-style:normal; font-size:.82rem; font-weight:600; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px)}
.bn-go{position:absolute; top:18px; left:18px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(8px); transition:all .4s var(--ease)}
.bn-go svg{width:18px; height:18px}
.bn:hover .bn-go{background:var(--grad); border-color:transparent; transform:rotate(-45deg) scale(1.08)}
.studio-stats{margin-top:26px}
.studio-sec .stats{padding:0}
@media (max-width:900px){
  .studio-head{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr 1fr; grid-template-rows:auto}
  .bn{min-height:260px}
  .bn-1{grid-row:auto; grid-column:span 2; min-height:340px}
  .bn-4{grid-column:span 2}
}
@media (max-width:600px){
  .bento{grid-template-columns:1fr}
  .bn-1, .bn-4{grid-column:auto}
  .bn{min-height:280px}
}

/* ---- storm v3: a soft exit into the home page (instead of sliding up) ---- */
.storm.exit{pointer-events:none; animation:stormFade .9s cubic-bezier(.4,0,.2,1) forwards}
@keyframes stormFade{0%{opacity:1} 25%{opacity:1} 100%{opacity:0}}
.storm.exit .storm-rain, .storm.exit .storm-bolts, .storm.exit .storm-skip{opacity:0 !important; transition:opacity .15s; animation:none}
.storm.exit .storm-flash{animation:exitFlash .9s ease-out forwards}
@keyframes exitFlash{0%{opacity:.5} 100%{opacity:0}}
.storm.exit .storm-logo{transition:transform .9s cubic-bezier(.6,0,.2,1), opacity .55s .2s ease, filter .6s; transform:scale(5) !important; opacity:0; filter:blur(6px) drop-shadow(0 0 40px #fff)}
.storm.exit .sl-b, .storm.exit .sl-p{opacity:0 !important}
/* the home page "comes in" toward the camera */
html.intro-exit .h3{animation:heroIn 1.1s cubic-bezier(.2,.7,.2,1)}
@keyframes heroIn{from{transform:scale(1.1); opacity:.3}}

/* =====================================================================
   upcoming classes
   ===================================================================== */
.up-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:30px}
.up-head h2{margin:8px 0 0}
.up-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.up-card{position:relative; min-height:360px; border-radius:30px; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:space-between;
  border:1px solid rgba(255,255,255,.1); box-shadow:0 30px 60px -30px rgba(0,0,0,.7); animation:fadeUp .7s var(--ease) both; animation-delay:var(--d);
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s}
.up-card:hover{transform:translateY(-6px); border-color:rgba(185,164,255,.5); box-shadow:0 40px 70px -30px rgba(0,0,0,.8), 0 0 50px -18px rgba(155,124,247,.7)}
.up-card > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; filter:saturate(.85) brightness(.7); transition:transform 1.2s var(--ease)}
.up-card:hover > img{transform:scale(1.07)}
.up-shade{position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(12,14,52,.97) 30%, rgba(30,20,90,.6) 65%, rgba(12,14,52,.35))}
.up-top{display:flex; justify-content:space-between; align-items:center; padding:20px 22px 0}
.up-day{font-family:"Rubik"; font-weight:700; font-size:.9rem; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(8px)}
.up-left{font-size:.88rem; font-weight:700; color:#D9CCFF; display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; background:rgba(155,124,247,.2); border:1px solid rgba(185,164,255,.35)}
.up-left i{width:8px; height:8px; border-radius:50%; background:#2BE07A; box-shadow:0 0 0 0 rgba(43,224,122,.7); animation:ping2 1.6s infinite}
.up-body{padding:0 22px 22px}
.up-time{font-family:"Rubik"; font-weight:800; font-size:3rem; line-height:1; letter-spacing:-.02em; direction:ltr; text-align:right;
  background:linear-gradient(120deg,#fff,#CBB8FF); -webkit-background-clip:text; background-clip:text; color:transparent}
.up-time small{font-size:1.05rem; font-weight:600; -webkit-text-fill-color:#AEB7DE; margin-left:6px}
.up-card h3{margin:10px 0 4px; font-size:1.4rem}
.up-card h3 span{font-size:.75rem; letter-spacing:.14em; color:#B9A4FF; font-weight:700; margin-inline-start:6px}
.up-card p{margin:0 0 16px; font-size:.95rem; color:#BFC8EA}
.up-prog{height:5px; border-radius:5px; background:rgba(255,255,255,.12); overflow:hidden; margin:-4px 0 16px}
.up-prog i{display:block; height:100%; background:linear-gradient(90deg,#2BE07A,#7FC4F2); box-shadow:0 0 12px rgba(43,224,122,.7)}
.up-card.is-live{border-color:rgba(43,224,122,.45)}
.up-card.is-live .up-left{background:rgba(43,224,122,.15); border-color:rgba(43,224,122,.45); color:#B9F5D3}
.up-btn{width:100%; min-height:50px}
.up-btn.btn-white{--fg:#1A1650}
.up-btn.btn-white svg{color:#1FAF55}
.up-strip{margin-top:20px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 28px; border-radius:24px;
  background:linear-gradient(120deg, rgba(110,80,230,.22), rgba(40,90,220,.14)); border:1px solid var(--card-b)}
.up-strip > div{display:grid}
.up-strip b{color:#fff; font-family:"Rubik"; font-size:1.15rem}
.up-strip span{color:var(--txt-2)}
@media (max-width:960px){ .up-grid{grid-template-columns:1fr 1fr} .up-card:nth-child(3){display:none} }
@media (max-width:600px){ .up-grid{grid-template-columns:1fr} .up-card:nth-child(3){display:flex} .up-card{min-height:300px} .up-head{flex-direction:column; align-items:flex-start} .up-strip{flex-direction:column; align-items:stretch; text-align:center} }

/* =====================================================================
   the process: step by step with the scroll
   ===================================================================== */
.process{--p:0}
.process .line-fill{transition:none !important; width:calc(var(--p) * 76%) !important; box-shadow:0 0 14px rgba(155,124,247,.8)}
.process::before{background:rgba(255,255,255,.1)}
.step{transition:opacity .5s var(--ease), transform .6s var(--ease); opacity:.35; transform:translateY(14px) scale(.96)}
.step.on{opacity:1; transform:none}
.step .num{transition:background .5s, color .5s, box-shadow .6s, transform .6s cubic-bezier(.3,1.6,.5,1); background:#1A1E5C; color:#7C86B8; box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.step.on .num{background:var(--grad); color:#fff; transform:scale(1.08); box-shadow:0 0 0 8px rgba(155,124,247,.22), 0 0 40px rgba(155,124,247,.75)}
.step h3, .step p{transition:color .5s}
/* the pin on the computer: the section stays on screen while she scrolls */
.proc-pin{height:250vh; padding:0 !important}
.proc-pin > .wrap{position:sticky; top:0; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:100px 0 40px}
/* mobile: a vertical line next to the steps */
@media (max-width:820px){
  .process{grid-template-columns:1fr !important; gap:26px; padding-right:0; position:relative}
  .process::before{display:block !important; top:10px; bottom:10px; right:38px; left:auto; width:3px; height:auto}
  .process .line-fill{display:block !important; top:10px; right:38px; width:3px !important; height:calc(var(--p) * (100% - 20px)); max-width:none; background:linear-gradient(180deg,#7FC4F2,#B79BFF)}
  .step{display:grid; grid-template-columns:78px 1fr; column-gap:18px; text-align:right; align-items:center}
  .step .num{grid-row:span 2; margin:0}
  .step h3{margin:0; align-self:end} .step p{margin:0; align-self:start}
}

/* =====================================================================
   the process v3: a vertical zigzag timeline (no pinning)
   ===================================================================== */
.proc-pin{height:auto !important}
.proc-pin > .wrap{position:static !important; min-height:0 !important; display:block !important; padding:0 !important}
.process{display:block !important; position:relative; max-width:1000px; margin:0 auto; padding:6px 0}
.process::before{display:block !important; top:0; bottom:0; left:50%; right:auto; width:3px; height:auto; translate:-50% 0; border-radius:3px; background:rgba(255,255,255,.1)}
.process .line-fill{display:block !important; top:0; left:50%; right:auto; width:3px !important; max-width:none; height:calc(var(--p) * 100%); translate:-50% 0;
  background:linear-gradient(180deg,#7FC4F2,#9B7CF7,#C2A8FF); box-shadow:0 0 16px rgba(155,124,247,.9)}
/* the light "spark" at the tip of the line */
.process .line-fill::after{content:""; position:absolute; bottom:-6px; left:50%; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:#fff; box-shadow:0 0 18px 6px rgba(183,155,255,.9)}
.step{position:relative; width:calc(50% - 64px); padding:26px 30px; margin:0 0 30px; text-align:right; border-radius:26px;
  background:var(--card); border:1px solid var(--card-b); opacity:.38; transform:translateY(24px);
  transition:opacity .6s var(--ease), transform .7s var(--ease), border-color .5s, box-shadow .6s, background .6s}
.step:last-child{margin-bottom:0}
.step:nth-child(odd){margin-inline-start:calc(50% + 64px)}      /* RTL: even steps on the right, odd on the left (zigzag) */
.step.on{opacity:1; transform:none; border-color:rgba(185,164,255,.45); background:linear-gradient(140deg, rgba(110,80,230,.2), rgba(255,255,255,.04));
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6), 0 0 50px -24px rgba(155,124,247,.8)}
.step .num{position:absolute; top:50%; width:64px; height:64px; margin:-32px 0 0; font-size:1.4rem}
.step:nth-child(even) .num{left:-96px}
.step:nth-child(odd) .num{right:-96px}
.step h3{font-size:1.3rem; margin:0 0 6px} .step p{margin:0}
/* small arrow from the card toward the line */
.step::after{content:""; position:absolute; top:50%; width:14px; height:14px; margin-top:-7px; background:inherit; border:inherit; transform:rotate(45deg)}
.step:nth-child(even)::after{left:-8px; border-right:0; border-top:0}
.step:nth-child(odd)::after{right:-8px; border-left:0; border-bottom:0}
@media (max-width:820px){
  .process{padding-right:0}
  .process::before, .process .line-fill{left:auto; right:31px; translate:0 0}
  .process .line-fill::after{left:auto; right:-5.5px; margin:0}
  .step, .step:nth-child(odd){width:auto; margin-inline-start:84px; display:block; padding:20px 22px}
  .step .num, .step:nth-child(odd) .num, .step:nth-child(even) .num{left:auto; right:-84px; width:60px; height:60px; margin-top:-30px}
  .step::after, .step:nth-child(odd)::after, .step:nth-child(even)::after{left:auto; right:-8px; border:inherit; border-left:0; border-bottom:0}
}
.cf-ic svg{width:28px; height:28px}

/* =====================================================================
   the climb: an animation of climbing stairs
   ===================================================================== */
.climb{position:relative; max-width:1000px; margin:0 auto; border-radius:36px; padding:20px 20px 0; overflow:hidden;
  background:radial-gradient(70% 60% at 20% 10%, rgba(155,124,247,.25), transparent 70%), radial-gradient(60% 60% at 90% 90%, rgba(40,90,220,.22), transparent 70%), rgba(255,255,255,.03);
  border:1px solid var(--card-b)}
.climb-svg{display:block; width:100%; height:auto; overflow:visible}
.cl-fig{}
.cl-flag{transform-box:fill-box; transform-origin:bottom; transform:scaleY(0)}
.cl-cloth{animation:clothWave 1.6s ease-in-out infinite; transform-box:fill-box; transform-origin:left center}
@keyframes clothWave{50%{transform:skewY(-3deg) scaleX(.97)}}
.cl-edge{transition:opacity .5s; filter:url(#glowF)}
.cl-mile{font-family:"Rubik"; font-weight:600; font-size:17px; fill:#D6DCF5; transition:opacity .5s}
.cl-before{font-family:"Rubik"; font-weight:700; font-size:20px; fill:#7C86B8; letter-spacing:.02em}
.cl-after{font-family:"Rubik"; font-weight:800; font-size:40px; fill:#fff; filter:url(#glowF)}
.cl-tag{font-family:"Rubik"; font-weight:700; font-size:14px; letter-spacing:.24em; fill:#C9B5FF}
.cl-drop{animation:drop .9s ease-in forwards}
@keyframes drop{to{transform:translate(14px, 46px); opacity:0}}
.climb-cap{position:absolute; top:22px; right:26px; display:grid; gap:2px; text-align:right}
.climb-cap .cc-step{font-size:.82rem; letter-spacing:.14em; color:#B9A4FF; font-weight:700}
.climb-cap .cc-text{font-family:"Rubik"; font-size:clamp(1.2rem,2.4vw,1.7rem); color:#fff}
.climb-cap.pop .cc-text{animation:capPop .5s var(--ease)}
@keyframes capPop{from{opacity:0; transform:translateY(10px)}}
.climb.top .climb-cap .cc-text{background:linear-gradient(120deg,#9FD4FF,#C9B5FF); -webkit-background-clip:text; background-clip:text; color:transparent}
.climb-replay{position:absolute; bottom:18px; left:20px; padding:9px 18px; border-radius:999px; color:#fff; font-weight:700; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); transition:background .3s}
.climb-replay:hover{background:var(--grad)}
@media (max-width:700px){
  .climb{padding:70px 6px 0; border-radius:26px}
  .cl-mile{display:none}                                  /* on mobile the milestone shows in the caption at the top */
  .climb-cap{right:18px; top:16px}
}
.cl-mile{font-size:inherit}
.cl-mile-t{font-family:"Rubik"; font-weight:800; font-size:19px; fill:#fff}
.cl-mile-s{font-family:"Assistant"; font-weight:600; font-size:14px; fill:#AEB7DE}
.climb-cap{top:26px}
/* the realistic figure: colors through variables that change along the way */
.cl-fig path, .cl-fig ellipse{stroke:none}
.cl-skin{fill:var(--skin)} .cl-skinB{fill:var(--skinB)}
.cl-shirt{fill:var(--shirt)} .cl-pants{fill:var(--pants)}
.cl-legF{fill:var(--legF)} .cl-legB{fill:var(--legB)}
.cl-shoe{fill:#F3F4FA; stroke:#B9A4FF !important; stroke-width:1.4px}
.cl-hair{fill:#3A2A28}
.cl-eye{fill:#1E1530} .cl-brow{fill:none; stroke:#3A2A28 !important; stroke-width:1.3px; stroke-linecap:round}
.cl-lip{fill:none; stroke:#B5625A !important; stroke-width:1.5px; stroke-linecap:round}

/* =====================================================================
   the climb v4: on the real image, spotlights + a camera that moves up the stairs
   ===================================================================== */
.climb-photo{padding:0; aspect-ratio:1536/1024; background:#0B0E33; isolation:isolate}
.cp-cam{position:absolute; inset:0; transform-origin:0 0; transition:transform 1.4s cubic-bezier(.65,0,.25,1); will-change:transform}
.cp-cam img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; user-select:none}
/* the base image: dark and slightly tinted blue, so it matches the site */
.cp-base{filter:grayscale(.55) brightness(.3) contrast(1.05) hue-rotate(10deg); transition:filter 1.4s}
.climb-photo.done .cp-base{filter:grayscale(.2) brightness(.55)}
/* the "spotlight" on each stage: a copy of the image, visible only inside a soft ellipse around the woman */
.cp-lit{opacity:0; transition:opacity 1s ease, filter 1s ease;
  -webkit-mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--mx) var(--my), #000 55%, transparent 100%);
  mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--mx) var(--my), #000 55%, transparent 100%)}
.cp-lit.on{opacity:1; filter:brightness(1.02) saturate(1.05)}
.cp-lit.past{opacity:.6; filter:grayscale(.4) brightness(.65)}
/* a blue-purple overlay on the edges, so the light image blends into the dark theme */
.cp-vignette{position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(12,14,52,.75) 100%),
             linear-gradient(180deg, rgba(40,30,120,.18), transparent 30%, transparent 75%, rgba(12,14,52,.5))}
/* label under each woman's feet */
.cp-chip{position:absolute; z-index:3; translate:-50% 0; padding:5px 14px; border-radius:999px; white-space:nowrap;
  font-family:"Rubik"; font-weight:700; font-size:clamp(.62rem,1.1vw,.9rem); color:#fff;
  background:rgba(14,18,64,.75); border:1px solid rgba(185,164,255,.45); backdrop-filter:blur(8px);
  opacity:0; transform:translateY(8px) scale(.9); transition:opacity .6s, transform .6s var(--ease)}
.cp-chip.on{opacity:1; transform:none}
.cp-chip.last{background:var(--grad); border-color:transparent; box-shadow:0 8px 24px -8px rgba(123,92,240,.9)}
/* the final title, in the empty part at the top left of the image */
.cp-final{position:absolute; z-index:3; left:6%; top:7%; display:grid; gap:4px; text-align:left; opacity:0; transform:translateY(14px); transition:opacity .9s .3s, transform .9s .3s var(--ease)}
.cp-final b{font-family:"Rubik"; font-weight:800; font-size:clamp(1.6rem,4.2vw,3.4rem); line-height:1; color:#fff; text-shadow:0 0 30px rgba(155,124,247,.8)}
.cp-final span{font-size:clamp(.55rem,1vw,.85rem); letter-spacing:.28em; color:#C9B5FF; font-weight:700}
.climb-photo.done .cp-final{opacity:1; transform:none}
.climb-photo .climb-cap{z-index:4; padding:10px 16px; border-radius:16px; background:rgba(12,14,52,.55); backdrop-filter:blur(8px)}
.climb-photo .climb-replay{z-index:4}
@media (max-width:700px){
  .climb-photo{padding:0; aspect-ratio:1536/1150}
  .climb-photo .climb-cap{top:10px; right:10px; padding:7px 11px}
  .climb-photo .climb-cap .cc-text{font-size:1rem}
  .cp-final{top:5%}
}
/* the caption at the bottom right (the stairs area, which is empty) so it doesn't cover the heads */
.climb-photo .climb-cap{top:auto; bottom:16px; right:16px}
.climb-photo .climb-replay{left:50%; bottom:14px; translate:-50% 0}
@media (max-width:700px){ .climb-photo .climb-cap{display:none} .climb-photo{aspect-ratio:1536/1024} }

/* =====================================================================
   the climb v5: one woman (cut-out figures) who goes up step by step
   ===================================================================== */
.climb-walk{padding:0; aspect-ratio:1536/1024; isolation:isolate;
  background:radial-gradient(70% 70% at 25% 15%, rgba(155,124,247,.28), transparent 70%), radial-gradient(60% 60% at 90% 90%, rgba(40,90,220,.25), transparent 70%), #0E1145}
.cw-cam{position:absolute; inset:0; transform-origin:0 0; transition:transform 1.1s cubic-bezier(.65,0,.25,1); will-change:transform}
.cw-stairs{position:absolute; inset:0; width:100%; height:100%}
.cw-edge{stroke:url(#cwEdge); stroke-width:4; stroke-linecap:round; opacity:.25; transition:opacity .6s; filter:drop-shadow(0 0 6px rgba(155,124,247,.9))}
.cw-edge.on{opacity:1}
.cw-fig{position:absolute; height:auto; opacity:0; will-change:transform, opacity; pointer-events:none;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.35)) drop-shadow(0 0 18px rgba(155,124,247,.45))}
.climb-walk .climb-cap{z-index:4; top:auto; bottom:16px; right:16px; padding:10px 16px; border-radius:16px; background:rgba(12,14,52,.6); backdrop-filter:blur(8px)}
.climb-walk .climb-replay{z-index:4; left:50%; bottom:14px; translate:-50% 0}
.climb-walk.done .cp-final{opacity:1; transform:none}
.climb-walk .cp-final{left:auto; right:6%; top:8%; text-align:right}
@media (max-width:700px){ .climb-walk .climb-cap{padding:6px 10px; bottom:10px; right:10px} .climb-walk .climb-cap .cc-text{font-size:.9rem} .climb-walk .climb-cap .cc-step{font-size:.65rem} }
.climb-walk .cp-final{left:6%; right:auto; top:9%; text-align:left}
@media (max-width:700px){ .climb-walk .climb-cap{display:none} }

/* the climb: a light scene (like the original image) so the black leggings show clearly */
.climb-walk{background:linear-gradient(180deg,#E8E6E2 0%,#DEDBD6 100%)}
.cw-edge{stroke:url(#cwEdge); opacity:.35; filter:none; stroke-width:3}
.cw-edge.on{opacity:.9}
.cw-fig{filter:drop-shadow(0 10px 14px rgba(20,20,40,.22))}
/* heavy breathing between steps: the more tired she is, the deeper */
.cw-fig.on{animation:cwBreath 1.6s ease-in-out infinite; transform-origin:50% 100%}
.cw-fig.on.tired{animation-duration:.9s}
@keyframes cwBreath{50%{transform:scale(1.006, 1.012)}}
/* sweat drops */
.cw-drop{position:absolute; width:.45%; aspect-ratio:3/4; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; z-index:2;
  background:radial-gradient(circle at 35% 35%, #fff, #8FCBF5 55%, #4A9BE0); box-shadow:0 0 4px rgba(74,155,224,.6);
  animation:cwDrop 1.1s ease-in forwards}
@keyframes cwDrop{from{opacity:0; transform:translateY(0)} 15%{opacity:1} to{opacity:0; transform:translateY(260%)}}
.climb-walk .cp-final b{color:#1A1650; text-shadow:none; background:linear-gradient(120deg,#2853C9,#7B5CF0); -webkit-background-clip:text; background-clip:text; color:transparent}
.climb-walk .cp-final span{color:#5B4FD9}
.climb-walk .vignette, .climb-walk::after{display:none}
/* the AI video in place of the animation */
.cw-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#E5E3DF}
.climb-walk.has-video{aspect-ratio:16/9}

/* =====================================================================
   manifesto: words that light up with the scroll + floating photos
   ===================================================================== */
.mani-sec{overflow:hidden; padding:clamp(120px,16vw,220px) 0}
.mani-sec .wrap{position:relative; z-index:2; max-width:1050px; text-align:center}
.mani{font-family:"Rubik"; font-weight:800; font-size:clamp(2rem,5.4vw,4.6rem); line-height:1.18; letter-spacing:-.02em; margin:18px 0 40px; color:#fff}
.mw{--l:0; color:rgba(255,255,255,calc(.12 + var(--l) * .88)); transition:color .15s linear; display:inline-block; transform:translateY(calc((1 - var(--l)) * 6px))}
.mani em{font-style:normal}
.mani em .mw{background:linear-gradient(120deg,#9FD4FF,#B9A4FF 55%,#E4D9FF); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:calc(.15 + var(--l) * .85)}
.mani-sign{display:inline-flex; align-items:center; gap:14px; color:#B9A4FF; font-weight:700; letter-spacing:.3em; font-size:.85rem}
.mani-logo{width:84px; height:32px; -webkit-mask:url(../img/zur-logo.png) center/contain no-repeat; mask:url(../img/zur-logo.png) center/contain no-repeat; background:linear-gradient(120deg,#fff,#C9B5FF)}
.mani-float{position:absolute; inset:0; z-index:1; pointer-events:none}
.mani-float img{position:absolute; left:var(--x); top:var(--y); width:var(--w); aspect-ratio:3/4; object-fit:cover; border-radius:22px;
  opacity:.55; filter:saturate(.8) brightness(.8); box-shadow:0 30px 60px -20px rgba(0,0,0,.7); outline:1px solid rgba(255,255,255,.12); outline-offset:-1px;
  transform:rotate(var(--r)); will-change:transform}
@media (max-width:700px){
  .mani-float img{width:calc(var(--w) * 1.9); opacity:.28}
  .mani{margin-bottom:28px}
}

/* =====================================================================
   closing block v2: rows of photos, a traveling-light frame, a headline with a sweep of light, the next class
   ===================================================================== */
.cta-final{background:#0B0E33; overflow:hidden; isolation:isolate; padding:clamp(70px,9vw,120px) 24px}
.cta-final::before{content:""; position:absolute; inset:0; z-index:4; border-radius:inherit; padding:2px; pointer-events:none; width:auto; height:auto; top:0; right:0; animation:spinAng 6s linear infinite;
  background:conic-gradient(from var(--ang), rgba(255,255,255,.08) 0deg 250deg, #7FC4F2 290deg, #C2A8FF 325deg, rgba(255,255,255,.08) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.cta-final::after{display:none}
.cfx-bg{position:absolute; inset:-30% -10%; z-index:-2; display:grid; align-content:center; gap:18px; transform:rotate(-7deg)}
.cfx-row{display:flex; gap:18px; width:max-content; animation:marquee 46s linear infinite}
.cfx-row.r2{animation-direction:reverse; animation-duration:52s; margin-inline-start:-140px}
.cfx-row img{height:clamp(130px,16vw,200px); aspect-ratio:4/3; object-fit:cover; border-radius:20px; filter:saturate(.85) brightness(.8)}
.cfx-shade{position:absolute; inset:0; z-index:-1;
  background:radial-gradient(70% 80% at 50% 50%, rgba(14,16,58,.78) 0%, rgba(14,16,58,.9) 60%, rgba(10,12,44,.97) 100%),
             linear-gradient(120deg, rgba(40,83,201,.35), rgba(123,92,240,.35))}
.cta-final h2{background:linear-gradient(110deg,#fff 0%,#fff 40%,#C9B5FF 50%,#9FD4FF 56%,#fff 66%,#fff 100%) 0 0/250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:cfxShine 5s ease-in-out infinite}
@keyframes cfxShine{0%,15%{background-position:100% 0} 60%,100%{background-position:0 0}}
.cta-final p{color:#D6DCF5}
.cta-final .btn-white{position:relative; box-shadow:0 0 0 0 rgba(255,255,255,.5), 0 18px 40px -12px rgba(0,0,0,.6); animation:cfxPulse 2.4s ease-out infinite}
@keyframes cfxPulse{0%{box-shadow:0 0 0 0 rgba(201,181,255,.55), 0 18px 40px -12px rgba(0,0,0,.6)} 70%{box-shadow:0 0 0 18px rgba(201,181,255,0), 0 18px 40px -12px rgba(0,0,0,.6)} 100%{box-shadow:0 0 0 0 rgba(201,181,255,0), 0 18px 40px -12px rgba(0,0,0,.6)}}
.cfx-next{display:inline-flex; align-items:center; gap:10px; margin:26px auto 0 !important; padding:9px 18px; border-radius:999px; font-size:.95rem !important;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); backdrop-filter:blur(8px); color:#D6DCF5 !important; max-width:none !important}
.cfx-next b{color:#fff}
.cfx-next i{width:9px; height:9px; border-radius:50%; background:#2BE07A; animation:ping2 1.6s infinite}
@media (prefers-reduced-motion: reduce){ .cfx-row, .cta-final::before, .cta-final h2, .cta-final .btn-white{animation:none} }
html.a11y-stop .cfx-row, html.a11y-stop .cta-final::before{animation:none}
.cfx-next{display:flex; width:fit-content}
.cfx-shade{background:radial-gradient(60% 75% at 50% 50%, rgba(14,16,58,.82) 0%, rgba(14,16,58,.62) 55%, rgba(10,12,44,.85) 100%), linear-gradient(120deg, rgba(40,83,201,.3), rgba(123,92,240,.3))}
.cfx-row img{filter:saturate(.95) brightness(.95)}

/* =====================================================================
   tighter spacing between sections (it was too airy)
   ===================================================================== */
.sec{padding:clamp(48px,6vw,84px) 0}
.sec-head{margin-bottom:36px}
.head-row{margin-bottom:30px}
.mani-sec{padding:clamp(70px,9vw,130px) 0}
.studio-head{margin-bottom:32px}
.studio-stats{margin-top:20px}
.who2-grid + div, .process + div{margin-top:36px !important}
.up-head{margin-bottom:22px}
.cf{height:560px}
.cf-names{margin-top:0}
@media (max-width:700px){ .sec{padding:44px 0} .cf{height:560px} }

/* =====================================================================
   mobile fixes: text overflowing the edge + smooth scrolling
   ===================================================================== */
/* grid children don't stretch beyond the screen (that's what cut off the FAQ text) */
.faq2, .who2-grid, .adi2, .split, .studio-head, .tt-layout, .yes-no, .rezult-band{grid-template-columns:minmax(0,1fr)}
@media (min-width:961px){ .faq2{grid-template-columns:380px minmax(0,1fr)} }
@media (min-width:821px){ .who2-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} .adi2{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} .split, .yes-no{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .rezult-band{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)} .studio-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media (min-width:1081px){ .tt-layout{grid-template-columns:minmax(0,1fr) 340px} }
.faq2 > *, .who2-grid > *, .adi2 > *, .split > *, .tt-layout > *, .studio-head > *{min-width:0}
.faq2-cats{max-width:100%}

/* touch phones: lightening heavy effects that make scrolling stutter */
@media (hover:none), (max-width:820px){
  body{background-attachment:scroll}
  .h3-aurora i{animation:none; filter:blur(70px)}
  *:not(.bar){-webkit-backdrop-filter:none !important; backdrop-filter:none !important}
  .proof, .h3-stats, .float-stat, .chip-float, .up-day, .cfx-next, .cf-star{background:rgba(20,22,70,.78)}
  .cf-arrow{background:rgba(20,22,70,.8)}
  .storm{touch-action:none}
  .blob, .who2 .glow, .cf-sec .glow, .quiz-sec .glow{filter:blur(50px)}
}

/* =====================================================================
   mobile menu v2: a light opening (opacity + position) instead of a full-screen circle
   ===================================================================== */
.mobile-menu{clip-path:none !important; opacity:0; visibility:hidden; transform:translateY(-12px);
  background:linear-gradient(170deg,#1B1E6A 0%,#0E1240 55%,#120F45 100%);
  transition:opacity .28s ease, transform .35s cubic-bezier(.2,.7,.2,1), visibility 0s .35s;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; justify-content:flex-start; padding-top:110px; will-change:opacity, transform}
.menu-open .mobile-menu{opacity:1; visibility:visible; transform:none; transition:opacity .28s ease, transform .35s cubic-bezier(.2,.7,.2,1)}
.mobile-menu a{transform:translateY(10px); transition:opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); padding:12px 4px; border-bottom:1px solid rgba(255,255,255,.07); font-size:1.6rem}
.mobile-menu a.btn{border-bottom:0; margin-top:24px}
.menu-open .site-header{transform:none !important}
.menu-open .a11y-btn, .menu-open .a11y-panel, .menu-open .m-bar, .menu-open .wa-float{opacity:0; pointer-events:none}

/* =====================================================================
   mobile menu v3: a side panel (from the burger side), blurred backdrop, numbered links with icons
   ===================================================================== */
.mobile-menu{position:fixed; inset:0; z-index:150; display:block !important; padding:0 !important; background:none !important; opacity:1 !important; transform:none !important;
  visibility:hidden; pointer-events:none; transition:visibility 0s .5s !important; overflow:hidden !important}
.menu-open .mobile-menu{visibility:visible; pointer-events:auto; transition:none !important}
.mm-backdrop{position:absolute; inset:0; background:rgba(5,6,25,.55); opacity:0; transition:opacity .4s ease}
.menu-open .mm-backdrop{opacity:1}
.mm-panel{position:absolute; top:0; bottom:0; left:0; width:min(88vw,420px); display:flex; flex-direction:column; gap:14px; padding:22px 22px calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(165deg,#1C1F6E 0%,#0F1245 55%,#140F48 100%); border-right:1px solid rgba(185,164,255,.25);
  box-shadow:30px 0 80px -20px rgba(0,0,0,.7); overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(-105%); transition:transform .5s cubic-bezier(.22,.9,.24,1); will-change:transform}
.menu-open .mm-panel{transform:none}
.mm-glow{position:absolute; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(155,124,247,.45), transparent 70%); top:-80px; right:-120px; pointer-events:none; animation:float 9s ease-in-out infinite}
.mm-panel::after{content:""; position:absolute; bottom:90px; left:-30px; width:260px; height:100px; opacity:.05; pointer-events:none;
  -webkit-mask:url(../img/zur-logo.png) center/contain no-repeat; mask:url(../img/zur-logo.png) center/contain no-repeat; background:#fff; transform:rotate(-8deg)}
.mm-top{position:relative; display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.08)}
.mm-top .logo{width:92px; height:36px}
.mm-close{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(185,164,255,.4); transition:transform .3s var(--ease), background .3s}
.mm-close:active{transform:scale(.92)}
.mm-close svg{width:20px; height:20px}
.mm-links{position:relative; display:grid; gap:4px}
.mm-links a{display:flex !important; align-items:center; gap:14px; padding:12px 12px !important; border-radius:16px; border:0 !important; color:#E3E7FA !important; text-decoration:none;
  font-family:"Rubik"; font-weight:600; font-size:1.18rem !important; opacity:0 !important; transform:translateX(-24px) !important;
  transition:opacity .4s ease, transform .5s cubic-bezier(.22,.9,.24,1), background .25s !important; transition-delay:0s !important}
.menu-open .mm-links a{opacity:1 !important; transform:none !important; transition-delay:calc(.12s + var(--i) * .045s) !important}
.mm-links a:active{background:rgba(255,255,255,.06)}
.mm-n{font-size:.75rem; letter-spacing:.08em; color:#8C86C9; width:20px}
.mm-ic{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#C9B5FF; background:rgba(255,255,255,.06); flex:none}
.mm-ic svg{width:19px; height:19px}
.mm-t{flex:1}
.mm-links a[aria-current="page"]{background:linear-gradient(120deg, rgba(43,91,255,.3), rgba(155,124,247,.32)); box-shadow:inset 0 0 0 1px rgba(185,164,255,.45)}
.mm-links a[aria-current="page"] .mm-ic{background:var(--grad); color:#fff}
.mm-links a[aria-current="page"]::after{content:""; width:8px; height:8px; border-radius:50%; background:#B79BFF; box-shadow:0 0 12px 2px rgba(183,155,255,.9)}
.mm-next{position:relative; display:flex; align-items:center; gap:12px; padding:10px; border-radius:18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  opacity:0; transform:translateY(10px); transition:opacity .4s ease .45s, transform .5s ease .45s}
.menu-open .mm-next{opacity:1; transform:none}
.mm-next:empty{display:none}
.mm-next img{width:54px; height:54px; border-radius:14px; object-fit:cover; flex:none}
.mm-next div{display:grid; flex:1; line-height:1.25}
.mm-next small{display:flex; align-items:center; gap:6px; color:#9EABD6; font-size:.78rem}
.mm-next small i{width:7px; height:7px; border-radius:50%; background:#2BE07A; animation:ping2 1.6s infinite}
.mm-next b{color:#fff; font-family:"Rubik"; font-size:1rem}
.mm-next span{color:#B9A4FF; font-size:.85rem}
.mm-next a{padding:9px 14px; border-radius:999px; background:#fff; color:#1A1650; font-weight:700; font-size:.85rem; text-decoration:none}
.mm-cta{margin-top:auto; width:100%; min-height:56px; opacity:0; transform:translateY(10px); transition:opacity .4s ease .5s, transform .5s ease .5s, box-shadow .3s !important}
.menu-open .mm-cta{opacity:1; transform:none}
.mm-contact{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.mm-contact a{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14)}
.mm-contact svg{width:19px; height:19px}
.mm-addr{color:#8E99C6; font-size:.85rem; margin-inline-start:auto}
@media (min-width:1081px){ .mobile-menu{display:none !important} }
@media (prefers-reduced-motion: reduce){ .mm-panel, .mm-links a{transition:none !important} }

/* =====================================================================
   bottom bar on mobile (dock): floating, a raised WhatsApp button in a notch, a frame with a traveling light
   ===================================================================== */
.dock{display:none}
@media (max-width:820px){
  .m-bar, .wa-float{display:none !important}
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .site-footer{padding-bottom:40px}
  .dock{position:fixed; z-index:140; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); height:68px;
    display:grid; grid-template-columns:repeat(5,1fr); align-items:end; padding:0 6px 8px; border-radius:26px;
    background:linear-gradient(160deg, rgba(30,32,100,.97), rgba(14,16,58,.98));
    box-shadow:0 20px 40px -12px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
    /* a notch around the middle button */
    -webkit-mask:radial-gradient(circle 37px at 50% -8px, transparent 36px, #000 37px); mask:radial-gradient(circle 37px at 50% -8px, transparent 36px, #000 37px)}
  .dock::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
    background:conic-gradient(from var(--ang), rgba(255,255,255,.08) 0deg 250deg, #7FC4F2 290deg, #C2A8FF 325deg, rgba(255,255,255,.08) 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:spinAng 7s linear infinite}
  .dk, .dk-wa{position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; color:#9EA8D4; text-decoration:none; background:none; border:0; padding:0; font:inherit; -webkit-tap-highlight-color:transparent}
  .dk-ic{width:42px; height:30px; border-radius:12px; display:grid; place-items:center; transition:background .3s, color .3s, transform .3s var(--ease)}
  .dk-ic svg{width:21px; height:21px}
  .dk-t{font-family:"Rubik"; font-size:.7rem; font-weight:600; letter-spacing:.01em}
  .dk:active .dk-ic{transform:scale(.88)}
  .dk.on{color:#D9CCFF}
  .dk.on .dk-ic{background:var(--grad); color:#fff; box-shadow:0 6px 18px -6px rgba(123,92,240,.9)}
  .dk.on::before{content:""; position:absolute; top:-9px; width:5px; height:5px; border-radius:50%; background:#B79BFF; box-shadow:0 0 10px 2px rgba(183,155,255,.9)}
  /* the WhatsApp button rises from the bar */
  .dk-wa{color:#7EF0A8}
  .dk-wa-btn{position:absolute; bottom:24px; width:60px; height:60px; border-radius:50%; display:grid; place-items:center; color:#fff;
    background:linear-gradient(145deg,#2BD46C,#139A47); box-shadow:0 12px 26px -6px rgba(31,175,85,.75), 0 0 0 4px rgba(14,16,58,.95)}
  .dk-wa-btn svg{width:30px; height:30px}
  .dk-wa-btn::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(43,212,108,.7); animation:waRing 2.4s infinite}
  .dk-wa .dk-t{margin-top:auto}
  /* the dock needs to be above the WhatsApp button on mobile, so the button must not be cut by the notch: it sits outside the masked area */
  .dock{overflow:visible}
  .a11y-btn{bottom:calc(92px + env(safe-area-inset-bottom)) !important; top:auto !important; right:12px; width:44px; height:44px}
  .a11y-panel{bottom:calc(144px + env(safe-area-inset-bottom)) !important; top:auto !important}
  .menu-open .dock{opacity:0; pointer-events:none}
}
@media (prefers-reduced-motion: reduce){ .dock::before{animation:none} }
@media (max-width:820px){
  /* the notch only on the background (a pseudo-element), so the button that rises above isn't cut */
  .dock{background:none !important; -webkit-mask:none !important; mask:none !important; box-shadow:none !important; isolation:isolate}
  .dock::after{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
    background:linear-gradient(90deg, transparent 8%, rgba(127,196,242,.55) 30%, rgba(194,168,255,.7) 70%, transparent 92%) top/100% 1.5px no-repeat,
               linear-gradient(160deg, rgba(30,32,100,.97), rgba(14,16,58,.98));
    -webkit-mask:radial-gradient(circle 37px at 50% -8px, transparent 36px, #000 37px); mask:radial-gradient(circle 37px at 50% -8px, transparent 36px, #000 37px);
    filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
  .dock::before{display:none}
}

/* mobile menu v3.1: opens immediately, without any sideways movement */
html.menu-lock, html.menu-lock body{overflow:hidden !important; overscroll-behavior:none}
.menu-open{overflow:visible}
.mm-panel{overflow-x:hidden !important; touch-action:pan-y; transition:transform .32s cubic-bezier(.2,.8,.2,1) !important; contain:layout paint}
.mm-backdrop{transition:opacity .25s ease !important}
.mm-links a{transform:translateY(8px) !important; transition:opacity .25s ease, transform .3s ease, background .2s !important}
.menu-open .mm-links a{transition-delay:calc(.05s + var(--i) * .025s) !important}
.mm-next, .mm-cta{transition-delay:.18s !important; transition-duration:.25s !important}
.mm-glow{animation:none}

/* =====================================================================
   performance: pausing animations off screen + a light mode for phones
   ===================================================================== */
.off *, .off::before, .off::after, .off *::before, .off *::after{animation-play-state:paused !important}
@media (hover:none), (max-width:820px){
  /* traveling-light frames → a static frame (an animation that redraws on every frame) */
  .site-header .bar::before, .cf-card.active .cf-inner::after, .quiz::before, .cta-final::before{animation:none !important}
  /* header: a solid background instead of blur */
  .site-header .bar{background:rgba(14,16,58,.96) !important}
  /* opening wall: flat, without 3D */
  .h3-wall{transform:none !important; transition:none}
  .h3-wall-wrap{perspective:none; width:130%; left:-15%; top:-10%; bottom:-10%}
  .h3-col:nth-child(3){display:none}
  .h3-track img{box-shadow:none; filter:brightness(.8)}
  .h3-spot{display:none}
  /* carousel: lighter shadows */
  .cf-card .cf-inner, .cf-card.active .cf-inner{box-shadow:0 20px 40px -20px rgba(0,0,0,.7) !important}
  .cf-card.active .cf-inner::after{background:linear-gradient(140deg,#7FC4F2,#B79BFF) !important}
  /* manifesto: static photos */
  .mani-float img{transform:rotate(var(--r)) !important; will-change:auto}
  /* closing block: the photo rows slower and lighter */
  .cfx-row{animation-duration:80s !important}
  .cfx-row.r2{animation-duration:90s !important}
  /* no unneeded will-change (saves memory on the phone) */
  .cf-card, .cw-cam, .h3-track{will-change:auto}
  .cf-card{transition:transform .5s cubic-bezier(.22,.8,.2,1), opacity .4s}
}
/* manifesto: a smoother transition between a dim word and a lit one */
.mw{transition:color .45s ease, transform .5s ease, opacity .45s ease}
.mani-sec{padding-bottom:clamp(110px,14vw,200px)}

/* =====================================================================
   bottom bar v2: a "floating island", a compact capsule (the active one expands with its name) + a separate WhatsApp button
   ===================================================================== */
.dock{display:none !important}
.dock2{display:none}
@media (max-width:820px){
  .dock2{position:fixed; z-index:140; left:14px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:12px; pointer-events:none}
  .d2-cap, .d2-wa{pointer-events:auto}
  .d2-cap{display:flex; align-items:center; gap:4px; padding:6px; border-radius:999px;
    background:rgba(16,18,62,.96); border:1px solid rgba(185,164,255,.28);
    box-shadow:0 16px 36px -10px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07)}
  .d2{display:flex; align-items:center; gap:0; height:48px; min-width:48px; padding:0 13px; border-radius:999px; border:0; background:none; font:inherit;
    color:#AAB3DD; text-decoration:none; -webkit-tap-highlight-color:transparent; transition:background .35s ease, color .3s, padding .35s ease}
  .d2-ic{display:grid; place-items:center; flex:none}
  .d2-ic svg{width:22px; height:22px}
  .d2-t{max-width:0; overflow:hidden; white-space:nowrap; opacity:0; font-family:"Rubik"; font-weight:700; font-size:.92rem; transition:max-width .35s ease, opacity .25s ease, margin .35s ease}
  .d2:active{transform:scale(.94)}
  /* the active page: expands into a gradient pill with its name */
  .d2.on{background:var(--grad); color:#fff; padding:0 16px; box-shadow:0 8px 20px -8px rgba(123,92,240,.9)}
  .d2.on .d2-t{max-width:90px; opacity:1; margin-inline-start:8px}
  /* separate WhatsApp button */
  .d2-wa{width:60px; height:60px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; position:relative;
    background:linear-gradient(145deg,#2BD46C,#139A47); box-shadow:0 14px 28px -8px rgba(31,175,85,.75), inset 0 1px 0 rgba(255,255,255,.3)}
  .d2-wa svg{width:30px; height:30px}
  .d2-wa::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid rgba(43,212,108,.6); animation:waRing 2.4s infinite}
  .menu-open .dock2{opacity:0; pointer-events:none}
  .menu-open .dock2 *{pointer-events:none}
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .a11y-btn{bottom:calc(90px + env(safe-area-inset-bottom)) !important}
}
@media (max-width:360px){ .d2{padding:0 10px; min-width:42px} .d2.on{padding:0 12px} .d2.on .d2-t{max-width:70px} }

/* FAQ: Adi answers, like a chat message */
.fq-av{width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; font-family:"Rubik"; font-weight:800; font-size:1rem; color:#fff;
  background:var(--grad); box-shadow:0 0 0 3px rgba(155,124,247,.25)}
.faq2-av.fq-av{width:50px; height:50px; font-size:1.3rem; border-radius:50%}
.fq-reply{display:flex; align-items:flex-start; gap:12px; padding:0 22px 22px 22px}
.fq-bubble{flex:1; padding:14px 18px; border-radius:6px 20px 20px 20px; background:rgba(155,124,247,.12); border:1px solid rgba(185,164,255,.25)}
.fq-bubble b{display:block; color:#fff; font-family:"Rubik"; font-size:.95rem; margin-bottom:4px}
.fq-bubble b small{color:#9EABD6; font-weight:500; font-size:.8rem}
.fq-a .fq-bubble p{padding:0 !important; margin:0; color:#D3D9F2}
.fq-a p{padding:0}
@media (max-width:600px){ .fq-reply{padding:0 14px 16px} .fq-av{width:32px; height:32px; font-size:.9rem} .fq-bubble{padding:12px 14px} }
/* the ZUR logo inside the avatar circle */
.fq-logo{display:block; width:72%; aspect-ratio:760/291; -webkit-mask:url(../img/zur-logo.png) center/contain no-repeat; mask:url(../img/zur-logo.png) center/contain no-repeat; background:#fff}
.fq-av{background:radial-gradient(circle at 30% 25%, #3B3FB0, #14164F 75%); box-shadow:0 0 0 2px rgba(185,164,255,.55), 0 6px 18px -6px rgba(123,92,240,.8)}
.faq2-av.fq-av{width:58px; height:58px}

/* =====================================================================
   soft pink (blush) as a third color next to the blue and the purple, not neon
   ===================================================================== */
:root{
  --rose:#F4A6C8; --rose-2:#FFD6E6; --rose-deep:#D97AA6;
  --grad: linear-gradient(120deg, #2853C9 0%, #5B5BE6 35%, #9B7CF7 65%, #E9A2C9 100%);
  --grad-2: linear-gradient(120deg, #7FC4F2 0%, #B79BFF 55%, #F4A6C8 100%);
}
/* the background: pink glows alongside the blue and purple ones */
body{background:
    radial-gradient(60vw 60vw at 100% 0%, rgba(110,80,230,.22), transparent 60%),
    radial-gradient(45vw 45vw at 0% 30%, rgba(40,90,220,.18), transparent 60%),
    radial-gradient(50vw 50vw at 10% 75%, rgba(232,140,190,.10), transparent 60%),
    radial-gradient(55vw 55vw at 100% 90%, rgba(150,95,240,.16), transparent 60%),
    linear-gradient(180deg, #0D1140 0%, #121350 50%, #0E1240 100%)}
/* highlighted words: blue → purple → pink */
.hl, .on-dark .hl{background:linear-gradient(120deg,#9FD4FF 0%,#C2AEFF 45%,#F6B3D3 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
/* the small labels above the headlines */
.eyebrow, .on-dark .eyebrow, .sec-navy .eyebrow, .class-card .area{color:#F2B2CF}
/* active dots / small accents */
.nav a[aria-current="page"]::before, .dk.on::before{background:#F4A6C8; box-shadow:0 0 10px 2px rgba(244,166,200,.85)}
.mm-links a[aria-current="page"]::after{background:#F4A6C8; box-shadow:0 0 12px 2px rgba(244,166,200,.85)}
.cf-he, .h3-stats b, .up-time{background-image:linear-gradient(120deg,#fff,#D8C8FF 55%,#F7BDD8)}
.rot b{background-image:linear-gradient(120deg,#9FD4FF,#C9B5FF 50%,#F6B3D3)}
/* traveling-light frames: a pink note in the beam */
.site-header .bar::before{background:conic-gradient(from var(--ang), rgba(255,255,255,.07) 0deg 250deg, #7FC4F2 285deg, #B79BFF 310deg, #F4A6C8 335deg, rgba(255,255,255,.07) 355deg)}
.cf-card.active .cf-inner::after{background:conic-gradient(from var(--ang), #2B5BFF, #7FC4F2, #B79BFF, #F4A6C8, #6A4CF0, #2B5BFF)}
.quiz::before, .cta-final::before{background:conic-gradient(from var(--ang), rgba(255,255,255,.07) 0deg 250deg, #7FC4F2 285deg, #C2A8FF 315deg, #F4A6C8 340deg, rgba(255,255,255,.07) 360deg)}
/* soft pink glows in a few sections */
.who2 .g2, .quiz-sec .g2, .cf-sec .g2{background:rgba(232,140,190,.18)}
.h3-aurora i:nth-child(3){background:#E58BBE; opacity:.22}
/* the active pill in the bottom bar and the cards of the "current" page */
.d2.on{box-shadow:0 8px 22px -8px rgba(217,122,166,.75)}
.qz-opt[aria-checked="true"]{box-shadow:0 0 0 1.5px #E3A6F0, 0 14px 34px -14px rgba(217,122,166,.8)}
.fq.open::before, .who-list li::before{background:linear-gradient(180deg,#7FC4F2,#B79BFF,#F4A6C8)}

/* opening on mobile: the photo wall is much more visible */
@media (max-width:900px){
  .h3-wall-wrap{opacity:1 !important}
  .h3-track img{filter:brightness(1) saturate(1.05) !important}
  .h3-fade{background:linear-gradient(to top, #080B2A 0%, rgba(8,11,42,.88) 34%, rgba(8,11,42,.45) 58%, rgba(8,11,42,.12) 78%, rgba(8,11,42,.45) 100%) !important}
  .h3 h1, .h3-rot, .h3 .hero-sub{text-shadow:0 2px 18px rgba(5,6,30,.85)}
  .h3 .hero-badge{background:rgba(14,16,58,.7)}
}
@media (max-width:900px){
  /* gradient text: a regular text shadow smears it, so a "filter" shadow instead */
  .h3 h1 .hl, .h3-rot .rot b{text-shadow:none !important; filter:drop-shadow(0 2px 10px rgba(5,6,30,.85))}
  .h3-rot .rot b:not(.on){filter:none}
}
/* fix: the gradient in the manifesto must be "cut" into the letters (and not shown as a rectangle) */
.mani em .mw{background-image:linear-gradient(120deg,#9FD4FF,#C2AEFF 50%,#F6B3D3) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; -webkit-text-fill-color:transparent}

/* =====================================================================
   class carousel on mobile: a clean card, peeking neighbors, progress dots
   ===================================================================== */
.cf-dots{display:none}
@media (max-width:700px){
  .cf{height:500px}
  .cf-card{width:64vw; margin-left:-32vw; height:450px; top:14px}
  .cf-card:not(.active){filter:brightness(.75)}
  .cf-inner{border-radius:26px}
  .cf-body{padding:18px 16px 20px}
  .cf-ic{width:44px; height:44px; border-radius:14px; margin-bottom:8px}
  .cf-ic svg{width:22px; height:22px}
  .cf-en{font-size:1.35rem !important; letter-spacing:.04em}
  .cf-he{font-size:.92rem; margin-bottom:8px}
  .cf-he span{display:none}                         /* only the class name, without the area */
  .cf-desc{font-size:.88rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:12px}
  .cf-meta{display:none !important}
  .cf-btns .btn-ghost{display:none}                 /* one button only */
  .cf-btns .btn{width:100%; min-height:44px; font-size:.88rem}
  .cf-star{top:12px; right:12px; font-size:.72rem; padding:4px 10px}
  .cf-bar{inset:auto 22px 8px}
  /* below the carousel: dots + arrows in one row, without the names row and without the extra button */
  .cf-names, .cf-more{display:none !important}
  .cf-arrow{top:auto; bottom:-58px; width:44px; height:44px; margin:0}
  .cf-arrow.prev{right:16px; left:auto} .cf-arrow.next{left:16px; right:auto}
  .cf-dots{display:flex; justify-content:center; align-items:center; gap:7px; height:44px; margin:6px auto 0; padding:0 80px}
  .cf-dots i{width:7px; height:7px; border-radius:99px; background:rgba(255,255,255,.22); transition:width .35s var(--ease), background .3s; cursor:pointer}
  .cf-dots i.on{width:24px; background:var(--grad)}
  .cf::after{bottom:-10px}
  .cf-sec{padding-bottom:56px}
}

/* the class strip: always drawn on iPhone */
.ticker-track{will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.ticker span{padding:0 22px; gap:44px}
@media (max-width:820px){
  .ticker{transform:none; margin:0; padding:14px 0}
  .ticker span{font-size:1.05rem}
  .ticker-track{animation-duration:28s}
}

/* counters: fixed-width digits (so the number doesn't jump) + a "pop" for small numbers */
[data-count]{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
[data-count].pop{animation:numPop .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes numPop{0%{opacity:0; transform:translateY(10px) scale(.7)} 100%{opacity:1; transform:none}}

/* the labels around the phone: solid (not transparent), readable on top of the white reel too */
.chip-float{background:linear-gradient(120deg,#2A2F8C 0%,#4B3FC4 60%,#7A5BE0 100%) !important; color:#fff !important;
  border:1px solid rgba(201,181,255,.55) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:0 10px 24px -8px rgba(5,6,30,.7), 0 0 0 4px rgba(14,16,58,.35); font-size:.88rem; padding:9px 15px; text-shadow:none}
@media (max-width:820px){ .chip-float.c3{bottom:26%; right:-6px} }

/* the studio: a "women only" label on the areas + a highlight card */
.bn-tag{position:absolute; top:24px; right:108px; z-index:2; padding:5px 12px; border-radius:999px; font-size:.78rem; font-weight:700; color:#fff;
  background:linear-gradient(120deg,#9B7CF7,#E9A2C9); box-shadow:0 6px 16px -6px rgba(217,122,166,.8)}
.bn-tag.mixed{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); box-shadow:none}
.women-card{margin-top:18px; padding:22px 26px; border-radius:26px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  background:linear-gradient(120deg, rgba(155,124,247,.16), rgba(233,162,201,.12)); border:1px solid rgba(244,166,200,.3)}
.wc-main{display:flex; align-items:center; gap:18px; flex:1 1 420px}
.wc-badge{flex:none; padding:12px 16px; border-radius:18px; font-family:"Rubik"; font-weight:800; font-size:1.35rem; color:#fff; background:var(--grad); box-shadow:0 10px 26px -10px rgba(217,122,166,.8); white-space:nowrap}
.women-card h3{margin:0 0 4px; font-size:1.2rem}
.women-card p{margin:0; font-size:.98rem}
.wc-tags{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.wc-tags li{padding:7px 13px; border-radius:999px; font-size:.86rem; font-weight:600; color:#E3E7FA; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12)}
@media (max-width:600px){ .wc-main{flex-direction:column; align-items:flex-start} .women-card{padding:18px} .bn-tag{right:auto; left:72px; top:20px} }

/* ===== videos: phone in "who it's for", cards in the "peek", full screen window ===== */
.phone-vid{width:100%; height:100%; object-fit:cover; border-radius:36px; display:block; background:#0B0E2E}
.phone{overflow:hidden}
.vsound{position:absolute; bottom:26px; left:24px; z-index:3; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(11,14,46,.6); color:#fff; font-size:1.15rem; cursor:pointer; display:grid; place-items:center; transition:transform .25s}
.vsound:hover{transform:scale(1.08)}
.vsound[aria-pressed="true"]{background:linear-gradient(120deg,#9B7CF7,#E9A2C9); border-color:transparent}

.vrail{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:10px}
.vrail-2{grid-template-columns:repeat(2,minmax(0,300px)); justify-content:center}
.vcard{position:relative; aspect-ratio:9/16; border-radius:26px; overflow:hidden; border:0; padding:0; cursor:pointer; background:#0B0E2E; color:#fff; text-align:right; font:inherit;
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -25px rgba(0,0,0,.8); transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s}
.vcard video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.vcard::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,10,40,.9) 0%, rgba(8,10,40,.15) 40%, transparent 60%); pointer-events:none}
.vcard b{position:absolute; right:18px; left:18px; bottom:18px; z-index:2; font-size:1.12rem; line-height:1.3}
.vc-tag{position:absolute; top:14px; right:14px; z-index:2; padding:5px 11px; border-radius:999px; font-size:.76rem; font-weight:700; background:rgba(11,14,46,.55); border:1px solid rgba(255,255,255,.22)}
.vc-play{position:absolute; top:12px; left:12px; z-index:2; width:40px; height:40px; border-radius:50%; background:linear-gradient(120deg,#9B7CF7,#E9A2C9); box-shadow:0 8px 20px -6px rgba(217,122,166,.9)}
.vc-play::before{content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%); border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent #fff}
.vcard:hover,.vcard:focus-visible{transform:translateY(-8px) scale(1.02); box-shadow:0 0 0 2px #E9A2C9, 0 40px 70px -25px rgba(123,92,240,.7)}
.vcard:nth-child(even){margin-top:34px}
.vrail-2 .vcard:nth-child(even){margin-top:0}

.vmodal{position:fixed; inset:0; z-index:9999; background:rgba(5,7,28,.92); display:grid; place-items:center; padding:20px; animation:vmIn .3s ease}
.vmodal[hidden]{display:none}
.vm-box{position:relative; height:min(88vh,860px); aspect-ratio:9/16; max-width:100%}
.vm-box video{width:100%; height:100%; border-radius:22px; background:#000; object-fit:contain}
.vm-x{position:absolute; top:-14px; left:-14px; width:44px; height:44px; border-radius:50%; border:0; background:#fff; color:#0B0E2E; font-size:1.1rem; font-weight:800; cursor:pointer; box-shadow:0 10px 24px rgba(0,0,0,.5)}
@keyframes vmIn{from{opacity:0}to{opacity:1}}

@media (max-width:820px){
  .vrail{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; margin-inline:-16px; padding:6px 16px 18px; scrollbar-width:none}
  .vrail::-webkit-scrollbar{display:none}
  .vcard{flex:0 0 62%; scroll-snap-align:center}
  .vcard:nth-child(even){margin-top:0}
  .vrail-2{justify-content:flex-start}
  .vm-x{top:8px; left:8px}
}

/* =====================================================================
   REZULT: a separate brand world.
   .rz-theme = the whole Rezult page (on body) or the Rezult section on the home page.
   colors: deep purple + glowing pink, matched to the site. headings in an elegant serif font.
   ===================================================================== */
.rz-theme{
  --rz-bg:#160B2A; --rz-bg-2:#251244; --rz-blush:#FF8AD1; --rz-nude:#E86CC0; --rz-cham:#FFD6F0; --rz-cocoa:#6B2A9E;
  --txt:#F6E9FF; --txt-2:#CDB8E6; --line:rgba(255,214,240,.13);
  --grad: linear-gradient(120deg,#8B3FD9 0%,#B45CF0 45%,#FF8AD1 75%,#FFD6F0 100%);
  --grad-2: linear-gradient(120deg,#B45CF0,#FFD6F0);
}
body.rz-theme{background:
    radial-gradient(60vw 60vw at 100% 0%, rgba(255,138,209,.14), transparent 60%),
    radial-gradient(50vw 50vw at 0% 45%, rgba(180,92,240,.12), transparent 60%),
    radial-gradient(55vw 55vw at 100% 90%, rgba(255,214,240,.08), transparent 60%),
    linear-gradient(180deg,#160B2A 0%,#1E0F38 50%,#160B2A 100%) !important; background-attachment:fixed}
html:has(body.rz-theme){background:#160B2A}
.rz-theme :is(h1,h2){font-family:"Frank Ruhl Libre","Rubik",serif; font-weight:500; letter-spacing:-.01em}
.rz-theme h3{color:#FFF4FC}
.rz-theme .lead, .rz-theme p{color:var(--txt-2)}
.rz-theme .hl, .rz-theme .on-dark .hl{background:linear-gradient(120deg,#FFE0F4 0%,#FF7BC8 50%,#FFD6F0 100%) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent}
.rz-theme .eyebrow, .rz-theme .on-dark .eyebrow, .rz-theme .sec-navy .eyebrow{color:var(--rz-blush)}
.rz-theme .eyebrow::before, .rz-theme .eyebrow::after{background:var(--rz-blush)}
.rz-theme .sec-ice{background:linear-gradient(180deg, transparent, rgba(255,138,209,.06) 30%, rgba(255,138,209,.06) 70%, transparent)}
.rz-theme .sec-navy{background:transparent}
.rz-theme .blob{display:none}
.rz-theme .btn-ghost{border-color:rgba(255,214,240,.35); color:var(--rz-cham)}
.rz-theme .btn-ghost:hover{background:rgba(255,214,240,.1)}
.btn-rz{--bg:#FF8AD1; background:linear-gradient(120deg,#FFD6F0,#FF8AD1); color:#3B0D4F !important; box-shadow:0 12px 30px -12px rgba(255,138,209,.7)}
.rz-theme .feature, .rz-theme .pain > div, .rz-theme .faq details, .rz-theme .yes-no > div, .rz-theme .guarantee{background:rgba(255,214,240,.045) !important; border-color:rgba(255,214,240,.13) !important}
.rz-theme .feature .ic, .rz-theme .guarantee .ic, .rz-theme .process .num{background:linear-gradient(135deg,#B45CF0,#FF8AD1) !important; color:#251244 !important; box-shadow:0 10px 24px -10px rgba(255,138,209,.6)}
.rz-theme .process .line-fill, .rz-theme .process::before{background:linear-gradient(180deg,#FF8AD1,#B45CF0) !important}
.rz-theme .checks li::before{background:#FF8AD1 !important; color:#251244 !important}
.rz-theme .quote{color:#FBE8FF; font-family:"Frank Ruhl Libre",serif}
.rz-theme .cta-final{background:linear-gradient(135deg,#3A1760 0%,#6B2A9E 50%,#8B3FD9 100%) !important}
.rz-theme .cta-final::before, .rz-theme .cta-final::after{opacity:.35; filter:none}
.rz-theme .cta-final .btn-white{background:#FFD6F0; color:#3B0D4F}
.rz-theme .crumbs, .rz-theme .crumbs a{color:var(--txt-2)}
.rz-theme .faq summary{color:#FFF4FC}

/* header + footer + mobile menu in the Rezult world */
body.rz-theme .site-header.scrolled, body.rz-theme .site-header.solid{background:rgba(22,11,42,.86)}
body.rz-theme .bar{background:rgba(37,18,68,.72) !important; border-color:rgba(255,214,240,.14) !important}
body.rz-theme .logo{-webkit-mask:none; mask:none; background:url(../img/rezult-logo.png) center/contain no-repeat; width:56px !important; height:56px !important; border-radius:50%; box-shadow:0 0 0 2px rgba(255,214,240,.25)}
body.rz-theme .site-footer .logo{width:96px !important; height:96px !important}
body.rz-theme .site-footer{background:rgba(14,7,28,.8)}
body.rz-theme .header-cta{background:linear-gradient(120deg,#FFD6F0,#FF8AD1) !important; color:#3B0D4F !important}
body.rz-theme .header-cta svg{fill:#3B0D4F}
body.rz-theme .nav a::after, body.rz-theme .nav-ind{background:#FF8AD1 !important}
body.rz-theme .mm-panel{background:linear-gradient(180deg,#1E0F38,#160B2A) !important}
body.rz-theme .d2-cap{background:rgba(37,18,68,.9) !important}
body.rz-theme .d2.on{background:linear-gradient(120deg,#B45CF0,#FF8AD1) !important; color:#251244 !important}
body.rz-theme .progress{background:linear-gradient(90deg,#B45CF0,#FFD6F0) !important}
.by-zur{margin-inline-start:12px; font-size:.8rem; color:rgba(255,214,240,.7); text-decoration:none; white-space:nowrap; letter-spacing:.04em}
.by-zur b{font-family:"Rubik"; color:#FFD6F0}
.by-zur:hover{color:#FFD6F0}
@media (max-width:980px){ .by-zur{display:none} }

/* the Rezult link in the nav: a small dot in the brand's colors */
.nav-rz{display:inline-flex !important; align-items:center; gap:7px}
.rz-dot{width:9px; height:9px; border-radius:50%; background:linear-gradient(135deg,#FFD6F0,#FF7BC8); box-shadow:0 0 0 3px rgba(255,123,200,.22)}

/* ---- Rezult page: hero ---- */
.rz-hero{position:relative; padding:170px 0 90px; overflow:hidden; isolation:isolate}
.rz-glow{position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(40% 50% at 20% 30%, rgba(255,138,209,.18), transparent 70%), radial-gradient(35% 45% at 85% 70%, rgba(180,92,240,.16), transparent 70%)}
.rz-hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,70px); align-items:center}
.rz-word{display:block; font-family:"Cormorant Garamond",serif; font-weight:500; font-size:clamp(3.4rem,8vw,6.4rem); line-height:.9; color:#FFD6F0; letter-spacing:.01em; direction:ltr; text-align:right; margin:6px 0 4px;
  background:linear-gradient(120deg,#FFE6F6,#FF7BC8 60%,#FFD6F0); -webkit-background-clip:text; background-clip:text; color:transparent}
.rz-hero h1{font-size:clamp(2.3rem,4.6vw,3.8rem); line-height:1.12; color:#FFF4FC}
.rz-fan{position:relative; height:clamp(340px,40vw,520px)}
.rz-fan img:not(.rz-fan-logo){position:absolute; top:50%; left:50%; width:62%; aspect-ratio:1; object-fit:cover; border-radius:26px; box-shadow:0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,214,240,.15);
  transform:translate(-50%,-50%) rotate(var(--r)) translateX(var(--x)); animation:rzFloat 7s ease-in-out infinite alternate; animation-delay:var(--dl)}
.rz-fan img:nth-child(1){--r:-10deg; --x:-30%; --dl:0s}
.rz-fan img:nth-child(2){--r:9deg; --x:30%; --dl:-2s}
.rz-fan img:nth-child(3){--r:0deg; --x:0%; --dl:-4s; z-index:2; width:66%}
.rz-fan-logo{position:absolute; z-index:3; width:clamp(90px,10vw,130px); bottom:2%; right:4%; border-radius:50%; box-shadow:0 18px 40px -10px rgba(0,0,0,.7); animation:rzSpin 18s linear infinite}
@keyframes rzFloat{to{transform:translate(-50%,-53%) rotate(var(--r)) translateX(var(--x))}}
@keyframes rzSpin{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

.rz-vid-wrap .vcard{max-width:340px; margin-inline:auto; display:block; width:100%}
.rz-modes{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:960px; margin-inline:auto}
.rz-mode{padding:34px 30px; border-radius:30px; background:linear-gradient(160deg, rgba(255,214,240,.08), rgba(255,138,209,.03)); border:1px solid rgba(255,214,240,.14)}
.rm-ic{display:grid; place-items:center; width:58px; height:58px; border-radius:18px; font-size:1.6rem; background:rgba(255,214,240,.1); margin-bottom:16px}
.rz-duo{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1000px; margin-inline:auto}
.rz-person{display:flex; flex-direction:column; border-radius:30px; overflow:hidden; background:rgba(255,214,240,.05); border:1px solid rgba(255,214,240,.13)}
.rzp-ph{aspect-ratio:4/3; overflow:hidden}
.rzp-ph img{width:100%; height:100%; object-fit:cover}
.rzp-mono{display:grid; place-items:center; background:radial-gradient(circle at 50% 40%, #3A1760, #160B2A)}
.rzp-mono img{width:44%; height:auto; border-radius:50%; box-shadow:0 20px 50px -10px rgba(0,0,0,.6)}
.rzp-tx{padding:24px 26px 28px}
.rzp-tx small{color:var(--rz-blush); font-size:.78rem; letter-spacing:.08em}
.rzp-tx h3{font-family:"Frank Ruhl Libre",serif; font-size:1.6rem; margin:6px 0 8px}
.rz-quote{text-align:center; max-width:760px; margin:40px auto 0; font-size:clamp(1.25rem,2.2vw,1.6rem)}

/* ---- home page: two worlds ---- */
.worlds-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.world{position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; min-height:clamp(440px,48vw,560px); padding:clamp(26px,3.4vw,42px); border-radius:36px; text-decoration:none; color:#fff;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8); transition:transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s}
.w-bg{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; transform:scale(1.04); transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.world::before{content:""; position:absolute; inset:0; z-index:-1}
.w-zur::before{background:linear-gradient(to top, rgba(12,16,66,.97) 0%, rgba(40,30,120,.8) 45%, rgba(40,30,120,.25) 100%)}
.w-rz::before{background:linear-gradient(to top, rgba(22,11,42,.97) 0%, rgba(80,30,130,.82) 45%, rgba(80,30,130,.25) 100%)}
.w-zur{box-shadow:0 0 0 1px rgba(155,124,247,.35), 0 40px 80px -40px rgba(60,40,200,.8)}
.w-rz{box-shadow:0 0 0 1px rgba(255,138,209,.35), 0 40px 80px -40px rgba(200,60,180,.8)}
.world:hover{transform:translateY(-8px)}
.world:hover .w-bg{transform:scale(1.12)}
.w-logo-zur{position:absolute; top:28px; right:30px; width:120px; height:46px; -webkit-mask:url(../img/zur-logo.png) center/contain no-repeat; mask:url(../img/zur-logo.png) center/contain no-repeat; background:#fff}
.w-logo-rz{position:absolute; top:22px; right:26px; width:92px; height:92px; border-radius:50%; box-shadow:0 14px 34px -8px rgba(0,0,0,.6)}
.w-kicker{font-size:.82rem; letter-spacing:.14em; font-weight:700; margin-bottom:6px}
.w-zur .w-kicker{color:#C2AEFF}
.w-rz .w-kicker{color:#FF8AD1}
.world h3{font-size:clamp(1.6rem,2.8vw,2.3rem); line-height:1.15; margin:0 0 14px; color:#fff}
.w-rz h3{font-family:"Frank Ruhl Libre",serif; font-weight:500}
.world ul{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:7px}
.world li{display:flex; gap:9px; align-items:center; color:rgba(255,255,255,.88); font-size:1rem}
.world li::before{content:""; width:7px; height:7px; border-radius:50%; flex:none}
.w-zur li::before{background:#B9A4FF}
.w-rz li::before{background:#FF8AD1}
.w-cta{align-self:flex-start; display:inline-flex; gap:10px; align-items:center; padding:13px 22px; border-radius:999px; font-weight:700; transition:gap .3s}
.w-zur .w-cta{background:linear-gradient(120deg,#5B5BE6,#9B7CF7); color:#fff}
.w-rz .w-cta{background:linear-gradient(120deg,#FFD6F0,#FF8AD1); color:#3B0D4F}
.world:hover .w-cta{gap:16px}

/* hero: a link to Rezult */
.hero-rz{display:inline-flex; align-items:center; gap:10px; margin-top:18px; padding:7px 16px 7px 8px; border-radius:999px; text-decoration:none; color:#FBE8FF; font-size:.93rem;
  background:linear-gradient(120deg, rgba(107,42,158,.75), rgba(37,18,68,.75)); border:1px solid rgba(255,138,209,.35)}
.hero-rz img{border-radius:50%; flex:none}
.hero-rz b{font-family:"Cormorant Garamond",serif; font-size:1.15rem; color:#FFD6F0}
.hero-rz i{font-style:normal; transition:transform .3s}
.hero-rz:hover i{transform:translateX(-4px)}

/* ---- home page: the Rezult section ---- */
.rz-home{position:relative; isolation:isolate; margin-block:40px; padding-block:clamp(70px,9vw,120px) !important;
  background:linear-gradient(180deg, transparent 0, #1A0C33 120px, #1F0E3C 50%, #1A0C33 calc(100% - 120px), transparent 100%) !important}
.rzh-head{display:grid; grid-template-columns:auto 1fr; gap:clamp(22px,4vw,48px); align-items:center; max-width:1000px; margin:0 auto 46px}
.rzh-logo{width:clamp(110px,14vw,170px); height:auto; border-radius:50%; box-shadow:0 0 0 8px rgba(255,214,240,.06), 0 30px 60px -20px rgba(0,0,0,.8)}
.rzh-head h2{font-size:clamp(2rem,4vw,3.1rem); line-height:1.15}
.rz-pillars{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:64px}
.rz-pillars > div{padding:24px 22px; border-radius:24px; background:rgba(255,214,240,.05); border:1px solid rgba(255,214,240,.13); transition:transform .4s, background .4s}
.rz-pillars > div:hover{transform:translateY(-6px); background:rgba(255,214,240,.09)}
.rp-n{font-family:"Cormorant Garamond",serif; font-size:2rem; color:#FF7BC8; line-height:1}
.rz-pillars h3{margin:10px 0 6px; font-size:1.12rem}
.rz-pillars p{margin:0; font-size:.95rem}
.rzh-res{margin-bottom:22px}
.rzh-ctas{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:40px}

/* ---- the world-switch transition ---- */
.bw{position:fixed; inset:0; z-index:100000; display:grid; place-items:center; clip-path:circle(0px at var(--x) var(--y)); transition:clip-path .8s cubic-bezier(.75,0,.2,1)}
.bw.full{clip-path:circle(150vmax at var(--x) var(--y))}
.bw.arrive{transition:none}
.bw.gone{opacity:0; transition:opacity .7s ease}
.bw-rz{background:radial-gradient(60% 60% at 50% 45%, #3A1760, #160B2A)}
.bw-zur{background:radial-gradient(60% 60% at 50% 45%, #2A2380, #0D1140)}
.bw-in{display:grid; justify-items:center; gap:16px; opacity:0; transform:scale(.8); transition:opacity .45s .3s, transform .7s .3s cubic-bezier(.2,.8,.2,1)}
.bw.full .bw-in{opacity:1; transform:none}
.bw.gone .bw-in{transform:scale(1.08)}
.bw-in img{width:min(200px,42vw); border-radius:50%; box-shadow:0 30px 70px -10px rgba(0,0,0,.7)}
.bw-zur{color:#fff}
.bw-zur .bw-zur{width:min(240px,55vw); height:92px; display:block; -webkit-mask:url(../img/zur-logo.png) center/contain no-repeat; mask:url(../img/zur-logo.png) center/contain no-repeat; background:linear-gradient(120deg,#fff,#CFE8FF)}
.bw-in small{font-family:"Cormorant Garamond",serif; font-size:1.25rem; letter-spacing:.06em; color:#FFD6F0}
.bw-zur .bw-in small{font-family:"Rubik"; font-size:.9rem; letter-spacing:.3em; text-transform:uppercase; color:#C2AEFF}

@media (max-width:900px){
  .rz-hero{padding:130px 0 60px}
  .rz-hero-grid{grid-template-columns:1fr}
  .rz-fan{height:330px; order:-1; margin-bottom:-10px}
  .rz-modes, .rz-duo, .worlds-grid{grid-template-columns:1fr}
  .world{min-height:420px}
  .rz-pillars{grid-template-columns:1fr 1fr}
  .rzh-head{grid-template-columns:1fr; text-align:center; justify-items:center}
}
@media (max-width:520px){ .rz-pillars{grid-template-columns:1fr} .rz-fan{height:290px} .hero-rz{font-size:.84rem} }
/* Rezult: fixes for leftovers from the purple palette */
.rz-theme .quote{border-color:#FF8AD1 !important}
.rz-theme .step{--card:rgba(255,214,240,.045); --card-b:rgba(255,214,240,.13)}
.rz-theme .step.on{border-color:rgba(255,138,209,.45); background:linear-gradient(140deg, rgba(180,92,240,.2), rgba(255,214,240,.04)); box-shadow:0 30px 60px -30px rgba(0,0,0,.6), 0 0 50px -24px rgba(255,123,200,.7)}
.rz-theme .process .line-fill{box-shadow:0 0 14px rgba(255,123,200,.8) !important}
.rz-theme .process .line-fill::after{box-shadow:0 0 18px 6px rgba(255,123,200,.9)}
.bw-zur .bw-in small{display:none}

/* Rezult: the glowing pink */
.rz-theme .hl{filter:drop-shadow(0 0 18px rgba(255,123,200,.35))}
.rz-word{filter:drop-shadow(0 0 26px rgba(255,123,200,.45))}
.btn-rz, body.rz-theme .header-cta, .w-rz .w-cta{background:linear-gradient(120deg,#FF8AD1,#C77DFF) !important; color:#2A0B40 !important; box-shadow:0 0 0 1px rgba(255,170,225,.5), 0 12px 34px -8px rgba(255,110,200,.75) !important}

/* ---- Adi & Raz: the reel in the middle, the names on the sides ---- */
.rz-pair{display:grid; grid-template-columns:1fr minmax(280px,360px) 1fr; gap:clamp(20px,4vw,56px); align-items:center; max-width:1100px; margin-inline:auto}
.rz-name{padding:26px 26px 28px; border-radius:28px; background:rgba(255,214,240,.05); border:1px solid rgba(255,214,240,.14)}
.rz-name small{color:#FF8AD1; font-size:.78rem; letter-spacing:.08em}
.rz-name h3{font-family:"Frank Ruhl Libre",serif; font-weight:500; font-size:clamp(1.6rem,2.6vw,2.1rem); margin:6px 0 8px}
.rz-name p{margin:0}
.rz-name.n-adi{text-align:right}
.rz-name.n-raz{text-align:left}
.rz-name.n-raz :is(h3,p){text-align:left}
.rz-reel{position:relative}
.rz-reel .phone{box-shadow:0 0 0 2px rgba(255,170,225,.25), 0 50px 90px -30px rgba(0,0,0,.8), 0 0 90px -10px rgba(255,110,200,.45); background:linear-gradient(145deg,#3A1760,#160B2A)}
.rz-amp{position:absolute; top:-26px; left:50%; transform:translateX(-50%); z-index:2; font-family:"Cormorant Garamond",serif; font-size:3.4rem; line-height:1; color:#FFD6F0; filter:drop-shadow(0 0 16px rgba(255,123,200,.6))}
@media (max-width:900px){
  .rz-pair{grid-template-columns:1fr 1fr; }
  .rz-reel{grid-column:1 / -1; grid-row:1; max-width:340px; width:100%; margin:0 auto 10px}
  .rz-name.n-raz, .rz-name.n-raz :is(h3,p){text-align:right}
}
@media (max-width:520px){ .rz-pair{grid-template-columns:1fr} }
/* the Rezult button in the hero: the same spacing above and below (between the buttons and the numbers) */
.h3 .hero-rz{margin:-12px 0 28px}

/* ===== class bookings (Arbox) ===== */
.btn-book{background:var(--grad); color:#fff !important; box-shadow:0 12px 30px -10px rgba(155,124,247,.75)}
.btn-book svg, .hc-book svg{width:18px; height:18px; flex:none}
.hc-book{background:var(--grad) !important; color:#fff !important}
.book-tabs{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:14px}
.book-tabs button{padding:14px 22px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:#C9CFEE; font:inherit; font-size:1rem; cursor:pointer; transition:all .3s}
.book-tabs button b{color:#fff}
.book-tabs button[aria-selected="true"]{background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 14px 34px -12px rgba(155,124,247,.8)}
.book-hint{text-align:center; margin:0 auto 18px; max-width:640px; font-size:.98rem}
.book-frame{position:relative; border-radius:28px; overflow:hidden; background:#fff; min-height:520px;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 0 0 7px rgba(155,124,247,.12), 0 40px 80px -30px rgba(0,0,0,.8)}
.book-frame iframe{display:block; width:100%; height:min(1000px, 82vh); min-height:640px; border:0; background:#fff}
.book-load{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; background:#141550; color:#C9CFEE; font-weight:600; z-index:1; transition:opacity .4s}
.book-load i{width:42px; height:42px; border-radius:50%; border:3px solid rgba(255,255,255,.15); border-top-color:#E9A2C9; animation:bkspin .8s linear infinite}
.book-frame.ready .book-load{opacity:0; pointer-events:none}
@keyframes bkspin{to{transform:rotate(360deg)}}
.book-foot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:14px 4px 0; font-size:.92rem}
.book-foot a{color:#C2AEFF; cursor:pointer}
.book-info{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:40px}
.book-info .side-card{margin:0}
.book-steps{margin:0 0 12px; padding-inline-start:20px; display:grid; gap:6px; color:var(--txt-2)}
.book-cards{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:900px; margin-inline:auto}
.book-card{position:relative; display:flex; flex-direction:column; gap:4px; padding:30px 30px 28px; border-radius:30px; text-decoration:none; color:#fff; overflow:hidden; isolation:isolate;
  border:1px solid rgba(255,255,255,.12); transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s}
.bc-member{background:linear-gradient(140deg, rgba(40,83,201,.35), rgba(110,80,230,.18))}
.bc-trial{background:linear-gradient(140deg, rgba(155,124,247,.4), rgba(233,162,201,.28)); border-color:rgba(244,166,200,.35)}
.book-card:hover{transform:translateY(-6px); box-shadow:0 30px 60px -25px rgba(155,124,247,.8)}
.bc-ic{font-size:2rem; margin-bottom:6px}
.book-card small{color:#C9CFEE; font-size:.92rem}
.book-card b{font-family:"Rubik"; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.15}
.book-card > span:not(.bc-ic){color:#C9CFEE; font-size:.96rem}
.bc-go{position:absolute; left:26px; bottom:26px; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:1.2rem; background:rgba(255,255,255,.12); transition:transform .3s, background .3s}
.book-card:hover .bc-go{transform:translateX(-5px); background:#fff; color:#141550}
@media (max-width:820px){
  .book-info{grid-template-columns:1fr}
  .book-cards{grid-template-columns:1fr}
  .book-frame iframe{height:78vh; min-height:560px}
  .book-tabs button{flex:1 1 100%; padding:13px 16px}
  .book-foot{justify-content:center; text-align:center}
}
/* the hero buttons on a phone: side by side and smaller (half the space) */
@media (max-width:600px){
  .h3 .hero-ctas{gap:10px; flex-wrap:nowrap}
  .h3 .hero-ctas .btn{flex:1 1 0; min-width:0; min-height:48px; padding:.55em .7em; font-size:.9rem; line-height:1.25; white-space:normal; text-align:center}
}
/* the Adi & Raz reel: the "&" sits above the phone and not on it, and the phone is smaller on mobile */
.rz-reel{padding-top:52px}
.rz-amp{top:0}
@media (max-width:900px){
  .rz-reel{max-width:250px !important; padding-top:46px}
  .rz-amp{font-size:2.8rem}
}
/* the Adi & Raz reel is now a native video: a slightly bigger phone again on mobile */
@media (max-width:900px){ .rz-reel{max-width:290px !important} }
.rz-reel .vsound{bottom:30px; left:26px}
/* the running strip: moves by scrolling (JS) instead of one huge transformed layer, so iPhone always draws it */
.ticker.js-scroll{direction:ltr}
.ticker.js-scroll .ticker-track{animation:none !important; will-change:auto; backface-visibility:visible; -webkit-backface-visibility:visible; transform:none}
.ticker.js-scroll span{direction:rtl}
.btn-cal svg{width:20px; height:20px; flex:none}
.qz-wa{display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-size:.95rem; color:#9FE3B4; text-decoration:underline; text-underline-offset:4px}
.qz-wa svg{width:18px; height:18px}
a#nextClass{text-decoration:none; color:inherit}
a.cfx-next{text-decoration:none}
/* the client's video next to the Rezult results heading: a small card on the side */
.head-row .vc-mini{flex:0 0 210px; width:210px; align-self:center}
@media (max-width:820px){ .head-row .vc-mini{flex-basis:auto; width:min(240px,70%); margin:6px auto 10px} }
/* testimonials: 3 videos in one row */
.vrail-2{grid-template-columns:repeat(3,minmax(0,280px))}

/* ===== legal pages ===== */
.legal h2{font-size:clamp(1.25rem,2vw,1.5rem); margin:38px 0 10px}
.legal p, .legal li{line-height:1.8}
.legal ul.checks{display:grid; gap:10px}
.legal a{color:#C2AEFF; text-decoration:underline; text-underline-offset:3px}
.legal-date{font-size:.92rem; opacity:.75}
.legal-see{margin-top:40px; padding-top:20px; border-top:1px solid var(--line)}

/* the footer: legal links */
.foot-legal{display:inline-flex; flex-wrap:wrap; gap:6px 18px; align-items:center}
.foot-legal a, .cookie-link{color:inherit; opacity:.8; text-decoration:none; font:inherit; background:none; border:0; padding:0; cursor:pointer}
.foot-legal a:hover, .cookie-link:hover{opacity:1; text-decoration:underline}

/* ===== cookie notice ===== */
.cookie-bar{position:fixed; z-index:9990; inset-inline:16px; bottom:16px; max-width:560px; margin-inline:auto; padding:18px 20px; border-radius:22px;
  background:rgba(16,18,62,.96); border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
  display:grid; gap:12px; transform:translateY(130%); opacity:0; transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s}
.cookie-bar.in{transform:none; opacity:1}
.cookie-bar p{margin:0; font-size:.93rem; line-height:1.6; color:#D7DBF5}
.cookie-bar a{color:#C2AEFF; text-decoration:underline}
.cookie-btns{display:flex; gap:10px; flex-wrap:wrap}
.cookie-btns .btn{min-height:44px; padding:.5em 1.6em; font-size:.95rem}
.cookie-min{min-height:44px; padding:.5em 1.2em; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:transparent; color:#fff; font:inherit; font-size:.95rem; cursor:pointer}
.rz-theme .cookie-bar{background:rgba(22,11,42,.96)}
@media (max-width:820px){ .cookie-bar{bottom:96px} }   /* above the bottom navigation bar */

/* ===== accessibility menu: fixes and additions ===== */
/* high contrast: used to turn the background white while the headings stayed white. now black background, white text, yellow links */
html.a11y-contrast{filter:none}
html.a11y-contrast body{background:#000 !important}
html.a11y-contrast :is(p,.lead,li,span,small,td,th){color:#fff !important}
html.a11y-contrast :is(h1,h2,h3,h4,b){color:#fff !important}
html.a11y-contrast .hl{-webkit-text-fill-color:#FFE14D !important; color:#FFE14D !important; background:none !important; filter:none !important}
html.a11y-contrast a:not(.btn){color:#FFE14D !important}
html.a11y-contrast :is(.btn, button){outline:2px solid #fff; outline-offset:2px}
html.a11y-spacing body{letter-spacing:.12em !important; word-spacing:.16em !important}
html.a11y-spacing :is(p,li,.lead){line-height:2 !important}
html.a11y-cursor, html.a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-7 1 4 8-3 1.5-4-8-5 5z' fill='%23000' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 4 2, auto !important}

/* ===== color contrast (WCAG AA): the WhatsApp green and the gradient buttons were too light behind white text ===== */
:root{--wa:#11823F; --wa-dark:#0D6B33}
.btn-wa{--bg:#11823F !important; background:#11823F !important}
.btn-wa:hover{background:#0D6B33 !important}
/* gradient buttons with white text: a darker gradient (at least 5.7:1 at every point) */
.btn-book, .hc-book, .book-tabs button[aria-selected="true"], .w-zur .w-cta, .d2.on{
  background:linear-gradient(120deg,#2853C9 0%,#4F46D8 40%,#7A3FC4 72%,#A33F8E 100%) !important}
.qz-privacy{font-size:.82rem; opacity:.8; margin:10px 0 0; line-height:1.6}
.qz-privacy a{text-decoration:underline}
.foot-bottom > span:first-child{line-height:1.7}