
/* Concept : site d'un cabinet d'outils, trois portes (Famille, Frontalier, Pro) autour d'un même agent. Bleu alpin sobre, un accent unique. */
:root{--bg:#f4f7fa;--surface:#fff;--ink:#0e2438;--muted:#556677;--line:#d9e2ea;--accent:#3a4fd6;--accent-ink:#fff;--soft:#e9ecfb;--deep:#071433;--deep-ink:#e8ecff;--good:#17794a;
--f-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;--f-body:'Instrument Sans','Segoe UI',system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b1722;--surface:#122434;--ink:#e6eef6;--muted:#93a6b8;--line:#25394c;--accent:#8aa4ff;--accent-ink:#071433;--soft:#1a2750;--deep:#050d22;--deep-ink:#e6eef6;--good:#4cc790;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0b1722;--surface:#122434;--ink:#e6eef6;--muted:#93a6b8;--line:#25394c;--accent:#8aa4ff;--accent-ink:#071433;--soft:#1a2750;--deep:#050d22;--deep-ink:#e6eef6;--good:#4cc790;color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--f-body)}
.in{max-width:1080px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
nav{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between;padding-block:16px}
.logo{font:700 19px var(--f-display);letter-spacing:-.01em}.logo span{color:var(--accent)}
nav ul{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:0;padding:0;font-size:15px}
nav a{color:var(--ink);text-decoration:none}nav a:hover{color:var(--accent)}
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);font:600 15px var(--f-body);border-radius:8px;padding:11px 18px;text-decoration:none}
.btn.alt{background:transparent;color:var(--ink);border:1px solid var(--line)}
.hero{padding-block:44px 36px}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
h1{font:700 clamp(32px,5.4vw,56px)/1.04 var(--f-display);margin:10px 0 16px;letter-spacing:-.015em;max-width:18ch;text-wrap:balance}
.lead{font-size:18px;color:var(--muted);max-width:56ch;margin:0 0 24px}
.cta{display:flex;flex-wrap:wrap;gap:10px}
h2{font:700 clamp(24px,3.4vw,34px)/1.12 var(--f-display);margin:0 0 10px;letter-spacing:-.01em;text-wrap:balance}
section{padding-block:36px}
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
@media(max-width:820px){.doors,.two,.steps,.prices{grid-template-columns:minmax(0,1fr)!important}}
.door{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:10px}
.door h3{font:700 21px var(--f-display);margin:0}
.door p{margin:0;color:var(--muted)}
.door ul{margin:0;padding-left:18px;color:var(--ink);font-size:15px}
.door a.more{margin-top:auto;color:var(--accent);font-weight:600;text-decoration:none}
.tag{font-size:12px;font-weight:600;color:var(--accent);background:var(--soft);padding:3px 9px;border-radius:99px;align-self:flex-start}
.band{background:var(--deep);color:var(--deep-ink)}
.band .lead{color:#b9cadb}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
.steps div{border-top:1px solid #36516b;padding-top:12px}
.steps b{display:block;font:600 17px var(--f-display);margin-bottom:4px}
.steps span{color:#b9cadb;font-size:15px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:center}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px}
.big{font:700 34px var(--f-display);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.price{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px}
.price.hl{border-color:var(--accent)}
.price h3{font:700 18px var(--f-display);margin:0 0 4px}
.price .p{font:700 26px var(--f-display);margin:6px 0}
.price ul{padding-left:18px;margin:8px 0 0;color:var(--muted);font-size:15px}
details{border-top:1px solid var(--line);padding:14px 0}
summary{cursor:pointer;font-weight:600}
details p{margin:8px 0 0;color:var(--muted);max-width:70ch}
footer{background:var(--deep);color:var(--deep-ink);padding-block:28px;margin-top:20px;font-size:14px}
footer a{color:#9dc0ff}
.fl{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:12px}

.top{background:var(--deep);color:#e8ecff;position:relative;overflow:hidden}
.top svg.flow{position:absolute;right:0;top:0;height:100%;width:70%;min-width:520px;opacity:.95;pointer-events:none}
.top nav{position:relative}
.top nav a{color:#dbe3ff}.top nav a:hover{color:#fff}
.chip{background:#fff;border-radius:10px;padding:4px 10px;display:inline-flex;align-items:center}
.chip img{height:92px;width:auto;display:block}
.top .hero{position:relative;padding-block:40px 64px}
.top .eyebrow{color:#9db2ff}
.top h1{color:#fff;max-width:17ch}
.top .lead{color:#b8c6f5}
.top .btn.alt{color:#fff;border-color:#3b4f8f}
.top .btn{background:#3f6bff;color:#fff}.top .btn.alt{background:transparent}

.hero{padding-block:36px 72px}
.top h1{max-width:16ch}
.top .lead{max-width:40ch}
.nestor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;padding-block:72px}
@media(max-width:820px){.nestor{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:48px}}
.chat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}
.msg{display:flex;gap:10px;align-items:flex-start}
.av{flex:none;width:32px;height:32px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;font:700 13px var(--f-display)}
.bub{background:var(--soft);border-radius:4px 12px 12px 12px;padding:10px 12px;font-size:15px;line-height:1.45}
.bub small{display:block;color:var(--muted);font-size:12px;margin-bottom:2px}
.spaces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-bottom:72px}
@media(max-width:820px){.spaces{grid-template-columns:minmax(0,1fr)}}
.sp{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;text-decoration:none;color:var(--ink);display:block}
.sp h3{font:700 22px var(--f-display);margin:0 0 4px}.sp p{margin:0;color:var(--muted)}
.sp .go{display:block;margin-top:14px;color:var(--accent);font-weight:600}
.tool{background:var(--soft);border-radius:14px;padding:32px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;margin-bottom:72px}
.tool h2{margin:0}
footer{margin-top:0}


nav ul a.cur{font-weight:600}.top nav a.cur{color:#fff;text-decoration:underline;text-underline-offset:6px}
.top.small .hero{padding-block:24px 40px}.top.small .hero h1{font-size:clamp(28px,4.4vw,44px);max-width:22ch}
.assets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.assets div{padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.assets div:nth-child(3n){border-right:0}.assets div:nth-last-child(-n+3){border-bottom:0}
@media(max-width:820px){.assets{grid-template-columns:minmax(0,1fr)}.assets div{border-right:0!important;border-bottom:1px solid var(--line)!important}.assets div:last-child{border-bottom:0!important}}
.assets b{display:block;font:700 18px var(--f-display);margin-bottom:4px}.assets span{color:var(--muted);font-size:15px}
.num{font:700 13px var(--f-display);color:var(--accent);letter-spacing:.08em}
.offer{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
@media(max-width:820px){.offer{grid-template-columns:minmax(0,1fr)}}
.offer ul{padding-left:18px;margin:12px 0 0;color:var(--muted)}
form.f{display:grid;gap:12px}
.f label{font-size:14px;font-weight:600;display:grid;gap:5px}
.f input,.f select,.f textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.f .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:560px){.f .row{grid-template-columns:minmax(0,1fr)}}
.f .chk{display:flex;flex-wrap:wrap;gap:8px 16px;font-weight:400}.f .chk label{display:flex;align-items:center;gap:6px;font-weight:400}.f .chk input{width:auto}
.f .cons{display:flex;gap:8px;align-items:flex-start;font-weight:400;font-size:13px;color:var(--muted)}.f .cons input{width:auto;margin-top:3px}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.f button{border:0;cursor:pointer;justify-self:start}
.ok{display:none;background:var(--soft);border-radius:8px;padding:12px 14px;font-weight:600}.err{display:none;color:#b3261e;font-size:14px}
.web{display:grid;gap:14px}
.w{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;align-items:center}
@media(max-width:620px){.w{grid-template-columns:minmax(0,1fr)}}
.w h3{font:700 19px var(--f-display);margin:0}.w .when{color:var(--muted);font-size:14px}
.cnt{text-align:right}.cnt b{font:700 30px var(--f-display);font-variant-numeric:tabular-nums;display:block;line-height:1}.cnt span{font-size:13px;color:var(--muted)}
.bar{height:5px;background:var(--line);border-radius:9px;overflow:hidden;grid-column:1/-1}.bar i{display:block;height:100%;background:var(--accent)}
.bar.low i{background:#c2571a}
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:820px){.tools{grid-template-columns:minmax(0,1fr)}}
.tl{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:8px}
.tl h3{font:700 21px var(--f-display);margin:0}.tl p{margin:0;color:var(--muted)}
.tl .st{font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;align-self:flex-start;background:var(--soft);color:var(--accent)}
.tl .st.soon{background:var(--line);color:var(--muted)}
.tl .btn{align-self:flex-start;margin-top:auto}
.tl .btn.off{background:var(--line);color:var(--muted);pointer-events:none}
.sec{padding-block:48px}
.rule{color:var(--muted);font-size:13px;max-width:70ch}

/* décor : étoiles, constellation, filets */
.top::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;
background-image:
radial-gradient(4.7px 4.7px at 6% 22%,#fff 45%,transparent 60%),radial-gradient(3.5px 3.5px at 14% 68%,#cfe0ff 45%,transparent 60%),
radial-gradient(4.3px 4.3px at 23% 36%,#fff 45%,transparent 60%),radial-gradient(3.5px 3.5px at 31% 82%,#9db2ff 45%,transparent 60%),
radial-gradient(5.1px 5.1px at 41% 14%,#fff 45%,transparent 60%),radial-gradient(3.5px 3.5px at 47% 58%,#cfe0ff 45%,transparent 60%),
radial-gradient(3.9px 3.9px at 56% 30%,#fff 45%,transparent 60%),radial-gradient(3.5px 3.5px at 63% 76%,#9db2ff 45%,transparent 60%),
radial-gradient(4.7px 4.7px at 72% 12%,#fff 45%,transparent 60%),radial-gradient(3.5px 3.5px at 79% 52%,#cfe0ff 45%,transparent 60%),
radial-gradient(4.3px 4.3px at 88% 26%,#fff 45%,transparent 60%),radial-gradient(3.5px 3.5px at 93% 70%,#9db2ff 45%,transparent 60%),
radial-gradient(3.5px 3.5px at 36% 44%,#fff 45%,transparent 60%),radial-gradient(3.9px 3.9px at 68% 90%,#fff 45%,transparent 60%),
radial-gradient(3.5px 3.5px at 97% 8%,#cfe0ff 45%,transparent 60%),radial-gradient(3.5px 3.5px at 9% 90%,#fff 45%,transparent 60%)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#3f6bff 30%,#8aa4ff 60%,transparent)}

@keyframes tw{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:no-preference){.top::before{animation:tw 6s ease-in-out infinite}}
h2::after{content:"";display:block;width:28px;height:3px;border-radius:3px;background:var(--accent);margin-top:10px;opacity:.85}
.tool h2::after,.band h2::after{display:none}
.card,.door,.sp,.tl,.w,.price{box-shadow:0 1px 2px rgba(7,20,51,.04),0 8px 24px -14px rgba(7,20,51,.18)}
.sp,.tl,.w{transition:transform .2s,border-color .2s}.sp:hover,.tl:hover,.w:hover{transform:translateY(-2px);border-color:var(--accent)}
@media(prefers-reduced-motion:reduce){.sp,.tl,.w{transition:none}.sp:hover,.tl:hover,.w:hover{transform:none}}
.tool{position:relative;overflow:hidden}
.tool::after{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;border-radius:50%;border:1px solid var(--accent);opacity:.18;box-shadow:0 0 0 22px transparent,0 0 0 23px rgba(58,79,214,.14),0 0 0 48px transparent,0 0 0 49px rgba(58,79,214,.08);pointer-events:none}
.assets .num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--soft);margin-bottom:10px}
.sec{background-image:radial-gradient(var(--line) 1px,transparent 1.2px);background-size:22px 22px;background-position:0 0}

.top .hero::before{content:"";display:block;width:36px;height:3px;border-radius:3px;background:#3f6bff;margin-bottom:14px}
.top nav a.cur{color:#fff;text-decoration:underline;text-underline-offset:6px;font-weight:600}
.lst{display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.lst li{padding-left:22px;position:relative;color:var(--ink)}
.lst li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--accent)}
.legal{max-width:780px}.legal h2{font-size:22px;margin-top:28px}.legal p,.legal li{color:var(--muted)}
.todo{background:#fff4d6;color:#6b4b00;padding:0 4px;border-radius:3px}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:820px){.cols3{grid-template-columns:minmax(0,1fr)}}

.hubwrap{padding-block:64px 24px}
.hubhead{text-align:center;margin-bottom:12px}.hubhead h2::after{margin-inline:auto}
.hub{position:relative;max-width:860px;margin:0 auto;aspect-ratio:860/500}
.hub .orb{position:absolute;inset:0;width:100%;height:100%}
.hub .orb ellipse{fill:none;stroke:var(--accent);stroke-opacity:.28;stroke-dasharray:3 7;vector-effect:non-scaling-stroke;stroke-width:1.4}
.hub .orb .o2{stroke-opacity:.16}.hub .orb .ln line{stroke:var(--accent);stroke-opacity:.22;vector-effect:non-scaling-stroke}
.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#1d3aa8,#071433 70%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;box-shadow:0 0 0 10px rgba(63,107,255,.10),0 0 0 22px rgba(63,107,255,.06),0 20px 50px -18px rgba(7,20,51,.6)}
.core svg{margin-top:-6px;filter:drop-shadow(0 4px 10px rgba(63,107,255,.6))}
.core b{font:700 19px var(--f-display);margin-top:-2px}.core small{font:600 11px var(--f-body);letter-spacing:.18em;color:#9db2ff}
.halo{position:absolute;inset:-34px;border-radius:50%;border:1px solid rgba(63,107,255,.25)}
.nd{position:absolute;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:8px 16px;font-size:14px;font-weight:600;text-align:center;box-shadow:0 8px 22px -14px rgba(7,20,51,.35);text-decoration:none;color:var(--ink);white-space:nowrap}
.nd.sp1{border-radius:16px;padding:12px 18px;border-color:var(--accent);min-width:150px}
.nd.sp1 b{display:block;font:700 17px var(--f-display);color:var(--accent)}.nd.sp1 span{display:block;font-size:12.5px;font-weight:400;color:var(--muted)}
a.nd.sp1{transition:transform .2s,box-shadow .2s}a.nd.sp1:hover{transform:translate(-50%,calc(-50% - 3px))}
.nd.cp{background:var(--soft);border-color:transparent;color:var(--accent)}
.gains{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;list-style:none;margin:8px 0 0;padding:0;color:var(--ink);font-weight:600;font-size:15px}
.gains li{display:flex;align-items:center;gap:8px}.gains i{width:8px;height:8px;border-radius:50%;background:#3f6bff;box-shadow:0 0 0 4px rgba(63,107,255,.18)}
.hubm{display:none}
@media(max-width:760px){.hub{display:none}.hubm{display:block}.hubm .g{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:18px}.hubm .nd{position:static;transform:none}.hubm .gt{text-align:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:18px 0 10px}.hubm .nd.sp1{flex:1 1 100%}.gains{margin-top:4px}}
@media(prefers-reduced-motion:no-preference){.halo{animation:pls 4s ease-in-out infinite}@keyframes pls{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:.4}}}
.gains .shield{color:var(--accent)}.gains .shield svg{flex:none}
.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}@media(max-width:820px){.modes{grid-template-columns:minmax(0,1fr)}}.modes h3{font:700 21px var(--f-display);margin:10px 0 6px}.modes .local{border-color:var(--accent)}
/* accueil compact : le schéma Nestor visible sans défiler */
.top:not(.small) .hero{padding-block:8px 28px}
.top:not(.small) .hero h1{font-size:clamp(28px,3.6vw,42px);max-width:26ch;margin-bottom:10px}
.top:not(.small) .hero .lead{font-size:16px;margin-bottom:16px}
.top:not(.small) .chip img{height:72px}
.hubwrap{padding-block:22px 12px}
.hubhead{margin-bottom:0}.hubhead .eyebrow{display:none}.hubhead h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:2px}.hubhead p{margin:0}
.hub{aspect-ratio:860/440}
.top:not(.small) .hero{padding-block:0 18px}.top:not(.small) .hero::before{display:none}
.top:not(.small) .hero .cta{gap:8px}
.hubwrap{padding-block:14px 8px}.hubhead p{display:none}
.hub{aspect-ratio:860/390;margin-top:-6px}
.core{width:132px;height:132px}.core svg{width:52px;height:52px}
.assets .ill{display:block;margin:-4px 0 6px -6px}

/* navigation : onglet Accueil + menu déroulant */
nav ul{align-items:center}
.dd{position:relative}
.dd>a{display:inline-flex;align-items:center;gap:6px}
.dd>a svg{transition:transform .2s}
.menu{position:absolute;left:-14px;top:100%;min-width:260px;padding:12px 8px 8px;display:none;z-index:30}
.menu::before{content:"";position:absolute;inset:6px 0 0 0;background:#fff;border-radius:12px;box-shadow:0 18px 40px -16px rgba(7,20,51,.5);border:1px solid var(--line)}
.dd:hover .menu,.dd:focus-within .menu,.dd.open .menu{display:block}
.dd:hover>a svg,.dd.open>a svg{transform:rotate(180deg)}
.top nav .menu a{position:relative;display:block;color:var(--ink);padding:9px 12px;border-radius:8px;font-weight:600}
.top nav .menu a span{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}
.top nav .menu a:hover,.top nav .menu a.cur{background:var(--soft);color:var(--accent);text-decoration:none}
nav ul a.cur{font-weight:600}
/* autres espaces dans le bandeau */
.top .hero{position:relative}
.others{position:absolute;right:0;bottom:30px;display:flex;gap:12px;align-items:stretch}
.others .oh{position:absolute;top:-22px;left:0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9db2ff;font-weight:600}
.others a{display:block;min-width:190px;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(157,178,255,.35);color:#fff;text-decoration:none;backdrop-filter:blur(4px);transition:transform .2s,background .2s,border-color .2s}
.others a:hover{background:rgba(255,255,255,.14);border-color:#8aa4ff;transform:translateY(-2px)}
.others a b{display:block;font:700 17px var(--f-display)}.others a span{display:block;font-size:12.5px;color:#b8c6f5;margin-top:2px}
.others a::after{content:"→";float:right;margin-top:-34px;color:#8aa4ff}
@media(max-width:900px){.others{position:static;margin-top:22px;flex-wrap:wrap}.others .oh{position:static;width:100%}.others a{flex:1 1 150px;min-width:0}}
/* illustrations de bandeau */
.heroart{position:absolute;right:0;bottom:6px;width:min(340px,34vw);height:auto;opacity:.95;pointer-events:none;filter:drop-shadow(0 12px 30px rgba(63,107,255,.35))}
@media(max-width:820px){.heroart{display:none}}
@media(prefers-reduced-motion:no-preference){.heroart{animation:flt 6s ease-in-out infinite}@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}}
/* parcours en 3 étapes */
.flow3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:28px;position:relative}
.flow3 div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;position:relative;box-shadow:0 1px 2px rgba(7,20,51,.04),0 8px 24px -14px rgba(7,20,51,.18);border-top:3px solid var(--accent)}
.flow3 div:nth-child(2){border-top-color:#6f86ff}.flow3 div:nth-child(3){border-top-color:#ffb454}
.flow3 i{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--soft);color:var(--accent);font:700 14px var(--f-display);font-style:normal;margin-bottom:8px}
.flow3 div:nth-child(3) i{background:#fff1d9;color:#b06a00}
.flow3 b{display:block;font:700 17px var(--f-display)}.flow3 span{color:var(--muted);font-size:14.5px}
@media(max-width:820px){.flow3{grid-template-columns:minmax(0,1fr)}}
.ico3{display:inline-flex;gap:6px;margin-left:10px;vertical-align:middle}.ico3 i{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--soft);color:var(--accent);font:700 12px var(--f-display);font-style:normal}
.card{position:relative;overflow:hidden}.offer .card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#3f6bff,#8aa4ff,#ffb454)}
.w{border-left:4px solid var(--accent)}.w:nth-child(2){border-left-color:#ffb454}
.bar i{background:linear-gradient(90deg,#3f6bff,#8aa4ff)}
@media(prefers-reduced-motion:no-preference){.bar i{animation:grow 1s ease-out}@keyframes grow{from{width:0}}}
.spacesrow{margin-top:36px}.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:14px}@media(max-width:820px){.g3{grid-template-columns:minmax(0,1fr)}}

.heroart.orb{width:min(380px,36vw);right:0;bottom:-6px;filter:drop-shadow(0 10px 28px rgba(63,107,255,.4))}
.orbmini{width:86px;height:auto;flex:none;vertical-align:middle;margin-right:10px}
.fbrand{display:flex;align-items:center;gap:6px;margin-top:10px}
@media(prefers-reduced-motion:reduce){.orb *,.orbmini *{animation:none}}
.hero:has(.others) .heroart.orb{right:430px;width:300px;bottom:0}@media(max-width:1100px){.hero:has(.others) .heroart.orb{display:none}}

.vsec{padding-top:8px}.vh{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}.vh h2{font-size:24px;margin:2px 0 0}.vlinks{display:flex;gap:16px;font-size:14px}.vlinks a{color:var(--accent);font-weight:600;text-decoration:none}.vlinks a:hover{text-decoration:underline}
.vgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}@media(max-width:820px){.vgrid{grid-template-columns:minmax(0,1fr)}}
.vl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}@media(max-width:560px){.vl{grid-template-columns:minmax(0,1fr)}}
.vi{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;font-size:13.5px;line-height:1.35;font-weight:600;transition:transform .2s,box-shadow .2s}.vi:hover{transform:translateY(-2px);box-shadow:0 14px 28px -18px rgba(7,20,51,.45)}
.vi img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:9px;display:block;background:var(--bg)}
.vi.ph{grid-column:1/-1;justify-content:center;align-items:flex-start;padding:22px;background:linear-gradient(135deg,var(--deep),#10286b);color:#fff;border:0;min-height:120px}
.twc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}.twc p{margin:8px 6px 4px;font-size:12.5px;color:var(--muted)}
.tw-box{position:relative;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:linear-gradient(135deg,#1d1445,#3b2a85)}.tw-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tw-go{position:absolute;inset:0;width:100%;border:0;background:none;color:#fff;font:600 14px var(--f-body);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}.tw-go:hover{text-decoration:underline}
.vi.ph b{font:700 22px var(--f-display);color:#fff}.vi.ph span{font-weight:500;color:#cfe0ff}.vi.ph{justify-content:flex-end}
.hero:has(.others) .heroart.orb{width:270px;right:410px}.hero:has(.others) .lead{max-width:34ch}

.top{overflow:visible!important;clip-path:inset(0 0 -460px 0);z-index:30}
.vdemo{margin:18px 0 0}
.vdemo{margin:18px 0 0}
.vdemo{margin:18px 0 0}
.vdemo{margin:18px 0 0}
.vdemo{margin:18px 0 0}
.vdemo{margin:18px 0 0}
.vdemo{margin:18px 0 0}

/*vhome*/
.vrk{top:0;left:0;margin:0;offset-path:none}
.vwrap.vh{display:none}.vhome .vp2{display:none}
@media(min-width:1180px){.vwrap.vh{display:block;position:absolute;box-sizing:border-box;right:290px;bottom:10px;width:306px;padding:46px 48px;z-index:3}.vwrap.vh .vplay{width:42px;height:42px;margin:-21px 0 0 -21px}.vhome{grid-template-columns:1fr;margin-top:28px}.vhome>.vwrap{display:none}.vhome .vp1{display:none}.vhome .vp2{display:block}}
.vthumb{z-index:1}
.vhome{display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:center;margin:44px 0 8px}
.vhome h2{margin:6px 0 10px}.vnote{font-size:13px;color:var(--muted);margin:10px 0 0}
.vwrap{position:relative;box-sizing:border-box;padding:34px 52px}
.vthumb{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#050d22;cursor:pointer;aspect-ratio:16/9;box-shadow:0 10px 30px rgba(5,13,34,.25)}
.vthumb video{width:100%;height:100%;object-fit:cover;display:block}
.vplay{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(255,255,255,.92);color:#0a1f66;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.vthumb:hover .vplay,.vthumb:focus-visible .vplay{transform:scale(1.1)}
.vthumb:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.vrk{position:absolute;left:0;top:0;width:34px;height:18px;margin:-9px 0 0 -17px;offset-rotate:auto;offset-distance:0%;animation:vorb 2.6s linear infinite,vz 2.6s steps(1) infinite;pointer-events:none;z-index:2;filter:drop-shadow(0 0 6px rgba(255,180,84,.7))}
@keyframes vorb{to{offset-distance:100%}}
@keyframes vz{0%{z-index:0}50%{z-index:3}}
@media(prefers-reduced-motion:reduce){.vrk{animation:none;offset-distance:8%}}
@media(max-width:760px){.vhome{grid-template-columns:1fr;gap:6px}.vhome>.vwrap{width:100%;max-width:236px;margin:0 auto;padding:22px 30px}.vhome .vplay{width:44px;height:44px;margin:-22px 0 0 -22px}.vlb{padding:0;background:#000}.vlb .vbox{width:100vw;height:100vh;height:100dvh;aspect-ratio:auto;border-radius:0}.vlb video{object-fit:contain}.vlb button{top:max(10px,env(safe-area-inset-top));padding:11px 14px;font-size:15px}.vlb .vfs{display:none}.vhint{display:block}.vlb .vx{right:10px}}
.vlb{position:fixed;inset:0;z-index:1000;background:rgba(3,8,20,.92);display:flex;align-items:center;justify-content:center;padding:3vh 3vw}
.vlb[hidden]{display:none}
.vlb .vbox{position:relative;width:min(96vw,calc(94vh*16/9));aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.vlb video{width:100%;height:100%;display:block;background:#000}
.vlb button{position:absolute;top:10px;z-index:2;background:rgba(255,255,255,.92);color:#0a1f66;border:0;border-radius:8px;padding:8px 12px;font:600 14px/1 inherit;cursor:pointer}
.vlb .vx{right:10px}.vlb .vfs{right:112px}
.vhint{display:none;position:absolute;left:12px;top:14px;z-index:2;color:#fff;background:rgba(0,0,0,.55);border-radius:8px;padding:8px 10px;font-size:13px;max-width:55%}@media(orientation:landscape){.vhint{display:none!important}}
.vlb button:focus-visible{outline:3px solid #ffb454}

nav a.navdemo{font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.45);border-radius:8px;padding:6px 12px}nav ul{column-gap:14px}nav a.navdemo{padding:5px 10px;font-size:14px;white-space:nowrap}nav a.navdemo:hover{background:rgba(255,255,255,.14)}
.navdemo2{display:inline-flex;gap:10px;flex-wrap:wrap}
