:root{
  --bg:#0a0714;
  --bg2:#150d24;
  --card:#171022;
  --card2:#21152e;
  --text:#fff7ea;
  --muted:#cab8a1;
  --dim:#998a7c;
  --orange:#ff7a1a;
  --orange2:#ffb000;
  --gold:#ffd166;
  --red:#ff4d4d;
  --green:#20d080;
  --purple:#7c3aed;
  --line:rgba(255,183,77,.18);
  --shadow:0 18px 40px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at top left, rgba(255,122,26,.22), transparent 35%),
    radial-gradient(circle at 80% 10%, rgba(124,58,237,.18), transparent 32%),
    linear-gradient(180deg,var(--bg),#090611 55%,#06040b);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"Noto Sans",sans-serif;
  padding-bottom:88px;
}
a{color:inherit}
img{max-width:100%;display:block}
.nav{
  position:sticky;top:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;
  background:rgba(10,7,20,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-logo{display:flex;align-items:center;gap:9px;font-weight:900;letter-spacing:.2px}
.nav-logo img{width:36px;height:36px;border-radius:12px;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.nav-right{display:flex;align-items:center;gap:8px}
.lang-pill,.nav-dl{
  font-size:12px;border:1px solid rgba(255,183,77,.35);border-radius:999px;
  padding:8px 10px;background:rgba(255,122,26,.1);text-decoration:none;color:#ffe8c2
}
.lang-switch{cursor:pointer;margin:0 2px}
.lang-switch.active{background:rgba(255,122,26,.35);border-color:#ffb000;color:#fff;font-weight:700}
.nav-dl{background:linear-gradient(135deg,#ff7a1a,#ffb000);color:#211000;font-weight:900;border:0}
.hero{position:relative;overflow:hidden;min-height:660px;display:flex;align-items:center}
.hero-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.82)),
    url('../image/hero.jpg') center/cover no-repeat;
  opacity:.9;
}
.hero-bg:after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 32%,rgba(255,122,26,.18),transparent 34%),
    linear-gradient(90deg,rgba(10,7,20,.94),rgba(10,7,20,.4),rgba(10,7,20,.94));
}
.hero-inner{position:relative;z-index:1;width:min(960px,100%);padding:48px 18px 40px;margin:0 auto;text-align:center}
.hero-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid rgba(255,209,102,.3);
  background:rgba(255,122,26,.16);border-radius:999px;color:#ffe0a1;
  font-size:12px;font-weight:800;letter-spacing:.35px
}
.dot{width:8px;height:8px;border-radius:999px;background:#35ff9c;box-shadow:0 0 0 6px rgba(53,255,156,.14)}
h1{font-size:clamp(34px,9vw,72px);line-height:1.03;margin:18px 0 14px;text-shadow:0 8px 22px rgba(0,0,0,.55)}
.gold{color:var(--gold)}
.hero-sub{font-size:16px;line-height:1.6;color:#f7dcc1;margin:0 auto 22px;max-width:680px}
.hero-cta{display:flex;justify-content:center;margin:18px 0}
.btn-dl,.promo-big-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:58px;padding:0 24px;border:0;border-radius:999px;
  background:linear-gradient(135deg,#ff6a00,#ffb000 55%,#ffe08a);
  color:#2a1200;font-weight:950;text-decoration:none;
  box-shadow:0 14px 34px rgba(255,122,26,.38), inset 0 1px 0 rgba(255,255,255,.38);
  transform:translateZ(0);
  animation:pulse 1.7s infinite;
}
.btn-dl svg,.float-cta svg{width:22px;height:22px;fill:currentColor}
.hero-inner{width:min(1080px,100%);padding-top:58px;padding-bottom:52px}
.hero h1{max-width:1000px;margin:24px auto 18px;font-size:clamp(39px,6.1vw,76px);line-height:1.09;letter-spacing:-.045em;font-weight:850;text-wrap:balance}
.hero-title-line{display:block}.hero-title-accent{color:#ffd166}
.hero-sub{max-width:620px;margin-bottom:26px;font-size:17px;line-height:1.55;text-wrap:balance}
.hero-cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(520px,100%);margin:0 auto}
.hero-cta .btn-dl{width:100%;min-height:58px;padding:10px 16px;font-size:16px;animation:none;transition:transform .18s ease,box-shadow .18s ease}
.hero-cta .btn-android:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(255,122,26,.45)}
.hero-cta .btn-ios{background:rgba(20,16,30,.72);border:1px solid rgba(255,255,255,.33);box-shadow:0 12px 28px rgba(0,0,0,.25);color:#fff5e6;cursor:not-allowed}
.hero-cta .btn-ios small{display:block;font-size:11px;font-weight:600;line-height:1.25;color:#d1c6bb}
.hero-cta .btn-ios svg{fill:currentColor;flex:none}
.hero-cta .btn-dl:focus-visible{outline:3px solid #fff;outline-offset:3px}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.hero-info{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:620px;margin:28px auto 0}
.hero-info-item{
  border:1px solid rgba(255,183,77,.18);border-radius:18px;
  background:rgba(255,255,255,.06);padding:14px 8px;box-shadow:var(--shadow)
}
.hero-info-item .val{font-size:20px;font-weight:1000;color:#fff}
.hero-info-item .lbl{font-size:12px;color:var(--muted);margin-top:4px}
.bd-divider{height:12px;background:linear-gradient(90deg,transparent,rgba(255,122,26,.25),transparent)}
.promo-panel,.cat-section,.highlights,.compare,.cta-banner,.install-section,.app-info,.faq-section{
  width:min(1040px,100% - 24px);margin:18px auto;border:1px solid var(--line);
  border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  box-shadow:var(--shadow);overflow:hidden
}
.promo-panel{padding:18px}
.promo-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.promo-head img{width:58px;height:58px;border-radius:17px;object-fit:cover}
.promo-head h2{margin:0;font-size:26px}
.promo-head p{margin:4px 0 0;color:var(--muted)}
.promo-list{display:grid;gap:10px}
.promo-item{display:flex;gap:11px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:13px}
.promo-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#ff7a1a,#ffbd59);font-size:20px}
.promo-item h3{margin:0 0 3px;font-size:15px}
.promo-item p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.promo-big-btn{width:100%;margin-top:14px}
.promo-features{width:min(1040px,100% - 24px);margin:0 auto 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.promo-feature{padding:14px 8px;text-align:center;background:linear-gradient(180deg,rgba(255,122,26,.2),rgba(255,255,255,.05));border:1px solid var(--line);border-radius:18px}
.promo-feature b{display:block;font-size:20px;color:var(--gold)}
.promo-feature span{font-size:12px;color:var(--muted)}
.cat-section{padding:14px 0 18px}
.cat-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;margin-bottom:8px}
.cat-header h2{margin:0;font-size:20px;line-height:1.25}
.emoji{filter:drop-shadow(0 3px 8px rgba(255,122,26,.6))}
.see-all{font-size:12px;color:var(--gold);white-space:nowrap}
.cat-sub{padding:0 16px;margin:0 0 12px;color:var(--muted);font-size:13px;line-height:1.45}
.cat-scroll{
  display:flex;gap:12px;overflow-x:auto;padding:0 16px 2px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch
}
.cat-scroll::-webkit-scrollbar{display:none}
.content-card{flex:0 0 142px;scroll-snap-align:start;cursor:pointer}
.thumb{position:relative;border-radius:18px;overflow:hidden;background:#201629;aspect-ratio:2/3;border:1px solid rgba(255,255,255,.08)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:.25s}
.content-card:hover img{transform:scale(1.06)}
.badge,.badge2{
  position:absolute;top:8px;left:8px;background:linear-gradient(135deg,#ff4d4d,#ff7a1a);border-radius:999px;
  color:#fff;font-size:10px;font-weight:1000;padding:4px 7px;box-shadow:0 8px 18px rgba(0,0,0,.35)
}
.badge2{left:auto;right:8px;background:rgba(0,0,0,.65);color:#fff2c2}
.title{font-weight:900;font-size:13px;margin:8px 2px 3px;line-height:1.25}
.meta{font-size:11px;color:var(--muted);line-height:1.35;margin:0 2px}
.wide-card{flex:0 0 270px;scroll-snap-align:start;cursor:pointer}
.wide-thumb{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/10;background:#201629;border:1px solid rgba(255,255,255,.08)}
.wide-thumb img{width:100%;height:100%;object-fit:cover}
.overlay{position:absolute;inset:auto 0 0;padding:36px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.86))}
.overlay .badge{position:static;display:inline-block;margin-bottom:6px}
.overlay h3{margin:0;font-size:17px}
.overlay p{margin:4px 0 0;color:#f0d3b0;font-size:12px}
.live-dot:before{content:"";display:inline-block;width:6px;height:6px;border-radius:999px;background:#34ff97;margin-right:5px}
.highlights{padding:18px}
.hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hl-card{padding:16px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.22);border-radius:18px}
.hl-card .icon{font-size:25px}
.hl-card h3{margin:8px 0 4px;font-size:15px}
.hl-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.compare{padding:18px}
.compare h2,.cta-banner h2,.install-section h2,.faq-section h2{margin:0 0 14px;text-align:center}
.compare-table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:18px;background:rgba(0,0,0,.22)}
.compare-table th,.compare-table td{padding:12px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px}
.compare-table th{background:linear-gradient(135deg,rgba(255,122,26,.35),rgba(255,176,0,.18));text-align:left}
.check{color:#7effbc;font-weight:900}.cross{color:#ff9f9f}
.cta-banner{padding:24px 18px;text-align:center;background:linear-gradient(135deg,rgba(255,122,26,.24),rgba(124,58,237,.16))}
.cta-banner p{color:var(--muted);line-height:1.55}
.install-section{padding:18px}
.step-cards{display:grid;gap:12px}
.step-card{display:flex;gap:12px;text-decoration:none;color:inherit;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px}
.snum{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#ff7a1a,#ffbd59);color:#241000;font-weight:1000}
.step-card h3{margin:0 0 4px}.step-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.app-info{padding:4px 0}
.app-info table{width:100%;border-collapse:collapse}
.app-info td{padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px}
.app-info td:first-child{color:var(--muted)}
.faq-section{padding:18px}
.faq-item{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:13px;margin:10px 0}
.faq-q{font-weight:900}.faq-a{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.45}
.footer{text-align:center;color:rgba(255,247,234,.55);font-size:12px;padding:26px 14px}
.footer a{color:rgba(255,209,102,.65);text-decoration:none}
.float-cta{
  position:fixed;z-index:50;left:10px;right:10px;bottom:10px;
  border:1px solid rgba(255,255,255,.14);border-radius:20px;background:rgba(12,8,19,.9);
  backdrop-filter:blur(14px);padding:8px;box-shadow:0 -12px 38px rgba(0,0,0,.45)
}
.float-cta a{height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font-weight:1000;background:linear-gradient(135deg,#ff6a00,#ffb000);color:#261000}
.float-cta .sub{text-align:center;font-size:11px;color:var(--muted);padding-top:5px}
@media (max-width:700px){
  .hero{min-height:610px}
  .hero h1{font-size:clamp(37px,9.8vw,56px);line-height:1.1;margin:20px auto 14px}
  .hero-sub{font-size:15px;max-width:520px}
  .hero-cta{gap:9px}
  .hero-cta .btn-dl{font-size:14px;gap:7px;min-height:56px;padding:8px 10px}
  .hero-cta .btn-dl svg{width:19px;height:19px}
  .nav-logo span{font-size:15px}
  .nav-dl{display:none}
  .hero-inner{padding-top:34px}
  .hero-info,.promo-features{grid-template-columns:repeat(2,1fr)}
  .hl-grid{grid-template-columns:1fr}
  .content-card{flex-basis:136px}
  .wide-card{flex-basis:260px}
}

/* Plex visual identity */
:root{
  --bg:#041b17;--bg2:#082b23;--card:#0b3028;--card2:#103a30;
  --text:#f5faf6;--muted:#acc3b8;--dim:#7d9b8d;
  --orange:#dfff19;--orange2:#b9e314;--gold:#dfff19;
  --line:rgba(184,231,193,.17);--shadow:0 18px 44px rgba(0,14,9,.28)
}
body{
  background:radial-gradient(circle at 78% 0%,rgba(30,116,78,.23),transparent 36%),
    linear-gradient(180deg,#031b16,#06251e 48%,#031712);
  color:var(--text)
}
.nav{padding:9px 22px;background:rgba(2,27,21,.86);border-color:var(--line)}
.nav-logo img{width:128px;height:46px;border:0;border-radius:0;object-fit:contain;box-shadow:none}
.nav-logo span{display:none}
.nav-dl,.btn-dl,.promo-big-btn,.float-cta a,.snum{
  background:#dfff19;color:#08251c;box-shadow:0 10px 30px rgba(143,194,13,.17)
}
.hero-bg{background:linear-gradient(180deg,rgba(2,27,21,.18),rgba(2,27,21,.87)),url('../image/hero.jpg') center/cover no-repeat}
.hero-bg:after{background:radial-gradient(circle at 70% 24%,rgba(139,218,43,.16),transparent 37%),linear-gradient(90deg,rgba(2,27,21,.91),rgba(2,27,21,.45),rgba(2,27,21,.84))}
.hero-chip{background:rgba(12,60,40,.64);border-color:rgba(223,255,25,.3);color:#eaffb4}
.hero-title-accent,.gold{color:#dfff19}
.hero-sub{color:#dfebe2}
.hero-cta .btn-android:hover{box-shadow:0 15px 32px rgba(181,228,26,.26)}
.hero-cta .btn-ios{background:rgba(1,28,22,.68);color:#e7f2e9}
.hero-cta .btn-ios small{color:#bbd0c0}
.hero-info-item{border-color:var(--line);background:rgba(8,57,43,.46)}
.promo-panel,.cat-section,.highlights,.compare,.cta-banner,.install-section,.app-info,.faq-section{background:linear-gradient(160deg,rgba(22,68,49,.55),rgba(4,34,27,.6))}
.promo-head img{width:104px;height:54px;border-radius:0;object-fit:contain}
.promo-icon{background:#c9ee27;color:#0a2a20}
.promo-feature{background:rgba(15,66,44,.45)}
.promo-feature b{color:#dfff19}
.badge{background:#b6df20;color:#08261e}
.badge2{color:#efffd0}
.compare-table th{background:rgba(59,113,58,.4)}
.cta-banner{background:linear-gradient(130deg,rgba(45,106,69,.62),rgba(4,38,30,.8))}
.footer a,.see-all{color:#dfff91}
.float-cta{background:rgba(2,29,22,.92)}
@media(max-width:700px){.nav{padding:8px 14px}.nav-logo img{width:102px;height:40px}.promo-head img{width:84px;height:45px}}

/* DramaBox CANAIS identity */
:root{
  --bg:#1a0917;--bg2:#2c0a1d;--card:#2a1020;--card2:#381526;
  --text:#fff7f4;--muted:#e2b9c8;--dim:#b48596;
  --orange:#ff8c20;--orange2:#ff3372;--gold:#ffb05b;
  --line:rgba(255,182,190,.19);--shadow:0 18px 44px rgba(31,0,15,.32)
}
body{background:radial-gradient(circle at 85% 0%,rgba(241,42,91,.28),transparent 35%),linear-gradient(180deg,#1b0916,#2a0b1c 50%,#170714);color:var(--text)}
.nav{background:rgba(27,5,22,.88);border-color:var(--line)}
.nav-logo{gap:10px}
.nav-logo img{width:43px;height:43px;object-fit:cover;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.nav-logo span{display:block;font-size:19px;line-height:1.05;letter-spacing:-.03em;max-width:170px}
.nav-dl,.btn-dl,.promo-big-btn,.float-cta a,.snum{background:linear-gradient(112deg,#ff9027,#fb2c6b);color:#fff;box-shadow:0 12px 30px rgba(232,36,93,.24)}
.hero-bg{background:radial-gradient(ellipse at 78% 23%,rgba(242,60,91,.4),transparent 39%),radial-gradient(ellipse at 17% 72%,rgba(255,137,37,.18),transparent 37%),linear-gradient(145deg,#260819,#390b25 54%,#160716)}
.hero-bg:after{background:linear-gradient(120deg,transparent 35%,rgba(255,151,56,.055) 49%,transparent 64%)}
.hero-chip{background:rgba(87,14,42,.55);border-color:rgba(255,157,95,.48);color:#ffd6a9}
.hero-title-accent,.gold{color:#ff9d55}
.hero-sub{color:#f8dce4}
.hero-cta .btn-android:hover{box-shadow:0 16px 36px rgba(232,36,93,.38)}
.hero-cta .btn-ios{background:rgba(37,9,27,.69);color:#fff3f2}
.hero-cta .btn-ios small{color:#e5c6d0}
.hero-info-item{border-color:var(--line);background:rgba(85,21,50,.4)}
.promo-panel,.cat-section,.highlights,.compare,.cta-banner,.install-section,.app-info,.faq-section{background:linear-gradient(160deg,rgba(83,24,50,.54),rgba(40,9,28,.67))}
.promo-head img{width:58px;height:58px;object-fit:cover;border-radius:13px}
.promo-icon{background:linear-gradient(135deg,#ff9b29,#f32965);color:#fff}
.promo-feature{background:rgba(102,28,55,.4)}
.promo-feature b{color:#ffbb78}
.badge{background:linear-gradient(120deg,#ff8d27,#f32c62);color:#fff}
.badge2{color:#ffe4db}
.compare-table th{background:rgba(137,34,71,.49)}
.cta-banner{background:linear-gradient(125deg,rgba(167,40,73,.55),rgba(55,11,38,.85))}
.footer a,.see-all{color:#ffb49a}
.float-cta{background:rgba(34,7,25,.94)}
@media(max-width:700px){.nav-logo img{width:38px;height:38px}.nav-logo span{font-size:16px;max-width:140px}.promo-head img{width:54px;height:54px}}