/* Layout concept: drei Bögen (ein Weg pro Masterclass) als wiederkehrendes Motiv; ruhige Editorial-Typografie, Bordeaux nur als Akzent. */
:root{
  --bg:#F7F2EB; --bg2:#EFE6DA; --surface:#FFFFFF; --ink:#17120F; --ink2:#5B5249;
  --accent:#0F3D35; --on-accent:#F7F2EB; --gold:#87623A; --taupe:#A89587; --line:rgba(23,18,15,.15);
  --band:#17120F; --on-band:#F6EFE7; --band-ink2:#CFC2B5; --warn:#8A5A12; --warn-bg:#F6E9CC;
  --f-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --f-body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --f-script:'Italianno','Brush Script MT',cursive;
  --shadow:0 18px 40px -22px rgba(23,18,15,.4);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14110F; --bg2:#1D1815; --surface:#251E1A; --ink:#F3ECE3; --ink2:#BDB1A5;
    --accent:#D1AE82; --on-accent:#17120F; --gold:#D1AE82; --taupe:#8E7D71; --line:rgba(243,236,227,.16);
    --band:#0C0A09; --warn:#F0CF8A; --warn-bg:#3b2d10; --shadow:0 18px 40px -22px rgba(0,0,0,.7); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#14110F; --bg2:#1D1815; --surface:#251E1A; --ink:#F3ECE3; --ink2:#BDB1A5;
  --accent:#D1AE82; --on-accent:#17120F; --gold:#D1AE82; --taupe:#8E7D71; --line:rgba(243,236,227,.16);
  --band:#0C0A09; --warn:#F0CF8A; --warn-bg:#3b2d10; --shadow:0 18px 40px -22px rgba(0,0,0,.7); color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:500;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:1180px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
section{padding-block:clamp(56px,9vw,112px)}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.lead{font-size:clamp(18px,2.1vw,21px);color:var(--ink2);max-width:60ch}
.h2{font-size:clamp(30px,4.6vw,52px)}
.sec-head{display:grid;gap:16px;margin-bottom:clamp(32px,5vw,56px);max-width:760px}
.alt{background:var(--bg2)}
.ph{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--warn-bg);color:var(--warn);padding:3px 9px;border-radius:99px;vertical-align:middle}

/* Demo-Leiste und Header */
.demo-bar{background:var(--band);color:var(--on-band);font-size:13.5px;padding-block:9px;text-align:center}
.demo-bar .wrap{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.demo-bar b{background:var(--warn-bg);color:var(--warn);padding:1px 8px;border-radius:99px;font-size:11.5px;letter-spacing:.06em}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
header.top.scrolled{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.bar{display:flex;align-items:center;gap:20px;min-height:72px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-size:22px;font-weight:500;letter-spacing:-.01em;margin-right:auto}
.logo svg{width:28px;height:28px;color:var(--accent)}
nav.main{display:flex;gap:4px}
nav.main a{text-decoration:none;font-size:15px;font-weight:500;padding:8px 12px;border-radius:99px;transition:background .2s}
nav.main a:hover{background:var(--bg2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:99px;border:1.5px solid var(--accent);background:var(--accent);color:var(--on-accent);font-weight:600;font-size:16px;text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s,color .25s;position:relative}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px var(--accent)}
.btn svg{width:18px;height:18px;transition:transform .25s}
.btn:hover svg{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.ghost:hover{background:var(--accent);color:var(--on-accent)}
.btn.sm{min-height:42px;padding:8px 18px;font-size:15px}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:transparent;display:grid;place-items:center}
.icon-btn svg{width:20px;height:20px}
.burger{display:none}
@media(max-width:980px){
  nav.main,.bar .btn.cta-head{display:none}
  .burger{display:grid}
}
.drawer{position:fixed;inset:0;z-index:70;background:var(--bg);padding:calc(env(safe-area-inset-top,0px) + 20px) max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:6px;transform:translateY(-100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer a.l{font-family:var(--f-display);font-size:30px;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line)}
.drawer .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:80;transform-origin:left;transform:scaleX(0);background:var(--accent)}

/* Hero */
.hero{position:relative;padding-top:clamp(24px,5vw,56px);padding-bottom:clamp(56px,8vw,96px);overflow:hidden}
.hero .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.38;pointer-events:none;animation:drift 22s ease-in-out infinite alternate}
.hero .b1{width:420px;height:420px;background:var(--taupe);left:-120px;top:-80px}
.hero .b2{width:360px;height:360px;background:var(--accent);opacity:.16;right:-100px;bottom:-60px;animation-duration:28s}
@keyframes drift{to{transform:translate(60px,40px) scale(1.12)}}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(44px,7.4vw,92px);margin:18px 0 24px;font-weight:500}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln>span{display:inline-block;transform:translateY(105%);animation:rise 1s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .ln:nth-child(2)>span{animation-delay:.12s}
.hero h1 .ln:nth-child(3)>span{animation-delay:.24s;color:var(--gold)}
@keyframes rise{to{transform:none}}
.hero .fade{opacity:0;animation:fadeup .9s .5s cubic-bezier(.2,.8,.2,1) forwards}
.hero .fade.d2{animation-delay:.7s}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.trust{margin-top:26px;font-size:15px;color:var(--ink2);display:flex;gap:10px;align-items:center}
.trust i{width:36px;height:1.5px;background:var(--accent);display:block}
@keyframes bob{to{translate:0 -10px}}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}.hcs{order:-1;max-width:440px;justify-self:center}}

/* Reveal */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*90ms)}
.js .rv.in{opacity:1;transform:none}

/* Cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:980px){.grid3{grid-template-columns:1fr}}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:16px;min-width:0;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,-40%),color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card:hover::after{opacity:1}
.card h3{font-size:26px}
.card p{color:var(--ink2);font-size:16px}
.recog .q{font-family:var(--f-display);font-size:24px;line-height:1.2;color:var(--ink)}
.link{display:inline-flex;gap:8px;align-items:center;font-weight:600;color:var(--accent);text-decoration:none;margin-top:auto;min-height:44px}
.link svg{width:18px;height:18px;transition:transform .25s}
.link:hover svg{transform:translateX(5px)}
.course .art{height:150px;border-radius:14px;background:var(--bg2);display:grid;place-items:center;color:var(--accent);margin:-6px -6px 0}
.course .art svg{width:75%;height:100%}
.course .art path,.course .art circle,.course .art line{stroke-dasharray:1;stroke-dashoffset:1}
.in .art path,.in .art circle,.in .art line{animation:draw 1.6s .2s cubic-bezier(.4,0,.2,1) forwards}
.in .art circle{animation-delay:1.1s}
@keyframes draw{to{stroke-dashoffset:0}}
.nr{font-family:var(--f-display);font-size:15px;color:var(--accent);letter-spacing:.1em}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.chips li{font-size:13.5px;padding:5px 12px;border-radius:99px;background:var(--bg2);color:var(--ink)}
.meta{display:grid;gap:6px;font-size:14.5px;color:var(--ink2);border-top:1px solid var(--line);padding-top:14px}
.meta b{color:var(--ink);font-weight:600}

/* Finder */
.finder{background:var(--band);color:var(--on-band);border-radius:32px;padding:clamp(24px,5vw,64px);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,64px);position:relative;overflow:hidden}
.finder .eyebrow{color:var(--band-ink2)}
.finder .lead{color:var(--band-ink2)}
@media(max-width:900px){.finder{grid-template-columns:1fr}}
.fbox{background:color-mix(in srgb,#fff 7%,transparent);border:1px solid color-mix(in srgb,#fff 16%,transparent);border-radius:22px;padding:clamp(18px,3vw,32px);min-height:420px;display:flex;flex-direction:column;gap:20px}
.fprog{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--band-ink2)}
.fprog .track{flex:1;height:5px;border-radius:9px;background:color-mix(in srgb,#fff 16%,transparent);overflow:hidden}
.fprog .fill{height:100%;background:#D1AE82;width:0;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.fbox fieldset{border:0;padding:0;margin:0;display:grid;gap:10px;min-width:0}
.fbox legend{font-family:var(--f-display);font-size:clamp(24px,3vw,32px);line-height:1.15;margin-bottom:14px;padding:0}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0;width:100%;height:100%}
.opt span{display:flex;gap:14px;align-items:center;padding:15px 18px;border-radius:14px;border:1.5px solid color-mix(in srgb,#fff 22%,transparent);transition:all .25s;min-height:56px}
.opt span::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:2px solid currentColor;opacity:.6;transition:all .25s}
.opt:hover span{background:color-mix(in srgb,#fff 9%,transparent)}
.opt input:checked+span{background:var(--on-band);color:#17120F;border-color:var(--on-band)}
.opt input:checked+span::before{background:#0F3D35;border-color:#0F3D35;box-shadow:inset 0 0 0 4px var(--on-band);opacity:1}
.opt input:focus-visible+span{outline:3px solid #D1AE82;outline-offset:3px}
.fnav{display:flex;gap:12px;justify-content:space-between;margin-top:auto}
.finder .btn{background:var(--on-band);color:#17120F;border-color:var(--on-band)}
.finder .btn.ghost{background:transparent;color:var(--on-band);border-color:color-mix(in srgb,#fff 40%,transparent)}
.finder .btn[disabled]{opacity:.4;pointer-events:none}
.res{display:grid;gap:16px;animation:fadeup .6s both}
.res .why{font-size:18px;color:var(--on-band)}
.rcard{background:var(--on-band);color:#262321;border-radius:18px;padding:20px;display:grid;gap:8px}
.rcard h4{font-size:26px;color:#17120F}
.rcard p{font-size:15px;color:#5A504A}
.rcard .btn{background:#0F3D35;border-color:#0F3D35;color:#F7F2EB;justify-self:start}
.small-note{font-size:13px;color:var(--band-ink2)}

/* Principles */
.p4{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
@media(max-width:760px){.p4{grid-template-columns:1fr}}
.pr{padding:32px 28px 32px 0;border-bottom:1px solid var(--line);display:grid;gap:10px;transition:padding .3s}
.pr h3{font-size:26px}
.pr p{color:var(--ink2)}
.pr:hover{padding-left:12px}
.pr .k{width:40px;height:3px;background:var(--accent);transition:width .4s}
.pr:hover .k{width:84px}

/* Learn preview */
.lp{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,5vw,64px);align-items:start}
@media(max-width:900px){.lp{grid-template-columns:1fr}}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.tab{border:1.5px solid var(--line);background:transparent;padding:9px 16px;border-radius:99px;font-weight:600;font-size:15px;min-height:44px;transition:all .25s}
.tab[aria-selected="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.player{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:clamp(18px,3vw,28px);box-shadow:var(--shadow)}
.ptop{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.ring{width:64px;height:64px;flex:none}
.ring circle{fill:none;stroke-width:6}
.ring .bgc{stroke:var(--bg2)}
.ring .fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:163.4;transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1);transform:rotate(-90deg);transform-origin:center}
.ring text{font-size:15px;font-weight:700;fill:var(--ink);font-family:var(--f-body)}
.mods{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.mods button{width:100%;text-align:left;display:flex;gap:14px;align-items:center;padding:13px 16px;border-radius:14px;border:1px solid var(--line);background:transparent;min-height:54px;transition:all .25s}
.mods button:hover{border-color:var(--accent);transform:translateX(4px)}
.mods .dot{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--taupe);display:grid;place-items:center;font-size:12px;font-weight:700;transition:all .3s}
.mods button[aria-pressed="true"]{background:var(--bg2)}
.mods button[aria-pressed="true"] .dot{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.formats{display:grid;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.formats li{display:flex;gap:12px;align-items:flex-start;color:var(--ink2);font-size:16px}
.formats svg{flex:none;width:22px;height:22px;color:var(--accent);margin-top:2px}

/* Team / Goals / Pricing */
.person{border:1.5px dashed var(--taupe);border-radius:22px;padding:24px;display:grid;gap:12px;background:transparent}
.person .av{width:84px;height:104px;border-radius:999px 999px 10px 10px;background:var(--bg2);display:grid;place-items:center;color:var(--taupe);font-size:12px;text-align:center;padding:6px}
.person dl{margin:0;display:grid;gap:4px;font-size:14.5px;color:var(--ink2)}
.person dt{font-weight:600;color:var(--ink)}
.person dd{margin:0 0 6px}
.goal h3{font-size:24px}
.goal ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.goal li,.tick li{display:flex;gap:10px;color:var(--ink2);font-size:16px}
.goal li::before,.tick li::before{content:"";flex:none;width:18px;height:18px;margin-top:4px;background:var(--accent);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat}
.tick{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.tick.no li::before{background:var(--taupe);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat}
.price{font-family:var(--f-display);font-size:34px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.price small{font-family:var(--f-body);font-size:14px;color:var(--ink2)}
.dl{display:grid;gap:10px;margin:0;font-size:15px}
.dl div{display:grid;grid-template-columns:130px 1fr;gap:12px;border-top:1px solid var(--line);padding-top:10px}
.dl dt{font-weight:600}.dl dd{margin:0;color:var(--ink2)}
@media(max-width:480px){.dl div{grid-template-columns:1fr;gap:2px}}

/* Accordion */
.acc{display:grid;border-top:1px solid var(--line)}
.ai{border-bottom:1px solid var(--line)}
.ai>h3,.ai>h4{font-family:var(--f-body);font-size:inherit;font-weight:inherit;letter-spacing:0}
.ai button.q{width:100%;background:none;border:0;text-align:left;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font-family:var(--f-display);font-size:clamp(19px,2.4vw,24px);min-height:64px}
.ai button.q .pm{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);position:relative;transition:all .3s}
.ai button.q .pm::before,.ai button.q .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.8px;background:currentColor;translate:-50% -50%;transition:rotate .3s}
.ai button.q .pm::after{rotate:90deg}
.ai button.q[aria-expanded="true"] .pm{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.ai button.q[aria-expanded="true"] .pm::after{rotate:0deg}
.ai .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)}
.ai .a>div{overflow:hidden;min-height:0}
.ai .a.open{grid-template-rows:1fr}
.ai .a p{padding:0 0 22px;color:var(--ink2);max-width:68ch}
.ai .num{font-family:var(--f-display);color:var(--accent);margin-right:12px}

/* Form */
form.contact{display:grid;gap:18px;max-width:640px}
.fld{display:grid;gap:6px}
.fld label{font-weight:600;font-size:15px}
.fld input,.fld select,.fld textarea{font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:13px 16px;min-height:50px;width:100%}
.fld textarea{min-height:110px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);border-color:var(--accent)}
.fld .err{color:#B3261E;font-size:14px;min-height:0}
:root[data-theme="dark"] .fld .err{color:#FFB4A9}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .fld .err{color:#FFB4A9}}
.fld [aria-invalid="true"]{border-color:#B3261E}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink2)}
.chk input{width:22px;height:22px;margin-top:2px;accent-color:var(--accent);flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{padding:14px 18px;border-radius:14px;background:var(--warn-bg);color:var(--warn);font-size:15px}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,72px)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* Final / footer */
.final{background:var(--band);color:var(--on-band);text-align:left;position:relative;overflow:hidden}
.final h2{font-size:clamp(34px,5.5vw,64px);max-width:16ch}
.final p{color:var(--band-ink2);margin-top:18px;max-width:50ch}
.final .btn{background:var(--on-band);color:#17120F;border-color:var(--on-band)}
.final .btn.ghost{background:transparent;color:var(--on-band);border-color:color-mix(in srgb,#fff 40%,transparent)}
.final .arc{position:absolute;right:-4%;bottom:-30%;width:min(520px,60vw);aspect-ratio:1/1.2;border:2px solid color-mix(in srgb,#fff 18%,transparent);border-radius:999px 999px 0 0;pointer-events:none}
.final .arc.b{right:6%;width:min(380px,44vw);bottom:-30%}
footer{padding-block:56px 40px;background:var(--bg);font-size:15px;color:var(--ink2)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
footer h4{font-family:var(--f-body);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:12px;font-weight:700}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{text-decoration:none}footer a:hover{color:var(--accent)}
.legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px}

/* Course view */
.crumb{display:inline-flex;gap:8px;align-items:center;text-decoration:none;font-weight:600;color:var(--accent);min-height:44px}
.crumb svg{width:18px;height:18px;rotate:180deg}
.chero{padding-top:clamp(16px,3vw,32px)}
.chero h1{font-size:clamp(46px,8vw,104px);margin:14px 0 20px;font-weight:500}
.chero .sub{font-size:clamp(19px,2.4vw,24px);color:var(--ink2);max-width:52ch}
.big-nr{font-family:var(--f-display);font-size:clamp(90px,16vw,200px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--taupe);margin-bottom:6px}
.situation{font-family:var(--f-display);font-size:clamp(26px,3.8vw,44px);line-height:1.2;max-width:28ch;font-style:italic;font-weight:400}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px)}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.exercise{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:clamp(20px,4vw,40px);display:grid;gap:20px}
.ex-grid{display:grid;gap:16px;max-width:680px}
.sentence{font-family:var(--f-display);font-size:clamp(22px,3vw,32px);line-height:1.3;padding:20px;border-radius:16px;background:var(--bg2)}
.sentence em{color:var(--accent);font-style:normal;border-bottom:2px solid var(--accent)}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{border:1.5px solid var(--line);background:transparent;border-radius:99px;padding:8px 18px;min-height:44px;font-weight:600;transition:all .2s}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.stack{display:flex;height:44px;border-radius:12px;overflow:hidden;gap:3px}
.stack i{display:block;height:100%;transition:flex-grow .6s cubic-bezier(.2,.8,.2,1);min-width:0}
.rng{display:grid;gap:4px}
.rng label{display:flex;justify-content:space-between;font-weight:600;font-size:15px}
.rng input{width:100%;accent-color:var(--accent);min-height:32px}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--ink2)}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--c);margin-right:7px}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:55;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:none;gap:12px;align-items:center;justify-content:space-between;transform:translateY(110%);transition:transform .4s}
.sticky-cta.show{transform:none}
.sticky-cta b{font-family:var(--f-display);font-weight:500;font-size:18px}
@media(max-width:820px){.sticky-cta{display:flex}}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));translate:-50% 20px;opacity:0;background:var(--band);color:var(--on-band);padding:12px 20px;border-radius:99px;font-size:15px;z-index:90;transition:all .35s;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;translate:-50% 0}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .hero h1 .ln>span{transform:none}
  .hero .fade{opacity:1}
  .course .art path,.course .art circle,.course .art line{stroke-dashoffset:0}
}

.dash-link svg{width:20px;height:20px}
.dash-link:hover svg{transform:none}
@media(max-width:700px){.dash-link{width:44px;min-height:44px;padding:0}.dash-link span{display:none}}
.phh{font-size:clamp(40px,7vw,84px);font-weight:500}
.crumbs{font-size:14px;color:var(--ink2);margin-bottom:14px}
.crumbs a{color:var(--accent)}
.docs,.mrow{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.docs li,.mrow .locked{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.kind{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--bg2);color:var(--accent);padding:3px 9px;border-radius:99px}
.mrow button{width:100%;display:flex;gap:14px;align-items:center;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:transparent;min-height:54px;transition:all .25s}
.mrow button:hover{border-color:var(--accent);transform:translateX(4px)}
.locked{color:var(--ink2)}
.app{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(20px,3vw,40px);padding-block:28px 80px;align-items:start}
.side{position:sticky;top:96px;display:grid;gap:6px}
.side a{display:flex;align-items:center;min-height:46px;padding:10px 16px;border-radius:14px;text-decoration:none;font-weight:600;transition:background .2s}
.side a:hover{background:var(--bg2)}
.side a[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
.side .me{padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);margin-bottom:10px;font-size:14px;color:var(--ink2)}
@media(max-width:860px){.app{grid-template-columns:1fr}.side{position:static;display:flex;overflow-x:auto;gap:6px;padding-bottom:6px}.side a{white-space:nowrap}.side .me{display:none}}
.dh{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.dh h1{font-size:clamp(30px,4vw,48px);margin-top:6px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:6px}
.kpi b{font-family:var(--f-display);font-size:clamp(26px,3vw,36px);font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.kpi span{font-size:14px;color:var(--ink2)}
.dg{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
@media(max-width:1000px){.dg{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;display:grid;gap:14px;align-content:start;min-width:0}
.panel h2{font-size:24px}
.panel.lock{background:transparent;border-style:dashed}
.bars{display:flex;gap:10px}
.bcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.bt{height:150px;width:100%;display:flex;align-items:flex-end;justify-content:center;border-bottom:1.5px solid var(--line)}
.bt i{display:block;width:100%;max-width:44px;background:var(--accent);border-radius:8px 8px 2px 2px;min-height:3px;transition:height .7s cubic-bezier(.2,.8,.2,1)}
.bn{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.bd{font-size:12.5px;color:var(--ink2)}
.pbar{height:8px;border-radius:9px;background:var(--bg2);overflow:hidden}
.pbar i{display:block;height:100%;background:var(--accent);border-radius:9px;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.prow{display:grid;gap:6px}
.prow .t{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.step{display:flex;gap:14px;align-items:center}
.step button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:transparent;font-size:22px;line-height:1}
.step output{font-family:var(--f-display);font-size:32px;min-width:2ch;text-align:center;font-variant-numeric:tabular-nums}
.sheet{background:var(--bg);border:1px dashed var(--taupe);border-radius:14px;padding:20px;display:grid;gap:14px}
.sheet p{border-bottom:1px solid var(--line);padding-bottom:12px;color:var(--ink)}
.plan{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
@media(max-width:900px){.plan{grid-template-columns:repeat(2,1fr)}}
.pday{display:grid;gap:6px}
.pday label{font-weight:700;font-size:14px}
.pday select{font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:10px;min-height:46px;width:100%}

.hcs{position:relative;aspect-ratio:1/1.05;max-width:560px;justify-self:end;width:100%}
.hc{position:absolute;width:66%;aspect-ratio:3/2;border-radius:120px 22px 22px 22px;overflow:hidden;box-shadow:var(--shadow);display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;background:var(--bg2)}
.hc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.hc:hover{transform:translateY(-6px) scale(1.02);z-index:5}
.hc .lab{position:absolute;left:14px;bottom:14px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;padding:6px 14px;border-radius:99px;box-shadow:var(--shadow)}
.h1c{left:0;top:0}.h2c{right:0;top:29%;border-radius:22px 120px 22px 22px}.h3c{left:6%;top:58%}
.hnote{position:absolute;right:0;top:-12px;z-index:6}
.float{animation:bob 7s ease-in-out infinite alternate}
.h2c.float{animation-delay:-2s}.h3c.float{animation-delay:-4s}
@keyframes bob{to{translate:0 -10px}}
.course .art{height:auto;aspect-ratio:3/2;padding:0;overflow:hidden;border-radius:16px;margin:-6px -6px 0;display:block}
.course .art img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.card:hover .art img{transform:scale(1.06)}
.quote{font-family:var(--f-script);font-size:clamp(38px,5.5vw,68px);line-height:1.05;color:var(--gold);max-width:24ch;font-weight:400}
.founders{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);align-items:center;margin-bottom:28px}
.founders img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 20%;border-radius:120px 24px 24px 24px;box-shadow:var(--shadow)}
@media(max-width:760px){.founders{grid-template-columns:1fr}}
.cx-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:center;margin-top:12px}
@media(max-width:900px){.cx-grid{grid-template-columns:1fr}}
.cx h1{font-size:clamp(52px,8vw,104px);margin:16px 0 10px;font-weight:500;letter-spacing:-.02em}
.cx h1 .gold{color:var(--gold)}
.tagrow{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.tagrow b{background:var(--bg2);color:var(--ink);padding:7px 14px;border-radius:99px;font-weight:600}
.claim{font-size:clamp(20px,2.6vw,30px);font-weight:600;line-height:1.2;margin:10px 0 14px;max-width:26ch}
.bens{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
@media(max-width:620px){.bens{grid-template-columns:1fr}}
.ben{display:flex;gap:12px;align-items:center;font-size:14.5px;line-height:1.3}
.ben i{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold)}
.ben svg{width:24px;height:24px}
.trustrow{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--ink2);margin-top:18px}
.cphoto{position:relative;padding-bottom:12%}
.cphoto .main{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 20%;border-radius:120px 24px 24px 24px;display:block;box-shadow:var(--shadow)}
.cphoto .mock{position:absolute;right:-2%;bottom:0;width:58%;border-radius:16px;box-shadow:var(--shadow);border:4px solid var(--bg)}
.expect{background:var(--band);color:var(--on-band)}
.expect .eyebrow{color:var(--gold)}
.expect .tick li{color:var(--on-band)}
.expect .tick li::before{background:var(--gold)}
.mockbig{width:100%;border-radius:20px;display:block}
:root[data-theme="dark"] .final,:root[data-theme="dark"] .expect{border-block:1px solid var(--line)}
/* ---------- Intro & Seitenwechsel ---------- */
.intro,.curtain{position:fixed;inset:0;z-index:200;background:#0F3D35;color:#F7F2EB;display:grid;place-items:center;pointer-events:none}
.intro{animation:introOut .9s cubic-bezier(.77,0,.18,1) 2.1s forwards}
.intro .ib{display:grid;justify-items:center;gap:18px;animation:ibOut .5s ease 1.9s forwards}
.intro svg,.curtain svg{width:72px;height:72px;color:#D1AE82}
.intro svg path{stroke-dasharray:90;stroke-dashoffset:90;animation:draw 1.2s ease .2s forwards}
.intro .wm{font-family:var(--f-display);font-size:clamp(26px,5vw,38px);letter-spacing:.02em;opacity:0;transform:translateY(10px);animation:wmIn .8s ease .9s forwards}
.intro .ln{width:0;height:1px;background:#D1AE82;animation:lnIn .9s ease 1.1s forwards}
.intro .sub{font-size:12px;letter-spacing:.28em;text-transform:uppercase;opacity:0;animation:wmIn .8s ease 1.3s forwards;color:#D1AE82}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes wmIn{to{opacity:1;transform:none}}
@keyframes lnIn{to{width:120px}}
@keyframes ibOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes introOut{0%{clip-path:inset(0 0 0 0)}99%{clip-path:inset(0 0 100% 0);visibility:visible}100%{clip-path:inset(0 0 100% 0);visibility:hidden}}
.curtain{transform:translateY(100%);transition:transform .42s cubic-bezier(.77,0,.18,1)}
.curtain svg{width:48px;height:48px;opacity:.9}
.curtain.in{transform:none}
.curtain.out{transform:translateY(-100%)}
.curtain.rst{transition:none}
body.booting #home,body.booting #course{opacity:0}
#home,#course{animation:pgIn .7s ease both}
@keyframes pgIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.intro{animation:introOutRM .3s ease .6s forwards}.intro *{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}.intro .ln{width:120px!important}.curtain{display:none}#home,#course{animation:none}}
@keyframes introOutRM{to{opacity:0;visibility:hidden}}
.tbl{overflow-x:auto}
.tbl table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);font-weight:600}
.tbl tfoot td{font-weight:600;border-bottom:0}
.tbl small{color:var(--ink2)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bdg{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600;background:var(--bg2);color:var(--ink2);border:1px solid var(--line)}
.bdg.ok{background:var(--accent);color:var(--on-accent);border-color:transparent}
.wm2 i,.intro .wm i{font-style:normal;color:var(--gold)}
.intro .wm i{color:#D1AE82}
.wm2{letter-spacing:-.01em}
@media(max-width:520px){.bar{gap:6px}.logo{font-size:17.5px;gap:7px}.logo svg{width:24px;height:24px}.icon-btn{width:40px;height:40px}.dash-link{width:40px!important;min-height:40px!important}.demo-bar{font-size:13px}}
.h1c{z-index:3}.h2c{z-index:2}.h3c{z-index:1}
.intro.skip{display:none}
.lead-box{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,56px);align-items:center;background:var(--accent);color:var(--on-accent);border-radius:28px;padding:clamp(24px,5vw,56px)}
.lead-box h2{color:inherit}.lead-box p{color:inherit;opacity:.88}
.lead-box form{display:grid;gap:12px}.lead-box label{font-size:14px;font-weight:600}
.lead-box input[type=text],.lead-box input[type=email]{width:100%;min-height:48px;border-radius:14px;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:inherit;padding:10px 14px;font:inherit}
.lead-box .btn{background:var(--on-accent);color:var(--accent);border-color:var(--on-accent)}
.lead-box .chk{font-size:14px}
@media(max-width:820px){.lead-box{grid-template-columns:1fr}}
.cert{border:2px solid var(--gold);border-radius:20px;padding:clamp(22px,4vw,44px);text-align:center;background:var(--surface);display:grid;gap:10px}
.cert h2{font-size:clamp(26px,4vw,40px)}
.cert .big{font-family:var(--f-display);font-size:clamp(28px,4.5vw,46px);color:var(--gold);line-height:1.1}
.warn{padding:12px 16px;border-radius:14px;background:var(--warn-bg);color:var(--warn);font-size:14.5px}
.dash-link svg,#adminLink{flex:none}
@media(max-width:700px){.bar .btn.sm.dash-link{padding:0;gap:0;width:40px}.bar #adminLink{padding:6px 12px;min-height:40px;font-size:14px}}
.lead-box .chk span,.lead-box .chk a{color:inherit}
.lead-box .err{color:#F6D7A8}
.lwhero{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(18px,3vw,36px);background:var(--accent);color:var(--on-accent);border-radius:26px;padding:clamp(22px,4vw,44px);margin-bottom:16px;align-items:center}
.lwhero h1{font-size:clamp(30px,4.5vw,52px);color:inherit;margin:8px 0 12px}
.lwsub{opacity:.92;margin:0 0 18px;max-width:52ch}
.lwhero .btn{background:var(--on-accent);color:var(--accent);border-color:var(--on-accent)}
.lwlvl{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:20px;display:grid;gap:8px}
.lwlvl .pbar{background:rgba(255,255,255,.2)}.lwlvl .pbar i{background:#D1AE82}
.lwlvl b{font-family:var(--f-display);font-size:30px;font-weight:500;line-height:1.1}
.lvn{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.lwlvl.wide{background:var(--accent);color:var(--on-accent);border:0}
.lwmini{display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;opacity:.92}.lwmini b{font-size:18px;font-family:var(--f-body);font-weight:700}
@media(max-width:820px){.lwhero{grid-template-columns:1fr}}
.lwrow{display:grid;gap:10px;padding:14px 0;border-top:1px solid var(--line)}
.lwrow.locked{opacity:.7}
.lwt{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.lwpath{list-style:none;margin:0;padding:6px 2px 10px;display:flex;gap:0;overflow-x:auto}
.lwpath li{flex:1 0 96px;position:relative;text-align:center}
.lwpath li::before{content:"";position:absolute;top:19px;left:-50%;width:100%;height:3px;background:var(--line)}
.lwpath li:first-child::before{display:none}
.lwpath li.done::before,.lwpath li.next::before{background:var(--accent)}
.lwpath a{display:grid;justify-items:center;gap:8px;text-decoration:none;position:relative}
.lwpath .nd{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);font-weight:700;font-size:15px;position:relative;z-index:1}
.lwpath .done .nd{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.lwpath .next .nd{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 20%,transparent);animation:pulse 2.2s ease-in-out infinite}
.lwpath .nl{font-size:12.5px;color:var(--ink2);line-height:1.25;max-width:92px}
@keyframes pulse{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--gold) 6%,transparent)}}
@media(prefers-reduced-motion:reduce){.lwpath .next .nd{animation:none}}
.bgrow{display:flex;gap:10px;flex-wrap:wrap}
.bgd{display:inline-flex;gap:8px;align-items:center;padding:8px 14px;border-radius:99px;border:1px solid var(--line);font-size:14.5px;font-weight:600}
.bgd.on{background:color-mix(in srgb,var(--gold) 16%,var(--surface));border-color:var(--gold)}
.bgd i{font-style:normal;color:var(--gold)}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.bgc{border:1px dashed var(--line);border-radius:18px;padding:18px;display:grid;gap:6px;background:transparent;opacity:.75}
.bgc.on{border:1px solid var(--gold);background:var(--surface);opacity:1}
.bgc i{font-style:normal;font-size:28px;color:var(--gold)}
.bgc span{color:var(--ink2);font-size:14.5px}.bgc small{font-weight:600;color:var(--ink2)}
.lwp{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(20px,3vw,44px);padding-block:28px 90px;align-items:start}
.lwside{position:sticky;top:96px;display:grid;gap:10px}
.lwct{font-family:var(--f-display);font-size:26px;font-weight:500;line-height:1.15}
.lwmods{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.lwmods a{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;text-decoration:none;font-size:15px;line-height:1.3}
.lwmods a:hover{background:var(--bg2)}.lwmods a[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
.lwmods .dot{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor;font-size:13px;font-weight:700}
.lwmain h1{font-size:clamp(30px,4.5vw,52px);margin:10px 0 14px}
.vidph{margin-top:18px;aspect-ratio:16/9;max-height:360px;border-radius:22px;background:var(--bg2);border:1px dashed var(--line);display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:20px;color:var(--ink2)}
.refl{margin:0 0 6px;padding-left:20px;display:grid;gap:8px}
.note{width:100%;min-height:140px;border-radius:14px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);padding:12px 14px;font:inherit;line-height:1.5;resize:vertical}
.lwnav{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:22px}
@media(max-width:900px){.lwp{grid-template-columns:1fr}.lwside{position:static}}
.app-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
@media(max-width:900px){.app-grid{grid-template-columns:1fr}}
.stores{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.store{display:flex;align-items:center;gap:12px;padding:10px 20px 10px 16px;border-radius:14px;background:#17120F;color:#F7F2EB;opacity:.92;cursor:default;min-height:56px}
.store svg{width:26px;height:26px;flex:none}.store small{display:block;font-size:11.5px;opacity:.8;letter-spacing:.04em}.store b{font-size:18px;font-weight:600;line-height:1.1}
.appform{display:grid;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(18px,3vw,28px);max-width:560px}
.two-f{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:520px){.two-f{grid-template-columns:1fr}}
.plat{border:0;padding:0;margin:0;display:flex;gap:18px;flex-wrap:wrap}.plat legend{font-weight:600;font-size:14px;margin-bottom:6px;padding:0}.plat label{display:flex;gap:8px;align-items:center;min-height:44px}
.phones{position:relative;display:flex;justify-content:center;align-items:flex-start;min-height:520px;padding-top:10px}
.phone{--pw:236px;width:var(--pw);font-size:calc(var(--pw)/20);aspect-ratio:9/18.6;border-radius:2.4em;border:.5em solid #17120F;background:var(--bg);box-shadow:0 30px 60px -20px rgba(0,0,0,.45);position:relative;overflow:hidden;flex:none}
.phone.p1{transform:rotate(-4deg) translateX(-2%);z-index:2}
.phone.p2{transform:rotate(5deg) translate(6%,5%);z-index:1}
@media(max-width:520px){.phone{--pw:160px}.phones{min-height:400px;overflow:hidden;padding-inline:4px}.phone.p1{transform:rotate(-4deg) translateX(2%)}.phone.p2{transform:rotate(5deg) translate(-2%,5%)}}
.notch{position:absolute;top:.5em;left:50%;width:34%;height:1.3em;background:#17120F;border-radius:99px;transform:translateX(-50%);z-index:3}
.scr{padding:1em .9em .6em;display:grid;gap:.7em;align-content:start;height:100%;color:var(--ink)}
.sb{display:flex;justify-content:space-between;font-size:.62em;font-weight:700;padding:0 .4em}
.ah{display:grid;gap:.1em;margin-top:.6em}.ah small{font-size:.58em;color:var(--ink2);letter-spacing:.08em;text-transform:uppercase}.ah b{font-family:var(--f-display);font-size:1.25em;font-weight:500;line-height:1.1}
.acard{background:var(--accent);color:var(--on-accent);border-radius:1em;padding:.8em;display:grid;gap:.4em}.acard small{font-size:.58em;opacity:.8;letter-spacing:.08em;text-transform:uppercase}.acard b{font-family:var(--f-display);font-size:.98em;font-weight:500;line-height:1.15}
.apill{justify-self:start;background:var(--on-accent);color:var(--accent);font-size:.62em;font-weight:700;padding:.45em 1em;border-radius:99px}
.apill.big{justify-self:stretch;text-align:center;background:var(--accent);color:var(--on-accent);padding:.8em;font-size:.72em}
.alvl{display:grid;gap:.4em;background:var(--surface);border:1px solid var(--line);border-radius:.9em;padding:.6em .8em}.lr{display:flex;justify-content:space-between;align-items:baseline}.lr small{font-size:.58em;color:var(--ink2)}.lr b{font-family:var(--f-display);font-size:.95em;font-weight:500}
.abar{height:.4em;border-radius:9px;background:var(--bg2);overflow:hidden}.abar i{display:block;height:100%;background:var(--gold)}
.apath{display:flex;gap:.4em;align-items:center;padding:.2em .2em}.apath i{flex:1;height:.34em;border-radius:9px;background:var(--line);position:relative}.apath i.d{background:var(--accent)}.apath i.n{background:var(--gold)}
.abdg{display:flex;gap:.4em;flex-wrap:wrap}.abdg span{font-size:.56em;font-weight:700;padding:.4em .8em;border-radius:99px;border:1px solid var(--gold);color:var(--gold)}
.tabs2{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:.6em .4em .8em;border-top:1px solid var(--line);background:var(--surface);font-size:.52em;color:var(--ink2);font-weight:600}.tabs2 .on{color:var(--accent);font-weight:800}
.avid{aspect-ratio:16/10;border-radius:.9em;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000));display:grid;place-items:center}
.play{width:0;height:0;border-left:.9em solid #F7F2EB;border-top:.55em solid transparent;border-bottom:.55em solid transparent;margin-left:.2em}
.anote{background:var(--surface);border:1px solid var(--line);border-radius:.9em;padding:.6em .8em;display:grid;gap:.4em}.anote small{font-size:.58em;color:var(--ink2);text-transform:uppercase;letter-spacing:.08em}.anote i{display:block;height:.3em;border-radius:9px;background:var(--line)}.anote i.s{width:60%}
.acheck{display:flex;gap:.5em;align-items:center;font-size:.62em;font-weight:600}.bx{width:1.6em;height:1.6em;border-radius:.4em;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:.9em}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:300;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:cf 2.4s ease-in forwards}
@keyframes cf{to{transform:translateY(105vh) rotate(720deg);opacity:.9}}
.impulse{display:grid;grid-template-columns:1fr;gap:10px}
.impulse .q{font-family:var(--f-display);font-size:clamp(22px,3vw,30px);line-height:1.25}
.appmini{display:grid;gap:10px}
.dg.eq{grid-template-columns:1fr 1fr}@media(max-width:700px){.dg.eq{grid-template-columns:1fr}}
.avid{position:relative}.vp{position:absolute;left:.6em;right:.6em;bottom:.5em;height:.25em;border-radius:9px;background:rgba(255,255,255,.3);overflow:hidden}.vp::after{content:"";display:block;height:100%;width:100%;background:#D1AE82;transform-origin:left}
.acard{position:relative}.chip{position:absolute;right:.6em;top:.6em;font-size:.58em;font-weight:800;background:#D1AE82;color:#17120F;padding:.3em .7em;border-radius:99px;opacity:0}
.apill.big{position:relative;display:grid}.apill.big span{grid-area:1/1;text-align:center}.apill.big .t2{opacity:0}
.abdg .nb{opacity:0}
.apath i.n2{background:var(--line)}
@media(prefers-reduced-motion:no-preference){
 .phones .p1{animation:fl1 7s ease-in-out infinite}.phones .p2{animation:fl2 8s ease-in-out infinite}
 .anote i:nth-of-type(1){animation:ty1 12s infinite}.anote i:nth-of-type(2){animation:ty2 12s infinite}.anote i:nth-of-type(3){animation:ty3 12s infinite}
 .vp::after{animation:vpg 12s linear infinite}
 .play{animation:pl 12s infinite}
 .acheck .bx{animation:bxp 12s infinite}
 .apill.big{animation:btn 12s infinite}.apill.big .t1{animation:t1o 12s infinite}.apill.big .t2{animation:t2o 12s infinite}
 .abar i{animation:lvl 12s ease-in-out infinite}
 .apath i.n{animation:pn 12s infinite}.apath i.n2{animation:pn2 12s infinite}
 .abdg .nb{animation:nbp 12s infinite}.chip{animation:chp 12s infinite}
 .acard .apill{animation:pulse2 2.4s ease-in-out infinite}
}
@keyframes fl1{50%{translate:0 -10px}}@keyframes fl2{50%{translate:0 8px}}
@keyframes ty1{0%,6%{width:0}16%,96%{width:100%}100%{width:0}}
@keyframes ty2{0%,18%{width:0}28%,96%{width:100%}100%{width:0}}
@keyframes ty3{0%,30%{width:0}38%,96%{width:60%}100%{width:0}}
@keyframes vpg{0%{transform:scaleX(0)}45%,100%{transform:scaleX(1)}}
@keyframes pl{0%,5%{opacity:1}8%,96%{opacity:.35}100%{opacity:1}}
@keyframes bxp{0%,48%{background:transparent;color:transparent;border:1.5px solid var(--ink2);transform:scale(1)}52%{transform:scale(1.25)}56%,96%{background:var(--accent);color:var(--on-accent);border-color:var(--accent);transform:scale(1)}100%{background:transparent;color:transparent;border:1.5px solid var(--ink2)}}
@keyframes btn{0%,60%{transform:scale(1);background:var(--accent)}63%{transform:scale(.95)}66%,96%{transform:scale(1);background:var(--gold)}100%{background:var(--accent)}}
@keyframes t1o{0%,63%{opacity:1}66%,96%{opacity:0}100%{opacity:1}}
@keyframes t2o{0%,63%{opacity:0}66%,96%{opacity:1}100%{opacity:0}}
@keyframes lvl{0%,66%{width:62%}74%,96%{width:78%}100%{width:62%}}
@keyframes pn{0%,68%{background:var(--gold)}72%,96%{background:var(--accent)}100%{background:var(--gold)}}
@keyframes pn2{0%,70%{background:var(--line)}74%,96%{background:var(--gold)}100%{background:var(--line)}}
@keyframes nbp{0%,72%{opacity:0;transform:scale(.6)}78%{opacity:1;transform:scale(1.15)}82%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes chp{0%,64%{opacity:0;transform:translateY(8px)}68%,76%{opacity:1;transform:none}82%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes pulse2{50%{transform:scale(1.07)}}
.acheck .bx{border:1.5px solid var(--accent)}
.pre .hero *,.pre .hero{animation-play-state:paused!important}
.hero h1 .ln:nth-child(3){padding-bottom:.16em}
.hero h1 .ln:nth-child(3)>span{position:relative}
.uline{position:absolute;left:0;bottom:-.04em;width:100%;height:.14em;fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;overflow:visible}
.uline path{stroke-dasharray:320;stroke-dashoffset:320;animation:draw2 1.1s 1.4s ease forwards;vector-effect:non-scaling-stroke}
@keyframes draw2{to{stroke-dashoffset:0}}
.hero .fade.d3{animation-delay:.9s}
.hstats{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:clamp(16px,3vw,36px);margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.hstats b{display:block;font-family:var(--f-display);font-size:clamp(26px,3.4vw,40px);font-weight:500;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.hstats span{font-size:13.5px;color:var(--ink2)}
@media(max-width:520px){.hstats{grid-template-columns:repeat(2,auto)}}
.hchip{position:absolute;z-index:7;display:flex;gap:10px;align-items:center;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:10px 14px;box-shadow:var(--shadow);font-size:13px;line-height:1.25;opacity:0;animation:chipin .8s cubic-bezier(.2,.8,.2,1) forwards}
.hchip b{font-weight:700}.hchip small{display:block;color:var(--ink2);font-size:12px}
.hchip.c1{left:-6%;top:44%;animation-delay:1.3s}.hchip.c1 b{font-family:var(--f-display);font-size:30px;font-weight:500;color:var(--accent);line-height:1}
.hchip.c2{right:-3%;bottom:2%;animation-delay:1.6s}
.hchip.c3{left:-2%;top:-5%;animation-delay:1.9s;max-width:210px}.hchip.c3 i{font-style:normal;color:var(--gold);font-size:20px}
.hchip.c2 svg{width:42px;height:42px;flex:none;transform:rotate(-90deg)}
.hchip.c2 circle{fill:none;stroke-width:5}.hchip.c2 .bg{stroke:var(--line)}.hchip.c2 .fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:113;animation:ring2 1.6s 2s ease forwards}
@keyframes chipin{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}
@keyframes ring2{to{stroke-dashoffset:38}}
@media(prefers-reduced-motion:no-preference){
 .hchip.c1{animation:chipin .8s 1.3s cubic-bezier(.2,.8,.2,1) forwards,hf1 6s 2.2s ease-in-out infinite}
 .hchip.c2{animation:chipin .8s 1.6s cubic-bezier(.2,.8,.2,1) forwards,hf2 7s 2.4s ease-in-out infinite}
 .hchip.c3{animation:chipin .8s 1.9s cubic-bezier(.2,.8,.2,1) forwards,hf1 8s 2.7s ease-in-out infinite}
}
@keyframes hf1{50%{translate:0 -9px}}@keyframes hf2{50%{translate:0 8px}}
@media(prefers-reduced-motion:reduce){.hchip{opacity:1;animation:none}.hchip.c2 .fg{animation:none;stroke-dashoffset:38}.uline path{animation:none;stroke-dashoffset:0}}
@media(max-width:700px){.hchip.c3{display:none}.hchip.c1{left:-3%;top:50%}.hchip.c2{right:-1%}.hchip{font-size:12px;padding:8px 10px}.hchip.c1 b{font-size:24px}}
body.live .demo-bar,body.live [data-act="sample"]{display:none}
body.live .ph:not(.keep){display:none}
.lg-note{border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:var(--surface);margin:0 0 22px;max-width:70ch}
.lg-note.ok{border-color:var(--accent)}
.lg-note p{margin:0}
.lg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px;align-items:start}
.lg-err{color:#B3261E;font-size:14px;min-height:1.2em}