/* --- CSS Reset (leicht) --- */
    *,*::before,*::after{box-sizing:border-box}
    html:focus-within{scroll-behavior:smooth}
    body{margin:0;font-family:'Manrope','Inter','Segoe UI',sans-serif;line-height:1.6;color:var(--text);background:var(--page-bg);min-height:100vh;transition:background .4s ease,color .3s ease;position:relative;overflow-x:hidden;font-size:clamp(15px,.35vw + 14px,17px)}
    img{max-width:100%;display:block}
    a{color:inherit}
    :root{
      --bg:#fbfaf8;
      --muted:#5b6678;
      --panel:#f2f4f7;
      --text:#161e2d;
      --primary:#1f6feb;
      --ring:#3b82f6;
      --headline:#111827;
      --page-bg:#f7f8f5;
      --border:rgba(17,24,39,.08);
      --shadow:0 18px 46px rgba(17,24,39,.08);
      --container-padding:clamp(1rem,2.5vw,2.5rem);
    }

    body.night-mode{
      --bg:#0f1318;
      --panel:#161b22;
      --text:#f3f6fb;
      --muted:#9ba7b8;
      --headline:#fbfdff;
      --primary:#3b82f6;
      --ring:#60a5fa;
      --page-bg:#090c10;
      --border:rgba(255,255,255,.07);
      --shadow:0 18px 50px rgba(0,0,0,.46);
    }
    @media (prefers-color-scheme: light){
      :root{
        --bg:#fbfaf8;
        --panel:#f2f4f7;
        --text:#161e2d;
        --muted:#5b6678;
        --primary:#1f6feb;
        --ring:#3b82f6;
        --headline:#111827;
        --page-bg:#f7f8f5;
        --border:rgba(17,24,39,.08);
        --shadow:0 18px 46px rgba(17,24,39,.08);
      }
    }

    /* --- Layout --- */
    .container{max-width:clamp(320px,96vw,1700px);width:100%;margin-inline:auto;padding:0 var(--container-padding)}
    header{position:sticky;top:0;background:color-mix(in srgb,var(--bg) 92%, transparent);backdrop-filter:saturate(1.05) blur(12px);border-bottom:1px solid var(--border);z-index:20;box-shadow:0 10px 24px rgba(17,24,39,.05);transition:box-shadow .25s ease,transform .25s ease,padding .22s ease,height .22s ease}
    body.night-mode header{box-shadow:0 12px 28px rgba(0,0,0,.38)}
    .nav{display:flex;align-items:center;justify-content:space-between;height:88px;transition:height .2s ease,padding .2s ease,gap .2s ease,transform .2s ease}
    .header-actions{display:flex;align-items:center;gap:.55rem;margin-left:auto}
    .nav strong{font-size:1.15rem;transition:font-size .2s ease,letter-spacing .2s ease,transform .2s ease}
    .brand{display:inline-flex;align-items:center;text-decoration:none;padding:.42rem .78rem;border-radius:.9rem;line-height:1;transition:background .25s ease,box-shadow .25s ease,color .25s ease,transform .2s ease;position:relative;overflow:hidden}
    .brand::after{content:"";position:absolute;inset:-40% auto;left:-60%;width:55%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);opacity:0}
    .brand:hover::after,.brand:focus-visible::after{animation:shine 1s ease}
    .brand:hover,.brand:focus{outline:2px solid transparent;outline-offset:2px;background:rgba(15,98,254,.12);color:var(--text);box-shadow:0 10px 26px rgba(15,23,42,.12)}
    .brand-logo{display:block;width:auto;height:clamp(28px,3vw,38px);max-width:min(260px,30vw);object-fit:contain;object-position:left center;position:relative;z-index:1}
    nav a,.header-actions a{padding:.65rem 1.05rem;border-radius:.75rem;color:var(--muted);text-decoration:none;font-weight:600;letter-spacing:.01em;transition:padding .2s ease,font-size .2s ease,transform .2s ease,background .2s ease,color .2s ease;font-size:1rem;line-height:1}
    .theme-toggle{margin-left:1rem;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:999px;padding:.5rem 1.1rem;font-size:.92rem;cursor:pointer;box-shadow:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,padding .2s ease,font-size .2s ease}
    header.scrolled,body.header-scrolled header{transform:translateY(-10px);box-shadow:0 10px 24px rgba(15,23,42,.12);padding-block:.25rem}
    header.scrolled .nav,body.header-scrolled .nav{height:50px;transform:translateY(0)}
    header.scrolled .nav strong,body.header-scrolled .nav strong{font-size:.98rem;letter-spacing:.01em;transform:translateY(6px)}
    header.scrolled .brand,body.header-scrolled .brand{transform:translateY(6px)}
    header.scrolled nav a,body.header-scrolled nav a,header.scrolled .header-actions a,body.header-scrolled .header-actions a{padding:.4rem .75rem;font-size:.9rem;transform:translateY(6px)}
    header.scrolled .theme-toggle,body.header-scrolled .theme-toggle{padding:.38rem .9rem;font-size:.84rem;transform:translateY(6px)}
    @media (max-width:720px){
      header{padding:.65rem 0}
      .nav{
        display:flex;
        justify-content:space-between;
        gap:.5rem;
        align-items:center;
        height:auto;
      }
      header.scrolled .nav,body.header-scrolled .nav{height:auto}
      .nav strong,.brand{width:auto;text-align:left}
      .header-actions{justify-content:flex-end;flex-wrap:wrap;gap:.35rem .45rem}
      .header-actions a{padding:.5rem .85rem;font-size:.95rem}
      header.scrolled .header-actions a,body.header-scrolled .header-actions a{padding:.4rem .75rem;font-size:.9rem;transform:translateY(6px)}
      header.scrolled .brand,body.header-scrolled .brand{transform:translateY(6px)}
      .theme-toggle{padding:.45rem 1rem;margin-left:0}
      header.scrolled .theme-toggle,body.header-scrolled .theme-toggle{padding:.35rem .85rem;transform:translateY(6px)}
    }
    nav a:hover, nav a:focus,.header-actions a:hover,.header-actions a:focus{outline:2px solid transparent;outline-offset:2px;background:rgba(17,24,39,.05);color:var(--text)}

    .hero{
      display:grid;
      grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
      gap:clamp(1.5rem,3vw,2.6rem);
      align-items:center;
      padding:clamp(3rem,6vw,4.5rem) 0;
      margin-top:0;
      position:relative;
      overflow:hidden;
      isolation:isolate;
      border:0;
      border-radius:0;
      background:transparent;
      box-shadow:none;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:8% -8% 4% 46%;
      z-index:-1;
      border-radius:999px;
      background:radial-gradient(circle,rgba(31,111,235,.10),transparent 62%);
      filter:blur(24px);
      pointer-events:none;
    }
    .hero::after{
      content:none;
    }
    .hero > div:first-child{
      position:relative;
      z-index:2;
      max-width:720px;
      padding-right:0;
    }
    .hero-art{
      position:relative;
      z-index:1;
      display:flex;
      justify-content:flex-end;
      align-items:center;
      align-self:stretch;
      min-height:clamp(300px,28vw,430px);
      margin:0;
      overflow:visible;
      background:transparent;
    }
    .hero-art::before{
      content:"";
      position:absolute;
      inset:-12% auto -12% -18%;
      width:48%;
      z-index:2;
      background:linear-gradient(90deg,var(--page-bg) 0%,color-mix(in srgb,var(--page-bg) 70%, transparent) 46%,transparent 100%);
      pointer-events:none;
    }
    body.night-mode .hero-art::before{
      background:linear-gradient(90deg,var(--page-bg) 0%,color-mix(in srgb,var(--page-bg) 72%, transparent) 46%,transparent 100%);
    }
    .hero-art::after{
      content:none;
    }
    .hero img{
      filter:saturate(1.04) contrast(1.02);
      animation:float 14s ease-in-out infinite;
      max-width:100%;
      height:auto;
      border-radius:0;
      box-shadow:none;
    }
    .hero-visual{
      position:relative;
      z-index:1;
      width:min(92%,600px);
      transform:perspective(1200px) rotateX(var(--tiltY,0deg)) rotateY(var(--tiltX,0deg)) translateY(-4px) translateZ(0) scale(1);
      transition:transform .8s cubic-bezier(.18,.65,.24,1),opacity .5s ease;
      will-change:transform;
      border:0;
      background:transparent;
      padding:0;
      margin-left:auto;
      box-shadow:none;
      -webkit-mask-image:
        linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 9%,#000 24%,#000 92%,transparent 100%),
        linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
      -webkit-mask-composite:source-in;
      mask-image:
        linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 9%,#000 24%,#000 92%,transparent 100%),
        linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
      mask-composite:intersect;
    }
    .hero-visual:hover{
      transform:perspective(1200px) rotateX(var(--tiltY,0deg)) rotateY(var(--tiltX,0deg)) translateY(-8px) translateZ(0) scale(1.01);
    }
    @media (max-width:900px){
      .hero{
        grid-template-columns:1fr;
        padding:3rem 0;
      }
      .hero::after{display:none}
      .hero > div:first-child{padding-right:0}
      .hero-art{
        justify-content:center;
        min-height:auto;
        margin:1.8rem 0 0;
        border-radius:0;
      }
      .hero-art::before{
        width:100%;
        height:28%;
        inset:0 0 auto;
        background:linear-gradient(180deg,var(--page-bg) 0%,color-mix(in srgb,var(--page-bg) 66%, transparent) 42%,transparent 100%);
      }
      body.night-mode .hero-art::before{
        background:linear-gradient(180deg,var(--page-bg) 0%,color-mix(in srgb,var(--page-bg) 66%, transparent) 42%,transparent 100%);
      }
      .hero-visual{
        width:min(92%,760px);
        margin-left:0;
        -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 88%,transparent 100%);
        mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 88%,transparent 100%);
      }
    }

    .badge{display:inline-flex;gap:.5rem;align-items:center;padding:.35rem .65rem;border:1px solid var(--border);border-radius:999px;color:var(--muted);background:var(--panel);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.8rem}
    h1{font-size:clamp(2.25rem,4.4vw,3.4rem);line-height:1.15;margin:.35rem 0 1.25rem;color:var(--headline);transition:color .3s ease}
    p.lead{font-size:1.15rem;color:var(--muted);max-width:62ch}
    .cta{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:1.75rem}
    .btn{appearance:none;border:1px solid var(--border);padding:.9rem 1.4rem;border-radius:.95rem;background:var(--bg);color:var(--text);text-decoration:none;box-shadow:none;transition:transform .22s ease,box-shadow .22s ease,border-color .2s ease,background .22s ease;position:relative;overflow:hidden;font-weight:700;letter-spacing:.01em}
    .btn::after{content:"";position:absolute;inset:-40% auto;left:-60%;width:55%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);opacity:0}
    .btn:hover::after,.btn:focus-visible::after{animation:shine 1s ease}
    .btn:hover,.btn:focus{transform:translateY(-1px);box-shadow:0 10px 30px rgba(15,23,42,.08);border-color:rgba(15,23,42,.18)}
    .btn.primary{border-color:transparent;background:var(--primary);color:#ffffff;box-shadow:0 14px 32px rgba(31,111,235,.24)}
    .btn:focus{outline:3px solid var(--ring);outline-offset:2px}

    section{padding:clamp(2.4rem,5vw,3.75rem) 0;border-top:1px solid var(--border)}
    main section:first-of-type{border-top:none}
    #why{border-top:none}
    h2{font-size:1.9rem;margin:0 0 1rem;color:var(--headline);letter-spacing:-.01em}
    .muted{color:var(--muted)}
    .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,2vw,1.2rem);margin-top:2rem;align-items:stretch}
    .stats > *{min-width:0}
    @media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media (max-width:640px){.stats{grid-template-columns:1fr;gap:.6rem}}
    .stat{
      background:linear-gradient(140deg,rgba(251,250,248,.98),rgba(240,242,246,.96));
      border:1px solid rgba(17,24,39,.07);
      border-radius:1.1rem;
      padding:1rem 1.05rem;
      box-shadow:0 12px 32px rgba(17,24,39,.08);
      min-width:0;
      overflow:hidden;
      text-align:center;
      display:flex;
      flex-direction:column;
      gap:.15rem;
      align-items:center;
      justify-content:center;
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .stat:hover{
      transform:translateY(-2px);
      border-color:rgba(59,130,246,.22);
      box-shadow:0 16px 36px rgba(31,111,235,.12);
    }
    .stats .stat{border-left-color:transparent}
    @media (max-width:640px){
      .stat{padding:.7rem .8rem}
      .stat strong{font-size:.96rem;line-height:1.1;white-space:normal;overflow-wrap:anywhere;letter-spacing:0}
      .stat span{font-size:.72rem;text-align:left;white-space:normal;overflow-wrap:anywhere;letter-spacing:0;text-transform:none;word-break:break-word}
    }
    @media (max-width:480px){
      .stat{padding:.65rem .7rem}
      .stat strong{font-size:.86rem}
      .stat span{font-size:.62rem}
    }
    .stat strong{display:block;font-size:1.25rem;line-height:1.12;color:var(--headline);letter-spacing:-.01em;word-break:break-word;overflow-wrap:anywhere;max-width:100%;font-weight:800}
    .stat span{color:var(--muted);font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;display:block;word-break:break-word;overflow-wrap:anywhere;max-width:100%}

    /* Ziel: 2. Stat-Bubble (99,95% uptime) kompakter machen */
    /* Ziel: alle Stat-Bubbles einheitlich skalieren, inkl. 2. Bubble */
    .stats .stat{padding:1.15rem 1.25rem}
    .stats .stat strong{font-size:1.25rem;line-height:1.12;letter-spacing:-.01em}
    .stats .stat span{font-size:.82rem;letter-spacing:0;text-transform:none}
    @media (max-width:640px){
      .stats .stat{padding:.7rem .75rem}
      .stats .stat strong{font-size:.98rem !important;line-height:1.08;white-space:normal;overflow-wrap:anywhere;max-width:100%}
      .stats .stat span{font-size:.72rem !important;letter-spacing:0;text-transform:none;white-space:normal;overflow-wrap:anywhere;max-width:100%}
    }
    @media (max-width:480px){
      .stats .stat{padding:.65rem .7rem}
      .stats .stat strong{font-size:.9rem !important}
      .stats .stat span{font-size:.65rem !important}
    }

    .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.4rem)}
    @media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
    @media (max-width:640px){.grid{grid-template-columns:1fr}}
    .screens-head{
      max-width:1700px;
      margin-inline:auto;
    }
    .screens-intro{max-width:58rem}
    #screens{
      width:100vw;
      margin-left:calc(50% - 50vw);
      position:relative;
      overflow:hidden;
      padding-bottom:clamp(1.8rem,3.6vw,2.45rem);
    }
    .screens-showcase{
      width:100vw;
      margin:1.65rem auto 0;
      overflow:hidden;
    }
    .screens-shell{
      position:relative;
      width:100%;
      padding:clamp(.2rem,.8vw,.55rem) 0;
    }
    .screens-frame{
      position:relative;
      display:grid;
      gap:0;
    }
    .screens-stack{
      --active-card-width:min(90vw,1460px);
      --active-card-height:clamp(580px,46vw,700px);
      --preview-card-width:min(78vw,1240px);
      --preview-gap:clamp(.6rem,1vw,.95rem);
      --preview-shift:calc((var(--active-card-width) * .5) + (var(--preview-card-width) * .5) + var(--preview-gap));
      --preview-lift:12px;
      --preview-scale:.94;
      --preview-opacity:.82;
      position:relative;
      min-height:calc(var(--active-card-height) + 2rem);
      overflow:visible;
      isolation:isolate;
    }
    .screen-panel{
      position:absolute;
      top:0;
      left:50%;
      width:var(--active-card-width);
      height:var(--active-card-height);
      border-radius:clamp(1.75rem,2.9vw,2rem);
      overflow:hidden;
      background:#0b1220;
      border:none;
      box-shadow:none;
      opacity:0;
      pointer-events:none;
      transform:translateX(-50%) scale(.88);
      filter:saturate(.96) brightness(1);
      transition:
        transform .62s cubic-bezier(.22,.61,.36,1),
        opacity .48s cubic-bezier(.22,.61,.36,1),
        filter .42s ease,
        box-shadow .42s ease;
      will-change:transform,opacity,filter;
    }
    .screen-panel::before{
      content:none;
    }
    .screen-panel.is-active{
      opacity:1;
      z-index:3;
      pointer-events:auto;
      transform:translateX(-50%) scale(1);
      filter:saturate(1) brightness(1);
      box-shadow:none;
    }
    .screen-panel.is-prev,
    .screen-panel.is-next{
      opacity:1;
      z-index:2;
      width:var(--preview-card-width);
      box-shadow:none;
    }
    .screen-panel.is-prev{
      transform:translateX(calc(-50% - var(--preview-shift))) translateY(var(--preview-lift)) scale(var(--preview-scale));
      filter:saturate(.94) brightness(.96);
      opacity:var(--preview-opacity);
    }
    .screen-panel.is-next{
      transform:translateX(calc(-50% + var(--preview-shift))) translateY(var(--preview-lift)) scale(var(--preview-scale));
      filter:saturate(.94) brightness(.96);
      opacity:var(--preview-opacity);
    }
    .screen-panel img{
      width:100%;
      height:100%;
      object-fit:cover;
      border-radius:inherit;
      cursor:zoom-in;
    }
    .screen-panel-overlay{
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg,rgba(2,6,23,0) 0%,rgba(2,6,23,.02) 62%,rgba(2,6,23,.16) 100%),
        linear-gradient(100deg,rgba(2,6,23,.16) 0%,rgba(2,6,23,.06) 22%,rgba(2,6,23,0) 44%);
      z-index:1;
      transition:opacity .34s ease,background .34s ease;
    }
    .screen-panel.is-prev .screen-panel-overlay,
    .screen-panel.is-next .screen-panel-overlay{
      background:
        linear-gradient(180deg,rgba(2,6,23,0) 0%,rgba(2,6,23,.03) 65%,rgba(2,6,23,.12) 100%),
        linear-gradient(100deg,rgba(2,6,23,.08) 0%,rgba(2,6,23,.02) 34%,rgba(2,6,23,0) 62%);
    }
    .screen-panel-content{
      position:absolute;
      left:clamp(1.45rem,2.5vw,2.2rem);
      bottom:clamp(5rem,7vw,5.9rem);
      z-index:2;
      max-width:min(28rem,42%);
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      color:#f8fbff;
      padding:1rem 1.1rem .95rem;
      border-radius:1.35rem;
      background:
        linear-gradient(180deg,rgba(6,11,24,.08),rgba(6,11,24,.14)),
        rgba(6,11,24,.05);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:none;
      backdrop-filter:blur(8px);
      opacity:0;
      transform:translateY(.55rem);
      transition:transform .34s ease,opacity .34s ease;
    }
    .screen-panel.is-active .screen-panel-content{
      opacity:1;
      transform:translateY(0);
    }
    .screen-panel-badge{
      display:inline-flex;
      align-items:center;
      gap:.42rem;
      margin-bottom:.75rem;
      padding:.4rem .72rem;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 8px 20px rgba(2,6,23,.08);
      backdrop-filter:blur(10px);
      font-size:.76rem;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .screen-panel-badge::before{
      content:"";
      width:.42rem;
      height:.42rem;
      border-radius:999px;
      background:linear-gradient(135deg,#38bdf8,#6366f1);
      box-shadow:0 0 0 .24rem rgba(59,130,246,.16);
    }
    .screen-panel h3{
      margin:0 0 .48rem;
      color:#f8fbff;
      font-size:clamp(1.38rem,2.15vw,1.9rem);
      line-height:1.08;
      letter-spacing:-.03em;
      text-wrap:balance;
    }
    .screen-panel p{
      margin:0;
      max-width:26rem;
      color:rgba(248,251,255,.84);
      font-size:clamp(.92rem,.94vw,.99rem);
      line-height:1.52;
    }
    .screen-panel-cta{
      position:relative;
      display:inline-flex;
      align-items:center;
      margin-top:.82rem;
      width:2.9rem;
      height:2.9rem;
      justify-content:center;
      border:none;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      color:rgba(255,255,255,.96);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
      cursor:pointer;
      opacity:.9;
      order:2;
      transition:opacity .28s ease,transform .28s ease,color .28s ease,background .28s ease;
    }
    .screen-panel-cta svg{
      width:1.08rem;
      height:1.08rem;
      transition:transform .28s ease;
    }
    .screen-panel-cta::after{
      content:attr(data-tooltip);
      position:absolute;
      left:50%;
      bottom:calc(100% + .55rem);
      transform:translateX(-50%) translateY(.2rem);
      padding:.45rem .68rem;
      border-radius:.7rem;
      background:rgba(6,11,24,.9);
      color:#fff;
      font-size:.72rem;
      font-weight:700;
      letter-spacing:.02em;
      white-space:nowrap;
      opacity:0;
      pointer-events:none;
      transition:opacity .2s ease,transform .2s ease;
    }
    .screen-panel:not(.is-active) .screen-panel-content{
      pointer-events:none;
    }
    .screen-panel.is-active:hover{
      transform:translateX(-50%) scale(1.01);
      filter:saturate(1.02) brightness(1.01);
      box-shadow:none;
    }
    .screen-panel.is-active:hover .screen-panel-overlay{
      background:
        linear-gradient(180deg,rgba(2,6,23,0) 0%,rgba(2,6,23,.02) 62%,rgba(2,6,23,.15) 100%),
        linear-gradient(100deg,rgba(2,6,23,.14) 0%,rgba(2,6,23,.05) 22%,rgba(2,6,23,0) 46%);
    }
    .screen-panel.is-active:hover .screen-panel-content{
      transform:translateY(-.14rem);
    }
    .screen-panel.is-active:hover .screen-panel-cta{
      opacity:1;
      color:#ffffff;
      background:rgba(255,255,255,.13);
    }
    .screen-panel.is-active:hover .screen-panel-cta svg{
      transform:translateX(2px);
    }
    .screen-panel.is-active:hover .screen-panel-cta[aria-expanded="true"] svg{
      transform:translateX(2px) rotate(90deg);
    }
    .screen-panel-cta:hover::after,
    .screen-panel-cta:focus-visible::after{
      opacity:1;
      transform:translateX(-50%) translateY(0);
    }
    .screen-panel-cta[aria-expanded="true"]{
      order:3;
      margin-top:1rem;
      transform:translateY(.1rem);
    }
    .screen-panel-cta[aria-expanded="true"] svg{
      transform:rotate(90deg);
    }
    .screen-panel-cta:focus-visible{
      outline:1px solid rgba(255,255,255,.3);
      outline-offset:2px;
    }
    .screen-panel-details{
      margin-top:.85rem;
      padding-top:.82rem;
      border-top:1px solid rgba(255,255,255,.12);
      color:rgba(248,251,255,.8);
      font-size:.88rem;
      line-height:1.55;
      order:3;
      width:100%;
      opacity:0;
      max-height:0;
      overflow:hidden;
      transform:translateY(.35rem);
      transition:max-height .32s ease,opacity .24s ease,transform .24s ease;
    }
    .screen-panel-details.is-visible{
      order:2;
      opacity:1;
      max-height:12rem;
      transform:translateY(0);
    }
    .screen-panel-details p{
      margin:0;
      font-size:.88rem;
      color:rgba(248,251,255,.8);
    }
    .screens-controls{
      position:absolute;
      left:50%;
      bottom:clamp(1.35rem,2.3vw,1.8rem);
      z-index:4;
      transform:translateX(-50%);
      display:flex;
      align-items:center;
      gap:.82rem;
      padding:.68rem .9rem;
      border-radius:999px;
      background:rgba(5,10,22,.56);
      border:1px solid rgba(255,255,255,.16);
      box-shadow:
        0 18px 40px rgba(2,6,23,.26),
        inset 0 1px 0 rgba(255,255,255,.12);
      backdrop-filter:blur(18px) saturate(160%);
      opacity:0;
      visibility:hidden;
      transition:opacity .22s ease,visibility .22s ease,transform .22s ease;
    }
    .screens-showcase:hover .screens-controls{
      opacity:1;
      visibility:visible;
    }
    .screens-arrow{
      width:3rem;
      height:3rem;
      display:grid;
      place-items:center;
      border:1px solid rgba(255,255,255,.12);
      border-radius:999px;
      background:rgba(255,255,255,.09);
      color:#f8fbff;
      cursor:pointer;
      transition:transform .22s ease,background .22s ease,box-shadow .22s ease,border-color .22s ease;
    }
    .screens-arrow:hover,.screens-arrow:focus-visible{
      outline:none;
      transform:translateY(-1px);
      background:rgba(255,255,255,.16);
      border-color:rgba(255,255,255,.22);
      box-shadow:0 12px 28px rgba(2,6,23,.26),0 0 20px rgba(96,165,250,.16);
    }
    .screens-arrow svg{
      width:1.15rem;
      height:1.15rem;
    }
    .screens-progress{
      display:inline-flex;
      align-items:center;
      gap:.62rem;
      padding:0 .18rem;
    }
    .screens-progress-dot{
      width:.54rem;
      height:.54rem;
      border-radius:999px;
      background:rgba(255,255,255,.28);
      transition:transform .28s ease,background .28s ease,box-shadow .28s ease,opacity .28s ease;
      opacity:.82;
    }
    .screens-progress-dot.is-active{
      transform:scale(1.55);
      background:linear-gradient(135deg,#60a5fa,#818cf8);
      box-shadow:0 0 0 6px rgba(96,165,250,.12);
      opacity:1;
    }
    @media (max-width:1100px){
      .screens-stack{
        --active-card-width:min(92vw,1260px);
        --active-card-height:clamp(520px,53vw,620px);
        --preview-card-width:min(82vw,1080px);
        --preview-gap:clamp(.65rem,1.1vw,.95rem);
        --preview-lift:10px;
        min-height:calc(var(--active-card-height) + 1.9rem);
      }
      .screen-panel{
        height:var(--active-card-height);
      }
      .screen-panel-content{
        max-width:min(27rem,52%);
      }
    }
    @media (max-width:720px){
      .screens-head{
        max-width:none;
      }
      .screens-stack{
        --active-card-width:calc(100vw - .7rem);
        --active-card-height:min(70svh,540px);
        --preview-card-width:calc(100vw - 1.6rem);
        --preview-gap:0rem;
        --preview-lift:6px;
        --preview-scale:.96;
        --preview-opacity:.16;
        min-height:calc(var(--active-card-height) + 1.2rem);
      }
      .screen-panel{
        height:var(--active-card-height);
        border-radius:1.35rem;
      }
      .screen-panel.is-prev{
        transform:translateX(calc(-50% - var(--preview-shift))) translateY(var(--preview-lift)) scale(var(--preview-scale));
        opacity:var(--preview-opacity);
        filter:saturate(.9) brightness(.92);
      }
      .screen-panel.is-next{
        transform:translateX(calc(-50% + var(--preview-shift))) translateY(var(--preview-lift)) scale(var(--preview-scale));
        opacity:var(--preview-opacity);
        filter:saturate(.9) brightness(.92);
      }
      .screen-panel-content{
        left:1rem;
        right:auto;
        bottom:5.2rem;
        max-width:min(84%,21rem);
        padding:.9rem .95rem .9rem;
      }
      .screen-panel-cta{
        width:2.65rem;
        height:2.65rem;
      }
      .screen-panel-details{
        font-size:.84rem;
      }
      .screen-panel h3{
        font-size:clamp(1.12rem,5vw,1.42rem);
      }
      .screen-panel p{
        font-size:.88rem;
      }
      .screen-panel-badge{
        margin-bottom:.65rem;
        font-size:.7rem;
        padding:.38rem .66rem;
      }
      .screens-controls{
        gap:.58rem;
        padding:.58rem .75rem;
        bottom:1rem;
        opacity:1;
        visibility:visible;
      }
      .screens-arrow{
        width:2.72rem;
        height:2.72rem;
      }
    }
    .card{
      background:var(--panel);
      border:1px solid var(--border);
      border-radius:1.15rem;
      padding:1.35rem;
      box-shadow:var(--shadow);
      position:relative;
      overflow:visible;
      transition:transform .22s ease,box-shadow .22s ease,border-color .18s ease;
    }
    .card::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:1.15rem;
      pointer-events:none;
      opacity:0;
      transition:opacity .18s ease,filter .18s ease;
      box-shadow:
        0 0 0 1px rgba(124,58,237,.35),
        0 0 14px 6px rgba(59,130,246,.2),
        0 0 18px 8px rgba(14,165,233,.18);
      filter:blur(.5px);
    }
    .card:hover{
      transform:translateY(-3px);
      border-color:rgba(124,58,237,.35);
      box-shadow:0 10px 30px rgba(15,23,42,.1);
    }
    .card:hover::after{opacity:1}
    .card h3{margin:.25rem 0 .35rem;font-size:1.14rem}
    .chip{display:inline-block;padding:.25rem .65rem;border:1px solid rgba(17,24,39,.1);border-radius:.8rem;font-size:.76rem;color:var(--text);background:#eef1f4;font-weight:700;letter-spacing:.02em}
    #features .card{
      display:flex;
      flex-direction:column;
      gap:.72rem;
      min-height:100%;
    }
    #features .card h3{
      margin:.05rem 0 0;
    }
    #features .card p{
      margin:.05rem 0 0;
    }
    .feature-icon{
      width:4rem;
      height:4rem;
      display:grid;
      place-items:center;
      border-radius:1.05rem;
      background:
        linear-gradient(145deg,rgba(255,255,255,.9),rgba(232,239,250,.78)),
        radial-gradient(circle at 28% 18%,rgba(59,130,246,.18),transparent 42%);
      border:1px solid rgba(31,111,235,.16);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 10px 24px rgba(31,111,235,.08);
      color:var(--primary);
      transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
    }
    .feature-icon svg{
      width:2.45rem;
      height:2.45rem;
      display:block;
      fill:none;
      stroke:currentColor;
      stroke-width:2;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    #features .card:hover .feature-icon{
      transform:translateY(-2px);
      border-color:rgba(31,111,235,.32);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 14px 30px rgba(31,111,235,.14);
    }
    body.night-mode .feature-icon{
      background:
        linear-gradient(145deg,rgba(25,34,48,.92),rgba(18,25,36,.82)),
        radial-gradient(circle at 28% 18%,rgba(96,165,250,.22),transparent 44%);
      border-color:rgba(96,165,250,.22);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 28px rgba(0,0,0,.22);
      color:#60a5fa;
    }
    .feature-cards{
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1.35rem;
      margin-top:1.5rem;
    }
    .feature-card{
      padding:0;
      border:none;
      border-radius:1.7rem;
      overflow:hidden;
      background:#f3f4f1;
      box-shadow:0 10px 24px rgba(17,24,39,.05);
      display:flex;
      flex-direction:column;
      min-height:100%;
      transition:transform .22s ease,box-shadow .22s ease;
    }
    .feature-card::after{
      display:none;
    }
    .feature-card:hover{
      transform:translateY(-3px);
      box-shadow:0 14px 32px rgba(17,24,39,.08);
    }
    .feature-card-highlight{
      box-shadow:
        0 0 0 1px rgba(255,255,255,.72),
        0 16px 30px rgba(244,114,182,.12),
        0 0 18px rgba(192,132,252,.12);
    }
    .feature-card-media{
      aspect-ratio:1.8 / 1;
      overflow:hidden;
      background:#e4e8ef;
    }
    .feature-card-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .feature-card-body{
      display:flex;
      flex-direction:column;
      gap:.8rem;
      padding:1.35rem 1.45rem 1.5rem;
      flex:1;
      background:#f3f4f1;
    }
    .feature-card .chip{
      align-self:flex-start;
      padding:0;
      border:none;
      border-radius:0;
      background:transparent;
      color:#667182;
      font-size:.82rem;
      font-weight:700;
      letter-spacing:.01em;
      text-transform:none;
    }
    .feature-card h3{
      margin:0;
      font-size:1.05rem;
      line-height:1.2;
      color:#18212f;
    }
    .feature-card p{
      margin:0;
      color:#465162;
      font-size:.96rem;
      line-height:1.5;
      flex:1;
    }
    .feature-card-link{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      margin-top:.85rem;
      color:#18212f;
      font-weight:700;
      text-decoration:none;
      font-size:.95rem;
    }
    .feature-card-link::after{
      content:"\2192";
      font-size:1.25rem;
      line-height:1;
    }
    @media (max-width:900px){
      .feature-cards{grid-template-columns:1fr 1fr}
    }
    @media (max-width:640px){
      .feature-cards{grid-template-columns:1fr}
      .feature-card-body{padding:1.2rem 1.2rem 1.35rem}
    }
    .feature-list{margin:1.5rem 0 0;padding:0;list-style:none;display:grid;gap:.6rem}
    .feature-list li{display:flex;gap:.5rem;align-items:flex-start;color:var(--text)}
    .feature-list li span{color:var(--primary);font-weight:700;font-size:1.2rem;line-height:1}
    .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}
    @media (max-width:900px){.gallery{grid-template-columns:1fr 1fr}}
    @media (max-width:640px){.gallery{grid-template-columns:1fr}}
    .gallery-card{background:var(--panel);border:1px solid var(--border);border-radius:1.25rem;overflow:hidden;box-shadow:var(--shadow)}
    .gallery-card img{width:100%;height:auto;display:block}
    .gallery-card figcaption{padding:.75rem 1rem;color:var(--muted);font-size:.95rem}
.modules-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.2rem;
  margin:clamp(1.2rem,2.4vw,1.8rem) auto 0;
  max-width:1040px;
}
.module-card{
  padding:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.66);
  border-radius:1.35rem;
  background:linear-gradient(180deg,#f8fafc 0%,#f3f5f8 100%);
  box-shadow:0 14px 34px rgba(15,23,42,.07);
}
.module-card::after{
  border-radius:1.35rem;
}
.module-card:hover{
  box-shadow:0 18px 40px rgba(15,23,42,.1);
}
.module-card-media{
  aspect-ratio:1.95 / 1;
  overflow:hidden;
  background:
    linear-gradient(180deg,#0a1320 0%,#0d1726 100%);
}
.module-card-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.module-card-body{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  padding:1.1rem 1.15rem 1.2rem;
  min-height:100%;
}
.module-card-body h3{
  margin:0;
}
.module-card-body .muted{
  margin:0;
}
.module-card-body p:last-child{
  margin-top:auto;
  margin-bottom:0;
}
.module-card .chip{
  width:max-content;
  background:#eef2f7;
  border-color:rgba(15,23,42,.08);
}
@media (max-width:900px){
  .modules-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:none;
    margin:1.4rem 0 1.8rem;
  }
}
@media (max-width:640px){
  .modules-grid{grid-template-columns:1fr}
  .module-card-body{padding:1rem 1rem 1.12rem}
}
    .insights{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:center}
    @media (max-width:900px){.insights{grid-template-columns:1fr}}
    .pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
    .pillar{background:var(--panel);border:1px solid var(--border);border-radius:1rem;padding:1rem;box-shadow:0 14px 34px rgba(17,24,39,.07)}
    .pillar strong{display:block;margin-bottom:.35rem;color:var(--headline)}
    .glow-panel{background:var(--panel);border:1px solid var(--border);border-radius:1.5rem;padding:2rem;box-shadow:0 18px 42px rgba(17,24,39,.08)}
    body.night-mode .btn{border:1px solid rgba(255,255,255,.09);background:#141922;color:#eef4ff;box-shadow:0 14px 28px rgba(0,0,0,.28)}
    body.night-mode .btn.primary{background:#2563eb;color:#ffffff;box-shadow:0 14px 30px rgba(37,99,235,.22)}
    body.night-mode .chip{border:1px solid rgba(255,255,255,.08);background:#141922;color:#d6deea}
    body.night-mode .card{background:#141922;border:1px solid rgba(255,255,255,.06);box-shadow:0 16px 34px rgba(0,0,0,.3)}
    body.night-mode .module-card{
      background:linear-gradient(180deg,#111821 0%,#0f151d 100%);
      border:1px solid rgba(255,255,255,.07);
      box-shadow:0 18px 36px rgba(0,0,0,.34);
    }
    body.night-mode .module-card:hover{
      box-shadow:0 22px 44px rgba(0,0,0,.38);
    }
    body.night-mode .module-card .chip{
      background:#171f2a;
      border-color:rgba(255,255,255,.06);
      color:#dbe6f5;
    }
    body.night-mode .feature-card{background:#141922;border:none;box-shadow:0 18px 36px rgba(0,0,0,.28)}
    body.night-mode .feature-card-highlight{box-shadow:0 0 0 1px rgba(255,255,255,.04),0 18px 36px rgba(0,0,0,.32)}
    body.night-mode .feature-card-body{background:#141922}
    body.night-mode .feature-card .chip{color:#94a1b5}
    body.night-mode .feature-card h3{color:#f5f7fb}
    body.night-mode .feature-card p{color:#aeb8c8}
    body.night-mode .feature-card-link{color:#f5f7fb}
    body.night-mode .stat{background:linear-gradient(140deg,rgba(20,25,34,.98),rgba(14,18,25,.98));border:1px solid rgba(255,255,255,.06);box-shadow:0 12px 28px rgba(0,0,0,.28)}
    body.night-mode .gallery-card{background:#141922;border:1px solid rgba(255,255,255,.06);box-shadow:0 18px 36px rgba(0,0,0,.3)}
    body.night-mode .pillar{background:#141922;border:1px solid rgba(255,255,255,.06);box-shadow:0 14px 30px rgba(0,0,0,.28)}
    body.night-mode .glow-panel{background:#12171f;border:1px solid rgba(255,255,255,.06);box-shadow:0 18px 40px rgba(0,0,0,.3)}
    .theme-toggle{margin-left:1rem;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:999px;padding:.5rem 1.1rem;font-size:.92rem;cursor:pointer;box-shadow:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,padding .2s ease,font-size .2s ease}
    .theme-toggle:hover,.theme-toggle:focus{transform:translateY(-1px);box-shadow:0 10px 26px rgba(15,23,42,.12);outline:none;border-color:rgba(15,23,42,.15)}
    .bubble-trigger{display:inline-flex;align-items:center;gap:.35rem;overflow:hidden;padding:.6rem 1rem;min-width:42px;justify-content:center}
    .bubble-trigger .btn-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}
    .bubble-trigger .btn-icon svg{width:18px;height:18px}
    .bubble-trigger .btn-text{max-width:0;opacity:0;white-space:nowrap;transition:max-width .2s ease,opacity .2s ease}
    .bubble-trigger:hover .btn-text,.bubble-trigger:focus-visible .btn-text{max-width:200px;opacity:1}
    .feedback-trigger{
      position:fixed;
      right:0;
      top:50%;
      transform:translateY(-50%);
      z-index:36;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:60px;
      height:72px;
      border:1px solid rgba(255,255,255,.12);
      border-right:none;
      border-radius:1rem 0 0 1rem;
      background:linear-gradient(180deg,#1f6feb,#0f62fe);
      color:#ffffff;
      box-shadow:0 18px 34px rgba(15,23,42,.22);
      cursor:pointer;
      transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
    }
    .feedback-trigger:hover,.feedback-trigger:focus-visible{
      transform:translateY(-50%) translateX(-3px);
      box-shadow:0 22px 40px rgba(15,23,42,.28);
      filter:saturate(1.05);
      outline:none;
    }
    .feedback-trigger-icon{display:inline-flex;align-items:center;justify-content:center}
    .feedback-trigger-icon svg{width:24px;height:24px}
    .feedback-trigger-hint{
      position:absolute;
      right:calc(100% + .8rem);
      top:50%;
      transform:translateY(-50%) translateX(.35rem);
      background:rgba(11,18,32,.92);
      color:#f8fbff;
      border-radius:.75rem;
      padding:.5rem .8rem;
      font-size:.92rem;
      font-weight:700;
      letter-spacing:.01em;
      white-space:nowrap;
      box-shadow:0 16px 30px rgba(0,0,0,.22);
      opacity:0;
      pointer-events:none;
      transition:opacity .18s ease,transform .18s ease;
    }
    .feedback-trigger-hint::after{
      content:"";
      position:absolute;
      top:50%;
      left:100%;
      transform:translateY(-50%);
      border:7px solid transparent;
      border-left-color:rgba(11,18,32,.92);
    }
    .feedback-trigger:hover .feedback-trigger-hint,
    .feedback-trigger:focus-visible .feedback-trigger-hint{
      opacity:1;
      transform:translateY(-50%) translateX(0);
    }
    .modal{position:fixed;inset:0;background:rgba(11,18,32,.25);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:40}
    .modal[hidden]{display:none}
    .modal-content{max-width:640px;width:100%;background:var(--panel);border-radius:1.4rem;border:1px solid var(--border);box-shadow:0 25px 60px rgba(15,23,42,.16);padding:2.1rem;color:var(--text);position:relative;transform:scale(.98);opacity:0;transition:transform .25s ease,opacity .25s ease}
    .modal.show .modal-content{transform:scale(1);opacity:1}
    .modal-content h3{margin-top:0;color:var(--headline)}
    .modal-close{position:absolute;top:1rem;right:1rem;border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:1.3rem;cursor:pointer;border-radius:999px;padding:.2rem .6rem}
    .image-modal-content{max-width:min(95vw,1200px);padding:1rem;background:rgba(0,0,0,.85);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center}
    .image-modal-content img{width:auto;max-width:95vw;max-height:90vh;height:auto;border-radius:1rem;display:block;object-fit:contain;margin:0 auto}
    .image-modal-content figcaption{color:#f8fbff;margin-top:.5rem;text-align:center;font-size:.95rem}
    .feedback-modal-content{max-width:560px;padding:2.15rem}
    .feedback-modal-step{display:grid;gap:1rem}
    .feedback-modal-step[hidden]{display:none}
    .feedback-modal-step .chip{width:max-content}
    .feedback-rating{
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:.75rem;
      margin-top:.25rem;
    }
    .feedback-scale-legend{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      margin-top:-.25rem;
      color:var(--muted);
      font-size:.88rem;
      line-height:1.4;
    }
    .feedback-scale-legend span:last-child{text-align:right}
    .feedback-rating-btn{
      appearance:none;
      border:1px solid var(--border);
      border-radius:1rem;
      background:var(--bg);
      color:var(--headline);
      min-height:72px;
      font-size:1.3rem;
      font-weight:800;
      cursor:pointer;
      transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease;
    }
    .feedback-rating-btn:hover,.feedback-rating-btn:focus-visible{
      transform:translateY(-2px);
      border-color:rgba(59,130,246,.42);
      box-shadow:0 14px 28px rgba(31,111,235,.12);
      outline:none;
    }
    .feedback-rating-btn.is-selected{
      background:var(--primary);
      border-color:transparent;
      color:#ffffff;
      box-shadow:0 16px 32px rgba(31,111,235,.24);
    }
    .feedback-selected-score{
      margin:-.35rem 0 .1rem;
      font-weight:700;
      color:var(--headline);
    }
    .feedback-actions{
      display:flex;
      gap:.85rem;
      justify-content:flex-end;
      flex-wrap:wrap;
    }
    body.modal-open{overflow:hidden}
    [data-animate]{opacity:0;transform:translateY(40px) scale(.98);filter:blur(2px)}
    [data-animate].visible{animation:fadeLift .9s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:var(--delay,0s)}
    @keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-12px)}100%{transform:translateY(0)}}
    @keyframes aurora{0%{transform:translate3d(-4%,2%,0) scale(1)}50%{transform:translate3d(2%,-3%,0) scale(1.05)}100%{transform:translate3d(4%,4%,0) scale(1)}}
    @keyframes shine{0%{opacity:0;transform:skewX(-20deg) translateX(-30%)}40%{opacity:1}100%{opacity:0;transform:skewX(-20deg) translateX(180%)}}
    @keyframes fadeLift{0%{opacity:0;transform:translateY(40px) scale(.96);filter:blur(4px)}100%{opacity:1;transform:none;filter:none}}
    @media (prefers-reduced-motion: reduce){
      .hero img,.btn,[data-animate]{animation:none;transition:none}
      [data-animate]{opacity:1;transform:none;filter:none}
    }
    @media (max-width:640px){
      .feedback-trigger{
        width:54px;
        height:64px;
      }
      .feedback-rating{
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:.55rem;
      }
      .feedback-rating-btn{
        min-height:60px;
        font-size:1.1rem;
      }
      .feedback-modal-content{
        padding:1.75rem 1.2rem 1.2rem;
      }
      .feedback-actions{
        justify-content:stretch;
      }
      .feedback-actions .btn{
        width:100%;
        text-align:center;
      }
    }

    form{display:grid;gap:1rem}
    .download-form .download-version{display:block}
    label{font-weight:700;color:var(--headline)}
    input,textarea,select{width:100%;padding:.85rem;border-radius:.85rem;border:1px solid var(--border);background:var(--panel);color:var(--text);transition:border-color .2s ease,box-shadow .2s ease}
    input:focus,textarea:focus,select:focus{outline:3px solid var(--ring);outline-offset:2px;box-shadow:0 12px 26px rgba(15,23,42,.12)}
    .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

    footer{padding:2rem 0;color:var(--muted);border-top:1px solid var(--border);margin-top:2rem}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

    .hero > div:first-child > .muted:empty{
      display:none;
    }
    .hero .feature-list{
      grid-template-columns:1fr;
      gap:.65rem;
      margin-top:1.2rem;
      max-width:680px;
    }
    .hero .feature-list li{
      align-items:center;
      gap:.4rem;
      width:max-content;
      max-width:100%;
      padding:.46rem .72rem;
      border:1px solid var(--border);
      border-radius:999px;
      background:color-mix(in srgb,var(--panel) 80%, transparent);
      color:var(--muted);
      font-size:.9rem;
      font-weight:700;
      line-height:1.2;
    }
    .hero .feature-list li span{
      font-size:.92rem;
    }
    @media (max-width:720px){
      .hero .feature-list{
        grid-template-columns:1fr;
      }
      .hero .feature-list li{
        width:max-content;
        max-width:100%;
      }
    }

    /* Showcase descriptions: hidden by default, strong on hover/focus */
    .screen-panel-overlay{
      opacity:0;
      transition:opacity .24s ease,background .24s ease;
    }
    .screen-panel.is-active:hover .screen-panel-overlay,
    .screen-panel.is-active:focus-within .screen-panel-overlay{
      opacity:1;
      background:
        linear-gradient(180deg,rgba(2,8,23,0) 34%,rgba(2,8,23,.62) 100%),
        linear-gradient(90deg,rgba(2,8,23,.72) 0%,rgba(2,8,23,.32) 42%,rgba(2,8,23,0) 76%);
    }
    .screen-panel-content{
      max-width:min(34rem,48%);
      padding:1.25rem 1.35rem 1.2rem;
      border-radius:.9rem;
      background:rgba(8,16,32,.86);
      border:1px solid rgba(255,255,255,.24);
      box-shadow:0 18px 44px rgba(0,0,0,.26);
      backdrop-filter:blur(16px) saturate(1.1);
      opacity:0 !important;
      visibility:hidden;
      pointer-events:none;
      transform:translateY(.8rem);
    }
    .screen-panel.is-active:hover .screen-panel-content,
    .screen-panel.is-active:focus-within .screen-panel-content{
      opacity:1 !important;
      visibility:visible;
      pointer-events:auto;
      transform:translateY(0);
    }
    .screen-panel-badge{
      background:rgba(255,255,255,.18);
      border-color:rgba(255,255,255,.26);
      color:#ffffff;
    }
    .screen-panel h3{
      color:#ffffff;
      letter-spacing:0;
      text-shadow:0 2px 16px rgba(0,0,0,.28);
    }
    .screen-panel p{
      color:rgba(255,255,255,.94);
      font-weight:600;
    }
    .screen-panel-cta{
      background:rgba(255,255,255,.18);
      color:#ffffff;
    }