
:root{
  --bg:#02070f;
  --bg-2:#040d18;
  --bg-3:#061225;
  --panel:#071321;
  --panel-2:#091828;
  --panel-soft:rgba(7,19,33,.78);
  --line:rgba(42,102,214,.26);
  --line-strong:rgba(56,134,255,.42);
  --text:#eef5ff;
  --muted:#9fb3d0;
  --muted-2:#7f92ae;
  --blue:#0e63ff;
  --blue-2:#15a1ff;
  --blue-3:#6ddfff;
  --glow:0 24px 60px rgba(3,12,30,.58);
  --radius:16px;
  --radius-sm:12px;
  --container:1055px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Arial Nova", Arial, Helvetica, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 18% -2%, rgba(13,99,255,.24), transparent 22%),
    radial-gradient(circle at 84% 8%, rgba(15,161,255,.12), transparent 16%),
    linear-gradient(180deg,#02050a 0%,#02070f 35%,#030914 100%);
}
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.02), transparent 20%),
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.015), transparent 18%),
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size:auto, auto, 80px 80px, 80px 80px;
  opacity:.22;
  pointer-events:none;
  z-index:-2;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(17,115,255,.09), transparent 30%),
    radial-gradient(circle at 90% 35%, rgba(17,115,255,.08), transparent 20%),
    radial-gradient(circle at 12% 50%, rgba(17,115,255,.04), transparent 18%);
  pointer-events:none;
  z-index:-1;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
.container{width:min(calc(100% - 40px), var(--container)); margin:0 auto}
.page{position:relative; overflow:hidden}
.page::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:220px;
  background:url("../images/particles-top.svg") center top / cover no-repeat;
  opacity:.92;
  pointer-events:none;
}
.page::after{
  content:"";
  position:absolute; inset:64px 0 auto 0; height:420px;
  background:url("../images/circuits-subtle.svg") center top / cover no-repeat;
  opacity:.22;
  pointer-events:none;
}
.section{position:relative; padding:38px 0; border-top:1px solid rgba(14,99,255,.08)}
.section-tight{padding:28px 0}
.section:first-of-type{border-top:0}
.eyebrow{margin:0 0 10px; color:#0f7aff; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700}
.h1,.h2,.h3,h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.03em}
h1{font-size:68px; line-height:.98}
h1 .accent{color:#0f74ff}
h2{font-size:38px; line-height:1.06}
h3{font-size:20px; line-height:1.18}
p{margin:0}
.lead{color:#d1ddf2; font-size:18px; line-height:1.55}
.copy{color:var(--muted); font-size:16px; line-height:1.62}
.small{color:var(--muted); font-size:14px; line-height:1.55}
.muted{color:var(--muted)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:50px; padding:0 22px; border-radius:10px; border:1px solid transparent;
  font-size:16px; font-weight:700; transition:.2s ease; white-space:nowrap
}
.btn svg{width:15px; height:15px}
.btn-primary{
  background:linear-gradient(90deg,#0d59ff 0%,#1d72ff 55%,#0a5ae5 100%);
  box-shadow:0 12px 30px rgba(13,89,255,.28), inset 0 0 0 1px rgba(255,255,255,.08);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 36px rgba(13,89,255,.34)}
.btn-secondary{
  background:rgba(7,18,32,.72);
  border-color:rgba(59,130,255,.46);
}
.btn-secondary:hover{transform:translateY(-2px); background:rgba(9,22,40,.92); border-color:rgba(102,188,255,.55)}
.btn-sm{min-height:42px; padding:0 16px; font-size:14px}
.panel{
  background:linear-gradient(180deg, rgba(8,19,34,.86), rgba(5,13,23,.96));
  border:1px solid rgba(44,102,214,.2);
  border-radius:var(--radius);
  box-shadow:var(--glow);
}
.panel::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(14,99,255,.42), rgba(109,223,255,.08), rgba(14,99,255,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.card-soft{
  background:linear-gradient(180deg, rgba(6,15,27,.88), rgba(4,11,20,.95));
  border:1px solid rgba(44,102,214,.16); border-radius:14px;
}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px}
.section-head .title-wrap{max-width:520px}
.section-link{color:#0f7aff; font-size:13px; font-weight:700}
.section-link:hover{color:#68d7ff}
.site-header{
  position:sticky; top:0; z-index:80;
  background:rgba(3,9,17,.84); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(23,81,177,.24)
}
.site-header::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(20,99,255,.45), transparent)
}
.header-inner{display:flex; align-items:center; gap:24px; min-height:58px}
.brand img{width:118px; height:auto}
.main-nav{display:flex; align-items:center; gap:6px; margin-left:auto}
.main-nav a{padding:9px 11px; font-size:13px; color:#f2f6ff; border-radius:8px}
.main-nav a:hover,.main-nav a.active{color:#0f7aff; background:rgba(15,116,255,.08)}
.header-cta{margin-left:10px}
.nav-toggle{display:none; margin-left:auto; width:42px; height:42px; border-radius:10px; border:1px solid rgba(59,130,255,.3); background:rgba(8,17,32,.86); color:#eef5ff; align-items:center; justify-content:center}
.nav-toggle span{display:block; width:18px; height:2px; background:currentColor; margin:3px 0; border-radius:2px}
.hero{padding:26px 0 18px; background:linear-gradient(180deg, rgba(6,13,26,.72), rgba(4,10,18,.24) 20%, rgba(4,10,18,0) 28%)}
.hero .container{position:relative}
.hero .container::before{
  content:""; position:absolute; left:-6px; top:48px; width:430px; height:330px;
  background:url("../images/hero-lines.svg") left top / contain no-repeat; opacity:.56; pointer-events:none
}
.hero-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:18px; align-items:center; min-height:540px}
.hero-copy{max-width:440px; padding:66px 0 72px 2px; position:relative; z-index:2}
.hero-copy .lead{max-width:428px; margin-top:18px}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero-visual{position:relative; min-height:420px}
.hero-visual::before{
  content:""; position:absolute; inset:62px 18px 46px 20px;
  background:
    radial-gradient(circle at 40% 55%, rgba(25,161,255,.26), transparent 24%),
    radial-gradient(circle at 70% 45%, rgba(25,161,255,.16), transparent 25%),
    linear-gradient(90deg, rgba(22,90,255,.14), rgba(25,161,255,.08));
  filter:blur(6px)
}
.hero-visual::after{
  content:""; position:absolute; left:86px; right:46px; bottom:40px; height:74px;
  background:radial-gradient(ellipse at center, rgba(15,116,255,.30), rgba(4,10,18,0) 70%);
  filter:blur(12px)
}
.hero-device{
  position:absolute; inset:30px 0 0 0;
  display:flex; align-items:flex-end; justify-content:flex-end; z-index:2
}
.hero-device img{width:640px; max-width:100%; filter:drop-shadow(0 22px 35px rgba(0,0,0,.55))}
.hero-chip{
  position:absolute; right:12px; top:46px; width:140px; opacity:.95; filter:drop-shadow(0 0 18px rgba(25,161,255,.25));
}
.hero-wave{
  position:absolute; inset:160px -20px 0 160px; background:url("../images/hero-lines.svg") center bottom / cover no-repeat; opacity:.82
}
.services-strip{padding:18px 0 12px}
.services-strip::before{
  content:""; position:absolute; inset:0; background:url("../images/services-lines.svg") center center / cover no-repeat; opacity:.54; pointer-events:none
}
.services-head{margin-bottom:10px}
.services-head h2{font-size:22px; line-height:1.2}
.services-row{display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid rgba(22,88,188,.22); border-bottom:1px solid rgba(22,88,188,.22)}
.service-mini{padding:26px 20px 20px; position:relative; min-height:160px}
.service-mini:not(:last-child)::after{content:""; position:absolute; top:18px; right:0; width:1px; height:118px; background:linear-gradient(180deg, transparent, rgba(44,102,214,.34), transparent)}
.service-mini .icon{width:54px; height:54px; color:#2a86ff; margin-bottom:14px}
.service-mini h3{font-size:18px; margin-bottom:8px}
.service-mini p{color:#ccd9f0; font-size:14px; line-height:1.45; max-width:170px}
.pro-section{padding:30px 0 24px}
.pro-section .container{position:relative}
.pro-section .container::after{
  content:""; position:absolute; right:-30px; top:26px; width:480px; height:260px;
  background:url("../images/contour.svg") right center / contain no-repeat; opacity:.26; pointer-events:none
}
.pro-grid{display:grid; grid-template-columns:.95fr 1.15fr; gap:16px; align-items:center}
.pro-copy{max-width:430px; padding:10px 0 16px}
.pro-copy h2{font-size:53px; line-height:.98; margin-bottom:16px}
.pro-copy .copy{margin-bottom:18px}
.check-list{list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px}
.check-list li{position:relative; padding-left:22px; color:#d2def3; font-size:15px; line-height:1.45}
.check-list li::before{content:"✓"; position:absolute; left:0; top:0; color:#2bc4ff; font-weight:700}
.pro-stage{position:relative; min-height:320px}
.pro-stage::before{content:""; position:absolute; left:0; top:50px; width:140px; height:110px; background:radial-gradient(circle at center, rgba(17,113,255,.22), transparent 66%); filter:blur(4px)}
.pro-stage img{width:610px; margin-left:auto; filter:drop-shadow(0 20px 38px rgba(0,0,0,.5))}
.story{padding:22px 0 16px}
.story-grid{display:grid; grid-template-columns:1.22fr repeat(3,.72fr); gap:0; align-items:start; border-top:1px solid rgba(22,88,188,.18); padding-top:18px}
.story-copy{padding-right:28px}
.story-copy h2{font-size:25px; line-height:1.18}
.story-card{padding:0 20px 0 22px; position:relative}
.story-card:not(:last-child)::after{content:""; position:absolute; top:4px; right:0; width:1px; height:84px; background:linear-gradient(180deg, transparent, rgba(44,102,214,.3), transparent)}
.story-card h3{font-size:17px; margin:0 0 8px}
.story-card p{color:#d0dbef; font-size:13px; line-height:1.45}
.story-icon{width:32px; height:32px; color:#2a86ff; margin-bottom:8px}
.bottom-grid{padding:18px 0 12px}
.bottom-columns{display:grid; grid-template-columns:1.22fr .94fr 1.04fr; gap:14px}
.bottom-columns .panel{position:relative; padding:18px}
.ref-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.ref-card{display:block; border-radius:12px; overflow:hidden; background:rgba(9,20,35,.7); border:1px solid rgba(44,102,214,.16); transition:transform .18s ease, border-color .18s ease}
.ref-card:hover{transform:translateY(-2px); border-color:rgba(91,170,255,.38)}
.ref-card img{width:100%; height:128px; object-fit:cover}
.ref-card .text{padding:10px 10px 12px}
.ref-card strong{display:block; font-size:13px; margin-bottom:4px}
.ref-card span{display:block; color:var(--muted); font-size:13px; line-height:1.4}
.partner-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px 18px; padding:18px 6px 6px 0}
.partner{min-height:50px; display:flex; align-items:center; justify-content:center; text-align:center; border:1px solid rgba(44,102,214,.14); border-radius:12px; color:#f3f7ff; background:rgba(5,13,24,.56); font-size:18px; font-weight:700; letter-spacing:.01em}
.partner small{display:block; font-size:11px; font-weight:600; color:#9db1cd; line-height:1.2}
.news-list{display:grid; gap:10px}
.news-item{display:grid; grid-template-columns:78px 1fr; gap:12px; padding:8px; border-radius:12px; border:1px solid rgba(44,102,214,.12); background:rgba(6,15,28,.45)}
.news-item img{width:78px; height:78px; object-fit:cover; border-radius:10px}
.news-item time{display:block; color:#0f7aff; font-size:12px; margin-bottom:5px}
.news-item strong{display:block; font-size:14px; line-height:1.42}
.cta-band{padding:18px 0 8px}
.cta-panel{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; padding:24px; position:relative; overflow:hidden}
.cta-panel::after{content:""; position:absolute; right:-40px; bottom:-80px; width:380px; height:240px; background:radial-gradient(circle at center, rgba(18,112,255,.25), transparent 60%)}
.cta-panel h2{font-size:30px; line-height:1.08; margin-bottom:8px}
.cta-points{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 18px; margin-top:14px}
.cta-point{display:flex; gap:10px; align-items:flex-start; color:#d3dff3; font-size:14px; line-height:1.45}
.cta-point svg{width:18px; height:18px; color:#2bc4ff; margin-top:1px}
.footer{padding:18px 0 22px; border-top:1px solid rgba(22,88,188,.18); background:linear-gradient(180deg, rgba(3,9,17,.35), rgba(3,9,17,.8))}
.footer-main{display:grid; grid-template-columns:1.2fr .9fr .82fr 1.1fr; gap:22px; align-items:start}
.footer-brand img{width:126px; margin-bottom:16px}
.footer-brand p{max-width:270px; color:#ccd7eb; font-size:14px; line-height:1.55}
.socials{display:flex; gap:10px; margin-top:16px}
.socials a{width:28px; height:28px; border-radius:999px; border:1px solid rgba(44,102,214,.22); display:flex; align-items:center; justify-content:center; color:#0f7aff; font-size:13px; font-weight:700}
.footer-title{margin:0 0 12px; font-size:13px; color:#0f7aff; letter-spacing:.1em; text-transform:uppercase; font-weight:700}
.footer-contact-list,.footer-nav{display:grid; gap:10px}
.footer-contact-list a,.footer-contact-list div{display:grid; grid-template-columns:18px 1fr; gap:10px; align-items:start; color:#d8e2f5; font-size:14px}
.footer-contact-list svg{width:18px; height:18px; color:#0f7aff}
.footer-nav a{color:#d8e2f5; font-size:14px}
.newsletter p{color:#ccd7eb; font-size:14px; line-height:1.55}
.newsletter-form{display:flex; gap:10px; margin-top:14px}
.newsletter-form input,
.field input,
.field textarea,
.field select{
  width:100%; min-height:46px; border-radius:10px; padding:0 14px;
  border:1px solid rgba(44,102,214,.2); background:rgba(4,11,21,.72); color:var(--text)
}
.field textarea{min-height:132px; padding-top:12px; resize:vertical}
.newsletter-form input::placeholder,.field input::placeholder,.field textarea::placeholder{color:#879ab7}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:16px; margin-top:16px; border-top:1px solid rgba(44,102,214,.14)}
.footer-bottom p,.footer-bottom a{color:#90a4c1; font-size:13px}
.footer-bottom-links{display:flex; gap:18px}
.page-hero{padding:42px 0 26px; position:relative}
.page-hero::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,12,24,.84), rgba(4,10,18,.18));}
.page-hero .container{position:relative; z-index:1}
.page-hero-grid{display:grid; grid-template-columns:1fr .94fr; gap:22px; align-items:center; min-height:360px}
.page-hero-copy{max-width:560px; padding:34px 0}
.page-hero-copy h1{font-size:58px; line-height:.98; margin-bottom:16px}
.page-hero-copy p{max-width:520px}
.page-hero-figure{position:relative; min-height:280px}
.page-hero-figure img{width:100%; max-width:520px; margin-left:auto; filter:drop-shadow(0 24px 38px rgba(0,0,0,.42)); border-radius:18px}
.page-hero-figure.simple-card img{background:rgba(4,10,18,.35); padding:18px}
.content-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:18px}
.content-grid .panel,.stack .panel,.matrix .panel,.contact-grid .panel{position:relative; padding:24px}
.stack{display:grid; gap:18px}
.detail-list{display:grid; gap:14px; margin-top:18px}
.detail-item{display:grid; grid-template-columns:58px 1fr; gap:16px; padding:14px; border-radius:14px; border:1px solid rgba(44,102,214,.14); background:rgba(6,14,25,.46)}
.detail-item .icon{width:58px; height:58px; color:#2a86ff}
.detail-item p{color:#ced9ee; font-size:15px; line-height:1.56}
.matrix{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.matrix.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{position:relative; padding:20px; border-radius:16px; background:linear-gradient(180deg, rgba(8,18,32,.88), rgba(5,12,23,.98)); border:1px solid rgba(44,102,214,.16); box-shadow:var(--glow)}
.tile .icon{width:56px; height:56px; color:#2a86ff; margin-bottom:14px}
.tile h3{margin-bottom:10px}
.tile p{color:#d0dbef; font-size:15px; line-height:1.58}
.tile ul{margin:12px 0 0; padding-left:18px; color:#d0dbef; font-size:14px; line-height:1.55}
.timeline{display:grid; gap:16px; margin-top:18px}
.timeline-item{display:grid; grid-template-columns:88px 1fr; gap:16px; align-items:start; padding:14px 0; border-top:1px solid rgba(44,102,214,.12)}
.timeline-item:first-child{border-top:0; padding-top:0}
.timeline-year{color:#0f7aff; font-weight:700; font-size:20px}
.logo-wall{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:18px}
.logo-pill{min-height:58px; padding:0 12px; border-radius:12px; background:rgba(5,13,24,.64); border:1px solid rgba(44,102,214,.14); display:flex; align-items:center; justify-content:center; text-align:center; font-weight:700; color:#e9f1ff}
.reference-list{display:grid; gap:14px; margin-top:18px}
.reference-line{display:grid; grid-template-columns:1fr auto; gap:18px; padding:14px 0; border-top:1px solid rgba(44,102,214,.12)}
.reference-line:first-child{border-top:0; padding-top:0}
.reference-line strong{display:block; margin-bottom:4px}
.reference-line span{color:var(--muted); font-size:14px}
.news-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.news-card{border-radius:16px; overflow:hidden; background:linear-gradient(180deg, rgba(8,18,32,.88), rgba(5,12,23,.98)); border:1px solid rgba(44,102,214,.16); box-shadow:var(--glow)}
.news-card img{width:100%; height:180px; object-fit:cover}
.news-card .text{padding:18px}
.news-card time{display:block; color:#0f7aff; font-size:12px; margin-bottom:8px}
.news-card h3{font-size:20px; margin-bottom:8px}
.news-card p{color:#d0dbef; font-size:15px; line-height:1.58}
.contact-grid{display:grid; grid-template-columns:1fr .95fr; gap:18px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{display:grid; gap:8px}
.field label{font-size:13px; color:#dce7fb; font-weight:700}
.form-grid .full{grid-column:1 / -1}
.side-list{display:grid; gap:12px; margin-top:16px}
.side-list li{list-style:none; position:relative; padding-left:18px; color:#d0dbef; font-size:15px; line-height:1.5}
.side-list li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:999px; background:#1ba7ff; box-shadow:0 0 14px rgba(27,167,255,.4)}
.image-card{overflow:hidden}
.image-card img{width:100%; height:auto}
.notice{display:flex; gap:12px; align-items:flex-start; margin-top:16px; padding:14px; border-radius:12px; border:1px solid rgba(44,102,214,.16); background:rgba(7,17,31,.52)}
.notice svg{width:20px; height:20px; color:#0f7aff; flex:0 0 20px; margin-top:2px}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width: 1080px){
  h1{font-size:58px}
  .hero-copy{max-width:420px}
  .services-row{grid-template-columns:repeat(3,1fr)}
  .service-mini:nth-child(3)::after{display:none}
  .bottom-columns{grid-template-columns:1fr}
  .footer-main{grid-template-columns:repeat(2,1fr)}
  .logo-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .news-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 860px){
  .nav-toggle{display:inline-flex}
  .main-nav{position:absolute; top:58px; left:20px; right:20px; display:none; flex-direction:column; align-items:stretch; gap:4px; padding:14px; background:rgba(4,10,18,.97); border:1px solid rgba(44,102,214,.22); border-radius:14px; box-shadow:var(--glow)}
  .main-nav.open{display:flex}
  .header-cta{display:none}
  .hero-grid,.pro-grid,.page-hero-grid,.content-grid,.contact-grid,.cta-panel,.two-col{grid-template-columns:1fr}
  .hero{padding-top:20px}
  .hero-copy{padding:44px 0 10px; max-width:unset}
  h1,.page-hero-copy h1{font-size:44px}
  .hero-visual{min-height:300px}
  .hero-device{position:relative; inset:auto; justify-content:center}
  .hero-chip{right:0; top:8px; width:98px}
  .hero-wave{inset:100px -10px 0 20px}
  .services-row{grid-template-columns:1fr 1fr}
  .service-mini:nth-child(2)::after,.service-mini:nth-child(4)::after{display:none}
  .service-mini:nth-child(3)::after{display:block}
  .story-grid{grid-template-columns:1fr; gap:18px}
  .story-card,.story-copy{padding:0}
  .story-card::after{display:none}
  .footer-main{grid-template-columns:1fr}
  .matrix,.matrix.three,.logo-wall,.news-grid,.form-grid{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .container{width:min(calc(100% - 26px), var(--container))}
  .header-inner{min-height:56px}
  .brand img{width:104px}
  h1,.page-hero-copy h1{font-size:38px}
  h2{font-size:30px}
  .pro-copy h2{font-size:40px}
  .hero .container::before{width:250px; height:210px; top:88px}
  .hero-visual{min-height:230px}
  .services-row{grid-template-columns:1fr}
  .service-mini{padding:20px 10px 18px}
  .service-mini::after{display:none !important}
  .ref-grid{grid-template-columns:1fr}
  .partner-grid{grid-template-columns:repeat(2,1fr)}
  .news-item{grid-template-columns:66px 1fr}
  .news-item img{width:66px; height:66px}
  .footer-bottom{flex-direction:column; align-items:flex-start}
}



:root{
  --container:1120px;
  --radius-lg:24px;
}
body{
  background:
    radial-gradient(circle at 16% -4%, rgba(13,99,255,.28), transparent 26%),
    radial-gradient(circle at 83% 11%, rgba(15,161,255,.18), transparent 18%),
    radial-gradient(circle at 52% 18%, rgba(21,161,255,.08), transparent 24%),
    linear-gradient(180deg,#01040a 0%,#02070f 38%,#020913 100%);
}
body::after{
  background:
    radial-gradient(circle at 50% 0%, rgba(17,115,255,.11), transparent 28%),
    radial-gradient(circle at 92% 35%, rgba(17,115,255,.10), transparent 20%),
    radial-gradient(circle at 12% 52%, rgba(17,115,255,.06), transparent 18%),
    radial-gradient(circle at 48% 100%, rgba(17,115,255,.05), transparent 22%);
}
.container{width:min(calc(100% - 36px), var(--container));}
.section{padding:46px 0;}
.section-tight{padding:30px 0;}
.hero{padding:20px 0 18px;}
.hero-grid{min-height:560px; gap:28px;}
.hero-copy{max-width:490px; padding:76px 0 84px 2px;}
.hero-copy h1{max-width:520px;}
.hero-copy .lead{max-width:460px;}
.hero-visual{min-height:455px;}
.hero-device img{width:680px;}
.hero-chip{width:165px; right:10px; top:52px;}
.hero-wave{inset:168px -26px 0 110px;}
.hero-note{display:flex; gap:10px; align-items:flex-start; margin-top:16px; color:var(--muted); font-size:14px; line-height:1.5;}
.hero-note svg{width:18px; height:18px; color:#21b2ff; margin-top:2px; flex:0 0 18px;}
.metric-strip{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:-2px;}
.metric-card{position:relative; padding:18px 18px 16px; border-radius:16px; background:linear-gradient(180deg, rgba(8,19,34,.92), rgba(5,12,22,.96)); border:1px solid rgba(44,102,214,.2); box-shadow:var(--glow); overflow:hidden;}
.metric-card::after{content:""; position:absolute; inset:auto -30px -40px auto; width:120px; height:120px; background:radial-gradient(circle at center, rgba(19,114,255,.24), transparent 62%);}
.metric-value{display:block; font-size:30px; font-weight:700; color:#f4f8ff; letter-spacing:-.03em; margin-bottom:8px;}
.metric-label{display:block; color:#d6e1f4; font-size:14px; line-height:1.45;}
.metric-sub{display:block; margin-top:6px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.12em;}
.intro-section .container{position:relative;}
.intro-grid{display:grid; grid-template-columns:1fr 1fr 1.08fr; gap:14px;}
.intro-card{position:relative; padding:24px; border-radius:18px; background:linear-gradient(180deg, rgba(8,18,32,.9), rgba(5,12,22,.98)); border:1px solid rgba(44,102,214,.18); box-shadow:var(--glow); overflow:hidden;}
.intro-card::before{content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(14,99,255,.08), transparent 30%, rgba(14,99,255,.03) 70%, transparent 100%); pointer-events:none;}
.intro-card--accent{background:
  radial-gradient(circle at 100% 0%, rgba(109,223,255,.22), transparent 34%),
  linear-gradient(135deg, rgba(8,49,125,.96) 0%, rgba(10,84,220,.96) 54%, rgba(6,42,110,.98) 100%);
  border-color:rgba(109,223,255,.22);
}
.intro-card--accent::before{background:linear-gradient(135deg, rgba(255,255,255,.1), transparent 40%);}
.intro-card h2{font-size:32px; margin-bottom:10px;}
.intro-card h3{font-size:24px; margin-bottom:14px;}
.intro-card p{color:#d4dff3; font-size:15px; line-height:1.62;}
.intro-card .eyebrow{margin-bottom:12px;}
.intro-list{display:grid; gap:12px; margin:16px 0 0; padding:0; list-style:none;}
.intro-list li{display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; color:#e7effe; font-size:15px; line-height:1.5;}
.intro-list svg{width:24px; height:24px; color:#21b2ff;}
.intro-card--accent .intro-list svg{color:#dff4ff;}
.intro-card .section-link{display:inline-flex; margin-top:16px;}
.section-accent{position:relative;}
.section-accent::after{content:""; position:absolute; inset:auto 0 0 0; height:160px; background:radial-gradient(ellipse at center, rgba(14,99,255,.16), transparent 70%); pointer-events:none;}
.services-row{border-top:1px solid rgba(22,88,188,.24); border-bottom:1px solid rgba(22,88,188,.24);}
.services-row::after{content:""; position:absolute; right:-80px; top:40px; width:420px; height:210px; background:radial-gradient(circle at center, rgba(13,99,255,.15), transparent 66%); pointer-events:none;}
.service-mini{min-height:175px;}
.service-mini p{max-width:188px;}
.pro-grid{gap:26px;}
.pro-copy{max-width:520px;}
.pro-copy h2{font-size:52px;}
.pro-copy .copy{max-width:500px;}
.module-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:24px;}
.module-card{padding:16px 16px 14px; border-radius:14px; background:rgba(7,18,32,.7); border:1px solid rgba(44,102,214,.16);}
.module-card strong{display:block; font-size:15px; margin-bottom:6px;}
.module-card span{display:block; color:var(--muted); font-size:13px; line-height:1.45;}
.story-grid{grid-template-columns:1.1fr repeat(3,.8fr);}
.story-card{padding-right:22px;}
.reference-showcase{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;}
.reference-case{position:relative; padding:18px; border-radius:16px; background:linear-gradient(180deg, rgba(8,18,32,.9), rgba(5,12,22,.98)); border:1px solid rgba(44,102,214,.16);}
.reference-case .tag{display:inline-flex; min-height:28px; padding:0 10px; align-items:center; border-radius:999px; background:rgba(15,116,255,.14); color:#8adfff; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;}
.reference-case h3{font-size:19px; margin:14px 0 10px;}
.reference-case p{color:#d1dcef; font-size:14px; line-height:1.54;}
.reference-case .meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.reference-case .meta span{padding:6px 10px; border-radius:999px; border:1px solid rgba(44,102,214,.14); color:#9fb3d0; font-size:12px;}
.client-wall{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:16px;}
.client-pill{min-height:56px; padding:0 14px; border-radius:14px; background:rgba(5,13,24,.56); border:1px solid rgba(44,102,214,.14); display:flex; align-items:center; justify-content:center; text-align:center; color:#eef5ff; font-weight:700;}
.dual-panels{display:grid; grid-template-columns:1.1fr .9fr; gap:14px;}
.partner-callout{position:relative; overflow:hidden;}
.partner-callout::after{content:""; position:absolute; inset:auto -40px -50px auto; width:320px; height:210px; background:radial-gradient(circle at center, rgba(13,99,255,.28), transparent 60%);}
.partner-columns{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px;}
.partner-columns .mini{padding:14px; border-radius:14px; background:rgba(7,18,32,.58); border:1px solid rgba(44,102,214,.14);}
.partner-columns .mini strong{display:block; margin-bottom:8px; font-size:15px;}
.partner-columns .mini p{color:#d0dbef; font-size:14px; line-height:1.52;}
.article-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
.article-card{display:flex; flex-direction:column; min-height:100%; border-radius:16px; overflow:hidden; background:linear-gradient(180deg, rgba(8,18,32,.9), rgba(5,12,22,.98)); border:1px solid rgba(44,102,214,.16); box-shadow:var(--glow);}
.article-media{height:170px; position:relative; overflow:hidden; background:#061223;}
.article-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,7,12,.06), rgba(3,7,12,.66));}
.article-media.device{background:
  radial-gradient(circle at 74% 22%, rgba(17,115,255,.24), transparent 22%),
  linear-gradient(180deg, rgba(6,16,30,.18), rgba(6,16,30,.7)),
  url("../images/hero-right.png") center / cover no-repeat;}
.article-media.graphic{background:
  radial-gradient(circle at 70% 25%, rgba(17,115,255,.18), transparent 18%),
  linear-gradient(180deg, rgba(6,16,30,.18), rgba(6,16,30,.76)),
  url("../images/pro-graphic-right.png") center / cover no-repeat;}
.article-media.overview{background:
  linear-gradient(180deg, rgba(6,16,30,.12), rgba(6,16,30,.72)),
  url("../images/brochure-overview.webp") center 30% / cover no-repeat;}
.article-media.contact{background:
  linear-gradient(180deg, rgba(6,16,30,.12), rgba(6,16,30,.72)),
  url("../images/contact-panel.webp") center 30% / cover no-repeat;}
.article-card .text{padding:18px 18px 20px;}
.article-card time{display:block; color:#0f7aff; font-size:12px; margin-bottom:8px; letter-spacing:.08em; text-transform:uppercase;}
.article-card h3{font-size:21px; margin-bottom:10px; line-height:1.2;}
.article-card p{color:#d0dbef; font-size:15px; line-height:1.58;}
.article-card .section-link{display:inline-flex; margin-top:16px;}
.cta-panel h2{max-width:560px;}
.page-hero{padding:48px 0 30px;}
.page-hero-copy h1{font-size:54px;}
.page-intro-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:18px;}
.pro-modules{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
.check-columns{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px;}
.check-panel{padding:18px; border-radius:16px; background:rgba(6,14,25,.52); border:1px solid rgba(44,102,214,.14);}
.check-panel h3{font-size:20px; margin-bottom:10px;}
.check-panel ul{margin:0; padding-left:18px; color:#d0dbef; font-size:15px; line-height:1.58;}
.article-layout{display:grid; grid-template-columns:minmax(0,760px) minmax(0,320px); gap:18px; align-items:start;}
.article-layout .panel{position:relative; padding:28px;}
.article-body p{color:#d1dcef; font-size:17px; line-height:1.72; margin:0 0 18px;}
.article-body h2{font-size:32px; margin:32px 0 12px;}
.article-body ul{padding-left:20px; color:#d1dcef; font-size:16px; line-height:1.7;}
.article-body li{margin-bottom:8px;}
.article-body blockquote{margin:24px 0; padding:18px 18px 18px 22px; border-left:3px solid #0f7aff; background:rgba(7,18,32,.52); color:#e6f0ff; font-size:18px; line-height:1.6; border-radius:0 14px 14px 0;}
.side-stack{display:grid; gap:18px;}
.stat-list{display:grid; gap:12px; margin-top:16px;}
.stat-list .line{padding:14px; border-radius:14px; background:rgba(6,14,25,.52); border:1px solid rgba(44,102,214,.14);}
.stat-list strong{display:block; font-size:14px; color:#eef5ff; margin-bottom:4px;}
.stat-list span{display:block; color:#9fb3d0; font-size:14px; line-height:1.5;}
.form-note{margin-top:14px; color:#9fb3d0; font-size:13px; line-height:1.5;}
.kv-list{display:grid; gap:12px; margin-top:18px;}
.kv-list .line{display:grid; grid-template-columns:150px 1fr; gap:12px; padding:12px 0; border-top:1px solid rgba(44,102,214,.12);}
.kv-list .line:first-child{border-top:0; padding-top:0;}
.kv-list strong{color:#eef5ff; font-size:14px;}
.kv-list span{color:#d0dbef; font-size:15px; line-height:1.52;}
.home-bottom .panel{padding:22px;}
@media (max-width: 1080px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-copy{max-width:unset; padding:66px 0 0;}
  .hero-visual{min-height:360px;}
  .metric-strip,.intro-grid,.dual-panels,.partner-columns,.article-grid,.reference-showcase,.article-layout,.page-intro-grid,.pro-modules,.check-columns{grid-template-columns:1fr;}
  .client-wall{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 860px){
  .metric-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .services-row{grid-template-columns:1fr 1fr;}
  .service-mini:nth-child(3)::after{display:none;}
  .reference-showcase{grid-template-columns:1fr;}
}
@media (max-width: 560px){
  .metric-strip{grid-template-columns:1fr;}
  .hero-copy{padding-top:50px;}
  .hero-device img{width:100%;}
  .hero-chip{width:110px;}
  .intro-card h2{font-size:28px;}
  .page-hero-copy h1{font-size:42px;}
  .client-wall{grid-template-columns:1fr;}
  .kv-list .line{grid-template-columns:1fr;}
}

/* --- v5 content and visual refinement --- */
.hero-copy{max-width:500px}
.hero-copy .lead{max-width:490px}
.hero-visual{min-height:455px}
.hero-visual::before{
  inset:38px -10px 20px 70px;
  background:
    radial-gradient(circle at 62% 52%, rgba(23,161,255,.22), transparent 24%),
    radial-gradient(circle at 82% 35%, rgba(18,110,255,.18), transparent 20%),
    url("../images/wave-right-clean.webp") right center / contain no-repeat;
  filter:none;
  opacity:.95;
}
.hero-visual::after{
  left:120px; right:60px; bottom:34px; height:96px;
  background:radial-gradient(ellipse at center, rgba(15,116,255,.38), rgba(4,10,18,0) 70%);
  filter:blur(16px)
}
.hero-device{inset:50px 0 0 0}
.hero-device img{width:670px}
.hero-wave{inset:135px -18px 20px 120px; background:url("../images/wave-dark-a.webp") right center / cover no-repeat; opacity:.42}
.home-ref-grid .ref-card img{height:180px}
.home-news-list .news-item img{width:78px; height:78px; object-fit:cover; border-radius:10px; flex:0 0 78px}
.article-thumb{width:100%; height:190px; object-fit:cover; display:block}
.faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:18px; align-items:start}
.faq-list{display:grid; gap:12px}
.faq-item{border:1px solid rgba(44,102,214,.16); border-radius:16px; background:linear-gradient(180deg, rgba(8,18,32,.9), rgba(5,12,22,.98)); overflow:hidden}
.faq-item summary{list-style:none; cursor:pointer; padding:18px 20px; font-size:18px; font-weight:700; color:#eef5ff; display:flex; align-items:center; justify-content:space-between; gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+'; color:#0f7aff; font-size:26px; line-height:1; flex:0 0 auto}
.faq-item[open] summary::after{content:'–'}
.faq-item p{margin:0; padding:0 20px 20px; color:#d1dcef; font-size:15px; line-height:1.62}
.notice{display:flex; gap:12px; padding:16px 18px; border-radius:14px; background:rgba(7,18,32,.52); border:1px solid rgba(44,102,214,.14); margin-top:16px}
.notice svg{width:18px; height:18px; color:#0f7aff; flex:0 0 18px; margin-top:2px}
.reference-case img,.image-frame img{width:100%; height:100%; object-fit:cover}
.image-card img{width:100%; display:block}
.page-hero-figure img{background:transparent}
@media (max-width:1080px){
  .faq-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hero-visual::before{inset:20px 0 0 10px; background-size:cover}
  .hero-wave{inset:86px -8px 8px 30px}
  .home-ref-grid .ref-card img{height:150px}
}

/* --- v6 refinement --- */
.hero-visual::before{
  inset:42px 8px 28px 110px;
  background:
    radial-gradient(circle at 52% 58%, rgba(23,161,255,.18), transparent 22%),
    radial-gradient(circle at 77% 31%, rgba(18,110,255,.16), transparent 18%),
    radial-gradient(circle at 70% 72%, rgba(18,110,255,.12), transparent 20%),
    url("../images/circuits-subtle.svg") right center / 86% no-repeat;
  opacity:.88;
}
.hero-wave{inset:148px -10px 22px 138px; background:url("../images/wave-dark-a.webp") right center / cover no-repeat; opacity:.34}
.hero-device img{width:700px}
.metric-card{min-height:170px}
.process-band{padding:18px 0 10px}
.process-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.process-step{position:relative; padding:18px; border-radius:16px; background:linear-gradient(180deg, rgba(8,18,32,.92), rgba(5,12,22,.98)); border:1px solid rgba(44,102,214,.18); box-shadow:var(--glow); overflow:hidden}
.process-step::after{content:""; position:absolute; inset:auto -28px -34px auto; width:120px; height:120px; background:radial-gradient(circle at center, rgba(13,99,255,.18), transparent 62%)}
.step-no{display:inline-flex; min-width:40px; height:28px; align-items:center; justify-content:center; border-radius:999px; background:rgba(15,116,255,.14); color:#8adfff; font-size:12px; font-weight:700; letter-spacing:.08em; margin-bottom:12px}
.process-step h3{font-size:20px; margin-bottom:10px}
.process-step p{color:#d1dcef; font-size:14px; line-height:1.55}
.module-pills{display:flex; flex-wrap:wrap; gap:10px}
.module-pill,.quick-tag{display:inline-flex; min-height:38px; align-items:center; justify-content:center; padding:0 14px; border-radius:999px; border:1px solid rgba(44,102,214,.18); background:rgba(7,18,32,.56); color:#dcebff; font-size:13px; font-weight:700}
.module-pill:hover{border-color:rgba(91,170,255,.4); color:#68d7ff}
.sector-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.sector-card{padding:18px; border-radius:16px; background:linear-gradient(180deg, rgba(8,18,32,.9), rgba(5,12,22,.98)); border:1px solid rgba(44,102,214,.16); box-shadow:var(--glow)}
.sector-card h3{font-size:19px; margin-bottom:8px}
.sector-card p{color:#d1dcef; font-size:14px; line-height:1.55}
.quick-tags{display:flex; flex-wrap:wrap; gap:10px}
.article-card{transition:transform .18s ease, border-color .18s ease}
.article-card:hover{transform:translateY(-2px); border-color:rgba(91,170,255,.35)}
[data-mailto-form] .is-invalid{border-color:#ff7c7c; box-shadow:0 0 0 3px rgba(255,124,124,.12)}
.mailto-status{margin-top:14px; padding:12px 14px; border-radius:12px; background:rgba(7,18,32,.6); border:1px solid rgba(44,102,214,.16); color:#d2def3; font-size:14px; line-height:1.5}
@media (max-width:1080px){
  .process-grid,.sector-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .process-grid,.sector-grid{grid-template-columns:1fr}
  .hero-visual::before{inset:12px 8px 8px 20px; background-size:cover}
  .hero-wave{inset:104px -6px 12px 26px}
}
@media (max-width:560px){
  .module-pills,.quick-tags{gap:8px}
  .module-pill,.quick-tag{min-height:34px; padding:0 12px; font-size:12px}
}


/* --- v7 content refinement --- */
.hero-pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.module-card--link{display:block; color:inherit; text-decoration:none; transition:transform .18s ease,border-color .18s ease,background .18s ease}
.module-card--link:hover{transform:translateY(-2px); border-color:rgba(105,215,255,.4); background:rgba(10,26,46,.86)}
.module-card--link strong{color:#f4f8ff}
.hero-visual::before{
  inset:58px 18px 26px 120px;
  background:
    radial-gradient(circle at 55% 56%, rgba(23,161,255,.16), transparent 23%),
    radial-gradient(circle at 79% 30%, rgba(18,110,255,.14), transparent 18%),
    radial-gradient(circle at 70% 78%, rgba(18,110,255,.12), transparent 18%),
    linear-gradient(90deg, rgba(17,73,180,.08), rgba(17,73,180,.02));
  opacity:.78;
}
.hero-device img{width:min(100%, 604px)}
.hero-wave{inset:150px -6px 20px 145px; background:url("../images/wave-dark-a.webp") right center / cover no-repeat; opacity:.28}
.pro-stage img{width:min(100%, 520px)}
.reference-showcase .reference-case{min-height:100%}
.article-thumb{width:100%; height:210px; object-fit:cover; display:block}
.client-wall{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){
  .client-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .hero-pills{margin-bottom:6px}
  .hero-visual::before{inset:20px 8px 8px 20px}
  .hero-wave{inset:106px -6px 12px 32px}
}
@media (max-width:560px){
  .article-thumb{height:180px}
  .client-wall{grid-template-columns:1fr}
}
