:root{
  --bg:#fafbfc;
  --bg2:#ffffff;
  --card:rgba(255,255,255,.95);
  --border:rgba(0,0,0,.08);
  --text:#1a1f2e;
  --muted:rgba(26,31,46,.65);
  --accent:#0066ff;
  --accent2:#ff3366;
  --accent3:#ff9900;
  --shadow:0 20px 60px rgba(0,0,0,.08);
  --radius:24px;
  --max:1120px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  padding-top:74px;
  background:
    radial-gradient(ellipse 140% 100% at 0% 0%, rgba(0,102,255,.12), transparent 60%),
    radial-gradient(ellipse 120% 90% at 100% 10%, rgba(255,51,102,.1), transparent 65%),
    radial-gradient(ellipse 130% 100% at 50% 100%, rgba(255,153,0,.08), transparent 70%),
    radial-gradient(ellipse 100% 80% at 20% 50%, rgba(0,102,255,.06), transparent 60%),
    radial-gradient(ellipse 90% 70% at 80% 60%, rgba(255,51,102,.05), transparent 55%),
    radial-gradient(ellipse 110% 90% at 40% 30%, rgba(0,102,255,.04), transparent 50%),
    linear-gradient(135deg, #fafbfc 0%, #f5f7fa 20%, #ffffff 40%, #f8f9fb 60%, #fafbfc 80%, #ffffff 100%);
  background-size: 100% 100%;
  background-attachment: fixed;
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,102,255,.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,51,102,.05) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255,153,0,.04) 0%, transparent 50%);
  pointer-events:none;
  z-index:0;
  animation:bgPulse 20s ease-in-out infinite;
}
@keyframes bgPulse{
  0%, 100%{opacity:1; transform:scale(1)}
  50%{opacity:0.8; transform:scale(1.05)}
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.95}

/* Utilities */
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
.skip{
  position:absolute; left:-999px; top:10px;
  background:#fff; color:#000;
  padding:10px 14px; border-radius:10px;
}
.skip:focus{left:10px; z-index:999}

/* Header */
.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  width:100%;
  backdrop-filter: blur(32px) saturate(200%);
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 100%);
  border-bottom:1px solid rgba(0,102,255,.1);
  box-shadow:
    0 8px 32px rgba(0,102,255,.08),
    0 2px 8px rgba(0,0,0,.04),
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(0,102,255,.05) inset;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom:0;
}
.header::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  opacity:0.6;
}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand span{
  display:flex;
  flex-direction:column;
  line-height:1.2;
  gap:2px;
}
.brand strong{
  font-weight:800;
  font-size:16px;
  letter-spacing:-.2px;
  color:var(--text);
  display:block;
}
.brand small{
  font-size:11px;
  color:var(--muted);
  font-weight:500;
  display:block;
  line-height:1.3;
}
.brand__mark{width:38px; height:38px; filter: drop-shadow(0 12px 26px rgba(0,0,0,.35));}
.brand__text{display:flex; flex-direction:column; line-height:1.1}
.brand__name{font-weight:800; letter-spacing:.5px; font-size:13px}
.brand__tag{font-size:12px; color:var(--muted)}

.nav{display:flex; align-items:center; gap:14px}
.nav__toggle{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(0,212,255,.25);
  background:rgba(0,212,255,.1);
  color:var(--text);
  transition:all 0.3s ease;
}
.nav__toggle:hover{background:rgba(0,212,255,.15); border-color:rgba(0,212,255,.35)}
.nav__toggleLines{
  display:block; width:18px; height:2px; background:currentColor; margin:0 auto;
  position:relative; border-radius:2px;
}
.nav__toggleLines::before,
.nav__toggleLines::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; border-radius:2px;
}
.nav__toggleLines::before{top:-6px}
.nav__toggleLines::after{top:6px}

.nav__menu{display:flex; align-items:center; gap:18px}
.nav__menu a{
  font-size:14px;
  color:var(--text);
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight:500;
  position:relative;
  padding:8px 12px;
  border-radius:12px;
}
.nav__menu a::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(0,102,255,.08), rgba(255,51,102,.06));
  border-radius:12px;
  opacity:0;
  transition:opacity 0.3s ease;
  z-index:-1;
}
.nav__menu a:hover{
  color:var(--accent);
  transform:translateY(-1px);
}
.nav__menu a:hover::before{
  opacity:1;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:18px 36px;
  border-radius:20px;
  border:none;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent2) 50%, var(--accent3) 100%);
  background-size:200% 200%;
  color:#ffffff;
  font-weight:700;
  font-size:15px;
  box-shadow:
    0 10px 30px rgba(0,102,255,.25),
    0 5px 15px rgba(255,51,102,.2),
    0 2px 6px rgba(0,0,0,.1),
    0 0 0 1px rgba(255,255,255,.1) inset,
    0 1px 0 rgba(255,255,255,.3) inset;
  transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing:0.5px;
  gap:10px;
  position:relative;
  overflow:hidden;
  text-transform:none;
  font-size:15px;
  letter-spacing:0.3px;
  cursor:pointer;
}
.btn::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transition:left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  z-index:1;
}
.btn::after{
  content:'';
  position:absolute;
  inset:-2px;
  background:linear-gradient(135deg, var(--accent), var(--accent2), var(--accent3));
  border-radius:20px;
  opacity:0;
  transition:opacity 0.5s ease;
  z-index:-1;
  filter:blur(8px);
}
.btn:hover{
  background-position:100% 0%;
  transform:translateY(-4px) scale(1.03);
  box-shadow:
    0 20px 50px rgba(0,102,255,.35),
    0 10px 25px rgba(255,51,102,.3),
    0 5px 12px rgba(0,0,0,.15),
    0 0 0 1px rgba(255,255,255,.2) inset,
    0 2px 0 rgba(255,255,255,.4) inset,
    0 0 30px rgba(0,102,255,.4);
}
.btn:hover::before{
  left:100%;
}
.btn:hover::after{
  opacity:0.6;
}
.btn:active{
  transform:translateY(-2px) scale(1.01);
  box-shadow:
    0 12px 35px rgba(0,102,255,.3),
    0 6px 18px rgba(255,51,102,.25),
    0 3px 8px rgba(0,0,0,.12);
}
.btn--submit{
  padding:16px 32px;
  font-size:15px;
  min-width:160px;
  font-weight:700;
}
.btn__arrow{
  font-size:20px;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display:inline-block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.btn--submit:hover .btn__arrow{
  transform:translateX(6px) scale(1.1);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
}
.btn__icon{
  font-size:18px;
  display:inline-flex;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.btn--ghost:hover .btn__icon,
.btn:hover .btn__icon{
  filter:drop-shadow(0 4px 8px rgba(0,102,255,.4));
}
.btn--ghost{
  background:linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 100%);
  color:var(--text);
  border:2px solid rgba(0,102,255,.25);
  box-shadow:
    0 4px 16px rgba(0,102,255,.1),
    0 2px 6px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding:16px 28px;
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(12px) saturate(180%);
}
.btn--ghost::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(0,102,255,.1), rgba(255,51,102,.08));
  opacity:0;
  transition:opacity 0.4s ease;
  z-index:0;
}
.btn--ghost > *{
  position:relative;
  z-index:1;
}
.btn--ghost:hover{
  background:linear-gradient(135deg, rgba(0,102,255,.12), rgba(255,51,102,.1));
  border-color:rgba(0,102,255,.5);
  color:var(--accent);
  transform:translateY(-3px) scale(1.02);
  box-shadow:
    0 12px 32px rgba(0,102,255,.2),
    0 6px 16px rgba(255,51,102,.15),
    0 2px 8px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.btn--ghost:hover::before{
  opacity:1;
}
.btn--ghost:hover .btn__icon{
  transform:scale(1.15) rotate(5deg);
  filter:drop-shadow(0 2px 8px rgba(0,102,255,.3));
}
.btn--ghost:active{
  transform:translateY(-1px) scale(1);
}
.btn--small{
  padding:14px 28px;
  border-radius:18px;
  font-weight:700;
  font-size:14px;
  background:linear-gradient(135deg, rgba(0,102,255,.1), rgba(255,51,102,.08));
  color:var(--accent);
  border:2px solid rgba(0,102,255,.2);
  box-shadow:
    0 6px 20px rgba(0,102,255,.12),
    0 2px 8px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(0,102,255,.05);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  white-space:nowrap;
  min-width:fit-content;
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(16px) saturate(200%);
}
.btn--small::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--accent), var(--accent2), var(--accent3));
  opacity:0;
  transition:opacity 0.4s ease;
  z-index:0;
  border-radius:18px;
}
.btn--small::after{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transition:left 0.6s ease;
  z-index:1;
}
.btn--small > *{
  position:relative;
  z-index:2;
  transition:color 0.3s ease;
}
.btn--small:hover{
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#ffffff !important;
  border-color:var(--accent);
  transform:translateY(-4px) scale(1.05);
  box-shadow:
    0 12px 32px rgba(0,102,255,.4),
    0 6px 16px rgba(255,51,102,.3),
    0 2px 8px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.4),
    0 0 25px rgba(0,102,255,.4);
}
.btn--small:hover::before{
  opacity:1;
}
.btn--small:hover::after{
  left:100%;
}
.btn--small:hover *{
  color:#ffffff !important;
}
.btn--small:active{
  transform:translateY(-2px) scale(1.03);
}

/* Hero */
.hero{padding:64px 0 26px; position:relative}
.hero__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  align-items:start;
}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  border:1px solid rgba(0,212,255,.25);
  background:rgba(0,212,255,.1);
  color:var(--text);
  font-size:13px;
  backdrop-filter:blur(10px);
}
.dot{width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(0,212,255,.15), 0 0 12px rgba(0,212,255,.3)}

h1{
  margin:18px 0 12px;
  font-size:52px;
  line-height:1.1;
  letter-spacing:-.8px;
  font-weight:900;
  background:linear-gradient(135deg, var(--text) 0%, var(--text) 50%, rgba(0,102,255,.8) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.grad{
  background: linear-gradient(135deg, #00d4ff, #ff6b9d, #ffb84d);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{
  margin:0 0 24px;
  color:var(--muted);
  font-size:18px;
  line-height:1.8;
  max-width:68ch;
  font-weight:400;
  animation:fadeInUp 0.8s ease-out 0.2s both;
}
.cta{display:flex; gap:14px; flex-wrap:wrap; margin:20px 0 24px}
.metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:32px;
  animation:fadeInUp 0.8s ease-out 0.4s both;
}
.metrics > div{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:20px;
  border-radius:24px;
  border:2px solid rgba(0,102,255,.15);
  background:linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 100%);
  backdrop-filter:blur(20px) saturate(180%);
  box-shadow:
    0 8px 24px rgba(0,102,255,.1),
    0 2px 8px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}
.metrics > div::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  transform:scaleX(0);
  transition:transform 0.4s ease;
  transform-origin:left;
}
.metrics > div:hover{
  transform:translateY(-4px);
  border-color:rgba(0,102,255,.25);
  box-shadow:
    0 16px 40px rgba(0,102,255,.15),
    0 4px 16px rgba(0,0,0,.08);
}
.metrics > div:hover::before{
  transform:scaleX(1);
}
.metrics strong{
  font-size:15px;
  color:var(--accent);
  font-weight:900;
  letter-spacing:-.2px;
}
.metrics span{
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
  font-weight:500;
}
.heroCard{
  position:relative;
  border-radius:36px;
  overflow:hidden;
  box-shadow:
    0 24px 72px rgba(0,102,255,.15),
    0 12px 32px rgba(0,0,0,.1),
    0 4px 12px rgba(0,0,0,.06),
    0 0 0 1px rgba(0,102,255,.08) inset,
    0 -2px 0 rgba(255,255,255,.9) inset;
  background:linear-gradient(135deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.97) 50%, rgba(255,255,255,.95) 100%);
  border:2px solid rgba(0,102,255,.12);
  backdrop-filter:blur(32px) saturate(200%);
  padding:20px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  animation:fadeInUp 0.8s ease-out 0.3s both;
  align-self:start;
  margin-top:0;
  box-sizing:border-box;
}
.heroCard::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:5px;
  background:linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  opacity:0.8;
  z-index:1;
}
.heroCard__decoration{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  filter:blur(40px);
  opacity:0.4;
  animation:float 20s ease-in-out infinite;
}
.heroCard__decoration--1{
  width:200px;
  height:200px;
  top:-50px;
  right:-50px;
  background:radial-gradient(circle, var(--accent), transparent 70%);
  animation-delay:0s;
}
.heroCard__decoration--2{
  width:150px;
  height:150px;
  bottom:-30px;
  left:-30px;
  background:radial-gradient(circle, var(--accent2), transparent 70%);
  animation-delay:5s;
}
@keyframes float{
  0%, 100%{transform:translate(0, 0) scale(1)}
  33%{transform:translate(20px, -20px) scale(1.1)}
  66%{transform:translate(-15px, 15px) scale(0.9)}
}
.kv{
  display:grid;
  gap:14px;
  margin:0;
  position:relative;
  z-index:2;
  flex-shrink:0;
}
.kv__item{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:16px;
  padding:16px 20px;
  border-radius:22px;
  border:2px solid rgba(0,102,255,.15);
  background:linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 100%);
  backdrop-filter:blur(16px) saturate(180%);
  box-shadow:
    0 6px 20px rgba(0,102,255,.1),
    0 2px 8px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,102,255,.05);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}
.kv__item::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;
  background:linear-gradient(180deg, var(--accent), var(--accent2));
  transform:scaleY(0);
  transition:transform 0.4s ease;
  transform-origin:top;
}
.kv__item:hover{
  transform:translateX(4px);
  border-color:rgba(0,102,255,.25);
  box-shadow:
    0 10px 28px rgba(0,102,255,.15),
    0 4px 12px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.kv__item:hover::before{
  transform:scaleY(1);
}
.kv__label{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.3px;
  text-transform:uppercase;
  position:relative;
}
.kv__icon{
  font-size:16px;
  display:inline-flex;
  filter:drop-shadow(0 2px 4px rgba(0,102,255,.2));
  transition:transform 0.3s ease;
}
.kv__item:hover .kv__icon{
  transform:scale(1.15) rotate(5deg);
}
.kv__value{
  font-size:14px;
  line-height:1.7;
  color:var(--text);
  font-weight:500;
}
.heroCard__top{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:0;
  margin-bottom:10px;
  position:relative;
  z-index:2;
  align-items:flex-start;
}
.heroCard__title{
  margin:0 0 8px;
  flex-shrink:0;
  font-size:24px;
  font-weight:900;
  letter-spacing:-.4px;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent2) 50%, var(--accent3) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.2;
  position:relative;
  z-index:2;
  animation:fadeInUp 0.6s ease-out 0.4s both;
}
.heroCard__desc{
  margin:0 0 10px;
  flex-shrink:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
  position:relative;
  z-index:2;
  animation:fadeInUp 0.6s ease-out 0.5s both;
}
.heroCard__actions{
  display:flex;
  gap:12px;
  margin-top:16px;
  margin-bottom:0;
  flex-wrap:nowrap;
  position:relative;
  z-index:2;
  flex-shrink:0;
}
.link--icon{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(0,102,255,.08), rgba(255,51,102,.06));
  border:2px solid rgba(0,102,255,.15);
  box-shadow:
    0 4px 12px rgba(0,102,255,.1),
    inset 0 1px 0 rgba(255,255,255,.8);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter:blur(12px) saturate(180%);
  font-weight:600;
  font-size:13px;
}
.link--icon:hover{
  background:linear-gradient(135deg, rgba(0,102,255,.15), rgba(255,51,102,.12));
  border-color:rgba(0,102,255,.3);
  transform:translateY(-2px);
  box-shadow:
    0 8px 20px rgba(0,102,255,.2),
    0 4px 8px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
  text-decoration:none;
}
.link__icon{
  font-size:16px;
  display:inline-flex;
  transition:transform 0.3s ease;
  filter:drop-shadow(0 2px 4px rgba(0,102,255,.2));
}
.link--icon:hover .link__icon{
  transform:scale(1.2) rotate(5deg);
  filter:drop-shadow(0 4px 8px rgba(0,102,255,.4));
}
.heroCard .bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(ellipse 120% 100% at 20% 20%, rgba(0,102,255,.12), transparent 70%),
    radial-gradient(ellipse 100% 90% at 80% 80%, rgba(255,51,102,.1), transparent 70%),
    radial-gradient(ellipse 110% 100% at 50% 50%, rgba(255,153,0,.08), transparent 60%);
  opacity:0.7;
  pointer-events:none;
  animation:bgFloat 15s ease-in-out infinite;
}
.heroCard > *:not(.bg){
  position:relative;
  z-index:2;
}

.hero__stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:0; padding:0}
.stat{
  border:2px solid rgba(0,102,255,.15);
  background:linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 100%);
  border-radius:20px;
  padding:16px 18px;
  backdrop-filter:blur(12px) saturate(180%);
  box-shadow:0 4px 12px rgba(0,102,255,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.stat dt{font-size:12px; color:var(--muted); font-weight:600}
.stat dd{margin:6px 0 0; font-weight:800; font-size:14px; color:var(--accent)}

.hero__card{position:relative; border-radius:var(--radius); overflow:hidden; min-height:420px; box-shadow:var(--shadow)}
.glass{
  position:relative; z-index:2;
  height:100%;
  padding:24px;
  border:1px solid rgba(0,212,255,.2);
  background:rgba(255,255,255,.08);
  backdrop-filter: blur(20px);
}
.glass__top{display:flex; gap:8px; flex-wrap:wrap}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 16px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:linear-gradient(135deg, rgba(0,102,255,.15), rgba(0,102,255,.1));
  border:2px solid rgba(0,102,255,.25);
  box-shadow:
    0 4px 12px rgba(0,102,255,.15),
    0 2px 4px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.8);
  color:var(--accent);
  backdrop-filter:blur(12px) saturate(180%);
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  z-index:2;
}
.badge:hover{
  transform:translateY(-2px);
  border-color:rgba(0,102,255,.4);
  box-shadow:
    0 6px 16px rgba(0,102,255,.2),
    0 2px 6px rgba(0,0,0,.08);
}
.badge__icon{
  font-size:14px;
  display:inline-flex;
  filter:drop-shadow(0 1px 2px rgba(0,102,255,.2));
}
.badge--soft{
  background:linear-gradient(135deg, rgba(255,51,102,.15), rgba(255,51,102,.1));
  border-color:rgba(255,51,102,.3);
  box-shadow:
    0 4px 12px rgba(255,51,102,.15),
    0 2px 4px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.8);
  color:var(--accent2);
}
.badge--soft:hover{
  border-color:rgba(255,51,102,.45);
  box-shadow:
    0 6px 16px rgba(255,51,102,.2),
    0 2px 6px rgba(0,0,0,.08);
}
.glass__title{margin:14px 0 8px; font-size:18px}
.glass__desc{margin:0 0 14px; color:var(--muted); line-height:1.6}
.glass__list{display:grid; gap:10px; margin-top:10px}
.glass__item{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:12px;
  padding:14px 18px;
  border-radius:20px;
  border:2px solid rgba(0,102,255,.15);
  background:linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 100%);
  backdrop-filter:blur(12px) saturate(180%);
  box-shadow:0 4px 12px rgba(0,102,255,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.k{color:var(--muted); font-size:12px; font-weight:600}
.v{font-size:13px; line-height:1.6; color:var(--text)}
.glass__actions{display:flex; gap:16px; margin-top:14px; flex-wrap:wrap}
.link{font-weight:800; font-size:14px; color:var(--accent); transition:all 0.3s ease; text-decoration:none; display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:16px; background:linear-gradient(135deg, rgba(0,102,255,.08), rgba(255,51,102,.06)); border:2px solid rgba(0,102,255,.15); margin-top:20px; position:relative; z-index:2; box-shadow:0 4px 12px rgba(0,102,255,.08);}
.link:hover{text-decoration:none; color:var(--accent2); background:linear-gradient(135deg, rgba(0,102,255,.12), rgba(255,51,102,.1)); border-color:rgba(0,102,255,.25); transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,102,255,.15);}
.link::after{content:'↑'; font-size:16px; transition:transform 0.3s ease;}
.link:hover::after{transform:translateY(-2px);}

.hero__bg{position:absolute; inset:0; z-index:1}
.orb{position:absolute; border-radius:50%; filter: blur(0px)}
.orb--1{width:320px; height:320px; left:-80px; top:-70px; background:radial-gradient(circle at 30% 30%, rgba(0,212,255,.85), rgba(0,212,255,0) 62%)}
.orb--2{width:340px; height:340px; right:-120px; top:20px; background:radial-gradient(circle at 30% 30%, rgba(255,107,157,.75), rgba(255,107,157,0) 60%)}
.orb--3{width:380px; height:380px; right:-120px; bottom:-140px; background:radial-gradient(circle at 30% 30%, rgba(255,184,77,.25), rgba(255,184,77,0) 58%)}
.gridlines{
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity:.18;
  mask-image: radial-gradient(circle at 30% 30%, black, transparent 65%);
}

.ticker{
  margin-top:24px;
  border-top:2px solid rgba(0,102,255,.1);
  border-bottom:2px solid rgba(0,102,255,.1);
  background:linear-gradient(135deg, rgba(0,102,255,.04), rgba(255,51,102,.03));
  overflow:hidden;
  backdrop-filter:blur(12px);
  border-radius:0;
}
.ticker__track{
  display:flex;
  gap:28px;
  white-space:nowrap;
  padding:16px 0;
  animation:scroll 22s linear infinite;
}
.ticker__track span{
  font-size:13px;
  color:var(--muted);
  font-weight:500;
}
@keyframes scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Sections */
.section{
  padding:80px 0;
  position:relative;
}
.section::before{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:100px;
  height:4px;
  background:linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
  border-radius:2px;
  opacity:0.5;
}
.section--alt{
  background:linear-gradient(135deg, rgba(0,102,255,.02), rgba(255,51,102,.015));
  border-top:2px solid rgba(0,102,255,.08);
  border-bottom:2px solid rgba(0,102,255,.08);
}
.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:40px;
  position:relative;
}
.section__head h2{
  margin:0;
  font-size:36px;
  letter-spacing:-.6px;
  font-weight:900;
  background:linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  position:relative;
}
.section__head h2::after{
  content:'';
  position:absolute;
  bottom:-8px;
  left:0;
  width:60px;
  height:4px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius:2px;
}
.section__head p{
  margin:0;
  color:var(--muted);
  max-width:65ch;
  line-height:1.8;
  font-size:16px;
  font-weight:400;
}

.cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; position:relative}
.cards--connected{
  padding:20px 0;
}
.cards--connected::before{
  content:'';
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, 
    transparent 0%,
    rgba(0,102,255,.1) 8%,
    rgba(0,102,255,.2) 16.66%,
    rgba(255,51,102,.2) 33.33%,
    rgba(0,102,255,.2) 50%,
    rgba(255,51,102,.2) 66.66%,
    rgba(0,102,255,.2) 83.33%,
    rgba(0,102,255,.1) 92%,
    transparent 100%
  );
  transform:translateY(-50%);
  z-index:0;
  pointer-events:none;
}
.cards--connected .card{
  position:relative;
  z-index:1;
}
.cards--connected .card:nth-child(1)::after,
.cards--connected .card:nth-child(2)::after,
.cards--connected .card:nth-child(3)::after{
  content:'→';
  position:absolute;
  top:50%;
  right:-28px;
  transform:translateY(-50%);
  font-size:22px;
  color:rgba(0,102,255,.5);
  z-index:2;
  pointer-events:none;
  animation:arrowPulse 2s ease-in-out infinite;
  text-shadow:0 0 8px rgba(0,102,255,.3);
}
.cards--connected .card:nth-child(2)::after{
  animation-delay:0.3s;
}
.cards--connected .card:nth-child(3)::after{
  animation-delay:0.6s;
}
@keyframes arrowPulse{
  0%, 100%{opacity:0.5; transform:translateY(-50%) translateX(0) scale(1)}
  50%{opacity:1; transform:translateY(-50%) translateX(6px) scale(1.1)}
}
.cards--connected .card:nth-child(4)::before,
.cards--connected .card:nth-child(5)::before,
.cards--connected .card:nth-child(6)::before{
  content:'';
  position:absolute;
  top:-30px;
  left:50%;
  transform:translateX(-50%);
  width:3px;
  height:30px;
  background:linear-gradient(180deg, rgba(0,102,255,.4), rgba(255,51,102,.3));
  z-index:1;
  pointer-events:none;
  border-radius:2px;
  box-shadow:0 0 8px rgba(0,102,255,.2);
}
.cards--connected .card:nth-child(4)::before{
  animation:lineGrow 0.8s ease-out 0.2s both;
}
.cards--connected .card:nth-child(5)::before{
  animation:lineGrow 0.8s ease-out 0.4s both;
}
.cards--connected .card:nth-child(6)::before{
  animation:lineGrow 0.8s ease-out 0.6s both;
}
@keyframes lineGrow{
  from{height:0; opacity:0}
  to{height:30px; opacity:1}
}
.cards--connected .card:nth-child(4)::after,
.cards--connected .card:nth-child(5)::after{
  content:'→';
  position:absolute;
  top:50%;
  right:-32px;
  transform:translateY(-50%);
  font-size:28px;
  color:rgba(0,102,255,.6);
  z-index:2;
  pointer-events:none;
  animation:arrowPulse 2s ease-in-out infinite;
  text-shadow:0 0 12px rgba(0,102,255,.4), 0 0 24px rgba(0,102,255,.2);
  font-weight:900;
}
.cards--connected .card:nth-child(5)::after{
  animation-delay:0.3s;
}
.card{
  border:2px solid rgba(0,102,255,.12);
  background:linear-gradient(135deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.97) 100%);
  border-radius:32px;
  padding:32px;
  box-shadow:
    0 8px 32px rgba(0,102,255,.08),
    0 2px 12px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(20px) saturate(180%);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  display:flex;
  flex-direction:column;
}
.card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:5px;
  background:linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  transform:scaleX(0);
  transition:transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin:left;
  z-index:1;
}
.card::after{
  content:'';
  position:absolute;
  top:-50%;
  right:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle, rgba(0,102,255,.05) 0%, transparent 70%);
  opacity:0;
  transition:opacity 0.5s ease;
  pointer-events:none;
}
.card:hover::before{
  transform:scaleX(1);
}
.card:hover::after{
  opacity:1;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(0,102,255,.25);
  box-shadow:
    0 16px 48px rgba(0,102,255,.15),
    0 4px 16px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.card .icon{
  font-size:56px;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:80px;
  height:80px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(0,102,255,.1), rgba(255,51,102,.08));
  border:2px solid rgba(0,102,255,.15);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  filter:drop-shadow(0 4px 12px rgba(0,102,255,.15));
  position:relative;
  line-height:1;
  flex-shrink:0;
}
.card .icon::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:24px;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  opacity:0;
  transition:opacity 0.4s ease;
  z-index:-1;
}
.card:hover .icon{
  transform:translateY(-4px) scale(1.05);
  border-color:rgba(0,102,255,.3);
  box-shadow:0 8px 24px rgba(0,102,255,.25);
}
.card:hover .icon::before{
  opacity:1;
}
.card h3{
  margin:0 0 12px;
  font-size:22px;
  font-weight:900;
  color:var(--text);
  letter-spacing:-.5px;
  transition:all 0.3s ease;
  position:relative;
  line-height:1.3;
}
.card:hover h3{
  color:var(--accent);
}
.card p{
  margin:0;
  color:var(--muted);
  line-height:1.75;
  font-size:15px;
  transition:color 0.3s ease;
  flex-grow:1;
}
.card:hover p{
  color:var(--text);
}

.grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
  position:relative;
}
.grid2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px}
.panel{
  border:2px solid rgba(0,102,255,.12);
  background:linear-gradient(135deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.97) 100%);
  border-radius:32px;
  padding:32px;
  backdrop-filter:blur(24px) saturate(200%);
  box-shadow:
    0 10px 40px rgba(0,102,255,.1),
    0 4px 12px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,102,255,.05);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  cursor:pointer;
}
.panel::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:5px;
  background:linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  transform:scaleX(0);
  transition:transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin:left;
  z-index:1;
}
.panel::after{
  content:'';
  position:absolute;
  top:-50%;
  right:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle, rgba(0,102,255,.06) 0%, transparent 70%);
  opacity:0;
  transition:opacity 0.4s ease;
  pointer-events:none;
}
.panel:hover{
  border-color:rgba(0,102,255,.25);
  box-shadow:
    0 20px 56px rgba(0,102,255,.18),
    0 8px 24px rgba(255,51,102,.12),
    0 4px 12px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
  transform:translateY(-8px) scale(1.01);
}
.panel:hover::before{
  transform:scaleX(1);
}
.panel:hover::after{
  opacity:1;
}
.panel h3{
  margin:0 0 20px;
  color:var(--text);
  font-size:24px;
  font-weight:900;
  letter-spacing:-.4px;
  line-height:1.3;
  transition:all 0.3s ease;
  position:relative;
  z-index:2;
}
.panel:hover h3{
  color:var(--accent);
}
.list{
  margin:0;
  padding-left:24px;
  color:var(--muted);
  line-height:1.85;
  font-size:15px;
  position:relative;
  z-index:2;
  flex-grow:1;
}
.list li{
  margin-bottom:10px;
  position:relative;
  transition:all 0.3s ease;
  padding-left:4px;
}
.list li::marker{
  color:var(--accent);
  font-weight:700;
}
.panel:hover .list li{
  color:var(--text);
  transform:translateX(2px);
}

.steps{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  position:relative;
}
.steps::before{
  content:'';
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,
    rgba(0,102,255,.15) 0%,
    rgba(0,102,255,.35) 12.5%,
    rgba(255,51,102,.4) 25%,
    rgba(0,102,255,.4) 37.5%,
    rgba(255,51,102,.4) 50%,
    rgba(0,102,255,.4) 62.5%,
    rgba(255,51,102,.35) 75%,
    rgba(0,102,255,.35) 87.5%,
    rgba(0,102,255,.15) 100%
  );
  z-index:0;
  border-radius:3px;
  box-shadow:0 2px 8px rgba(0,102,255,.2);
  transform:translateY(-50%);
}
.steps li{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:36px 28px;
  border-radius:36px;
  border:3px solid rgba(0,102,255,.2);
  background:linear-gradient(135deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.97) 50%, rgba(255,255,255,.95) 100%);
  backdrop-filter:blur(24px) saturate(200%);
  box-shadow:
    0 12px 48px rgba(0,102,255,.12),
    0 4px 16px rgba(0,0,0,.06),
    0 2px 0 rgba(255,255,255,.95) inset,
    0 -2px 0 rgba(0,102,255,.08) inset,
    0 0 0 1px rgba(255,255,255,.8) inset;
  transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  z-index:1;
  overflow:hidden;
}
.steps li::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:6px;
  background:linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  transform:scaleX(0);
  transition:transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin:left;
  z-index:3;
  border-radius:36px 36px 0 0;
  box-shadow:0 0 20px rgba(0,102,255,.4);
  margin:0;
}
.steps li::after{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:40px;
  padding:4px;
  background:linear-gradient(135deg, var(--accent), var(--accent2), var(--accent3), var(--accent));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:0;
  transition:opacity 0.5s ease;
  z-index:-1;
  filter:blur(8px);
}
.steps li .arrow{
  position:absolute;
  top:50%;
  right:-24px;
  transform:translateY(-50%);
  font-size:20px;
  color:rgba(0,102,255,.6);
  font-weight:700;
  z-index:10;
  pointer-events:none;
  animation:arrowPulseHorizontal 2s ease-in-out infinite;
  line-height:1;
  width:auto;
  height:auto;
  background:none;
  border:none;
  padding:0;
  margin:0;
}
.steps li:last-child .arrow{
  display:none;
}
@keyframes arrowPulseHorizontal{
  0%, 100%{opacity:0.5; transform:translateY(-50%) translateX(0) scale(1)}
  50%{opacity:1; transform:translateY(-50%) translateX(6px) scale(1.1)}
}
.steps li:hover{
  border-color:rgba(0,102,255,.4);
  box-shadow:
    0 20px 60px rgba(0,102,255,.2),
    0 8px 24px rgba(255,51,102,.15),
    0 4px 12px rgba(0,0,0,.1),
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -2px 0 rgba(0,102,255,.1),
    0 0 0 2px rgba(255,255,255,.9) inset;
  transform:translateY(-10px) scale(1.04);
}
.steps li:hover::before{
  transform:scaleX(1);
  box-shadow:0 0 30px rgba(0,102,255,.5);
}
.steps li:hover::after{
  opacity:1;
  filter:blur(12px);
}
.steps li:hover .arrow{
  opacity:1;
  color:rgba(0,102,255,.8);
  animation-duration:1s;
}
.steps li > span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:72px;
  height:72px;
  border-radius:20px;
  background:linear-gradient(135deg, rgba(0,102,255,.12), rgba(255,51,102,.08));
  border:2px solid rgba(0,102,255,.2);
  font-weight:900;
  color:var(--accent);
  letter-spacing:1px;
  font-size:22px;
  position:relative;
  z-index:2;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 4px 12px rgba(0,102,255,.15);
  flex-shrink:0;
  margin-bottom:20px;
}
.steps li:hover > span{
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#ffffff;
  border-color:var(--accent);
  transform:scale(1.1) rotate(5deg);
  box-shadow:0 8px 24px rgba(0,102,255,.3);
}
.steps li > div{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.steps li h3{
  margin:0 0 12px;
  color:var(--text);
  font-size:20px;
  font-weight:900;
  letter-spacing:-.3px;
  transition:all 0.3s ease;
  line-height:1.3;
}
.steps li:hover h3{
  color:var(--accent);
}
.steps li p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
  font-size:14px;
  transition:color 0.3s ease;
}
.steps li:hover p{
  color:var(--text);
}

.quality{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:28px;
  position:relative;
}
.quality article{
  border:none;
  background:linear-gradient(135deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.97) 100%);
  border-radius:0;
  padding:0;
  backdrop-filter:blur(24px) saturate(200%);
  box-shadow:none;
  transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:visible;
  display:grid;
  grid-template-columns:80px 1fr;
  gap:24px;
  align-items:start;
  padding:32px;
  border-left:6px solid transparent;
  border-radius:0 24px 24px 0;
  background:linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 100%);
  box-shadow:
    0 8px 32px rgba(0,102,255,.08),
    0 2px 8px rgba(0,0,0,.04),
    inset 0 0 0 1px rgba(0,102,255,.1);
}
.quality article::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  background:linear-gradient(180deg, var(--accent), var(--accent2), var(--accent3));
  transform:scaleY(0);
  transition:transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin:top;
  z-index:2;
  border-radius:0 3px 3px 0;
  box-shadow:0 0 20px rgba(0,102,255,.4);
}
.quality article::after{
  content:'';
  position:absolute;
  right:-2px;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:0;
  border-style:solid;
  border-width:12px 0 12px 12px;
  border-color:transparent transparent transparent rgba(0,102,255,.1);
  opacity:0;
  transition:all 0.5s ease;
  z-index:1;
}
.quality article:hover{
  border-left-color:var(--accent);
  box-shadow:
    0 16px 48px rgba(0,102,255,.15),
    0 4px 16px rgba(255,51,102,.1),
    0 2px 8px rgba(0,0,0,.06),
    inset 0 0 0 1px rgba(0,102,255,.15);
  transform:translateX(8px);
  background:linear-gradient(135deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.98) 100%);
}
.quality article:hover::before{
  transform:scaleY(1);
  box-shadow:0 0 30px rgba(0,102,255,.5);
}
.quality article:hover::after{
  opacity:1;
  border-left-color:rgba(0,102,255,.2);
}
.quality__icon{
  font-size:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:80px;
  height:80px;
  border-radius:20px;
  background:linear-gradient(135deg, rgba(0,102,255,.1), rgba(255,51,102,.08));
  border:2px solid rgba(0,102,255,.15);
  transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 4px 16px rgba(0,102,255,.12);
  position:relative;
  line-height:1;
  flex-shrink:0;
}
.quality__icon::before{
  content:'';
  position:absolute;
  inset:-4px;
  background:radial-gradient(circle, rgba(0,102,255,.15), transparent 70%);
  border-radius:50%;
  opacity:0;
  transition:opacity 0.5s ease;
  z-index:-1;
}
.quality article:hover .quality__icon{
  transform:scale(1.05) rotate(-3deg);
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  border-color:var(--accent);
  box-shadow:0 8px 24px rgba(0,102,255,.25);
  color:#ffffff;
}
.quality article:hover .quality__icon::before{
  opacity:0.6;
}
.quality article > div:last-child{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.quality article h3{
  margin:0;
  color:var(--text);
  font-size:22px;
  font-weight:800;
  letter-spacing:-.3px;
  transition:color 0.3s ease;
  line-height:1.3;
  position:relative;
  padding-left:16px;
}
.quality article h3::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent);
  opacity:0.5;
  transition:all 0.3s ease;
}
.quality article:hover h3{
  color:var(--accent);
}
.quality article:hover h3::before{
  opacity:1;
  width:6px;
  height:6px;
  background:var(--accent2);
  box-shadow:0 0 12px rgba(0,102,255,.5);
}
.quality article p{
  margin:0;
  color:var(--muted);
  line-height:1.75;
  font-size:15px;
  transition:color 0.3s ease;
  padding-left:16px;
}
.quality article:hover p{
  color:var(--text);
}
.note{
  margin-top:40px;
  padding:24px 28px;
  border-radius:20px;
  border-left:4px solid var(--accent);
  background:linear-gradient(135deg, rgba(0,102,255,.05) 0%, rgba(255,255,255,.98) 100%);
  color:var(--text);
  line-height:1.7;
  position:relative;
  font-size:15px;
  display:flex;
  align-items:flex-start;
  gap:16px;
  box-shadow:
    0 4px 16px rgba(0,102,255,.08),
    0 1px 4px rgba(0,0,0,.04);
}
.note__icon{
  font-size:24px;
  line-height:1;
  flex-shrink:0;
  margin-top:2px;
  opacity:0.8;
}
.note__content{
  flex:1;
  color:var(--text);
}
.note strong{
  color:var(--accent);
  font-weight:700;
  font-size:15px;
  display:inline-block;
  margin-right:6px;
}

/* Contact */
.contact{display:grid; grid-template-columns: 1.05fr .95fr; gap:32px; align-items:stretch}
.form{
  border:3px solid rgba(0,102,255,.2);
  background:linear-gradient(135deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.97) 50%, rgba(255,255,255,.95) 100%);
  border-radius:40px;
  padding:32px 28px;
  position:relative;
  backdrop-filter:blur(24px) saturate(200%);
  box-shadow:
    0 16px 64px rgba(0,102,255,.12),
    0 4px 16px rgba(0,0,0,.06),
    0 2px 0 rgba(255,255,255,.95) inset,
    0 -2px 0 rgba(0,102,255,.08) inset,
    0 0 0 1px rgba(255,255,255,.8) inset;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  gap:14px;
}
.form::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:6px;
  background:linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  opacity:1;
  border-radius:40px 40px 0 0;
  box-shadow:0 0 20px rgba(0,102,255,.4);
}
.form::after{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:44px;
  padding:4px;
  background:linear-gradient(135deg, var(--accent), var(--accent2), var(--accent3), var(--accent));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:0;
  transition:opacity 0.5s ease;
  z-index:-1;
  filter:blur(8px);
}
.form:focus-within::after{
  opacity:0.3;
}
@keyframes bgFloat{
  0%, 100%{transform:translate(0, 0) rotate(0deg)}
  33%{transform:translate(30px, -30px) rotate(120deg)}
  66%{transform:translate(-20px, 20px) rotate(240deg)}
}
.form__header{
  margin-bottom:4px;
  position:relative;
  z-index:2;
}
.form__header h3{
  margin:0 0 4px;
  font-size:24px;
  font-weight:900;
  color:var(--text);
  letter-spacing:-.4px;
  background:linear-gradient(135deg, var(--accent), var(--accent2), var(--accent3));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.2;
}
.form__header p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.form__grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px}
.form__field{
  position:relative;
}
.form__field span{
  font-size:12px;
  color:var(--text);
  font-weight:600;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:6px;
}
.form__icon{
  font-size:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:6px;
  background:linear-gradient(135deg, rgba(0,102,255,.1), rgba(255,51,102,.08));
  flex-shrink:0;
}
.form__optional{
  font-weight:400;
  color:var(--muted);
  font-size:12px;
}
input, textarea{
  width:100%;
  padding:14px 20px;
  border-radius:18px;
  border:2px solid rgba(0,102,255,.2);
  background:linear-gradient(135deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.97) 100%);
  color:var(--text);
  outline:none;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-size:14px;
  font-family:inherit;
  box-shadow:
    0 4px 16px rgba(0,102,255,.1),
    0 2px 6px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,102,255,.05);
  position:relative;
}
input:hover, textarea:hover{
  border-color:rgba(0,102,255,.3);
  box-shadow:
    0 8px 24px rgba(0,102,255,.12),
    0 4px 8px rgba(0,0,0,.06);
  transform:translateY(-2px);
  background:#ffffff;
}
input:focus, textarea:focus{
  border-color:var(--accent);
  box-shadow:
    0 0 0 4px rgba(0,102,255,.15),
    0 12px 32px rgba(0,102,255,.2),
    0 4px 12px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
  transform:translateY(-3px);
  background:#ffffff;
}
.form__field:focus-within .form__icon{
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  transform:scale(1.1);
}
.actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:4px;
}
.actions.full{
  grid-column:1 / -1;
  margin-top:8px;
}
.form__actions{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.form__hint{margin:0; color:var(--muted); font-size:12px}
.toast{
  position:absolute;
  left:24px;
  right:24px;
  bottom:24px;
  padding:16px 20px;
  border-radius:20px;
  border:2px solid rgba(0,102,255,.2);
  background:linear-gradient(135deg, rgba(0,102,255,.1), rgba(255,51,102,.08));
  backdrop-filter: blur(12px);
  display:none;
  color:var(--text);
  box-shadow:0 8px 32px rgba(0,102,255,.2);
  font-weight:500;
  animation:slideUp 0.3s ease;
}
@keyframes slideUp{
  from{transform:translateY(20px); opacity:0}
  to{transform:translateY(0); opacity:1}
}
.toast.show{display:block}

.contact__info{display:grid; gap:14px}
.info{
  border:2px solid rgba(0,102,255,.15);
  background:var(--card);
  border-radius:32px;
  padding:36px;
  backdrop-filter:blur(12px);
  box-shadow:0 8px 32px rgba(0,0,0,.08);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}
.info::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--accent2), var(--accent3));
  opacity:.8;
}
.info h3{
  margin:0 0 24px;
  color:var(--text);
  font-size:28px;
  font-weight:900;
  letter-spacing:-.5px;
  display:flex;
  align-items:center;
  gap:12px;
  background:linear-gradient(135deg, var(--accent2), var(--accent3), var(--accent));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  position:relative;
  z-index:2;
}
.info h3::before{
  content:'📍';
  font-size:32px;
  filter:drop-shadow(0 2px 8px rgba(0,102,255,.3));
}
.info p{
  margin:0 0 28px;
  color:var(--muted);
  line-height:1.8;
  font-size:15px;
  padding:24px 24px;
  border-radius:24px;
  border:2px solid rgba(0,102,255,.15);
  background:linear-gradient(135deg, rgba(0,102,255,.08), rgba(255,51,102,.06));
  width:100%;
  box-sizing:border-box;
  backdrop-filter:blur(10px);
  box-shadow:
    0 4px 12px rgba(0,102,255,.08),
    inset 0 1px 0 rgba(255,255,255,.8);
  transition:all 0.3s ease;
  position:relative;
  z-index:2;
}
.info p:hover{
  border-color:rgba(0,102,255,.25);
  box-shadow:
    0 6px 20px rgba(0,102,255,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(-2px);
}
.info__row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:20px 24px;
  border-radius:24px;
  border:2px solid rgba(0,102,255,.15);
  background:linear-gradient(135deg, rgba(0,102,255,.08), rgba(255,51,102,.06));
  margin-top:16px;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter:blur(10px);
  box-shadow:
    0 4px 12px rgba(0,102,255,.08),
    inset 0 1px 0 rgba(255,255,255,.8);
  position:relative;
  z-index:2;
}
.info__row:hover{
  border-color:rgba(0,102,255,.3);
  box-shadow:
    0 8px 24px rgba(0,102,255,.15),
    inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(-3px);
  background:linear-gradient(135deg, rgba(0,102,255,.12), rgba(255,51,102,.08));
}
.info__row span:first-child{
  font-weight:600;
  color:var(--text);
  font-size:13px;
  letter-spacing:.2px;
  flex-shrink:0;
  min-width:100px;
}
.info__row span:last-child{
  color:var(--muted);
  font-size:14px;
  text-align:right;
  line-height:1.6;
}
.info__row a{
  color:var(--accent);
  text-decoration:none;
  transition:all 0.3s ease;
  border-bottom:1px solid transparent;
}
.info__row a:hover{
  color:var(--accent2);
  border-bottom-color:var(--accent2);
}
.info__row--scope{
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
.scope-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.scope-tag{
  padding:6px 12px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(0,102,255,.1), rgba(255,51,102,.08));
  border:1px solid rgba(0,102,255,.2);
  color:var(--text);
  font-size:12px;
  font-weight:600;
}
.map-container{
  margin-top:48px;
  padding-top:48px;
  border-top:3px solid rgba(0,102,255,.15);
  position:relative;
}
.map-container::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  opacity:0.6;
  border-radius:3px 3px 0 0;
}
.map-container h3{
  margin:0 0 24px;
  font-size:26px;
  font-weight:900;
  color:var(--text);
  letter-spacing:-.4px;
  background:linear-gradient(135deg, var(--accent), var(--accent2), var(--accent3));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  display:flex;
  align-items:center;
  gap:12px;
}
.map-container h3::before{
  content:'🗺️';
  font-size:32px;
  filter:drop-shadow(0 2px 8px rgba(0,102,255,.3));
}
.map-wrapper{
  border-radius:32px;
  overflow:hidden;
  box-shadow:
    0 16px 48px rgba(0,102,255,.15),
    0 4px 16px rgba(0,0,0,.08),
    0 0 0 3px rgba(0,102,255,.1);
  border:3px solid rgba(0,102,255,.2);
  transition:all 0.3s ease;
  position:relative;
  min-height:400px;
  background:linear-gradient(135deg, rgba(0,102,255,.05), rgba(255,51,102,.03));
}
.map-wrapper:hover{
  box-shadow:
    0 20px 60px rgba(0,102,255,.2),
    0 6px 20px rgba(0,0,0,.1),
    0 0 0 3px rgba(0,102,255,.2);
  transform:translateY(-4px);
}
.map-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(0,102,255,.08), rgba(255,51,102,.05));
  border-radius:32px;
  z-index:2;
  transition:opacity 0.3s ease;
}
.map-placeholder.loaded{
  opacity:0;
  pointer-events:none;
}
.map-placeholder__icon{
  font-size:64px;
  margin-bottom:16px;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%, 100%{transform:scale(1); opacity:0.8}
  50%{transform:scale(1.1); opacity:1}
}
.map-placeholder__text{
  color:var(--muted);
  font-size:15px;
  font-weight:600;
}
.map-wrapper iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
  border-radius:32px;
  z-index:1;
}
.map-wrapper iframe.loaded{
  display:block !important;
  opacity:1;
}
.privacy-modal{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.privacy-modal.show{
  display:flex;
}
.privacy-modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(8px);
}
.privacy-modal__content{
  position:relative;
  background:var(--card);
  border-radius:32px;
  padding:40px;
  max-width:800px;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  border:2px solid rgba(0,102,255,.15);
  z-index:1;
}
.privacy-modal__close{
  position:absolute;
  top:24px;
  right:24px;
  width:44px;
  height:44px;
  border-radius:16px;
  border:2px solid rgba(0,102,255,.2);
  background:linear-gradient(135deg, rgba(0,102,255,.08), rgba(255,51,102,.06));
  color:var(--text);
  font-size:26px;
  cursor:pointer;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  box-shadow:
    0 4px 12px rgba(0,102,255,.1),
    inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter:blur(10px);
  z-index:10;
}
.privacy-modal__close::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  opacity:0;
  transition:opacity 0.4s ease;
  border-radius:16px;
  z-index:-1;
}
.privacy-modal__close:hover{
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#ffffff;
  border-color:var(--accent);
  transform:scale(1.1) rotate(90deg);
  box-shadow:
    0 8px 24px rgba(0,102,255,.3),
    0 4px 12px rgba(255,51,102,.2),
    inset 0 1px 0 rgba(255,255,255,.3);
}
.privacy-modal__close:hover::before{
  opacity:1;
}
.privacy-modal__content h2{
  margin:0 0 20px;
  font-size:28px;
  font-weight:700;
  color:var(--text);
}
.privacy-content{
  margin-bottom:30px;
}
.privacy-content h3{
  margin:24px 0 12px;
  font-size:18px;
  font-weight:700;
  color:var(--text);
}
.privacy-content p, .privacy-content ul{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.7;
}
.privacy-content ul{
  padding-left:24px;
}
.privacy-content li{
  margin-bottom:8px;
}
.privacy-actions{
  margin-top:32px;
  padding-top:32px;
  border-top:2px solid rgba(0,102,255,.15);
  display:flex;
  justify-content:center;
}
.privacy-modal__back{
  padding:16px 36px;
  border-radius:20px;
  border:none;
  background:linear-gradient(135deg, var(--accent), var(--accent2), var(--accent3));
  background-size:200% 200%;
  color:#ffffff;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 8px 24px rgba(0,102,255,.3),
    0 4px 12px rgba(255,51,102,.2),
    inset 0 1px 0 rgba(255,255,255,.3);
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.privacy-modal__back::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transition:left 0.6s ease;
}
.privacy-modal__back:hover{
  background-position:100% 0%;
  transform:translateY(-3px) scale(1.05);
  box-shadow:
    0 12px 32px rgba(0,102,255,.4),
    0 6px 16px rgba(255,51,102,.3),
    inset 0 1px 0 rgba(255,255,255,.4),
    0 0 25px rgba(0,102,255,.3);
}
.privacy-modal__back:hover::before{
  left:100%;
}
.privacy-modal__back:active{
  transform:translateY(-1px) scale(1.02);
}
.footer__links{
  display:flex;
  gap:16px;
  align-items:center;
}
.footer__link{
  color:var(--accent);
  text-decoration:none;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-size:14px;
  font-weight:600;
  padding:10px 20px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(0,102,255,.08), rgba(255,51,102,.06));
  border:2px solid rgba(0,102,255,.15);
  box-shadow:
    0 4px 12px rgba(0,102,255,.1),
    inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter:blur(10px);
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:1;
}
.footer__link{
  position:relative;
  z-index:1;
  transition:color 0.3s ease;
}
.footer__link::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  opacity:0;
  transition:opacity 0.4s ease;
  z-index:0;
  border-radius:16px;
}
.footer__link > *{
  position:relative;
  z-index:10;
  transition:color 0.3s ease;
  color:inherit;
}
.footer__link:hover{
  color:#ffffff !important;
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:
    0 8px 20px rgba(0,102,255,.25),
    0 4px 8px rgba(255,51,102,.15),
    inset 0 1px 0 rgba(255,255,255,.3);
}
.footer__link:hover::before{
  opacity:1;
  z-index:1;
}
.footer__link:hover,
.footer__link:hover *{
  color:#ffffff !important;
}
.footer__link:hover > *{
  z-index:10;
  position:relative;
  color:#ffffff !important;
}
.infoCard{border:1px solid rgba(0,212,255,.15); background:rgba(0,0,0,.2); border-radius:24px; padding:20px; backdrop-filter:blur(8px)}
.infoCard h3{margin:0 0 12px; color:var(--accent2)}
.infoCard p{margin:0 0 12px; color:var(--muted); line-height:1.7}
.infoCard__row{display:flex; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:18px; border:1px solid rgba(0,212,255,.12); background:rgba(0,212,255,.05); margin-top:10px}
.muted{color:var(--muted); font-size:13px}
.infoCard__cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.miniFAQ{border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); border-radius:22px; padding:16px}
.miniFAQ h3{margin:0 0 10px}
.miniFAQ ul{margin:0; padding-left:18px; color:var(--muted); line-height:1.7}

/* Footer */
.footer{
  padding:50px 0;
  border-top:2px solid rgba(0,102,255,.1);
  background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(250,251,252,.98) 100%);
  backdrop-filter:blur(24px) saturate(200%);
  box-shadow:0 -4px 24px rgba(0,102,255,.05);
  position:relative;
}
.footer::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  opacity:0.5;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.footer__brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer small{
  display:block;
  color:var(--muted);
  font-size:13px;
  font-weight:500;
}

/* Responsive */
@media (max-width: 960px){
  .hero__grid{grid-template-columns:1fr;}
  h1{font-size:40px}
  .cards{grid-template-columns:repeat(2, minmax(0,1fr))}
  .grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px}
  .contact{grid-template-columns:1fr}
  .cards--connected .card::before,
  .cards--connected .card::after{display:none}
  .cards--connected::before{display:none}
}
@media (max-width: 720px){
  *{touch-action:manipulation}
  .container{padding:0 16px}
  .header__inner{padding:12px 0}
  .brand strong{font-size:14px}
  .brand small{font-size:10px}
  .brand img{width:32px; height:32px}
  .nav__toggle{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px}
  .nav__menu{
    position:fixed;
    right:20px;
    top:84px;
    width:min(360px, calc(100vw - 40px));
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:24px;
    border-radius:24px;
    background:rgba(255,255,255,.98);
    border:2px solid rgba(0,102,255,.15);
    backdrop-filter:blur(24px) saturate(180%);
    box-shadow:0 20px 60px rgba(0,0,0,.2), 0 8px 24px rgba(0,102,255,.15);
    z-index:999;
    animation:slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow:hidden;
  }
  .nav__menu::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  }
  @keyframes slideDown{
    from{transform:translateY(-20px); opacity:0}
    to{transform:translateY(0); opacity:1}
  }
  .nav__menu a{
    padding:14px 18px;
    border-radius:16px;
    border:2px solid rgba(0,102,255,.1);
    background:linear-gradient(135deg, rgba(0,102,255,.04), rgba(255,51,102,.02));
    color:var(--text);
    font-weight:600;
    font-size:15px;
    transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position:relative;
    overflow:hidden;
  }
  .nav__menu a::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(0,102,255,.1), rgba(255,51,102,.08));
    opacity:0;
    transition:opacity 0.3s ease;
  }
  .nav__menu a:hover::before{
    opacity:1;
  }
  .nav__menu a:hover{
    background:linear-gradient(135deg, rgba(0,102,255,.12), rgba(255,51,102,.08));
    border-color:rgba(0,102,255,.3);
    color:var(--accent);
    transform:translateX(4px);
    box-shadow:0 4px 16px rgba(0,102,255,.2);
  }
  .nav__menu .btn--small{
    margin-top:12px;
    padding:16px 24px;
    border-radius:18px;
    background:linear-gradient(135deg, var(--accent), var(--accent2), var(--accent3));
    background-size:200% 200%;
    color:#ffffff;
    border:2px solid transparent;
    box-shadow:
      0 8px 24px rgba(0,102,255,.35),
      0 4px 12px rgba(255,51,102,.25),
      inset 0 1px 0 rgba(255,255,255,.3);
    text-align:center;
    justify-content:center;
    font-weight:700;
    position:relative;
    overflow:hidden;
  }
  .nav__menu .btn--small::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    transition:left 0.6s ease;
  }
  .nav__menu .btn--small:hover{
    background-position:100% 0%;
    color:#ffffff;
    transform:translateY(-3px) scale(1.02);
    box-shadow:
      0 12px 32px rgba(0,102,255,.4),
      0 6px 16px rgba(255,51,102,.3),
      inset 0 1px 0 rgba(255,255,255,.4),
      0 0 25px rgba(0,102,255,.3);
  }
  .nav__menu .btn--small:hover::before{
    left:100%;
  }
  .nav__menu.open{display:flex}

  .section__head{flex-direction:column; align-items:flex-start}
  h1{font-size:32px; line-height:1.2; letter-spacing:-.6px}
  h2{font-size:28px}
  h3{font-size:20px}
  .lead{font-size:16px; line-height:1.7}
  .hero{padding:48px 0 20px}
  .heroCard{padding:20px 24px; border-radius:24px}
  .heroCard__title{font-size:22px}
  .heroCard__desc{font-size:14px}
  .metrics{grid-template-columns:1fr; gap:12px; margin-top:24px}
  .metrics > div{padding:16px}
  .metrics strong{font-size:14px}
  .metrics span{font-size:12px}
  .cards{grid-template-columns:1fr; gap:20px}
  .cards--connected .card::before,
  .cards--connected .card::after{display:none}
  .cards--connected::before{display:none}
  .grid{grid-template-columns:1fr; gap:20px}
  .grid2{grid-template-columns:1fr}
  .quality{grid-template-columns:1fr; gap:20px}
  .quality article{padding:24px; grid-template-columns:60px 1fr; gap:16px}
  .quality__icon{font-size:36px; width:60px; height:60px}
  .quality article h3{font-size:18px; padding-left:12px}
  .quality article p{font-size:13px; padding-left:12px}
  .steps{grid-template-columns:1fr; gap:16px}
  .steps::before{display:none}
  .steps li{padding:28px 20px}
  .steps li .arrow{display:none}
  .steps li > span{width:60px; height:60px; font-size:20px; margin-bottom:16px}
  .steps li h3{font-size:18px}
  .steps li p{font-size:13px}
  .form__grid{grid-template-columns:1fr}
  .form__header h3{font-size:20px}
  .form__header p{font-size:13px}
  .form{padding:24px 20px; gap:16px; border-radius:32px}
  .form__field span{font-size:12px}
  input, textarea{padding:12px 16px; font-size:14px; border-radius:16px}
  .btn{min-height:44px; padding:14px 24px; font-size:15px}
  .btn--submit{width:100%; min-width:auto; min-height:48px}
  .actions{flex-direction:column; gap:12px}
  .actions .btn{width:100%; min-height:48px}
  .glass__item{grid-template-columns:1fr}
  .section{padding:48px 0}
  .pill{font-size:12px; padding:8px 12px}
  .cta{flex-direction:column; gap:12px}
  .cta .btn{width:100%; justify-content:center}
  .map-wrapper{min-height:300px; border-radius:24px}
  .map-container h3{font-size:20px}
  .ticker{font-size:13px; padding:12px 0}
  .ticker__track span{font-size:13px; padding:0 20px}
  .section__head{margin-bottom:32px}
  .section__head p{font-size:14px}
  .info{padding:24px 20px; border-radius:24px}
  .info h3{font-size:18px}
  .info p{font-size:14px; line-height:1.6}
  .info__row{font-size:13px; padding:12px 0}
  .kv__item{padding:12px 0}
  .kv__label{font-size:12px; margin-bottom:6px}
  .kv__value{font-size:13px; line-height:1.6}
  .card{padding:24px 20px}
  .card .icon{font-size:40px; width:64px; height:64px}
  .card h3{font-size:18px}
  .card p{font-size:14px}
  .note{padding:20px 18px; gap:12px; border-radius:16px; margin-top:32px; font-size:14px}
  .note__icon{font-size:20px}
  .note strong{font-size:14px}
}