/* index.html */
sc-for,sc-if{display:contents}
body{margin:0;background:#ffffff}
a{color:#243650}
a:hover{color:#1b2a40}
*{box-sizing:border-box}
.pd{font-family:Raleway,ui-sans-serif,system-ui,sans-serif;color:#243650;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
.hd{font-family:Vollkorn,Georgia,serif;font-weight:600;letter-spacing:-0.01em}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
@media(min-width:640px){.wrap{padding:0 32px}
}
@media(min-width:1024px){.wrap{padding:0 40px}
}
.g12{display:grid;gap:24px}
@media(min-width:1024px){.g12{grid-template-columns:repeat(12,minmax(0,1fr));gap:40px}
.c5{grid-column:span 5}
.c7{grid-column:span 7}
.c4{grid-column:span 4}
.c8{grid-column:span 8}
}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin:0}
.eyebrow::before{content:"";width:32px;height:1px;background:#f4bc1d}
.h2{margin:20px 0 0;font-size:32px;line-height:1.12}
@media(min-width:640px){.h2{font-size:36px}
}
@media(min-width:1024px){.h2{font-size:44px}
}
.lead{margin:0;font-size:17px;line-height:1.65}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:8px;font-weight:600;font-family:Raleway,sans-serif;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.btn-gold{background:#f4bc1d;color:#243650;box-shadow:0 10px 30px -12px rgba(244,188,29,.7)}
.btn-gold:hover{background:#dfa70f;color:#243650}
.btn-od{background:transparent;color:#243650;border:1px solid rgba(36,54,80,.35)}
.btn-od:hover{background:#243650;color:#fff;border-color:#243650}
.lg{height:56px;padding:0 28px;font-size:16px}
.md{height:48px;padding:0 24px;font-size:15px}
.sm{height:40px;padding:0 16px;font-size:14px}
.navl{display:inline-flex;align-items:center;height:40px;padding:0 12px;border-radius:6px;font-size:14.5px;font-weight:600;text-decoration:none}
.nav-dark .navl{color:rgba(255,255,255,.85)}
.nav-dark .navl:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-light .navl{color:#243650}
.nav-light .navl:hover{background:#f4f6f9}
.only-xl{display:none}
@media(min-width:1280px){.only-xl{display:block}
.hide-xl{display:none !important}
}
.only-lg{display:none}
@media(min-width:1024px){.only-lg{display:block}
}
.only-sm{display:none}
@media(min-width:640px){.only-sm{display:inline-flex}
}
.bg-hero{background:radial-gradient(48% 62% at 92% 108%,rgba(244,188,29,.62) 0%,rgba(184,134,15,.38) 22%,rgba(92,69,25,.2) 44%,rgba(36,54,80,0) 72%),radial-gradient(38% 46% at 6% 0%,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 70%),linear-gradient(160deg,#111c2c 0%,#1b2a40 34%,#243650 100%)}
.bg-cmmi{background:radial-gradient(90% 34% at 50% 104%,rgba(244,188,29,.85) 0%,rgba(184,134,15,.5) 30%,rgba(92,69,25,0) 72%),linear-gradient(180deg,#111c2c 0%,#243650 48%,#2a2f3a 72%,#5c4519 90%,#b8860f 100%)}
@media(min-width:1024px){.bg-cmmi{background:radial-gradient(42% 120% at 104% 50%,rgba(244,188,29,.9) 0%,rgba(184,134,15,.55) 30%,rgba(92,69,25,0) 70%),linear-gradient(100deg,#111c2c 0%,#243650 42%,#2a2f3a 64%,#5c4519 84%,#b8860f 100%)}
}
.grid-d{background-image:linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px}
.grid-l{background-image:linear-gradient(to right,rgba(36,54,80,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(36,54,80,.06) 1px,transparent 1px);background-size:24px 24px}
.mask-rad{mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.mask-x{mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
@keyframes flow{to{stroke-dashoffset:-1000}
}
@keyframes drift{0%,100%{transform:translate3d(0,0,0)}
50%{transform:translate3d(-1.5%,1.2%,0)}
}
@keyframes floaty{0%,100%{transform:translateY(0)}
50%{transform:translateY(-8px)}
}
@keyframes pulse{0%,100%{opacity:.35}
50%{opacity:1}
}
@keyframes mq{from{transform:translate3d(0,0,0)}
to{transform:translate3d(-50%,0,0)}
}
@keyframes enter{from{opacity:0;transform:translateY(14px)}
to{opacity:1;transform:none}
}
.flow{stroke-dasharray:70 930;animation:flow var(--d,16s) linear infinite;animation-delay:var(--dl,0s)}
.drift{animation:drift 26s ease-in-out infinite}
.f1{animation:floaty 7s ease-in-out infinite}
.f2{animation:floaty 9s ease-in-out infinite;animation-delay:-3s}
.pulse{animation:pulse 3.2s ease-in-out infinite}
.enter{animation:enter .9s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--e,0ms)}
.paused .flow,.paused .drift,.paused .f1,.paused .f2,.paused .pulse,.paused .mq-track{animation-play-state:paused}
.mq-track{display:flex;width:max-content;animation:mq var(--md,60s) linear infinite}
.mq-track.rev{animation-direction:reverse}
.mq:hover .mq-track{animation-play-state:paused}
@supports (animation-timeline: view()){.rv{animation:enter linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
}
.card{transition:transform .3s,box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-4px);border-color:rgba(36,54,80,.2);box-shadow:0 30px 60px -30px rgba(17,28,44,.35)}
.svc:hover{border-color:rgba(36,54,80,.2);box-shadow:0 24px 50px -28px rgba(17,28,44,.35)}
.svc .bar{transition:width .3s}
.svc:hover .bar{width:80px !important}
.tile:hover{border-color:#f4bc1d}
.fld{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#243650}
.ctl{height:48px;border:1px solid #c9d0da;border-radius:8px;padding:0 14px;font:500 15px Raleway,sans-serif;color:#243650;background:#fff;width:100%}
textarea.ctl{height:auto;min-height:128px;padding:12px 14px;line-height:1.6;resize:vertical}
.ctl:focus{outline:2px solid #243650;outline-offset:1px}
:focus-visible{outline:2px solid #f4bc1d;outline-offset:3px}
.cols3{display:grid;gap:24px}
@media(min-width:768px){.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.cols4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1024px){.cols4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.svc-grid{display:grid;gap:20px}
@media(min-width:768px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1024px){.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.svc-photo{grid-row:span 2}
}
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
@media(min-width:900px){.tabs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;overflow:visible;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);border-radius:12px;padding:8px}
.tab-a{grid-column:span 3}
.tab-b{grid-column:span 4}
}
.form-grid{display:grid;gap:18px}
@media(min-width:640px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.span2{grid-column:span 2}
}
.cycles{display:grid;gap:16px}
@media(min-width:768px){.cycles{grid-template-columns:repeat(5,minmax(0,1fr))}
}
.glass-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(min-width:1024px){.glass-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.glass{aspect-ratio:1/1}
}
.glass{position:relative;overflow:hidden;min-height:210px;border-radius:20px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 30px 60px -30px rgba(0,0,0,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:transform .35s,border-color .35s,box-shadow .35s}
.glass:hover{transform:translateY(-6px);border-color:rgba(244,188,29,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 40px 70px -30px rgba(0,0,0,.7)}
.glass::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);transform:translateX(-60%);animation:shine 7s ease-in-out infinite;animation-delay:var(--sd,0s);pointer-events:none}
@keyframes shine{0%,60%{transform:translateX(-60%)}
100%{transform:translateX(60%)}
}
@keyframes hpA{from{opacity:0;transform:translateY(12px)}
to{opacity:1;transform:none}
}
@keyframes hpB{from{opacity:0;transform:translateY(12px)}
to{opacity:1;transform:none}
}
.port-grid{display:grid;gap:16px}
@media(min-width:768px){.port-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1100px){.port-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.map-st path{transition:fill .3s}
.map-st path:hover{fill:#f4bc1d}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
.mq-track{flex-wrap:wrap;justify-content:center;width:100%}
.flow{display:none}
}
.q2{display:grid;gap:24px}
@media(min-width:900px){.q2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.devtag{display:inline-flex;align-items:center;border:1px dashed #a3c4bc;background:rgba(163,196,188,.18);color:#243650;border-radius:999px;padding:3px 10px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.ptrack{list-style:none;margin:48px 0 0;padding:4px 2px 18px;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#a3c4bc transparent}
.pcard{flex:0 0 auto;width:min(380px,84vw);scroll-snap-align:start;border-radius:14px;background:#ffffff;border:1px solid #cfdcd8;padding:28px;display:flex;flex-direction:column;gap:18px}
.pcard img{object-fit:cover;border-radius:50%;border:3px solid #f4bc1d;display:block}
.parrow{display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;border-radius:50%;border:1px solid #243650;background:#ffffff;color:#243650;cursor:pointer}
.parrow:hover{background:#243650;color:#ffffff}
.hv{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background-color .25s ease}
.hv:hover{transform:translateY(-4px);border-color:#f4bc1d !important;box-shadow:0 24px 48px -28px rgba(17,28,44,.45)}
.hvd{transition:transform .25s ease,border-color .25s ease,background-color .25s ease}
.hvd:hover{transform:translateY(-3px);border-color:#f4bc1d !important;background:rgba(255,255,255,.12) !important}
.hvf{border-left:3px solid transparent;padding-left:14px;transition:border-color .2s,background-color .2s}
.hvf:hover{border-left-color:#f4bc1d;background:rgba(255,255,255,.55)}
.card:hover{border-color:#f4bc1d !important}
.svc:hover{transform:translateY(-4px);border-color:#f4bc1d !important}
.svc{transition:transform .25s,box-shadow .3s,border-color .3s !important}
@keyframes demoPulse{0%{box-shadow:0 0 0 0 rgba(244,188,29,.65)}
70%{box-shadow:0 0 0 20px rgba(244,188,29,0)}
100%{box-shadow:0 0 0 0 rgba(244,188,29,0)}
}
.btn-pulse{animation:demoPulse 2s ease-out infinite}
.mod-grid{display:grid;gap:12px}
@media(min-width:640px){.mod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.ms-grid{display:grid;gap:14px}
@media(min-width:900px){.ms-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
.qfig{margin:0;display:flex;gap:20px;align-items:center;border-radius:12px;padding:24px 28px;position:relative}
.qfig img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none;border:3px solid #f4bc1d}
@media(max-width:520px){.qfig{flex-direction:column;align-items:flex-start}
}