:root{
  --bg:#0b1020;
  --bg2:#0e142a;
  --panel:#121a39;
  --ink:#e8efff;
  --muted:#a9b9d8;
  --line:rgba(124,240,255,.16);
  --brand:#4f8cff;
  --brand2:#7cf0ff;
  --ok:#34d399;
  --ring:0 0 0 3px rgba(79,140,255,.28);
  --radius:18px;
  --maxw:1100px;
  --shadow:0 12px 34px rgba(9,18,40,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.65 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "PingFang SC","Microsoft YaHei", Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(80% 60% at 50% -10%, #162040 0%, transparent 60%),
    linear-gradient(180deg,#091226,#081423 40%,#070f1e);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

a{color:inherit; text-decoration:none}
.container{width:min(var(--maxw),92vw); margin-inline:auto}

/* Header Styles */
header{
  position:sticky; 
  top:0; 
  z-index:50; 
  backdrop-filter:saturate(1.15) blur(10px);
  background:linear-gradient(180deg, rgba(9,15,32,.9), rgba(9,15,32,.6)); 
  border-bottom:1px solid var(--line);
  animation: slideDown 0.8s ease-out;
}

.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{
  display:flex; 
  align-items:center; 
  gap:8px; 
  font-weight:850; 
  letter-spacing:.2px;
  animation: fadeInLeft 1s ease-out;
}

.logo{
  width:170px; 
  height:62px; 
  display:flex; 
  align-items:center;
  justify-content:center;
  border-radius:6px; 
  background: transparent;
  overflow: hidden;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cta{display:flex; gap:10px}
.btn{
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:8px; 
  padding:11px 14px; 
  border-radius:12px; 
  border:1px solid var(--line); 
  transition:transform .18s, box-shadow .18s, background .18s; 
  font-weight:700;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.6s;
}

.btn:hover::before {
  left: 100%;
}

.btn:hover{transform:translateY(-1px)}
.btn.primary{
  background:linear-gradient(180deg,var(--brand),#2649ff); 
  border-color:transparent; 
  color:#fff; 
  box-shadow:0 10px 28px rgba(79,140,255,.35);
  animation: glow 2s ease-in-out infinite alternate;
}

.btn.ghost{background:rgba(124,240,255,.06)}
.btn.ghost:hover{background:rgba(124,240,255,.12)}

.pill{
  display:inline-flex; 
  align-items:center; 
  gap:8px; 
  padding:6px 10px; 
  border-radius:999px; 
  background:rgba(124,240,255,.10); 
  color:#c7e9ff; 
  border:1px solid var(--line); 
  font-size:12px; 
  font-weight:700; 
  letter-spacing:.2px;
  animation: fadeInUp 1.2s ease-out;
}

/* Section Styles */
section{
  padding:52px 0; 
  border-top:1px solid rgba(124,240,255,.08);
  animation: fadeInUp 0.8s ease-out;
  position: relative;
}

section[style*="background-image"] {
  background-blend-mode: overlay;
  background-color: rgba(11,16,32,0.7);
  position: relative;
}

section[style*="background-image"]:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(11,16,32,0.4) 0%, rgba(14,20,42,0.6) 100%);
  pointer-events: none;
  z-index: 0;
}

section[style*="background-image"] .container {
  position: relative;
  z-index: 2;
}

/* Special styling for table in pain section */
section[style*="background-image"] .table {
  background: rgba(18,22,58,.9);
  backdrop-filter: blur(8px);
}

section[style*="background-image"] .table th {
  background: rgba(124,240,255,.15);
}

section[style*="background-image"] .table tr:hover td {
  background-color: rgba(124,240,255,.08);
}

.hero{
  padding:68px 0 28px; 
  border-top:0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(79,140,255,0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(124,240,255,0.02) 0%, transparent 50%);
}

.grid-hero{display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:start}

h1{
  font-size:clamp(28px,4.4vw,46px); 
  line-height:1.12; 
  margin:0 0 12px; 
  letter-spacing:.1px; 
  font-weight:860;
  animation: fadeInUp 1s ease-out 0.3s both;
  background: linear-gradient(135deg, var(--ink) 0%, var(--brand2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lead{
  color:var(--muted); 
  font-size:clamp(15px,1.9vw,18px); 
  margin:0 0 14px;
  animation: fadeInUp 1s ease-out 0.5s both;
}

h2{
  font-size:26px; 
  margin:0 0 10px; 
  font-weight:800;
  animation: fadeInUp 0.8s ease-out;
}

p{
  margin:0 0 10px;
  animation: fadeInUp 0.6s ease-out;
}

.panel{
  background:linear-gradient(180deg, rgba(18,22,58,.55), rgba(18,22,58,.42)); 
  border:1px solid var(--line); 
  padding:20px; 
  border-radius:var(--radius);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: fadeInUp 0.8s ease-out;
  position: relative;
  z-index: 1;
}

.panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(9,18,40,.6);
}

/* Enhanced panel styles for sections with backgrounds */
section[style*="background-image"] .panel {
  background: rgba(18,22,58,.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(124,240,255,.25);
  box-shadow: 0 8px 32px rgba(9,18,40,.7);
}

section[style*="background-image"] .panel:hover {
  background: rgba(18,22,58,.9);
  border-color: rgba(124,240,255,.4);
  box-shadow: 0 12px 40px rgba(9,18,40,.8);
}

.panel.shadow{box-shadow:var(--shadow)}

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px}
.stat{
  padding:12px; 
  border-radius:14px; 
  background:rgba(124,240,255,.06); 
  border:1px solid rgba(124,240,255,.16);
  transition: all 0.3s ease;
  animation: fadeInUp 0.8s ease-out;
}

.stat:hover {
  background:rgba(124,240,255,.12);
  border-color: rgba(124,240,255,.3);
  transform: scale(1.02);
}

.stat b{display:block; font-size:18px}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}

.table{
  width:100%; 
  border-collapse:collapse; 
  overflow:hidden; 
  border-radius:14px; 
  border:1px solid var(--line);
  animation: fadeInUp 0.8s ease-out;
}

.table th,.table td{
  padding:12px 14px; 
  border-bottom:1px solid rgba(124,240,255,.12); 
  text-align:left; 
  vertical-align:top;
  transition: background-color 0.3s ease;
}

.table tr:hover td {
  background-color: rgba(124,240,255,.04);
}

.table th{color:#cfe7ff; font-weight:700; background:rgba(124,240,255,.06)}
.table tr:last-child td{border-bottom:none}

ul{margin:0; padding-left:18px}
.fine{font-size:12px; color:#8aa0ca}

footer{
  padding:40px 0 64px; 
  color:#9fb0d3; 
  border-top:1px solid var(--line);
  animation: fadeInUp 0.8s ease-out;
}

/* Icon styles */
.icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.icon:hover {
  transform: scale(1.1);
  opacity: 1;
}

.section-icon {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  vertical-align: middle;
  animation: float 3s ease-in-out infinite;
}

.feature-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  vertical-align: middle;
  filter: brightness(1.2);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 6px 28px rgba(79,140,255,.32);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 8px 35px rgba(79,140,255,.45);
  }
}

@keyframes glow {
  from {
    box-shadow: 0 10px 28px rgba(79,140,255,.35);
  }
  to {
    box-shadow: 0 15px 35px rgba(79,140,255,.5);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Scroll animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Gradient text effects */
.gradient-text {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Large screens */
@media (min-width:1200px){
  .logo {
    width: 180px;
    height: 64px;
  }
}

/* Medium screens - Tablets landscape */
@media (max-width:1024px){
  .logo {
    width: 170px;
    height: 62px;
  }
}

/* Small-Medium screens - Tablets portrait and below */
@media (max-width:980px){
  body{font-size:15px; line-height:1.6}
  .grid-hero{grid-template-columns:1fr}
  .hero{padding:54px 0 18px}
  h1{font-size:clamp(24px,7vw,36px)}
  .lead{font-size:clamp(14px,4.2vw,16px)}
  section{padding:42px 0}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .cta .btn{width:100%}
  
  .section-icon {
    width: 28px;
    height: 28px;
  }
  
  .logo {
    width: 165px;
    height: 60px;
  }
}

/* Small screens - Mobile landscape */
@media (max-width:768px){
  .logo {
    width: 155px;
    height: 58px;
  }
}

/* Extra small screens - Mobile portrait */
@media (max-width:480px){
  .logo {
    width: 140px;
    height: 54px;
  }
}

/* Very small screens */
@media (max-width:360px){
  .logo {
    width: 130px;
    height: 52px;
  }
}

/* Ultra-wide screens */
@media (min-width:1440px){
  .logo {
    width: 190px;
    height: 66px;
  }
}

/* High DPI screens - Retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Landscape orientation on mobile devices */
@media (max-width:768px) and (orientation: landscape) {
  .logo {
    width: 160px;
    height: 59px;
  }
  
  .nav {
    padding: 8px 0;
  }
}

/* Portrait orientation fine-tuning for very small screens */
@media (max-width:480px) and (orientation: portrait) {
  .logo {
    width: 135px;
    height: 53px;
  }
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important; scroll-behavior:auto!important}
}