/* =========================================================
   Inter – lokal gehostet (keine Verbindung zu Google)
   ========================================================= */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter-latin-ext-500.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter-latin-ext-600.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/inter-latin-ext-700.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/inter-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   Design Tokens
   ========================================================= */
:root{
  --bg:#ffffff;
  --bg-soft:#f6f7fb;
  --bg-softer:#fbfbfe;
  --ink:#0a0f1f;
  --ink-2:#111a33;
  --text:#101528;
  --text-2:#41495e;
  --text-3:#6b7488;
  --line:rgba(12,18,38,.10);
  --line-2:rgba(12,18,38,.06);
  --brand:#3452ff;
  --brand-600:#2740d9;
  --brand-050:#eef1ff;
  --brand-ink:#8ea3ff;
  --ok:#0fae7e;
  --ok-050:#e7f8f2;
  --warn:#c2751c;

  --radius-xs:8px;
  --radius-s:12px;
  --radius:16px;
  --radius-l:22px;
  --radius-xl:28px;

  --shadow-s:0 1px 2px rgba(12,18,38,.05), 0 2px 8px rgba(12,18,38,.04);
  --shadow:0 2px 6px rgba(12,18,38,.05), 0 12px 32px rgba(12,18,38,.07);
  --shadow-l:0 4px 12px rgba(12,18,38,.06), 0 28px 70px rgba(12,18,38,.11);

  --maxw:1200px;
  --gutter:24px;

  --font:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* Dark band token overrides */
.band--dark{
  --bg:#0a0f1f;
  --bg-soft:#0f1629;
  --bg-softer:#0d1325;
  --text:#f2f5ff;
  --text-2:#aeb8d4;
  --text-3:#8790ab;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.07);
  --brand-050:rgba(52,82,255,.16);
  --shadow-s:none;
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --shadow-l:0 40px 120px rgba(0,0,0,.55);
  color-scheme:dark;
}

/* =========================================================
   Base
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:#fff;
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  letter-spacing:-.009em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}

/* =========================================================
   Layout helpers
   ========================================================= */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:900px}
.section{position:relative;padding:clamp(72px,9vw,132px) 0}
.section--tight{padding:clamp(56px,7vw,96px) 0}
.band{position:relative;background:var(--bg);color:var(--text)}
.band--soft{background:var(--bg-soft)}
.band--dark{background:
  radial-gradient(1100px 620px at 78% -8%, rgba(52,82,255,.30), transparent 62%),
  radial-gradient(860px 520px at 8% 108%, rgba(15,174,126,.16), transparent 60%),
  #0a0f1f;
  color:var(--text);
}
.band--dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
  opacity:.55;
}
.band > .wrap{position:relative;z-index:1}
.hr{height:1px;background:var(--line);border:0;margin:0}

/* =========================================================
   Typography
   ========================================================= */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--brand);
}
.band--dark .eyebrow{color:var(--brand-ink)}
.eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 18%,transparent);
}
.h1{font-size:clamp(36px,5.4vw,64px);line-height:1.04;letter-spacing:-.033em;font-weight:680}
.h2{font-size:clamp(29px,3.9vw,49px);line-height:1.08;letter-spacing:-.029em;font-weight:660}
.h3{font-size:clamp(21px,2.1vw,27px);line-height:1.2;letter-spacing:-.02em;font-weight:640}
.h4{font-size:18px;line-height:1.3;letter-spacing:-.014em;font-weight:640}
.lead{font-size:clamp(17px,1.5vw,20.5px);line-height:1.6;color:var(--text-2);letter-spacing:-.011em}
.body{color:var(--text-2)}
.small{font-size:14.5px;line-height:1.55;color:var(--text-3)}
.tiny{font-size:13px;line-height:1.5;color:var(--text-3)}
.measure{max-width:64ch}
.measure-s{max-width:52ch}
.center{text-align:center}
.center .measure,.center .measure-s{margin-inline:auto}
.stack-head > * + *{margin-top:18px}
.mt-s{margin-top:16px}.mt-m{margin-top:28px}.mt-l{margin-top:clamp(40px,5vw,64px)}
.grad-text{
  background:linear-gradient(94deg,var(--text) 34%,var(--brand) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.band--dark .grad-text{background:linear-gradient(94deg,#fff 30%,var(--brand-ink) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  --btn-bg:var(--brand);--btn-fg:#fff;--btn-bd:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;border-radius:12px;border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:15.5px;font-weight:600;letter-spacing:-.011em;
  cursor:pointer;white-space:nowrap;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background-color .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
  box-shadow:0 1px 2px rgba(12,18,38,.10),0 8px 22px rgba(52,82,255,.22);
}
.btn:hover{transform:translateY(-1px);background:var(--brand-600);box-shadow:0 2px 4px rgba(12,18,38,.10),0 14px 34px rgba(52,82,255,.30)}
.btn:active{transform:translateY(0)}
.btn .ico{width:17px;height:17px;flex:none;transition:transform .25s var(--ease)}
.btn:hover .ico{transform:translateX(3px)}
.btn--lg{padding:17px 28px;font-size:16.5px;border-radius:14px}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--text);--btn-bd:var(--line);box-shadow:none;backdrop-filter:blur(6px)}
.btn--ghost:hover{--btn-bg:var(--bg-soft);--btn-bd:rgba(12,18,38,.2);transform:translateY(-1px);box-shadow:var(--shadow-s)}
.band--dark .btn--ghost:hover{--btn-bg:rgba(255,255,255,.07);--btn-bd:rgba(255,255,255,.28)}
.btn--light{--btn-bg:#fff;--btn-fg:#0a0f1f;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.btn--light:hover{--btn-bg:#fff;transform:translateY(-1px);box-shadow:0 16px 40px rgba(0,0,0,.34)}
.btn--quiet{--btn-bg:transparent;--btn-fg:var(--text-2);--btn-bd:transparent;box-shadow:none;padding-inline:10px}
.btn--quiet:hover{--btn-bg:transparent;--btn-fg:var(--text);transform:none;box-shadow:none;text-decoration:underline;text-underline-offset:4px}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-row--center{justify-content:center}

/* Link with arrow */
.link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--brand);transition:gap .2s var(--ease)}
.band--dark .link-arrow{color:var(--brand-ink)}
.link-arrow:hover{gap:11px}
.link-arrow .ico{width:16px;height:16px}

/* =========================================================
   Nav
   ========================================================= */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--line);
  box-shadow:0 1px 0 rgba(12,18,38,.02),0 8px 30px rgba(12,18,38,.05);
}
.nav__inner{display:flex;align-items:center;gap:20px;height:70px}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:660;letter-spacing:-.022em;font-size:17.5px;flex:none}
.brand__sep{margin:0 6px;color:var(--text-3);font-weight:400}
.brand__ai{color:var(--brand);font-weight:680;letter-spacing:.01em}
.band--dark .brand__ai{color:var(--brand-ink)}
.brand__mark{
  width:32px;height:32px;border-radius:9px;flex:none;
  background:linear-gradient(145deg,var(--brand),#7a3bff 92%);
  display:grid;place-items:center;color:#fff;
  box-shadow:0 2px 8px rgba(52,82,255,.35),inset 0 1px 0 rgba(255,255,255,.35);
}
.brand__mark svg{width:17px;height:17px}
.nav__links{display:flex;align-items:center;gap:4px;margin-left:14px}
.nav__links a{
  padding:9px 13px;border-radius:9px;font-size:15px;font-weight:520;color:var(--text-2);
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.nav__links a:hover{color:var(--text);background:rgba(12,18,38,.045)}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav__burger{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:#fff;align-items:center;justify-content:center;cursor:pointer}
.nav__burger span{display:block;width:17px;height:1.7px;background:var(--text);border-radius:2px;position:relative;transition:transform .25s var(--ease),opacity .2s}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;width:17px;height:1.7px;background:var(--text);border-radius:2px;transition:transform .25s var(--ease)}
.nav__burger span::before{top:-6px}.nav__burger span::after{top:6px}
.nav.is-open .nav__burger span{transform:rotate(45deg)}
.nav.is-open .nav__burger span::before{transform:translateY(6px) rotate(-90deg)}
.nav.is-open .nav__burger span::after{opacity:0}
.nav__mobile{
  display:none;overflow:hidden;max-height:0;transition:max-height .38s var(--ease);
  background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-top:1px solid var(--line-2);
}
.nav.is-open .nav__mobile{max-height:420px}
.nav__mobile ul{padding:10px var(--gutter) 22px;display:grid;gap:2px}
.nav__mobile a{display:block;padding:14px 4px;font-size:18px;font-weight:560;border-bottom:1px solid var(--line-2)}
.nav__mobile .btn{margin-top:16px}

/* =========================================================
   Hero
   ========================================================= */
.hero{position:relative;padding:clamp(108px,13vw,168px) 0 clamp(64px,8vw,104px);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-10% -20% auto -20%;height:min(900px,105vh);pointer-events:none;
  background:
    radial-gradient(760px 420px at 74% 14%,rgba(52,82,255,.16),transparent 64%),
    radial-gradient(620px 380px at 12% 4%,rgba(122,59,255,.10),transparent 62%),
    radial-gradient(700px 400px at 50% 90%,rgba(15,174,126,.07),transparent 66%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(12,18,38,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(12,18,38,.045) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(80% 62% at 50% 22%,#000,transparent 76%);
  mask-image:radial-gradient(80% 62% at 50% 22%,#000,transparent 76%);
}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.08fr);gap:clamp(36px,5vw,72px);align-items:center}
.hero__copy{max-width:640px}
.hero h1{margin-top:22px}
.hero .lead{margin-top:22px;max-width:56ch}
.hero .btn-row{margin-top:32px}
.pill{
  display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 9px;border-radius:999px;
  background:rgba(255,255,255,.7);border:1px solid var(--line);
  font-size:13.5px;font-weight:540;color:var(--text-2);backdrop-filter:blur(8px);
  box-shadow:var(--shadow-s);
}
.pill__dot{width:8px;height:8px;border-radius:50%;background:var(--ok);position:relative;flex:none;margin-left:4px}
.pill__dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--ok);opacity:.45;animation:ping 2.6s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.6}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.hero__note{
  margin-top:26px;display:flex;gap:12px;align-items:flex-start;
  padding:15px 18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.62));
  border:1px solid var(--line);box-shadow:var(--shadow-s);max-width:560px;
}
.hero__note .ico{width:19px;height:19px;color:var(--brand);flex:none;margin-top:2px}
.hero__note p{font-size:15px;line-height:1.5;color:var(--text-2)}
.hero__note strong{color:var(--text);font-weight:620}
.hero__trust{margin-top:16px;font-size:14px;color:var(--text-3)}

/* =========================================================
   Agent console (hero visual)
   ========================================================= */
.console{
  position:relative;border-radius:var(--radius-xl);
  background:linear-gradient(168deg,#111a33 0%,#0a0f1f 58%,#0b1226 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 2px 6px rgba(10,15,31,.2),0 40px 90px -22px rgba(10,15,31,.46),inset 0 1px 0 rgba(255,255,255,.08);
  color:#eef1fb;overflow:hidden;
}
.console::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 260px at 82% -10%,rgba(52,82,255,.34),transparent 62%),radial-gradient(420px 240px at 6% 108%,rgba(15,174,126,.18),transparent 60%);
}
.console > *{position:relative;z-index:1}
.console__bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.console__dots{display:flex;gap:6px}
.console__dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.17)}
.console__title{font-size:12.5px;color:rgba(238,241,251,.62);font-weight:520;letter-spacing:-.005em}
.console__env{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px;border-radius:999px;background:rgba(15,174,126,.13);
  border:1px solid rgba(15,174,126,.32);color:#6ee7bc;font-size:11.5px;font-weight:600;letter-spacing:.01em;
}
.console__env i{width:6px;height:6px;border-radius:50%;background:#2ee2a5;box-shadow:0 0 8px #2ee2a5}
.console__body{padding:22px}

.prompt{
  border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);
  padding:16px 17px;display:flex;gap:13px;align-items:flex-start;
}
.prompt__avatar{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);color:#c3cdf5;
}
.prompt__avatar svg{width:15px;height:15px}
.prompt__label{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(238,241,251,.45);font-weight:600}
.prompt__text{margin-top:5px;font-size:15.5px;line-height:1.5;color:#e9edfb;min-height:3em}
.prompt__text .caret{display:inline-block;width:2px;height:1.05em;background:var(--brand-ink);margin-left:2px;vertical-align:-.16em;animation:blink 1.05s steps(1,end) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.steps{margin-top:18px;display:grid;gap:2px}
.step{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;
  opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease),background-color .3s var(--ease);
}
.step.is-in{opacity:1;transform:none}
.step.is-active{background:rgba(255,255,255,.05)}
.step__icon{width:20px;height:20px;flex:none;position:relative;display:grid;place-items:center}
.step__icon::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.8px solid rgba(255,255,255,.22);border-top-color:var(--brand-ink);
  opacity:0;transition:opacity .2s;
}
.step.is-active .step__icon::before{opacity:1;animation:spin .85s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.step__icon svg{width:20px;height:20px;color:#2ee2a5;opacity:0;transform:scale(.5);transition:opacity .3s var(--ease-out),transform .35s var(--ease-out)}
.step.is-done .step__icon svg{opacity:1;transform:scale(1)}
.step.is-done .step__icon::before{opacity:0;animation:none}
.step__label{font-size:14.5px;color:rgba(238,241,251,.72);font-weight:500}
.step.is-done .step__label{color:#eef1fb}
.step__meta{margin-left:auto;font-size:12px;color:rgba(238,241,251,.4);font-variant-numeric:tabular-nums}

.result{
  margin-top:18px;border-radius:16px;padding:16px 17px;
  background:linear-gradient(135deg,rgba(15,174,126,.15),rgba(52,82,255,.13));
  border:1px solid rgba(110,231,188,.3);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  opacity:0;transform:translateY(10px) scale(.985);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
}
.result.is-in{opacity:1;transform:none}
.result__badge{
  width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(46,226,165,.16);border:1px solid rgba(46,226,165,.38);color:#2ee2a5;
}
.result__badge svg{width:19px;height:19px}
.result__txt strong{display:block;font-size:15.5px;font-weight:640;color:#fff;letter-spacing:-.012em}
.result__txt span{font-size:13px;color:rgba(238,241,251,.6)}
.result__cta{margin-left:auto;display:flex;align-items:center;gap:12px}
.result__time{
  font-size:13px;font-weight:620;color:#6ee7bc;font-variant-numeric:tabular-nums;
  padding:7px 11px;border-radius:9px;background:rgba(46,226,165,.1);border:1px solid rgba(46,226,165,.24);
}
.result__open{
  padding:10px 16px;border-radius:10px;background:#fff;color:#0a0f1f;
  font-size:14px;font-weight:620;border:0;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.result__open:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.3)}

/* Floating stat cards next to console */
.console-wrap{position:relative}
.float-card{
  position:absolute;z-index:2;display:flex;align-items:center;gap:11px;
  padding:12px 15px;border-radius:14px;background:rgba(255,255,255,.92);
  border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(10px);
  animation:floaty 7s ease-in-out infinite;
}
.float-card--a{left:-30px;bottom:-26px;animation-delay:-1.4s}
.float-card--b{right:-24px;top:-26px}
.float-card__ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--brand-050);color:var(--brand);flex:none}
.float-card__ico svg{width:16px;height:16px}
.float-card strong{display:block;font-size:14px;font-weight:640;letter-spacing:-.012em;color:var(--text)}
.float-card span{font-size:12px;color:var(--text-3)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* =========================================================
   Compare (Section 2)
   ========================================================= */
.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(18px,3vw,38px);align-items:stretch;margin-top:clamp(40px,5vw,60px)}
.compare__col{
  position:relative;border-radius:var(--radius-l);padding:clamp(24px,3vw,34px);
  border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-s);
  display:flex;flex-direction:column;align-items:flex-start;
}
.compare__col--ai{
  background:linear-gradient(180deg,#fff, #fafbff);
  border-color:rgba(52,82,255,.26);
  box-shadow:0 2px 6px rgba(12,18,38,.05),0 26px 60px -24px rgba(52,82,255,.4);
}
.compare__tag{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  font-size:12.5px;font-weight:620;letter-spacing:.02em;
  background:var(--bg-soft);color:var(--text-3);border:1px solid var(--line);
}
.compare__col--ai .compare__tag{background:var(--brand-050);color:var(--brand);border-color:rgba(52,82,255,.24)}
.flowlist{margin-top:24px;display:grid;gap:0}
.flowlist li{
  position:relative;padding:12px 0 12px 34px;font-size:16px;font-weight:540;color:var(--text-2);
}
.flowlist li::before{
  content:"";position:absolute;left:8px;top:19px;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--line);
}
.flowlist li:not(:last-child)::after{
  content:"";position:absolute;left:12px;top:28px;bottom:-4px;width:1px;background:var(--line);
}
.compare__col--ai .flowlist li{color:var(--text);font-weight:580}
.compare__col--ai .flowlist li::before{border-color:var(--brand);background:var(--brand);box-shadow:0 0 0 4px rgba(52,82,255,.13)}
.compare__col--ai .flowlist li:not(:last-child)::after{background:linear-gradient(180deg,rgba(52,82,255,.5),rgba(52,82,255,.16))}
.compare__foot{
  width:100%;margin-top:auto;padding-top:22px;border-top:1px dashed var(--line);
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
}
.flowlist{width:100%;margin-bottom:26px}
.compare__foot strong{font-size:clamp(20px,2.2vw,26px);font-weight:680;letter-spacing:-.025em}
.compare__col--ai .compare__foot strong{color:var(--brand)}
.compare__foot span{font-size:13.5px;color:var(--text-3)}
.compare__hint{
  width:100%;margin-top:22px;padding:16px 18px;border-radius:14px;
  background:var(--brand-050);border:1px dashed rgba(52,82,255,.3);
}
.compare__hint .tiny{display:block;color:var(--brand);font-weight:600;letter-spacing:.02em}
.compare__hint p{margin-top:7px;font-size:15px;line-height:1.5;color:var(--text-2);font-weight:520}
.compare__vs{display:grid;place-items:center}
.compare__vs i{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-s);
  font-style:normal;font-size:13px;font-weight:700;color:var(--text-3);letter-spacing:.02em;
}

/* =========================================================
   Cards / grids
   ========================================================= */
.grid{display:grid;gap:clamp(16px,2vw,22px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  position:relative;border-radius:var(--radius-l);background:#fff;border:1px solid var(--line);
  padding:clamp(24px,2.6vw,32px);box-shadow:var(--shadow-s);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  display:flex;flex-direction:column;overflow:hidden;
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%),rgba(52,82,255,.09),transparent 62%);
  transition:opacity .4s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(52,82,255,.24)}
.card:hover::after{opacity:1}
.band--dark .card{background:rgba(255,255,255,.045);border-color:var(--line);box-shadow:none;backdrop-filter:blur(8px)}
.band--dark .card:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.card__num{
  font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--brand);
  font-variant-numeric:tabular-nums;
}
.card__ico{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:var(--brand-050);color:var(--brand);margin-bottom:20px;
  border:1px solid rgba(52,82,255,.16);
}
.band--dark .card__ico{background:rgba(52,82,255,.2);color:var(--brand-ink);border-color:rgba(142,163,255,.24)}
.card__ico svg{width:21px;height:21px}
.card h3{margin-bottom:14px}
.quote{
  margin:0 0 16px;padding:14px 16px;border-radius:13px;
  background:var(--bg-soft);border:1px solid var(--line-2);border-left:2.5px solid var(--brand);
  font-size:15.5px;line-height:1.5;color:var(--text);font-style:italic;
}
.band--dark .quote{background:rgba(255,255,255,.05);border-left-color:var(--brand-ink)}
.card .body{font-size:15.5px}
.card__cta{margin-top:auto;padding-top:22px}

/* Usecase grid: first two cards wider */
.usecases{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,2vw,22px);margin-top:clamp(40px,5vw,58px)}
.usecases > *:nth-child(1),.usecases > *:nth-child(2){grid-column:span 3}
.usecases > *:nth-child(3),.usecases > *:nth-child(4),.usecases > *:nth-child(5){grid-column:span 2}

/* =========================================================
   Stack flow (Section 4)
   ========================================================= */
.stackflow{margin-top:clamp(44px,5vw,64px);display:grid;justify-items:center}
.node{
  display:inline-flex;align-items:center;gap:12px;padding:16px 24px;border-radius:15px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);
  font-size:17px;font-weight:620;letter-spacing:-.015em;color:#fff;backdrop-filter:blur(8px);
  box-shadow:0 18px 46px rgba(0,0,0,.35);
}
.node__ico{width:22px;height:22px;color:var(--brand-ink)}
.node--result{
  background:linear-gradient(120deg,rgba(15,174,126,.24),rgba(52,82,255,.24));
  border-color:rgba(110,231,188,.4);
  box-shadow:0 0 0 1px rgba(110,231,188,.12),0 24px 60px -12px rgba(15,174,126,.4);
  font-size:19px;padding:18px 30px;
  opacity:0;transform:translateY(12px) scale(.97);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
.stackflow.is-final .node--result{opacity:1;transform:none}
.node--result .node__ico{color:#6ee7bc}
.rail{width:1.6px;background:rgba(255,255,255,.16);position:relative;overflow:hidden}
.rail--v{height:38px;margin:14px 0}
.rail--v::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--brand-ink),rgba(110,231,188,.9));
  transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease)
}
.stackflow.is-on .rail--v::after{transform:scaleY(1)}
.stackflow.is-final .rail--v--bottom::after{transform:scaleY(1)}
.rail--v--bottom::after{transform:scaleY(0)}
.stackflow.is-on .rail--v--bottom::after{transform:scaleY(0)}

.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;width:100%;margin:6px 0}
.tile{
  position:relative;border-radius:15px;padding:20px 14px;text-align:center;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  opacity:0;transform:translateY(16px) scale(.96);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),border-color .4s,background-color .4s,box-shadow .4s;
}
.tile.is-in{opacity:1;transform:none;background:rgba(255,255,255,.075);border-color:rgba(142,163,255,.34);box-shadow:0 0 0 1px rgba(142,163,255,.08),0 18px 40px -16px rgba(52,82,255,.5)}
.tile__ico{width:34px;height:34px;margin:0 auto 12px;border-radius:10px;display:grid;place-items:center;background:rgba(52,82,255,.2);color:var(--brand-ink);border:1px solid rgba(142,163,255,.26)}
.tile__ico svg{width:17px;height:17px}
.tile__name{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.01em}
.tile__check{
  position:absolute;top:9px;right:9px;width:17px;height:17px;border-radius:50%;
  background:rgba(46,226,165,.2);border:1px solid rgba(46,226,165,.45);color:#2ee2a5;
  display:grid;place-items:center;opacity:0;transform:scale(.4);transition:opacity .3s,transform .35s var(--ease-out)
}
.tile__check svg{width:10px;height:10px}
.tile.is-in .tile__check{opacity:1;transform:scale(1);transition-delay:.3s}
.tiles__rail{
  width:100%;height:1.6px;background:rgba(255,255,255,.12);position:relative;overflow:hidden;margin:2px 0;
}
.tiles__rail::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--brand-ink),rgba(110,231,188,.9));transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.stackflow.is-on .tiles__rail::after{transform:scaleX(1)}

/* =========================================================
   Remote / phone (Section 5)
   ========================================================= */
.remote{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(36px,5vw,72px);align-items:center}
.phone{
  position:relative;width:min(300px,84vw);margin-inline:auto;aspect-ratio:9/18.6;
  border-radius:44px;padding:11px;
  background:linear-gradient(160deg,#252c44,#0d1120 60%);
  box-shadow:0 2px 3px rgba(255,255,255,.1) inset,0 40px 90px -24px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.1);
}
.phone::before{
  content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);
  width:86px;height:23px;border-radius:999px;background:#05070f;z-index:3;
}
.phone__screen{
  position:relative;height:100%;border-radius:34px;overflow:hidden;
  background:linear-gradient(180deg,#0d1426,#0a0f1f);
  display:flex;flex-direction:column;
}
.phone__status{display:flex;align-items:center;justify-content:space-between;padding:16px 22px 0;font-size:11.5px;color:rgba(238,241,251,.55);font-weight:600}
.phone__body{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 16px 18px;gap:14px}
.phone__day{align-self:center;font-size:11px;font-weight:600;letter-spacing:.04em;color:rgba(238,241,251,.42);
  padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.bubble{
  max-width:92%;padding:14px 16px;border-radius:18px;font-size:14.5px;line-height:1.45;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#e9edfb;
  align-self:flex-start;
}
.bubble--me{
  align-self:flex-end;background:linear-gradient(135deg,var(--brand),#5b6bff);border-color:transparent;color:#fff;
  border-bottom-right-radius:6px;box-shadow:0 12px 30px -10px rgba(52,82,255,.8);
}
.bubble--sys{border-bottom-left-radius:6px;font-size:13.5px;color:rgba(238,241,251,.72)}
.bubble--sys b{color:#6ee7bc;font-weight:600}
.voicebar{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
}
.voicebar__btn{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand),#7a3bff);color:#fff;
  box-shadow:0 0 0 0 rgba(52,82,255,.55);animation:rec 2.4s var(--ease) infinite;
}
.voicebar__btn svg{width:16px;height:16px}
@keyframes rec{0%{box-shadow:0 0 0 0 rgba(52,82,255,.5)}70%{box-shadow:0 0 0 13px rgba(52,82,255,0)}100%{box-shadow:0 0 0 0 rgba(52,82,255,0)}}
.wave{display:flex;align-items:center;gap:3px;height:24px;flex:1}
.wave i{display:block;width:2.5px;border-radius:2px;background:linear-gradient(180deg,var(--brand-ink),#6ee7bc);height:30%;animation:wv 1.15s ease-in-out infinite}
@keyframes wv{0%,100%{height:22%}50%{height:96%}}
.voicebar__time{font-size:12px;color:rgba(238,241,251,.5);font-variant-numeric:tabular-nums}

.timeline{display:grid;gap:0;margin-top:30px}
.tl{
  position:relative;padding:0 0 26px 40px;
  opacity:0;transform:translateX(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.tl.is-in{opacity:1;transform:none}
.tl:last-child{padding-bottom:0}
.tl::before{
  content:"";position:absolute;left:9px;top:6px;width:13px;height:13px;border-radius:50%;
  background:var(--bg);border:2px solid var(--line);transition:border-color .4s,background-color .4s,box-shadow .4s;
}
.tl:not(:last-child)::after{content:"";position:absolute;left:15px;top:22px;bottom:2px;width:1.4px;background:var(--line)}
.tl.is-done::before{border-color:#2ee2a5;background:#2ee2a5;box-shadow:0 0 0 4px rgba(46,226,165,.16)}
.tl.is-active::before{border-color:var(--brand-ink);background:transparent;box-shadow:0 0 0 4px rgba(142,163,255,.15);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(142,163,255,.1)}50%{box-shadow:0 0 0 7px rgba(142,163,255,.04)}}
.tl__title{font-size:16.5px;font-weight:600;letter-spacing:-.014em;display:flex;align-items:center;gap:9px}
.tl__title svg{width:16px;height:16px;color:#2ee2a5;opacity:0;transform:scale(.5);transition:opacity .3s,transform .3s var(--ease-out)}
.tl.is-done .tl__title svg{opacity:1;transform:scale(1)}
.tl__desc{font-size:14.5px;color:var(--text-3);margin-top:3px}

.preview{
  margin-top:28px;border-radius:var(--radius-l);overflow:hidden;
  border:1px solid var(--line);background:rgba(255,255,255,.045);
  opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.preview.is-in{opacity:1;transform:none}
.preview__bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.04)}
.preview__bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
.preview__url{margin-left:8px;font-size:11.5px;color:var(--text-3);font-family:var(--mono)}
.preview__body{padding:18px}
.preview__row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line-2)}
.preview__row + .preview__row{margin-top:8px}
.preview__row b{font-size:13.5px;font-weight:600}
.preview__row span{font-size:12.5px;color:var(--text-3)}
.preview__row em{margin-left:auto;font-style:normal;font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;background:rgba(46,226,165,.14);color:#6ee7bc;border:1px solid rgba(46,226,165,.28)}
.preview__row em.is-open{background:rgba(255,255,255,.07);color:var(--text-2);border-color:var(--line)}
.preview__skel{height:8px;border-radius:4px;background:rgba(255,255,255,.08)}

/* =========================================================
   Trust cards (Section 6)
   ========================================================= */
.note-inline{
  margin-top:clamp(32px,4vw,44px);display:flex;gap:13px;align-items:flex-start;
  padding:18px 20px;border-radius:15px;background:var(--bg);border:1px solid var(--line);
  max-width:820px;
}
.note-inline .ico{width:19px;height:19px;flex:none;color:var(--brand);margin-top:2px}
.note-inline p{font-size:15px;color:var(--text-2);line-height:1.55}

/* =========================================================
   Challenge steps (Section 7)
   ========================================================= */
.challenge__head{max-width:760px}
.chsteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,20px);margin-top:clamp(44px,5vw,62px);position:relative}
.chstep{
  position:relative;border-radius:var(--radius-l);padding:26px 22px 24px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);backdrop-filter:blur(8px);
  transition:transform .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease);
}
.chstep:hover{transform:translateY(-3px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.chstep__n{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(140deg,var(--brand),#6b52ff);color:#fff;font-size:14px;font-weight:700;
  box-shadow:0 10px 24px -8px rgba(52,82,255,.9);
}
.chstep h3{font-size:18px;margin-bottom:9px}
.chstep p{font-size:14.5px;color:var(--text-2);line-height:1.55}
.chstep__arrow{
  position:absolute;top:44px;right:-13px;width:26px;height:26px;z-index:2;
  display:grid;place-items:center;color:var(--text-3);
}
.chstep:last-child .chstep__arrow{display:none}
.chstep__arrow svg{width:16px;height:16px}

/* Demo list */
.demolist{display:grid;gap:2px;margin-top:8px}
.demolist li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line-2);font-size:16.5px;color:var(--text)}
.demolist li:last-child{border-bottom:0}
.demolist .ico{
  width:23px;height:23px;flex:none;border-radius:50%;display:grid;place-items:center;margin-top:1px;
  background:var(--ok-050);color:var(--ok);border:1px solid rgba(15,174,126,.22);
}
.band--dark .demolist .ico{background:rgba(46,226,165,.14);color:#2ee2a5;border-color:rgba(46,226,165,.3)}
.demolist .ico svg{width:12px;height:12px}

/* =========================================================
   Ideas teaser
   ========================================================= */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chip{
  display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-size:14.5px;font-weight:560;color:var(--text-2);
  box-shadow:var(--shadow-s);transition:transform .25s var(--ease),border-color .25s,color .25s,box-shadow .25s;
}
.chip:hover{transform:translateY(-2px);border-color:rgba(52,82,255,.3);color:var(--text);box-shadow:var(--shadow)}
.chip__ico{width:16px;height:16px;color:var(--brand)}

/* =========================================================
   Form
   ========================================================= */
.formwrap{
  position:relative;border-radius:clamp(20px,2.4vw,30px);background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-l);
  padding:clamp(26px,3.6vw,52px);margin-top:clamp(36px,4vw,52px);
  max-width:900px;margin-inline:auto;overflow:hidden;
}
.formwrap::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--brand),#7a3bff 45%,var(--ok));
}



.field{margin-top:22px}
.field--first{margin-top:0}
.field__lbl{display:block;font-size:14px;font-weight:600;color:var(--text-2);margin-bottom:8px}
.field__lbl .opt{font-weight:500;color:var(--text-3)}
.input,.textarea{
  width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--bg-softer);font-size:16px;line-height:1.5;color:var(--text);
  transition:border-color .2s,background-color .2s,box-shadow .2s;
}
.textarea{min-height:168px;resize:vertical;font-family:inherit}
.input::placeholder,.textarea::placeholder{color:#9aa2b5}
.input:focus,.textarea:focus{outline:0;border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(52,82,255,.12)}
.input.is-err,.textarea.is-err{border-color:#e05555;background:#fff8f8}
.err{display:none;margin-top:7px;font-size:13.5px;color:#cc3b3b;font-weight:520}
.err.is-on{display:block}

.voicebtn{
  display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:11px 17px;
  border-radius:999px;border:1.5px solid var(--line);background:#fff;cursor:pointer;
  font-size:14.5px;font-weight:580;color:var(--text-2);transition:all .25s var(--ease);
}
.voicebtn:hover{border-color:rgba(52,82,255,.4);color:var(--text)}
.voicebtn svg{width:16px;height:16px;color:var(--brand)}
.voicebtn.is-rec{border-color:#e05555;color:#cc3b3b;background:#fff7f7}
.voicebtn.is-rec svg{color:#cc3b3b}
.voicebtn.is-rec::after{content:"";width:8px;height:8px;border-radius:50%;background:#e05555;animation:blink 1s steps(1,end) infinite}

.seg{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.seg button{
  padding:12px 20px;border-radius:11px;border:1.5px solid var(--line);background:#fff;cursor:pointer;
  font-size:15px;font-weight:560;color:var(--text-2);transition:all .22s var(--ease);
}
.seg button:hover{border-color:rgba(52,82,255,.4)}
.seg button.is-sel{border-color:var(--brand);background:var(--brand-050);color:var(--brand);font-weight:620;box-shadow:0 0 0 3px rgba(52,82,255,.08)}

.notice{
  display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:15px 17px;
  border-radius:13px;background:#fffaf2;border:1px solid #f0dfc4;
}
.notice .ico{width:18px;height:18px;flex:none;color:var(--warn);margin-top:1px}
.notice p{font-size:14px;line-height:1.55;color:#6b5636}

.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fgrid .field{margin-top:0}
.fgrid .field--full{grid-column:1/-1}

.checkline{display:flex;gap:12px;align-items:flex-start;margin-top:22px;cursor:pointer}
.checkline input{position:absolute;opacity:0;width:0;height:0}
.checkline__box{
  width:21px;height:21px;border-radius:6px;border:1.5px solid var(--line);background:#fff;flex:none;margin-top:1px;
  display:grid;place-items:center;transition:all .2s var(--ease);
}
.checkline__box svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.5);transition:all .2s var(--ease-out)}
.checkline input:checked + .checkline__box{background:var(--brand);border-color:var(--brand)}
.checkline input:checked + .checkline__box svg{opacity:1;transform:scale(1)}
.checkline input:focus-visible + .checkline__box{box-shadow:0 0 0 3px rgba(52,82,255,.2)}
.checkline.is-err .checkline__box{border-color:#e05555}
.checkline span{font-size:14.5px;color:var(--text-2);line-height:1.5}
.checkline a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}

.fnav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:clamp(26px,3vw,34px);padding-top:24px;border-top:1px solid var(--line-2)}
.fnav__hint{width:100%;font-size:13.5px;color:var(--text-3);line-height:1.5}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.success{display:none;text-align:center;padding:clamp(20px,3vw,40px) 0;animation:fadeUp .6s var(--ease-out) both}
.success.is-active{display:block}
.success__badge{
  width:74px;height:74px;border-radius:22px;margin:0 auto 26px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--ok),#34d399);color:#fff;
  box-shadow:0 18px 44px -12px rgba(15,174,126,.7);
}
.success__badge svg{width:34px;height:34px}
.success h3{font-size:clamp(25px,3vw,34px);letter-spacing:-.028em}
.success p{margin-top:16px;font-size:16.5px;color:var(--text-2);max-width:54ch;margin-inline:auto}
.success .btn-row{margin-top:30px;justify-content:center}
.success a{text-decoration:underline;text-underline-offset:3px}

/* =========================================================
   FAQ
   ========================================================= */
.faq{max-width:840px;margin-inline:auto;margin-top:clamp(36px,4vw,52px);border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:center;gap:20px;padding:24px 4px;background:none;border:0;
  text-align:left;cursor:pointer;font-size:clamp(17px,1.8vw,19.5px);font-weight:600;letter-spacing:-.016em;color:var(--text);
  transition:color .2s;
}
.faq__q:hover{color:var(--brand)}
.faq__ico{margin-left:auto;width:26px;height:26px;flex:none;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:transform .35s var(--ease),background-color .25s,border-color .25s,color .25s}
.faq__ico svg{width:13px;height:13px}
.faq__item.is-open .faq__ico{transform:rotate(45deg);background:var(--brand);border-color:var(--brand);color:#fff}
.faq__a{overflow:hidden;max-height:0;transition:max-height .42s var(--ease)}
.faq__a p{padding:0 60px 26px 4px;font-size:16px;color:var(--text-2);line-height:1.62}

/* =========================================================
   Final CTA
   ========================================================= */
.finalcta{text-align:center;max-width:860px;margin-inline:auto}
.finalcta .h2{font-size:clamp(31px,4.6vw,58px)}

/* =========================================================
   Sticky CTA + Popup
   ========================================================= */
.sticky-cta{
  position:fixed;right:22px;bottom:22px;z-index:70;
  display:flex;align-items:center;gap:16px;padding:14px 16px 14px 18px;
  border-radius:16px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:var(--shadow-l);
  opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease-out);
  max-width:calc(100vw - 44px);
}
.sticky-cta.is-on{opacity:1;transform:none;pointer-events:auto}
.sticky-cta__txt strong{display:block;font-size:14.5px;font-weight:620;letter-spacing:-.014em}
.sticky-cta__txt span{font-size:12.5px;color:var(--text-3)}
.sticky-cta .btn{padding:11px 16px;font-size:14px;border-radius:10px}
.sticky-cta__close{
  position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;
  background:#fff;border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;
  color:var(--text-3);box-shadow:var(--shadow-s);transition:color .2s,transform .2s
}
.sticky-cta__close:hover{color:var(--text);transform:scale(1.08)}
.sticky-cta__close svg{width:11px;height:11px}

.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.93);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .4s var(--ease-out);
}
.mobile-cta.is-on{transform:none}

.modal{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
.modal.is-on{opacity:1;pointer-events:auto}
.modal__scrim{position:absolute;inset:0;background:rgba(8,12,26,.56);backdrop-filter:blur(5px)}
.modal__box{
  position:relative;width:min(560px,100%);border-radius:24px;background:#fff;
  padding:clamp(28px,4vw,44px);box-shadow:0 40px 100px rgba(8,12,26,.4);
  transform:translateY(16px) scale(.97);transition:transform .4s var(--ease-out);
  max-height:90vh;overflow:auto;
}
.modal.is-on .modal__box{transform:none}
.modal__close{
  position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--text-3);
  transition:color .2s,background-color .2s
}
.modal__close:hover{color:var(--text);background:var(--bg-soft)}
.modal__close svg{width:13px;height:13px}
.modal__ico{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:22px;
  background:var(--brand-050);color:var(--brand);border:1px solid rgba(52,82,255,.16)
}
.modal__ico svg{width:24px;height:24px}
.modal h3{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.024em;line-height:1.2}
.modal p{margin-top:14px;font-size:16px;color:var(--text-2);line-height:1.6}
.modal .btn-row{margin-top:26px}

/* =========================================================
   Ideas page
   ========================================================= */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.filter{
  padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;cursor:pointer;
  font-size:14.5px;font-weight:560;color:var(--text-2);transition:all .22s var(--ease);
}
.filter:hover{border-color:rgba(52,82,255,.35);color:var(--text)}
.filter.is-on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.ideas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,22px);margin-top:36px}
.idea{padding:26px;display:flex;flex-direction:column}
.idea__cat{
  align-self:flex-start;font-size:11.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-050);padding:5px 10px;border-radius:7px;margin-bottom:16px;
}
.idea h3{font-size:19px;margin-bottom:10px}
.idea p{font-size:15px;color:var(--text-2);line-height:1.55}
.idea__cta{
  margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:600;color:var(--brand);background:none;border:0;cursor:pointer;
  transition:gap .2s var(--ease);align-self:flex-start;
}
.idea__cta:hover{gap:12px}
.idea__cta svg{width:15px;height:15px}
.idea.is-hidden{display:none}

.subhero{padding:clamp(120px,14vw,170px) 0 clamp(20px,3vw,34px);position:relative;overflow:hidden}
.subhero::before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:640px;pointer-events:none;
  background:radial-gradient(620px 340px at 24% 10%,rgba(52,82,255,.14),transparent 64%),radial-gradient(560px 320px at 82% 0%,rgba(122,59,255,.1),transparent 62%);
}
.back-link{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:560;color:var(--text-3);transition:color .2s,gap .2s}
.back-link:hover{color:var(--text);gap:11px}
.back-link svg{width:15px;height:15px}

/* =========================================================
   Footer
   ========================================================= */
.footer{padding:52px 0 40px;border-top:1px solid var(--line);background:var(--bg-soft)}
.footer__inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.footer__links{display:flex;gap:22px;flex-wrap:wrap;margin-left:auto}
.footer__links a{font-size:14.5px;color:var(--text-3);transition:color .2s}
.footer__links a:hover{color:var(--text)}
.footer__legal{width:100%;margin-top:28px;padding-top:24px;border-top:1px solid var(--line-2);font-size:13px;color:var(--text-3)}

/* =========================================================
   Scroll reveal
   ========================================================= */
.rv{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}.rv-d3{transition-delay:.21s}
.rv-d4{transition-delay:.28s}.rv-d5{transition-delay:.35s}.rv-d6{transition-delay:.42s}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:52px}
  .hero__copy{max-width:720px}
  .console-wrap{max-width:660px;margin-inline:auto}
  .float-card--a{left:-8px}
  .float-card--b{right:-8px}
  .remote{grid-template-columns:1fr;gap:48px}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chsteps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chstep:nth-child(2) .chstep__arrow{display:none}
  .ideas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .usecases{grid-template-columns:repeat(4,1fr)}
  .usecases > *:nth-child(1),.usecases > *:nth-child(2){grid-column:span 2}
  .usecases > *:nth-child(3),.usecases > *:nth-child(4),.usecases > *:nth-child(5){grid-column:span 2}
  .usecases > *:nth-child(5){grid-column:span 4}
}
@media (max-width:900px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .nav__mobile{display:block}
  .nav{background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(14px)}
  .compare{grid-template-columns:1fr;gap:16px}
  .compare__vs{transform:rotate(90deg)}
  .grid--3{grid-template-columns:1fr}
  .sticky-cta{display:none}
  .mobile-cta{display:block}
  body{padding-bottom:78px}
  .footer{padding-bottom:20px}
}
@media (max-width:720px){
  :root{--gutter:18px}
  body{font-size:16.5px}
  .grid--2,.grid--4,.ideas,.fgrid{grid-template-columns:1fr}
  .usecases{grid-template-columns:1fr}
  .usecases > *{grid-column:auto !important}
  .chsteps{grid-template-columns:1fr}
  .chstep__arrow{display:none !important}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .float-card{display:none}
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row > .btn,.btn-row > a.btn{width:100%}
  .fnav{flex-direction:column;align-items:stretch}
  .fnav .btn{width:100%}
  .nav__right .btn{padding:11px 14px;font-size:14px;border-radius:10px}
  .brand{font-size:16px;gap:9px}
  .brand__sep{margin:0 6px;color:var(--text-3);font-weight:400}
.brand__ai{color:var(--brand);font-weight:680;letter-spacing:.01em}
.band--dark .brand__ai{color:var(--brand-ink)}
.brand__mark{width:29px;height:29px;border-radius:8px}
  .hero__note{max-width:none}
  .result__cta{margin-left:0;width:100%;justify-content:space-between}
  .faq__a p{padding-right:10px}
  .fnav .btn--quiet{order:2;margin-right:0}
  .modal__box{padding:26px 22px 30px}
  .console__body{padding:17px}
  .footer__links{margin-left:0;gap:16px}
}
@media (max-width:600px){
  .nav__right .btn{display:none}
}
@media (max-width:420px){
  .h1{font-size:33px}
}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
}

/* Print */
@media print{.nav,.sticky-cta,.mobile-cta,.modal{display:none !important}}

/* ============================================================
   Verbund — Bereichsleiste über dem Footer
   Bewusst unterhalb des Conversion-Ziels: wer bis hierher gescrollt
   hat, hat den Handlungsaufruf bereits mehrfach gesehen.
   ============================================================ */
.family{ border-top:1px solid var(--line); padding-block:clamp(34px,4vw,52px) 6px; }
.family__cap{ font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:16px; font-weight:500; }
.family__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (max-width:760px){ .family__grid{ grid-template-columns:1fr; } }
.family__card{
  display:flex; flex-direction:column; gap:8px; padding:20px 22px;
  border:1px solid var(--line); border-radius:var(--radius-l); background:var(--bg);
  text-decoration:none; color:inherit;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.family__card:hover{ border-color:var(--brand); transform:translateY(-2px);
  box-shadow:0 18px 38px -24px rgba(12,18,38,.35); }
.family__name{ font-weight:600; font-size:16.5px; letter-spacing:-.018em; }
.family__blurb{ font-size:14.3px; line-height:1.55; color:var(--text-2); }
.family__go{ display:inline-flex; align-items:center; gap:7px; margin-top:2px;
  font-size:11.5px; color:var(--brand); letter-spacing:.02em; }
.footer__here{ color:var(--text-3); font-size:14px; }
.footer__here em{ font-style:normal; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; margin-left:7px; opacity:.75; }

/* Inhaltliche Brücke im Fließtext */
.bridge{
  border-left:3px solid var(--brand); background:var(--brand-050);
  border-radius:0 var(--radius) var(--radius) 0; padding:16px 20px;
  display:flex; flex-direction:column; gap:10px; margin-top:26px;
}
.bridge p{ font-size:15px; line-height:1.6; color:var(--text-2); max-width:66ch; margin:0; }
.bridge a{ font-weight:600; color:var(--brand-600); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; }
.bridge a:hover{ text-decoration:underline; }