:root{
  --bg: oklch(0.17 0.025 255);
  --bg-2: oklch(0.21 0.03 255);
  --ink: oklch(0.96 0.012 255);
  --muted: oklch(0.66 0.03 255);
  --accent: oklch(0.76 0.155 62);
  --line: oklch(0.30 0.03 255);
  --maxw: 1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  background:
    radial-gradient(135% 60% at 50% 0%, oklch(0.225 0.05 262 / .55), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, oklch(0.152 0.024 258) 100%);
  color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;
  font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; overflow-wrap:break-word;
}
/* filmic grain — kills flat banding, adds premium texture */
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:3; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px}
h1,h2,h3,.display{font-family:"Space Grotesk",sans-serif; line-height:1.04; letter-spacing:-0.02em; font-weight:600}
img,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.eyebrow{font-family:"Space Grotesk"; font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); font-weight:500}
.muted{color:var(--muted)}
.accent{color:var(--accent)}

/* nav */
.nav{position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:space-between; align-items:center;
  padding:16px 28px; pointer-events:none; transition:background .4s, backdrop-filter .4s}
.nav.scrolled{background:oklch(0.15 0.025 255 / .72); backdrop-filter:blur(10px); padding:10px 28px}
.nav .brand{pointer-events:auto; display:flex; align-items:center}
.nav .brand img{height:40px; width:auto; display:block; transition:height .4s}
.nav.scrolled .brand img{height:32px}
.nav .navcta{pointer-events:auto; font-family:"Space Grotesk"; font-size:14px; font-weight:500; letter-spacing:.02em;
  border:1px solid oklch(0.85 0.02 255 / .5); color:var(--ink); padding:9px 16px; border-radius:100px; background:oklch(0.15 0.03 255 / .3)}
.nav .navcta:hover{border-color:var(--accent); color:var(--accent)}
.nav .navlinks{display:flex; gap:26px; align-items:center; pointer-events:auto}
.nav .navlinks a{font-family:"Space Grotesk"; font-size:14.5px; font-weight:500; color:var(--ink); opacity:.85; transition:opacity .25s, color .25s}
.nav .navlinks a:not(.navcta):hover{opacity:1; color:var(--accent)}
.nav .navlinks a.navlang{opacity:1; font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--muted);
  border:1px solid oklch(0.85 0.02 255 / .35); border-radius:8px; padding:6px 10px}
.nav .navlinks a.navlang:hover{border-color:var(--accent); color:var(--accent)}
.navtoggle{display:none; pointer-events:auto; flex-direction:column; gap:5px; width:42px; height:42px;
  align-items:center; justify-content:center; background:oklch(0.15 0.03 255 / .5);
  border:1px solid oklch(0.85 0.02 255 / .3); border-radius:11px; cursor:pointer}
.navtoggle span{width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .3s}
.nav.nav-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.nav-open .navtoggle span:nth-child(2){opacity:0}
.nav.nav-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:760px){
  .navtoggle{display:flex}
  .nav .navlinks{position:fixed; top:64px; left:14px; right:14px; flex-direction:column; align-items:stretch; gap:4px;
    background:oklch(0.15 0.028 255 / .97); backdrop-filter:blur(14px); border:1px solid var(--line);
    border-radius:16px; padding:8px; box-shadow:0 24px 50px oklch(0.05 0.02 255 / .55);
    transition:opacity .25s, transform .25s}
  .nav:not(.nav-open) .navlinks{opacity:0; transform:translateY(-10px); pointer-events:none}
  .nav .navlinks a{display:block; padding:13px 16px; font-size:16px; opacity:1; border-radius:10px; border:none; background:none}
  .nav .navlinks a:hover{background:oklch(0.22 0.03 255 / .6); color:var(--ink)}
  .nav .navlinks .navcta{background:var(--accent); color:oklch(0.20 0.04 60); text-align:center; margin-top:4px}
}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:"Space Grotesk"; font-weight:600; font-size:15px;
  padding:15px 26px; border-radius:100px; transition:transform .35s cubic-bezier(.2,.7,.2,1), background .3s, color .3s; will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent); color:oklch(0.20 0.04 60)}
.btn-primary:hover{background:oklch(0.82 0.15 62)}
.btn-ghost{border:1px solid var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn .ar{transition:transform .35s}
.btn:hover .ar{transform:translateX(4px)}

/* HERO */
.hero{position:relative; height:100svh; min-height:620px; display:flex; align-items:flex-end; overflow:hidden}
.hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); z-index:0}
.hero .grade{position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(105deg, oklch(0.10 0.03 255 / .9) 0%, oklch(0.11 0.03 255 / .66) 36%, oklch(0.11 0.02 255 / .2) 66%, transparent 100%),
    linear-gradient(to top, oklch(0.10 0.025 255 / .92) 0%, oklch(0.13 0.025 255 / .4) 46%, transparent 78%)}
.hero .inner{position:relative; z-index:2; width:100%; padding-bottom:8vh}
.hero h1{font-size:clamp(40px,7.2vw,92px); max-width:14ch; font-weight:700; text-shadow:0 2px 34px oklch(0.08 0.02 255 / .55)}
.hero .lede{margin-top:26px; max-width:46ch; font-size:clamp(17px,1.5vw,21px); color:var(--ink)}
.hero .cta-row{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap}
.hero .trust{margin-top:30px; font-size:14px; letter-spacing:.02em; color:var(--muted)}
.scrollhint{position:absolute; right:28px; bottom:34px; z-index:2; writing-mode:vertical-rl; font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:14px}
.scrollhint::after{content:""; width:1px; height:46px; background:linear-gradient(var(--accent),transparent); display:block}

/* THESIS */
.thesis{padding:18vh 0; border-top:1px solid var(--line); position:relative; overflow:hidden}
.thesis::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(45% 65% at 22% 50%, oklch(0.30 0.06 262 / .5), transparent 70%)}
.thesis .wrap{position:relative; z-index:1}
.thesis p{font-size:clamp(28px,4.6vw,58px); font-family:"Space Grotesk"; font-weight:500; line-height:1.12; max-width:18ch; letter-spacing:-.02em}
.thesis em{font-style:normal; color:var(--accent)}

/* SECTION HEAD */
.sec-head{padding:7vh 0 1vh; max-width:20ch}
.sec-title{font-size:clamp(24px,3vw,40px); margin-top:18px; max-width:18ch; font-weight:600}

/* FEATURE PAIRS */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding:9vh 0}
.feature.rev .media{order:2}
.feature .media{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:3/4}
.feature .media::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px oklch(0.5 0.05 255 / .25); border-radius:14px}
.feature .media img{width:100%; height:100%; object-fit:cover; transform:scale(1.08); will-change:transform}
.feature .cap{font-family:"Space Grotesk"; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:18px}
.feature .cap b{color:var(--accent); font-weight:600}
.feature h2{font-size:clamp(26px,3vw,40px); max-width:14ch}
.feature .body{margin-top:20px; color:var(--muted); max-width:42ch; font-size:18px}

/* GALLERY BAND */
.band{padding:6vh 0 10vh}
.band .head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; flex-wrap:wrap}
.band h2{font-size:clamp(24px,3vw,42px)}
.band .grid{display:grid; grid-template-columns:0.82fr 1.18fr; gap:20px}
.band .cell{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/5; background:var(--bg-2)}
.band .cell.video{aspect-ratio:16/10}
.band .cell img,.band .cell video{width:100%; height:100%; object-fit:cover}
.band .cell .tag{position:absolute; left:16px; bottom:14px; font-family:"Space Grotesk"; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); background:oklch(0.14 0.03 255 / .55); backdrop-filter:none; padding:6px 12px; border-radius:100px}
.band .cell .tag b{color:var(--accent); font-weight:600}

/* NUMBERED ROWS */
.steps{padding:8vh 0 4vh; border-top:1px solid var(--line)}
.steps .klabel{margin-bottom:46px}
.row{display:grid; grid-template-columns:180px 1fr; gap:30px; align-items:baseline; padding:38px 0; border-top:1px solid var(--line); position:relative}
.row:last-child{border-bottom:1px solid var(--line)}
.row .num{font-family:"Space Grotesk"; font-size:clamp(22px,2.4vw,30px); color:var(--accent); font-weight:700; letter-spacing:.04em}
.row h3{font-size:clamp(22px,2.3vw,30px)}
.row .desc{color:var(--muted); max-width:40ch; font-size:17px; grid-column:2}
.row .rh{grid-column:2}

/* AUTOMATION LIST */
.autos{padding:9vh 0; background:oklch(0.188 0.027 258);
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent) 1}
.autos-head{margin-bottom:30px}
.autolist{list-style:none; columns:2; column-gap:64px}
.autolist li{break-inside:avoid; padding:20px 0; border-top:1px solid var(--line); display:block}
.autolist li:first-child,.autolist li:nth-child(5){border-top:none}
.autolist .an{display:block; font-family:"Space Grotesk"; font-weight:600; font-size:19px}
.autolist .an::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:11px; vertical-align:middle; transform:translateY(-2px)}
.autolist .ad{display:block; color:var(--muted); font-size:15.5px; margin-top:6px; padding-left:17px}

/* PRICING */
.pricing{padding:10vh 0}
.price-card{position:relative; background:oklch(0.205 0.03 258 / .6); border:1px solid var(--line);
  border-radius:24px; padding:46px 44px; box-shadow:0 30px 70px oklch(0.06 0.02 255 / .4)}
.price-card .sec-head{padding:0 0 6px; max-width:28ch}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:30px}
.plan{padding:30px 26px; border-right:1px solid var(--line)}
.plan:last-child{border-right:none}
.plan.featured{background:oklch(0.245 0.04 260); border-radius:14px}
.pname{font-family:"Space Grotesk"; font-weight:600; font-size:20px; display:flex; align-items:center; gap:10px}
.badge{font-family:"Inter"; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:oklch(0.20 0.04 60); background:var(--accent); padding:3px 9px; border-radius:100px; font-weight:600}
.ptag{font-size:14px; margin-top:4px}
.pprice{font-family:"Space Grotesk"; font-weight:700; font-size:32px; margin:20px 0 22px; letter-spacing:-.02em}
.pprice span{display:block; font-family:"Inter"; font-size:13px; font-weight:400; color:var(--muted); letter-spacing:0; margin-top:4px}
.plan ul{list-style:none}
.plan ul li{padding:9px 0; font-size:15px; color:var(--muted); border-top:1px solid var(--line); position:relative; padding-left:22px}
.plan ul li::before{content:"+"; position:absolute; left:0; color:var(--accent); font-weight:600}
.finehint{margin-top:20px; font-size:14px}

/* COURSES */
.courses{padding:9vh 0; border-top:1px solid var(--line)}
.courserow{display:grid; grid-template-columns:260px 1fr auto; gap:30px; align-items:baseline; padding:30px 0; border-top:1px solid var(--line)}
.courserow:last-child{border-bottom:1px solid var(--line)}
.cn{font-family:"Space Grotesk"; font-weight:600; font-size:21px}
.cmeta{font-size:13px; margin-top:3px}
.cd{color:var(--muted); font-size:16px; max-width:46ch}
.cp{font-family:"Space Grotesk"; font-weight:700; font-size:26px; color:var(--ink); white-space:nowrap}
.cp .psm{font-family:"Inter"; font-size:14px; font-weight:400; color:var(--muted)}

/* INSIGHTS */
.insights{padding:9vh 0; border-top:1px solid var(--line)}
.insights-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:30px; gap:20px; flex-wrap:wrap}
.ilink{font-family:"Space Grotesk"; font-size:14px; font-weight:500; color:var(--accent)}
.ilink:hover{color:oklch(0.82 0.15 62)}
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.post{display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:14px; background:var(--bg-2);
  transition:transform .35s, border-color .35s, box-shadow .35s}
.post:hover{transform:translateY(-4px); border-color:oklch(0.46 0.07 255); box-shadow:0 22px 48px oklch(0.06 0.02 255 / .45)}
.post .pimg{display:block; aspect-ratio:3/2; overflow:hidden; background:oklch(0.12 0.02 255)}
.post .pimg img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.post:hover .pimg img{transform:scale(1.04)}
.post .pbody{display:flex; flex-direction:column; gap:10px; padding:22px 24px 26px; flex:1}
.post .pdate{font-family:"Space Grotesk"; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.post .pt{font-family:"Space Grotesk"; font-weight:600; font-size:19px; line-height:1.25}
.post .ptease{color:var(--muted); font-size:15px; line-height:1.5}
.post .plink{font-family:"Space Grotesk"; font-size:14px; font-weight:500; color:var(--accent); margin-top:auto; padding-top:6px}
.post:hover .plink{color:oklch(0.82 0.15 62)}

/* ABOUT */
.about{padding:11vh 0; border-top:1px solid var(--line)}
.about-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:60px; align-items:center}
.about-photo{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/5; max-width:420px}
.about-photo img{width:100%; height:100%; object-fit:cover; filter:saturate(.96) contrast(1.02)}
.about-photo::after{content:""; position:absolute; inset:0; border-radius:16px;
  box-shadow:inset 0 0 0 1px oklch(0.6 0.05 255 / .25);
  background:linear-gradient(190deg, transparent 55%, oklch(0.14 0.03 255 / .35))}
.about-text h2{font-size:clamp(32px,4vw,52px); margin-top:10px}
.about-role{color:var(--accent); font-family:"Space Grotesk"; font-weight:500; margin-top:6px}
.about-body{margin-top:22px; color:var(--muted); max-width:50ch; font-size:18px}
.creds{list-style:none; margin-top:26px; display:grid; gap:12px}
.creds li{position:relative; padding-left:26px; color:var(--ink); font-size:16px}
.creds li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px var(--accent)}

/* elegant fading hairline dividers */
.thesis, .steps, .courses, .insights, .about, footer{
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent) 1}

/* CONTACT FORM */
.contact{padding:2vh 0 12vh}
.contact .form-container{max-width:660px; margin:0 auto; position:relative; overflow:hidden;
  background:linear-gradient(150deg, oklch(0.22 0.035 255 / .9), oklch(0.17 0.03 255 / .92));
  border:1px solid var(--line); border-radius:20px; padding:42px 38px;
  box-shadow:0 30px 80px oklch(0.08 0.02 255 / .55)}
.contact .form-container::before{content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--accent), oklch(0.85 0.12 70), transparent);
  animation:cfshimmer 3.4s infinite linear}
@keyframes cfshimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.cf-eyebrow{font-family:"Space Grotesk"; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); font-weight:500}
.cf-title{font-size:clamp(26px,3vw,38px); margin-top:8px}
.cf-subtitle{color:var(--muted); margin:10px 0 28px; font-size:16px}
.contact .form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.contact .form-group{margin-bottom:18px}
.contact label{display:block; font-family:"Space Grotesk"; color:var(--ink); font-size:13.5px; font-weight:500; margin-bottom:8px; letter-spacing:.01em}
.contact .required{color:var(--accent); margin-left:3px}
.contact .optional{color:var(--muted); font-size:.85em; font-weight:400; margin-left:5px}
.contact input,.contact select,.contact textarea{width:100%; padding:13px 16px;
  background:oklch(0.14 0.025 255 / .7); border:1px solid var(--line); border-radius:11px;
  color:var(--ink); font-size:15px; font-family:inherit; outline:none; transition:border-color .25s, box-shadow .25s, background .25s}
.contact input::placeholder,.contact textarea::placeholder{color:oklch(0.55 0.03 255)}
.contact select{cursor:pointer; appearance:none; padding-right:40px; background-repeat:no-repeat; background-position:right 15px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e2a44f' d='M6 9L1 4h10z'/%3E%3C/svg%3E")}
.contact select option{background:oklch(0.17 0.03 255); color:var(--ink)}
.contact input:focus,.contact select:focus,.contact textarea:focus{border-color:var(--accent);
  background:oklch(0.16 0.03 255 / .9); box-shadow:0 0 0 3px oklch(0.76 0.155 62 / .14)}
.contact textarea{min-height:130px; resize:vertical; line-height:1.55}
.cf-submit{width:100%; margin-top:6px; padding:15px; border:none; border-radius:11px; cursor:pointer;
  font-family:"Space Grotesk"; font-weight:600; font-size:15px; color:oklch(0.20 0.04 60);
  background:var(--accent); display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), background .3s}
.cf-submit:hover{transform:translateY(-2px); background:oklch(0.82 0.15 62)}
.cf-submit .ar{transition:transform .3s}
.cf-submit:hover .ar{transform:translateX(4px)}
.success-message,.error-message{display:none; padding:16px 18px; border-radius:11px; text-align:center; margin-top:18px; font-size:15px; animation:cffade .5s}
.success-message{background:oklch(0.30 0.09 150 / .18); border:1px solid oklch(0.55 0.12 150 / .4); color:oklch(0.82 0.15 150)}
.error-message{background:oklch(0.32 0.12 25 / .16); border:1px solid oklch(0.6 0.16 25 / .4); color:oklch(0.78 0.16 25)}
@keyframes cffade{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:translateY(0)}}

/* CTA */
.cta{padding:16vh 0; text-align:center; position:relative; overflow:hidden}
.cta::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(46% 60% at 50% 42%, oklch(0.76 0.155 62 / .12), transparent 70%)}
.cta .wrap{position:relative; z-index:1}
.cta h2{font-size:clamp(30px,5vw,68px); max-width:18ch; margin:0 auto; font-weight:700}
.cta .sub{margin:24px auto 0; max-width:42ch; color:var(--muted)}
.cta .btn{margin-top:40px}
.cta .guarantee{margin:22px auto 0; font-size:14px; color:var(--muted); display:inline-flex; align-items:center}

/* FOOTER */
footer{position:relative; padding:0 0 50px; border-top:1px solid var(--line); overflow:hidden}
.footlogo{padding:7vh 0 2vh; text-align:center; will-change:transform}
.footlogo img{height:clamp(110px,18vw,200px); width:auto; display:inline-block; opacity:.92}
.footgrid{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:30px; color:var(--muted); font-size:14px; position:relative; z-index:10000}
.footgrid a:hover{color:var(--accent)}
.footnav{display:flex; gap:22px; flex-wrap:wrap}
.footright{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.footsocial{display:flex; gap:12px}
.footsocial a{display:inline-flex; color:var(--muted); transition:color .25s}
.footsocial a:hover{color:var(--accent)}
.footsocial svg{width:20px; height:20px; fill:currentColor; display:block}
.footdot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:9px;
  box-shadow:0 0 12px var(--accent); animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* reveal */
.reveal{opacity:0; transform:translateY(30px)}

@media (max-width:880px){
  .feature{grid-template-columns:1fr; gap:30px; padding:7vh 0}
  .feature.rev .media{order:0}
  .feature .media{aspect-ratio:4/3}
  .band .grid{grid-template-columns:1fr}
  .band .cell,.band .cell.video{aspect-ratio:16/11}
  .row{grid-template-columns:1fr; gap:8px}
  .row .num,.row .desc,.row .rh{grid-column:1}
  .autolist{columns:1}
  .autolist li:nth-child(5){border-top:1px solid var(--line)}
  .price-card{padding:28px 20px}
  .plans{grid-template-columns:1fr}
  .plan{border-right:none; border-bottom:1px solid var(--line)}
  .plan:last-child{border-bottom:none}
  .plan.featured{border-radius:0}
  .courserow{grid-template-columns:1fr; gap:8px}
  .posts{grid-template-columns:1fr; gap:16px}
  .about-grid{grid-template-columns:1fr; gap:32px}
  .about-photo{max-width:none}
  .contact .form-row{grid-template-columns:1fr; gap:0}
  .contact .form-container{padding:30px 22px}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important; transform:none!important}
  .hero video{transform:none}
}

/* chatbot widget */
#chatbot-wrapper{position:fixed; bottom:0; right:0; z-index:9999; pointer-events:none}
#chatbot-iframe{pointer-events:auto; width:520px; height:300px; border:none; background:transparent; display:block;
  transition:width .3s ease, height .3s ease}
@media (max-width:639px){
  #chatbot-iframe{width:100vw; height:220px}
  #chatbot-wrapper.chat-open{top:0; left:0; width:100vw; height:100vh}
  #chatbot-wrapper.chat-open #chatbot-iframe{width:100vw; height:100vh}
  /* Freiraum, damit Footer-Links nicht unter dem Chat-Widget liegen (sonst nicht klickbar) */
  footer{padding-bottom:250px}
}
@media (min-width:640px){
  /* Chat-Widget darf oben nie ueber die Navigation reichen (sonst Nav-Links nicht klickbar) */
  #chatbot-iframe{max-height:calc(100vh - 80px)}
}
/* Usercentrics-Button waehrend offenem Chat ausblenden (lag sonst ueber dem Eingabefeld) */
html.chatbot-open #usercentrics-root,
html.chatbot-open #usercentrics-cmp-ui,
html.chatbot-open [data-testid="uc-privacy-button"]{ display:none !important; }