:root{
  --bg:#05070b;--panel:#0a1018;--panel2:#0d1723;--line:#17365a;
  --blue:#08b9ff;--blue2:#097aff;--red:#ff1b3d;--cyan:#12ecff;
  --text:#f4f8ff;--muted:#9db0c6;--green:#39ff88;--gold:#ffd34f;
  --shadow:0 20px 60px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
 radial-gradient(circle at 20% -10%,rgba(0,147,255,.13),transparent 35%),
 radial-gradient(circle at 90% 20%,rgba(255,20,50,.10),transparent 30%),
 var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(1180px,calc(100% - 34px));margin:auto}
.topbar{position:sticky;top:0;z-index:50;background:rgba(5,7,11,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(26,161,255,.18)}
.nav{min-height:74px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;min-width:max-content}
.brand img{width:168px;height:56px;object-fit:contain}
.navlinks{display:flex;gap:8px;align-items:center;margin-left:auto}
.navlinks a{padding:10px 12px;color:#c9d6e5;font-weight:700;font-size:14px;border-radius:10px}
.navlinks a:hover,.navlinks a.active{background:#0d1723;color:#fff}
.navcta{display:flex;gap:10px;margin-left:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:13px 18px;font-weight:900;border:1px solid transparent;transition:.2s;cursor:pointer}
.btn.primary{background:linear-gradient(135deg,var(--blue2),var(--cyan));color:#03101d;box-shadow:0 10px 28px rgba(0,180,255,.25)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.red{background:linear-gradient(135deg,#d90024,var(--red));color:#fff}
.btn.ghost{border-color:#244a72;background:#0b1520;color:#e9f5ff}
.mobile-toggle{display:none;margin-left:auto;background:#0d1723;border:1px solid #27496a;color:#fff;border-radius:10px;padding:8px 11px;font-size:20px}
.hero{padding:86px 0 72px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:58px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(0,197,255,.3);background:rgba(0,157,255,.08);color:#70ddff;border-radius:999px;padding:7px 11px;font-weight:800;font-size:13px}
.eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 16px var(--green)}
h1{font-size:clamp(42px,6vw,74px);line-height:.98;letter-spacing:-3px;margin:20px 0 18px}
h1 span{background:linear-gradient(90deg,#fff 5%,#13d8ff 58%,#ff2347);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:19px;color:#b8c8da;max-width:720px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.quickstats{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}
.stat{padding:10px 14px;border-left:2px solid var(--cyan);background:#09111b;color:#c6d6e8}
.stat b{color:#fff}
.hero-visual{position:relative}
.hero-card{background:linear-gradient(180deg,#101a26,#080d14);border:1px solid #183957;border-radius:20px;padding:10px;box-shadow:var(--shadow)}
.hero-card img{border-radius:14px}
.floating{position:absolute;right:-20px;bottom:-20px;background:#08131f;border:1px solid #1d5377;border-radius:14px;padding:13px 16px;box-shadow:var(--shadow);font-weight:800}
.section{padding:78px 0}
.section.alt{background:linear-gradient(180deg,rgba(11,20,30,.55),rgba(7,10,15,.82));border-top:1px solid rgba(38,75,111,.22);border-bottom:1px solid rgba(38,75,111,.22)}
.section-head{max-width:790px;margin-bottom:32px}
.section-head h2,.pagehead h1{font-size:clamp(34px,4vw,52px);letter-spacing:-1.8px;line-height:1.05;margin:10px 0}
.section-head p,.pagehead p{color:var(--muted);font-size:18px}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid #18334d;border-radius:16px;padding:24px;box-shadow:0 15px 38px rgba(0,0,0,.18)}
.card h3{margin:8px 0 10px;font-size:21px}
.card p{color:#a9bacd;margin:0}
.icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#09294a,#0f568a);border:1px solid #1e6796;font-size:21px}
.icon.red{background:linear-gradient(135deg,#43101b,#8d1429);border-color:#ab2440}
.screenshot-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}
.shot{background:#070c13;border:1px solid #1c3d59;border-radius:18px;padding:8px;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.shot.mobile{max-height:590px}
.steps{counter-reset:steps;display:grid;gap:14px}
.step{counter-increment:steps;display:grid;grid-template-columns:46px 1fr;gap:15px;align-items:start;padding:18px;background:#0b131d;border:1px solid #173450;border-radius:14px}
.step:before{content:counter(steps);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#097aff,#00d9ff);color:#04121f;font-weight:1000}
.step h3{margin:0 0 5px}
.step p{margin:0;color:#a6b8ca}
.cmd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cmd{background:#07111a;border:1px solid #163650;border-radius:12px;padding:13px 14px}
.cmd code{color:#44ff9a;font-weight:900;font-size:14px}
.cmd span{display:block;color:#9db0c3;font-size:13px;margin-top:4px}
.notice{border-left:4px solid var(--gold);background:#181508;padding:15px 17px;border-radius:0 12px 12px 0;color:#e9dca9}
.pagehead{padding:65px 0 38px;border-bottom:1px solid #152c43}
.breadcrumb{color:#7ca1c4;font-size:14px}
.docs{display:grid;grid-template-columns:240px 1fr;gap:30px;padding:44px 0 76px}
.side{position:sticky;top:96px;align-self:start;background:#09111a;border:1px solid #17334b;border-radius:14px;padding:12px}
.side a{display:block;padding:10px 11px;border-radius:9px;color:#abc0d4;font-weight:700}
.side a:hover{background:#101f2d;color:#fff}
.article section{scroll-margin-top:95px;margin-bottom:48px}
.article h2{font-size:30px;margin:0 0 12px}
.article h3{margin-top:24px}
.article p,.article li{color:#b4c4d5}
.article ul{padding-left:20px}
.kbd{display:inline-block;padding:2px 7px;border:1px solid #284661;border-bottom-width:2px;background:#0b1621;border-radius:6px;color:#fff;font-family:ui-monospace,monospace}
.cta{padding:30px;border-radius:20px;border:1px solid #1d5a85;background:
 linear-gradient(135deg,rgba(0,128,255,.18),rgba(255,20,60,.11)),#07111b;
 display:flex;align-items:center;justify-content:space-between;gap:22px}
.cta h2{margin:0 0 7px}
.cta p{margin:0;color:#a7bbcf}
footer{border-top:1px solid #172d43;padding:38px 0;color:#8196ac}
.footergrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.footergrid img{width:190px}
.footerlinks a{display:block;margin:7px 0;color:#9fb2c7}
.small{font-size:13px;color:#71869d}
@media(max-width:900px){
  .hero-grid,.screenshot-grid,.docs,.footergrid{grid-template-columns:1fr}
  .grid.cols-3{grid-template-columns:1fr 1fr}
  .cmd-grid{grid-template-columns:1fr 1fr}
  .side{position:static}
  .navlinks,.navcta{display:none}
  .mobile-toggle{display:block}
  .topbar.open .nav{flex-wrap:wrap}
  .topbar.open .navlinks,.topbar.open .navcta{display:flex;width:100%;flex-direction:column;align-items:stretch;margin:0 0 12px}
  .topbar.open .navlinks a{text-align:center}
  .floating{right:4px}
}
@media(max-width:620px){
  .grid.cols-3,.grid.cols-2,.cmd-grid{grid-template-columns:1fr}
  .hero{padding-top:48px}
  h1{letter-spacing:-2px}
  .brand img{width:145px}
  .cta{align-items:flex-start;flex-direction:column}
}


/* =========================================================
   Chat4Beat - Chameleon kleuren & strakkere UI
   ========================================================= */
:root{
  --bg:#02050a;
  --bg2:#07101b;
  --panel:#071521;
  --panel2:#0a1d2d;
  --panel3:#0d263a;
  --line:#0e5a88;
  --line-soft:#123b57;
  --cyan:#12d5ff;
  --cyan2:#00a9ff;
  --blue:#087ee8;
  --red:#ed001d;
  --red2:#ff3150;
  --green:#22e38d;
  --text:#f4f8fb;
  --muted:#8dadc4;
  --shadow:0 22px 55px rgba(0,0,0,.38);
}

html{background:#02050a}
body{
  color:var(--text);
  background:
    radial-gradient(circle at 15% -10%,rgba(0,176,255,.18),transparent 34%),
    radial-gradient(circle at 88% 0%,rgba(237,0,29,.10),transparent 28%),
    linear-gradient(180deg,#02050a 0%,#06101a 45%,#02050a 100%);
}

a{color:var(--cyan)}
a:hover{color:#7beaff}

.topbar{
  background:rgba(3,9,16,.94)!important;
  border-bottom:1px solid rgba(18,213,255,.24)!important;
  box-shadow:0 10px 35px rgba(0,0,0,.32)!important;
  backdrop-filter:blur(14px);
}

.brand img{filter:drop-shadow(0 0 14px rgba(18,213,255,.16))}
.nav a{
  color:#b9d0df!important;
  border-radius:9px;
  transition:.16s ease;
}
.nav a:hover,.nav a.active{
  color:#fff!important;
  background:linear-gradient(180deg,rgba(6,46,76,.92),rgba(4,24,40,.92))!important;
  box-shadow:inset 0 0 0 1px rgba(18,213,255,.20);
}

.hero{
  background:
    linear-gradient(180deg,rgba(2,7,12,.2),rgba(2,7,12,.62)),
    radial-gradient(circle at 25% 10%,rgba(0,181,255,.12),transparent 34%)!important;
}

.hero h1,.pagehead h1,.section-head h2{
  color:#fff;
  letter-spacing:-.025em;
  text-shadow:0 0 22px rgba(13,205,255,.08);
}

.eyebrow,.kicker{
  color:var(--cyan)!important;
  letter-spacing:.14em!important;
  font-weight:900!important;
}

.card,.hero-card,.side,.cmd,.step,.faq-card,.feature-card,.stat-card{
  background:
    linear-gradient(180deg,rgba(10,27,42,.97),rgba(5,16,26,.97))!important;
  border:1px solid var(--line-soft)!important;
  border-radius:14px!important;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.025)!important;
}

.card:hover,.feature-card:hover{
  border-color:#1579ae!important;
  transform:translateY(-2px);
  box-shadow:0 26px 60px rgba(0,0,0,.42),0 0 24px rgba(0,174,255,.06)!important;
}

.icon{
  background:linear-gradient(135deg,#063b5c,#0aa9e7)!important;
  border:1px solid #1280b5!important;
  color:#fff!important;
  box-shadow:0 0 22px rgba(0,174,255,.13);
}
.icon.red{
  background:linear-gradient(135deg,#5d0a18,#ed001d)!important;
  border-color:#bf1530!important;
}

.btn{
  border-radius:10px!important;
  font-weight:900!important;
  letter-spacing:.01em;
  transition:.15s ease;
}
.btn.primary{
  background:linear-gradient(135deg,#087ee8,#10d4ff)!important;
  color:#03131d!important;
  border:0!important;
  box-shadow:0 10px 28px rgba(0,166,255,.22)!important;
}
.btn.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 13px 34px rgba(0,166,255,.30)!important;
}
.btn.red,.btn.danger{
  background:linear-gradient(135deg,#a70720,#ed001d)!important;
  color:#fff!important;
  border:1px solid #ff3450!important;
}
.btn.ghost{
  background:#081725!important;
  color:#d9f3ff!important;
  border:1px solid #1b638d!important;
}
.btn.ghost:hover{
  background:#0b2133!important;
  border-color:#17bfe9!important;
}

.notice,.alert{
  background:#081926!important;
  border:1px solid #17557b!important;
  color:#d8edf9!important;
  border-radius:10px!important;
}
.notice strong,.alert strong{color:#fff}

.kbd,code{
  background:#03101a!important;
  border:1px solid #185679!important;
  color:#60e6ff!important;
  border-radius:7px!important;
}

input,select,textarea{
  background:#04101a!important;
  border:1px solid #195476!important;
  color:#fff!important;
  border-radius:9px!important;
}
input:focus,select:focus,textarea:focus{
  border-color:#12c8f4!important;
  box-shadow:0 0 0 3px rgba(18,200,244,.11)!important;
  outline:none;
}

table{
  background:#071521!important;
  border-color:#153f5e!important;
}
th{
  background:#0a2133!important;
  color:#ecfaff!important;
  border-color:#174d70!important;
}
td{border-color:#12364f!important}

footer{
  background:#02070c!important;
  border-top:1px solid rgba(18,213,255,.18)!important;
}

.cta{
  background:
    linear-gradient(135deg,rgba(7,29,45,.98),rgba(5,16,26,.98))!important;
  border:1px solid #15567e!important;
  box-shadow:0 22px 55px rgba(0,0,0,.36)!important;
}

.screenshot-frame,.gallery img{
  border:1px solid #174d70!important;
  box-shadow:0 18px 45px rgba(0,0,0,.38)!important;
}

/* Strakker op mobiel */
@media(max-width:760px){
  body{overflow-x:hidden}
  .topbar{padding:8px 0!important}
  .nav-toggle{
    background:#071826!important;
    border:1px solid #17638e!important;
    color:#fff!important;
  }
  .nav{
    background:#06111c!important;
    border:1px solid #174966!important;
    box-shadow:0 18px 45px rgba(0,0,0,.48)!important;
  }
  .hero{padding-top:34px!important}
  .hero h1{font-size:clamp(32px,10vw,48px)!important}
  .hero p{font-size:15px!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important}
  .hero-actions .btn{width:100%!important}
  .grid,.cols-2,.cols-3,.quickstats{grid-template-columns:1fr!important}
  .card,.hero-card,.side,.cmd,.step{border-radius:12px!important}
  .wrap{width:min(100% - 20px,1180px)!important}
  .pagehead{padding:34px 0 22px!important}
  .docs{grid-template-columns:1fr!important}
  .side{
    position:static!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .side a{
    display:inline-flex!important;
    margin:3px 4px 3px 0!important;
    padding:8px 10px!important;
    border:1px solid #174c6d!important;
    border-radius:8px!important;
    background:#081725!important;
  }
}

@media(max-width:420px){
  .wrap{width:min(100% - 16px,1180px)!important}
  .hero{padding-top:26px!important}
  .section{padding-top:42px!important;padding-bottom:42px!important}
  .btn{min-height:44px!important}
}