:root {
  --ink: #07142f;
  --muted: #65718b;
  --line: #e7edf8;
  --blue: #0878ff;
  --cyan: #00b9ff;
  --violet: #7d46ff;
  --pink: #f61fd1;
  --dark: #061326;
  --dark-2: #0a1b34;
  --shell: min(1400px, calc(100% - 84px));
  font-family: Inter, "Myanmar Text", "Noto Sans Myanmar", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { max-width: 100%; display: block; }

.content-shell, .nav-shell, .hero-shell { width: var(--shell); margin-inline: auto; }

.site-header {
  position: relative;
  z-index: 30;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #e7ecf6;
  box-shadow: 0 7px 28px rgba(43, 66, 112, .07);
}
.nav-shell { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.brand { display: inline-flex; align-items: center; gap: 18px; flex-shrink: 0; }
.brand img { width: 62px; height: 62px; border-radius: 16px; object-fit: cover; box-shadow: 0 9px 24px rgba(111, 57, 210, .18); }
.brand-name { font-size: clamp(21px, 2vw, 31px); font-weight: 850; letter-spacing: -.035em; color: #111b38; white-space: nowrap; }
.brand-name strong { background: linear-gradient(92deg,#0586ff 10%,#3e6fff 48%,#e527d7 98%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-nav { display: flex; align-items: center; gap: 42px; font-weight: 650; color: #17203d; }
.site-nav a { position: relative; padding: 35px 0 31px; font-size: 16px; transition: color .2s ease, transform .2s ease; }
.site-nav a:hover { color: #0878ff; }
.site-nav a.active:not(.signup-link)::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 18px; height: 3px; border-radius: 8px; background: linear-gradient(90deg,#0878ff,#784cff); box-shadow: 0 2px 9px rgba(8,120,255,.25); }
.site-nav .signup-link { padding: 15px 31px; color: #fff; border-radius: 15px; background: linear-gradient(120deg,#0878ff 5%,#244cff 54%,#ee26d7); box-shadow: 0 10px 22px rgba(70,80,255,.2); }
.site-nav .signup-link:hover { color: #fff; transform: translateY(-1px); }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 8px; border: 0; background: transparent; cursor: pointer; }
.menu-toggle span { display: block; height: 2px; margin: 6px 0; border-radius: 3px; background: #14213f; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Home */
.home-page { color: var(--ink); background: #fff; }
.hero-section { position: relative; overflow: hidden; min-height: 745px; background: linear-gradient(110deg,#fff 0%,#fff 42%,#f5f9ff 71%,#eef2ff 100%); }
.hero-shell { position: relative; z-index: 3; min-height: 745px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 54px; padding: 75px 0 55px; }
.hero-copy { position: relative; z-index: 5; }
.eyebrow { display: flex; align-items: center; gap: 14px; color: #4f51c8; font-size: 12px; font-weight: 800; letter-spacing: .28em; }
.eyebrow span { display: inline-block; width: 48px; height: 2px; background: linear-gradient(90deg,#7789ff,#0fa2e9); }
.hero-copy h1 { margin: 25px 0 24px; font-size: clamp(58px, 6.2vw, 95px); line-height: .97; letter-spacing: -.065em; font-weight: 900; color: #071333; }
.hero-copy h1 span { background: linear-gradient(92deg,#0b83ff 8%,#3f5cff 56%,#e020d5 96%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy > p { margin: 0; max-width: 650px; color: #6a748a; font-size: 18px; line-height: 1.72; font-weight: 450; }
.hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 43px; }
.primary-btn, .secondary-btn { min-height: 67px; display: inline-flex; align-items: center; justify-content: center; gap: 15px; border-radius: 16px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.primary-btn { padding: 0 27px; color: #fff; background: linear-gradient(120deg,#0878ff,#145fff 55%,#2746ff); box-shadow: 0 16px 32px rgba(16,100,255,.25); }
.primary-btn:hover, .secondary-btn:hover { transform: translateY(-2px); }
.primary-btn svg { width: 27px; height: 27px; fill: currentColor; }
.primary-btn .download-icon { width: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.secondary-btn { min-width: 205px; padding: 0 24px; background: #fff; color: #1b2442; border: 1px solid #e7ebf4; box-shadow: 0 12px 30px rgba(37,61,107,.1); }
.info-icon { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid #126bff; border-radius: 50%; color: #126bff; font-weight: 850; }
.secondary-btn .arrow { margin-left: auto; color: #126bff; font-size: 28px; line-height: 1; }
.feature-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 19px; margin-top: 48px; max-width: 720px; }
.feature-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.feature-icon { color: #145eff; font-size: 28px; line-height: 1; font-weight: 800; }
.feature-item strong, .feature-item span { display: block; }
.feature-item strong { color: #233151; font-size: 11px; white-space: nowrap; }
.feature-item span { margin-top: 2px; color: #8b94a8; font-size: 9px; white-space: nowrap; }

.hero-visual { position: relative; min-height: 590px; display: grid; place-items: center; }
.screen-glow { position: absolute; width: 680px; height: 500px; border-radius: 50%; background: radial-gradient(circle,rgba(59,134,255,.2),rgba(132,72,255,.12) 45%,rgba(255,55,202,.06) 65%,transparent 70%); filter: blur(13px); }
.monitor { position: relative; z-index: 5; width: min(760px, 100%); transform: perspective(1400px) rotateY(-7deg) rotateX(1.5deg); transform-origin: center; filter: drop-shadow(0 28px 28px rgba(26,50,100,.24)); }
.monitor-bezel { position: relative; padding: 14px 14px 18px; background: linear-gradient(145deg,#081226,#111e3b); border: 2px solid #1b2f58; border-radius: 18px 18px 11px 11px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 0 1px rgba(9,40,100,.15); }
.monitor-camera { position: absolute; z-index: 2; top: 6px; left: 50%; width: 5px; height: 5px; transform: translateX(-50%); border-radius: 50%; background: #3e506d; }
.monitor-screen { overflow: hidden; aspect-ratio: 16 / 8.7; border-radius: 8px; background: #061426; }
.monitor-screen img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.97) contrast(1.04) brightness(.86); }
.monitor-neck { width: 120px; height: 78px; margin: -2px auto 0; background: linear-gradient(90deg,#101a31,#172743 50%,#0d172b); clip-path: polygon(27% 0,73% 0,83% 100%,17% 100%); }
.monitor-base { width: 340px; height: 22px; margin: -1px auto 0; border-radius: 55% 55% 25% 25%; background: linear-gradient(180deg,#1d3153,#0e1c33); box-shadow: 0 7px 0 #173a72, 0 12px 27px rgba(40,89,201,.28); }
.desk-glow { position: absolute; z-index: 1; bottom: 40px; right: 0; width: 700px; height: 80px; border-radius: 50%; background: linear-gradient(90deg,rgba(0,172,255,.25),rgba(61,73,255,.32),rgba(247,42,216,.28)); filter: blur(22px); }
.floating-logo { position: absolute; z-index: 7; width: 68px; height: 68px; padding: 5px; border-radius: 17px; background: linear-gradient(145deg,rgba(21,133,255,.9),rgba(238,40,214,.86)); box-shadow: 0 15px 30px rgba(77,69,255,.25); transform: rotate(-8deg); }
.floating-logo img { width: 100%; height: 100%; border-radius: 13px; object-fit: cover; }
.floating-logo-one { top: 68px; left: 4%; }
.floating-logo-two { width: 51px; height: 51px; bottom: 92px; left: 2%; transform: rotate(12deg); opacity: .9; }
.hero-bg-shape { position: absolute; pointer-events: none; }
.shape-one { width: 650px; height: 650px; right: -190px; top: -150px; border-radius: 50%; border: 90px solid rgba(116,136,255,.1); }
.shape-two { width: 520px; height: 520px; right: 70px; bottom: -300px; transform: rotate(22deg); background: linear-gradient(135deg,rgba(8,156,255,.08),rgba(247,32,209,.09)); clip-path: polygon(49% 0,100% 36%,76% 100%,16% 86%,0 28%); }
.shape-three { width: 360px; height: 280px; right: 6%; top: 5%; background: linear-gradient(140deg,rgba(25,110,255,.12),rgba(239,43,214,.1)); clip-path: polygon(12% 28%,60% 0,100% 19%,73% 76%,21% 100%,0 65%); }

.contact-section { padding: 75px 0 85px; background: #f7f9ff; border-top: 1px solid #edf1fa; }
.contact-card { padding: 40px 44px; display: flex; align-items: center; justify-content: space-between; gap: 40px; background: #fff; border: 1px solid #e6ecf7; border-radius: 26px; box-shadow: 0 22px 55px rgba(45,70,120,.08); }
.section-kicker { color: #3278ff; font-size: 11px; font-weight: 850; letter-spacing: .2em; }
.contact-card h2 { margin: 10px 0 10px; color: #0c1735; font-size: 34px; }
.contact-card p { max-width: 800px; margin: 0; color: #69758d; line-height: 1.8; }
.contact-download { flex: 0 0 auto; min-width: 230px; }
.site-footer { background: #fff; border-top: 1px solid #edf1f8; color: #7a849a; font-size: 12px; }
.site-footer .content-shell { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }

/* Membership */
.membership-page, .auth-page { color: #edf6ff; background: #061326; }
.membership-header { background: rgba(6,19,38,.95); border-bottom-color: rgba(87,142,219,.18); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.membership-header .brand-name { color: #f3f7ff; }
.membership-header .site-nav { color: #dce7f9; }
.membership-header .menu-toggle span { background: #e9f3ff; }
.membership-main { position: relative; overflow: hidden; padding: 68px 0 100px; background:
  radial-gradient(circle at 13% 25%,rgba(0,213,255,.11),transparent 25%),
  radial-gradient(circle at 87% 12%,rgba(177,49,255,.12),transparent 23%),
  linear-gradient(180deg,#07172b,#061326 68%,#071426); }
.membership-intro { position: relative; z-index: 2; text-align: center; margin-bottom: 42px; }
.membership-intro h1 { margin: 10px 0 10px; font-size: clamp(38px,5vw,64px); letter-spacing: -.04em; }
.membership-intro h1 { background: linear-gradient(92deg,#f5fbff,#6fc5ff 50%,#e15cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.membership-intro p { margin: 0; color: #9cb0cb; }
.plan-section { position: relative; z-index: 2; padding: 24px 20px 25px; border: 1px solid rgba(82,144,230,.33); border-radius: 26px; background: linear-gradient(155deg,rgba(10,31,57,.9),rgba(7,22,43,.91)); box-shadow: 0 22px 60px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.025); }
.monthly-section { margin-top: 28px; }
.plan-heading { display: flex; align-items: center; justify-content: center; gap: 18px; margin: -2px 0 24px; }
.plan-heading h2 { margin: 0; font-size: 27px; letter-spacing: -.025em; }
.plan-heading h2 small { color: #9fb0c8; font-size: 12px; font-weight: 500; }
.plan-heading-icon { color: #76a8ff; font-size: 28px; text-shadow: 0 0 22px currentColor; }
.plan-heading-line { width: 100px; height: 2px; background: linear-gradient(90deg,transparent,#518ef1); }
.plan-heading-line:last-child { background: linear-gradient(90deg,#518ef1,transparent); }
.plan-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.plan-card { --accent:#2bf0a7; --accent-rgb:43,240,167; min-height: 470px; position: relative; display: flex; flex-direction: column; padding: 21px 20px 17px; overflow: hidden; border: 1px solid rgba(var(--accent-rgb),.68); border-radius: 17px; background: linear-gradient(160deg,rgba(var(--accent-rgb),.09),rgba(6,18,35,.96) 37%,rgba(6,18,35,.98)); box-shadow: inset 0 0 25px rgba(var(--accent-rgb),.035); }
.plan-card::after { content:""; position:absolute; right:-60px; bottom:64px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.11),transparent 68%); pointer-events:none; }
.gold-card { --accent:#ffd532; --accent-rgb:255,213,50; }
.ps-card { --accent:#29b9ff; --accent-rgb:41,185,255; }
.platinum-card { --accent:#e056ff; --accent-rgb:224,86,255; }
.plan-title-row { display: flex; align-items: center; gap: 13px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,.09); }
.plan-icon { width: 47px; height: 47px; display: grid; place-items: center; flex: 0 0 auto; color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.7); border-radius: 50%; background: rgba(var(--accent-rgb),.09); box-shadow: 0 0 22px rgba(var(--accent-rgb),.18); font-size: 23px; font-weight: 900; }
.ps-mark { border-radius: 13px; font-size: 14px; }
.plan-title-row h3 { margin: 0; color: var(--accent); font-size: 19px; }
.plan-title-row p { margin: 4px 0 0; color: #c0cde0; font-size: 11px; }
.plan-card ul { list-style: none; margin: 17px 0 18px; padding: 0; display: grid; gap: 11px; }
.plan-card li { position: relative; padding-left: 27px; color: #e4edf9; font-size: 12px; line-height: 1.35; }
.plan-card li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--accent); font-size: 17px; font-weight: 900; text-shadow: 0 0 12px rgba(var(--accent-rgb),.45); }
.exclusive-note { margin: auto 0 12px; padding: 11px 12px; display: grid; gap: 5px; text-align: center; border: 1px solid rgba(var(--accent-rgb),.7); border-radius: 11px; background: rgba(var(--accent-rgb),.065); }
.exclusive-note strong { color: var(--accent); font-size: 10px; }
.exclusive-note span { color: #dce7f6; font-size: 9px; line-height: 1.45; }
.plan-price { margin-top: auto; padding: 12px 10px 1px; display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid rgba(255,255,255,.08); text-align: center; }
.plan-price span { color: #c8d2e1; font-size: 10px; }
.plan-price strong { color: var(--accent); font-size: 14px; text-shadow: 0 0 15px rgba(var(--accent-rgb),.28); }
.membership-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .17; }
.orb-one { width: 320px; height: 320px; background:#00bfff; left:-100px; top:450px; }
.orb-two { width: 340px; height: 340px; background:#e72cff; right:-120px; top:180px; }
.dark-footer { background:#051020; border-top-color:rgba(87,142,219,.16); color:#7186a5; }

/* Auth */
.auth-main { min-height: calc(100vh - 96px); position: relative; overflow: hidden; display: grid; place-items: center; padding: 68px 20px; background: radial-gradient(circle at 50% 30%,rgba(55,92,255,.12),transparent 32%),#061326; }
.auth-card { position: relative; z-index: 2; width: min(470px,100%); padding: 38px; text-align: center; border: 1px solid rgba(86,144,232,.32); border-radius: 27px; background: linear-gradient(155deg,rgba(12,36,66,.95),rgba(6,20,39,.96)); box-shadow: 0 32px 80px rgba(0,0,0,.27); }
.auth-logo { width: 80px; height: 80px; margin: 0 auto 18px; border-radius: 21px; object-fit: cover; box-shadow: 0 15px 35px rgba(114,49,232,.26); }
.auth-card h1 { margin: 8px 0; font-size: 35px; }
.auth-card > p { margin: 0 0 27px; color: #92a7c2; font-size: 13px; }
.auth-card form { display: grid; gap: 16px; text-align: left; }
.auth-card label { color: #cbd9eb; font-size: 12px; font-weight: 650; }
.auth-card input { width: 100%; height: 52px; margin-top: 8px; padding: 0 15px; color: #fff; border: 1px solid #28486f; outline: none; border-radius: 12px; background:#081a32; }
.auth-card input:focus { border-color:#2a91ff; box-shadow:0 0 0 3px rgba(42,145,255,.11); }
.password-field { position: relative; }
.password-field input { padding-right: 65px; }
.password-field button { position:absolute; right:9px; bottom:8px; height:36px; padding:0 9px; border:0; color:#70baff; background:transparent; cursor:pointer; font-size:11px; font-weight:700; }
.auth-submit { width:100%; border:0; cursor:pointer; margin-top:5px; }
.auth-submit:disabled { opacity:.6; cursor:wait; }
.auth-message { min-height:18px; margin:0!important; text-align:center; font-size:11px!important; }
.auth-message.error { color:#ff7b9a; }
.auth-message.success { color:#5af0b3; }
.auth-switch { margin:22px 0 0!important; color:#8ea2bd!important; font-size:12px!important; }
.auth-switch button { border:0; background:transparent; color:#60aaff; font-weight:750; cursor:pointer; }
.auth-orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:.22; }
.auth-orb-one { width:280px; height:280px; left:10%; top:20%; background:#007cff; }
.auth-orb-two { width:260px; height:260px; right:10%; bottom:12%; background:#ef2bd7; }

@media (max-width: 1180px) {
  :root { --shell: min(100% - 46px, 1400px); }
  .site-nav { gap: 24px; }
  .hero-shell { grid-template-columns: 1fr 1fr; gap: 22px; }
  .hero-copy h1 { font-size: clamp(52px,6.5vw,78px); }
  .feature-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 860px) {
  :root { --shell: min(100% - 34px, 1400px); }
  .nav-shell { min-height: 78px; }
  .brand img { width: 48px; height: 48px; border-radius: 13px; }
  .brand-name { font-size: 21px; }
  .menu-toggle { display: block; margin-left:auto; }
  .site-nav { position:absolute; top:78px; left:17px; right:17px; display:none; padding:12px; border:1px solid #e6ebf5; border-radius:16px; background:#fff; box-shadow:0 18px 45px rgba(29,50,90,.16); }
  .membership-header .site-nav { background:#09182d; border-color:#203d62; }
  .site-nav.open { display:grid; gap:2px; }
  .site-nav a { padding:13px 14px; border-radius:10px; }
  .site-nav a.active:not(.signup-link)::after { display:none; }
  .site-nav a.active:not(.signup-link) { color:#0878ff; background:#edf5ff; }
  .membership-header .site-nav a.active:not(.signup-link) { background:#0f2a4c; }
  .site-nav .signup-link { margin-top:6px; text-align:center; padding:13px 18px; }
  .hero-shell { grid-template-columns:1fr; padding-top:67px; }
  .hero-section, .hero-shell { min-height:auto; }
  .hero-copy { text-align:center; }
  .eyebrow { justify-content:center; }
  .hero-copy > p { margin-inline:auto; }
  .hero-actions { justify-content:center; }
  .feature-strip { margin-inline:auto; }
  .hero-visual { min-height:530px; margin-top:10px; }
  .monitor { width:min(720px,96%); transform:none; }
  .floating-logo-one { left:2%; }
  .contact-card { flex-direction:column; align-items:flex-start; }
  .contact-download { width:100%; }
  .membership-main { padding-top:48px; }
}

@media (max-width: 620px) {
  :root { --shell: min(100% - 24px, 1400px); }
  .brand { gap:10px; }
  .brand img { width:42px; height:42px; }
  .brand-name { font-size:18px; }
  .hero-shell { padding-top:52px; }
  .eyebrow { font-size:9px; letter-spacing:.18em; }
  .eyebrow span { width:30px; }
  .hero-copy h1 { margin-top:18px; font-size:clamp(45px,14vw,64px); }
  .hero-copy > p { font-size:14px; }
  .hero-actions { flex-direction:column; align-items:stretch; margin-top:30px; }
  .primary-btn, .secondary-btn { width:100%; min-height:58px; }
  .feature-strip { grid-template-columns:repeat(2,1fr); gap:18px 10px; margin-top:32px; }
  .feature-item { justify-content:center; }
  .feature-item strong { font-size:10px; }
  .hero-visual { min-height:350px; }
  .monitor-neck { height:52px; width:88px; }
  .monitor-base { width:230px; height:16px; }
  .floating-logo { display:none; }
  .contact-section { padding:50px 0; }
  .contact-card { padding:28px 22px; border-radius:20px; }
  .contact-card h2 { font-size:28px; }
  .site-footer .content-shell { min-height:66px; flex-direction:column; justify-content:center; gap:5px; }
  .plan-section { padding:18px 10px; border-radius:19px; }
  .plan-grid { grid-template-columns:1fr; }
  .plan-card { min-height:0; }
  .plan-heading { gap:8px; }
  .plan-heading h2 { font-size:20px; text-align:center; }
  .plan-heading-line { width:35px; }
  .membership-intro { margin-bottom:30px; }
  .auth-card { padding:28px 20px; }
}