@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/assets/fonts/hanken-grotesk-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/assets/fonts/hanken-grotesk-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/assets/fonts/hanken-grotesk-600.woff2) format("woff2");font-weight:600;font-display:swap}
[hidden]{display:none!important}
.err a{color:inherit;text-decoration:underline}

/* Layout: Apple-style stacked tiles (light / navy), icon shortcut strip, 2-up solution grid, visual "how it works" rail, tabbed product tour, module rail, priced plans. Mobile first-class: bottom sheets, swipe rails, scrollable segmented controls. */
:root{
  --bg:#f4f6f9; --tile:#ffffff; --tile-2:#eaeef4; --fg:#0b1a2e; --muted:#5a6a80; --line:#d9e0ea;
  --accent:#2f63e8; --accent-ink:#ffffff; --mint:#139a7d; --amber:#c98512; --rose:#d1495b; --violet:#7a52d1;
  --navy:#071a32; --navy-2:#0e2746; --navy-fg:#eef3fa; --navy-muted:#9db0c9; --navy-accent:#7fa2ff;
  --nav-bg:rgba(244,246,249,.8); --warn-bg:#fff4dc; --warn-fg:#7a4d00;
  --display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body:"Hanken Grotesk", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --r-tile:28px; --gap:12px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#05101f; --tile:#0c1a2d; --tile-2:#12243b; --fg:#e9eff8; --muted:#93a4bb; --line:#1f3350;
  --accent:#7fa2ff; --accent-ink:#06132a; --mint:#3fd0ae; --amber:#f0b54a; --rose:#f07a8a; --violet:#a98bf0;
  --navy:#020a16; --navy-2:#0a1b31; --navy-fg:#eef3fa; --navy-muted:#9db0c9; --navy-accent:#8fb0ff;
  --nav-bg:rgba(5,16,31,.78); --warn-bg:#3a2a07; --warn-fg:#ffd98a; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#05101f; --tile:#0c1a2d; --tile-2:#12243b; --fg:#e9eff8; --muted:#93a4bb; --line:#1f3350;
  --accent:#7fa2ff; --accent-ink:#06132a; --mint:#3fd0ae; --amber:#f0b54a; --rose:#f07a8a; --violet:#a98bf0;
  --navy:#020a16; --navy-2:#0a1b31; --navy-fg:#eef3fa; --navy-muted:#9db0c9; --navy-accent:#8fb0ff;
  --nav-bg:rgba(5,16,31,.78); --warn-bg:#3a2a07; --warn-fg:#ffd98a; color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--nav-bg)}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.02em;line-height:1.05}
p{margin:0}
a{color:inherit}
svg{display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1180px;margin:0 auto}

/* ---------- Nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--nav-bg);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:52px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.08em;text-decoration:none;color:var(--fg)}
.logo-mark{width:22px;height:22px;border-radius:7px;background:var(--fg);position:relative;flex:none}
.logo-mark::after{content:"";position:absolute;inset:6px;border-radius:3px;border:2px solid var(--bg)}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{font-size:13px;text-decoration:none;opacity:.78;transition:opacity .2s}
.nav ul a:hover{opacity:1}
.btn-demo{font-size:13px;font-weight:600;text-decoration:none;background:var(--accent);color:var(--accent-ink);padding:7px 14px;border-radius:999px;white-space:nowrap}
.menu-btn{display:none;background:none;border:0;color:var(--fg);width:44px;height:44px;cursor:pointer;margin-right:-10px}
.menu-btn span{display:block;width:18px;height:1.5px;background:currentColor;margin:5px auto;transition:transform .3s var(--ease)}
@media (max-width:900px){
  .nav .wrap{gap:12px}
  .nav ul{display:none}
  .btn-demo{margin-left:auto}
  .menu-btn{display:block}
  .nav.open ul{display:flex;position:fixed;top:calc(52px + env(safe-area-inset-top,0px));left:0;right:0;bottom:0;flex-direction:column;gap:0;background:var(--bg);padding:12px max(24px,env(safe-area-inset-right,0px)) 24px max(24px,env(safe-area-inset-left,0px));overflow:auto;animation:drop .35s var(--ease)}
  .nav.open ul a{display:block;font-size:28px;font-family:var(--display);font-weight:600;padding:10px 0;opacity:1}
  .nav.open .menu-btn span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .nav.open .menu-btn span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
  @keyframes drop{from{opacity:0;transform:translateY(-8px)}}
}

/* ---------- Shortcut strip (Apple-like product nav) ---------- */
.shortcuts{display:flex;gap:8px;justify-content:center;overflow-x:auto;scrollbar-width:none;padding-block:18px 14px;scroll-snap-type:x proximity}
.shortcuts::-webkit-scrollbar{display:none}
.sc{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;font-size:12px;font-weight:500;width:96px;scroll-snap-align:start;color:var(--fg)}
.sc .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--tile);transition:transform .3s var(--ease)}
.sc:hover .ic{transform:translateY(-3px)}
.sc svg{width:26px;height:26px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.shortcuts{justify-content:flex-start}}

/* ---------- Tiles ---------- */
main{display:flex;flex-direction:column;gap:var(--gap);padding-block:0 var(--gap)}
.tile{background:var(--tile);border-radius:var(--r-tile);overflow:hidden;position:relative;text-align:center;padding:60px 24px 0}
.tile.dark{background:var(--navy);color:var(--navy-fg)}
.tile.dark .sub,.tile.dark .eyebrow{color:var(--navy-muted)}
.stack{margin:0 var(--gap)}
.eyebrow{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.headline{font-size:clamp(42px,7.5vw,84px);font-weight:700}
.title{font-size:clamp(30px,5vw,54px);font-weight:700}
.sub{font-size:clamp(18px,2.2vw,24px);color:var(--muted);max-width:30ch;margin:14px auto 0;line-height:1.3;font-weight:500}
.links{display:flex;gap:14px 26px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:22px}
.lk{font-size:18px;color:var(--accent);text-decoration:none;font-weight:500;background:none;border:0;cursor:pointer;font-family:inherit;padding:8px 0}
.dark .lk{color:var(--navy-accent)}
.lk::after{content:" ›";display:inline-block;transition:transform .25s var(--ease)}
.lk:hover::after,.tile:hover .lk::after{transform:translateX(4px)}
.pill{display:inline-block;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:12px 22px;font-weight:600;text-decoration:none;font-size:16px;border:0;cursor:pointer;font-family:inherit}
.dark .pill{background:var(--navy-accent);color:#06132a}
.pad-b{padding-bottom:60px}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
    @keyframes rise{from{opacity:.35;transform:translateY(36px) scale(.985)}to{opacity:1;transform:none}}
  }
}

/* ---------- Hero devices ---------- */
.devices{position:relative;max-width:1000px;margin:44px auto 0;padding:0 2% 0}
.laptop{background:linear-gradient(180deg,var(--navy-2),#0b2240);border:1px solid rgba(255,255,255,.08);border-bottom:0;border-radius:22px 22px 0 0;padding:16px;text-align:left;display:grid;grid-template-columns:170px 1fr;gap:14px;box-shadow:0 -30px 80px rgba(127,162,255,.12);margin-right:120px}
.side{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--navy-muted)}
.side b{color:var(--navy-fg);font-family:var(--display);letter-spacing:.06em;margin-bottom:10px}
.side span{padding:7px 10px;border-radius:9px}
.side span.on{background:rgba(127,162,255,.16);color:var(--navy-fg)}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;min-width:0}
.kpi{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:13px;min-width:0}
.kpi small{display:block;font-size:12px;color:var(--navy-muted)}
.kpi strong{font-family:var(--display);font-size:30px;font-variant-numeric:tabular-nums;color:var(--navy-fg)}
.kpi.wide{grid-column:span 2}
.live{font-size:11px;color:#5fe0bf}
.bars{display:flex;align-items:flex-end;gap:6px;height:96px;margin-top:10px}
.bars i{flex:1;background:linear-gradient(180deg,var(--navy-accent),rgba(127,162,255,.25));border-radius:5px 5px 2px 2px;transform-origin:bottom;animation:grow 1.2s var(--ease) both}
@keyframes grow{from{transform:scaleY(.15)}}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--navy-fg);padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);text-align:left}
.row:last-child{border:0}
.tag{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--navy-muted);white-space:nowrap}
.tag.g{background:rgba(63,208,174,.18);color:#5fe0bf}
.tag.a{background:rgba(240,181,74,.18);color:#f3c46a}
.phone{position:absolute;right:2%;bottom:0;width:210px;background:#0a1a30;border:6px solid #1b3152;border-bottom:0;border-radius:34px 34px 0 0;padding:26px 12px 10px;text-align:left;box-shadow:-20px 0 60px rgba(0,0,0,.35)}
.phone::before{content:"";position:absolute;top:9px;left:50%;width:56px;height:6px;border-radius:9px;background:#1b3152;transform:translateX(-50%)}
.phone h4{margin:0 0 6px;font-family:var(--display);font-size:17px;color:var(--navy-fg)}
.phone .row{font-size:12px}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
@media (max-width:760px){
  .laptop{display:none}
  .phone{position:relative;right:auto;margin:0 auto;width:min(270px,82vw)}
  .phone .row{font-size:14px}
}

/* ---------- Solutions grid ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin:0 var(--gap)}
.grid2 .tile{padding-top:48px;min-height:540px;display:flex;flex-direction:column;cursor:pointer;transition:transform .5s var(--ease)}
.grid2 .tile:hover{transform:scale(1.012)}
.grid2 .title{font-size:clamp(30px,3.6vw,44px)}
.grid2 .sub{font-size:19px}
.art{margin-top:auto;padding:30px 4% 0;display:flex;justify-content:center}
.card-ui{width:100%;max-width:380px;background:var(--tile-2);border-radius:18px 18px 0 0;padding:16px;text-align:left;font-size:13px;display:flex;flex-direction:column;gap:8px}
.dark .card-ui{background:var(--navy-2)}
.ui-row{display:flex;align-items:center;gap:10px;background:var(--tile);border-radius:10px;padding:9px 11px}
.dark .ui-row{background:rgba(255,255,255,.05)}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.ui-row em{font-style:normal;margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.dark .ui-row em{color:var(--navy-muted)}
.unit-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.unit-grid i{aspect-ratio:1;border-radius:6px;background:var(--line);animation:pop .5s var(--ease) both}
.unit-grid i.o{background:var(--accent)}
.unit-grid i.w{background:var(--amber)}
@keyframes pop{from{transform:scale(.4);opacity:.3}}
.link3{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 0}
.node{background:rgba(255,255,255,.06);border-radius:12px;padding:10px 8px;font-size:12px;text-align:center;flex:1;min-width:0;color:var(--navy-muted)}
.node b{display:block;font-family:var(--display);font-size:14px;color:var(--navy-fg)}
.wire{height:2px;flex:0 0 18px;background:repeating-linear-gradient(90deg,var(--navy-accent) 0 6px,transparent 6px 11px);background-size:22px 2px;animation:flow 1.4s linear infinite}
@keyframes flow{to{background-position:22px 0}}
.prog{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.dark .prog{background:rgba(255,255,255,.1)}
.prog i{display:block;height:100%;background:var(--mint);border-radius:inherit}
@media (max-width:820px){.grid2{grid-template-columns:1fr}.grid2 .tile{min-height:0}}

/* ---------- How it works (visual rail) ---------- */
.how{padding-block:56px 8px}
.how-head{max-width:1180px;margin:0 auto;padding:0 var(--gap);display:flex;justify-content:space-between;align-items:end;gap:16px}
.arrows{display:flex;gap:10px;flex:none}
.arrows button{width:44px;height:44px;border-radius:50%;border:0;background:var(--tile-2);color:var(--fg);font-size:22px;cursor:pointer}
.arrows button:disabled{opacity:.35;cursor:default}
@media (hover:none){.arrows{display:none}}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gap);padding:28px var(--gap) 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail::after{content:"";flex:0 0 1px}
.hw{flex:0 0 min(400px,84vw);scroll-snap-align:start;background:var(--tile);border-radius:26px;overflow:hidden;display:flex;flex-direction:column}
.hw .txt{padding:26px 26px 0}
.hw .n{font-family:var(--display);font-weight:700;color:var(--accent);font-size:15px}
.hw h3{font-size:28px;margin-top:4px}
.hw p{color:var(--muted);font-size:16px;margin-top:6px}
.hw .pic{margin-top:22px;aspect-ratio:4/3;max-width:100%;background:var(--tile-2);display:grid;place-items:center;position:relative;overflow:hidden}
.hw .pic svg{width:88%;height:auto}
.dots{display:flex;justify-content:center;gap:8px;padding-top:6px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s,width .3s}
.dots i.on{background:var(--fg);width:20px;border-radius:9px}

/* svg tokens */
.s-card{fill:var(--tile)}
.s-line{stroke:var(--line);fill:none}
.s-acc{fill:var(--accent)}
.s-acc-st{stroke:var(--accent);fill:none}
.s-mint{fill:var(--mint)}
.s-amber{fill:var(--amber)}
.s-rose{fill:var(--rose)}
.s-violet{fill:var(--violet)}
.s-muted{fill:var(--muted)}
.s-soft{fill:var(--line)}
.s-txt{fill:var(--fg);font:600 13px var(--body)}
.s-small{fill:var(--muted);font:500 11px var(--body)}
.s-white{fill:#fff;font:700 12px var(--body)}
.flowline{stroke:var(--accent);stroke-width:2;fill:none;stroke-dasharray:5 6;animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-22}}
.bob{animation:float 5s ease-in-out infinite}
.bob2{animation:float 5s ease-in-out -1.6s infinite}
.bob3{animation:float 5s ease-in-out -3.2s infinite}

/* ---------- Tour ---------- */
.seg-wrap{display:flex;justify-content:center;margin-top:28px;overflow-x:auto;scrollbar-width:none;margin-left:-24px;margin-right:-24px;padding:0 24px}
.seg-wrap::-webkit-scrollbar{display:none}
.seg{display:inline-flex;background:var(--navy-2);border-radius:999px;padding:4px;gap:2px;flex:none}
.seg button{border:0;background:none;color:inherit;font:600 14px var(--body);padding:10px 16px;border-radius:999px;cursor:pointer;transition:background .3s,color .3s;white-space:nowrap}
.seg button[aria-selected="true"]{background:var(--navy-fg);color:var(--navy)}
@media (max-width:560px){.seg-wrap{justify-content:flex-start}}
.panes{display:grid;margin:36px auto 0;max-width:1000px;padding:0 0 60px}
.pane{grid-area:1/1;display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center;text-align:left;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.pane[aria-hidden="true"]{opacity:0;transform:translateY(16px);pointer-events:none;visibility:hidden}
.pane h3{font-size:clamp(26px,3vw,36px)}
.pane p{color:var(--navy-muted);margin-top:10px}
.shot{background:var(--navy-2);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:4px;min-width:0}
.shot-h{display:flex;justify-content:space-between;align-items:baseline;color:var(--navy-fg);font-family:var(--display);font-size:18px;margin-bottom:6px;gap:10px;flex-wrap:wrap}
.shot-h small{font-family:var(--body);font-size:12px;color:var(--navy-muted)}
@media (max-width:760px){.pane{grid-template-columns:1fr;gap:20px;text-align:center}.pane .shot{text-align:left}}

/* ---------- Modules ---------- */
.mod{flex:0 0 min(290px,74vw);scroll-snap-align:start;background:var(--tile);border-radius:24px;padding:26px;min-height:340px;display:flex;flex-direction:column;gap:10px;text-align:left;border:0;color:inherit;font:inherit;cursor:pointer;transition:transform .4s var(--ease),box-shadow .4s}
.mod:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(7,26,50,.12)}
.mod .badge{width:56px;height:56px;border-radius:17px;display:grid;place-items:center}
.mod .badge svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mod h3{font-size:26px;margin-top:auto}
.mod p{color:var(--muted);font-size:16px}
.mod .plus{align-self:flex-end;width:34px;height:34px;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center;font-size:20px;line-height:1}

/* ---------- Security ---------- */
.shield{width:min(260px,60vw);margin:34px auto 0}
.sec-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:28px;padding-bottom:60px}
.chip{background:var(--navy-2);border-radius:999px;padding:10px 18px;font-size:15px;font-weight:500;display:flex;gap:8px;align-items:center}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:#5fe0bf}

/* ---------- Pricing ---------- */
.notice{display:inline-flex;gap:8px;align-items:center;background:var(--warn-bg);color:var(--warn-fg);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;margin-top:18px}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1120px;margin:32px auto 0;text-align:left}
.plan{border:1.5px solid var(--line);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:6px;transition:border-color .3s,transform .3s var(--ease),background .3s}
.plan.on{border-color:var(--accent);transform:translateY(-4px);background:var(--tile-2)}
.plan .size{font-family:var(--display);font-size:34px;font-weight:700;line-height:1}
.plan .for{font-weight:600;font-size:15px;margin-top:8px}
.plan .users{color:var(--muted);font-size:15px}
.price{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.price b{font-family:var(--display);font-size:44px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.price span{color:var(--muted);font-size:14px}
.plan .ex{color:var(--muted);font-size:13px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.calc{max-width:520px;margin:28px auto 0;padding:28px 0 56px;display:flex;flex-direction:column;align-items:center;gap:12px}
.calc label{font-weight:600;font-size:17px}
.calc-row{display:flex;align-items:center;gap:16px;width:100%}
.calc input{flex:1;accent-color:var(--accent);height:32px;min-width:0}
.calc output{font-family:var(--display);font-weight:700;font-size:22px;min-width:2.4em;text-align:right;font-variant-numeric:tabular-nums}
.total b{font-family:var(--display);font-size:40px;font-variant-numeric:tabular-nums}
.total span{color:var(--muted)}
@media (max-width:980px){.plans{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.plans{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:24px auto 0;padding:0 0 56px;text-align:left}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-family:var(--display);font-size:20px;font-weight:600;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:26px;line-height:1;transition:transform .3s var(--ease);color:var(--accent)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding:0 0 20px}

/* ---------- Footer ---------- */
footer{font-size:13px;color:var(--muted);padding-block:28px 40px}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:24px;padding-block:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
footer h4{margin:0 0 10px;font-size:12px;color:var(--fg);font-weight:600}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
footer ul a{text-decoration:none;display:block;padding:4px 0}
footer a:hover{text-decoration:underline}
footer .legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:16px}
@media (max-width:720px){footer .cols{grid-template-columns:1fr 1fr}footer .cols > div:first-child{grid-column:1/-1}}

/* ---------- Sheet ---------- */
.sheet{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(4,10,20,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.sheet.open{opacity:1;visibility:visible}
.sheet-card{background:var(--tile);color:var(--fg);border-radius:28px;max-width:640px;width:100%;max-height:86vh;overflow:auto;padding:40px 36px;text-align:left;transform:translateY(30px) scale(.97);transition:transform .45s var(--ease);overscroll-behavior:contain}
.sheet.open .sheet-card{transform:none}
.sheet-card h2{font-size:clamp(30px,4vw,42px)}
.sheet-card .lead{font-size:19px;color:var(--muted);margin-top:10px;font-weight:500}
.sheet-card ul{margin:22px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sheet-card li{background:var(--tile-2);border-radius:12px;padding:12px 14px;font-size:15px}
.sheet-card .pill{margin-top:26px}
.close{float:right;margin:-16px -12px 0 0;width:40px;height:40px;border-radius:50%;border:0;background:var(--tile-2);color:var(--fg);font-size:22px;cursor:pointer}
.grab{display:none}
@media (max-width:560px){
  .sheet{place-items:end stretch;padding:0}
  .sheet-card{border-radius:26px 26px 0 0;padding:14px 22px calc(28px + env(safe-area-inset-bottom,0px));transform:translateY(100%);max-height:88vh}
  .sheet-card ul{grid-template-columns:1fr}
  .grab{display:block;width:40px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 16px}
  .close{margin:0}
  .sheet-card .pill{display:block;text-align:center}
}

/* ---------- Small screens ---------- */
@media (max-width:600px){
  :root{--gap:8px;--r-tile:22px}
  body{font-size:16px}
  .tile{padding:44px 18px 0}
  .pad-b{padding-bottom:44px}
  .seg-wrap{margin-left:-18px;margin-right:-18px;padding:0 18px}
  .links .pill{width:100%;max-width:320px}
}
/* ---------- Hero animation (reprise du site actuel korlya.fr) ---------- */

.hero-k > *:not(.hero-bg){position:relative;z-index:1}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero-bg .ring{position:absolute;border:1px solid rgba(72,196,255,.35);width:70vw;height:250px;border-radius:50%;filter:drop-shadow(0 0 12px rgba(72,196,255,.25));animation:korlyaOrbit 14s linear infinite}
.hero-bg .ring.a{right:-18vw;top:80px;transform:rotate(-10deg)}
.hero-bg .ring.b{right:-8vw;top:220px;animation-duration:20s;animation-direction:reverse;opacity:.55}
.hero-bg .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.hero-bg .orb.a{width:42vw;height:42vw;left:-14vw;top:10%;background:radial-gradient(circle,rgba(25,180,206,.4),rgba(68,92,238,.14) 45%,transparent 72%);animation:korlyaAmbientA 24s ease-in-out infinite alternate}
.hero-bg .orb.b{width:48vw;height:48vw;right:-18vw;top:40%;background:radial-gradient(circle,rgba(105,76,244,.3),rgba(26,193,179,.15) 46%,transparent 72%);animation:korlyaAmbientB 30s ease-in-out infinite alternate}
.hero-bg .particles{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(127,190,255,.5) 1px,transparent 1.5px);background-size:72px 72px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);opacity:.25;animation:korlyaParticles 40s linear infinite}
@keyframes korlyaOrbit{to{transform:rotate(350deg)}}
@keyframes korlyaAmbientA{0%{transform:translate3d(0,-5%,0) scale(.92)}100%{transform:translate3d(20vw,24%,0) scale(1.18)}}
@keyframes korlyaAmbientB{0%{transform:translate3d(0,8%,0) scale(1.05)}100%{transform:translate3d(-22vw,-18%,0) scale(.88)}}
@keyframes korlyaParticles{to{background-position:144px 216px}}
@media (max-width:760px){.hero-bg .ring{width:140vw;height:200px}.hero-bg .ring.a{right:-60vw}.hero-bg .ring.b{right:-40vw}}

/* ---------- Constellation (fond de tout le site) ---------- */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.shortcuts,main,footer{position:relative;z-index:1}
.nav{z-index:50}
.tile{background:color-mix(in srgb,var(--tile) 86%,transparent)}
.tile.dark{background:var(--navy)}
.tile.dark.hero-k{background:linear-gradient(135deg,#06182e 0%,#082b58 55%,#063f69 100%)}
.hero-sky{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-k .laptop{box-shadow:none}
.hero-k .phone{box-shadow:none}
.hero-bg .ring{filter:none}

/* ---------- Pages détaillées ---------- */
.view{display:flex;flex-direction:column;gap:var(--gap)}
[hidden]{display:none!important}
.view.enter{animation:viewIn .5s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}}
.crumbs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--navy-muted);margin-bottom:18px}
.crumbs a{color:var(--navy-muted);text-decoration:none}
.crumbs a:hover{color:var(--navy-fg)}
.page-top{padding-bottom:56px}
.page-top .headline{font-size:clamp(36px,6vw,68px)}
.page-top .sub{max-width:38ch}
.anchors{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.anchors a{font-size:14px;font-weight:600;text-decoration:none;padding:8px 14px;border-radius:999px;background:var(--navy-2);color:var(--navy-fg)}
.block{padding-bottom:56px}
.inner{max-width:1040px;margin:0 auto;text-align:left}
.inner.center{text-align:center}
.block .title{font-size:clamp(28px,4vw,44px)}
.block .lede{color:var(--muted);font-size:18px;max-width:60ch;margin-top:12px}
.dark .block .lede,.block.dark .lede{color:var(--navy-muted)}
.forwho{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;background:var(--tile-2);border-radius:22px;padding:26px;margin-top:28px}
.forwho .ic{width:52px;height:52px;border-radius:16px;background:var(--accent);display:grid;place-items:center}
.forwho .ic svg{width:26px;height:26px;stroke:var(--accent-ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.forwho p{font-size:19px;line-height:1.45}
.forwho b{display:block;font-family:var(--display);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.steps-v{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px;counter-reset:st}
.steps-v li{position:relative;background:var(--navy-2);border-radius:18px;padding:22px 20px 20px;counter-increment:st}
.steps-v li::before{content:counter(st);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--navy-accent);color:#06132a;font-family:var(--display);font-weight:700;font-size:15px;margin-bottom:12px}
.steps-v h3{font-size:20px;color:var(--navy-fg)}
.steps-v p{color:var(--navy-muted);font-size:15px;margin-top:6px}
.feat{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:12px;margin-top:28px}
.feat > div{background:var(--tile-2);border-radius:18px;padding:22px}
.feat h3{font-size:19px}
.feat p{color:var(--muted);font-size:15px;margin-top:6px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.trio > div{border:1.5px solid var(--line);border-radius:18px;padding:22px}
.dark .trio > div{border-color:rgba(255,255,255,.1)}
.trio h3{font-size:19px}
.trio p{color:var(--muted);font-size:15px;margin-top:6px}
.dark .trio p{color:var(--navy-muted)}
@media (max-width:760px){.trio{grid-template-columns:1fr}.forwho{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips span{background:var(--tile-2);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:500}
.dark .chips span{background:var(--navy-2)}
.ticks{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:10px}
.ticks li{display:flex;gap:10px;align-items:baseline}
.ticks li::before{content:"✓";color:var(--mint);font-weight:700}
.dark .ticks li::before{color:#5fe0bf}
.callout{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--tile-2);border-radius:22px;padding:26px;margin-top:28px}
.callout h3{font-size:22px}
.callout p{color:var(--muted);margin-top:6px;max-width:56ch}
.others{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.others a{display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--tile-2);border-radius:18px;padding:22px;transition:transform .3s var(--ease)}
.others a:hover{transform:translateY(-3px)}
.others b{font-family:var(--display);font-size:20px}
.others span{color:var(--muted);font-size:15px}
.others i{font-style:normal;color:var(--accent);font-weight:600;margin-top:6px}
@media (max-width:760px){.others{grid-template-columns:1fr}}
.modsec{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:28px 0;border-top:1px solid var(--line);scroll-margin-top:80px}
.modsec:first-of-type{border-top:0}
.modsec .badge{width:56px;height:56px;border-radius:17px;display:grid;place-items:center}
.modsec .badge svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.modsec h3{font-size:26px}
.modsec > div > p{color:var(--muted);margin-top:6px;max-width:62ch}
.mini-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mini-steps span{font-size:14px;background:var(--tile-2);border-radius:12px;padding:8px 12px}
.mini-steps span b{font-family:var(--display);color:var(--accent);margin-right:6px}
@media (max-width:560px){.modsec{grid-template-columns:1fr}}
.soon{display:inline-block;font-size:12px;font-weight:700;background:var(--warn-bg);color:var(--warn-fg);border-radius:999px;padding:3px 10px;margin-left:8px;vertical-align:middle;letter-spacing:0}
.todo{background:var(--warn-bg);color:var(--warn-fg);border-radius:8px;padding:2px 8px;font-size:14px;font-weight:600}
.compare{width:100%;border-collapse:collapse;margin-top:24px;font-size:15px}
.compare th,.compare td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.compare th{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.compare td:last-child{font-weight:600}
.table-wrap{overflow-x:auto}

/* FAQ page */
.faq-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:24px}
.faq-tools input{flex:1;min-width:0;font:inherit;font-size:17px;padding:13px 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--tile);color:var(--fg)}
.faq-cats{display:flex;gap:6px;flex-wrap:wrap}
.faq-cats button{border:0;font:600 14px var(--body);padding:9px 14px;border-radius:999px;background:var(--tile-2);color:var(--fg);cursor:pointer}
.faq-cats button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.faq-page{max-width:none;padding-bottom:0}
.faq-page h3.cat{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:30px 0 4px}
.faq-empty{color:var(--muted);padding:20px 0}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin-top:10px;text-align:left}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.panel{background:var(--tile);border-radius:24px;padding:28px}
.seg-l{display:inline-flex;background:var(--tile-2);border-radius:999px;padding:4px;gap:2px;margin-bottom:22px;max-width:100%}
.seg-l button{border:0;background:none;color:var(--fg);font:600 14px var(--body);padding:10px 16px;border-radius:999px;cursor:pointer}
.seg-l button[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.form{display:flex;flex-direction:column;gap:16px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.field legend{font-size:14px;font-weight:600}
.field input,.field select,.field textarea{font:inherit;font-size:16px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--fg);width:100%}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.err{color:var(--rose);font-size:13px;min-height:1em}
.stepper{display:flex;gap:6px;margin-bottom:18px}
.stepper i{flex:1;height:4px;border-radius:9px;background:var(--line)}
.stepper i.on{background:var(--accent)}
.stephead{font-family:var(--display);font-size:22px;font-weight:600}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:0;padding:0;margin:0}
@media (max-width:560px){.choices{grid-template-columns:1fr}}
.choice{position:relative;display:block;cursor:pointer}
.choice input{position:absolute;opacity:0}
.choice span{display:block;border:1.5px solid var(--line);border-radius:14px;padding:14px;height:100%;transition:border-color .2s,background .2s}
.choice span b{display:block}
.choice span small{color:var(--muted);font-size:14px}
.choice input:checked + span{border-color:var(--accent);background:var(--tile-2)}
.choice input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.fbtns{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}
.btn-ghost{background:none;border:1.5px solid var(--line);color:var(--fg);border-radius:999px;padding:11px 20px;font:600 15px var(--body);cursor:pointer}
.done{text-align:center;padding:30px 10px}
.done .ok{width:64px;height:64px;border-radius:50%;background:var(--mint);display:grid;place-items:center;margin:0 auto 16px;color:#fff;font-size:30px}
.done h3{font-size:26px}
.done p{color:var(--muted);margin-top:8px}
.next{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:16px;counter-reset:nx}
.next li{display:grid;grid-template-columns:32px 1fr;gap:12px;counter-increment:nx}
.next li::before{content:counter(nx);width:32px;height:32px;border-radius:50%;background:var(--tile-2);display:grid;place-items:center;font-family:var(--display);font-weight:700;color:var(--accent)}
.next b{display:block}
.next span{color:var(--muted);font-size:15px}
.direct{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;font-size:15px}
.preview-note{font-size:13px;color:var(--warn-fg);background:var(--warn-bg);border-radius:10px;padding:10px 12px;margin-top:14px}

/* Menu déroulant */
.has-sub{position:relative}
.subnav{position:absolute;top:100%;left:-16px;padding-top:14px;display:none}
.subnav ul{display:flex!important;flex-direction:column;gap:2px!important;list-style:none;margin:0!important;background:var(--tile);border:1px solid var(--line);border-radius:16px;padding:8px!important;min-width:230px;box-shadow:0 18px 40px rgba(7,26,50,.14)}
.subnav a{display:block;padding:9px 12px!important;border-radius:10px;font-size:14px!important;opacity:1!important}
.subnav a:hover{background:var(--tile-2)}
@media (min-width:901px){.has-sub:hover .subnav,.has-sub:focus-within .subnav{display:block}}
@media (max-width:900px){.nav.open .subnav{display:block;position:static;padding:0 0 6px 14px}.nav.open .subnav ul{background:none;border:0;box-shadow:none;padding:0!important;min-width:0}.nav.open .subnav a{font-size:19px!important;padding:6px 0!important;font-family:var(--body)!important;font-weight:500!important;color:var(--muted)}}

/* Bouton contact flottant */
.fab{position:fixed;z-index:40;right:max(16px,calc(env(safe-area-inset-right,0px) + 12px));bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 12px));display:flex;align-items:center;gap:8px;background:var(--fg);color:var(--bg);text-decoration:none;font-weight:600;font-size:15px;padding:12px 18px;border-radius:999px;box-shadow:0 10px 30px rgba(7,26,50,.25);transition:transform .3s var(--ease),opacity .3s}
.fab svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fab:hover{transform:translateY(-2px)}
.fab[hidden]{display:none}


.steps-v.light li{background:var(--tile-2)}
.steps-v.light li::before{background:var(--accent);color:var(--accent-ink)}
.steps-v.light h3{color:var(--fg);font-size:17px}
.ticks.no li::before{content:"–";color:var(--navy-muted)}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
@media (max-width:760px){.calc-grid{grid-template-columns:1fr}}
.field.slide{margin-top:18px}
.field.slide label{display:flex;justify-content:space-between;gap:10px}
.field.slide output{font-family:var(--display);color:var(--accent);font-variant-numeric:tabular-nums}
.field.slide input{accent-color:var(--accent);padding:0;border:0;background:none;height:30px}
.calc-out{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calc-out div{background:var(--navy);color:var(--navy-fg);border-radius:20px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:130px}
.calc-out b{font-family:var(--display);font-size:clamp(34px,5vw,48px);line-height:1;font-variant-numeric:tabular-nums}
.calc-out span{color:var(--navy-muted);font-size:14px}
.legal-text{max-width:760px}
.legal-text h2{font-size:22px;margin:30px 0 10px}
.legal-text h2:first-child{margin-top:0}
.legal-text p{color:var(--muted);line-height:1.6}
.legal-text a{color:var(--accent)}
.legal-text dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:16px 0 0}
.legal-text dt{font-weight:600}
.legal-text dd{margin:0;color:var(--muted)}
@media (max-width:480px){.legal-text dl{grid-template-columns:1fr}.legal-text dd{margin-bottom:8px}}
.more3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px;text-align:left}
.more3 a{display:flex;flex-direction:column;gap:8px;text-decoration:none;background:var(--tile-2);border-radius:20px;padding:24px;transition:transform .3s var(--ease)}
.more3 a:hover{transform:translateY(-3px)}
.more3 b{font-family:var(--display);font-size:22px}
.more3 span{color:var(--muted);font-size:15px}
.more3 i{font-style:normal;color:var(--accent);font-weight:600;margin-top:auto}
@media (max-width:760px){.more3{grid-template-columns:1fr}}
.logo-svg{height:22px;width:auto;display:block}
footer .logo-svg{height:20px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}