/* MioSize hero v3 — faithful translation of the approved visual into functioning HTML/CSS.
   Asset-level 3D-style scan and the genuine traced wordmark; no screenshot used as layout. */
:root{--brand-ice:#5CE8FF;--brand-royal:#007BFF}
.topline{height:30px;background:linear-gradient(90deg,#082342,#082948 60%,#092C52);font-size:11px}
.header{border-bottom:1px solid #1464A4;background:#061A31E8}
.nav{min-height:91px}
.brand .miosize-wordmark{width:245px;height:auto;max-height:86px}
.nav nav{gap:30px}
.nav nav a{color:#E7F4FF}
.nav-action{border:1px solid #008CFF;background:#061C35;color:#EAF8FF;border-radius:32px}
.hero-v3{
 max-width:1280px;grid-template-columns:minmax(0,.95fr) minmax(0,1.08fr);
 align-items:center;gap:45px;min-height:675px;padding-top:58px;padding-bottom:85px;
 position:relative;isolation:isolate;
}
.hero-v3:before{
 content:"";position:absolute;left:50%;bottom:-64px;width:100vw;height:270px;
 transform:translateX(-50%);background-image:url('/assets/hero-wave-blue.svg');
 background-repeat:no-repeat;background-position:center bottom;background-size:cover;
 z-index:-1;pointer-events:none;opacity:.95;
}
.hero-v3:after{content:"";z-index:-2;position:absolute;inset:0 -9%;background:radial-gradient(ellipse at 84% 56%,#004B9F66,transparent 52%);pointer-events:none}
.hero-v3 .hero-copy{max-width:585px;position:relative;z-index:2}
.hero-v3 .eyebrow{color:#06D8FF;letter-spacing:.11em;font-size:11px;font-weight:850}
.hero-v3 h1{font-size:clamp(43px,4.1vw,61px);line-height:1.12;letter-spacing:-.053em;margin:26px 0 23px;font-weight:850;max-width:595px}
.hero-v3 h1 em{color:#00ACFF;background:linear-gradient(120deg,#08D9FF,#009CFF 65%,#087EFF);background-clip:text;-webkit-text-fill-color:transparent}
.hero-v3 .hero-copy>p{font-size:16px;line-height:1.66;max-width:510px;color:#CBDCF0}
.hero-v3 .actions{gap:11px;margin:25px 0 26px}
.hero-v3 .btn{padding:15px 21px;font-size:13px;min-height:54px;font-weight:800;border-radius:12px}
.hero-v3 .btn.primary{background:linear-gradient(120deg,#03D5FA,#008AFF);box-shadow:0 12px 26px #0179FF3D}
.hero-v3 .btn.ghost{border-color:#007DC7;background:#061B35B5;color:#F4FAFF}
.hero-v3 .trustline{display:grid;grid-template-columns:repeat(3,max-content);gap:19px;margin-top:19px;color:#E4F6FF;font-size:12px;line-height:1.35}
.hero-v3 .trustline>span{display:flex;align-items:center;gap:11px;white-space:nowrap}
.hero-v3 .trustline i{width:44px;height:44px;display:grid;place-items:center;border:1px solid #0876C6;background:#07264B;color:#02C9FF;border-radius:50%}
.hero-v3 .trustline svg{width:24px;height:24px}
.scan-console-v3{
 position:relative;z-index:3;height:518px;min-height:518px;
 display:flex;flex-direction:column;background:linear-gradient(128deg,#051E3C 0%,#051B35 54%,#021226 100%);
 border:1px solid #128DF2;border-radius:22px;
 box-shadow:0 27px 42px #010B218A,0 0 0 1px #0189FF18,0 2px 30px #087EFF57;
 overflow:visible;
}
.scan-console-v3:before{
 content:"";position:absolute;inset:-4px;z-index:-1;pointer-events:none;
 border-radius:25px;background:linear-gradient(92deg,transparent 15%,#007EFF77 69%,transparent 100%);filter:blur(18px);opacity:.65;
}
.scan-console-v3:after{
 content:"";pointer-events:none;position:absolute;width:48%;height:24px;
 left:23%;bottom:-22px;background:radial-gradient(ellipse,#078CFF80,transparent 72%);filter:blur(11px)
}
.scan-console-v3 .visual-grid{
 inset:0;border-radius:22px;overflow:hidden;
 background-image:linear-gradient(#13B5FF14 1px,transparent 1px),linear-gradient(90deg,#13B5FF14 1px,transparent 1px);
 background-size:24px 24px;mask-image:linear-gradient(to bottom,#000 0%,#000 92%,transparent);
}
.scan-console-v3 .visual-grid:after{background:radial-gradient(ellipse at 46% 53%,#0954AE44,transparent 62%)}
.scan-console-v3 .visual-top{min-height:69px;padding:17px 25px;display:flex;align-items:center;gap:11px;letter-spacing:.11em;color:#CBEAFF;font-size:11px;font-weight:800}
.scan-console-v3 .visual-dot{width:11px;height:11px;background:#00BDFF;box-shadow:0 0 17px #00C8FF}
.scan-console-v3 .alpha-tag{padding:7px 12px;font-size:10px;letter-spacing:.12em;border-color:#148CDE;color:#DDF5FF;background:#071F3D}
.scan-console-v3 .visual-stage{
 flex:1;min-height:0;padding:0 17px 3px;
 display:grid;grid-template-columns:minmax(0,1.07fr) minmax(0,.83fr);gap:6px;align-items:stretch;
}
.scan-console-v3 .scan-foot-area{
 position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;
 height:100%;padding:3px 16px 23px 36px;
}
.scan-console-v3 .scan-foot{
 width:100%;height:100%;max-width:190px;max-height:318px;
 object-fit:contain;filter:drop-shadow(0 0 14px #009FFF90) drop-shadow(0 0 18px #0A53FF5C);
}
.scan-console-v3 .scan-corner{width:18px;height:18px;filter:drop-shadow(0 0 6px #00BFFF66)}
.scan-console-v3 .corner-tl{left:29%;top:11%}
.scan-console-v3 .corner-tr{right:3%;top:11%}
.scan-console-v3 .corner-bl{left:29%;bottom:16%}
.scan-console-v3 .corner-br{right:3%;bottom:16%}
.scan-console-v3 .scan-length-rule{
 position:absolute;left:11%;top:17%;bottom:20%;width:1px;
 background:#07C9FE;box-shadow:0 0 12px #04B1FF78
}
.scan-console-v3 .scan-length-rule:before,.scan-console-v3 .scan-length-rule:after{
 content:"";position:absolute;left:-6px;width:13px;height:1px;background:#18D6FF
}
.scan-console-v3 .scan-length-rule:before{top:0}
.scan-console-v3 .scan-length-rule:after{bottom:0}
.scan-console-v3 .scan-length-label{
 position:absolute;top:46%;left:0;font-size:10px;line-height:1.4;color:#A7E7FF;text-align:left;letter-spacing:0
}
.scan-console-v3 .scan-length-label strong{font-size:12px;color:#75E6FF}
.scan-console-v3 .scan-width-rule{
 position:absolute;left:31%;right:5%;height:1px;background:#00C7FF;bottom:9%;
 box-shadow:0 0 10px #00C7FF88;
}
.scan-console-v3 .scan-width-rule:before,.scan-console-v3 .scan-width-rule:after{
 content:"";position:absolute;top:-7px;width:1px;height:15px;background:#00C7FF
}
.scan-console-v3 .scan-width-rule:before{left:0}
.scan-console-v3 .scan-width-rule:after{right:0}
.scan-console-v3 .scan-width-label{
 position:absolute;left:48%;bottom:2%;transform:translateX(-25%);white-space:nowrap;
 text-align:center;color:#A7E7FF;font-size:10px;line-height:1.22
}
.scan-console-v3 .scan-width-label strong{font-size:12px;color:#59DDFF}
.scan-console-v3 .scan-paper-area{
 display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;
 padding:20px 6px 18px 2px;
}
.scan-console-v3 .paper-reference{
 width:91%;max-width:192px;aspect-ratio:210/297;
 position:relative;display:flex;align-items:center;justify-content:center;
 border:2px dashed #0D9FE9;padding:12px;
 box-shadow:0 0 13px #006BBD2E;
}
.scan-console-v3 .paper-reference .paper{
 width:100%;height:100%;background:linear-gradient(145deg,#EAF5FC,#C3D9E9);border:0;box-shadow:none;
 display:flex;justify-content:center;align-items:center;flex-direction:column;gap:0;transform:none;
}
.scan-console-v3 .paper span{font-size:40px;line-height:1.3;letter-spacing:-.05em;color:#486B93}
.scan-console-v3 .paper small{font-size:11px;color:#547BA2}
.scan-console-v3 .paper-corner{position:absolute;width:15px;height:15px;border-color:#35DAFF}
.scan-console-v3 .paper-corner.a{left:5px;top:5px}
.scan-console-v3 .paper-corner.b{right:5px;top:5px}
.scan-console-v3 .paper-corner.c{left:5px;bottom:5px}
.scan-console-v3 .paper-corner.e{right:5px;bottom:5px}
.scan-console-v3 .visual-bottom{
 position:relative;margin:0 12px 7px;border:1px solid #115C98;border-radius:12px;
 flex:none;min-height:68px;padding:8px 5px;
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:0;background:linear-gradient(110deg,#082A4A,#061D38);
}
.scan-console-v3 .visual-bottom>span{
 font-size:11px;display:flex;gap:8px;align-items:center;justify-content:center;
 color:#18C6FF;line-height:1.33;padding:0 7px;white-space:normal
}
.scan-console-v3 .visual-bottom>span:not(:last-child){border-right:1px solid #175986}
.scan-console-v3 .visual-bottom svg{width:24px;height:24px;flex:none}
.scan-console-v3 .visual-bottom strong{color:#D4EEFF;font-size:10px;font-weight:600;display:block;text-align:left}
.scan-console-v3 .visual-demo-note{
 color:#83B5D5;font-size:8px;letter-spacing:.01em;text-align:center;line-height:1;
 position:absolute;bottom:-14px;left:0;right:0
}
.hero-v3~.metrics{border-top:0;background:linear-gradient(180deg,#081A31,#0A2138)}
@media(max-width:1120px){
 .hero-v3{grid-template-columns:minmax(0,.96fr) minmax(0,1.06fr);gap:26px}
 .hero-v3 h1{font-size:clamp(39px,4.65vw,57px)}
 .hero-v3 .trustline{gap:10px;font-size:10px}
 .hero-v3 .trustline i{width:37px;height:37px}
 .scan-console-v3{height:475px;min-height:475px}
 .scan-console-v3 .visual-bottom strong{font-size:9px}
 .scan-console-v3 .visual-bottom svg{width:21px;height:21px}
}
@media(max-width:820px){
 .hero-v3{grid-template-columns:1fr;gap:36px;padding-top:43px;padding-bottom:70px}
 .hero-v3 .hero-copy{max-width:650px}
 .hero-v3 h1{font-size:clamp(41px,6.7vw,60px)}
 .hero-v3 .trustline{font-size:12px;gap:17px}
 .scan-console-v3{height:508px;min-height:508px;max-width:650px;width:100%;margin:0 auto}
 .scan-console-v3 .scan-paper-area{padding:18px 11px}
 .scan-console-v3 .scan-foot{max-height:335px}
}
@media(max-width:520px){
 .brand .miosize-wordmark{width:180px;max-height:72px}
 .hero-v3{padding-top:29px;gap:22px;padding-bottom:57px}
 .hero-v3 .eyebrow{font-size:9px}
 .hero-v3 h1{font-size:clamp(32px,8.5vw,43px);line-height:1.14;margin:18px 0}
 .hero-v3 .hero-copy>p{font-size:14px;line-height:1.58}
 .hero-v3 .actions{margin:21px 0 17px}
 .hero-v3 .trustline{display:flex;gap:9px;justify-content:space-between;font-size:9px;margin-top:12px}
 .hero-v3 .trustline>span{gap:5px}
 .hero-v3 .trustline i{width:27px;height:27px}
 .hero-v3 .trustline svg{width:17px;height:17px}
 .scan-console-v3{height:405px;min-height:405px;border-radius:17px}
 .scan-console-v3 .visual-top{padding:12px 13px;min-height:49px;font-size:9px}
 .scan-console-v3 .alpha-tag{font-size:8px;padding:5px 7px}
 .scan-console-v3 .visual-stage{padding:0 10px 2px;grid-template-columns:minmax(0,1.06fr) minmax(0,.9fr)}
 .scan-console-v3 .scan-foot-area{padding:0 7px 19px 12px}
 .scan-console-v3 .scan-foot{max-height:245px;max-width:150px}
 .scan-console-v3 .scan-length-rule{left:7%}
 .scan-console-v3 .scan-length-label{font-size:8px;left:1%}
 .scan-console-v3 .scan-length-label strong{font-size:9px}
 .scan-console-v3 .scan-corner{width:11px;height:11px;border-width:2px}
 .scan-console-v3 .paper-reference{padding:8px;width:94%}
 .scan-console-v3 .paper span{font-size:28px}
 .scan-console-v3 .paper small{font-size:8px}
 .scan-console-v3 .visual-bottom{min-height:60px;margin:0 6px 6px}
 .scan-console-v3 .visual-bottom>span{padding:0 4px;gap:4px}
 .scan-console-v3 .visual-bottom svg{width:15px;height:15px}
 .scan-console-v3 .visual-bottom strong{font-size:8px}
 .scan-console-v3 .visual-demo-note{font-size:7px}
 .hero-v3:before{height:155px;bottom:-22px}
}
@media(prefers-reduced-motion:reduce){.hero-v3 *{animation:none!important;transition:none!important}}

/* Reference flow: illuminated hero transitions directly into the category area. */
.hero-v3 + .vertical-section{padding-top:65px;position:relative;z-index:1}
.hero-v3 + .vertical-section .section-intro{margin-bottom:24px}
.hero-v3 .scan-console-v3{transform:perspective(1350px) rotateY(-1.3deg)}
.hero-v3 .scan-console-v3 .scan-foot{filter:drop-shadow(0 0 9px #00CCFFB0) drop-shadow(0 0 18px #0755FF69)}
@media(max-width:820px){
 .hero-v3 + .vertical-section{padding-top:55px}
 .hero-v3 .scan-console-v3{transform:none}
}