@font-face{font-family:MUD;src:url(../fonts/MUDisplay-Black.woff2) format('woff2')}@font-face{font-family:MUT;src:url(../fonts/MUText-Medium.woff2) format('woff2');font-weight:500}@font-face{font-family:MUT;src:url(../fonts/MUText-Bold.woff2) format('woff2');font-weight:700}@font-face{font-family:MUT;src:url(../fonts/MUText-ExtraBold.woff2) format('woff2');font-weight:800}
:root{--ink:#101A30;--muted:#3F4659;--navy:#14213D;--G:72px;--r:40px}
*{box-sizing:border-box;margin:0}html,body{overflow-x:clip}
body{background:#EDEBF3;color:var(--ink);font-family:MUT;font-weight:500;-webkit-font-smoothing:antialiased;position:relative}
.field{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}.field i{position:absolute;border-radius:50%;filter:blur(110px)}
.grain{position:absolute;inset:0;z-index:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.wrap{position:relative;z-index:1;padding:0 var(--G);max-width:1440px;margin:0 auto}
h1,h2{font-family:MUD;text-transform:uppercase;line-height:.88;color:var(--navy);letter-spacing:-.005em}
.kicker{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
/* ---- glass with depth ---- */
.glass{position:relative;border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.80) 0%,rgba(255,255,255,.52) 45%,rgba(255,255,255,.66) 100%);
 backdrop-filter:blur(30px) saturate(1.8);border:1px solid rgba(255,255,255,.75);
 box-shadow:inset 0 1.5px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(20,33,61,.08),inset 0 0 24px rgba(255,255,255,.35),0 1px 2px rgba(20,33,61,.08),0 12px 24px -8px rgba(20,33,61,.16),0 40px 70px -24px rgba(20,33,61,.28);isolation:isolate}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 60% at 15% 0%,rgba(255,255,255,.75),rgba(255,255,255,0) 55%),linear-gradient(180deg,rgba(255,255,255,.35),transparent 30%);z-index:-1}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.15) 40%,rgba(120,140,200,.25));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor}
.ico{border-radius:22.37%;box-shadow:0 1px 1px rgba(20,33,61,.12),0 10px 22px -6px rgba(20,33,61,.35)}
nav{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:22px var(--G) 0;max-width:1440px;margin:0 auto}
nav .bar{display:flex;gap:6px;padding:6px;border-radius:999px}nav .bar span{padding:10px 16px;border-radius:999px;font-weight:700;font-size:15px}nav .bar span.on{background:var(--navy);color:#F4EBDD}
nav img{width:52px;filter:drop-shadow(0 6px 12px rgba(20,33,61,.25))}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:64px;min-height:700px;position:relative}
.hero h1{font-size:104px}.lede{font-size:21px;line-height:1.5;color:var(--muted);margin-top:26px;max-width:540px}
.ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.btn{padding:16px 24px;border-radius:999px;font-weight:800;font-size:16px}.btn.p{background:var(--navy);color:#F4EBDD;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 24px -8px rgba(20,33,61,.5)}.btn.g{color:var(--navy)}
.hstage{position:relative;height:620px}
.hcard{position:absolute;left:8%;right:4%;top:40px;bottom:30px;padding:28px;--r:48px}
.hcard .top{display:flex;align-items:center;gap:14px}.hcard .top .ico{width:64px}.hcard .top b{font-size:18px;display:block}.hcard .top span{font-size:14px;color:var(--muted)}
.hcard .devs{position:absolute;left:28px;right:28px;bottom:28px;top:120px}
.hcard .glassdev{position:absolute}.hcard .phone{left:6%;bottom:0;width:44%;}.hcard .tab{right:0;top:0;width:58%}
.glassdev{border-radius:28px;overflow:hidden;padding:8px;background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.25));box-shadow:inset 0 1.5px 0 #fff,0 30px 50px -18px rgba(40,10,40,.5)}
.glassdev img{width:100%;display:block;border-radius:21px}
.cl{position:absolute;z-index:0}
.c0{width:84px;left:-2%;top:6%;transform:rotate(-8deg)}.c1{width:62px;left:30%;top:-2%;transform:rotate(6deg);opacity:.9}.c2{width:70px;right:-3%;top:10%;transform:rotate(10deg)}
.c3{width:58px;right:2%;bottom:2%;transform:rotate(-6deg)}.c4{width:76px;left:-4%;bottom:10%;transform:rotate(7deg)}.c5{width:52px;left:44%;bottom:-3%;opacity:.85}
.c6{width:48px;right:24%;top:-1%;opacity:.8;transform:rotate(-10deg)}.c7{width:44px;left:2%;top:48%;opacity:.8}.c8{width:56px;right:-5%;top:52%;transform:rotate(-4deg)}
.sec{margin-top:120px;position:relative}h2{font-size:72px;margin-bottom:36px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.app{padding:22px;--r:36px;display:flex;flex-direction:column}.app.big{grid-column:span 2}
.ah{display:flex;gap:16px;align-items:center}.ah .ico{width:76px;height:76px;flex:none}.big .ah .ico{width:96px;height:96px}
h3{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:4px}.big h3{font-size:26px}.app p,.pr p{font-size:15px;line-height:1.45;color:var(--muted)}
.shot{margin-top:18px;height:240px;overflow:hidden;border-radius:24px;box-shadow:inset 0 0 0 1px rgba(20,33,61,.06)}.big .shot{height:320px}.shot img{width:100%;display:block}
.arow{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:999px;font-weight:800;font-size:14px}
.badge.dark{background:var(--navy);color:#F4EBDD}.badge.ghost{background:rgba(255,255,255,.7);color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}.badge.light{background:rgba(255,255,255,.92);color:#4A1238;box-shadow:inset 0 1px 0 #fff}
.hov{transform:translateY(-6px)}.hov .ah .ico{transform:translateY(-6px)}.hov .shot img{transform:translateY(-36px)}.hov::before{background:radial-gradient(120% 70% at 30% 0%,rgba(255,255,255,1),rgba(255,255,255,0) 60%)}
.hint{font-size:11px;font-weight:800;padding:5px 9px;border-radius:8px;background:#FFE14D;color:#161616}
.little{margin-top:24px;display:flex;align-items:center;gap:14px;padding:14px 20px;border-radius:24px;background:rgba(255,255,255,.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.little img{width:44px;height:44px;filter:saturate(.6);opacity:.85}.little b{font-size:15px}.little span{font-size:14px;color:var(--muted)}.little .badge{margin-left:auto;font-size:13px;padding:7px 12px}
/* featured template */
.feat{position:relative;border-radius:56px;overflow:hidden;color:#fff;background:linear-gradient(140deg,var(--fa),var(--fb));display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;padding:64px;min-height:600px;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35),0 40px 80px -30px rgba(40,10,40,.55);isolation:isolate}
.feat .fx{position:absolute;inset:0;z-index:-1}.feat .fx i{position:absolute;width:70%;height:90%;border-radius:50%;filter:blur(100px);opacity:.55}
.feat::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(80% 50% at 20% 0%,rgba(255,255,255,.22),transparent 60%);pointer-events:none}
.ftext{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;position:relative}.fi{width:96px}.ftag{font-size:20px;line-height:1.5;max-width:440px}
.fmedia{position:relative}.fmedia .phone{position:absolute;left:4%;top:0;width:36%;z-index:2}.fmedia .tab{position:absolute;right:0;top:70px;width:60%}
.play{position:absolute;left:50%;top:45%;width:72px;height:72px;margin:-36px;border-radius:50%;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);display:grid;place-items:center;color:#7A1F5C;font-size:26px;box-shadow:inset 0 1px 0 #fff,0 10px 24px rgba(0,0,0,.3)}
.cap{position:absolute;left:18px;bottom:18px;font-size:12px;font-weight:800;padding:5px 10px;border-radius:9px;background:rgba(0,0,0,.55)}
.slot{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#FFE14D;color:#161616;font-size:12px;font-weight:800;margin-bottom:-12px;z-index:3;position:relative}.fmedia>.slot{position:absolute;left:0;top:0}
.tmpl{display:flex;gap:24px;align-items:center;margin-top:22px;flex-wrap:wrap}.tmpl .legend{font-size:14px;color:var(--muted);line-height:1.7;flex:1;min-width:260px}
.minibox{width:420px;height:178px;overflow:hidden;border-radius:22px;flex:none;position:relative}.minibox .feat{width:1296px;transform:scale(.324);transform-origin:0 0}
.minibox+.legend b{color:var(--ink)}
.prs{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.pr{padding:30px;--r:32px}.pr h3{font-size:22px;margin-bottom:10px}.num{font-family:MUD;font-size:40px;color:var(--navy);opacity:.9;margin-bottom:40px}
.fam{margin-top:22px;font-size:15px;color:var(--muted)}
footer{margin-top:120px;position:relative;z-index:1;background:linear-gradient(180deg,#14213D,#0E1730);color:#F4EBDD}
footer .in{max-width:1440px;margin:0 auto;padding:64px var(--G) 36px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;font-size:15px;line-height:2}
footer b{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#C9C3B8;margin-bottom:6px}footer .bt{grid-column:1/-1;border-top:1px solid rgba(244,235,221,.2);padding-top:20px;font-size:13px;color:#C9C3B8}
.ph{font-size:11px;font-weight:800;color:#14213D;background:#FFE14D;border-radius:6px;padding:2px 6px;margin-left:6px}
/* tablet */
@media (max-width:1000px){:root{--G:36px}.hero{grid-template-columns:1fr;padding-top:40px}.hero h1{font-size:88px}.hstage{height:560px}.hcard{left:4%;right:4%}.hcard .phone{width:26%;left:12%}.hcard .tab{width:54%;right:4%}
 .grid{grid-template-columns:repeat(2,1fr)}.prs{grid-template-columns:repeat(2,1fr)}h2{font-size:60px}
 .feat{grid-template-columns:1fr;padding:44px;min-height:0}.fmedia{height:520px}footer .in{grid-template-columns:1fr 1fr}nav .bar span:not(.on){display:none}}
@media (max-width:600px){:root{--G:20px}.hero h1{font-size:54px}.lede{font-size:17px}.hstage{height:470px}.hcard{left:0;right:0;padding:20px}.hcard .phone{width:40%;left:4%}.hcard .tab{width:60%;right:0}.hcard .devs{top:100px;left:20px;right:20px;bottom:20px}
 .grid{grid-template-columns:1fr}.app.big{grid-column:auto}.prs{grid-template-columns:1fr}h2{font-size:42px}.sec{margin-top:80px}
 .feat{padding:28px;border-radius:36px}.fmedia{height:400px}.fi{width:76px}.ftag{font-size:17px}.minibox{width:100%;height:150px}.minibox .feat{transform:scale(.27)}
 .shot{height:220px}.big .shot{height:260px}.c1,.c5,.c6,.c7{display:none}nav img{width:44px}footer .in{padding:44px var(--G) 28px}}
.hero2{position:relative;height:440px;display:grid;place-items:center}.biglogo{width:260px;position:relative;z-index:2;filter:drop-shadow(0 30px 40px rgba(20,33,61,.35))}
.hero2 .c0{left:12%;top:18%}.hero2 .c1{left:26%;top:62%}.hero2 .c2{right:12%;top:14%}.hero2 .c3{right:24%;bottom:8%}.hero2 .c4{left:4%;bottom:8%}.hero2 .c5{left:36%;top:6%;bottom:auto}.hero2 .c6{right:34%;top:4%}.hero2 .c7{left:22%;top:30%}.hero2 .c8{right:4%;top:56%}
.feat{min-height:600px;align-items:center}.fmedia{align-self:stretch;min-height:480px}.fmedia .phone{top:10px;width:34%}.fmedia .tab{top:60px;width:58%}.fi{width:128px}.ftext{gap:26px}.ftag{font-size:24px;line-height:1.45}.feat .badge{font-size:16px;padding:12px 20px}
@media (max-width:1000px){.hero2{height:380px}.biglogo{width:210px}}
@media (max-width:600px){.hero2{height:300px}.biglogo{width:150px}.fi{width:88px}.ftag{font-size:18px}.fmedia{min-height:0;height:380px}.fmedia .phone{width:46%;left:0;top:0}.fmedia .tab{width:58%;top:50px}
.grid{grid-template-columns:1fr 1fr!important;gap:12px}.app.big{grid-column:span 2!important}.app:not(.big){padding:14px;--r:26px}.app:not(.big) .ah{flex-direction:column;align-items:flex-start;gap:10px}.app:not(.big) .ah .ico{width:56px;height:56px}
.app:not(.big) h3{font-size:16px}.app:not(.big) p{font-size:13px}.app:not(.big) .shot{height:150px;border-radius:16px;margin-top:12px}.app:not(.big) .badge{font-size:12px;padding:7px 10px}.app:not(.big) .arow{margin-top:auto;padding-top:12px}}
.lock{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px}.lock .biglogo{position:static}
.studio{font-family:MUT;font-weight:700;font-size:22px;letter-spacing:.32em;text-transform:lowercase;color:#14213D;padding-left:.32em}
.hero2{height:480px}
.shot.raw{display:flex;justify-content:center;align-items:flex-start;gap:14px;padding:18px 18px 0;background:linear-gradient(180deg,rgba(20,33,61,.06),rgba(20,33,61,.02));box-shadow:inset 0 0 0 1px rgba(20,33,61,.06)}
.shot.raw img{width:auto;height:auto;max-width:62%;border-radius:18px 18px 0 0;box-shadow:0 0 0 5px #fff,0 12px 28px -8px rgba(20,33,61,.35)}.big .shot.raw img{max-width:38%}
.shot.ph0{display:grid;place-items:center;background:repeating-linear-gradient(135deg,rgba(20,33,61,.04) 0 12px,rgba(20,33,61,.07) 12px 24px);box-shadow:inset 0 0 0 1.5px rgba(20,33,61,.12)}.shot.ph0 span{font-size:13px;font-weight:700;color:#3F4659;background:rgba(255,255,255,.85);padding:7px 12px;border-radius:999px}
.fmedia .glassdev img{border-radius:21px}
/*mo*/.fmedia .phone{width:46%;left:2%;top:70px;transform:rotate(-4deg)}.fmedia .tab{width:50%;right:2%;top:20px;transform:rotate(3deg)}
@media (max-width:1000px){.studio{font-size:19px}}
@media (max-width:600px){.hero2{height:330px}.studio{font-size:15px}.shot.raw{padding:10px 10px 0;gap:8px}.shot.raw img{border-radius:12px 12px 0 0;box-shadow:0 0 0 3px #fff,0 8px 18px -6px rgba(20,33,61,.35)}.app:not(.big) .shot.raw img{max-width:82%}.fmedia .phone{width:52%;top:40px}.fmedia .tab{width:52%;top:0}.shot.ph0 span{font-size:11px;text-align:center}}

.card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}.card:hover{transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.card:hover{transform:none}}
a{color:inherit}
a.badge{text-decoration:none}

/* fix-1 (2026-10-30): hero breathing room + Modette images fill */
.hero2{height:auto;min-height:580px;margin-bottom:32px}
.hero2 .cl{height:auto;aspect-ratio:1/1;bottom:auto;right:auto;display:block}
.hero2 .cl.c0{width:84px;left:3%;top:12%;transform:rotate(-8deg)}
.hero2 .cl.c1{width:62px;left:17%;top:4%;transform:rotate(6deg)}
.hero2 .cl.c4{width:76px;left:6%;top:58%;transform:rotate(7deg)}
.hero2 .cl.c7{width:52px;left:20%;top:42%}
.hero2 .cl.c5{width:56px;left:25%;top:72%;transform:none}
.hero2 .cl.c2{width:72px;left:auto;right:3%;top:10%;transform:rotate(10deg)}
.hero2 .cl.c6{width:56px;left:auto;right:18%;top:4%;transform:rotate(-10deg)}
.hero2 .cl.c8{width:64px;left:auto;right:6%;top:56%;transform:rotate(-4deg)}
.hero2 .cl.c3{width:60px;left:auto;right:22%;top:72%;transform:rotate(-6deg)}
.fmedia .glassdev img{height:auto}
.shot.raw.mo{padding:0;gap:0;align-items:stretch;background:#FBF7F1}
.shot.raw.mo img{max-width:none;width:50%;height:100%;object-fit:cover;object-position:50% 38%;border-radius:0;box-shadow:none}
.shot.raw.mo img+img{border-left:3px solid #fff}
@media (max-width:1000px){
 .hero2{min-height:480px}
 .hero2 .cl.c0{width:66px}.hero2 .cl.c1{width:50px}.hero2 .cl.c4{width:60px}.hero2 .cl.c7{width:42px;display:block}
 .hero2 .cl.c5{width:44px;display:block}.hero2 .cl.c2{width:58px}.hero2 .cl.c6{width:44px;display:block}.hero2 .cl.c8{width:52px}.hero2 .cl.c3{width:48px}
}
@media (max-width:600px){
 .hero2{min-height:360px;margin-bottom:20px}
 .hero2 .cl.c1,.hero2 .cl.c5,.hero2 .cl.c6,.hero2 .cl.c7,.hero2 .cl.c3{display:none}
 .hero2 .cl.c0{width:46px;left:3%;top:8%}.hero2 .cl.c4{width:46px;left:5%;top:64%}
 .hero2 .cl.c2{width:46px;right:3%;top:10%}.hero2 .cl.c8{width:46px;right:5%;top:62%}
}
.feat .ico.fi{height:auto;aspect-ratio:1/1}
.fmedia .phone{width:54%;left:0;top:64px}
.fmedia .tab{width:54%;right:0;top:0}
@media (max-width:1000px){
 .fmedia{display:flex;align-items:flex-start;justify-content:center;gap:4%;height:auto;min-height:0;padding:8px 0 16px}
 .fmedia .glassdev{position:relative;left:auto;right:auto;top:auto;width:46%;max-width:340px}
 .fmedia .phone{margin-top:36px}
}