@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
  --brand: #576cdb;
  --brand-rgb: 87, 108, 219;
  --brand-2: #8199ff;
  --bg: #090d1f;
  --surface: #11172c;
  --surface-2: #18213d;
  --text: #f7f8ff;
  --muted: #a7aecb;
  --line: rgba(255,255,255,.1);
  --header: rgba(9,13,31,.72);
  --shadow: 0 26px 80px rgba(0,0,0,.28);
}

:root[data-theme="light"] {
  --bg: #f7f9ff;
  --surface: #fff;
  --surface-2: #eef1ff;
  --text: #10172b;
  --muted: #5f6885;
  --line: rgba(16,23,43,.11);
  --header: rgba(247,249,255,.82);
  --shadow: 0 24px 70px rgba(var(--brand-rgb),.13);
}

:root.theme-placevu {
  --brand: #576cdb;
  --brand-rgb: 87,108,219;
  --brand-2: #8199ff;
}
:root.theme-placevu:not([data-theme="light"]) {
  --bg: #090d1f;
  --surface: #11172c;
  --surface-2: #18213d;
}
:root.theme-placevu mobyrex-app-header {
  --shared-header-accent: var(--brand);
  --shared-header-accent-deep: #3f52bf;
}
:root.theme-scalevu { --brand: #2f6f86; --brand-rgb: 47,111,134; --brand-2: #7fb4c1; }
:root.theme-scalevu:not([data-theme="light"]) { --bg: #06131d; --surface: #0d202c; --surface-2: #123140; }
:root.theme-learnzy { --brand: #f33c79; --brand-rgb: 243,60,121; --brand-2: #39d4cf; }
:root.theme-learnzy:not([data-theme="light"]) { --bg: #11172a; --surface: #192139; --surface-2: #202b48; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: "DM Sans",sans-serif; transition: color .3s, background .3s; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.page { min-height: 100vh; overflow: hidden; position: relative; }
.page::before { content:""; position:fixed; width:680px; height:680px; left:-280px; top:80px; border-radius:50%; background:radial-gradient(circle,rgba(var(--brand-rgb),.18),transparent 68%); pointer-events:none; }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.site-header { position:sticky; top:18px; z-index:20; margin-top:18px; min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:11px 14px 11px 18px; border:1px solid var(--line); border-radius:24px; background:var(--header); backdrop-filter:blur(18px); box-shadow:0 12px 36px rgba(0,0,0,.08); }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:50px; height:50px; display:grid; place-items:center; border-radius:16px; color:white; background:linear-gradient(145deg,var(--brand-2),var(--brand)); box-shadow:0 12px 30px rgba(var(--brand-rgb),.35); font:800 24px/1 Manrope,sans-serif; }
.brand span { display:grid; }
.brand strong { font:800 17px/1.2 Manrope,sans-serif; }
.brand small { color:var(--muted); font-size:12px; margin-top:3px; }
.header-actions,.site-nav { display:flex; align-items:center; gap:8px; }
.site-nav a { padding:11px 14px; color:var(--muted); font-weight:600; font-size:14px; border-radius:12px; }
.site-nav a:hover { color:var(--text); background:rgba(var(--brand-rgb),.1); }
.site-nav .nav-cta { color:white; background:var(--brand); box-shadow:0 10px 26px rgba(var(--brand-rgb),.28); }

.hero { min-height:720px; display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:72px; padding-block:84px 72px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; color:var(--brand-2); font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; }
.eyebrow::before { content:""; width:28px; height:1px; background:currentColor; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:Manrope,sans-serif; }
h1 { margin:20px 0 24px; font-size:clamp(48px,6.4vw,86px); line-height:.98; letter-spacing:-.06em; }
h1 span { display:block; color:var(--brand-2); }
.hero-copy > p { max-width:600px; font-size:19px; line-height:1.7; color:var(--muted); }
.hero-actions { display:flex; align-items:center; gap:20px; margin-top:34px; }
.primary-button { display:inline-flex; align-items:center; gap:12px; color:#fff; background:var(--brand); padding:15px 20px; border-radius:16px; font-weight:700; box-shadow:0 16px 34px rgba(var(--brand-rgb),.28); transition:transform .25s,box-shadow .25s; }
.primary-button:hover { transform:translateY(-2px); box-shadow:0 20px 42px rgba(var(--brand-rgb),.38); }
.text-link { color:var(--muted); font-weight:700; }
.benefits { margin-top:46px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); padding-top:24px; }
.benefits div { display:grid; gap:5px; padding-right:18px; }
.benefits strong { font-size:15px; }
.benefits span { color:var(--muted); font-size:13px; line-height:1.4; }

.hero-art { position:relative; min-height:560px; display:grid; place-items:center; }
.hero-orbit { position:absolute; width:520px; height:520px; border:1px solid rgba(var(--brand-rgb),.2); border-radius:50%; animation:spin 28s linear infinite; }
.hero-orbit::before,.hero-orbit::after { content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:var(--brand-2); box-shadow:0 0 28px var(--brand); }
.hero-orbit::before { left:48px; top:75px; }.hero-orbit::after { right:28px; bottom:116px; }
.phone { width:290px; height:580px; padding:10px; position:relative; z-index:2; border-radius:46px; background:#050607; box-shadow:0 42px 90px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.18); transform:rotate(2deg); }
.phone-screen { position:relative; height:100%; border-radius:37px; overflow:hidden; background:linear-gradient(165deg,rgba(var(--brand-rgb),.25),#0d1413 50%); padding:0; color:white; }
.phone-screen::before { content:""; position:absolute; top:20px; left:50%; width:84px; height:22px; transform:translateX(-50%); border-radius:20px; background:#050607; }
.phone-screen img { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; }
.mock-top { display:flex; justify-content:space-between; align-items:center; font-size:12px; opacity:.8; }
.mock-greeting { margin:34px 0 18px; font:700 27px/1.18 Manrope,sans-serif; }
.mock-search { padding:13px 14px; border:1px solid rgba(255,255,255,.13); border-radius:14px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.62); font-size:12px; }
.mock-feature { margin-top:18px; min-height:150px; border-radius:22px; padding:20px; background:linear-gradient(145deg,var(--brand),var(--brand-2)); box-shadow:0 20px 40px rgba(var(--brand-rgb),.25); }
.mock-feature small { opacity:.75; }.mock-feature h3 { margin:12px 0 8px; font-size:22px; }.mock-feature p { opacity:.8; font-size:12px; line-height:1.5; }
.mock-list { display:grid; gap:10px; margin-top:18px; }
.mock-row { display:flex; align-items:center; gap:11px; padding:12px; border-radius:14px; background:rgba(255,255,255,.08); font-size:12px; }
.mock-row i { width:34px; height:34px; flex:none; border-radius:10px; background:rgba(var(--brand-rgb),.42); }
.float-chip { position:absolute; z-index:3; padding:12px 16px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow); font-size:13px; font-weight:700; }
.chip-one { top:100px; right:-8px; }.chip-two { bottom:92px; left:-12px; }
.hero-gallery { position:relative; width:min(100%,540px); height:610px; display:grid; place-items:center; isolation:isolate; }
.hero-gallery::before { content:""; position:absolute; z-index:-2; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle,rgba(var(--brand-rgb),.28),transparent 68%); filter:blur(8px); }
.hero-gallery-orbit { position:absolute; z-index:-1; width:500px; height:500px; border:1px dashed rgba(var(--brand-rgb),.34); border-radius:50%; animation:spin 28s linear infinite; }
.hero-gallery-frame { position:absolute; width:242px; height:526px; padding:7px; border:1px solid rgba(255,255,255,.24); border-radius:38px; background:linear-gradient(155deg,#53617f,#171e33); box-shadow:0 34px 80px rgba(0,0,0,.36); overflow:hidden; }
.hero-gallery-frame img { display:block; width:100%; height:100%; border-radius:31px; object-fit:cover; }
.hero-gallery-frame.is-main { z-index:3; transform:rotate(1.5deg); }
.hero-gallery-frame.is-left { z-index:1; left:18px; top:58px; transform:rotate(-10deg) scale(.88); opacity:.82; }
.hero-gallery-frame.is-right { z-index:2; right:15px; top:48px; transform:rotate(9deg) scale(.9); opacity:.88; }
.hero-app-icon { position:absolute; z-index:4; right:14px; bottom:52px; width:82px; height:82px; border-radius:23px; box-shadow:0 0 0 1px rgba(255,255,255,.24), 0 18px 40px rgba(0,0,0,.3); }
@keyframes spin { to { transform:rotate(360deg); } }

.section { padding-block:105px; }
.section-head { max-width:720px; margin:0 auto 54px; text-align:center; }
.section-head h2 { margin:14px 0 16px; font-size:clamp(36px,5vw,58px); line-height:1.05; letter-spacing:-.045em; }
.section-head p { color:var(--muted); font-size:17px; line-height:1.7; }
.flow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.flow-card { position:relative; min-height:250px; padding:30px; border:1px solid var(--line); border-radius:26px; background:linear-gradient(145deg,var(--surface),var(--surface-2)); box-shadow:0 24px 60px rgba(0,0,0,.08); overflow:hidden; }
.flow-card::after { content:attr(data-step); position:absolute; right:16px; bottom:-18px; color:rgba(var(--brand-rgb),.1); font:800 110px/1 Manrope,sans-serif; }
.flow-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; color:white; background:var(--brand); font-weight:800; }
.flow-card h3 { margin:26px 0 10px; font-size:22px; }.flow-card p { color:var(--muted); line-height:1.65; }
.feature-grid { display:grid; grid-template-columns:1.1fr .9fr; grid-template-rows:repeat(2,260px); gap:18px; }
.feature-card { position:relative; padding:34px; border:1px solid var(--line); border-radius:28px; background:var(--surface); overflow:hidden; }
.feature-card:first-child { grid-row:1 / 3; }
.feature-card h3 { margin:18px 0 10px; font-size:28px; }.feature-card p { max-width:420px; color:var(--muted); line-height:1.65; }
.feature-visual { position:absolute; right:-24px; bottom:-34px; width:220px; height:220px; border-radius:48px; transform:rotate(-8deg); background:linear-gradient(145deg,rgba(var(--brand-rgb),.18),rgba(var(--brand-rgb),.48)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.feature-card:first-child .feature-visual { width:300px; height:300px; }
.feature-shot { position:absolute; right:-18px; bottom:-60px; width:190px; height:412px; object-fit:cover; border:6px solid #222a40; border-radius:30px; box-shadow:0 22px 46px rgba(0,0,0,.2); transform:rotate(7deg); }
.feature-card:first-child .feature-shot { right:28px; bottom:-86px; width:238px; height:516px; transform:rotate(4deg); }
.theme-learnzy .feature-card p { max-width:calc(100% - 190px); }
.theme-learnzy .feature-card:first-child p { max-width:52%; }
.theme-placevu .feature-card p { max-width:calc(100% - 190px); }
.theme-placevu .feature-card:first-child p { max-width:52%; }
.cta { padding-bottom:110px; }
.cta-panel { position:relative; overflow:hidden; min-height:330px; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(230px,.75fr); align-items:center; gap:42px; padding:60px; border-radius:34px; color:white; background:linear-gradient(120deg,var(--brand),color-mix(in srgb,var(--brand) 64%,#111)); box-shadow:0 30px 80px rgba(var(--brand-rgb),.28); }
.cta-panel::before { content:""; position:absolute; width:440px; height:440px; right:-190px; top:-230px; border:75px solid rgba(255,255,255,.08); border-radius:50%; pointer-events:none; }
.cta-panel > * { position:relative; z-index:1; }
.cta-panel .eyebrow { color:rgba(255,255,255,.76); }
.cta-panel h2 { margin:10px 0 12px; font-size:clamp(34px,4vw,52px); letter-spacing:-.04em; }.cta-panel p { max-width:600px; margin:0; opacity:.78; }
.cta-panel .primary-button { color:var(--brand); background:#fff; box-shadow:none; white-space:nowrap; }
.cta-download { display:flex; align-items:center; justify-content:flex-end; gap:20px; }
.cta-app-icon,.cta-app-mark { width:88px; height:88px; flex:none; border-radius:22px; box-shadow:0 14px 34px rgba(0,0,0,.25); }
.cta-app-icon { display:block; object-fit:cover; background:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.55), 0 14px 34px rgba(0,0,0,.25); }
.cta-app-mark { display:grid; place-items:center; color:var(--brand); background:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.55), 0 14px 34px rgba(0,0,0,.25); font:800 38px/1 Manrope,sans-serif; }
.cta-notify-link { width:54px; height:54px; display:grid; place-items:center; flex:none; color:var(--brand); border:1px solid rgba(255,255,255,.68); border-radius:17px; background:#fff; box-shadow:0 14px 30px rgba(0,0,0,.14); font-size:23px; font-weight:800; transition:transform .25s,box-shadow .25s; }
.cta-notify-link:hover,.cta-notify-link:focus-visible { transform:translateY(-3px); box-shadow:0 18px 36px rgba(0,0,0,.2); outline:none; }
@media (prefers-reduced-motion:no-preference) {
  .cta-app-icon,.cta-app-mark { animation:ctaIconFloat 4.5s ease-in-out infinite; }
  @keyframes ctaIconFloat { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-8px) rotate(2deg); } }
}
footer { border-top:1px solid var(--line); }.footer { min-height:130px; display:flex; align-items:center; justify-content:space-between; gap:24px; color:var(--muted); font-size:14px; }.footer-links { display:flex; gap:22px; }.footer a:hover { color:var(--text); }

@media (max-width:900px) {
  .site-nav a:not(.nav-cta) { display:none; }
  .hero { grid-template-columns:1fr; padding-top:70px; gap:30px; text-align:center; }
  .hero-copy > p { margin-inline:auto; }.hero-actions { justify-content:center; }.benefits { text-align:left; }
  .hero-art { min-height:620px; }.flow-grid { grid-template-columns:1fr; }.feature-grid { grid-template-columns:1fr; grid-template-rows:auto; }.feature-card,.feature-card:first-child { min-height:340px; grid-row:auto; }.cta-panel { grid-template-columns:1fr; align-items:flex-start; }.cta-download { justify-content:flex-start; }
}
@media (max-width:600px) {
  .container { width:min(100% - 28px,1180px); }.site-header { top:10px; margin-top:10px; border-radius:19px; }.brand small { display:none; }.site-nav { display:none; }
  .hero { min-height:auto; padding-block:66px 40px; }.hero h1 { font-size:47px; }.hero-copy > p { font-size:16px; }.benefits { grid-template-columns:1fr; gap:14px; }.benefits div { padding:0 0 14px; border-bottom:1px solid var(--line); }
  .hero-art { min-height:520px; }.hero-orbit { width:410px; height:410px; }.phone { width:245px; height:490px; }.float-chip { font-size:11px; }.chip-one { right:-4px; top:84px; }.chip-two { left:-4px; bottom:78px; }
  .hero-gallery { height:520px; transform:scale(.82); }.hero-gallery-frame.is-left { left:30px; }.hero-gallery-frame.is-right { right:28px; }
  .feature-shot,.feature-card:first-child .feature-shot { right:-16px; bottom:-86px; width:170px; height:368px; }
  .section { padding-block:76px; }.section-head { margin-bottom:34px; }.flow-card { min-height:220px; }.cta-panel { min-height:0; padding:40px 28px; }.cta-app-icon,.cta-app-mark { width:76px; height:76px; border-radius:20px; }.footer { align-items:flex-start; flex-direction:column; padding-block:36px; }.footer-links { flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .hero-orbit,.cta-app-icon,.cta-app-mark { animation:none; } * { transition-duration:.01ms!important; } }