/* Styles for VidSrc clone */
:root{
  --bg:#0f0610;
  --panel:#1d1222;
  --muted:#9b78b4;
  --accent1:#ff6fd8;
  --accent2:#8b49f0;
  --card:#2a1727;
  --glass:rgba(255,255,255,0.03);
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;font-size:16px}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:radial-gradient(ellipse at top left,rgba(139,73,240,0.06) 0%,rgba(255,111,216,0.02) 30%),var(--bg);
  color:#e8d8ff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
img,iframe{max-width:100%;height:auto;display:block}
iframe[data-src]{background:#000;min-height:200px}
.container{max-width:1400px;margin:0 auto;padding:20px 40px}
.site-header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg, rgba(0,0,0,0.15), transparent);backdrop-filter: blur(2px);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 20px}
.logo{font-family:Poppins, Inter; font-weight:700; color:var(--accent1); font-size:22px}
.nav a{color:var(--muted); margin-left:20px; text-decoration:none; font-weight:600}

.hero{padding:40px 0 60px; text-align:center}
.title{font-family:Poppins; font-size:64px; margin:0; line-height:1.1; font-weight:700; background:linear-gradient(90deg,var(--accent1),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
.subtitle{font-size:36px;margin:20px 0;color:#f2c7ff;opacity:0.95;font-weight:600}
.lead{color:var(--muted);max-width:900px;margin:20px auto 32px;font-size:17px;line-height:1.6}
.actions{display:flex;gap:16px;justify-content:center;margin-bottom:32px}
.btn{padding:14px 28px;border-radius:10px;border:1px solid rgba(139,73,240,0.4);cursor:pointer;font-weight:700;font-size:15px;transition:all 0.2s}
.btn-primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#120016;box-shadow:0 8px 30px rgba(139,73,240,0.3)}
.btn-outline{background:rgba(139,73,240,0.08);color:var(--accent1);border:1px solid rgba(139,73,240,0.3)}

.embed-form{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:28px;margin-bottom:32px}
.input{padding:14px 18px;border-radius:10px;border:1px solid rgba(139,73,240,0.3);background:rgba(45,20,55,0.6);color:#fff;font-size:16px}
.id-input{width:160px;text-align:center;font-weight:700}
.season-input, .episode-input{width:100px;text-align:center;font-weight:700}
.url-box{background:rgba(45,20,55,0.7);padding:14px 20px;border-radius:10px;color:#dbb8ff;min-width:500px;font-size:15px;border:1px solid rgba(139,73,240,0.2)}
.copy-btn{padding:14px 20px;border-radius:10px;background:rgba(139,73,240,0.08);border:1px solid rgba(139,73,240,0.3);color:var(--accent1);cursor:pointer;font-weight:600;font-size:14px}

.player-wrap{display:flex;justify-content:center;margin-top:18px}
.player{width:100%;max-width:1100px;height:520px;background:#000;border-radius:6px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 10px 40px rgba(0,0,0,0.6);overflow:hidden}
.player-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#222;background:linear-gradient(180deg,#000,#000)}

.features{padding:60px 20px}
.section-title{font-size:28px;color:var(--accent1);text-align:center;margin-bottom:6px}
.section-desc{color:var(--muted);text-align:center;margin-bottom:28px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:rgba(45,20,55,0.5);padding:30px 24px;border-radius:12px;border:1px solid rgba(139,73,240,0.25);text-align:left;min-height:200px}
.card-icon{font-size:42px;margin-bottom:16px}
.card h4{margin:0 0 10px;font-size:20px;color:#f1d1ff;font-weight:700}
.card p{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.5}

/* Domain Cards - Full Width Layout */
.domains-section{padding:60px 0;width:100% !important;overflow:hidden}
.domains-section .container{max-width:1400px;margin:0 auto;padding:20px 40px}
.domain-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0 20px;max-width:100%;margin:0 auto}
.domain-card{background:rgba(45,20,55,0.5);padding:30px 24px;border-radius:12px;border:1px solid rgba(139,73,240,0.25);text-align:left;min-height:400px;display:flex;flex-direction:column}
.domain-card .card-icon{font-size:42px;margin-bottom:16px}
.domain-card h4{margin:0 0 10px;font-size:20px;color:#f1d1ff;font-weight:700}
.domain-card p{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.5;flex-grow:0}
.domain-card a{display:inline-block;margin-bottom:16px;color:#6366f1;text-decoration:none;font-weight:600}
.domain-card iframe{width:100%;height:280px;border-radius:8px;border:1px solid rgba(139,73,240,0.2);margin-top:auto;background:#000}

.api{padding:40px 20px 80px}
.docs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}
.doc{background:rgba(45,20,55,0.5);border-radius:10px;padding:0;border:1px solid rgba(139,73,240,0.25)}
.doc-header{background:linear-gradient(90deg,var(--accent1),var(--accent2));padding:10px 14px;border-radius:10px 10px 0 0;font-weight:700;color:#120016}
.doc-body{padding:14px;color:var(--muted);font-size:14px}
.doc-body code{display:block;background:rgba(20,10,25,0.8);padding:8px;border-radius:6px;color:#8ad; margin:8px 0;border:1px solid rgba(139,73,240,0.15)}
.doc-body ul{margin:8px 0 12px 18px;color:var(--muted)}
.muted{color:var(--muted);font-weight:700;margin-top:8px}

.site-footer{padding:28px 0;background:transparent;border-top:1px solid rgba(255,255,255,0.02);text-align:center;color:var(--muted)}

/* Responsive */
@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .domain-cards{grid-template-columns:1fr !important;padding:0 20px}
  .domain-card{min-height:350px}
  .docs{grid-template-columns:1fr}
  .player{width:100%;height:360px}
  .url-box{min-width:220px}
}
@media (max-width:560px){
  .title{font-size:28px}
  .subtitle{font-size:18px}
  .header-inner{padding:12px}
  .cards{grid-template-columns:1fr}
  .domain-cards{grid-template-columns:1fr !important;padding:0 10px}
  .domain-card{padding:20px 16px;min-height:320px}
  .domain-card iframe{height:220px}
}