/* =========
    Brand system | Dark Purple/Black Theme (Dark Mode Default)
    ========= */
:root{
  /* palette */
  --primary:#8A2BE2;      /* BlueViolet */
  --primary-2:#9932CC;    /* MediumOrchid */
  --accent:#E0B0FF;       /* Light Violet Accent */
  --success:#34D399;      /* success/positive */

  /* surfaces & text */
  --bg:#0D0D1A;           /* Near-black purple */
  --panel:#1A1A2E;         /* Dark purple panel */
  --text:#F0F0FF;         /* Light lavender text */
  --muted:#A0A0B4;        /* Muted lavender */
  --btn-text: #F0F0FF;     /* Button text color */

  /* borders/shadows */
  --border:rgba(224, 176, 255, .1);
  --soft:rgba(224, 176, 255, .12);
  --hover:rgba(224, 176, 255, .08);
  --shadow:0 10px 30px rgba(0,0,0,.4);
  --ring:0 0 0 3px rgba(138,43,226,.3);
  --radius:16px;
  --header-h:64px;
}
/* Light Theme */
[data-theme="light"]{
  --primary:#FFE135;      /* Banana Yellow */
  --primary-2:#FDD223;    /* Slightly deeper banana yellow */
  --accent:#0069D9;       /* More Intense Blue */
  --success:#28a745;

  --bg:#F0F8FF;           /* AliceBlue background */
  --panel:#FFFFFF;
  --text:#0A2540;         /* Dark Navy text */
  --muted:#5B6B7E;
  --btn-text: #0A2540;

  --border:rgba(0, 105, 217, .15);
  --soft:rgba(0, 105, 217, .12);
  --hover:rgba(0, 105, 217, .06);
  --shadow:0 6px 22px rgba(0, 105, 217, .12);
  --ring:0 0 0 3px rgba(0,105,217,.3);
}

/* Base / type */
*{box-sizing:border-box}
:focus-visible{outline:none;box-shadow:var(--ring)}
html,body{margin:0;height:100%;scroll-behavior:smooth}
html{scroll-padding-top:calc(var(--header-h) + 14px)}
body{
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--bg);
  transition: background .3s ease,color .3s ease;
}
img{max-width:100%;display:block}

a{color:inherit;text-decoration:none}
/* Widened the container to better fit 5 cards */
.container{max-width:1280px;margin:0 auto;padding:0 20px}

h1{font-size:clamp(32px,5.6vw,60px);line-height:1.04;letter-spacing:-.02em;margin:16px 0}
h2{font-size:clamp(26px,3.8vw,40px);letter-spacing:-.01em;margin:8px 0}
h3{font-size:clamp(18px,2.4vw,22px);margin:6px 0}
p,li{font-size:clamp(16px,2.2vw,19px);line-height:1.75}
ul, ol { padding-left: 20px; }


/* Buttons & Tags */
.btn{
  display:inline-flex;gap:.6rem;align-items:center;justify-content:center;
  padding:12px 18px;border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color: var(--btn-text);
  font-weight:700;letter-spacing:.01em;box-shadow:var(--shadow);transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease;
  will-change: transform;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.block{width:100%}
.btn.outline{background:transparent;border:1px solid var(--border);color:var(--text);font-weight:600}

.tag{display:inline-flex;align-items:center;gap:.4rem;padding:6px 10px;border-radius:999px;background:var(--chip-bg);color:var(--chip-fg);border:1px solid var(--border);font-size:12px}

/* Layout & Common Utilities */
.muted{color:var(--muted)}
.grid{display:grid;gap:24px}
.section{padding:84px 0}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.shadow-none{box-shadow:none}
.center{text-align:center}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Spacing & Flex utilities */
.d-flex { display: flex; gap: 8px; }
.d-flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.d-flex-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-26 { margin-top: 26px; }
.mt-40 { margin-top: 40px; }
.my-32 { margin-top: 32px; margin-bottom: 32px; }
.mb-6 { margin-bottom: 6px; }
.mb-12 { margin-bottom: 12px; }
.m-0 { margin: 0; }
.pt-0 { padding-top: 0; }
.pb-60 { padding-bottom: 60px; }
.p-12 { padding: 12px; }
.no-padding { padding: 0; }
.max-w-760 { max-width: 760px; margin-left: auto; margin-right: auto; }
.small-text { font-size: 13px; }
.font-16 { font-size: 16px; }
.aspect-16-9 { aspect-ratio: 16 / 9; }

/* Grid-specific utilities */
.grid-2-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-grid { grid-template-columns: 1.2fr 0.8fr; align-items: center; }
.about-grid { grid-template-columns: 1fr 0.9fr; align-items: center; }
.platform-grid { grid-template-columns: 1.2fr 0.8fr; align-items: center; }
.contact-grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; }

/* Header */
.topbar{font-size:13px;background:var(--panel);border-bottom:1px solid var(--border);padding-top:env(safe-area-inset-top)}
header{position:sticky;top:0;z-index:50;background:rgba(26,26,46,.66);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav-container{display:flex;justify-content:space-between;align-items:center;height:var(--header-h)}
nav a{padding:12px 14px;border-radius:10px;display:inline-block}
nav a:hover{background:var(--hover)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.2px}
.logo{width:40px;height:40px;border-radius:8px; object-fit: cover;}
.actions{display:flex;gap:10px;align-items:center}
.menu-btn{display:none}

/* Hero */
.hero{padding:72px 0 52px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.hero-subtext { margin-top: 12px; }
.card-header { padding: 18px 18px 0; border-bottom: 1px solid var(--border); }
.card-content { padding: 20px; }
.center-content { display: grid; place-items: center; }

/* Services (Expandable) */
.service-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; width: 100%; }
.service-summary::-webkit-details-marker { display: none; }
.service-content { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border); }
.service-summary .icon { min-width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.service-summary h3 { margin: 0; flex-grow: 1;}
.service-summary::after { content: '+'; font-size: 28px; font-weight: 300; transition: transform .3s ease; line-height: 1; color: var(--muted); }
details[open] > summary::after { transform: rotate(45deg); }
.service-list { font-size: 16px; }
.icon.blue{background:rgba(0,105,217,.08)}
.icon.purple{background:rgba(138,43,226,.14)}
.icon.amber{background:rgba(245,158,11,.18)}

/* Headshot */
.headshot{width:112px;height:112px;border-radius:999px;object-fit:cover;box-shadow:var(--shadow);border:2px solid var(--primary)}

/* ===== FINAL SIMPLIFIED PRICING STYLES ===== */
.fancy-head {
    gap: 4px; /* Reduced gap for tighter look */
}
/* New styles for the logos container */
.logos-container {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.logos-container img {
    height: 28px;
    width: auto;
    opacity: .6;
    transition: opacity .3s ease;
}
.logos-container img:hover {
    opacity: 1;
}

.pricing-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.pricing-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.pricing-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.plan-header { flex-grow: 1; }
.plan-header h3 { margin-bottom: 4px; }
.plan-header p { margin: 0; font-size: 16px; }
.pricing-card .price { font-size:clamp(32px, 4vw, 40px); font-weight: 800; margin: 24px 0; }
.pricing-card .price small { font-size: 16px; color: var(--muted); font-weight: 600; }
.plan-actions { display: flex; flex-direction: row; justify-content: center; gap: 12px; margin-top: auto; }


/* Revenue Estimator */
.estimator{max-width:720px;margin:24px auto 0}
.estimator .output{font-size:clamp(32px,5vw,52px);font-weight:800;color:var(--success)}
.estimator input[type=range]{width:100%;margin:12px 0}

/* Slider & Carousel */
.slider{position:relative;overflow:hidden;border-radius:var(--radius)}
.slides{display:flex;transition:transform .45s ease;will-change:transform;touch-action:pan-y}
.dots{display:flex;gap:8px;justify-content:center;margin:10px 0 0}
.dot{width:10px;height:10px;border-radius:50%;background:var(--soft);cursor:pointer;border:none}
.dot.active{background:linear-gradient(135deg,var(--primary),var(--primary-2))}
.slider:focus{outline:none}

.streamer-slide { min-width: 100%; flex-shrink: 0; padding: 24px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 350px; }
.streamer-slide img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; border: 2px solid var(--border); background-color: var(--soft); }
.streamer-slide h4 { margin: 0; }
.streamer-slide blockquote { margin: 16px 0; max-width: 80%; font-style: italic; font-size: clamp(16px, 2.2vw, 18px); line-height: 1.6; color: var(--muted); }
.streamer-slide blockquote footer { font-style: normal; font-size: 12px; margin-top: 8px; opacity: .8; }

/* FAQ / Contact */
details{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px}
summary{list-style:none;cursor:pointer;font-weight:700}
summary::-webkit-details-marker{display:none}
form{display:grid;gap:12px}
input,textarea{width:100%;padding:14px;border-radius:10px;border:1px solid var(--soft);background:transparent;color:var(--text)}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,textarea:focus{outline:none;box-shadow:var(--ring);border-color:var(--accent)}
.process-list { list-style-type: decimal; line-height: 1.9; }
.process-list li::marker { font-weight: bold; }

/* Footer */
footer{padding:40px 0;border-top:1px solid var(--border)}
.foot{display:grid;gap:20px;grid-template-columns:1.5fr 1fr 1fr}
.footer-nav { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.copyright{border-top:1px solid var(--border);margin-top:24px;padding-top:14px;color:var(--muted);font-size:13px}

/* Reveal Animation */
.reveal{opacity:0;transform:translateY(18px);transition:transform .6s ease, opacity .6s ease}
.reveal.visible{opacity:1;transform:none}

/* Responsive */
@media (max-width: 1280px){
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px){
  .section{padding:68px 0}
  .card{box-shadow:0 6px 16px rgba(2,6,23,.18)}
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px){
  .menu-btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border);padding:10px 14px;border-radius:12px;background:transparent;color:var(--text)}
  nav{position:fixed;inset:calc(var(--header-h) + env(safe-area-inset-top)) 16px auto 16px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:8px;flex-direction:column;gap:6px;display:none;box-shadow:var(--shadow)}
  nav a{padding:16px;border-radius:10px}
  nav.open{display:flex}
  .nav-container .actions .btn{display:none}
  .hero-grid, .about-grid, .platform-grid, .contact-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .section{padding:56px 0}
  .topbar .container{flex-direction:column;gap:6px;align-items:flex-start}
  .foot, .grid-2-col, .grid-3-col { grid-template-columns: 1fr; }
  .btn{padding:14px 18px}
  .hero-cta .btn{flex:1 1 200px}
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal{transition:none}
}