:root{--navy:#062542;
--deep:#041b35;
--text:#08213e;
--muted:#526987;
--blue:#008dff;
--mint:#55eaff;
--teal:#00cbaa;
--ice:#edf9ff;
--border:#dcebf4;
--max:1340px;
--radius:16px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;
scroll-padding-top:20px}
body{margin:0;
color:var(--text);
background:white;
font-family:Arial,Helvetica,sans-serif;
-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
a{color:inherit;
text-decoration:none}
button{border:0}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #00b89a;
outline-offset:5px}
img{max-width:100%;
display:block}
.wrap{width:calc(100% - 104px);
max-width:var(--max);
margin:auto}
h1,h2,h3,p{margin:0}
h2{letter-spacing:-1px;
font-size:34px;
line-height:1.12}
p{line-height:1.4}
.skip{position:absolute;
left:16px;
top:-80px;
z-index:100;
background:white;
padding:14px}
.skip:focus{top:12px}
.hero-shell{overflow:hidden;
color:white;
background:radial-gradient(ellipse at 70% 60%,#0862a2 0%,#083657 40%,#041b39 80%);
position:relative}
.hero-shell:after{content:"";
position:absolute;
bottom:-100px;
left:-10%;
width:115%;
height:150px;
border-top:2px solid #32bcf3;
border-radius:50%;
transform:rotate(-5deg);
box-shadow:0 -12px 45px #007cc5;
pointer-events:none}
.header{height:76px;
display:flex;
align-items:center;
gap:32px;
position:relative;
z-index:5}
.brand{display:flex;
align-items:center;
gap:8px;
font-size:28px;
font-weight:700;
letter-spacing:-.8px;
white-space:nowrap}
.brand-symbol{width:34px;
height:39px;
flex:none}
.brand small{display:block;
font-size:10px;
line-height:1.2;
letter-spacing:1px;
font-weight:400;
color:#9cc6e5}
.header nav{display:flex;
align-items:center;
gap:22px;
margin-left:auto;
font-size:12px}
.header nav a{padding:12px 0;
white-space:nowrap}
.header nav span{color:#8bc5e6;
margin-left:3px}
.header nav a:hover{color:var(--mint)}
.header-actions{display:flex;
align-items:center;
gap:12px}
.language{color:white;
background:none;
font-size:12px}
.btn{display:inline-flex;
align-items:center;
justify-content:center;
gap:16px;
min-height:48px;
border-radius:8px;
padding:0 22px;
font-size:14px;
font-weight:600;
border:1px solid transparent;
white-space:nowrap;
transition:transform .18s,box-shadow .18s,background .18s}
.btn:hover{transform:translateY(-2px);
box-shadow:0 7px 20px #008dff25}
.btn:active{transform:translateY(0)}
.btn.small{min-height:36px;
font-size:12px;
padding:0 16px}
.mint{color:#003b55;
background:var(--mint)}
.blue{background:linear-gradient(120deg,#009dff,#007afc);
color:white}
.outline{background:#00264235;
color:white;
border-color:#b3e1f5}
.white{background:white;
color:var(--blue)}
.bordered{background:white;
border-color:var(--blue);
color:var(--blue);
min-height:40px;
padding:0 18px;
font-size:12px}
.green-border{border-color:var(--teal);
color:#009d84}
.menu-toggle{display:none;
background:none;
color:white;
font-size:26px}
.hero{min-height:572px;
position:relative;
display:flex;
align-items:flex-start;
padding-top:36px}
.hero-copy{position:relative;
z-index:2;
width:49%;
padding-top:8px;
pointer-events:none}
.hero-copy a,.hero-copy button{pointer-events:auto}
h1{font-size:clamp(44px,4.55vw,66px);
line-height:1.04;
letter-spacing:-2px;
font-weight:750}
h1 em{font-style:normal;
color:#69ecf9}
.hero-copy>p{font-size:23px;
line-height:1.3;
margin:20px 0 18px}
.pills{display:flex;
gap:10px;
flex-wrap:wrap}
.pills a{border:1px solid #65b9db;
border-radius:30px;
background:#0645647a;
padding:10px 13px;
font-size:12px;
transition:background .2s}
.pills a:hover{background:#086a8c}
.hero-buttons{display:flex;
gap:14px;
margin-top:36px}
.hero-visual{position:absolute;
width:65%;
right:-4%;
top:-18px;
aspect-ratio:478/339}
.hero-visual>img{width:100%;
height:100%;
object-fit:contain}
.phone-scan{position:absolute;
left:6.9%;
top:47.7%;
width:15.8%;
height:35%;
transform:rotate(-7deg);
overflow:hidden;
border:1px solid #57f5ff6b;
box-shadow:0 0 20px #09e4f83d}
.phone-scan i{position:absolute;
inset:0 0 auto;
height:3px;
background:#71fff6;
box-shadow:0 0 12px 4px #2bfff3a0;
animation:scan 3.8s ease-in-out infinite}
.phone-scan i:after{content:"";
position:absolute;
bottom:0;
left:0;
right:0;
height:32px;
background:linear-gradient(transparent,#39e8e34d)}
.corner{width:12px;
height:12px;
position:absolute;
border-color:#7cfff2;
border-style:solid}
.tl{top:0;
left:0;
border-width:2px 0 0 2px}
.tr{top:0;
right:0;
border-width:2px 2px 0 0}
.bl{bottom:0;
left:0;
border-width:0 0 2px 2px}
.br{bottom:0;
right:0;
border-width:0 2px 2px 0}
.spark{position:absolute;
width:7px;
height:7px;
background:#c8fffc;
border-radius:50%;
box-shadow:0 0 18px 5px #00bfe7;
animation:twinkle 3s infinite alternate}
.spark-a{left:29%;
top:8%}
.spark-b{right:9%;
top:15%;
animation-delay:1.5s}
.orbit{position:absolute;
width:62%;
height:55%;
left:25%;
top:5%;
border:1px solid #4ee7fd33;
border-radius:50%;
transform:rotate(-15deg);
pointer-events:none;
animation:orbit-glow 5s infinite alternate}
.products{display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
padding-top:28px;
padding-bottom:24px}
.product{position:relative;
min-height:316px;
border:1px solid var(--border);
border-radius:16px;
padding:18px 22px;
overflow:hidden;
background:linear-gradient(150deg,white 40%,#ecf9ff);
isolation:isolate}
.eyebrow{display:inline-block;
background:#b5ebff;
color:#0079be;
font-size:11px;
font-weight:bold;
border-radius:16px;
padding:5px 13px;
letter-spacing:.3px}
.eyebrow.green{background:#aaf0e5;
color:#007b77}
.product h2{font-size:25px;
letter-spacing:-.7px;
margin:16px 0 12px;
position:relative;
z-index:2}
.product p{max-width:60%;
font-size:13px;
position:relative;
z-index:2;
color:var(--muted)}
.product>a{display:inline-block;
color:#0087ff;
font-size:13px;
font-weight:600;
margin-top:16px;
position:relative;
z-index:2}
.product-art{position:absolute;
right:0;
bottom:0;
z-index:1}
.product-art.phone{height:92%;
width:auto;
right:10px}
.product:first-child h2{max-width:62%}
.product-art.laptop{width:66%;
mix-blend-mode:multiply}
.product-art.servers{width:64%;
mix-blend-mode:multiply}
.section-tint{background:linear-gradient(115deg,#e5f7ff,white 45%,#eaf8ff)}
.tools{padding:20px 0 22px}
.section-heading{text-align:center}
.section-heading h2{font-size:31px}
.section-heading p{font-size:15px;
color:var(--muted);
margin-top:9px}
.tool-grid{display:grid;
grid-template-columns:repeat(6,1fr);
gap:12px;
margin-top:28px}
.tool{background:white;
border:1px solid #eff6fa;
border-radius:10px;
min-height:124px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
font-size:13px;
font-weight:600;
color:var(--text);
transition:transform .2s,box-shadow .2s,border .2s}
.tool img{width:52px;
height:52px;
image-rendering:auto}
.tool:hover{transform:translateY(-4px);
border-color:#90dce9;
box-shadow:0 12px 24px #087daf18}
.text-link{display:block;
margin:14px auto 0;
background:none;
color:#0088ff;
font-size:14px;
font-weight:600}
.mobile{margin-top:20px;
padding:24px 0 30px}
.mobile-layout{display:grid;
grid-template-columns:45% 55%;
align-items:center;
gap:20px}
.comparison{position:relative;
overflow:hidden;
cursor:zoom-in}
.comparison img{width:100%;
mix-blend-mode:multiply}
.comparison-sweep{position:absolute;
top:0;
left:54%;
width:2px;
height:100%;
box-shadow:0 0 20px #00cce480;
background:#9ef2fa6b;
animation:compare-glow 4s infinite alternate}
.mobile-copy h2{font-size:44px;
letter-spacing:-1.5px;
margin:12px 0 10px}
.mobile-copy>p{font-size:20px;
color:#35526f;
line-height:1.25}
.scan-features{display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin-top:22px}
.feature-icon{display:flex;
align-items:center;
justify-content:center;
width:51px;
height:51px;
border-radius:10px;
color:white;
font-size:30px;
box-shadow:0 6px 15px #0286bf22}
.cyan{background:linear-gradient(135deg,#00b4c0,#00d8e6)}
.blue-icon{background:linear-gradient(135deg,#3dc3f7,#09a1fa)}
.sky{background:linear-gradient(135deg,#46c8ff,#0eabfc)}
.purple{background:linear-gradient(135deg,#8a9bff,#677cff)}
.scan-features h3{font-size:14px;
line-height:1.15;
margin:10px 0 5px}
.scan-features p{font-size:12px;
color:var(--muted);
max-width:120px;
line-height:1.25}
.enterprise{border-radius:18px;
background:radial-gradient(ellipse at 80% 50%,#12456e,#062642 55%,#071e38);
color:white;
overflow:hidden;
padding:34px 0 26px}
.enterprise-layout{display:grid;
grid-template-columns:47% 53%;
align-items:center;
gap:0}
.enterprise-copy{position:relative;
z-index:2}
.kicker{font-size:14px;
letter-spacing:2px;
color:#49dfff}
.enterprise h2{font-size:44px;
letter-spacing:-1px;
margin:9px 0}
.enterprise .lead{font-size:19px;
color:#dbeeff}
.benefits{list-style:none;
padding:0;
margin:20px 0;
display:grid;
gap:14px}
.benefits li{display:flex;
gap:16px;
align-items:center}
.benefits li>span{flex:none;
width:42px;
height:42px;
border:1px solid #2d8aa9;
border-radius:8px;
background:#0c3e58;
display:grid;
place-items:center;
font-size:25px;
color:#b1fcf5}
.benefits h3{font-size:15px;
margin-bottom:4px}
.benefits p{font-size:12px;
color:#b8d4e9}
.enterprise-buttons{display:flex;
gap:12px}
.enterprise-buttons .btn{font-size:12px;
padding:0 17px}
.enterprise-visual{position:relative;
text-align:center}
.enterprise-visual img{width:100%;
mix-blend-mode:screen}
.enterprise-visual>p{font-size:12px;
color:#b6d2e6;
margin-top:10px}
.server-pulse{position:absolute;
left:22%;
top:38%;
width:5px;
height:5px;
border-radius:50%;
background:#71ffde;
box-shadow:0 0 18px 9px #00eac340;
animation:twinkle 1.8s infinite alternate}
.industries{padding-top:20px;
padding-bottom:14px}
.industries>h2,.deployment>h2{text-align:center;
font-size:29px;
margin-bottom:14px}
.industry-grid{display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px}
.industry-grid article{display:flex;
align-items:center;
border:1px solid var(--border);
border-radius:14px;
overflow:hidden;
background:linear-gradient(110deg,#f3faff,white);
min-height:142px}
.industry-grid img{width:46%;
mix-blend-mode:multiply}
.industry-grid article div{padding:12px 10px 12px 0}
.industry-grid h3{font-size:13px;
margin-bottom:10px}
.industry-grid p{font-size:11px;
line-height:1.35;
color:var(--muted)}
.deployment{padding-top:10px;
padding-bottom:26px}
.deployment-grid{display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px}
.deployment-grid article{border:1px solid var(--border);
border-radius:14px;
position:relative;
padding:18px 20px;
min-height:178px;
overflow:hidden}
.deployment-grid article.selected{background:#edfff9;
border-color:#85e6d4}
.deployment-title{display:flex;
align-items:center;
gap:14px}
.deployment-title>span{background:#d6f6ff;
color:#00a2ec;
width:50px;
height:50px;
border-radius:50%;
display:grid;
place-items:center;
font-size:32px}
.selected .deployment-title>span{background:#b7f9e6;
color:#00a88b}
.deployment-grid h3{font-size:16px}
.deployment-grid p{margin:0 0 12px 64px;
font-size:12px;
line-height:1.35;
color:var(--muted);
position:relative;
z-index:1}
.deployment-grid img{position:absolute;
right:14px;
bottom:10px;
max-width:39%;
height:80%;
width:auto;
object-fit:contain;
mix-blend-mode:multiply}
.deployment-grid article:nth-child(2) img{height:64%}
.deployment-grid .btn{position:relative;
z-index:2}
.resources{display:grid;
grid-template-columns:46% 52%;
gap:2%;
padding-bottom:36px;
align-items:start}
.faq h2{font-size:24px;
margin-bottom:12px}
.faq details{border:1px solid var(--border);
border-radius:9px;
margin:6px 0;
background:white}
.faq summary{cursor:pointer;
list-style:none;
font-size:12px;
font-weight:600;
padding:14px 16px;
display:flex;
justify-content:space-between;
gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';
font-size:16px}
.faq details[open] summary:after{content:'−'}
.faq details p{padding:0 16px 15px;
font-size:13px;
color:var(--muted)}
.cta{padding:60px 42px 42px;
min-height:250px;
border-radius:24px;
background:radial-gradient(circle at 90% 10%,#85e0fa,#12a7df 55%,#138ac3);
color:white;
position:relative;
overflow:hidden}
.cta:after{content:"";
position:absolute;
inset:auto -10px -10px 55%;
height:80px;
background:none right bottom/contain no-repeat;
mix-blend-mode:screen;
pointer-events:none}
.cta h2{font-size:30px;
position:relative;
z-index:1}
.cta p{font-size:18px;
margin:8px 0 20px}
.cta>div{display:flex;
gap:14px;
position:relative;
z-index:1}
.cta .btn{font-size:12px;
padding:0 19px}
.floating-doc{position:absolute;
right:50px;
top:18px;
border:1px solid #ffffff80;
width:45px;
height:60px;
border-radius:4px;
background:#ffffff66;
transform:rotate(18deg);
color:#2c92c2;
display:grid;
place-items:center;
font-size:10px;
animation:float 5s infinite ease-in-out}
footer{color:#dcefff;
background:linear-gradient(120deg,#092b47,#071d35);
padding:34px 0 35px;
position:relative;
overflow:hidden}
footer:after{content:"";
position:absolute;
right:0;
bottom:70px;
width:28%;
height:100px;
background:none right bottom/contain no-repeat;
opacity:.5;
pointer-events:none}
.footer-grid{display:grid;
grid-template-columns:1.5fr repeat(4,1fr);
gap:40px;
position:relative;
z-index:1}
.footer-brand p{font-size:12px;
margin-top:20px}
.footer-grid h3{font-size:13px;
color:white;
margin-bottom:16px}
.footer-grid>div>a:not(.brand),.footer-grid>div>button{display:block;
background:none;
color:#c7deef;
font-size:12px;
padding:0;
line-height:1.7;
text-align:left}
.footer-grid button:hover,.footer-grid a:hover{color:var(--mint)}
.footer-bottom{border-top:1px solid #54748a66;
margin-top:56px;
padding-top:20px;
display:flex;
gap:18px;
align-items:center;
font-size:10px;
position:relative;
z-index:1}
.footer-bottom button{background:none;
color:#afccdf;
font-size:10px;
margin-left:auto}
.footer-bottom a{color:#afccdf}
dialog{border:1px solid var(--border);
border-radius:22px;
padding:38px;
max-width:520px;
width:calc(100% - 36px);
color:var(--text);
box-shadow:0 25px 90px #001c4655}
dialog::backdrop{background:#00152e99;
backdrop-filter:blur(6px)}
dialog h2{font-size:28px;
margin:14px 0}
dialog>p{font-size:15px;
color:var(--muted);
margin-bottom:20px}
.close-dialog{position:absolute;
right:14px;
top:10px;
background:none;
color:var(--muted);
font-size:28px;
width:36px;
height:36px}
form{display:grid;
gap:14px}
label{display:grid;
gap:6px;
font-size:13px;
font-weight:600}
input,select,textarea{width:100%;
padding:11px;
border:1px solid #bcd7e7;
border-radius:7px;
background:#f7fcff;
color:var(--text)}
textarea{resize:vertical}
.form-status{font-size:13px;
color:#007d70}
.motion-paused *{animation-play-state:paused!important;
scroll-behavior:auto!important}
@keyframes scan{0%,100%{top:3%;
opacity:.3}
10%,90%{opacity:1}
50%{top:94%}
}
@keyframes twinkle{from{opacity:.3;
transform:scale(.8)}
to{opacity:1;
transform:scale(1.3)}
}
@keyframes orbit-glow{from{opacity:.2}
to{opacity:.9}
}
@keyframes compare-glow{from{opacity:.1}
to{opacity:.8}
}
@keyframes float{0%,100%{transform:translateY(0) rotate(18deg)}
50%{transform:translateY(-10px) rotate(22deg)}
}
@media(min-width:1600px){.hero{min-height:600px}
.hero-visual{top:-12px}
}
@media(max-width:1199px){.wrap{width:calc(100% - 60px)}
.header{gap:18px;
height:65px}
.header nav{gap:12px;
font-size:11px}
.header-actions{gap:8px}
.header .brand{font-size:24px}
.header .brand-symbol{width:28px}
.header-actions .language{display:none}
.btn.small{padding:0 10px;
font-size:10px}
.hero{min-height:475px}
.hero-copy>p{font-size:20px}
.hero-buttons{gap:8px;
margin-top:25px}
.hero-buttons .btn{padding:0 14px;
font-size:12px}
.hero-visual{top:4px}
.product{min-height:265px;
padding:16px}
.product h2{font-size:21px}
.product p{font-size:11px}
.mobile-copy h2,.enterprise h2{font-size:35px}
.mobile-copy>p{font-size:17px}
.enterprise-buttons .btn{font-size:10px;
padding:0 10px}
.benefits p{font-size:11px}
.industry-grid{gap:8px}
.industry-grid h3{font-size:11px}
.industry-grid p{font-size:10px}
.industry-grid article{min-height:112px}
.deployment-grid article{padding:14px;
min-height:160px}
.deployment-title{gap:8px}
.deployment-title>span{width:40px;
height:40px}
.deployment-grid h3{font-size:13px}
.deployment-grid p{margin-left:48px;
font-size:10px}
.cta{padding:50px 24px 30px}
.cta h2{font-size:25px}
.cta p{font-size:16px}
.footer-grid{gap:20px}
}
@media(max-width:850px){.header nav{display:none;
position:absolute;
top:64px;
left:0;
right:0;
padding:20px;
background:#072f4e;
border:1px solid #2c6a88;
border-radius:12px;
box-shadow:0 20px 40px #00152266}
.header nav.open{display:grid;
gap:6px}
.header nav a{font-size:16px}
.menu-toggle{display:block;
margin-left:auto}
.header-actions .outline{display:none}
.hero{min-height:400px;
padding-top:25px}
h1{font-size:40px}
.hero-copy>p{font-size:17px}
.pills{gap:5px}
.pills a{font-size:9px;
padding:8px}
.hero-buttons .btn{font-size:10px;
padding:0 9px;
min-height:40px}
.hero-visual{top:20px;
right:-5%}
.product{min-height:240px;
padding:12px}
.product h2{font-size:18px}
.product p{font-size:10px}
.product-art.phone{height:80%;
right:0}
.product-art.laptop,.product-art.servers{width:70%}
.section-heading h2{font-size:26px}
.tool{min-height:110px;
font-size:11px}
.tool img{width:42px;
height:42px}
.mobile-copy h2{font-size:30px}
.scan-features{gap:10px}
.scan-features h3{font-size:11px}
.scan-features p{font-size:10px}
.feature-icon{width:40px;
height:40px;
font-size:24px}
.enterprise h2{font-size:32px}
.enterprise .lead{font-size:15px}
.kicker{font-size:11px}
.benefits{gap:10px}
.benefits h3{font-size:12px}
.benefits p{font-size:10px}
.benefits li{gap:10px}
.benefits li>span{width:34px;
height:34px;
font-size:20px}
.enterprise-buttons{gap:6px}
.enterprise-buttons .btn{font-size:9px;
padding:0 8px;
min-height:38px}
.enterprise-visual>p{font-size:10px}
.industries>h2,.deployment>h2{font-size:25px}
.industry-grid h3{font-size:10px}
.industry-grid p{font-size:9px}
.deployment-grid p{margin-left:0;
max-width:65%;
margin-top:8px}
.deployment-title>span{width:33px;
height:33px;
font-size:24px}
.deployment-grid .btn{font-size:10px;
padding:0 9px;
min-height:34px}
.faq h2{font-size:21px}
.faq summary{padding:11px;
font-size:10px}
.cta h2{font-size:22px}
.cta p{font-size:14px}
.cta .btn{font-size:10px;
padding:0 10px;
min-height:38px}
.cta{min-height:220px;
padding:48px 20px 28px}
.footer-grid{gap:15px}
.footer-brand .brand{font-size:23px}
.footer-grid>div>a:not(.brand),.footer-grid>div>button{font-size:10px}
.footer-brand p{font-size:10px}
}

@media(max-width:600px){.wrap{width:calc(100% - 32px)}
.header{height:70px;
gap:10px}
.header-actions .btn{font-size:10px;
min-height:34px;
padding:0 10px}
.header .brand{font-size:23px}
.header .brand small{font-size:8px}
.header .brand-symbol{width:26px}
.hero{display:flex;
flex-direction:column;
min-height:0;
padding-top:25px}
.hero-copy{width:100%}
h1{font-size:clamp(37px,10.4vw,55px);
letter-spacing:-1.5px}
.hero-copy>p{font-size:18px;
margin:18px 0}
.pills a{font-size:10px}
.hero-buttons{margin-top:22px}
.hero-buttons .btn{font-size:11px;
padding:0 12px;
min-height:44px}
.hero-visual{position:relative;
width:115%;
right:auto;
top:auto;
margin:-5px -7% -3px;
align-self:center}
.products{grid-template-columns:1fr;
gap:14px;
padding-top:20px;
padding-bottom:20px}
.product{min-height:250px;
padding:20px}
.product h2{font-size:25px;
margin-top:12px}
.product p{font-size:13px;
max-width:58%}
.product a{font-size:13px}
.product-art.phone{height:94%;
right:10px}
.product-art.laptop{width:55%}
.product-art.servers{width:53%}
.product:nth-child(3) h2{max-width:73%}
.section-heading h2{font-size:28px}
.section-heading p{font-size:13px;
max-width:280px;
margin:9px auto 0}
.tools{padding:25px 0}
.tool-grid{grid-template-columns:repeat(3,1fr);
gap:9px;
margin-top:20px}
.tool{min-height:110px;
font-size:11px}
.tool img{width:42px;
height:42px}
.mobile-layout{display:flex;
flex-direction:column;
gap:14px}
.comparison{width:100%;
max-width:420px}
.mobile-copy{width:100%}
.mobile-copy h2{font-size:34px}
.mobile-copy>p{font-size:18px}
.scan-features{grid-template-columns:repeat(2,1fr);
gap:22px;
margin-top:20px}
.scan-features h3{font-size:14px}
.scan-features p{font-size:12px;
max-width:150px}
.feature-icon{width:45px;
height:45px}
.enterprise{border-radius:16px;
padding:28px 0}
.enterprise-layout{grid-template-columns:1fr}
.enterprise h2{font-size:34px}
.enterprise .lead{font-size:16px}
.benefits h3{font-size:14px}
.benefits p{font-size:12px}
.benefits{gap:17px;
margin:23px 0}
.benefits li>span{width:38px;
height:38px}
.enterprise-buttons{gap:8px}
.enterprise-buttons .btn{font-size:10px;
min-height:44px;
padding:0 11px}
.enterprise-visual{margin-top:22px}
.enterprise-visual>p{font-size:11px}
.industry-grid{grid-template-columns:repeat(2,1fr);
gap:10px}
.industry-grid article{flex-direction:column;
align-items:flex-start;
min-height:210px}
.industry-grid img{width:75%;
height:100px;
object-fit:contain}
.industry-grid article div{padding:8px 13px 15px}
.industry-grid h3{font-size:13px;
margin-bottom:7px}
.industry-grid p{font-size:12px}
.industries>h2,.deployment>h2{font-size:27px;
margin-bottom:18px}
.industries{padding-top:28px;
padding-bottom:20px}
.deployment-grid{grid-template-columns:1fr;
gap:12px}
.deployment-grid article{min-height:185px;
padding:20px}
.deployment-grid h3{font-size:18px}
.deployment-title>span{width:46px;
height:46px;
font-size:28px}
.deployment-grid p{font-size:13px;
margin:0 0 16px 54px}
.deployment-grid img{max-width:39%;
height:85%}
.deployment-grid .btn{font-size:12px;
min-height:38px;
padding:0 14px}
.resources{grid-template-columns:1fr;
gap:24px}
.faq h2{font-size:24px}
.faq summary{font-size:12px;
padding:15px 13px;
min-height:48px}
.cta{min-height:230px;
padding:55px 22px 30px}
.cta h2{font-size:27px}
.cta p{font-size:16px}
.cta .btn{font-size:12px;
min-height:44px}
.footer-grid{grid-template-columns:repeat(2,1fr);
gap:28px 20px}
.footer-brand{grid-column:1/-1}
.footer-grid>div>a:not(.brand),.footer-grid>div>button{font-size:13px;
line-height:2.2}
.footer-grid h3{font-size:14px}
.footer-brand p{font-size:13px}
.footer-bottom{margin-top:30px;
flex-wrap:wrap;
gap:14px}
.footer-bottom button{margin-left:0}
.footer-bottom span{width:100%}
dialog{padding:28px 22px}
dialog h2{font-size:25px}
.desktop-only{display:none}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;
transition:none!important}
}
 
.offscreen *{animation-play-state:paused!important}


/* V3 native layout — independent illustrations and SVG assets. */
.hero-shell{background:#031d3d url('assets/backgrounds/hero.svg') center/100% 100% no-repeat}
.hero-shell:after{display:none}
.hero{min-height:560px}
.hero-copy{width:47%}
.hero-visual{width:82%;
right:-8%;
top:25px;
aspect-ratio:2/1}
.hero-visual>img{mask-image:none;
-webkit-mask-image:none;
object-fit:contain}
.hero-scan-layer{position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none}
.hero-scan-line{stroke:#6cfff3;
stroke-width:4;
filter:drop-shadow(0 0 6px #00fff2);
animation:heroScanV3 3.8s ease-in-out infinite}
.orbit{opacity:.2}
.product-art{object-fit:contain;
mix-blend-mode:normal!important;
clip-path:none!important;
pointer-events:none}
.product-art.phone{height:96%;
width:46%;
right:-5%;
bottom:-3%}
.product-art.laptop{width:71%;
bottom:-2%;
right:-6%}
.product-art.servers{width:67%;
bottom:-2%;
right:-4%}
.product h2,.product p,.product a{position:relative;
z-index:2}
.product p{max-width:62%}
.product:nth-child(1) p{max-width:60%}
.section-tint{background:#ecf8ff url('assets/backgrounds/light.svg') center/cover}
.enterprise{background:#062542 url('assets/backgrounds/enterprise.svg') center/cover}
.enterprise-visual>img{width:100%;
height:auto}
.industry-grid img{mix-blend-mode:normal;
width:46%;
object-fit:contain;
aspect-ratio:1}
.deployment-grid img{mix-blend-mode:normal;
clip-path:none!important;
max-width:46%;
height:92%;
right:-5px;
bottom:0}
.deployment-grid article:nth-child(1)>img{max-width:30%;
right:7px}
.deployment-title>span{display:grid;
place-items:center}
.inline-icon{width:23px;
height:23px;
display:inline-block;
vertical-align:middle}
.pills .inline-icon{width:19px;
height:19px;
filter:brightness(0) invert(1)}
.language{display:flex;
align-items:center;
gap:3px}
.language .inline-icon{width:19px}
.deployment-title .inline-icon{width:36px;
height:36px}
.cta{background:#23addd url('assets/illustrations/mountains.png') center/cover}
.cta:before,.cta:after{display:none}
.cta h2,.cta p,.cta>div{position:relative;
z-index:2}
.cta h2{font-size:30px;
text-shadow:0 1px 4px #167ea955}
.floating-doc{background:none!important;
border:none!important;
box-shadow:none!important;
width:45px;
height:60px;
right:14%;
top:13%;
opacity:.7}
.floating-doc svg{width:100%;
height:100%}
.comparison img{width:100%;
height:auto}
.comparison-sweep{left:54%;
width:40%}
.feature-icon{border-radius:12px}
.benefit-icon{width:42px;
height:42px;
flex:none}
.brand-symbol{object-fit:contain}
footer:before{background:linear-gradient(90deg,#092b47 5%,transparent),url('assets/illustrations/mountains.png') center/cover;
opacity:.18}
.footer-bottom a{font-size:12px}
.motion-paused *,.offscreen *{animation-play-state:paused!important}

@keyframes heroScanV3{0%,100%{transform:translateY(420px);
opacity:.25}
50%{transform:translateY(700px);
opacity:1}
}

@media(min-width:1600px){.hero-visual{top:0}
.hero{min-height:580px}
}

@media(max-width:1199px) and (min-width:851px){.hero{min-height:480px}
.hero-visual{top:55px}
h1{font-size:52px}
.hero-copy>p{font-size:20px}
.hero-buttons{gap:10px}
.hero-buttons .btn{padding:0 13px;
font-size:12px}
}

@media(max-width:850px) and (min-width:601px){.hero{min-height:400px}
.hero-visual{top:90px}
.hero-copy{width:58%}
.hero-copy>p{font-size:17px}
.hero-buttons{flex-wrap:wrap;
gap:8px;
margin-top:18px}
.product-art.phone{width:51%}
.product p{max-width:80%}
}

@media(max-width:600px){.hero{min-height:0;
padding-bottom:16px}
.hero-copy{width:100%}
.hero-visual{position:relative;
top:auto;
right:auto;
width:123%;
margin:16px -16% 0 -7%;
aspect-ratio:2/1}
.hero-buttons{flex-wrap:wrap}
.product-art.phone{width:44%;
right:-2%}
.product-art.laptop{width:62%;
right:-5%}
.product-art.servers{width:59%;
right:-3%}
.product p{max-width:60%}
.industry-grid img{width:100%;
height:125px}
.industry-grid article{min-height:230px}
.deployment-grid img{height:95%;
max-width:43%;
right:0}
.deployment-grid article:nth-child(1)>img{max-width:31%}
.cta{min-height:250px}
.cta h2{font-size:27px;
max-width:80%}
.floating-doc{right:8%}
.hero-copy .pills{gap:7px}
.pills a{padding:8px 10px}
}

@media(prefers-reduced-motion:reduce){.hero-scan-line,.floating-doc,.spark,.server-pulse,.comparison-sweep,.orbit{animation:none!important}
.hero-scan-layer{display:none}
}


.product-art.laptop,.product-art.servers{height:auto}
.industry-grid img{height:auto}
.phone-render>img,.phone-render>svg{position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain}
.phone-render>svg{pointer-events:none}
.card-scan-line{stroke:#6dfff3;
stroke-width:7;
filter:drop-shadow(0 0 8px #1affee);
animation:cardScanV3 4.2s ease-in-out infinite}
@keyframes cardScanV3{0%,100%{transform:translateY(400px);
opacity:.3}
50%{transform:translateY(1040px);
opacity:1}
}
@media(prefers-reduced-motion:reduce){.phone-render>svg{display:none}
}
@media(max-width:600px){.industry-grid img{height:125px}
}


.deployment-title .inline-icon{position:static!important;
width:36px!important;
height:36px!important;
max-width:none!important;
object-fit:contain}
.hero-copy .pills a{display:inline-flex;
align-items:center;
gap:5px}
@media(max-width:600px){.product h2{max-width:90%}
.product:first-child h2{max-width:68%}
.product-art.phone{top:35px;
bottom:auto;
height:90%}
.hero-visual{width:113%;
margin:16px -8% 0 -5%}
}


/* scanmio.com — additions on top of the approved V3 design (base.css): language switch, live scan scene,
   stats, app-only tools, more-features chips, "why" cards, on-premise steps, scroll reveals, the web tools
   app, legal pages and the demo form. Every animation stops under prefers-reduced-motion and off screen. */

/* Header */
.header nav a{transition:color .2s}
.langs{display:flex;align-items:center;gap:6px;font-size:12px;color:#9cc6e5}
.langs .inline-icon{width:18px;height:18px;filter:brightness(0) invert(1);opacity:.75}
.langs a,.lang-mobile a{padding:6px 4px;border-radius:6px;color:#9cc6e5;font-weight:600}
.langs a[aria-current],.lang-mobile a[aria-current]{color:#fff;box-shadow:inset 0 -2px 0 var(--mint)}
.langs a:hover,.lang-mobile a:hover{color:var(--mint)}
.lang-mobile{display:none}
.menu-toggle{width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px;font-size:0}
.menu-toggle span{display:block;width:22px;height:2px;border-radius:2px;background:#fff;transition:transform .25s,opacity .25s}
.menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.header .btn.outline{background:transparent}

/* Hero: headline lines rise in once */
.hero h1 .line{display:block;animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1 .line:nth-child(2){animation-delay:.12s}
.hero h1 .line:nth-child(3){animation-delay:.24s}
.hero-copy>p,.hero-copy .pills,.hero-buttons{animation:rise .9s .36s cubic-bezier(.2,.7,.2,1) both}
.hero-visual{animation:fade-in 1.2s .1s ease both}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

/* Live scan scene on the hero phone: the page outline is traced, its corners lock on, the beam sweeps,
   the status runs through the scan steps, and finished pages fly into the workspace. Decorative only. */
.hero-visual picture,.hero-visual picture img{display:block;width:100%;height:100%;object-fit:contain}
.edge-trace{fill:#3ff4ff10;stroke:#7cfff4;stroke-width:3;stroke-dasharray:900;stroke-dashoffset:900;filter:drop-shadow(0 0 6px #00f0ff);animation:trace 6.4s ease-in-out infinite}
.edge-corners path{fill:none;stroke:#b6fffa;stroke-width:5;stroke-linecap:round;opacity:0;animation:corners 6.4s ease-in-out infinite}
.hero-scan-glow{animation:heroScanGlow 3.8s ease-in-out infinite}
@keyframes trace{0%{stroke-dashoffset:900;opacity:0}8%{opacity:1}30%,80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes corners{0%,22%{opacity:0;transform:scale(1.04)}30%,80%{opacity:1;transform:none}100%{opacity:0}}
@keyframes heroScanGlow{0%,100%{transform:translateY(350px);opacity:0}50%{transform:translateY(630px);opacity:1}}
.edge-corners{transform-box:fill-box;transform-origin:center}
.scan-hud{position:absolute;left:21.5%;top:83%;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:30px;
  background:#03243fd9;border:1px solid #4fe9ff66;box-shadow:0 8px 24px #00142a80,0 0 18px #00e5ff26;color:#d9fbff;font-size:12px;font-weight:600;white-space:nowrap;
  backdrop-filter:blur(4px)}
.hud-dot{width:8px;height:8px;border-radius:50%;background:#5dffb1;box-shadow:0 0 10px #5dffb1;animation:twinkle 1.1s infinite alternate}
.hud-steps{display:grid;min-width:150px}
.hud-steps span{grid-area:1/1;opacity:0;transform:translateY(6px);animation:hud 9.6s infinite;}
/* Step delays and reveal stagger by position (no inline style attributes, so the CSP needs no unsafe-inline). */
.hud-steps span:nth-child(2){animation-delay:2.4s}.hud-steps span:nth-child(3){animation-delay:4.8s}.hud-steps span:nth-child(4){animation-delay:7.2s}
.hud-steps span:last-child{color:#7dffc4}
@keyframes hud{0%{opacity:0;transform:translateY(6px)}4%,22%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-6px)}}
.fly-docs i{position:absolute;left:33%;top:58%;width:22px;height:28px;border-radius:3px;background:linear-gradient(#fff,#d9f3ff);box-shadow:0 4px 12px #00294a66;opacity:0;
  animation:fly 6.4s cubic-bezier(.5,0,.3,1) infinite}
.fly-docs i:before{content:"";position:absolute;inset:7px 4px auto;height:12px;background:repeating-linear-gradient(#7fb9d8 0 1px,transparent 1px 4px)}
.fly-docs i:nth-child(2){animation-delay:2.13s}
.fly-docs i:nth-child(3){animation-delay:4.26s}
@keyframes fly{0%,55%{opacity:0;transform:translate(0,0) rotate(-8deg) scale(.6)}62%{opacity:1}90%{opacity:.9;transform:translate(min(28vw,400px),-110px) rotate(6deg) scale(.9)}100%{opacity:0;transform:translate(min(31vw,440px),-95px) rotate(8deg) scale(.6)}}
.spark-c{left:47%;top:30%;animation-delay:.8s}

/* Product cards */
.product{transition:transform .25s,box-shadow .25s}
.product:hover{transform:translateY(-4px);box-shadow:0 18px 40px #0a5d8f1a}
.product-art picture,.product-art picture img{width:100%;height:auto;display:block}
.product-art.phone picture,.product-art.phone picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.product-art.laptop,.product-art.servers{position:absolute}
.screen-shimmer{position:absolute;left:22%;top:12%;width:56%;height:52%;background:linear-gradient(105deg,transparent 40%,#ffffff70 50%,transparent 60%);background-size:300% 100%;animation:shimmer 4.5s ease-in-out infinite;mix-blend-mode:screen;pointer-events:none}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.led{position:absolute;width:5px;height:5px;border-radius:50%;background:#53f6ff;box-shadow:0 0 8px 2px #19e2ff;animation:twinkle 1.4s infinite alternate}
.led-a{left:34%;top:38%}.led-b{left:52%;top:30%;animation-delay:.5s}.led-c{left:70%;top:42%;animation-delay:.9s}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:6px 0 26px}
.stat{border:1px solid var(--border);border-radius:14px;padding:16px 18px;background:linear-gradient(135deg,#f6fcff,#fff);display:flex;align-items:baseline;gap:10px}
.stat b{font-size:34px;letter-spacing:-1px;background:linear-gradient(120deg,#008dff,#00cbaa);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:14px;color:var(--muted);font-weight:600}

/* Tools on the home page */
a.tool{position:relative;text-align:center;padding:10px}
a.text-link{display:table;margin:16px auto 0}
.tool.app-only small{position:absolute;top:8px;right:8px;font-size:10px;font-weight:700;color:#007b77;background:#d7f7f0;border-radius:10px;padding:2px 7px}

/* Before / after comparison */
.comparison{cursor:default}
.comparison picture img{width:100%;height:auto}
.comparison-sweep{left:6%;width:3px;background:linear-gradient(transparent,#64f4ff,transparent);box-shadow:0 0 22px 4px #00d9ff66;opacity:1;animation:sweep 5s ease-in-out infinite}
@keyframes sweep{0%,100%{left:6%;opacity:0}10%{opacity:1}45%{left:44%;opacity:1}55%{left:52%;opacity:0}}
.cmp-tag{position:absolute;bottom:10%;font-size:12px;font-weight:700;padding:6px 14px;border-radius:20px;box-shadow:0 6px 16px #0b4e7a26}
.cmp-before{left:8%;background:#fff;color:var(--text)}
.cmp-after{left:62%;background:linear-gradient(120deg,#009dff,#007afc);color:#fff}

/* More in the app */
.more-features{margin-top:26px;border:1px solid var(--border);border-radius:18px;background:#ffffffcc;padding:20px 22px}
.more-features h3{font-size:16px;margin-bottom:12px}
.more-features ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.more-features li{font-size:13px;font-weight:600;padding:8px 12px;border-radius:20px;background:#eaf7ff;color:#0a5c8f;border:1px solid #cfe9f8;transition:transform .2s,background .2s}
.more-features li:hover{transform:translateY(-2px);background:#dff4ff}
.store-note{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--muted)}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:#00cbaa;box-shadow:0 0 0 0 #00cbaa80;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #00cbaa80}70%{box-shadow:0 0 0 10px #00cbaa00}100%{box-shadow:0 0 0 0 #00cbaa00}}

/* Why ScanMio */
.why{padding:36px 0 34px}
.kicker.dark{display:block;color:#0090c8;font-size:13px;margin-bottom:8px}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.why-card{border:1px solid var(--border);border-radius:16px;padding:22px;background:linear-gradient(160deg,#fff 50%,#effaff);transition:transform .25s,box-shadow .25s,border-color .25s}
.why-card:hover{transform:translateY(-4px);border-color:#9fdcf0;box-shadow:0 16px 34px #0a6aa01a}
.why-icon{width:52px;height:52px;margin-bottom:14px;filter:drop-shadow(0 8px 14px #0a6aa02e);transition:transform .3s}
.why-card:hover .why-icon{transform:translateY(-3px) rotate(-4deg)}
.why-card h3{font-size:17px;margin-bottom:8px}
.why-card p{font-size:14px;color:var(--muted);line-height:1.45}

/* On-premise */
.enterprise-visual picture img{width:100%;height:auto}
.data-flow{position:absolute;left:8%;right:30%;top:58%;height:2px;background:linear-gradient(90deg,transparent,#3fe8ff55,transparent)}
.data-flow i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:#7ffcff;box-shadow:0 0 12px 3px #00e1ff;animation:packet 3.2s linear infinite}
.data-flow i:nth-child(2){animation-delay:.8s}.data-flow i:nth-child(3){animation-delay:1.6s}.data-flow i:nth-child(4){animation-delay:2.4s}
@keyframes packet{from{left:0;opacity:0}15%{opacity:1}85%{opacity:1}to{left:100%;opacity:0}}
.steps{margin-top:28px;padding-top:24px;border-top:1px solid #ffffff22}
.steps h3{font-size:18px;margin-bottom:16px;color:#dff4ff}
.steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.steps li{display:flex;gap:14px;align-items:flex-start;border:1px solid #3a7ca355;border-radius:14px;padding:16px;background:#0a35556b}
.steps li b{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#29d3ff,#00b89a);color:#022338;font-size:15px}
.steps h4{margin:2px 0 6px;font-size:15px}
.steps p{font-size:13px;color:#b8d4e9}

/* Deployment cards: the device art as <picture> */
.deployment-grid picture img{position:absolute;right:-5px;bottom:0;max-width:46%;height:92%;width:auto;object-fit:contain}
.deployment-grid article:nth-child(1) picture img{max-width:30%;right:7px}
.industry-grid picture{width:46%;flex:none}
.industry-grid picture img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.industry-grid article{transition:transform .25s,box-shadow .25s}
.industry-grid article:hover{transform:translateY(-3px);box-shadow:0 12px 26px #0a5d8f14}
.cta .doc-2{right:24%;top:28%;width:32px;height:44px;animation-delay:1.6s;opacity:.55}

/* Scroll reveals (only with JS, so nothing is hidden without it) */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);}
.js .reveal:nth-child(2){transition-delay:90ms}.js .reveal:nth-child(3){transition-delay:180ms}.js .reveal:nth-child(4){transition-delay:270ms}.js .reveal:nth-child(5){transition-delay:360ms}.js .reveal:nth-child(6){transition-delay:450ms}
.js .reveal.in{opacity:1;transform:none}

/* Demo dialog */
dialog{max-width:560px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{font-size:12px;color:var(--muted)}
.consent a{color:var(--blue);text-decoration:underline}
.form-status{min-height:18px}
.form-status.error{color:#c0282f}
form .btn[disabled]{opacity:.6;cursor:wait;transform:none}
input:focus,select:focus,textarea:focus{outline:2px solid #00b89a;outline-offset:1px;background:#fff}

/* Inner pages: a short navy band */
.tools-shell{padding-bottom:34px}
.tools-head{position:relative;z-index:2;padding-top:24px}
.tools-head h1{font-size:clamp(32px,4vw,50px);letter-spacing:-1.5px}
.tools-head p{margin-top:12px;font-size:17px;color:#cfe8fa;max-width:720px}
.footer-bottom .footer-langs{margin-left:auto;display:flex;gap:12px}
.footer-bottom .footer-langs a{font-size:12px}

/* Web tools app */
.tools-app{padding:28px 0 40px}
.picker{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pick{display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 14px;color:var(--text);transition:transform .2s,border-color .2s,box-shadow .2s}
.pick:hover{transform:translateY(-2px);border-color:#90dce9}
.pick[aria-selected=true]{border-color:#008dff;box-shadow:0 0 0 3px #008dff22;background:#f3fbff}
.pick img{flex:none}
.pick b{display:block;font-size:14px}
.pick small{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.3}
.panel{margin-top:22px;border:1px solid var(--border);border-radius:18px;padding:24px;background:linear-gradient(160deg,#fff 60%,#f1faff);min-height:120px}
.panel:empty{display:none}
.panel h2{font-size:24px;margin-bottom:6px}
.panel .hint{font-size:13px;color:var(--muted)}
.drop{margin-top:16px;border:2px dashed #9fd2ea;border-radius:16px;padding:28px 18px;text-align:center;background:#f7fcff;transition:background .2s,border-color .2s;cursor:pointer}
.drop.over{background:#e6f6ff;border-color:#008dff}
.drop b{font-size:15px}
.drop .linkish{color:var(--blue);text-decoration:underline;background:none;padding:0;font-weight:700}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.files{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.files li{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:#fff;font-size:13px}
.files li .fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files li .fsize{color:var(--muted);font-size:12px}
.files button{background:#eef6fb;border-radius:8px;width:34px;height:34px;color:var(--text);font-size:15px}
.files button:hover{background:#dff0fa}
.opts{display:grid;gap:14px;margin-top:18px}
.opts fieldset{border:0;margin:0;padding:0}
.opts legend,.opts .label{font-size:13px;font-weight:700;margin-bottom:8px}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices label{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px;border:1px solid #cfe3ee;border-radius:20px;padding:8px 12px;background:#fff;cursor:pointer}
.choices input{width:auto;margin:0}
.choices label:has(input:checked){border-color:#008dff;background:#eaf6ff;color:#005fae}
.opts input[type=text],.opts input[type=number]{max-width:320px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;align-items:center}
.progress{margin-top:18px}
.progress .bar{height:8px;border-radius:8px;background:#e3f1f9;overflow:hidden}
.progress .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#00a3ff,#00cbaa);transition:width .3s}
.progress .bar.indeterminate i{width:35%;animation:indet 1.2s ease-in-out infinite}
@keyframes indet{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
.progress p{margin-top:8px;font-size:14px;font-weight:600}
.result{margin-top:18px;padding:16px;border-radius:14px;background:#ecfdf7;border:1px solid #9fe7d2}
.result p{font-size:14px;margin-bottom:10px}
.err{margin-top:14px;padding:12px 14px;border-radius:12px;background:#fff1f1;border:1px solid #f3b9bd;color:#9b1c23;font-size:14px}
.tools-privacy{margin-top:16px;font-size:12px;color:var(--muted)}
.tools-privacy a{color:var(--blue)}

/* Legal */
.legal{padding:30px 0 50px;max-width:860px}
.legal section{margin-bottom:22px}
.legal h2{font-size:21px;margin-bottom:8px}
.legal p{font-size:15px;line-height:1.6;color:#2d4763}

@media(max-width:1199px){.langs{display:none}.why-grid{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){
  .menu-toggle{display:flex}
  .header nav .lang-mobile{display:flex;gap:10px;margin-top:8px;padding-top:10px;border-top:1px solid #2c6a88}
  .header nav .lang-mobile a{font-size:15px}
  .header-actions .outline{display:none}
  .scan-hud{font-size:10px;padding:5px 9px;left:18%}
  .hud-steps{min-width:120px}
  .steps ol{grid-template-columns:1fr}
  .picker{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .why-grid{grid-template-columns:1fr}
  .stats{gap:10px}.stat{padding:12px}.stat b{font-size:26px}.stat span{font-size:12px}
  .scan-hud{top:86%;left:14%}
  .form-row{grid-template-columns:1fr}
  .picker{grid-template-columns:1fr}
  .panel{padding:18px}
  .cmp-tag{font-size:10px;padding:4px 10px}
  .footer-bottom .footer-langs{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .edge-trace,.edge-corners path,.hero-scan-glow,.hud-steps span,.fly-docs i,.screen-shimmer,.led,.data-flow i,.pulse-dot,.comparison-sweep,.hud-dot{animation:none!important}
  .edge-trace{stroke-dashoffset:0}.edge-corners path{opacity:1}.hud-steps span:last-child{opacity:1;transform:none}.fly-docs{display:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .hero h1 .line,.hero-copy>p,.hero-copy .pills,.hero-buttons,.hero-visual{animation:none}
}

/* Touch targets: at least 24 px tall for text links and language switches (WCAG 2.5.8). */
.product>a,a.text-link,.footer-bottom .footer-langs a,.langs a,.lang-mobile a{display:inline-flex;align-items:center;min-height:32px;min-width:32px;justify-content:center}
.footer-bottom .footer-langs a{padding:0 6px}
.tools-privacy a,.consent a{display:inline-block;padding:4px 0}

/* Features: six categories as tabs (all panels shown without JS), cards with the category colour. */
.features{padding:30px 0 34px}
.feature-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:24px 0 18px}
.feature-tabs button{--c:#0a5c8f;display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:24px;background:#fff;border:1px solid #cfe3ee;color:var(--text);font-size:14px;font-weight:700;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.feature-tabs button:hover{border-color:var(--c)}
.feature-tabs button[aria-selected=true]{background:var(--c);border-color:var(--c);color:#fff;box-shadow:0 8px 18px #0a4b7a26}
.feature-tabs .cat-scan{--c:#0aa58f}.feature-tabs .cat-text{--c:#7c4dff}.feature-tabs .cat-edit{--c:#1e7cf2}
.feature-tabs .cat-photo{--c:#e8457a}.feature-tabs .cat-secure{--c:#d17f00}.feature-tabs .cat-organize{--c:#3f51d6}
.cat-title{font-size:18px;margin:22px 0 12px}
.js .cat-title{display:none}
.js .feature-panel[data-hidden]{display:none}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feature-card{position:relative;display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--border);border-radius:16px;background:#ffffffe6;transition:transform .25s,box-shadow .25s,border-color .25s}
.feature-card:hover{transform:translateY(-3px);border-color:#a9dcf0;box-shadow:0 14px 30px #0a6aa01a}
.feature-card img{flex:none;width:48px;height:48px;transition:transform .3s}
.feature-card:hover img{transform:scale(1.08) rotate(-4deg)}
.feature-card h4{font-size:15px;margin:2px 0 5px}
.feature-card p{font-size:13px;color:var(--muted);line-height:1.4}
.web-badge{position:absolute;top:10px;right:10px;font-size:10px;font-weight:700;color:#0b6fb8;background:#e3f2ff;border-radius:10px;padding:3px 8px;min-height:20px}
.web-badge:hover{background:#cfe9ff}
.js .feature-panel.enter .feature-card{animation:card-in .45s cubic-bezier(.2,.7,.2,1) both}
.js .feature-panel.enter .feature-card:nth-child(2){animation-delay:.05s}.js .feature-panel.enter .feature-card:nth-child(3){animation-delay:.1s}
.js .feature-panel.enter .feature-card:nth-child(4){animation-delay:.15s}.js .feature-panel.enter .feature-card:nth-child(5){animation-delay:.2s}
.js .feature-panel.enter .feature-card:nth-child(6){animation-delay:.25s}
@keyframes card-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tab-progress{height:3px;border-radius:3px;background:#dceaf3;max-width:240px;margin:18px auto 0;overflow:hidden}
.tab-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#00a3ff,#00cbaa)}
.tab-progress.run i{animation:tabbar 7s linear forwards}
@keyframes tabbar{to{width:100%}}

/* Web tools band: smaller than the features, as a second way in. */
.web-band{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;margin-top:26px;padding:20px 22px;border-radius:18px;background:linear-gradient(120deg,#062542,#0a4a78);color:#fff}
.web-band-copy{display:flex;gap:14px;align-items:center}
.web-band-copy img{filter:brightness(0) invert(1);opacity:.9}
.web-band h3{font-size:17px}
.web-band p{font-size:13px;color:#bfdcf0;margin-top:3px}
.web-chips{display:flex;flex-wrap:wrap;gap:8px}
.web-chips a{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:18px;background:#ffffff14;border:1px solid #ffffff2e;font-size:12px;font-weight:600;transition:background .2s}
.web-chips a:hover{background:#ffffff26}
.web-chips img{border-radius:6px;background:#fff}
@media(max-width:1199px){.feature-grid{grid-template-columns:repeat(2,1fr)}.web-band{grid-template-columns:1fr}}
@media(max-width:600px){.feature-grid{grid-template-columns:1fr}.feature-tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.feature-tabs button{flex:none}}
@media(prefers-reduced-motion:reduce){.js .feature-panel.enter .feature-card{animation:none}.tab-progress{display:none}}