:root {
  --bg: #040811;
  --bg-soft: #07111f;
  --surface: rgba(13, 25, 43, .72);
  --surface-strong: #0c1728;
  --surface-light: #122138;
  --text: #f7f9fc;
  --muted: #98a9be;
  --cyan: #22d3ee;
  --blue: #4477ff;
  --violet: #8b5cf6;
  --green: #22d39a;
  --orange: #f6a928;
  --line: rgba(160, 190, 225, .14);
  --line-bright: rgba(77, 219, 255, .35);
  --shadow: 0 24px 70px rgba(0, 0, 0, .32);
  --radius: 24px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
html[data-theme="light"] { color-scheme: light; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 80% -10%, rgba(68, 119, 255, .16), transparent 28rem),
    radial-gradient(circle at 5% 50%, rgba(139, 92, 246, .08), transparent 30rem),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
::selection { background: rgba(34, 211, 238, .32); color: #fff; }

.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: 104px 0; position: relative; }
.section-sm { padding: 72px 0; }
.eyebrow {
  align-items: center; color: #78e8ff; display: inline-flex; font-size: .78rem;
  font-weight: 800; gap: 10px; letter-spacing: .18em; margin-bottom: 14px; text-transform: uppercase;
}
.eyebrow::before { background: linear-gradient(90deg, var(--cyan), var(--violet)); content: ""; height: 2px; width: 28px; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { letter-spacing: -.035em; line-height: 1.12; }
h1 { font-size: clamp(2.7rem, 6vw, 5.9rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.75rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); }
.gradient-text { background: linear-gradient(100deg, #fff 5%, #7de9ff 45%, #a686ff 92%); -webkit-background-clip: text; color: transparent; }
.muted { color: var(--muted); }
.lead { color: #bdc9d8; font-size: clamp(1.02rem, 1.8vw, 1.2rem); max-width: 700px; }
.section-head { align-items: end; display: flex; gap: 40px; justify-content: space-between; margin-bottom: 44px; }
.section-head h2 { margin-bottom: 0; max-width: 720px; }
.section-head .lead { margin: 0; max-width: 430px; }

.btn {
  align-items: center; border: 1px solid transparent; border-radius: 999px; cursor: pointer; display: inline-flex;
  font-size: .92rem; font-weight: 800; gap: 10px; justify-content: center; min-height: 50px; padding: 0 22px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(105deg, var(--cyan), var(--blue) 52%, var(--violet)); box-shadow: 0 14px 34px rgba(68, 119, 255, .28); color: #fff; }
.btn-primary:hover { box-shadow: 0 18px 44px rgba(68, 119, 255, .42); }
.btn-outline { background: rgba(255, 255, 255, .035); border-color: var(--line); }
.btn-outline:hover { background: rgba(255, 255, 255, .07); border-color: var(--line-bright); }
.text-link { align-items: center; color: #87e9ff; display: inline-flex; font-weight: 800; gap: 9px; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }

.topbar { background: #02050b; border-bottom: 1px solid rgba(255,255,255,.05); color: #9fb0c4; font-size: .78rem; }
.topbar-inner { align-items: center; display: flex; justify-content: space-between; min-height: 34px; }
.topbar-links { display: flex; gap: 24px; }
.status-dot { background: var(--green); border-radius: 99px; box-shadow: 0 0 12px var(--green); display: inline-block; height: 7px; margin-right: 7px; width: 7px; }
.site-header { backdrop-filter: blur(18px); background: rgba(4, 8, 17, .78); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1000; }
.nav { align-items: center; display: flex; height: 82px; justify-content: space-between; }
.brand { align-items: center; display: inline-flex; flex-shrink: 0; gap: 11px; }
.brand-mark { align-items: center; background: linear-gradient(140deg, var(--cyan), var(--blue) 47%, var(--violet)); border-radius: 14px; box-shadow: 0 10px 24px rgba(68,119,255,.25); display: grid; height: 42px; place-items: center; transform: rotate(-7deg); width: 42px; }
.brand-mark svg { transform: rotate(7deg); width: 25px; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.form-tuzagi { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.form-success.form-error { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); color: #ef4444; }
.brand-name { font-size: 1.25rem; font-weight: 900; letter-spacing: -.05em; }
.brand-name b { color: #8eeaff; }
.brand-sub { color: #8192a7; display: block; font-size: .58rem; font-weight: 700; letter-spacing: .13em; line-height: 1; margin-top: 2px; text-transform: uppercase; }
.nav-list { align-items: center; display: flex; gap: 5px; list-style: none; margin: 0; padding: 0; }
.nav-item { align-items: center; align-self: stretch; display: flex; position: static; }
.nav-link { align-items: center; border-radius: 10px; color: #dce5ef; display: flex; font-size: .84rem; font-weight: 750; gap: 5px; padding: 12px 9px; }
.nav-link:hover, .nav-link.active { background: rgba(255,255,255,.05); color: #fff; }
.chevron { border-bottom: 1.5px solid currentColor; border-right: 1.5px solid currentColor; height: 6px; margin: -3px 0 0 2px; transform: rotate(45deg); width: 6px; }
.mega {
  background: rgba(8, 16, 29, .97); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow);
  left: 50%; opacity: 0; padding: 24px; pointer-events: none; position: absolute; top: calc(100% - 4px);
  transform: translate(-50%, 14px); transition: opacity .2s ease, transform .2s ease; width: min(1120px, calc(100vw - 40px));
}
.mega::before { content: ""; height: 26px; left: 0; position: absolute; right: 0; top: -24px; }
.nav-item:hover .mega, .nav-item:focus-within .mega, .nav-item.open .mega { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.mega-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.mega-card { border: 1px solid transparent; border-radius: 17px; display: flex; gap: 13px; padding: 15px; transition: .2s ease; }
.mega-card:hover { background: rgba(255,255,255,.045); border-color: var(--line); }
.mega-icon { align-items: center; background: rgba(68,119,255,.12); border: 1px solid rgba(92,143,255,.2); border-radius: 12px; color: #8deaff; display: flex; flex: 0 0 40px; height: 40px; justify-content: center; }
.mega-icon svg { height: 20px; width: 20px; }
.mega-card strong { display: block; font-size: .9rem; margin-bottom: 2px; }
.mega-card small { color: #8092a8; display: block; font-size: .74rem; line-height: 1.45; }
.mega-feature { background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(139,92,246,.13)); border: 1px solid rgba(100,206,255,.2); border-radius: 18px; grid-column: span 1; padding: 20px; }
.mega-feature strong { font-size: 1.15rem; }
.nav-actions { align-items: center; display: flex; gap: 10px; }
.theme-toggle { align-items: center; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; display: flex; height: 44px; justify-content: center; position: relative; transition: transform .2s ease, background .2s ease, border-color .2s ease; width: 44px; }
.theme-toggle:hover { background: rgba(255,255,255,.09); border-color: var(--line-bright); transform: translateY(-2px); }
.theme-toggle svg { height: 20px; width: 20px; }
.theme-sun { display: none; }
html[data-theme="dark"] .theme-sun { display: block; }
html[data-theme="dark"] .theme-moon { display: none; }
.menu-toggle { align-items: center; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; display: none; height: 44px; justify-content: center; width: 44px; }
.menu-toggle span, .menu-toggle::before, .menu-toggle::after { background: #fff; content: ""; display: block; height: 2px; position: absolute; transition: .25s; width: 20px; }
.menu-toggle::before { transform: translateY(-6px); }
.menu-toggle::after { transform: translateY(6px); }
.menu-toggle.active span { opacity: 0; }
.menu-toggle.active::before { transform: rotate(45deg); }
.menu-toggle.active::after { transform: rotate(-45deg); }

.hero { min-height: 750px; overflow: hidden; position: relative; }
.hero-slider { height: 750px; position: relative; }
.slide { inset: 0; opacity: 0; position: absolute; transition: opacity .8s ease, transform 1.1s ease; transform: scale(1.02); }
.slide.active { opacity: 1; transform: scale(1); z-index: 1; }
.slide::before { background: linear-gradient(90deg, #030812 0%, rgba(3,8,18,.9) 38%, rgba(3,8,18,.24) 74%, rgba(3,8,18,.45)); content: ""; inset: 0; position: absolute; z-index: 1; }
.slide img { height: 100%; object-fit: cover; width: 100%; }
.slide-content { align-items: center; display: flex; inset: 0; position: absolute; z-index: 2; }
.slide-copy { max-width: 660px; padding-top: 35px; }
.slide-copy h1 { font-size: clamp(2.85rem, 5.5vw, 5.25rem); margin-bottom: 22px; }
.slide-copy p { color: #c2cfdd; font-size: clamp(1rem, 1.7vw, 1.2rem); max-width: 610px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 34px; }
.hero-pill { backdrop-filter: blur(10px); background: rgba(4, 12, 24, .6); border: 1px solid rgba(130,200,255,.17); border-radius: 999px; color: #b9c8d7; font-size: .78rem; padding: 8px 12px; }
.slider-controls { bottom: 38px; display: flex; gap: 10px; left: max(20px, calc((100vw - 1180px) / 2)); position: absolute; z-index: 5; }
.slider-dot { background: rgba(255,255,255,.25); border: 0; border-radius: 99px; cursor: pointer; height: 5px; padding: 0; transition: .3s; width: 26px; }
.slider-dot.active { background: linear-gradient(90deg, var(--cyan), var(--violet)); width: 54px; }
.hero-orbit { border: 1px solid rgba(34,211,238,.15); border-radius: 50%; height: 460px; pointer-events: none; position: absolute; right: -120px; top: 100px; width: 460px; z-index: 2; }

.brand-strip { background: #050b15; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); overflow: hidden; padding: 18px 0; }
.marquee { display: flex; overflow: hidden; }
.marquee-track { animation: marquee 25s linear infinite; display: flex; flex-shrink: 0; gap: 16px; min-width: max-content; padding-right: 16px; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.brand-chip { align-items: center; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 16px; display: flex; gap: 11px; min-width: 210px; padding: 13px 18px; }
.brand-chip i { background: linear-gradient(135deg, var(--cyan), var(--violet)); border-radius: 10px; height: 34px; opacity: .9; width: 34px; }
.brand-chip strong { display: block; font-size: .88rem; }
.brand-chip small { color: #73859b; display: block; font-size: .69rem; }
@keyframes marquee { to { transform: translateX(-100%); } }

.product-grid { display: grid; gap: 20px; grid-template-columns: repeat(12, 1fr); }
.product-card { background: linear-gradient(145deg, rgba(17,31,52,.84), rgba(7,14,26,.92)); border: 1px solid var(--line); border-radius: var(--radius); min-height: 420px; overflow: hidden; position: relative; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.product-card:hover { border-color: rgba(77,219,255,.32); box-shadow: 0 26px 80px rgba(0,0,0,.27); transform: translateY(-5px); }
.product-card.large { grid-column: span 7; }
.product-card.medium { grid-column: span 5; }
.product-card.third { grid-column: span 4; min-height: 350px; }
.product-card .product-media { height: 220px; overflow: hidden; position: relative; }
.product-card .product-media::after { background: linear-gradient(transparent, rgba(7,14,26,.95)); content: ""; inset: 40% 0 0; position: absolute; }
.product-card .product-media img { height: 100%; object-fit: cover; transition: transform .6s ease; width: 100%; }
.product-card:hover .product-media img { transform: scale(1.035); }
.product-content { padding: 28px; }
.product-content h3 { margin-bottom: 10px; }
.product-content p { color: #93a5ba; font-size: .92rem; }
.tag { background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.2); border-radius: 999px; color: #82eafa; display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; margin-bottom: 14px; padding: 5px 9px; text-transform: uppercase; }
.tag.orange { background: rgba(246,169,40,.1); border-color: rgba(246,169,40,.2); color: #ffc565; }
.tag.violet { background: rgba(139,92,246,.1); border-color: rgba(139,92,246,.22); color: #bfa9ff; }
.mini-ui { background: radial-gradient(circle at 80% 20%, rgba(139,92,246,.24), transparent 35%), #091322; display: grid; height: 190px; overflow: hidden; padding: 24px; place-items: center; position: relative; }
.mini-window { background: rgba(13,26,45,.9); border: 1px solid rgba(120,180,255,.22); border-radius: 16px; box-shadow: 0 25px 60px rgba(0,0,0,.35); padding: 14px; transform: rotate(-2deg); width: 88%; }
.mini-top { display: flex; gap: 5px; margin-bottom: 12px; }
.mini-top i { background: #52637a; border-radius: 50%; height: 6px; width: 6px; }
.mini-grid { display: grid; gap: 8px; grid-template-columns: 1fr 1fr 1fr; }
.mini-grid i { background: linear-gradient(135deg, rgba(34,211,238,.2), rgba(68,119,255,.08)); border: 1px solid rgba(80,180,255,.15); border-radius: 9px; height: 52px; }
.mini-grid i:first-child { grid-column: span 2; }

.solutions { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
.solution-card { background: rgba(13,25,43,.58); border: 1px solid var(--line); border-radius: 20px; padding: 26px; transition: .25s; }
.solution-card:hover { background: rgba(18,35,60,.72); border-color: rgba(139,210,255,.25); transform: translateY(-4px); }
.icon-box { align-items: center; background: linear-gradient(135deg, rgba(34,211,238,.17), rgba(139,92,246,.15)); border: 1px solid rgba(86,173,255,.22); border-radius: 14px; color: #91eaff; display: flex; height: 50px; justify-content: center; margin-bottom: 24px; width: 50px; }
.icon-box svg { height: 24px; width: 24px; }
.solution-card h3 { font-size: 1.12rem; margin-bottom: 10px; }
.solution-card p { color: #8fa1b6; font-size: .87rem; margin-bottom: 0; }
.solution-card .text-link { margin-top: 18px; }

.feature-matrix { display: grid; gap: 14px; grid-template-columns: repeat(5, 1fr); }
.feature-tile { background: linear-gradient(145deg, rgba(15,29,49,.82), rgba(7,14,26,.92)); border: 1px solid var(--line); border-radius: 18px; min-height: 205px; padding: 24px; position: relative; transition: .25s ease; }
.feature-tile:hover { border-color: rgba(83,203,255,.32); transform: translateY(-4px); }
.feature-tile .icon-box { height: 44px; margin-bottom: 24px; width: 44px; }
.feature-tile h3 { font-size: 1rem; letter-spacing: -.02em; margin-bottom: 9px; }
.feature-tile p { color: #8296ad; font-size: .8rem; margin: 0; }
.feature-tile .tile-no { color: #60758d; font-size: .66rem; font-weight: 900; position: absolute; right: 17px; top: 15px; }

.stats-wrap { background: linear-gradient(135deg, rgba(34,211,238,.08), rgba(68,119,255,.06) 45%, rgba(139,92,246,.08)); border: 1px solid var(--line); border-radius: 30px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 36px; }
.stat { border-right: 1px solid var(--line); padding: 10px 28px; }
.stat:last-child { border-right: 0; }
.stat strong { display: block; font-size: clamp(2rem, 4vw, 3.3rem); letter-spacing: -.06em; line-height: 1; }
.stat span { color: #8da0b6; font-size: .85rem; }

.process { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); }
.process-item { border-top: 1px solid var(--line); padding-top: 28px; position: relative; }
.process-no { align-items: center; background: #0b1729; border: 1px solid rgba(92,180,255,.22); border-radius: 99px; color: #86e9ff; display: flex; font-size: .72rem; font-weight: 900; height: 36px; justify-content: center; margin-bottom: 20px; width: 36px; }
.process-item p { color: #8497ae; font-size: .86rem; }

.quote-panel { align-items: center; background: linear-gradient(135deg, rgba(14,30,52,.9), rgba(11,18,35,.96)); border: 1px solid var(--line); border-radius: 30px; display: grid; gap: 42px; grid-template-columns: 1.25fr .75fr; overflow: hidden; padding: 60px; position: relative; }
.quote-panel::after { background: var(--violet); border-radius: 50%; content: ""; filter: blur(80px); height: 200px; opacity: .18; position: absolute; right: -60px; top: -80px; width: 200px; }
.quote-panel h2 { margin-bottom: 16px; }
.quote-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; position: relative; z-index: 2; }

.page-hero { border-bottom: 1px solid var(--line); overflow: hidden; padding: 110px 0 84px; position: relative; }
.page-hero::before { background: radial-gradient(circle, rgba(68,119,255,.24), transparent 64%); content: ""; height: 500px; position: absolute; right: -70px; top: -250px; width: 500px; }
.page-hero h1 { font-size: clamp(2.7rem, 6vw, 5rem); margin-bottom: 20px; max-width: 920px; }
.breadcrumbs { color: #7890aa; font-size: .8rem; margin-bottom: 24px; }
.breadcrumbs a { color: #9eeaff; }
.page-hero-grid { align-items: center; display: grid; gap: 60px; grid-template-columns: 1fr .78fr; }
.hero-card { background: linear-gradient(145deg, rgba(18,36,61,.82), rgba(8,15,28,.95)); border: 1px solid var(--line); border-radius: 26px; min-height: 300px; overflow: hidden; padding: 32px; position: relative; }
.hero-card img { border-radius: 18px; height: 100%; object-fit: cover; width: 100%; }

.content-grid { display: grid; gap: 50px; grid-template-columns: 1fr 1fr; }
.content-card { background: rgba(13,25,43,.55); border: 1px solid var(--line); border-radius: 22px; padding: 30px; }
.content-card p, .content-card li { color: #94a6ba; }
.check-list { display: grid; gap: 12px; list-style: none; padding: 0; }
.check-list li { padding-left: 27px; position: relative; }
.check-list li::before { color: var(--green); content: "✓"; font-weight: 900; left: 0; position: absolute; }
.values-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.value-card { background: rgba(12,24,42,.62); border: 1px solid var(--line); border-radius: 21px; padding: 30px; }
.value-card .number { color: #7ae9ff; display: block; font-size: .8rem; font-weight: 900; margin-bottom: 40px; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 34px; }
.filter-btn { background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; padding: 10px 16px; }
.filter-btn.active, .filter-btn:hover { background: rgba(34,211,238,.11); border-color: rgba(34,211,238,.3); color: #8eeaff; }
.catalog { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.catalog-card { background: rgba(13,25,43,.62); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; transition: .25s; }
.catalog-card:hover { border-color: rgba(90,194,255,.3); transform: translateY(-4px); }
.catalog-card.hide { display: none; }
.catalog-visual { height: 210px; overflow: hidden; }
.catalog-visual img { height: 100%; object-fit: cover; width: 100%; }
.catalog-card .product-content { padding: 25px; }

.project-list { display: grid; gap: 32px; }
.project-case { align-items: center; background: rgba(13,25,43,.55); border: 1px solid var(--line); border-radius: 28px; display: grid; gap: 40px; grid-template-columns: .9fr 1.1fr; overflow: hidden; padding: 24px; }
.project-case:nth-child(even) .case-media { order: 2; }
.case-media { border-radius: 18px; height: 330px; overflow: hidden; }
.case-media img { height: 100%; object-fit: cover; width: 100%; }
.case-copy { padding: 22px; }
.case-metrics { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; }
.case-metrics strong { display: block; font-size: 1.45rem; }
.case-metrics span { color: #7e92aa; font-size: .75rem; }
.case-copy .text-link { margin-top: 24px; }

.reference-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
.reference-card { align-items: center; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 18px; display: flex; justify-content: center; min-height: 150px; padding: 22px; text-align: center; }
.reference-card strong { color: #dfeaf5; letter-spacing: .02em; }
.reference-card small { color: #70849b; display: block; }
.testimonial-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.testimonial { background: rgba(13,25,43,.58); border: 1px solid var(--line); border-radius: 22px; padding: 30px; }
.testimonial p { color: #b1bfce; }
.testimonial footer { color: #7f93aa; font-size: .8rem; }
.stars { color: #ffc35b; letter-spacing: .1em; margin-bottom: 18px; }

.blog-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.blog-card { background: rgba(13,25,43,.58); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.blog-visual { align-items: flex-end; background: radial-gradient(circle at 70% 15%, rgba(139,92,246,.35), transparent 34%), linear-gradient(145deg,#0f2340,#09121f); display: flex; height: 210px; padding: 24px; }
.blog-visual svg { color: #83e9ff; height: 62px; opacity: .85; width: 62px; }
.blog-content { padding: 25px; }
.blog-meta { color: #71869e; font-size: .72rem; margin-bottom: 11px; text-transform: uppercase; }
.blog-content h3 { font-size: 1.22rem; }
.blog-content p { color: #8fa2b8; font-size: .86rem; }

.detail-shell { display: grid; gap: 46px; grid-template-columns: minmax(0, 1fr) 300px; }
.detail-main { min-width: 0; }
.detail-main > section { margin-bottom: 52px; }
.detail-main h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin-bottom: 18px; }
.detail-main p { color: #a6b6c8; }
.detail-sidebar { align-self: start; position: sticky; top: 118px; }
.detail-nav { background: rgba(13,25,43,.72); border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.detail-nav strong { display: block; font-size: .86rem; margin-bottom: 14px; }
.detail-nav a { border-top: 1px solid var(--line); color: #8ca0b7; display: block; font-size: .82rem; padding: 12px 0; }
.detail-nav a:hover { color: #8eeaff; }
.detail-kpis { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin: 28px 0; }
.detail-kpi { background: rgba(13,25,43,.58); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.detail-kpi strong { display: block; font-size: 1.25rem; }
.detail-kpi span { color: #7f93aa; font-size: .74rem; }
.detail-visual { margin: -10px 0 52px; }
.detail-visual-frame { background: rgba(13,25,43,.58); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; padding: 10px; }
.detail-visual img { aspect-ratio: 16 / 9; border-radius: 16px; display: block; object-fit: cover; object-position: center top; width: 100%; }
.detail-visual figcaption { color: #7f93aa; font-size: .76rem; line-height: 1.6; padding: 12px 8px 0; }
.detail-blocks { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.detail-block { background: rgba(13,25,43,.5); border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.detail-block h3 { font-size: 1.08rem; }
.detail-block p { font-size: .88rem; margin-bottom: 0; }
.article-layout { display: grid; gap: 52px; grid-template-columns: minmax(0, 760px) 1fr; }
.article-body { color: #adbdcd; font-size: 1.04rem; }
.article-body h2 { color: #f4f8fc; font-size: clamp(1.55rem, 3vw, 2.25rem); margin: 46px 0 16px; }
.article-body h3 { color: #eaf1f8; font-size: 1.25rem; margin: 30px 0 12px; }
.article-body p { margin-bottom: 20px; }
.article-body ul, .article-body ol { margin-bottom: 24px; padding-left: 22px; }
.article-body li { margin: 9px 0; }
.article-note { background: linear-gradient(135deg, rgba(34,211,238,.09), rgba(139,92,246,.08)); border: 1px solid rgba(83,203,255,.22); border-radius: 18px; margin: 30px 0; padding: 24px; }
.article-meta-row { color: #7f93aa; display: flex; flex-wrap: wrap; font-size: .78rem; gap: 18px; margin-top: 24px; }

.contact-layout { display: grid; gap: 30px; grid-template-columns: .8fr 1.2fr; }
.contact-panel, .contact-form { background: rgba(13,25,43,.64); border: 1px solid var(--line); border-radius: 26px; padding: 36px; }
.contact-items { display: grid; gap: 22px; margin-top: 34px; }
.contact-item { display: flex; gap: 15px; }
.contact-item strong { display: block; }
.contact-item span { color: #8397ae; font-size: .84rem; }
.form-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.field.full { grid-column: 1 / -1; }
.field label { color: #aebdcd; display: block; font-size: .8rem; font-weight: 750; margin-bottom: 7px; }
.field input, .field textarea, .field select { background: rgba(3,9,18,.58); border: 1px solid var(--line); border-radius: 13px; color: #fff; outline: 0; padding: 14px 15px; transition: .2s; width: 100%; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: rgba(34,211,238,.55); box-shadow: 0 0 0 3px rgba(34,211,238,.08); }
.field textarea { min-height: 145px; resize: vertical; }
.form-note { color: #71869d; font-size: .74rem; margin-top: 13px; }
.form-success { background: rgba(34,211,154,.1); border: 1px solid rgba(34,211,154,.3); border-radius: 12px; color: #84f0c8; display: none; margin-bottom: 18px; padding: 12px 14px; }
.form-success.show { display: block; }

.site-footer { background: #02050b; border-top: 1px solid var(--line); padding: 76px 0 26px; }
.footer-grid { display: grid; gap: 40px; grid-template-columns: 1.4fr repeat(3, .8fr); }
.footer-about { color: #7f91a7; font-size: .86rem; max-width: 350px; }
.footer-col h4 { font-size: .92rem; letter-spacing: 0; margin-bottom: 18px; }
.footer-col a { color: #8194aa; display: block; font-size: .82rem; margin: 10px 0; }
.footer-col a:hover { color: #8eeaff; }
.footer-bottom { align-items: center; border-top: 1px solid var(--line); color: #65788e; display: flex; font-size: .74rem; justify-content: space-between; margin-top: 56px; padding-top: 22px; }
.socials { display: flex; gap: 8px; }
.socials a { align-items: center; border: 1px solid var(--line); border-radius: 10px; display: flex; height: 35px; justify-content: center; width: 35px; }
.socials a:hover { border-color: var(--line-bright); color: #8eeaff; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.back-top { align-items: center; background: #102039; border: 1px solid var(--line); border-radius: 12px; bottom: 22px; cursor: pointer; display: flex; height: 43px; justify-content: center; opacity: 0; position: fixed; right: 22px; transform: translateY(10px); transition: .2s; visibility: hidden; width: 43px; z-index: 800; }
.back-top.show { opacity: 1; transform: none; visibility: visible; }

html[data-theme="light"] {
  --bg: #eef5fb;
  --bg-soft: #f7fbff;
  --surface: rgba(255, 255, 255, .7);
  --surface-strong: rgba(255, 255, 255, .9);
  --surface-light: #e8f1fa;
  --text: #10233b;
  --muted: #60748b;
  --cyan: #069cc2;
  --blue: #3267e8;
  --violet: #7753dc;
  --green: #0b9f72;
  --orange: #d98208;
  --line: rgba(36, 78, 118, .13);
  --line-bright: rgba(30, 137, 188, .35);
  --shadow: 0 26px 70px rgba(56, 84, 114, .17);
}
html[data-theme="light"] body {
  background:
    radial-gradient(circle at 82% -8%, rgba(59, 130, 246, .18), transparent 31rem),
    radial-gradient(circle at 4% 52%, rgba(139, 92, 246, .11), transparent 33rem),
    linear-gradient(180deg, #f8fbff 0%, #edf5fb 50%, #f7fbff 100%);
  color: var(--text);
}
html[data-theme="light"] ::selection { background: rgba(6, 156, 194, .22); color: #10233b; }
html[data-theme="light"] .gradient-text { background: linear-gradient(100deg, #143f68 4%, #007f9f 47%, #6842cb 94%); -webkit-background-clip: text; color: transparent; }
html[data-theme="light"] .eyebrow { color: #087f9e; }
html[data-theme="light"] .lead,
html[data-theme="light"] .slide-copy p,
html[data-theme="light"] .muted { color: #526a83; }
html[data-theme="light"] .topbar { background: rgba(239, 247, 253, .86); border-color: rgba(28, 70, 112, .1); color: #61768d; }
html[data-theme="light"] .site-header { background: rgba(255, 255, 255, .74); border-color: rgba(28, 70, 112, .12); box-shadow: 0 10px 35px rgba(69, 99, 130, .08); }
html[data-theme="light"] .brand-sub { color: #698098; }
html[data-theme="light"] .brand-name b { color: #087fba; }
html[data-theme="light"] .nav-link { color: #29445f; }
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active { background: rgba(42, 103, 164, .08); color: #102d4b; }
html[data-theme="light"] .mega { background: rgba(250, 253, 255, .94); border-color: rgba(33, 82, 128, .15); box-shadow: 0 28px 80px rgba(42, 69, 98, .2); }
html[data-theme="light"] .mega-card:hover { background: rgba(50, 103, 160, .06); border-color: rgba(32, 103, 158, .15); }
html[data-theme="light"] .mega-card small { color: #6c8096; }
html[data-theme="light"] .mega-icon { background: rgba(30, 110, 171, .1); border-color: rgba(27, 96, 151, .24); color: #145b86; }
html[data-theme="light"] .mega-feature { background: linear-gradient(135deg, rgba(34, 211, 238, .11), rgba(139, 92, 246, .1)); border-color: rgba(49, 132, 182, .18); }
html[data-theme="light"] .nav-list.mobile-open { background: rgba(248,252,255,.98); border-color: rgba(36,78,118,.12); }
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .menu-toggle { background: rgba(255,255,255,.68); border-color: rgba(35, 84, 129, .16); color: #234a70; }
html[data-theme="light"] .menu-toggle span,
html[data-theme="light"] .menu-toggle::before,
html[data-theme="light"] .menu-toggle::after { background: #234a70; }
html[data-theme="light"] .btn-outline { background: rgba(255,255,255,.5); border-color: rgba(35,84,129,.17); color: #1b3d5e; }
html[data-theme="light"] .btn-outline:hover { background: rgba(255,255,255,.82); border-color: rgba(23,125,173,.35); }
html[data-theme="light"] .slide::before { background: linear-gradient(90deg, rgba(246,250,254,.99) 0%, rgba(246,250,254,.92) 39%, rgba(246,250,254,.2) 77%, rgba(246,250,254,.35)); }
html[data-theme="light"] .hero-pill { background: rgba(255,255,255,.72); border-color: rgba(33,101,151,.16); color: #45627e; box-shadow: 0 8px 30px rgba(62,91,121,.08); }
html[data-theme="light"] .hero-orbit { border-color: rgba(6,156,194,.16); }
html[data-theme="light"] .brand-strip { background: rgba(247,251,255,.7); border-color: rgba(34,73,112,.11); }
html[data-theme="light"] .brand-chip { background: rgba(255,255,255,.66); border-color: rgba(36,78,118,.12); box-shadow: 0 10px 28px rgba(57,83,110,.07); }
html[data-theme="light"] .brand-chip small { color: #6c8197; }
html[data-theme="light"] .icon-box { background: linear-gradient(135deg, rgba(20, 118, 169, .12), rgba(104, 66, 203, .09)); border-color: rgba(24, 103, 157, .24); color: #0b648d; }
html[data-theme="light"] .feature-tile .tile-no { color: #405f7d; }
html[data-theme="light"] .tag { background: rgba(0, 132, 169, .1); border-color: rgba(0, 112, 151, .26); color: #08728f; }
html[data-theme="light"] .tag.orange { background: rgba(217, 130, 8, .1); border-color: rgba(183, 101, 0, .26); color: #a75c00; }
html[data-theme="light"] .tag.violet { background: rgba(104, 66, 203, .1); border-color: rgba(92, 52, 183, .25); color: #6035b3; }
html[data-theme="light"] .product-card,
html[data-theme="light"] .solution-card,
html[data-theme="light"] .feature-tile,
html[data-theme="light"] .content-card,
html[data-theme="light"] .value-card,
html[data-theme="light"] .catalog-card,
html[data-theme="light"] .project-case,
html[data-theme="light"] .reference-card,
html[data-theme="light"] .testimonial,
html[data-theme="light"] .blog-card,
html[data-theme="light"] .contact-panel,
html[data-theme="light"] .contact-form,
html[data-theme="light"] .detail-nav,
html[data-theme="light"] .detail-kpi,
html[data-theme="light"] .detail-block { background: rgba(255,255,255,.64); border-color: rgba(36,78,118,.13); box-shadow: 0 18px 55px rgba(64,91,119,.08); backdrop-filter: blur(15px); }
html[data-theme="light"] .detail-visual-frame { background: rgba(255,255,255,.64); border-color: rgba(36,78,118,.14); box-shadow: 0 24px 65px rgba(64,91,119,.12); }
html[data-theme="light"] .detail-visual figcaption { color: #536f89; }
html[data-theme="light"] .product-card { background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(239,247,253,.76)); }
html[data-theme="light"] .product-media::after { background: linear-gradient(transparent, rgba(243,249,253,.94)); }
html[data-theme="light"] .product-content p,
html[data-theme="light"] .solution-card p,
html[data-theme="light"] .feature-tile p,
html[data-theme="light"] .process-item p,
html[data-theme="light"] .content-card p,
html[data-theme="light"] .content-card li,
html[data-theme="light"] .blog-content p,
html[data-theme="light"] .detail-main p,
html[data-theme="light"] .article-body { color: #63788e; }
html[data-theme="light"] .stats-wrap { background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(227,242,250,.64), rgba(240,234,255,.55)); border-color: rgba(36,78,118,.13); box-shadow: 0 22px 65px rgba(64,91,119,.09); backdrop-filter: blur(15px); }
html[data-theme="light"] .stat span,
html[data-theme="light"] .case-metrics span,
html[data-theme="light"] .detail-kpi span,
html[data-theme="light"] .article-meta-row { color: #647c93; }
html[data-theme="light"] .process-item { border-color: rgba(36,78,118,.15); }
html[data-theme="light"] .process-no { background: rgba(255,255,255,.72); border-color: rgba(35,113,164,.2); color: #087f9e; }
html[data-theme="light"] .quote-panel { background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(235,244,252,.76)); border-color: rgba(36,78,118,.13); box-shadow: 0 26px 70px rgba(64,91,119,.12); backdrop-filter: blur(17px); }
html[data-theme="light"] .page-hero { border-color: rgba(36,78,118,.12); }
html[data-theme="light"] .page-hero::before { background: radial-gradient(circle, rgba(68,119,255,.17), transparent 66%); }
html[data-theme="light"] .hero-card { background: rgba(255,255,255,.61); border-color: rgba(36,78,118,.13); box-shadow: 0 24px 65px rgba(64,91,119,.1); backdrop-filter: blur(16px); }
html[data-theme="light"] section[style*="background:rgba(7,16,29"] { background: rgba(255,255,255,.34) !important; }
html[data-theme="light"] .breadcrumbs { color: #667f96; }
html[data-theme="light"] .breadcrumbs a,
html[data-theme="light"] .text-link { color: #087f9e; }
html[data-theme="light"] .testimonial p { color: #526a83; }
html[data-theme="light"] .reference-card strong { color: #173b5d; }
html[data-theme="light"] .reference-card small { color: #526f89; }
html[data-theme="light"] .testimonial footer,
html[data-theme="light"] .blog-meta,
html[data-theme="light"] .form-note { color: #6b8197; }
html[data-theme="light"] .field label { color: #49647f; }
html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .field select { background: rgba(255,255,255,.75); border-color: rgba(36,78,118,.15); color: #14324f; }
html[data-theme="light"] .detail-nav a { border-color: rgba(36,78,118,.12); color: #5f778e; }
html[data-theme="light"] .article-body h2,
html[data-theme="light"] .article-body h3 { color: #173653; }
html[data-theme="light"] .article-note { background: linear-gradient(135deg, rgba(34,211,238,.1), rgba(139,92,246,.08)); border-color: rgba(30,127,176,.2); }
html[data-theme="light"] .site-footer { background: rgba(241,247,252,.78); border-color: rgba(36,78,118,.12); backdrop-filter: blur(18px); }
html[data-theme="light"] .footer-about,
html[data-theme="light"] .footer-col a { color: #60778e; }
html[data-theme="light"] .footer-bottom { border-color: rgba(36,78,118,.12); color: #667e94; }
html[data-theme="light"] .socials a { border-color: rgba(36,78,118,.15); }
html[data-theme="light"] .back-top { background: rgba(255,255,255,.85); border-color: rgba(36,78,118,.16); color: #234a70; box-shadow: 0 10px 30px rgba(57,83,110,.12); }

@media (max-width: 1050px) {
  .nav-list { display: none; }
  .menu-toggle { display: flex; position: relative; }
  .nav-actions .btn { display: none; }
  .nav-list.mobile-open { align-items: stretch; background: rgba(4,8,17,.98); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0; height: calc(100vh - 82px); left: 0; overflow-y: auto; padding: 18px 20px 40px; position: absolute; top: 82px; width: 100%; }
  .nav-link { font-size: 1rem; justify-content: space-between; padding: 15px 4px; }
  .mega { background: transparent; border: 0; box-shadow: none; display: none; opacity: 1; padding: 0 0 12px; position: static; transform: none; width: 100%; }
  .mega::before { display: none; }
  .nav-item.open .mega { display: block; transform: none; }
  .mega-grid { grid-template-columns: 1fr 1fr; }
  .mega-feature { display: none; }
  .solutions { grid-template-columns: repeat(2, 1fr); }
  .feature-matrix { grid-template-columns: repeat(3, 1fr); }
  .catalog, .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .product-card.large, .product-card.medium { grid-column: span 6; }
  .product-card.third { grid-column: span 6; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-col:last-child { grid-column: 2 / -1; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 28px, 1180px); }
  .topbar { display: none; }
  .nav { height: 70px; }
  .nav-list.mobile-open { height: calc(100vh - 70px); top: 70px; }
  .brand-mark { border-radius: 11px; height: 37px; width: 37px; }
  .brand-name { font-size: 1.1rem; }
  .mega-grid { grid-template-columns: 1fr; }
  .section { padding: 78px 0; }
  .section-sm { padding: 54px 0; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 32px; }
  .hero, .hero-slider { height: 690px; min-height: 690px; }
  .slide::before { background: linear-gradient(0deg,#030812 4%, rgba(3,8,18,.86) 54%, rgba(3,8,18,.35)); }
  .slide img { object-position: 60% center; }
  .slide-content { align-items: flex-end; padding-bottom: 85px; }
  .slide-copy { padding: 0; }
  .slide-copy h1 { font-size: 2.65rem; }
  .slide-copy p { font-size: .98rem; }
  .hero-pills { display: none; }
  .slider-controls { bottom: 35px; }
  .product-card.large, .product-card.medium, .product-card.third { grid-column: 1 / -1; min-height: auto; }
  .solutions, .process, .values-grid, .reference-grid, .testimonial-grid, .catalog, .blog-grid { grid-template-columns: 1fr; }
  .feature-matrix { grid-template-columns: 1fr 1fr; }
  .stats-wrap { grid-template-columns: 1fr 1fr; padding: 20px; }
  .stat { border-bottom: 1px solid var(--line); border-right: 0; padding: 22px 18px; }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
  .quote-panel, .page-hero-grid, .content-grid, .contact-layout { grid-template-columns: 1fr; }
  .quote-panel { padding: 34px 26px; }
  .quote-actions { justify-content: flex-start; }
  .page-hero { padding: 78px 0 60px; }
  .hero-card { min-height: 230px; }
  .project-case { grid-template-columns: 1fr; padding: 16px; }
  .project-case:nth-child(even) .case-media { order: 0; }
  .case-media { height: 240px; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-col:last-child { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 14px; }
  .detail-shell, .article-layout { grid-template-columns: 1fr; }
  .detail-sidebar { position: static; }
  .detail-kpis { grid-template-columns: 1fr; }
  .detail-blocks { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .feature-matrix { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}