:root{--ink:#d9e3f3;--muted:#9cb0c4;--blue:#58d5fb;--blue-deep:#00a8cc;--line:#2b3947;--paper:#0a141f;--aqua:#0f2b36;--card:rgba(22,32,43,.55);font-family:Assistant,Heebo,Arial,sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.7}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(900px 480px at 50% -12%,rgba(0,168,204,.14),transparent 60%);min-height:100vh}
button,a{font:inherit}
button{cursor:pointer;color:inherit;border:0}
a{color:var(--blue);text-underline-offset:4px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #58d5fb;outline-offset:5px}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(2rem,4vw,3.2rem);line-height:1.3;font-weight:800;letter-spacing:-.035em}
h2{font-size:1.6rem;line-height:1.45}
h3{font-size:1.12rem}
main:focus{outline:none}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.header{background:rgba(10,20,31,.6);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-inner{max-width:1184px;margin:auto;padding:19px 32px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-size:1.35rem;font-weight:800;line-height:1.25}
.brand-sub{display:block;font-size:.85rem;color:var(--muted);font-weight:500;margin-top:3px}
.brand-icon{display:grid;place-items:center;width:44px;height:48px;background:#0f2b3d;color:#58d5fb;border:1px solid #40a5e3;border-radius:12px}
.brand-icon svg{width:31px;height:31px}
.header-actions{display:flex;align-items:center;gap:28px}
.quiet-button{background:none;font-size:.95rem;color:var(--muted);padding:8px 0}
.hotline{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.hotline b{font-size:1.45rem;font-weight:800}
.hotline-label{font-size:.9rem}
.live-label{font-size:.78rem;color:var(--blue);background:var(--aqua);padding:1px 8px;border-radius:6px}
.shell{max-width:1184px;margin:auto;padding:48px 32px 24px}
.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px}
.eyebrow{font-size:.86rem;color:var(--blue);font-weight:600;margin-bottom:10px}
.intro p{font-size:1.12rem;color:var(--muted);margin-top:13px;max-width:640px}
.privacy-note{border-right:2px solid #2b4a5c;padding-right:14px;color:var(--muted);font-size:.9rem;min-width:170px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.choice{background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:18px;padding:25px 25px 22px;display:flex;flex-direction:column;text-align:right;text-decoration:none;color:var(--ink);min-height:213px;position:relative;transition:transform .18s,border-color .18s,box-shadow .18s}
.choice:hover{transform:translateY(-3px);border-color:#40a5e3;box-shadow:0 10px 25px rgba(0,168,204,.15)}
.icon-wrap{display:grid;place-items:center;background:#0f2b3d;color:var(--blue);width:44px;height:44px;border-radius:12px;margin-bottom:17px}
.choice h2{font-size:1.25rem;margin-bottom:6px;line-height:1.4}
.choice p{font-size:.95rem;color:var(--muted);padding-left:14px}
.choice .chevron{position:absolute;left:21px;top:29px;color:#6b8296;width:18px}
.choice.primary-card{background:linear-gradient(135deg,rgba(0,168,204,.28),rgba(10,20,31,.7));color:#fff;border-color:var(--blue-deep)}
.primary-card .icon-wrap{background:#ffffff14;color:#80dae2}
.primary-card p{color:#b9cedb}
.primary-card .chevron{color:#85dbe0}
.urgent-strip{margin-top:26px;display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--line);border-right:4px solid #df976b;border-radius:12px;padding:18px 23px}
.urgent-strip p{font-size:.98rem}
.urgent-strip strong{display:block}
.urgent-strip span{color:var(--muted)}
.urgent-strip a{font-weight:600;white-space:nowrap}
.footer{max-width:1184px;margin:28px auto 0;padding:20px 32px 27px;display:flex;gap:20px;justify-content:space-between;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.text-button{padding:0;background:none;color:var(--blue);text-decoration:underline;text-underline-offset:4px;font-size:inherit}
.journey-shell{max-width:1000px;margin:auto;padding:30px 32px 25px}
.back-link{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:.95rem;text-decoration:none;margin-bottom:24px}
.back-link svg{width:18px}
.section-heading{margin-bottom:26px}
.section-heading h1{font-size:clamp(1.8rem,3.5vw,2.45rem)}
.section-heading p{color:var(--muted);margin-top:10px;font-size:1.05rem}
.selection-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.option{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink);padding:21px 22px;border:1px solid var(--line);background:var(--card);backdrop-filter:blur(12px);border-radius:13px;min-height:91px;transition:border-color .15s,background .15s}
.option:hover{border-color:#40a5e3;background:#16202b}
.service-mark{width:42px;height:42px;border-radius:12px;background:#0f2b3d;display:grid;place-items:center;color:var(--blue);flex-shrink:0;font-weight:800;font-size:1.13rem}
.option h2{font-size:1.08rem;font-weight:600}
.option p{font-size:.9rem;color:var(--muted);margin-top:2px}
.option>.chevron{margin-right:auto;width:17px;color:#6b8296}
.selection-list.single{max-width:760px;grid-template-columns:1fr}
.context-bar{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.9rem;margin-bottom:18px;flex-wrap:wrap}
.context-bar span:not(:last-child)::after{content:'/';display:inline-block;color:#4f6276;margin:0 10px}
.step-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:26px;align-items:start}
.step-card{background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:20px;padding:34px}
.step-meta{display:flex;justify-content:space-between;align-items:center;color:var(--blue);font-size:.85rem;margin-bottom:14px}
.step-meta strong{font-weight:600}
.progress-track{display:flex;gap:5px;direction:rtl}
.progress-track i{width:22px;height:4px;border-radius:8px;background:#22303d}
.progress-track i.done{background:var(--blue)}
.step-card h1{font-size:clamp(1.8rem,3vw,2.35rem);line-height:1.4;margin-bottom:18px}
.step-body{font-size:1.12rem;line-height:1.9;color:#b8c7d9}
.step-body p+p{margin-top:14px}
.action-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}
.action-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(88,213,251,.4);color:var(--blue);padding:11px 18px;border-radius:9px;text-decoration:none;font-weight:600;min-height:48px}
.action-link:hover{background:rgba(88,213,251,.08)}
.action-link.primary{background:linear-gradient(135deg,#58d5fb,#00a8cc);border-color:transparent;color:#003543}
.action-link.primary:hover,.next-button:hover{background:linear-gradient(135deg,#7adfff,#00bfe6)}
.action-link svg{width:17px;height:17px}
.note{font-size:.94rem;background:var(--aqua);color:#a6dfeb;border-radius:10px;padding:14px 17px;margin-top:24px}
.note.important{background:#341a22;color:#ffb4ab;border-right:3px solid #ff8a80}
.step-nav{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding-top:22px;margin-top:30px}
.next-button{display:inline-flex;align-items:center;gap:18px;background:linear-gradient(135deg,#58d5fb,#00a8cc);color:#003543;border-radius:10px;padding:12px 24px;text-decoration:none;font-weight:600;min-height:48px}
.next-button svg{width:18px}
.prev-button{color:var(--muted);text-decoration:none;padding:10px 0;font-size:.95rem}
.sidebar{padding-top:8px}
.sidebar-title{font-size:.88rem;color:var(--muted);margin-bottom:16px}
.outline-list{list-style:none;padding:0;margin:0}
.outline-list li{display:flex;gap:11px;align-items:flex-start;margin-bottom:20px;font-size:.88rem;color:var(--muted);line-height:1.5}
.outline-list li.active{color:var(--ink);font-weight:700}
.outline-list .number{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:#1c2a38;color:#8fa5b8;font-size:.73rem}
.outline-list .active .number{background:var(--blue);color:#003543}
.side-help{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.side-help a{display:block;font-size:1.3rem;font-weight:700;text-decoration:none;color:var(--ink);margin-top:4px}
.step-source{margin-top:24px;font-size:.85rem;color:var(--muted)}
.step-source a{color:var(--muted)}
.example{margin-bottom:23px;padding:17px 21px;background:#13212e;border-right:3px solid #3d5a70;border-radius:8px;color:#a9bccd}
.example small{display:block;color:var(--muted);font-size:.8rem;margin-bottom:4px}
.finish{max-width:690px;margin:auto;text-align:center;background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:20px;padding:45px 35px}
.finish-icon{width:62px;height:62px;background:var(--aqua);color:var(--blue);border-radius:50%;display:grid;place-items:center;margin:0 auto 23px}
.finish-icon svg{width:32px;height:32px}
.finish h1{font-size:2.1rem}
.finish p{color:var(--muted);margin:18px 0 24px;font-size:1.08rem}
.finish .next-button{margin:8px}
.finish small{display:block;color:var(--muted);margin-top:18px;font-size:.85rem}
dialog{border:1px solid var(--line);border-radius:20px;max-width:680px;width:calc(100% - 32px);max-height:86vh;padding:0;color:var(--ink);background:#121c27;box-shadow:0 24px 90px rgba(2,8,15,.7)}
dialog::backdrop{background:rgba(4,10,18,.65);backdrop-filter:blur(3px)}
.dialog-top{padding:24px 26px 17px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#121c27;border-bottom:1px solid var(--line);z-index:1}
.dialog-top h2{font-size:1.35rem}
.close-button{background:#22303d;border-radius:50%;width:35px;height:35px;font-size:1.5rem;line-height:1}
#dialog-body{padding:22px 26px}
.dialog-intro{font-size:.98rem;color:var(--muted);margin-bottom:20px}
.contacts-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.contact{border:1px solid var(--line);border-radius:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;text-decoration:none;color:var(--ink);font-size:.94rem}
.contact b{color:var(--blue);white-space:nowrap;font-weight:600}
.contact:hover{background:#16202b}
.contact-group{margin-top:25px}
.contact-group h3{margin-bottom:12px}
.source-list{padding-right:20px;font-size:.95rem}
.source-list li{margin:10px 0}
.sources-foot{margin-top:25px;font-size:.9rem;color:var(--muted)}
.resource-list{display:grid;gap:12px}
.resource-row{display:flex;justify-content:space-between;align-items:center;gap:20px;border:1px solid var(--line);background:var(--card);backdrop-filter:blur(12px);padding:20px 22px;border-radius:13px;text-decoration:none;color:var(--ink)}
.resource-row p{color:var(--muted);font-size:.95rem;margin-top:4px}
.resource-row svg{color:var(--blue);width:19px}
details{margin-top:18px}
summary{cursor:pointer;color:var(--blue);font-size:.98rem;font-weight:600}
details .resource-list{margin-top:16px}
.skip-link{position:fixed;top:-70px;right:16px;z-index:30;background:#121c27;color:var(--ink);padding:8px 18px;border:1px solid var(--line);border-radius:8px}
.skip-link:focus{top:12px}
.noscript{padding:30px}
.resource-note{font-size:.95rem;color:var(--muted);margin-top:22px}
@media(min-width:1400px){.shell{padding-top:64px}.cards{gap:22px}.choice{min-height:226px}.intro{margin-bottom:38px}}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.privacy-note{display:none}.step-layout{grid-template-columns:1fr}.sidebar{display:none}.journey-shell{max-width:800px}.choice{min-height:205px}}
@media(max-width:600px){.header-inner{padding:15px 20px}.header-actions{gap:14px}.hotline-label,.live-label{display:none}.quiet-button{font-size:.87rem}.brand{font-size:1.13rem}.brand-icon{width:37px;height:40px}.brand-sub{font-size:.75rem}.shell{padding:31px 20px 12px}.intro{margin-bottom:25px}.intro p{font-size:1rem}.cards{gap:12px}.choice{padding:18px 16px;min-height:212px;border-radius:14px}.choice .icon-wrap{width:38px;height:38px;margin-bottom:17px}.choice .chevron{left:12px;top:23px}.choice h2{font-size:1.06rem}.choice p{font-size:.87rem;padding-left:0}.urgent-strip{align-items:flex-start;flex-direction:column;gap:8px;padding:16px 18px;margin-top:20px}.footer{margin-top:22px;padding:20px;display:block;font-size:.81rem}.footer button{display:block;margin-top:8px}.journey-shell{padding:24px 20px 12px}.selection-list{grid-template-columns:1fr}.option{padding:17px 18px;min-height:78px}.section-heading{margin-bottom:22px}.step-card{padding:24px 22px;border-radius:15px}.step-body{font-size:1.05rem}.step-card h1{font-size:1.85rem}.action-links{flex-direction:column}.action-link{font-size:.97rem}.step-nav{gap:12px}.next-button{padding:11px 18px;font-size:.98rem}.context-bar{font-size:.8rem}.contacts-list{grid-template-columns:1fr}.dialog-top,#dialog-body{padding:19px}.dialog-top h2{font-size:1.16rem}.finish{padding:32px 22px}.resource-row{padding:18px}.progress-track i{width:16px}.step-meta{font-size:.8rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* --- Site-shell integration (nav/footer from sonic-cyber.com) --- */
main{padding-top:0}
.icon-wrap i{font-size:1.3rem}
.service-mark i{font-size:1.2rem}
.icon-wrap.brand-cluster{width:auto;min-width:44px;padding:0 12px;display:flex;gap:10px;align-items:center;justify-content:center}
.icon-wrap.brand-cluster i{font-size:1.15rem}
.footer{display:none}

.trust-note{display:flex;align-items:center;gap:14px;background:rgba(0,168,204,.13);border:1px solid #00a8cc;border-radius:12px;padding:16px 20px;margin-bottom:22px;font-size:1.1rem;font-weight:800;color:#cff0fa;line-height:1.6}
.trust-note i{font-size:1.5rem;color:#58d5fb;flex-shrink:0}
@media(max-width:600px){.trust-note{font-size:1rem;padding:14px 16px}}

/* --- Brand & category colors: break the monochrome --- */
.fa-whatsapp{color:#25D366}
.fa-instagram{color:#E1306C}
.fa-facebook-f{color:#1877F2}
.fa-telegram{color:#2AABEE}
.fa-tiktok{color:#69C9D0}
.service-mark .fa-envelope{color:#EA4335}
.fa-file-invoice-dollar{color:#f6c453}
.fa-arrow-pointer{color:#ff9d5c}
.fa-database{color:#b48cf2}
.fa-user-secret{color:#ff7a7a}
.fa-flag{color:#6fdd8b}
.fa-building-columns{color:#f6c453}
.fa-road{color:#ffb020}
.fa-box-open{color:#e8a06a}
.fa-landmark{color:#8fb7ff}
.fa-bolt{color:#ffd84d}
.fa-cloud{color:#9fc6e8}
.fa-wallet{color:#39d0b8}
.fa-comment-dots{color:#9db0c4}

/* --- Language toggle --- */
.lang-toggle{position:fixed;top:92px;inset-inline-end:24px;z-index:40;background:rgba(22,32,43,.7);backdrop-filter:blur(10px);border:1px solid #2b3947;border-radius:999px;padding:7px 16px;font-size:.9rem;font-weight:700;color:#58d5fb;text-decoration:none}
.lang-toggle:hover{border-color:#40a5e3;background:#16202b}
@media(max-width:600px){.lang-toggle{top:88px;inset-inline-end:12px;padding:6px 13px;font-size:.82rem}}
/* --- LTR (Russian) overrides --- */
html[lang=ru] #app,html[lang=ru] dialog,html[lang=ru] .noscript{font-family:Inter,Assistant,Arial,sans-serif}
html[dir=ltr] .choice{text-align:left}
html[dir=ltr] .choice p{padding-left:0;padding-right:14px}
html[dir=ltr] .choice .chevron{left:auto;right:21px}
html[dir=ltr] .privacy-note{border-right:0;padding-right:0;border-left:2px solid #2b4a5c;padding-left:14px}
html[dir=ltr] .urgent-strip{border-right:1px solid var(--line);border-left:4px solid #df976b}
html[dir=ltr] .note.important{border-right:0;border-left:3px solid #ff8a80}
html[dir=ltr] .example{border-right:0;border-left:3px solid #3d5a70}
html[dir=ltr] .source-list{padding-right:0;padding-left:20px}
html[dir=ltr] .option>.chevron{margin-right:0;margin-left:auto}
html[dir=ltr] .progress-track{direction:ltr}
html[dir=ltr] .chevron,html[dir=ltr] .back-link>svg,html[dir=ltr] .next-button>svg{transform:scaleX(-1)}
@media(max-width:600px){html[dir=ltr] .choice .chevron{left:auto;right:12px}}
html[dir=ltr] body{direction:ltr}

/* --- Learn section & quiz --- */
.learn-band{margin-top:44px;border-top:1px solid var(--line);padding-top:34px}
.learn-head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.learn-head h2{font-size:1.5rem}
.quiz-cta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#ff8a00,#e25822);color:#fff;font-weight:800;padding:11px 20px;border-radius:12px;text-decoration:none}
.quiz-cta:hover{filter:brightness(1.08)}
.learn-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.learn-card{background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:14px;padding:18px;color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.learn-card:hover{border-color:#40a5e3;transform:translateY(-2px)}
.learn-card i{font-size:1.35rem;margin-bottom:10px;display:block}
.learn-card h3{font-size:1.05rem;margin-bottom:4px}
.learn-card p{font-size:.88rem;color:var(--muted)}
.learn-h{margin:22px 0 6px;color:var(--ink);font-size:1.15rem}
.learn-video{width:100%;border-radius:14px;margin-top:24px;border:1px solid var(--line);background:#000}
.learn-list{list-style:none;padding:0;margin:24px 0 0}
.learn-list li{display:flex;gap:10px;margin-bottom:11px;color:#b8c7d9;line-height:1.6}
.learn-list i{color:#6fdd8b;margin-top:5px;flex-shrink:0}
.sms-demo{margin-top:26px;background:#0d1723;border:1px solid var(--line);border-radius:14px;padding:18px}
.sms-head{font-size:.85rem;color:var(--muted);margin-bottom:12px}
.sms-bubble{background:#1f2c3a;border-radius:14px 14px 14px 4px;padding:14px 16px;max-width:430px;line-height:1.65;font-size:.98rem;overflow-wrap:break-word}
.sms-flags{list-style:none;margin:15px 0 0;padding:0}
.sms-flags li{display:flex;gap:9px;color:#ffb020;font-size:.92rem;margin-bottom:8px}
.sms-flags i{margin-top:4px;flex-shrink:0}
.quiz-opt{text-align:right;width:100%;cursor:pointer;font:inherit}
.quiz-opt.correct{border-color:#6fdd8b;background:#12271c}
.quiz-opt.wrong{border-color:#ff8a80;background:#341a22}
.quiz-q{font-size:clamp(1.35rem,2.5vw,1.85rem);margin-bottom:20px;line-height:1.5}
.next-button{border:0;cursor:pointer;font:inherit}
@media(max-width:900px){.learn-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.learn-cards{grid-template-columns:1fr}.learn-head{align-items:flex-start;flex-direction:column}}

/* --- Original animated demos (no third-party media) --- */
.demo-box{margin-top:26px;background:#0d1723;border:1px solid var(--line);border-radius:16px;padding:20px}
.demo-title{font-size:.95rem;color:var(--blue);font-weight:700;margin-bottom:18px;display:flex;gap:9px;align-items:center}
.demo-caption{margin-top:16px;font-size:.9rem;color:var(--muted)}
.wifi-scene{display:flex;align-items:stretch;justify-content:space-between;gap:14px}
.wifi-node{flex:1;background:#121c27;border:1px solid var(--line);border-radius:13px;padding:16px;text-align:center;position:relative;overflow:hidden}
.wifi-node i{font-size:1.6rem;color:var(--blue);display:block;margin-bottom:9px}
.wifi-node b{display:block;font-size:.95rem}
.wifi-node span{display:block;font-size:.8rem;color:var(--muted);margin-top:4px}
.wifi-node.fake{border-color:#e25822}
.wifi-node.fake i{color:#ff9d3c}
.wifi-node.fake em{display:block;font-style:normal;color:#ff8a80;font-size:.8rem;margin-top:8px}
.wifi-node.fake em i{display:inline;font-size:.8rem;color:#ff8a80;margin:0 4px 0 0}
.wifi-node .pulse{position:absolute;top:14px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;border:2px solid #ff9d3c;opacity:0;animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(4.5);opacity:0}}
.wifi-phone{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:70px}
.wifi-phone i{font-size:2rem;color:var(--ink)}
.wifi-arrow{font-size:1.6rem;color:#ff9d3c;animation:drift 1.6s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(-8px);opacity:1}}
.call-screen{background:#121c27;border:1px solid var(--line);border-radius:16px;padding:18px;max-width:520px}
.call-head{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}
.call-avatar{width:44px;height:44px;border-radius:50%;background:#0f2b3d;display:grid;place-items:center;color:var(--blue);font-size:1.2rem}
.call-head b{display:block}
.call-head span{font-size:.82rem;color:var(--muted)}
.call-lines .line{opacity:0;animation:lineIn .6s ease forwards;background:#1f2c3a;border-radius:12px 12px 12px 4px;padding:11px 14px;margin-bottom:9px;font-size:.95rem;max-width:92%}
.call-lines .l1{animation-delay:.4s}.call-lines .l2{animation-delay:1.6s}.call-lines .l3{animation-delay:2.8s}.call-lines .l4{animation-delay:4.2s}
@keyframes lineIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.call-stop{background:#341a22!important;border:1px solid #ff8a80;color:#ffb4ab;font-weight:700;max-width:100%!important;border-radius:12px!important}
.call-stop i{margin-left:7px}
@media(max-width:600px){.wifi-scene{flex-direction:column}.wifi-phone{transform:rotate(90deg);min-height:60px}}
@media(prefers-reduced-motion:reduce){.pulse,.wifi-arrow{animation:none;opacity:.8}.call-lines .line{animation:none;opacity:1}}

/* --- Depth: ghost icons + evidence mocks --- */
.choice{overflow:hidden}
.card-ghost{position:absolute;left:-14px;bottom:-24px;font-size:6.4rem;opacity:.055;pointer-events:none;transform:rotate(-14deg);transition:opacity .2s}
.choice:hover .card-ghost,.learn-card:hover .card-ghost{opacity:.11}
.learn-card{position:relative;overflow:hidden}
.learn-card .card-ghost{font-size:4.6rem;bottom:-18px}
.learn-band{background:radial-gradient(620px 260px at 85% 0,rgba(0,168,204,.07),transparent 70%)}
.mail-mock{background:#121c27;border:1px solid var(--line);border-radius:13px;overflow:hidden}
.mail-row{padding:10px 16px;border-bottom:1px solid var(--line);font-size:.92rem;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mail-label{color:var(--muted)}
.mail-bad{color:#ffb020}
.mail-body{padding:16px;font-size:.95rem;line-height:1.8}
.mail-body p{margin:0 0 10px}
.mail-btn{display:inline-block;background:#2563eb;color:#fff;border-radius:8px;padding:9px 22px;font-weight:700;margin:6px 0 12px;cursor:not-allowed}
.mail-link{font-size:.85rem;color:#ff8a80;background:#341a22;border-radius:8px;padding:8px 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mail-flag,.sms-flags b{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:50%;background:#e25822;color:#fff;font-size:.75rem;font-weight:800;flex-shrink:0}
.mail-flag{margin:0 6px;vertical-align:middle}
.sms-flags li{align-items:flex-start}
.login-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.browser-mock{background:#121c27;border:1px solid var(--line);border-radius:13px;overflow:hidden;display:flex;flex-direction:column}
.browser-mock.bad{border-color:#e25822}
.url-bar{display:flex;gap:8px;align-items:center;background:#0d1723;padding:9px 13px;font-size:.82rem;border-bottom:1px solid var(--line)}
.browser-mock.ok .url-bar i{color:#6fdd8b}
.browser-mock.bad .url-bar{color:#ffb020}
.browser-mock.bad .url-bar i{color:#ff9d3c}
.login-form{padding:16px;display:flex;flex-direction:column;gap:9px;flex:1}
.login-form b{margin-bottom:4px;font-size:.95rem}
.fake-input{border:1px solid var(--line);border-radius:8px;padding:8px 12px;color:#5c7186;font-size:.88rem;background:#0d1723}
.fake-btn{border-radius:8px;padding:9px;text-align:center;font-weight:700;background:linear-gradient(135deg,#58d5fb,#00a8cc);color:#003543}
.verdict{padding:10px 14px;font-size:.85rem;display:flex;gap:8px;align-items:flex-start;border-top:1px solid var(--line)}
.verdict i{margin-top:3px}
.ok-v{color:#6fdd8b}
.bad-v{color:#ffb4ab}
@media(max-width:700px){.login-pair{grid-template-columns:1fr}}

/* --- Initiative header/footer (Block 1 §6) --- */
a.quiet-button{text-decoration:none}
.header-actions{flex-wrap:wrap;justify-content:flex-end}
.na-footer{max-width:1184px;margin:64px auto 0;padding:24px 32px 40px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;text-align:center}
.na-footer a,.na-footer .quiet-button{color:var(--muted);font-size:inherit;padding:0}
@media(max-width:640px){.header-inner{padding:14px 16px;flex-direction:column;align-items:flex-start}.header-actions{gap:14px;justify-content:flex-start}}

/* --- Block 2: severity scale --- */
.scale-head{font-size:1.12rem;font-weight:800;margin:30px 0 4px}
.scale-meaning{color:var(--muted);margin-bottom:6px}
.scale{margin:14px 0 8px;display:grid;gap:12px}
.scale-row{border:1px solid var(--line);border-inline-start:5px solid var(--lv);border-radius:14px;padding:16px 18px;background:var(--card);text-align:start}
.scale-row.l1{--lv:#6b8296}.scale-row.l2{--lv:#e3b341}.scale-row.l3{--lv:#f0883e}.scale-row.l4{--lv:#f85149}
.scale-tag{display:inline-block;font-size:.78rem;font-weight:800;color:var(--lv);border:1px solid var(--lv);border-radius:999px;padding:1px 10px;margin-bottom:8px}
.scale-row h3{font-size:1.05rem;margin-bottom:4px}
.scale-row p{color:var(--muted);font-size:.95rem}
.scale-row .scale-todo{color:var(--ink);margin-top:8px}
.scale-row .scale-todo b{color:var(--lv)}
.scale-row a{display:inline-block;margin-top:8px;font-weight:700}

/* --- Block 4a: alerts + examples --- */
.alert-list{display:grid;gap:12px}
.alert-row{border:1px solid var(--line);border-inline-start:5px solid #e3b341;border-radius:14px;padding:14px 18px;background:var(--card);text-align:start}
.alert-row time{font-size:.8rem;font-weight:700;color:var(--muted)}
.alert-row h3{font-size:1.05rem;margin:2px 0 4px}
.alert-row p{color:var(--muted);font-size:.95rem}
.alert-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:.92rem;font-weight:700}
.sms-demo+.sms-demo{margin-top:16px}

/* Block 4b: emergency card */
.card-pick{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.card-pick .quiet-button{border:1px solid var(--line);border-radius:999px;padding:8px 16px;text-decoration:none}
.ecard h1{font-size:1.6rem}
.ecard-main{display:flex;justify-content:space-between;align-items:center;gap:16px;border:2px solid #f85149;border-radius:16px;padding:18px 20px;margin:18px 0;text-decoration:none;color:inherit;font-size:1.15rem;font-weight:700}
.ecard-main b{font-size:1.9rem;white-space:nowrap}
.ecard-lines{display:grid;gap:10px}
.ecard-lines a{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:14px;padding:12px 18px;text-decoration:none;color:inherit}
.ecard-lines b{font-size:1.5rem;min-width:3ch}
.ecard h2{font-size:1.15rem;margin:22px 0 8px}
.ecard-rules{list-style:decimal;padding-inline-start:22px;display:grid;gap:8px;font-size:1.05rem}
.ecard-family{margin-top:20px;font-weight:700}
.ecard-blank{display:inline-block;min-width:180px;border-bottom:2px solid currentColor;height:1.2em;vertical-align:bottom}
.ecard-cta{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;padding:16px 20px;border:1px solid var(--line);border-radius:16px;font-weight:800;text-decoration:none;color:inherit}
@media print{
 .header,.na-footer,.no-print,.skip-link{display:none!important}
 body{background:#fff!important;color:#000!important}
 .ecard{border:2px solid #000!important;background:#fff!important;box-shadow:none!important}
 .ecard,.ecard *{color:#000!important}
 .ecard-main,.ecard-lines a{border-color:#000!important}
}
/* Block 4c: offline badge */
.offline .header::after{content:attr(data-offline);display:block;text-align:center;font-size:.85rem;font-weight:700;padding:6px 12px;background:#e3b341;color:#0a141f}

/* Block 5: tools */
.tool-card{margin-top:22px}
.tool-card h2{font-size:1.45rem;margin:0 0 8px}
.tool-help{color:var(--muted);margin:0 0 18px}
.tool-label{display:block;font-size:.9rem;color:var(--muted);margin:14px 0 6px}
.tool-input{width:100%;font:inherit;color:var(--ink);background:rgba(10,20,31,.6);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-height:48px}
.tool-input:focus{outline:2px solid var(--blue);outline-offset:1px}
select.tool-input{appearance:auto}
.tool-missing{font-size:.88rem;color:var(--muted);margin:6px 0 0}
.tool-row{display:flex;gap:10px;align-items:stretch}
.tool-row .tool-input{flex:1;min-width:0}
.tool-row .next-button{white-space:nowrap}
.tool-out{margin-top:18px}
.tool-result{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:1.08rem;font-weight:600}
.tool-result p{margin:0}
.tool-result .tool-mark{font-size:2.2rem;line-height:1}
.tool-ok{border-color:#6fdd8b;background:#12271c}.tool-ok .tool-mark{color:#6fdd8b}
.tool-bad{border-color:#ff8a80;background:#341a22}.tool-bad .tool-mark{color:#ff8a80}
.tool-warn{background:#e3b341;color:#0a141f;border-color:#e3b341}.tool-warn .tool-mark{color:#0a141f}
.tool-http{font-weight:400;font-size:.95rem;margin-top:6px!important}
.tool-note{font-size:.85rem;color:var(--muted);margin:10px 0 0}
.tool-working{color:var(--muted)}
.tool-final{display:block;font-weight:400}
.tool-final-url{word-break:break-all;color:var(--muted);font-size:.95rem;margin-top:4px!important}
.tool-domain{margin-top:10px!important;font-size:1.1rem}.tool-domain b{font-size:1.6rem;color:var(--blue)}
.tool-next{margin-top:14px;border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;font:inherit;color:var(--ink);background:transparent}
.next-button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:600px){.tool-row{flex-direction:column}.tool-card h2{font-size:1.25rem}}