@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
  html.i18n-loading [data-i18n] {
  visibility:hidden}

*,*::before,*::after {
  box-sizing:border-box;
  margin:0;
  padding:0}

:root {
  --bg:#ffffff;
  --bg-secondary:#ececec;
  --bg-card:#f5f5f5;
  --fg:#1a1a1a;
  --fg-muted:#444444;
  --fg-subtle:#606060;
  --bevel-hi:#ffffff;
  --bevel-hi2:#f0f0f0;
  --bevel-lo:#9a9a9a;
  --bevel-lo2:#7a7a7a;
  --bevel-edge:#b0b0b0;
  --primary:#3a3a3a;
  --primary-hover:#1a1a1a;
  --primary-text:#ffffff;
  --accent:#2a2a2a;
  --success:#2e7d32;
  --danger:#c62828;
  --radius:2px;
  --radius-sm:2px;
  --font-body:'Inter',system-ui,sans-serif;
  --max-w:1200px;
  --background:var(--bg);
  --foreground:var(--fg);
  --card:var(--bg-card);
  --card-foreground:var(--fg);
  --secondary:var(--bg-secondary);
  --secondary-foreground:var(--fg);
  --muted:var(--bg-secondary);
  --muted-foreground:var(--fg-muted);
  --accent-foreground:var(--fg);
  --border:var(--bevel-edge);
  --color-primary:var(--primary);
  --color-accent:var(--accent);
  --pink:#ff0080}

[data-theme="dark"] {
  --bg:#1e1e1e;
  --bg-secondary:#2a2a2a;
  --bg-card:#2d2d30;
  --fg:#ededed;
  --fg-muted:#c0c0c0;
  --fg-subtle:#878787;
  --bevel-hi:#5a5a5a;
  --bevel-hi2:#6e6e6e;
  --bevel-lo:#0a0a0a;
  --bevel-lo2:#141414;
  --bevel-edge:#1a1a1a;
  --primary:#c0c0c0;
  --primary-hover:#e0e0e0;
  --primary-text:#1a1a1a;
  --accent:#c0c0c0;
  --success:#4caf50;
  --danger:#ef5350;
  --background:var(--bg);
  --foreground:var(--fg);
  --card:#2d2d30;
  --card-foreground:var(--fg);
  --secondary:#2a2a2a;
  --secondary-foreground:var(--fg);
  --muted:#2a2a2a;
  --muted-foreground:#a8a8a8;
  --accent-foreground:var(--fg);
  --border:var(--bevel-edge);
  --pink:#ff0080}

html {
  scroll-behavior:smooth}

body {
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--fg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased}

::selection {
  background:var(--fg);
  color:var(--bg)}

.theme-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  cursor:pointer;
  color:var(--fg);
  background:var(--bg-secondary);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  font-family:inherit;
  margin-right:0.75rem}

.theme-toggle:hover {
  background:var(--bg-card)}

.theme-toggle:active {
  border-top:1px solid var(--bevel-lo);
  border-left:1px solid var(--bevel-lo);
  border-right:1px solid var(--bevel-hi);
  border-bottom:1px solid var(--bevel-hi)}

.theme-toggle svg {
  display:block}

.theme-icon-dark {
  display:block}

.footer-gb-logo {
  filter:brightness(0)}

[data-theme="dark"] .footer-gb-logo {
  filter:brightness(0) invert(1)}

.theme-icon-light {
  display:none}

[data-theme="dark"] .theme-icon-dark {
  display:none}

[data-theme="dark"] .theme-icon-light {
  display:block}

.container {
  width:100%;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 1.5rem}

.site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--bevel-edge);
  overflow:visible}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:64px;
  height:auto;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0.5rem 1.5rem 0.5rem 10rem;
  overflow:visible;
  gap:0.75rem}

.logo-profile {
  position:absolute;
  left:calc(1.5rem - 4px);
  top:20px;
  z-index:2;
  text-decoration:none;
  transform:none}

.logo-profile img {
  width:96px;
  height:96px;
  border-radius:0;
  object-fit:contain;
  border:none;
  display:block;
  position:relative;
  top:0;
  margin:0;
  filter:drop-shadow(0 0 12px rgba(99,102,241,0.3));
  transition:width .3s ease,height .3s ease}

.logo-profile.scrolled img {
  width:54px;
  height:54px}

.nav-desktop {
  display:flex;
  align-items:center;
  gap:0;
  flex-wrap:wrap;
  flex:1;
  justify-content:flex-start}

.nav-desktop a {
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.35rem .55rem;
  font-size:.75rem;
  font-weight:500;
  color:var(--fg-muted);
  text-decoration:none;
  border-radius:0;
  transition:none;
  white-space:nowrap}

.nav-desktop a:hover {
  color:var(--fg);
  background:var(--bg-secondary)}

.nav-desktop a.active {
  color:var(--fg);
  background:var(--bg-secondary);
  border-top:1px solid var(--bevel-lo);
  border-left:1px solid var(--bevel-lo);
  border-right:1px solid var(--bevel-hi);
  border-bottom:1px solid var(--bevel-hi)}

.nav-desktop a svg {
  opacity:0.7;
  flex-shrink:0;
  width:14px;
  height:14px}

.nav-desktop a:hover svg {
  opacity:1}

.header-actions {
  display:flex;
  align-items:center;
  gap:0.75rem;
  flex-shrink:0}

.btn-header-cta {
  padding:.4rem .8rem;
  font-size:.8125rem;
  font-weight:600;
  color:var(--primary-text);
  background:var(--primary);
  text-decoration:none;
  white-space:nowrap;
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  transition:none}

.btn-header-cta:hover {
  background:var(--primary-hover)}

.btn-header-cta:active {
  border-top:1px solid var(--bevel-lo);
  border-left:1px solid var(--bevel-lo);
  border-right:1px solid var(--bevel-hi);
  border-bottom:1px solid var(--bevel-hi)}

.mobile-toggle {
  display:none;
  background:var(--bg-secondary);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  cursor:pointer;
  padding:.5rem;
  color:var(--fg);
  position:relative;
  z-index:102;
  }

.mobile-toggle:active {
  border-top:1px solid var(--bevel-lo);
  border-left:1px solid var(--bevel-lo);
  border-right:1px solid var(--bevel-hi);
  border-bottom:1px solid var(--bevel-hi)}

.mobile-overlay {
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--bg);
  padding:6rem 1.5rem 1.5rem;
  z-index:101;
  overflow-y:auto}

.mobile-overlay.open {
  display:block}

.mobile-overlay a {
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.875rem 1rem;
  font-size:1.0625rem;
  font-weight:500;
  color:var(--fg);
  text-decoration:none;
  margin-bottom:.25rem}

.mobile-overlay a:hover,.mobile-overlay a.active {
  background:var(--bg-secondary)}

.mobile-overlay a.nav-cta {
  margin-top:1rem;
  background:var(--fg);
  color:var(--bg);
  justify-content:center;
  font-weight:600;
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo)}

.mobile-overlay a.nav-cta:hover {
  background:var(--fg-muted)}



.hero {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8rem 1.5rem 4rem;
  position:relative;
  overflow:hidden}

.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.375rem 1rem;
  background:var(--bg-secondary);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  font-size:.8125rem;
  font-weight:500;
  color:var(--fg-muted);
  margin-bottom:2rem}

.hero-badge svg {
  width:1rem;
  height:1rem;
  color:var(--fg)}

.hero h1 {
  font-size:clamp(2.5rem,8vw,5rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.03em;
  max-width:800px;
  margin-bottom:1.5rem}

.gradient-text {
  color:var(--fg)}

.hero-sub {
  font-size:clamp(1.125rem,2.5vw,1.375rem);
  color:var(--fg-muted);
  max-width:560px;
  line-height:1.7;
  margin-bottom:2.5rem}

.hero-actions {
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  justify-content:center}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.75rem 1.5rem;
  font-size:.9375rem;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  border:none;
  transition:none;
  font-family:inherit}

.btn-primary {
  background:var(--primary);
  color:var(--primary-text);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo)}

.btn-primary:hover {
  background:var(--primary-hover)}

.btn-primary:active {
  border-top:1px solid var(--bevel-lo);
  border-left:1px solid var(--bevel-lo);
  border-right:1px solid var(--bevel-hi);
  border-bottom:1px solid var(--bevel-hi)}

.btn-ghost {
  background:var(--bg-secondary);
  color:var(--fg);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo)}

.btn-ghost:hover {
  background:var(--bg-card)}

.btn-ghost:active {
  border-top:1px solid var(--bevel-lo);
  border-left:1px solid var(--bevel-lo);
  border-right:1px solid var(--bevel-hi);
  border-bottom:1px solid var(--bevel-hi)}

.btn-lg {
  padding:1rem 2rem;
  font-size:1rem}

.hero-stats {
  display:flex;
  gap:2.5rem;
  margin-top:4rem;
  flex-wrap:wrap;
  justify-content:center}

.hero-stat {
  text-align:center}

.stat-number {
  display:block;
  font-size:1.5rem;
  font-weight:700;
  color:var(--fg)}

.stat-label {
  font-size:.8125rem;
  color:var(--fg-subtle)}

.solutions {
  padding:6rem 0;
  border-top:1px solid var(--border)}

.solutions-header {
  text-align:center;
  margin-bottom:3rem}

.solutions-header h2 {
  font-size:1.875rem;
  font-weight:600;
  margin-bottom:.5rem}

.solutions-header p {
  color:var(--fg-muted)}

.solutions-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1rem}

.solution-card {
  background:var(--bg-card);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  padding:1.5rem;
  text-decoration:none;
  color:var(--fg);
  transition:none}

.solution-card:hover {
  background:var(--bg-secondary)}

.solution-card:active {
  border-top:1px solid var(--bevel-lo);
  border-left:1px solid var(--bevel-lo);
  border-right:1px solid var(--bevel-hi);
  border-bottom:1px solid var(--bevel-hi)}

.solution-card .card-icon {
  width:40px;
  height:40px;
  background:var(--bg-secondary);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1rem}

.solution-card .card-icon svg {
  width:20px;
  height:20px;
  color:var(--fg)}

.solution-card h3 {
  font-size:1.0625rem;
  font-weight:600;
  margin-bottom:.375rem}

.solution-card p {
  font-size:.875rem;
  color:var(--fg-muted);
  line-height:1.5}

.features {
  padding:6rem 0;
  background:var(--bg-secondary)}

.features-header {
  text-align:center;
  max-width:600px;
  margin:0 auto 3rem}

.features-header h2 {
  font-size:1.875rem;
  font-weight:600;
  margin-bottom:.75rem}

.features-header p {
  color:var(--fg-muted)}

.features-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.5rem}

.feature-card {
  background:var(--bg);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  padding:2rem}

.feature-card h3 {
  font-size:1.0625rem;
  font-weight:600;
  margin-bottom:.5rem}

.feature-card p {
  font-size:.9375rem;
  color:var(--fg-muted);
  line-height:1.6}

.channels {
  padding:6rem 0;
  border-top:1px solid var(--bevel-edge)}

.channels-header {
  text-align:center;
  margin-bottom:2.5rem}

.channels-header h2 {
  font-size:1.875rem;
  font-weight:600;
  margin-bottom:.5rem}

.channels-header p {
  color:var(--fg-muted)}

.channels-grid {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center}

.channel-chip {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem 1rem;
  background:var(--bg-secondary);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  font-size:.8125rem;
  font-weight:500;
  color:var(--fg-muted)}

.channel-chip svg {
  width:16px;
  height:16px}

.cta-section {
  padding:6rem 0;
  background:var(--bg);
  text-align:center}

.cta-section h2 {
  font-size:clamp(1.75rem,4vw,2.5rem);
  font-weight:700;
  margin-bottom:1rem}

.cta-section p {
  color:var(--fg-muted);
  font-size:1.125rem;
  max-width:480px;
  margin:0 auto 2rem}

.site-footer {
  background:var(--bg-secondary);
  border-top:1px solid var(--bevel-edge);
  padding:4rem 0 2rem}

.site-footer .container {
  max-width:960px}

.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:3rem;
  margin-bottom:3rem}

.footer-brand .footer-logo {
  display:flex;
  align-items:center;
  gap:.625rem;
  font-weight:600;
  font-size:1.125rem;
  text-decoration:none;
  color:var(--fg);
  margin-bottom:.75rem}

.footer-brand p {
  font-size:.875rem;
  color:var(--fg-muted);
  line-height:1.6;
  max-width:280px}

.footer-col h5 {
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--fg-subtle);
  margin-bottom:1rem}

.footer-col a {
  display:block;
  font-size:.875rem;
  color:var(--fg-muted);
  text-decoration:none;
  padding:.25rem 0;
  transition:color .2s}

.footer-col a:hover {
  color:var(--fg)}

.footer-bottom {
  padding-top:2rem;
  border-top:1px solid var(--bevel-edge);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.75rem;
  color:var(--fg-subtle)}

.footer-social {
  display:flex;
  gap:.75rem}

.footer-social a {
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  background:var(--bg-card);
  color:var(--fg-muted);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  transition:none}

.footer-social a:hover {
  background:var(--bg-secondary);
  color:var(--fg)}

.footer-social a:active {
  border-top:1px solid var(--bevel-lo);
  border-left:1px solid var(--bevel-lo);
  border-right:1px solid var(--bevel-hi);
  border-bottom:1px solid var(--bevel-hi)}

.footer-social svg {
  width:16px;
  height:16px}

@media(max-width:768px) {
  .hero {
  min-height:auto;
  padding:7rem 1.5rem 4rem}

.hero h1 {
  font-size:2.25rem}

.hero-stats {
  gap:1.5rem}

.solutions-grid {
  grid-template-columns:1fr}

.features-grid {
  grid-template-columns:1fr}

.footer-grid {
  grid-template-columns:1fr 1fr}

.footer-bottom {
  flex-direction:column;
  gap:1rem;
  text-align:center}

}

@media(max-width:480px) {
  .footer-grid {
  grid-template-columns:1fr}

.hero h1 {
  font-size:1.875rem}

}

@keyframes fadeIn {
  from {
  opacity:0;
  transform:translateY(10px)}

to {
  opacity:1;
  transform:translateY(0)}

}

.animate-in {
  animation:fadeIn .5s ease forwards}

.reveal {
  opacity:0;
  transform:translateY(20px);
  transition:all .6s ease}

.reveal.visible {
  opacity:1;
  transform:translateY(0)}

.page-hero {
  position:relative;
  padding:8rem 0 2.5rem;
  overflow:hidden}

.page-hero .hero-bg {
  position:absolute;
  inset:0;
  overflow:hidden}

.page-hero .hero-bg .blur-circle {
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:.3;
  width:24rem;
  height:24rem}

.page-hero .hero-bg .blur-circle.tr {
  top:-10rem;
  right:-10rem}

.page-hero .hero-bg .blur-circle.bl {
  bottom:-10rem;
  left:-10rem}

.page-hero .container {
  position:relative;
  z-index:1;
  max-width:42rem}

.page-hero .badge,.page-hero h1,.page-hero .container>p {
  text-align:center}

.section {
  padding:5rem 0}

.page-hero + .section {
  padding:2rem 0 4rem}

.section-alt {
  background:var(--bg-secondary)}

.section-dark {
  background:var(--primary);
  color:rgba(255,255,255,.9)}

.section-dark h2,.section-dark h3,.section-dark h4 {
  color:#fff}

.section-dark p {
  color:rgba(255,255,255,.7)}

.section-gradient {
  background:linear-gradient(135deg,var(--primary) 0%,hsl(225 50% 20%) 100%);
  color:rgba(255,255,255,.9)}

.section-gradient h2 {
  color:#fff}

.section-gradient p {
  color:rgba(255,255,255,.7)}

.section-label {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.375rem .875rem;
  font-size:.75rem;
  font-weight:500;
  background:var(--bg-secondary);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  margin-bottom:1.5rem}

.badge {
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.25rem .625rem;
  font-size:.625rem;
  font-weight:700;
  border-radius:.25rem;
  text-transform:uppercase;
  letter-spacing:.05em}

.badge-blue {
  background:rgba(37,99,235,.1);
  color:#2563eb;
  border:1px solid rgba(37,99,235,.2)}

.badge-emerald {
  background:rgba(5,150,105,.1);
  color:#059669;
  border:1px solid rgba(5,150,105,.2)}

.badge-purple {
  background:rgba(124,58,237,.1);
  color:#7c3aed;
  border:1px solid rgba(124,58,237,.2)}

.badge-cyan {
  background:rgba(8,145,178,.1);
  color:#0891b2;
  border:1px solid rgba(8,145,178,.2)}

.badge-amber {
  background:rgba(217,119,6,.1);
  color:#d97706;
  border:1px solid rgba(217,119,6,.2)}

.badge-red {
  background:rgba(220,38,38,.1);
  color:#dc2626;
  border:1px solid rgba(220,38,38,.2)}

.badge-indigo {
  background:rgba(79,70,229,.1);
  color:#4f46e5;
  border:1px solid rgba(79,70,229,.2)}

.badge-orange {
  background:rgba(234,88,12,.1);
  color:#ea580c;
  border:1px solid rgba(234,88,12,.2)}

.badge-pink {
  background:rgba(219,39,119,.1);
  color:#db2777;
  border:1px solid rgba(219,39,119,.2)}

.badge-rose {
  background:rgba(225,29,72,.1);
  color:#e11d48;
  border:1px solid rgba(225,29,72,.2)}

.badge-slate {
  background:rgba(51,65,85,.1);
  color:#475569;
  border:1px solid rgba(51,65,85,.2)}

.grid-2 {
  display:grid;
  grid-template-columns:1fr;
  gap:2rem}

.grid-3 {
  display:grid;
  grid-template-columns:1fr;
  gap:2rem}

.grid-4 {
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem}

@media(min-width:768px) {
  .grid-2 {
  grid-template-columns:1fr 1fr}

.grid-3 {
  grid-template-columns:1fr 1fr 1fr}

.grid-4 {
  grid-template-columns:1fr 1fr 1fr 1fr}

}

@media(min-width:640px) and (max-width:767px) {
  .grid-3 {
  grid-template-columns:1fr 1fr}

.grid-4 {
  grid-template-columns:1fr 1fr}

}

.feature-card {
  background:var(--bg-card);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  padding:2rem}

.feature-card .icon-box {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3.5rem;
  height:3.5rem;
  background:var(--bg-secondary);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  margin-bottom:1.5rem}

.pricing-card {
  background:var(--bg-card);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  padding:2rem}

.pricing-card.featured {
  border-top-width:2px;
  border-left-width:2px;
  border-right-width:2px;
  border-bottom-width:2px;
  background:var(--bg-secondary)}

.pricing-card .price {
  font-size:2.5rem;
  font-weight:700;
  line-height:1}

.pricing-card .price-period {
  font-size:.875rem;
  color:var(--fg-muted);
  font-weight:400}

.check-row {
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:.75rem 1.25rem;
  background:var(--bg-card);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  margin-bottom:.75rem}

.check-row .check-icon {
  width:1.25rem;
  height:1.25rem;
  flex-shrink:0;
  margin-top:.125rem;
  color:var(--success)}

.feature-list {
  list-style:none;
  padding:0}

.feature-list li {
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:.375rem 0}

.feature-list li .check-icon {
  width:1.25rem;
  height:1.25rem;
  flex-shrink:0;
  margin-top:.125rem;
  color:var(--success)}

.terminal {
  background:hsl(220 20% 4%);
  border:1px solid hsl(220 20% 15%);
  border-radius:var(--radius);
  overflow:hidden}

.terminal-header {
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1rem;
  border-bottom:1px solid hsl(220 20% 15%);
  background:hsl(220 20% 8%)}

.terminal-dot {
  width:.625rem;
  height:.625rem;
  border-radius:50%}

.terminal-dot.red {