:root{
  --text:#eef7fb;
  --muted:rgba(238,247,251,0.72);
  --line:rgba(255,255,255,0.12);
  --shadow:0 20px 80px rgba(0,0,0,0.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--text);background:#061019;min-height:100vh;overflow-x:hidden}
.site-bg{position:fixed;inset:0;z-index:-2;background:
radial-gradient(circle at 68% 30%, rgba(62,188,250,0.22), transparent 22%),
radial-gradient(circle at 28% 76%, rgba(54,224,179,0.16), transparent 24%),
linear-gradient(180deg, #06131f 0%, #0a2234 38%, #0d3955 68%, #0c5b6f 100%)}
.topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px);background:rgba(4,10,16,0.44);border-bottom:1px solid rgba(255,255,255,0.06)}
.nav-shell{max-width:1280px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand-mini{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.nav{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.nav a,.lang-switch a{color:var(--text);text-decoration:none;font-size:14px;opacity:.82}
.nav a:hover,.lang-switch a:hover,.lang-switch .active{opacity:1}
.lang-switch{display:flex;gap:12px}
.single-page{max-width:1280px;margin:0 auto;padding:0 24px 80px}
.hero-stage{min-height:128vh;display:grid;grid-template-rows:auto auto auto;align-content:start;padding-top:48px;row-gap:0}
.hero-company{font-weight:800;letter-spacing:.02em;line-height:.92;font-size:clamp(42px,7.6vw,110px);margin:20px 0 18px;text-wrap:balance;position:relative;z-index:5}
.hero-company span{display:block;background:linear-gradient(180deg,#f4fbff 0%, #dff6ff 40%, #8dd8ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-prelude{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:36px;min-height:360px;position:relative;z-index:2;padding-top:22px}\n.push-down-prelude{animation:pushPrelude 1s cubic-bezier(.2,.9,.2,1) 2.05s forwards;transform:translateY(0)}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:rgba(255,255,255,.62);margin-bottom:18px}
.slogan{margin:0;font-size:clamp(34px,4.4vw,72px);line-height:1.02;font-weight:700;max-width:680px}
.slogan-sub{color:var(--muted);font-size:18px;line-height:1.7;max-width:560px;margin-top:18px}
.hero-logo{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;overflow:visible}
.logo-fade-shell{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;width:min(500px,94%);-webkit-mask-image:radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 32%, rgba(0,0,0,.96) 48%, rgba(0,0,0,.65) 66%, rgba(0,0,0,.15) 82%, transparent 100%);mask-image:radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 32%, rgba(0,0,0,.96) 48%, rgba(0,0,0,.65) 66%, rgba(0,0,0,.15) 82%, transparent 100%)}\n.hero-logo img{width:min(440px,82%);height:auto;display:block;position:relative;z-index:2;filter:drop-shadow(0 18px 42px rgba(0,0,0,.12));mix-blend-mode:screen;opacity:.95}
.logo-haze{position:absolute;inset:-12% -8%;background:radial-gradient(circle at 50% 50%, rgba(96,212,255,.18), rgba(96,212,255,.08) 28%, rgba(54,224,179,.06) 42%, transparent 72%);filter:blur(42px);z-index:1}\n.logo-glow{position:absolute;width:540px;height:540px;max-width:100%;background:radial-gradient(circle at 50% 50%, rgba(38,179,255,.30), rgba(54,224,179,.10) 34%, transparent 74%);filter:blur(28px);z-index:2}
.insights-emerge{margin-top:0;max-height:0;overflow:hidden;transform:scaleY(.08);transform-origin:top center;opacity:0;animation:emergeBetween 1.0s cubic-bezier(.2,.9,.2,1) 2.1s forwards;position:relative;z-index:4}
.insights-frame{border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(7,18,28,.58), rgba(7,18,28,.38));border-radius:28px;padding:30px;box-shadow:var(--shadow);transform-origin:top center}
.section-head h2{margin:0;font-size:clamp(28px,3vw,48px);line-height:1.05}
.insights-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;margin-top:26px}
.feature-card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:24px;padding:30px;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end}
.news-meta{color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase;display:flex;gap:10px;align-items:center}
.dot{opacity:.55}
.feature-card h3{margin:16px 0 12px;font-size:clamp(26px,3vw,42px);line-height:1.08}
.feature-card p{color:var(--muted);font-size:18px;line-height:1.72;max-width:680px}
.read-more,.contact-link{color:#adf6ff;text-decoration:none;font-weight:600;margin-top:18px;display:inline-block}
.news-selector{display:flex;flex-direction:column;gap:10px}
.selector-btn{width:100%;text-align:left;cursor:pointer;color:var(--text);background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);padding:18px 18px 18px 20px;border-radius:18px;transition:.25s ease}
.selector-btn:hover,.selector-btn.active{background:rgba(255,255,255,.085);border-color:rgba(157,235,255,.32)}
.selector-btn .small{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}
.selector-btn .title{display:block;font-size:16px;line-height:1.4;font-weight:600}
.progress-wrap{margin-top:18px}.progress-track{width:100%;height:4px;background:rgba(255,255,255,.09);border-radius:999px;overflow:hidden}
.progress-bar{width:0%;height:100%;background:linear-gradient(90deg, #8be8ff, #43d2f7 55%, #51efc0);transition:width .12s linear}
.content-section{padding:110px 0 10px}
.about-layout{display:grid;grid-template-columns:1fr .8fr;gap:28px;margin-top:22px}
.about-copy p{color:var(--muted);font-size:18px;line-height:1.84;max-width:820px}
.about-panel{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:24px;padding:26px;display:grid;gap:18px;align-self:start}
.metric{display:flex;flex-direction:column;gap:4px}.metric-label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.metric-value{font-size:24px;font-weight:700}
.service-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.service-item{padding:26px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.service-item h3{margin:0 0 14px;font-size:22px}.service-item p{margin:0;color:var(--muted);line-height:1.8}
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.archive-card{text-decoration:none;color:var(--text);border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:22px;padding:24px;transition:.24s ease;min-height:220px;display:flex;flex-direction:column}
.archive-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.06)}
.archive-card h3{margin:16px 0 10px;font-size:24px;line-height:1.15}.archive-card p{margin:0;color:var(--muted);line-height:1.72}
.contact-box{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:24px;padding:28px;max-width:720px}
.contact-box p{color:var(--muted);font-size:18px;line-height:1.8}
.footer{max-width:1280px;margin:0 auto;padding:40px 24px 60px;color:rgba(255,255,255,.66);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.article-main{max-width:980px;margin:0 auto;padding:50px 24px 80px}
.article-shell{border:1px solid var(--line);background:rgba(7,18,28,.44);border-radius:28px;padding:34px}
.article-shell h1{font-size:clamp(34px,5vw,68px);line-height:1.04;margin:18px 0 18px}
.article-summary{font-size:20px;color:var(--muted);line-height:1.8}
.article-content{margin-top:28px;color:var(--text)}
.article-content p,.article-content li{color:var(--muted);font-size:18px;line-height:1.84}
.reveal-down{opacity:0;transform:translateY(-34px);animation:revealDown .95s ease .15s forwards}
.reveal-fade-delayed{opacity:0;transform:translateY(18px);animation:revealFade .95s ease .65s forwards}
.reveal-fade-delayed-2{opacity:0;transform:translateY(18px);animation:revealFade .95s ease .95s forwards}
@keyframes revealDown{to{opacity:1;transform:translateY(0)}}
@keyframes revealFade{to{opacity:1;transform:translateY(0)}}
@keyframes emerge{0%{opacity:0;transform:scaleY(.06)}55%{opacity:1}100%{opacity:1;transform:scaleY(1)}}
@media (max-width:1100px){.hero-prelude,.insights-grid,.about-layout,.service-list,.archive-grid{grid-template-columns:1fr}.hero-logo{min-height:220px}}
@media (max-width:760px){.nav-shell{padding:14px 16px;gap:12px}.nav{gap:14px}.single-page{padding:0 16px 70px}.hero-company{font-size:clamp(34px,11vw,62px)}.slogan{font-size:clamp(28px,9vw,50px)}.slogan-sub,.feature-card p,.about-copy p,.contact-box p,.article-content p,.article-content li,.article-summary{font-size:16px}.insights-frame,.feature-card,.about-panel,.service-item,.archive-card,.contact-box,.article-shell{padding:22px}}

@keyframes emergeBetween{0%{max-height:0;opacity:0;transform:scaleY(.08)}45%{opacity:1}100%{max-height:760px;opacity:1;transform:scaleY(1);margin:8px 0 10px}}
@keyframes pushPrelude{0%{transform:translateY(0)}100%{transform:translateY(38px)}}

@keyframes emergeBetweenMobile{0%{max-height:0;opacity:0;transform:scaleY(.08)}45%{opacity:1}100%{max-height:980px;opacity:1;transform:scaleY(1);margin:8px 0 10px}}
@keyframes pushPreludeMobile{0%{transform:translateY(0)}100%{transform:translateY(26px)}}