@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');
:root{--ink:#14242b;--muted:#738187;--teal:#0e9b8b;--mint:#d9f4ed;--paper:#f7faf9;--line:#e4ece9;--navy:#102c35}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:"DM Sans","Noto Sans SC",sans-serif}a{color:inherit;text-decoration:none}.topbar{height:76px;padding:0 clamp(20px,6vw,90px);display:flex;align-items:center;gap:42px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:20}.brand{font-weight:800;letter-spacing:.08em;font-size:19px;white-space:nowrap}.brand span{color:var(--teal);margin-left:7px;font-size:12px;letter-spacing:.16em}.topbar nav{display:flex;gap:28px;color:#53636a;font-size:13px;flex:1}.topbar nav a:hover,.text-link:hover{color:var(--teal)}.nav-actions{display:flex;align-items:center;gap:12px}.btn{border:0;border-radius:8px;padding:12px 18px;font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--teal);color:white}.btn-outline{background:white;border:1px solid var(--line);color:var(--ink)}.btn-ghost{background:#ffffff18;border:1px solid #ffffff55;color:white}.btn-light{background:white;color:var(--navy)}.menu-btn{display:none;background:none;border:0;font-size:24px}.hero{min-height:570px;padding:80px clamp(20px,10vw,150px);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;background:linear-gradient(115deg,#102d36,#164b50 65%,#0c766b);color:white;overflow:hidden}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.2em;color:#50c8b1}.hero h1{font-size:clamp(42px,5.5vw,68px);line-height:1.18;letter-spacing:-.05em;margin:22px 0}.hero h1 em{font-style:normal;color:#73dfc9}.hero-copy>p{color:#c3d7d4;line-height:1.9;max-width:450px;font-size:15px}.hero-actions{display:flex;gap:12px;margin:32px 0}.hero-meta{display:flex;gap:25px;color:#a9c7c1;font-size:11px}.hero-art{height:370px;position:relative;display:grid;place-items:center}.orb{position:absolute;border-radius:50%;filter:blur(2px)}.orb-a{width:310px;height:310px;background:radial-gradient(circle at 35% 30%,#79e4cc,#178b7d 60%,#0a3b46);box-shadow:0 0 90px #5de3c755}.orb-b{width:390px;height:390px;border:1px solid #a8f3df55}.glass-card{width:260px;height:300px;border:1px solid #d2fff355;border-radius:18px;background:#d4fff016;backdrop-filter:blur(14px);z-index:1;padding:20px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 30px 80px #001b1d66;transform:rotate(-7deg)}.glass-top,.glass-bottom{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.12em}.live-dot{color:#8ef4b9}.globe{font-size:140px;text-align:center;color:#c0fff0;text-shadow:0 0 35px #b8fff0aa}.glass-bottom{display:flex;flex-direction:column;gap:7px}.glass-bottom small{color:#c0dcd7;letter-spacing:0}.float-chip{position:absolute;padding:12px 16px;border-radius:9px;background:#ffffff1b;border:1px solid #ffffff3d;backdrop-filter:blur(10px);font-size:10px;letter-spacing:.12em;z-index:2}.chip-one{top:55px;right:0}.chip-two{bottom:42px;left:0}.stats{display:flex;justify-content:center;gap:clamp(45px,10vw,150px);padding:30px 20px;border-bottom:1px solid var(--line)}.stats div{display:flex;align-items:center;gap:12px}.stats b{font-size:17px;color:var(--teal)}.stats span{font-size:11px;color:var(--muted)}.section{padding:85px clamp(20px,10vw,150px)}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:34px}.section-head h2,.cta h2{font-size:34px;letter-spacing:-.04em;margin:10px 0}.section-head p,.cta p{color:var(--muted);font-size:13px}.text-link{font-size:12px;color:var(--teal);font-weight:700}.card-grid,.service-grid,.plan-grid,.tutorial-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.media-card,.service-card,.plan-card,.tutorial-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:white;transition:.2s}.media-card:hover,.service-card:hover,.plan-card:hover,.tutorial-card:hover{transform:translateY(-4px);box-shadow:0 15px 35px #163b3310}.poster{height:210px;background:linear-gradient(140deg,#d9f2ec,#6bb9a8);display:grid;place-items:center;color:#fff;font-size:46px;overflow:hidden}.poster img{width:100%;height:100%;object-fit:cover}.media-body,.service-card,.plan-card,.tutorial-card{padding:19px}.media-body h3,.service-card h3,.plan-card h3,.tutorial-card h3{font-size:15px;margin:0 0 8px}.media-body p,.service-card p,.plan-card p,.tutorial-card p{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 14px}.pill{display:inline-block;padding:5px 8px;border-radius:20px;background:var(--mint);color:#167d70;font-size:10px;font-weight:700}.card-action{display:inline-block;color:var(--teal);font-size:11px;font-weight:700;margin-top:8px}.section-dark{background:#102d36;color:white}.section-dark .section-head p{color:#a7c1bc}.service-card{background:#173c43;border-color:#31535a}.service-card .service-icon{font-size:25px;margin-bottom:22px;color:#72d8c2}.service-card p{color:#abc2be}.plan-card{padding:24px}.price{font-size:27px;font-weight:800;margin:15px 0}.price small{font-size:11px;color:var(--muted);font-weight:400}.plan-card ul{padding-left:17px;color:var(--muted);font-size:11px;line-height:2}.tutorial-card{padding:23px}.tutorial-card .number{color:#53bba8;font-size:11px;margin-bottom:18px}.section-soft{background:#f3f8f6}.cta{margin:0 clamp(20px,10vw,150px) 80px;padding:48px 55px;background:linear-gradient(110deg,#0d887c,#14515a);border-radius:16px;color:white;display:flex;align-items:center;justify-content:space-between}.cta p{color:#c0d9d4}footer{padding:35px clamp(20px,10vw,150px);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:15px}footer p,footer small,footer div{font-size:10px;color:var(--muted)}footer div{display:flex;gap:20px;justify-content:end}.loading{padding:28px;color:var(--muted);font-size:13px}.muted{color:var(--muted);font-size:11px}.modal{position:fixed;inset:0;background:#071b20b8;z-index:50;display:grid;place-items:center;padding:20px}.hidden{display:none!important}.modal-panel{background:white;border-radius:16px;padding:35px;width:min(100%,430px);position:relative}.modal-panel h2{margin:12px 0 22px}.close{position:absolute;right:18px;top:12px;background:none;border:0;font-size:26px;cursor:pointer}.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:22px}.tab{border:0;background:none;padding:12px 18px;color:var(--muted);cursor:pointer}.tab.active{color:var(--teal);border-bottom:2px solid var(--teal)}form label{display:block;font-size:11px;color:#59696e;margin:14px 0}input,select,textarea{width:100%;padding:12px;border:1px solid #dce6e2;border-radius:7px;margin-top:7px;font:inherit;font-size:13px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--teal)}.full{width:100%;margin-top:12px}.form-message{font-size:12px;color:var(--teal);min-height:16px}.fineprint{font-size:10px;color:#98a4a5}.admin-shell{max-width:1200px;margin:45px auto;padding:0 22px}.admin-head{margin-bottom:28px}.admin-head h1{font-size:34px}.admin-layout{display:grid;grid-template-columns:220px 1fr;gap:24px}.side-nav,.panel{border:1px solid var(--line);border-radius:12px;padding:20px;background:white}.side-nav a{display:block;padding:12px;color:#607076;font-size:13px;border-radius:7px}.side-nav a.active,.side-nav a:hover{background:var(--mint);color:#087e70}.panel h2{margin-top:0}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px}.table-wrap{overflow:auto;margin-top:24px}table{border-collapse:collapse;width:100%;font-size:12px}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);white-space:nowrap}th{color:var(--muted)}.status{font-size:10px;color:#13816f;background:var(--mint);padding:5px 8px;border-radius:20px}.notice{padding:14px;border-radius:8px;background:#fff7e5;color:#84621a;font-size:12px;line-height:1.7}.player-shell{max-width:1100px;margin:40px auto;padding:0 20px}.video-frame{position:relative;background:#000;aspect-ratio:16/9;border-radius:12px;overflow:hidden}.video-frame video{width:100%;height:100%}.ad-container{position:absolute;inset:0}.player-controls{display:flex;gap:12px;margin:15px 0;align-items:center}.promo{border:1px solid var(--line);border-radius:10px;padding:18px;margin-top:20px}.promo a{color:var(--teal)}@media(max-width:850px){.topbar{gap:15px}.topbar nav{display:none}.nav-actions{margin-left:auto}.menu-btn{display:block}.hero{grid-template-columns:1fr;padding-top:60px}.hero-art{height:300px}.card-grid,.service-grid,.plan-grid,.tutorial-grid{grid-template-columns:repeat(2,1fr)}.admin-layout{grid-template-columns:1fr}.side-nav{display:flex;overflow:auto;gap:5px}.side-nav a{white-space:nowrap}.cta{margin-left:20px;margin-right:20px;padding:30px;gap:20px}.stats{gap:20px;flex-wrap:wrap}footer{grid-template-columns:1fr;gap:10px}footer div{justify-content:start}}@media(max-width:540px){.nav-actions .btn-primary{display:none}.hero{padding:55px 22px}.hero-art{transform:scale(.85);margin:-10px 0}.hero-meta{gap:12px;flex-wrap:wrap}.section{padding:60px 20px}.section-head{align-items:start;gap:12px;flex-direction:column}.card-grid,.service-grid,.plan-grid,.tutorial-grid{grid-template-columns:1fr 1fr;gap:10px}.poster{height:140px}.media-body,.service-card,.plan-card,.tutorial-card{padding:13px}.cta{display:block}.cta .btn{margin-top:18px}.form-grid{grid-template-columns:1fr}.modal-panel{padding:25px}.stats{justify-content:space-between}.stats div{flex-direction:column;align-items:start;gap:4px}}
/* Admin professional dashboard + mobile usability */
.admin-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0}.kpi{border:1px solid var(--line);border-radius:12px;padding:18px;background:linear-gradient(145deg,#fff,#f7fbfa);display:flex;flex-direction:column;gap:8px}.kpi span{font-size:12px;color:var(--muted)}.kpi strong{font-size:30px;line-height:1.1;color:var(--navy)}.kpi small{font-size:10px;color:var(--muted)}.admin-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.admin-shortcuts>div{border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:8px}.admin-shortcuts b{font-size:13px}.admin-shortcuts span{font-size:11px;color:var(--muted);line-height:1.6}.side-nav{position:sticky;top:94px;height:max-content}.side-nav a{font-weight:600}.panel{scroll-margin-top:100px}.admin-head h1{margin-bottom:8px}.admin-shell .panel{box-shadow:0 8px 28px #163b3308}
@media(max-width:850px){.admin-shell{margin:24px auto;padding:0 16px}.admin-layout{gap:14px}.side-nav{position:static;white-space:nowrap}.admin-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-shortcuts{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.topbar{height:62px;padding:0 14px}.topbar .brand{font-size:16px}.topbar .nav-actions{gap:6px}.topbar .nav-actions .muted{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-head h1{font-size:27px}.admin-layout{display:block}.side-nav{margin-bottom:14px;padding:8px;overflow-x:auto;display:flex;gap:4px}.side-nav a{padding:10px 12px;font-size:12px}.panel{padding:15px;margin-top:14px!important}.admin-kpis{gap:8px}.kpi{padding:13px}.kpi strong{font-size:24px}.admin-shortcuts{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.table-wrap{margin-left:-4px;margin-right:-4px}th,td{padding:10px 8px;font-size:11px}}

/* v1.1 operations dashboard refinements */
.admin-head{padding:26px 28px;border-radius:14px;background:linear-gradient(115deg,#102d36,#17685f);color:#fff}
.admin-head .muted{color:#c3d7d4}
.admin-head .eyebrow{color:#8be2cf}
.admin-shell .section-head h2{font-size:21px}
.admin-shell h3{font-size:14px;margin:22px 0 8px}
.admin-shell .btn{min-height:42px}
.admin-shell .btn-outline{border:1px solid #d8e5e1;background:#fff;color:#245b55;border-radius:7px;padding:10px 15px;cursor:pointer}
.admin-shell .form-grid button{align-self:end}
.error-message{color:#b42318}
.side-nav a{border:1px solid transparent}
.side-nav a:focus-visible,.admin-shell button:focus-visible,.admin-shell a:focus-visible{outline:3px solid #76cdbc;outline-offset:2px}
@media(max-width:850px){.admin-head{padding:22px}}
/* v1.2 operations tables */
#operations .table-wrap{border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:18px}
#operations .table-wrap h3{font-size:14px;margin:0 0 8px}
#operations .section-head{align-items:center;gap:16px;flex-wrap:wrap}
#operations .section-head .muted{margin:6px 0 0}
#operations .form-message{line-height:1.7;overflow-wrap:anywhere}
@media(max-width:540px){#operations .table-wrap{padding:10px}#operations .section-head{align-items:flex-start}}