:root{
  --bg:#07111d;
  --bg2:#0d1e31;
  --bg3:#102742;
  --panel:rgba(255,255,255,.06);
  --panel-2:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.12);
  --text:#f5f8fc;
  --muted:#c2d3e6;
  --accent:#78d8ff;
  --accent-2:#c8f2ff;
  --shadow:0 18px 50px rgba(0,0,0,.32);
  --radius:26px;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(120,216,255,.12), transparent 30%),
    linear-gradient(180deg, #02070d 0%, var(--bg) 24%, var(--bg2) 100%);
}
a{color:inherit}
.container{width:min(calc(100% - 28px), var(--max)); margin:0 auto}
.site-announcement{
  background:#000;
  color:#fff;
  text-align:center;
  padding:14px 14px 13px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-announcement-title{
  font-size:15px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.site-announcement-subtitle{
  margin-top:7px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#e9f2ff;
}
.site-announcement-subtitle--slide-in{
  display:block;
  opacity:0;
  color:#5f6e82;
  transform:translate3d(clamp(-2.5rem, -12vw, -5rem), 0, 0);
  transition:opacity .84s ease, color .72s ease .42s, transform 1.19s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-announcement-subtitle--slide-in.is-visible{
  opacity:1;
  color:#e9f2ff;
  transform:translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce){
  .site-announcement-subtitle--slide-in{
    opacity:1;
    transform:none;
    transition:none;
  }
}
.topbar{
  background:#000;
  border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(8px);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  padding:14px 0;
}
.brand-wrap{display:flex; align-items:center; gap:24px; min-width:0}
.brand-icon{width:min(170px,28vw); max-width:170px; object-fit:contain; flex:0 0 auto}
.brand-word{width:min(420px,48vw); max-width:420px; object-fit:contain; min-width:0}
.nav{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.nav a{
  text-decoration:none;
  color:#dce9f7;
  font-size:15px;
  position:relative;
  padding:8px 2px;
  transition:color .22s ease, transform .22s ease;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg, var(--accent), #fff);
  border-radius:999px;
  transition:width .25s ease;
}
.nav a:hover{
  color:#fff;
  transform:translateY(-2px);
}
.nav a:hover::after{
  width:100%;
}
.page-hero{
  padding:46px 0 26px;
  text-align:center;
}
.eyebrow{
  display:inline-block;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(120,216,255,.12);
  border:1px solid rgba(120,216,255,.18);
  color:#def7ff;
  margin-bottom:18px;
}
h1{
  margin:0 0 14px;
  font-size:clamp(2.1rem, 4vw, 4.2rem);
  letter-spacing:-.03em;
}
.hero-text{
  max-width:900px;
  margin:0 auto;
  color:var(--muted);
  line-height:1.8;
  font-size:1.06rem;
}
.section{padding:26px 0}
.section-title{
  margin:0 0 14px;
  font-size:clamp(1.7rem, 3vw, 2.7rem);
  letter-spacing:-.02em;
}
.section-sub{
  margin:0 0 22px;
  color:var(--muted);
  line-height:1.8;
  font-size:1.02rem;
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero-banner{
  background:#000;
  border:1px solid rgba(255,255,255,.08);
  border-radius:30px;
  padding:26px;
  margin:0 auto 30px;
}
.hero-banner-inner{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
}
.hero-banner .brand-icon{width:min(260px,32%); max-width:260px}
.hero-banner .brand-word{width:min(740px,62%); max-width:740px}
.split{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:center;
}
.actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px; border-radius:999px;
  font-weight:700; text-decoration:none; border:1px solid transparent;
}
.btn.primary{background:linear-gradient(135deg, #fff 0%, var(--accent-2) 100%); color:#06111d}
.btn.secondary{background:rgba(255,255,255,.04); color:#fff; border-color:rgba(255,255,255,.14)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.info-card{padding:24px}
.info-card h3{margin:0 0 10px; font-size:1.35rem}
.info-card p{margin:0; color:var(--muted); line-height:1.75}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px}
.stat{padding:18px; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.05)}
.stat strong{display:block; margin-bottom:6px; font-size:1.2rem}
.stat span{color:var(--muted); line-height:1.55; font-size:14px}
.tag{
  display:inline-block; margin-bottom:12px; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; padding:7px 11px; border-radius:999px;
  background:rgba(120,216,255,.1); border:1px solid rgba(120,216,255,.16); color:#ddf7ff;
}
.product{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; margin-bottom:28px; padding:28px}
.product.reverse .copy{order:2}
.product.reverse .visual{order:1}
.copy p{margin:0 0 18px; color:var(--muted); line-height:1.8}
.copy ul{margin:0 0 0 18px; padding:0; line-height:1.85}
.visual .image-frame{padding:14px; border-radius:24px; background:#0a1220; border:1px solid rgba(255,255,255,.1)}
.visual img{width:100%; display:block; border-radius:16px; object-fit:cover}
.quote-box{padding:28px}
.quote-box p{margin:0; color:#e7f1fd; line-height:1.9; font-size:1.05rem}
.checklist{list-style:none; padding:0; margin:18px 0 0}
.checklist li{position:relative; padding-left:26px; color:var(--muted); margin-bottom:10px; line-height:1.75}
.checklist li::before{content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700}
.contact-list{list-style:none; padding:0; margin:0}
.contact-list li{padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); color:var(--muted)}
.contact-panel{padding:28px}
.contact-form-sub{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.65;
}
.hp-field{
  position:absolute !important;
  left:-10000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}
.form-feedback{
  display:none;
  margin:0 0 14px;
  padding:11px 12px;
  border-radius:12px;
  font-size:.95rem;
  line-height:1.4;
}
.form-feedback.is-visible{
  display:block;
}
.form-feedback.is-success{
  background:rgba(74, 222, 128, .14);
  border:1px solid rgba(74, 222, 128, .38);
  color:#d9ffe7;
}
.form-feedback.is-error{
  background:rgba(248, 113, 113, .14);
  border:1px solid rgba(248, 113, 113, .38);
  color:#ffe1e1;
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.contact-form-label{
  font-size:.92rem;
  color:#eaf3ff;
  font-weight:700;
}
.contact-form-input,
.contact-form-textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.2);
  color:var(--text);
  padding:12px 13px;
  font:inherit;
}
.contact-form-textarea{
  min-height:130px;
  resize:vertical;
}
.contact-form-input::placeholder,
.contact-form-textarea::placeholder{
  color:#99aec3;
}
.contact-form-input:focus,
.contact-form-textarea:focus{
  outline:none;
  border-color:rgba(120,216,255,.6);
  box-shadow:0 0 0 3px rgba(120,216,255,.14);
}
.contact-form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}
.footer{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:40px; padding:24px 0 36px; color:#adc2d8; font-size:14px;
}
.footer-inner{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
@media (max-width: 920px){
  .split,.grid-3,.grid-2,.product,.product.reverse,.stats{grid-template-columns:1fr}
  .product.reverse .copy,.product.reverse .visual{order:initial}
}
@media (max-width: 680px){
  .container{width:min(calc(100% - 16px), var(--max))}
  .site-announcement{
    padding:10px 10px 9px;
  }
  .site-announcement-title{
    font-size:12px;
    letter-spacing:.1em;
  }
  .site-announcement-subtitle{
    font-size:10px;
    letter-spacing:.12em;
    margin-top:4px;
  }
  .topbar-inner{align-items:flex-start; flex-direction:column}
  .brand-wrap{gap:12px}
  .brand-icon{width:120px}
  .brand-word{width:240px}
  .hero-banner{padding:16px}
  .hero-banner-inner{gap:12px}
  .hero-banner .brand-icon{width:36%}
  .hero-banner .brand-word{width:56%}
  .product,.info-card,.quote-box,.contact-panel{padding:18px}
  .actions{flex-direction:column}
  .btn{width:100%}
}


/* Homepage refinements */
.home-hero{
  padding: 34px 0 18px;
}
.home-section{
  padding: 18px 0;
}
.home-section-first{
  padding-top: 10px;
}
.home-hero h1,
.home-hero .hero-text,
.home-hero .actions,
.home-hero .stats,
.home-section .card,
.home-section .split > div,
.home-section .grid-3 > .card{
  animation: fadeUp .7s ease both;
}
.home-hero .hero-text{ animation-delay: .08s; }
.home-hero .actions{ animation-delay: .14s; }
.home-hero .stats{ animation-delay: .2s; }
.home-section .grid-3 > .card:nth-child(1){ animation-delay: .08s; }
.home-section .grid-3 > .card:nth-child(2){ animation-delay: .14s; }
.home-section .grid-3 > .card:nth-child(3){ animation-delay: .2s; }

.card,
.stat,
.btn{
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease, filter .35s ease;
}
.card,
.stat{
  position: relative;
  overflow: hidden;
}
.card::before,
.stat::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: linear-gradient(120deg, transparent 0%, rgba(120,216,255,.00) 30%, rgba(120,216,255,.20) 48%, rgba(255,255,255,.18) 52%, rgba(120,216,255,.00) 70%, transparent 100%);
  transform: translateX(-130%);
  transition: transform .7s ease;
  pointer-events:none;
}
.card::after,
.stat::after{
  content:"";
  position:absolute;
  inset:auto -30px -40px auto;
  width:140px;
  height:140px;
  background: radial-gradient(circle, rgba(120,216,255,.16), transparent 70%);
  opacity:0;
  transition: opacity .35s ease, transform .35s ease;
  transform: scale(.8);
  pointer-events:none;
}
.card:hover,
.stat:hover{
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 28px 70px rgba(0,0,0,.42);
  border-color: rgba(120,216,255,.28);
  filter: brightness(1.03);
}
.card:hover::before,
.stat:hover::before{
  transform: translateX(130%);
}
.card:hover::after,
.stat:hover::after{
  opacity:1;
  transform: scale(1.15);
}
.btn:hover{
  transform: translateY(-2px) scale(1.02);
}
@keyframes fadeUp{
  from{
    opacity:0;
    transform: translateY(16px);
  }
  to{
    opacity:1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce){
  .home-hero h1,
  .home-hero .hero-text,
  .home-hero .actions,
  .home-hero .stats,
  .home-section .card,
  .home-section .split > div,
  .home-section .grid-3 > .card{
    animation:none !important;
  }
  .card,
  .stat,
  .btn{
    transition:none !important;
  }
}


.home-section .card:hover h3,
.home-section .card:hover .section-title,
.home-section .stat:hover strong{
  text-shadow: 0 0 14px rgba(120,216,255,.18);
}