:root {
  --bg: #0f1720;
  --card: rgba(255,255,255,0.04);
  --muted: #9aa4b2;
  --accent: #C432FE;
  --accent-2: #ff8ab3;
  --accent-glow: rgba(196, 50, 254, 0.3);
  --glass: rgba(255,255,255,0.03);
  --glass-2: rgba(255,255,255,0.02);
  --glass-border: rgba(255,255,255,0.06);
  --glass-highlight: rgba(255,255,255,0.08);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.15);
  --shadow-lg: 0 16px 32px rgba(0,0,0,0.2);
  --shadow-accent: 0 8px 24px rgba(196, 50, 254, 0.15);
  color-scheme: dark;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  transition: background-color .32s ease,color .32s ease;
}

[data-theme='light'] {
  --bg: #ffffff;
  --card: rgba(12,18,25,0.03);
  --muted: #5b6b75;
  --accent: #C432FE;
  --glass: rgba(255,255,255,0.98);
  --glass-2: rgba(250,250,250,1);
  --glass-border: rgba(12,18,25,0.06);
  color-scheme: light;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: linear-gradient(-45deg, #1B2735, #090a0f, #1a1b26, #0d1117);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color: #e6eef8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  transition: background .28s ease,color .24s ease;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(196, 50, 254, 0.15), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 138, 179, 0.15), transparent 40%),
    linear-gradient(to bottom right, rgba(196, 50, 254, 0.05) 0%, transparent 50%),
    linear-gradient(to top left, rgba(255, 138, 179, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
  filter: blur(60px);
  opacity: 0.8;
}

body::after {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.4));
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: multiply;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

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

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

@keyframes glow {
  0% { box-shadow: 0 0 20px rgba(196, 50, 254, 0.3); }
  50% { box-shadow: 0 0 40px rgba(196, 50, 254, 0.5); }
  100% { box-shadow: 0 0 20px rgba(196, 50, 254, 0.3); }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(15, 23, 32, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  animation: slideDown 0.5s ease;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  min-height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s ease;
}

.brand:hover {
  transform: scale(1.02);
}

.logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.logo:hover {
  transform: scale(1.05);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(196, 50, 254, 0.2);
}

.logo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-text .title {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-text .subtitle {
  font-size: 14px;
  color: var(--muted);
  transition: color 0.3s ease;
}

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

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

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

.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(196, 50, 254, 0.1) 0%, transparent 50%);
  animation: rotate 20s linear infinite;
  z-index: -1;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero-left {
  animation: fadeInLeft 1s ease-out;
}

.hero-right {
  animation: fadeInRight 1s ease-out;
}

.card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(255, 255, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  transform: translateY(-10px);
  border-color: rgba(196, 50, 254, 0.3);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(196, 50, 254, 0.2);
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.card:hover::before {
  opacity: 1;
}


#stars::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 
    847px 1834px 1px #4fd1ff,
    1532px 874px 1px #4fd1ff,
    1836px 1562px 1px #4fd1ff,
    432px 1234px 1px #4fd1ff,
    876px 543px 1px #4fd1ff,
    1432px 876px 1px #4fd1ff,
    765px 345px 1px #4fd1ff,
    234px 987px 1px #4fd1ff,
    876px 1432px 1px #4fd1ff,
    543px 765px 1px #4fd1ff,
    1234px 432px 1px #4fd1ff,
    876px 987px 1px #4fd1ff;
  border-radius: 50%;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 
    0 0 2px #4fd1ff,
    568px 1432px 2px rgba(79, 209, 255, 0.9),
    234px 765px 2px rgba(79, 209, 255, 0.9),
    1454px 1298px 2px rgba(79, 209, 255, 0.9),
    947px 1534px 2px rgba(79, 209, 255, 0.9),
    1234px 765px 2px rgba(79, 209, 255, 0.9),
    1654px 1298px 2px rgba(79, 209, 255, 0.9),
    324px 987px 2px rgba(79, 209, 255, 0.9),
    876px 543px 2px rgba(79, 209, 255, 0.9),
    432px 876px 2px rgba(79, 209, 255, 0.9);
  animation: animateStars 30s ease-in-out infinite;
  border-radius: 50%;
  position: absolute;
}

#stars2::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 
    0 0 2px #4fd1ff,
    568px 1432px 2px rgba(79, 209, 255, 0.9),
    234px 765px 2px rgba(79, 209, 255, 0.9),
    1454px 1298px 2px rgba(79, 209, 255, 0.9),
    947px 1534px 2px rgba(79, 209, 255, 0.9),
    1234px 765px 2px rgba(79, 209, 255, 0.9),
    1654px 1298px 2px rgba(79, 209, 255, 0.9),
    324px 987px 2px rgba(79, 209, 255, 0.9),
    876px 543px 2px rgba(79, 209, 255, 0.9),
    432px 876px 2px rgba(79, 209, 255, 0.9);
  border-radius: 50%;
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 
    0 0 3px #4fd1ff,
    423px 1234px 3px rgba(79, 209, 255, 1),
    987px 543px 3px rgba(79, 209, 255, 1),
    1432px 876px 3px rgba(79, 209, 255, 1),
    765px 345px 3px rgba(79, 209, 255, 1),
    234px 987px 3px rgba(79, 209, 255, 1),
    876px 1432px 3px rgba(79, 209, 255, 1),
    543px 765px 3px rgba(79, 209, 255, 1),
    1234px 432px 3px rgba(79, 209, 255, 1),
    876px 987px 3px rgba(79, 209, 255, 1);
  animation: animateStars 31.5s ease-in-out infinite;
  border-radius: 50%;
  position: absolute;
}

#stars3::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 
    0 0 3px #4fd1ff,
    423px 1234px 3px rgba(79, 209, 255, 1),
    987px 543px 3px rgba(79, 209, 255, 1),
    1432px 876px 3px rgba(79, 209, 255, 1),
    765px 345px 3px rgba(79, 209, 255, 1),
    234px 987px 3px rgba(79, 209, 255, 1),
    876px 1432px 3px rgba(79, 209, 255, 1),
    543px 765px 3px rgba(79, 209, 255, 1),
    1234px 432px 3px rgba(79, 209, 255, 1),
    876px 987px 3px rgba(79, 209, 255, 1);
  border-radius: 50%;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}



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

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.main { padding-top: 40px; }

.hero {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: center;
}

.hero-left h1 {
  font-size: 38px;
  line-height: 1.2;
  margin: 0;
  font-weight: 800;
  background: linear-gradient(120deg, #fff, rgba(255,255,255,0.8));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-left .lead {
  font-size: 18px;
  color: var(--muted);
  margin: 16px 0 32px;
  line-height: 1.6;
  max-width: 540px;
}

.cta-row {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: .15s ease;
  border: 0;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: var(--shadow-accent);
  border: none;
  position: relative;
  overflow: hidden;
}

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

.btn-outline {
  background: rgba(255,255,255,0.03);
  color: #fff;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(4px);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary:hover {
  box-shadow: var(--shadow-lg), 0 10px 30px var(--accent-glow);
}

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

.btn-outline:hover {
  border-color: var(--accent);
  background: var(--glass-highlight);
  box-shadow: var(--shadow-sm);
}

.info-strip {
  display: flex;
  gap: 24px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.info-ic {
  color: var(--accent);
  height: 40px;
  display: flex;
  align-items: center;
}

.info-text {
  font-size: 14px;
  line-height: 1.4;
}

.info-text strong {
  display: block;
  font-weight: 600;
}

.info-text .muted {
  color: var(--muted);
}

.card {
  background: linear-gradient(180deg, var(--glass), rgba(255,255,255,0.01));
  border: 1px solid var(--glass-border);
  padding: 24px;
  border-radius: 16px;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg), var(--shadow-accent);
  background: linear-gradient(180deg, var(--glass-highlight), var(--glass));
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.card-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.card-sub {
  color: var(--muted);
  font-size: 14px;
}

.price-large {
  font-weight: 600;
  font-size: 15px;
  color: #fff;
}

.price-badge {
  background: linear-gradient(135deg, rgba(196,50,254,0.1), rgba(255,138,179,0.1));
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid rgba(196,50,254,0.2);
  box-shadow: 0 2px 8px rgba(196,50,254,0.1);
  backdrop-filter: blur(4px);
}

.stars-visual {
  background: linear-gradient(165deg, var(--glass-highlight), var(--glass));
  border: 1px solid var(--glass-border);
  padding: 20px;
  border-radius: 16px;
  text-align: center;
  margin: 24px 0;
  position: relative;
  overflow: hidden;
}

.stars-visual img {
  filter: drop-shadow(0 0 8px var(--accent-glow));
}

.stars-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--accent-glow), transparent 70%);
  opacity: 0.3;
  pointer-events: none;
}

.stars-count {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--accent);
}

.stars-label {
  font-size: 14px;
  color: var(--muted);
}

.quick-actions {
  display: grid;
  gap: 8px;
}

.small-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  background: var(--accent);
  color: #fff;
  transition: .15s ease;
}

.small-btn.ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--glass-border);
}

.small-btn:hover {
  transform: translateY(-1px);
}

.small-btn.ghost:hover {
  background: var(--glass-2);
  border-color: rgba(255,255,255,0.1);
  color: #fff;
}

.features {
  margin-top: 80px;
}

.features h2 {
  font-size: 20px;
  margin-bottom: 24px;
}

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

.feature {
  background: linear-gradient(165deg, var(--glass-highlight), var(--glass));
  border: 1px solid var(--glass-border);
  padding: 24px;
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease-out forwards;
}

.feature:nth-child(1) { animation-delay: 0.1s; }
.feature:nth-child(2) { animation-delay: 0.2s; }
.feature:nth-child(3) { animation-delay: 0.3s; }
.feature:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.feature:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md), 0 5px 15px var(--accent-glow);
  border-color: var(--accent);
}

.feature:hover::before {
  opacity: 1;
}



.section-highlight {
  animation: highlight 2s ease-out;
}

@keyframes highlight {
  0% { background-color: rgba(255, 255, 255, 0); }
  30% { background-color: rgba(255, 255, 255, 0.1); }
  100% { background-color: rgba(255, 255, 255, 0); }
}

:root{
  --bg: #0f1720;
  --card: rgba(255,255,255,0.04);
  --muted: #9aa4b2;
  --accent: #C432FE;
  --accent-2: rgb(255, 0, 212);
  --glass: rgba(255,255,255,0.03);
  --glass-2: rgba(255,255,255,0.02);
  --glass-border: rgba(255,255,255,0.06);
  color-scheme: dark;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  transition: background-color .32s ease,color .32s ease;
}

[data-theme='light']{
  --bg: #ffffff;
  --card: rgba(12,18,25,0.03);
  --muted: #5b6b75;
  --accent: #C432FE;
  --glass: rgba(255,255,255,0.98);
  --glass-2: rgba(250,250,250,1);
  --glass-border: rgba(12,18,25,0.06);
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100%;
  background: var(--bg);
  color: #e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:16px;
  transition: background .28s ease,color .24s ease;
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

.site-header{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,rgba(0,0,0,0.00),rgba(0,0,0,0.03));backdrop-filter: blur(6px);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;min-height:72px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 6px 22px rgba(7,8,15,0.6);}
.title{font-weight:800;font-size:18px}
.subtitle{font-size:12px;color:var(--muted)}

.control-group{display:flex;align-items:center;gap:12px}
.btn-ghost{background:transparent;border:1px solid transparent;padding:8px 10px;border-radius:10px;color:var(--muted);cursor:pointer;transition:transform .18s ease, color .18s ease}
.btn-ghost:hover{transform:translateY(-3px);color:var(--accent)}

.cta-switch{display:inline-block;position:relative}
.cta-switch input{position:absolute;opacity:0;width:0;height:0}
.cta-switch .track{display:inline-flex;align-items:center;gap:8px;position:relative;background:rgba(255,255,255,0.03);padding:6px;border-radius:999px;border:1px solid var(--glass-border)}
.cta-switch .label{font-size:12px;color:var(--muted);padding:0 6px;user-select:none}
.cta-switch .knob{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:50%;box-shadow:0 6px 18px rgba(124,92,255,0.12);transition:left .28s cubic-bezier(.2,.9,.3,1)}
.cta-switch input:checked + .track .knob{left:calc(100% - 34px)}

.main{padding:36px 0 80px}
.hero{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start}
.hero-left h1{font-size:34px;margin:6px 0 12px;line-height:1.02}
.lead{color:var(--muted);margin-bottom:18px}
.cta-row{display:flex;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:600}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;box-shadow:0 12px 40px rgba(196,50,254,0.12);transition:transform .18s ease, box-shadow .18s ease}
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(196,50,254,0.14)}
.btn-outline{border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--muted)}
.btn-primary.alt{background:transparent;color:var(--accent);box-shadow:none;border:1px solid rgba(196,50,254,0.12)}

.kpis{display:flex;gap:14px;margin-top:20px;list-style:none;padding:0}
.kpis li{background:var(--glass);padding:10px;border-radius:10px;min-width:120px;text-align:center;border:1px solid var(--glass-border)}
.kpis strong{display:block;font-weight:700}

.glass{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:18px;border-radius:14px;border:1px solid var(--glass-border);box-shadow:0 10px 40px rgba(2,6,23,0.6)}

.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.card-title{font-weight:700}
.card-sub{font-size:12px;color:var(--muted)}
.price-badge{background:transparent;padding:6px 10px;border-radius:999px;font-weight:800;color:var(--accent);border:1px solid rgba(196,50,254,0.12);display:inline-flex;align-items:center;gap:8px}
.badge-percent{font-weight:800;color:var(--accent);padding:2px 6px;border-radius:8px;background:rgba(196,50,254,0.06)}

.stars-visual{display:flex;align-items:center;gap:12px}
.stars-count{font-weight:900;font-size:40px;color:var(--accent)}
.stars-label{color:var(--muted);font-size:13px}

.quick-actions{display:flex;gap:8px;margin-top:14px}
.small-btn{padding:10px 12px;border-radius:10px;text-decoration:none;color:#091226;background:var(--accent);font-weight:700}
.small-btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
.small-btn:hover{filter:brightness(.98);transform:translateY(-2px)}

.info-strip{display:flex;gap:12px;margin-top:18px}
.info-item{display:flex;align-items:flex-start;gap:12px;background:transparent;padding:8px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);min-width:160px}
.info-ic{font-size:18px;color:var(--accent);margin-top:2px}
.info-text strong{display:block;font-weight:700}
.muted{color:var(--muted);font-size:13px;margin-top:2px}
.card-footer{margin-top:12px;font-size:12px;color:var(--muted)}

.features{margin-top:40px}
.features h2{font-size:20px;margin-bottom:8px}
.features-lead{color:var(--muted);margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feature{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:20px;border-radius:14px;border:1px solid var(--glass-border);min-height:130px;display:flex;flex-direction:column;gap:10px;transition:transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s ease}
.feature .icon{font-size:20px;color:var(--accent);display:flex;align-items:center}
.feature svg{display:block;opacity:.98;width:36px;height:36px}
.feature h3{margin:0}
.feature p{margin:0;color:var(--muted);font-size:14px}

.faq {
  margin-top: 32px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.faq h2 {
  font-size: 20px;
  margin-bottom: 12px;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.faq-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.faq-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(196, 50, 254, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.faq-question {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 12px;
  color: #fff;
}

.faq-answer {
  color: var(--muted);
  line-height: 1.6;
}
details{background:var(--glass);padding:12px;border-radius:10px;margin-bottom:8px;border:1px solid var(--glass-border)}
summary{cursor:pointer;font-weight:700}
details p{margin:8px 0 0;color:var(--muted)}

.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:20px 0;margin-top:40px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}
.socials a{color:var(--muted);text-decoration:none;margin-left:12px}

.stars-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.6}
.stars-bg:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 10% 10%, rgba(255,255,255,0.02) 1px, transparent 1px), radial-gradient(circle at 40% 60%, rgba(255,255,255,0.02) 1px, transparent 1px);background-size:20px 20px,30px 30px;mix-blend-mode:overlay}

@keyframes starfall {
  0% { transform: translate(0, -100%); opacity: 0; }
  20% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(100vw, 100vh); opacity: 0; }
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--accent);
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0;
}

.star::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-5px);
  background: linear-gradient(90deg, var(--accent), transparent);
}

@keyframes sectionHighlight {
  0% { background: transparent; }
  20% { background: rgba(196,50,254,0.04); }
  100% { background: transparent; }
}

.section-highlight {
  animation: sectionHighlight 2s ease-out forwards;
  border-radius: 12px;
}

@media (max-width: 1024px) {
  .container {
    max-width: 900px;
  }
  .hero {
    gap: 24px;
  }
  .hero-left h1 {
    font-size: 28px;
  }
  .info-strip {
    flex-wrap: wrap;
  }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-right {
    order: -1;
    max-width: 400px;
    margin: 0 auto;
  }
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .info-strip {
    justify-content: space-between;
  }
  .info-item {
    flex: 0 0 calc(50% - 8px);
  }
  .main {
    padding-top: 20px;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 16px;
  }
  .hero-left h1 {
    font-size: 24px;
  }
  .hero-left .lead {
    font-size: 16px;
  }
  .cta-row {
    flex-direction: column;
    width: 100%;
  }
  .btn {
    width: 100%;
    justify-content: center;
  }
  .info-strip {
    flex-direction: column;
  }
  .info-item {
    width: 100%;
  }
  .features {
    margin-top: 40px;
  }
  .grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .header-inner {
    gap: 8px;
    min-height: 60px;
  }
  .brand-text .title {
    font-size: 16px;
  }
  .brand-text .subtitle {
    font-size: 12px;
  }
  .logo {
    font-size: 24px;
  }
  .price-badge {
    font-size: 12px;
    padding: 4px 6px;
  }
  details {
    padding: 10px;
  }
  summary {
    font-size: 14px;
  }
  .site-footer {
    padding: 16px 0;
  }
  .footer-inner {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

@media (hover: none) {
  .btn:hover,
  .small-btn:hover,
  .feature:hover,
  .card:hover,
  details:hover {
    transform: none;
    box-shadow: none;
  }
}

/* FAQ Styles */
details {
  background: linear-gradient(165deg, var(--glass-highlight), var(--glass));
  padding: 20px;
  border-radius: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--glass-border);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
}

details:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md), 0 5px 15px var(--accent-glow);
}

summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  padding: 4px 0;
  position: relative;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 20px;
  transition: transform 0.3s ease;
}

details[open] summary::before {
  transform: translateY(-50%) rotate(45deg);
}

details p {
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.6;
  padding-right: 24px;
}

details[open] {
  background: linear-gradient(165deg, var(--glass-highlight), var(--glass));
  border-color: var(--accent);
}

.hero-right .card{transform-origin:50% 0;animation:cardIn .75s cubic-bezier(.2,.9,.3,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}

.feature:hover{transform:none;box-shadow:none}

.brand {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.site-logo {
  height: 40px;
  width: auto;
  display: block;
  transition: transform 0.3s ease;
}

.site-logo:hover {
  transform: scale(1.05);
}

a:focus,button:focus{outline:3px solid rgba(196,50,254,0.16);outline-offset:3px}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.info-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.info-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-item:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(196, 50, 254, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.info-text strong {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.info-text .muted {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}

.info-ic {
  color: var(--accent);
  flex-shrink: 0;
  padding: 8px;
  background: rgba(196, 50, 254, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Enhanced Buttons */
.quick-actions {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.small-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.small-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(196, 50, 254, 0.2);
}

.small-btn.ghost {
  background: transparent;
  border: 1px solid var(--glass-border);
}

.small-btn.ghost:hover {
  border-color: var(--accent);
  background: rgba(196, 50, 254, 0.1);
}