/* ==================================================== SMS WEON — Landing Page Styles Light + Dark theme via [data-theme] on ==================================================== */ /* ── CSS Variables — Light (default) ─────────────────── */ :root { --font-ui: "Manrope", sans-serif; --font-display: "Outfit", "Manrope", sans-serif; --bg: #f5f4ff; --fg: #12103a; --muted: #6b6890; --surface: rgba(255,255,255,0.72); --surface-strong: rgba(255,255,255,0.92); --border: rgba(110,90,200,0.14); --primary: #6f43f1; --primary-dim: rgba(111,67,241,0.12); --secondary: #18b4e8; --accent: #f04fa6; --grad-purple: linear-gradient(90deg,#6f43f1,#18b4e8); --grad-ai: linear-gradient(90deg,#6f43f1,#f04fa6); --grad-schools: linear-gradient(90deg,#6f43f1,#2f8be9); --grid-color: rgba(110,90,200,0.10); --glass-blur: 12px; --section-tint: rgba(111,67,241,0.04); --shadow: 0 20px 48px rgba(60,40,130,0.12); --shadow-lg: 0 32px 80px rgba(40,20,100,0.16); --card-bg: rgba(255,255,255,0.65); --card-strong: rgba(255,255,255,0.90); --card-border: rgba(110,90,200,0.15); } /* ── CSS Variables — Dark ─────────────────────────────── */ html[data-theme="dark"] { --bg: #090a1a; --fg: #eaecff; --muted: #8e94bf; --surface: rgba(18,22,52,0.70); --surface-strong: rgba(20,25,58,0.95); --border: rgba(150,165,255,0.14); --primary: #9f7dff; --primary-dim: rgba(159,125,255,0.14); --secondary: #3ed1ff; --accent: #ff6dc8; --grad-purple: linear-gradient(90deg,#9f7dff,#3ed1ff); --grad-ai: linear-gradient(90deg,#9f7dff,#ff6dc8); --grad-schools: linear-gradient(90deg,#9f7dff,#61b4ff); --grid-color: rgba(150,165,230,0.10); --section-tint: rgba(60,83,179,0.14); --shadow: 0 24px 60px rgba(3,6,28,0.50); --shadow-lg: 0 40px 90px rgba(2,4,20,0.60); --card-bg: rgba(18,22,50,0.68); --card-strong: rgba(20,26,58,0.96); --card-border: rgba(150,165,255,0.18); } /* ── Reset ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-ui); color: var(--fg); background: radial-gradient(circle at 8% 90%, rgba(112,174,255,0.38), rgba(112,174,255,0) 36%), radial-gradient(circle at 94% 88%, rgba(245,120,220,0.32), rgba(245,120,220,0) 36%), radial-gradient(circle at 56% -14%, rgba(140,105,250,0.20), rgba(140,105,250,0) 45%), var(--bg); line-height: 1.6; overflow-x: hidden; transition: background-color 0.28s ease, color 0.28s ease; } /* ── Background Decorations ─────────────────────────── */ .grid-bg { position: fixed; inset: 0; z-index: -3; background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); background-size: 42px 42px; } .bg-glow { position: fixed; z-index: -2; border-radius: 50%; filter: blur(90px); opacity: .5; pointer-events: none; } .bg-glow-one { width:520px; height:520px; background:rgba(140,195,255,.50); left:-180px; bottom:-180px; } .bg-glow-two { width:420px; height:420px; background:rgba(245,165,255,.45); right:-140px; bottom:-120px; } html[data-theme="dark"] .bg-glow-one { background:rgba(60,100,200,.22); } html[data-theme="dark"] .bg-glow-two { background:rgba(180,60,200,.18); } .aurora-wave { position:fixed; z-index:-1; pointer-events:none; filter:blur(72px); opacity:.40; transform:translateZ(0); } .aurora-wave-one { width:52vw; height:28vw; min-width:420px; min-height:220px; top:-8vw; right:-6vw; background:linear-gradient(120deg,rgba(105,94,255,.65),rgba(48,200,255,.42),rgba(245,100,198,.48)); animation:auroraDriftOne 16s ease-in-out infinite; } .aurora-wave-two { width:46vw; height:26vw; min-width:360px; min-height:200px; bottom:-10vw; left:-8vw; background:linear-gradient(120deg,rgba(80,235,200,.48),rgba(90,140,255,.42),rgba(228,118,245,.38)); animation:auroraDriftTwo 18s ease-in-out infinite; } html[data-theme="dark"] .aurora-wave-one { opacity:.30; } html[data-theme="dark"] .aurora-wave-two { opacity:.28; } /* ── Layout ─────────────────────────────────────────── */ .container { width: min(1340px, 93%); margin: 0 auto; } /* ── Navigation ─────────────────────────────────────── */ nav { position: sticky; top: 8px; z-index: 50; padding-top: 12px; } .nav-inner { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.45rem; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card-bg); backdrop-filter: blur(var(--glass-blur)); box-shadow: 0 10px 25px rgba(81,60,167,.08); } .nav-inner::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(120deg,rgba(112,76,255,.30),rgba(36,196,241,.18),rgba(237,84,189,.24)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .logo { text-decoration: none; color: #2a70d6; font-weight: 800; letter-spacing: .01em; display: flex; align-items: center; gap: .62rem; font-size: 1.02rem; } html[data-theme="dark"] .logo { color: #79b6ff; } .logo-icon { width:36px; height:36px; border-radius:11px; background:var(--grad-purple); color:#fff; display:inline-flex; align-items:center; justify-content:center; } .nav-links { list-style:none; display:flex; align-items:center; gap:1.9rem; } .nav-links a { text-decoration:none; color:var(--muted); font-size:.88rem; font-weight:700; transition:color .2s; } .nav-links a:hover { color:var(--primary); } .nav-actions { display:flex; align-items:center; gap:.65rem; } /* Theme toggle */ .mode-toggle { width:60px; height:28px; border:1px solid var(--card-border); border-radius:999px; background:var(--card-strong); cursor:pointer; padding:2px; position:relative; display:inline-flex; align-items:center; justify-content:space-between; } .mode-toggle .icon-moon, .mode-toggle .icon-sun { font-size:.76rem; color:var(--muted); z-index:1; padding:0 6px; } .mode-toggle .dot { position:absolute; width:22px; height:22px; border-radius:50%; left:3px; top:2px; background:var(--grad-purple); transition:transform .22s ease; } html[data-theme="dark"] .mode-toggle .dot { transform:translateX(31px); } /* Mobile menu */ .mobile-menu-btn { display:none; background:none; border:1px solid var(--card-border); border-radius:8px; width:36px; height:36px; font-size:1.1rem; color:var(--fg); cursor:pointer; align-items:center; justify-content:center; } .mobile-nav { display:none; flex-direction:column; gap:.5rem; padding:.75rem 1.45rem; background:var(--card-strong); border-radius:0 0 20px 20px; margin-top:2px; border:1px solid var(--card-border); border-top:0; } .mobile-nav a { text-decoration:none; color:var(--muted); font-size:.9rem; font-weight:700; padding:.4rem 0; border-bottom:1px solid var(--card-border); } .mobile-nav a:last-child { border-bottom:0; } .mobile-nav.open { display:flex; } /* ── Buttons ─────────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-size:.92rem; font-weight:800; border-radius:999px; padding:.62rem 1.3rem; transition:.25s ease; border:1px solid transparent; cursor:pointer; } .btn-ghost { color:var(--fg); background:var(--card-strong); border-color:var(--card-border); } .btn-primary { color:#fff; background:var(--grad-purple); box-shadow:0 10px 25px rgba(111,67,241,.30); } .btn-outline { color:var(--fg); border-color:var(--card-border); background:var(--card-bg); } .btn:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(100,65,210,.28); } .btn-lg { font-size:1.03rem; padding:.82rem 1.65rem; } /* ── Hero ────────────────────────────────────────────── */ .hero { text-align:center; padding:4.5rem 0 2rem; } .badge-glow { display:inline-flex; border-radius:999px; font-size:.78rem; font-weight:800; color:var(--primary); background:var(--primary-dim); border:1px solid color-mix(in srgb,var(--primary) 30%,transparent); padding:.42rem 1rem; margin-bottom:1.3rem; gap:.4rem; align-items:center; } h1 { font-family:var(--font-display); font-size:clamp(2.2rem,5.9vw,5.45rem); line-height:1.03; letter-spacing:-.02em; font-weight:800; margin-bottom:1.1rem; text-wrap:balance; } .hero-sub { margin:0 auto; max-width:62ch; font-size:1.1rem; color:var(--muted); } .text-grad-ai { background:var(--grad-ai); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .text-grad-schools { background:var(--grad-schools); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .hero-btns { margin-top:2.1rem; display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap; } .hero-stats { margin-top:3rem; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; } .stat-item { text-align:center; } .stat-val { display:block; font-size:2.2rem; font-weight:800; letter-spacing:-.02em; } .stat-item:nth-child(1) .stat-val { color:#3d77df; } .stat-item:nth-child(2) .stat-val { color:#f05f76; } .stat-item:nth-child(3) .stat-val { color:#17ae9d; } .stat-item:nth-child(4) .stat-val { color:#8855ee; } .stat-lbl { color:var(--muted); font-size:.85rem; font-weight:700; } /* Preview card */ .preview-wrap { margin:3.35rem auto 0; width:min(900px,100%); perspective:1200px; } .preview-float { animation:cardFloat 6.4s ease-in-out infinite; } .preview-img { position:relative; overflow:hidden; padding:1rem; border-radius:26px; border:1px solid var(--card-border); background:var(--card-bg); box-shadow:var(--shadow); transform-style:preserve-3d; } .tilt-card { will-change:transform; transition:transform .2s ease-out,box-shadow .2s ease-out; } .tilt-card:hover { box-shadow:var(--shadow-lg); } .preview-shell { background:var(--card-strong); border-radius:18px; border:1px solid var(--card-border); overflow:hidden; min-height:260px; display:grid; grid-template-columns:200px 1fr; } .preview-side { border-right:1px solid var(--card-border); background:linear-gradient(180deg,var(--primary-dim),transparent); padding:1rem; } .preview-brand { font-size:.72rem; font-weight:800; letter-spacing:.2em; color:var(--muted); margin-bottom:.9rem; } .preview-side ul { list-style:none; display:grid; gap:.35rem; } .preview-side li { font-size:.82rem; font-weight:700; color:var(--muted); padding:.42rem .55rem; border-radius:8px; display:flex; align-items:center; gap:.5rem; } .preview-side li.active { color:var(--primary); background:var(--primary-dim); } .preview-main { padding:1rem; display:grid; gap:.85rem; } .preview-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; } .preview-kpis div { border:1px solid var(--card-border); border-radius:10px; padding:.6rem; background:color-mix(in srgb,var(--card-strong) 88%,transparent); } .preview-kpis strong { display:block; color:var(--fg); font-size:1rem; } .preview-kpis span { font-size:.7rem; color:var(--muted); font-weight:700; } .preview-chart { border-radius:12px; border:1px solid var(--card-border); background:linear-gradient(180deg,var(--primary-dim),rgba(111,67,241,.02)); padding:.75rem .75rem .4rem; min-height:80px; display:flex; align-items:flex-end; } .preview-bars { display:flex; align-items:flex-end; gap:5px; width:100%; height:60px; } .preview-bar { flex:1; border-radius:4px 4px 0 0; background:var(--grad-purple); opacity:.6; min-height:6px; } /* ── Section shared ──────────────────────────────────── */ .boards,.features,.app-section,.modules,.architecture,.rbac,.api-layer,.automation, .ai-suite-section,.integrations-section,.pricing-section,.testimonials-section,.cta-section { padding: 7rem 0; } .section-label { font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; font-weight:800; color:var(--muted); text-align:center; margin-bottom:1.8rem; } .section-kicker { font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:var(--primary); margin-bottom:1rem; } .section-head { text-align:center; max-width:900px; margin:0 auto 3rem; } .section-head h2 { font-family:var(--font-display); font-size:clamp(2.1rem,4.2vw,4rem); line-height:1.15; margin-bottom:1rem; text-wrap:balance; } .section-head p { font-size:1.04rem; color:var(--muted); } /* Alternating section backgrounds */ .modules, .pricing-section { background:var(--section-tint); border-top:1px solid color-mix(in srgb,var(--primary) 18%,transparent); border-bottom:1px solid color-mix(in srgb,var(--primary) 18%,transparent); } .features, .app-section, .rbac, .api-layer, .integrations-section { background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.02)); } html[data-theme="dark"] .features, html[data-theme="dark"] .app-section, html[data-theme="dark"] .rbac, html[data-theme="dark"] .api-layer, html[data-theme="dark"] .integrations-section { background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)); } /* ── Boards ──────────────────────────────────────────── */ .board-grid { display:flex; justify-content:center; flex-wrap:wrap; gap:.72rem; } .board-chip { border-radius:999px; border:1px solid var(--card-border); background:var(--card-bg); padding:.55rem 1.1rem; font-size:.88rem; font-weight:800; display:inline-flex; align-items:center; gap:.52rem; } .board-chip.c-amber { color:#c68004; } html[data-theme="dark"] .board-chip.c-amber { color:#fbbf24; } .board-chip.c-green { color:#0c8c6a; } html[data-theme="dark"] .board-chip.c-green { color:#34d399; } .board-chip.c-cyan { color:#0892a8; } html[data-theme="dark"] .board-chip.c-cyan { color:#22d3ee; } .board-chip.c-pink { color:#c0347e; } html[data-theme="dark"] .board-chip.c-pink { color:#f472b6; } .board-chip.c-purple { color:#6b34d1; } html[data-theme="dark"] .board-chip.c-purple { color:#a78bfa; } /* ── Feature Cards ───────────────────────────────────── */ .feature-grid, .quick-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.35rem; } .feature-card, .quick-card { position:relative; overflow:hidden; border-radius:22px; border:1px solid var(--card-border); background:var(--card-bg); backdrop-filter:blur(var(--glass-blur)); padding:1.5rem; min-height:220px; box-shadow:0 10px 25px rgba(77,51,165,.06); transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease; } .feature-card::before,.quick-card::before { content:""; position:absolute; inset:-30% -40% auto auto; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(138,116,248,.15),rgba(138,116,248,0)); pointer-events:none; } .feature-card:hover,.quick-card:hover { transform:translateY(-7px); border-color:color-mix(in srgb,var(--primary) 45%,var(--card-border)); box-shadow:0 18px 38px rgba(63,41,138,.14); } .feat-icon,.quick-icon { width:46px; height:46px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:1rem; font-size:1.22rem; background:var(--primary-dim); color:var(--primary); } .f-ai { background:rgba(241,78,168,.16); color:#d238a4; } .f-saas { background:rgba(32,184,232,.16); color:#0895bf; } .f-safe { background:rgba(23,174,157,.16); color:#089684; } .f-mobile { background:rgba(236,164,20,.16); color:#d18d06; } .f-alert { background:rgba(242,82,176,.16); color:#d13ea3; } .f-report { background:rgba(123,70,228,.16); color:#6730d0; } html[data-theme="dark"] .f-ai { background:rgba(255,109,200,.14); color:#ff8ed4; } html[data-theme="dark"] .f-saas { background:rgba(62,209,255,.14); color:#67e0ff; } html[data-theme="dark"] .f-safe { background:rgba(52,211,153,.14); color:#6ee7b7; } html[data-theme="dark"] .f-mobile { background:rgba(252,211,77,.14); color:#fcd34d; } html[data-theme="dark"] .f-alert { background:rgba(255,109,200,.14); color:#ff8ed4; } html[data-theme="dark"] .f-report { background:rgba(167,139,250,.14); color:#c4b5fd; } .feature-card h3,.quick-card h3 { font-size:clamp(1rem,1.55vw,1.3rem); margin-bottom:.45rem; } .feature-card p,.quick-card p { color:var(--muted); font-size:.94rem; } /* ── Module Grid ─────────────────────────────────────── */ .module-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.15rem; } .module-card { position:relative; overflow:hidden; border-radius:20px; border:1px solid var(--card-border); background:var(--card-bg); backdrop-filter:blur(var(--glass-blur)); padding:1.15rem; min-height:200px; transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease; } .module-card::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(130deg,rgba(112,84,239,.22),rgba(30,184,233,.06),rgba(241,96,188,.18)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .module-card:hover { transform:translateY(-8px) scale(1.01); border-color:color-mix(in srgb,var(--primary) 35%,var(--card-border)); box-shadow:0 20px 36px rgba(62,36,142,.15); } .mod-num { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--primary); font-weight:800; margin-bottom:.5rem; } .mod-icon { width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:.65rem; } .m-cyan { background:rgba(32,184,232,.16); color:#0895bf; } .m-purple { background:rgba(123,70,228,.16); color:#6f43f1; } .m-green { background:rgba(23,174,157,.16); color:#079880; } .m-amber { background:rgba(236,164,20,.16); color:#d49105; } .m-pink { background:rgba(242,82,176,.16); color:#d641a7; } html[data-theme="dark"] .m-cyan { background:rgba(62,209,255,.14); color:#67e0ff; } html[data-theme="dark"] .m-purple { background:rgba(159,125,255,.14); color:#c4b5fd; } html[data-theme="dark"] .m-green { background:rgba(52,211,153,.14); color:#6ee7b7; } html[data-theme="dark"] .m-amber { background:rgba(252,211,77,.14); color:#fcd34d; } html[data-theme="dark"] .m-pink { background:rgba(255,109,200,.14); color:#ff8ed4; } .mod-title { font-size:1rem; font-weight:800; margin-bottom:.4rem; } .mod-desc { font-size:.86rem; color:var(--muted); } /* ── AI Suite Section ────────────────────────────────── */ .ai-suite-section { background:var(--section-tint); border-top:1px solid color-mix(in srgb,var(--primary) 18%,transparent); border-bottom:1px solid color-mix(in srgb,var(--primary) 18%,transparent); } .ai-privacy-bar { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-bottom:3.5rem; } .ai-privacy-item { display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:700; color:var(--muted); background:var(--card-bg); border:1px solid var(--card-border); border-radius:999px; padding:.42rem 1rem; } .ai-privacy-item i { color:var(--primary); } .ai-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; } .ai-feature-card { position:relative; border-radius:22px; border:1px solid var(--card-border); background:var(--card-bg); backdrop-filter:blur(var(--glass-blur)); padding:1.4rem; transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease; overflow:hidden; } .ai-feature-card:hover { transform:translateY(-7px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--primary) 40%,var(--card-border)); } .ai-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; } .ai-num { font-family:var(--font-display); font-size:1.4rem; font-weight:800; color:var(--primary); opacity:.35; } .ai-tier-badge { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; padding:.22rem .6rem; border-radius:999px; border:1px solid var(--card-border); color:var(--muted); } .ai-icon-wrap { width:44px; height:44px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:.9rem; } .ai-pink .ai-icon-wrap { background:rgba(241,78,168,.16); color:#d238a4; } .ai-cyan .ai-icon-wrap { background:rgba(32,184,232,.16); color:#0895bf; } .ai-green .ai-icon-wrap { background:rgba(23,174,157,.16); color:#089684; } .ai-amber .ai-icon-wrap { background:rgba(236,164,20,.16); color:#c48504; } .ai-purple .ai-icon-wrap { background:rgba(123,70,228,.16); color:#6f43f1; } html[data-theme="dark"] .ai-pink .ai-icon-wrap { background:rgba(255,109,200,.14); color:#ff8ed4; } html[data-theme="dark"] .ai-cyan .ai-icon-wrap { background:rgba(62,209,255,.14); color:#67e0ff; } html[data-theme="dark"] .ai-green .ai-icon-wrap { background:rgba(52,211,153,.14); color:#6ee7b7; } html[data-theme="dark"] .ai-amber .ai-icon-wrap { background:rgba(252,211,77,.14); color:#fcd34d; } html[data-theme="dark"] .ai-purple .ai-icon-wrap { background:rgba(159,125,255,.14); color:#c4b5fd; } .ai-feature-card h3 { font-size:1.08rem; margin-bottom:.4rem; } .ai-feature-card > p { color:var(--muted); font-size:.88rem; margin-bottom:1rem; } .ai-io { margin-top:.9rem; } .ai-io-label { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--primary); margin-bottom:.35rem; display:flex; align-items:center; gap:.35rem; } .ai-io-item { font-size:.8rem; color:var(--muted); padding:.18rem 0; padding-left:.75rem; position:relative; } .ai-io-item::before { content:"·"; position:absolute; left:0; color:var(--primary); } .ai-output { margin-top:.8rem; padding:.75rem; border-radius:10px; background:var(--primary-dim); border:1px solid color-mix(in srgb,var(--primary) 20%,transparent); } .ai-output-text { font-size:.8rem; color:var(--fg); line-height:1.5; } /* AI Tier Cards */ .ai-tier-grid { gap:1.25rem; } .ai-tier-card { border-radius:22px; padding:1.6rem; } .tier-icon-wrap { width:48px; height:48px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1rem; background:var(--primary-dim); color:var(--primary); } .tier-green .tier-icon-wrap { background:rgba(23,174,157,.16); color:#089684; } .tier-purple .tier-icon-wrap { background:rgba(123,70,228,.16); color:#6f43f1; } .tier-amber .tier-icon-wrap { background:rgba(236,164,20,.16); color:#c48504; } html[data-theme="dark"] .tier-green .tier-icon-wrap { background:rgba(52,211,153,.14); color:#6ee7b7; } html[data-theme="dark"] .tier-purple .tier-icon-wrap { background:rgba(159,125,255,.14); color:#c4b5fd; } html[data-theme="dark"] .tier-amber .tier-icon-wrap { background:rgba(252,211,77,.14); color:#fcd34d; } .tier-card { position:relative; overflow:hidden; background:var(--card-bg); border:1px solid var(--card-border); border-radius:20px; padding:1.45rem; transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease; } .tier-card.active { border-color:color-mix(in srgb,var(--primary) 55%,transparent); box-shadow:var(--shadow); } .tier-card:hover { transform:translateY(-6px); box-shadow:0 18px 36px rgba(60,34,142,.14); } .tier-card h3 { font-size:1.1rem; margin-bottom:.35rem; } .tier-price { color:var(--primary); font-size:1.05rem; font-weight:800; margin-bottom:.5rem; } .tier-card p { color:var(--muted); font-size:.9rem; margin-bottom:.8rem; } .tier-card ul { list-style:none; display:grid; gap:.3rem; } .tier-card li { font-size:.86rem; color:var(--fg); display:flex; align-items:center; gap:.4rem; } .tier-card li i { color:#19ba8a; flex-shrink:0; } /* ── Mobile Apps ─────────────────────────────────────── */ .apps-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; } .app-panel { border-radius:24px; border:1px solid var(--card-border); background:var(--card-bg); backdrop-filter:blur(var(--glass-blur)); padding:2rem; } .teacher-panel { border-color:color-mix(in srgb,#18b4e8 35%,var(--card-border)); } .parent-panel { border-color:color-mix(in srgb,#f04fa6 35%,var(--card-border)); } .app-panel-header { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.75rem; padding-bottom:1.25rem; border-bottom:1px solid var(--card-border); } .app-panel-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; } .teacher-panel .app-panel-icon { background:rgba(32,184,232,.16); color:#0895bf; } .parent-panel .app-panel-icon { background:rgba(241,78,168,.16); color:#d238a4; } html[data-theme="dark"] .teacher-panel .app-panel-icon { background:rgba(62,209,255,.14); color:#67e0ff; } html[data-theme="dark"] .parent-panel .app-panel-icon { background:rgba(255,109,200,.14); color:#ff8ed4; } .app-panel-header h3 { font-size:1.25rem; margin-bottom:.25rem; } .app-panel-header p { font-size:.85rem; color:var(--muted); } .app-features-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem; } .app-feat { display:flex; gap:.75rem; align-items:flex-start; } .app-feat > i { font-size:1.05rem; color:var(--primary); margin-top:.1rem; flex-shrink:0; } .app-feat strong { display:block; font-size:.88rem; margin-bottom:.2rem; } .app-feat p { font-size:.78rem; color:var(--muted); } .app-platform-tags { display:flex; flex-wrap:wrap; gap:.5rem; } .app-platform-tags span { font-size:.75rem; font-weight:700; color:var(--muted); background:var(--primary-dim); border:1px solid color-mix(in srgb,var(--primary) 20%,transparent); border-radius:999px; padding:.25rem .7rem; display:inline-flex; align-items:center; gap:.35rem; } /* ── RBAC ────────────────────────────────────────────── */ .role-groups-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; } .role-group-panel { border-radius:22px; border:1px solid var(--card-border); background:var(--card-bg); backdrop-filter:blur(var(--glass-blur)); padding:1.5rem; } .role-group-label { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; margin-bottom:1.25rem; display:flex; align-items:center; gap:.5rem; } .rg-purple .role-group-label { color:#7947da; } html[data-theme="dark"] .rg-purple .role-group-label { color:#a78bfa; } .rg-cyan .role-group-label { color:#0892a8; } html[data-theme="dark"] .rg-cyan .role-group-label { color:#22d3ee; } .rg-green .role-group-label { color:#0c8c6a; } html[data-theme="dark"] .rg-green .role-group-label { color:#34d399; } .rg-amber .role-group-label { color:#c68004; } html[data-theme="dark"] .rg-amber .role-group-label { color:#fbbf24; } .role-cards-col { display:grid; gap:.85rem; } .role-item { display:flex; gap:.85rem; align-items:flex-start; } .role-item-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; background:var(--primary-dim); color:var(--primary); } .role-item strong { display:block; font-size:.88rem; margin-bottom:.2rem; } .role-item p { font-size:.78rem; color:var(--muted); } /* ── Integrations ────────────────────────────────────── */ .integrations-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; } .integration-chip { display:flex; align-items:center; gap:.85rem; padding:1rem 1.1rem; border-radius:16px; border:1px solid var(--card-border); background:var(--card-bg); backdrop-filter:blur(var(--glass-blur)); transition:transform .25s ease,box-shadow .25s ease; } .integration-chip:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(60,40,130,.10); } .intg-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; background:var(--primary-dim); color:var(--primary); flex-shrink:0; } .integration-chip strong { display:block; font-size:.88rem; font-weight:700; } .integration-chip span { font-size:.72rem; color:var(--muted); font-weight:700; } /* ── API Layer ───────────────────────────────────────── */ .tier-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.15rem; } .api-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; } .api-card .api-head { display:flex; align-items:center; gap:.55rem; margin-bottom:.35rem; } .api-card .quick-icon { width:38px; height:38px; border-radius:10px; font-size:1rem; margin-bottom:0; } .api-card ul { margin-top:.65rem; list-style:none; display:grid; gap:.3rem; } .api-card li code { font-size:.78rem; color:var(--primary); background:var(--primary-dim); padding:.15rem .45rem; border-radius:5px; font-family:monospace; } /* ── Pricing ─────────────────────────────────────────── */ .pricing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.35rem; align-items:stretch; } .pricing-card { border-radius:24px; border:1px solid var(--card-border); background:var(--card-bg); backdrop-filter:blur(var(--glass-blur)); padding:2rem; position:relative; overflow:hidden; display:flex; flex-direction:column; transition:transform .3s ease,box-shadow .3s ease; } .pricing-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); } .pricing-featured { border-color:color-mix(in srgb,var(--primary) 55%,transparent); box-shadow:var(--shadow); } .pricing-badge { position:absolute; top:1.25rem; right:1.25rem; background:var(--grad-ai); color:#fff; font-size:.68rem; font-weight:800; padding:.25rem .7rem; border-radius:999px; } .pricing-name { font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:1rem; } .pricing-price { margin-bottom:.75rem; } .price-amount { display:block; font-family:var(--font-display); font-size:2.6rem; font-weight:800; letter-spacing:-.02em; } .price-cyan .price-amount { color:#0892a8; } html[data-theme="dark"] .price-cyan .price-amount { color:#22d3ee; } .price-purple .price-amount { color:var(--primary); } .price-amber .price-amount { color:#c68004; } html[data-theme="dark"] .price-amber .price-amount { color:#fbbf24; } .price-unit { font-size:.82rem; color:var(--muted); font-weight:700; } .pricing-desc { font-size:.88rem; color:var(--muted); margin-bottom:1.25rem; } .pricing-features { list-style:none; display:grid; gap:.55rem; margin-bottom:1.75rem; flex:1; } .pricing-features li { font-size:.86rem; display:flex; align-items:flex-start; gap:.5rem; } .pricing-features li i { color:#19ba8a; flex-shrink:0; margin-top:.15rem; font-size:.9rem; } .pricing-cta { width:100%; justify-content:center; } .pricing-note { text-align:center; font-size:.82rem; color:var(--muted); margin-top:2rem; display:flex; align-items:center; gap:.4rem; justify-content:center; flex-wrap:wrap; } .pricing-note a { color:var(--primary); } /* ── Testimonials ────────────────────────────────────── */ .testimonials-section { background:var(--section-tint); border-top:1px solid color-mix(in srgb,var(--primary) 18%,transparent); border-bottom:1px solid color-mix(in srgb,var(--primary) 18%,transparent); } .testimonials-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.35rem; } .testimonial-card { border-radius:22px; border:1px solid var(--card-border); background:var(--card-bg); backdrop-filter:blur(var(--glass-blur)); padding:1.75rem; display:flex; flex-direction:column; gap:1.25rem; transition:transform .28s ease; } .testimonial-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); } .testimonial-quote { font-size:2rem; color:var(--primary); opacity:.35; line-height:1; } .testimonial-text { font-size:.93rem; color:var(--fg); line-height:1.65; flex:1; } .testimonial-author { display:flex; align-items:center; gap:.85rem; } .testimonial-avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.88rem; font-weight:800; color:#fff; flex-shrink:0; } .av-purple { background:linear-gradient(135deg,#7c3aed,#a78bfa); } .av-cyan { background:linear-gradient(135deg,#0891b2,#22d3ee); } .av-green { background:linear-gradient(135deg,#047857,#34d399); } .testimonial-author strong { display:block; font-size:.88rem; } .testimonial-author span { font-size:.76rem; color:var(--muted); } /* ── Automation / NFR ────────────────────────────────── */ .nfr-strip { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:.65rem; margin-top:1.6rem; } .nfr-item { border:1px solid var(--card-border); border-radius:14px; padding:.7rem; text-align:center; background:var(--card-bg); } .nfr-item strong { font-family:var(--font-display); display:block; font-size:1.1rem; letter-spacing:-.01em; color:var(--primary); } .nfr-item span { font-size:.72rem; color:var(--muted); font-weight:700; } /* ── CTA ─────────────────────────────────────────────── */ .cta-section { padding:5rem 0; } .cta-card { position:relative; overflow:hidden; text-align:center; border-radius:32px; border:1px solid var(--card-border); background:var(--card-bg); backdrop-filter:blur(var(--glass-blur)); padding:5rem 2rem; box-shadow:var(--shadow-lg); } .cta-glow { position:absolute; inset:-60% -30%; border-radius:50%; background:radial-gradient(circle,var(--primary-dim),transparent 65%); pointer-events:none; } .cta-card .badge-glow { margin-bottom:1.5rem; } .cta-card h2 { font-family:var(--font-display); font-size:clamp(2rem,4vw,3.5rem); margin-bottom:1.1rem; } .cta-card p { font-size:1.05rem; color:var(--muted); max-width:50ch; margin:0 auto 2.25rem; } .cta-btns { display:flex; justify-content:center; gap:.75rem; flex-wrap:wrap; } /* ── Footer ──────────────────────────────────────────── */ .site-footer { padding:4rem 0 2rem; } .footer-grid { display:grid; grid-template-columns:350px 1fr; gap:4rem; margin-bottom:3rem; } .footer-brand-col p { font-size:.9rem; color:var(--muted); margin-bottom:1.25rem; max-width:28ch; } .footer-tags { display:flex; flex-wrap:wrap; gap:.4rem; } .footer-tags span { font-size:.72rem; font-weight:700; color:var(--primary); background:var(--primary-dim); border:1px solid color-mix(in srgb,var(--primary) 22%,transparent); border-radius:999px; padding:.2rem .6rem; } .footer-links-col { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; } .footer-link-group h4 { font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:.9rem; } .footer-link-group a { display:block; text-decoration:none; font-size:.88rem; color:var(--muted); margin-bottom:.5rem; transition:color .2s; } .footer-link-group a:hover { color:var(--primary); } .footer-bottom { border-top:1px solid var(--card-border); padding-top:1.5rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem; color:var(--muted); font-size:.84rem; } /* ── Animations ──────────────────────────────────────── */ .hero .badge-glow { animation:fadeUp .7s ease both; } h1 { animation:fadeUp .75s .08s ease both; } .hero-sub { animation:fadeUp .75s .18s ease both; } .hero-btns { animation:fadeUp .75s .28s ease both; } .hero-stats { animation:fadeUp .75s .38s ease both; } .preview-wrap { animation:fadeUp .85s .5s ease both; } .feature-card,.quick-card,.tier-card { animation:cardIn .7s ease both; } .feature-grid article:nth-child(2),.quick-grid article:nth-child(2),.tier-grid article:nth-child(2) { animation-delay:.08s; } .feature-grid article:nth-child(3),.quick-grid article:nth-child(3),.tier-grid article:nth-child(3) { animation-delay:.14s; } .feature-grid article:nth-child(4),.quick-grid article:nth-child(4) { animation-delay:.2s; } .section-head,.board-grid { animation:fadeUp .78s ease both; } @keyframes auroraDriftOne { 0%,100% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(-4vw,3vw,0) scale(1.08); } } @keyframes auroraDriftTwo { 0%,100% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(5vw,-2vw,0) scale(1.06); } } @keyframes cardFloat { 0%,100% { transform:translateY(0px); } 50% { transform:translateY(-10px); } } @keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } } @keyframes cardIn { from { opacity:0; transform:translateY(18px) scale(0.985); } to { opacity:1; transform:translateY(0) scale(1); } } /* ── Responsive ──────────────────────────────────────── */ @media (max-width:1200px) { .module-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .integrations-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .nfr-strip { grid-template-columns:repeat(4,minmax(0,1fr)); } } @media (max-width:1100px) { .feature-grid,.quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .ai-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .apps-grid { grid-template-columns:1fr; } .role-groups-grid { grid-template-columns:1fr 1fr; } .footer-grid { grid-template-columns:1fr; gap:2.5rem; } .footer-brand-col p { max-width:none; } .preview-shell { grid-template-columns:1fr; } .preview-side { border-right:0; border-bottom:1px solid var(--card-border); } .preview-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:900px) { .pricing-grid { grid-template-columns:1fr; max-width:440px; margin:0 auto; } .testimonials-grid { grid-template-columns:1fr; max-width:540px; margin:0 auto; } .api-grid { grid-template-columns:1fr; } .tier-grid { grid-template-columns:1fr 1fr; } } @media (max-width:860px) { .nav-links { display:none; } .mobile-menu-btn { display:inline-flex; } .hero { padding-top:2.8rem; } .hero-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .feature-grid,.quick-grid,.module-grid,.ai-feature-grid,.apps-grid { grid-template-columns:1fr; } .role-groups-grid { grid-template-columns:1fr; } .integrations-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .nfr-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } .tier-grid { grid-template-columns:1fr; } .footer-links-col { grid-template-columns:1fr 1fr; } .app-features-grid { grid-template-columns:1fr; } } @media (max-width:540px) { .nav-inner { padding:.65rem .9rem; } .logo span:last-child { display:none; } .btn { padding:.56rem .92rem; font-size:.84rem; } .mode-toggle { width:52px; height:26px; } html[data-theme="dark"] .mode-toggle .dot { transform:translateX(23px); } .aurora-wave { opacity:.25; } .integrations-grid { grid-template-columns:1fr 1fr; } .nfr-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } .footer-links-col { grid-template-columns:1fr; } } @media (prefers-reduced-motion: reduce) { .aurora-wave,.preview-float { animation:none; } .tilt-card { transition:none; } .hero .badge-glow,h1,.hero-sub,.hero-btns,.hero-stats,.preview-wrap,.feature-card,.quick-card,.module-card,.tier-card { animation:none; } } /* ══════════════════════════════════════════════════════ 3D DEVICE MOCKUPS & ANIMATION VISUALS ══════════════════════════════════════════════════════ */ /* ── 3D Keyframes ─────────────────────────────────────── */ @keyframes float3dLeft { 0%,100%{transform:rotateY(14deg) rotateX(3deg) translateY(0px);} 50%{transform:rotateY(14deg) rotateX(3deg) translateY(-18px);} } @keyframes float3dRight { 0%,100%{transform:rotateY(-14deg) rotateX(3deg) translateY(0px);} 50%{transform:rotateY(-14deg) rotateX(3deg) translateY(-22px);} } @keyframes floatUpDown { 0%,100%{transform:translateY(0px);} 50%{transform:translateY(-14px);} } @keyframes glowPulse { 0%,100%{box-shadow:0 0 28px rgba(111,67,241,.25),0 24px 64px rgba(0,0,0,.4);} 50%{box-shadow:0 0 52px rgba(111,67,241,.55),0 32px 80px rgba(0,0,0,.5);} } @keyframes dotBlink { 0%,100%{opacity:.4;transform:scale(1);} 50%{opacity:1;transform:scale(1.4);} } @keyframes neuralFlow { 0%{stroke-dashoffset:200;opacity:.12;} 50%{opacity:.85;} 100%{stroke-dashoffset:0;opacity:.12;} } @keyframes neuralPop { 0%,100%{opacity:.3;} 50%{opacity:1;} } @keyframes morphBlob { 0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;transform:scale(1) rotate(0deg);} 33%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%;transform:scale(1.06) rotate(120deg);} 66%{border-radius:50% 60% 30% 60%/30% 40% 70% 60%;transform:scale(.97) rotate(240deg);} } @keyframes spinSlow { from{transform:rotate(0deg);} to{transform:rotate(360deg);} } @keyframes orbitFloat { 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-10px) scale(1.04);} } @keyframes badgePop { 0%,100%{transform:translateY(0px) scale(1);} 50%{transform:translateY(-6px) scale(1.05);} } /* ── Hero Visual Stage ────────────────────────────────── */ .hero-visual-stage { display:flex; align-items:flex-end; justify-content:center; gap:1.75rem; margin-top:3.5rem; perspective:1100px; position:relative; } .hero-visual-stage::after { content:''; position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); width:60%; height:55px; background:radial-gradient(ellipse at center,rgba(111,67,241,.25),transparent 70%); filter:blur(18px); border-radius:50%; pointer-events:none; } .preview-wrap { margin-top:0; } /* ── Phone Wrapper ────────────────────────────────────── */ .hv-wrap { display:flex; flex-direction:column; align-items:center; position:relative; } .hv-wrap.hv-left { animation:float3dLeft 6.5s ease-in-out infinite; } .hv-wrap.hv-right { animation:float3dRight 7.2s ease-in-out infinite; animation-delay:-2.8s; } /* ── Phone Frame ──────────────────────────────────────── */ .hv-phone { width:150px; height:300px; border-radius:28px; border:2px solid rgba(150,140,255,.3); background:linear-gradient(150deg,#1a1b36,#0c0d1e); box-shadow:0 0 0 1px rgba(255,255,255,.05),0 24px 64px rgba(0,0,0,.55),0 6px 24px rgba(111,67,241,.22); position:relative; overflow:hidden; display:flex; flex-direction:column; animation:glowPulse 5s ease-in-out infinite; } html[data-theme="light"] .hv-phone { background:linear-gradient(150deg,#ffffff,#f2efff); border:2px solid rgba(111,67,241,.22); box-shadow:0 0 0 1px rgba(111,67,241,.06),0 24px 64px rgba(111,67,241,.16),0 6px 24px rgba(111,67,241,.1); } /* ── Phone Internals ──────────────────────────────────── */ .hv-notch { width:54px; height:11px; background:#0c0d1e; border-radius:0 0 10px 10px; margin:5px auto 0; position:relative; z-index:2; flex-shrink:0; } html[data-theme="light"] .hv-notch { background:#e5e0f8; } .hv-screen { padding:7px 8px; flex:1; display:flex; flex-direction:column; gap:4px; overflow:hidden; } .hv-status { display:flex; justify-content:space-between; font-size:6.5px; color:rgba(200,200,255,.4); padding:0 2px; flex-shrink:0; } html[data-theme="light"] .hv-status { color:rgba(60,40,120,.3); } .hv-topbar { border-radius:8px; padding:5px 7px; display:flex; align-items:center; gap:5px; flex-shrink:0; } .hv-topbar-teacher { background:linear-gradient(135deg,#18b4e8,#6f43f1); } .hv-topbar-parent { background:linear-gradient(135deg,#f04fa6,#6f43f1); } .hv-topbar-icon { width:16px; height:16px; background:rgba(255,255,255,.22); border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:8px; color:#fff; flex-shrink:0; } .hv-topbar-title { font-size:7.5px; font-weight:800; color:#fff; letter-spacing:.3px; } .hv-rows { display:flex; flex-direction:column; gap:3px; } .hv-row { background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.07); border-radius:6px; padding:4px 7px; display:flex; justify-content:space-between; align-items:center; } html[data-theme="light"] .hv-row { background:rgba(111,67,241,.055); border:1px solid rgba(111,67,241,.1); } .hv-row-label { font-size:6.5px; color:rgba(200,195,255,.65); font-weight:500; } html[data-theme="light"] .hv-row-label { color:var(--muted); } .hv-row-val { font-size:7.5px; font-weight:800; color:#3ed1ff; } .hv-row-val.c-pink { color:#ff8ed4; } .hv-row-val.c-green { color:#6ee7b7; } html[data-theme="light"] .hv-row-val { color:#0895bf; } html[data-theme="light"] .hv-row-val.c-pink { color:#d238a4; } html[data-theme="light"] .hv-row-val.c-green { color:#089680; } .hv-minichart { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:6px; padding:4px 7px; } html[data-theme="light"] .hv-minichart { background:rgba(111,67,241,.04); border:1px solid rgba(111,67,241,.07); } .hv-minichart-lbl { font-size:6px; color:rgba(200,195,255,.45); margin-bottom:3px; } html[data-theme="light"] .hv-minichart-lbl { color:var(--muted); } .hv-bars { display:flex; align-items:flex-end; gap:2px; height:26px; } .hv-bar { flex:1; border-radius:2px 2px 0 0; background:linear-gradient(to top,var(--primary),var(--secondary)); opacity:.8; } .hv-actions { display:flex; gap:3px; } .hv-btn { flex:1; background:rgba(111,67,241,.16); border:1px solid rgba(111,67,241,.28); border-radius:6px; padding:3px 2px; text-align:center; font-size:6.5px; color:var(--primary); font-weight:700; } .hv-home { width:38px; height:4px; background:rgba(255,255,255,.2); border-radius:2px; margin:5px auto 4px; flex-shrink:0; } html[data-theme="light"] .hv-home { background:rgba(111,67,241,.18); } .hv-label { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:center; margin-top:.85rem; } /* ── Floating Badge ────────────────────────────────────── */ .hv-badge { position:absolute; top:-10px; right:-6px; background:var(--grad-ai); color:#fff; font-size:7px; font-weight:800; padding:3px 9px; border-radius:20px; box-shadow:0 4px 14px rgba(111,67,241,.45); animation:badgePop 4s ease-in-out infinite; white-space:nowrap; z-index:5; } .hv-badge.d2 { animation-delay:-1.6s; } .hv-badge.d3 { animation-delay:-3.2s; } /* ── Features 3D Blobs ────────────────────────────────── */ .feat-blobs { position:relative; height:90px; margin:-1rem auto 1.5rem; max-width:900px; pointer-events:none; overflow:visible; } .fblob { position:absolute; border-radius:50%; } .fblob-1 { width:62px; height:62px; left:7%; top:10%; background:linear-gradient(135deg,#6f43f1,#18b4e8); border-radius:40% 60% 60% 40%/40% 40% 60% 60%; animation:morphBlob 9s ease-in-out infinite,orbitFloat 6.5s ease-in-out infinite; box-shadow:0 12px 32px rgba(111,67,241,.38); } .fblob-2 { width:46px; height:46px; right:8%; top:8%; background:linear-gradient(135deg,#f04fa6,#6f43f1); border-radius:50%; animation:orbitFloat 7s ease-in-out infinite; animation-delay:-3.1s; box-shadow:0 10px 28px rgba(240,79,166,.38); } .fblob-3 { width:34px; height:34px; left:27%; bottom:0; background:linear-gradient(135deg,#18b4e8,#6f43f1); border-radius:50%; animation:orbitFloat 9s ease-in-out infinite; animation-delay:-5.2s; box-shadow:0 8px 22px rgba(24,180,232,.35); } .fblob-4 { width:28px; height:28px; right:27%; top:28%; background:linear-gradient(135deg,#f04fa6,#18b4e8); border-radius:50% 20% 50% 20%; animation:spinSlow 10s linear infinite,orbitFloat 8s ease-in-out infinite; animation-delay:-4s; box-shadow:0 6px 18px rgba(240,79,166,.32); } .fblob-5 { width:20px; height:20px; left:53%; top:5%; background:linear-gradient(135deg,#6f43f1,#f04fa6); border-radius:50%; animation:orbitFloat 5.5s ease-in-out infinite; animation-delay:-1.5s; box-shadow:0 5px 14px rgba(111,67,241,.38); } .fblob-6 { width:16px; height:16px; left:42%; top:55%; background:linear-gradient(135deg,#18b4e8,#f04fa6); border-radius:50%; animation:orbitFloat 6s ease-in-out infinite; animation-delay:-2.4s; box-shadow:0 4px 12px rgba(24,180,232,.32); } /* ── AI Neural Network ────────────────────────────────── */ .ai-neural-wrap { display:flex; justify-content:center; margin:2rem 0 3rem; position:relative; } .ai-neural-svg { width:min(640px,92vw); height:auto; overflow:visible; filter:drop-shadow(0 0 16px rgba(111,67,241,.26)); } .nn-line { stroke-dasharray:200; animation:neuralFlow 3.5s ease-in-out infinite; } .nn-line:nth-child(3n+1) { animation-delay:0s; } .nn-line:nth-child(3n+2) { animation-delay:-.9s; } .nn-line:nth-child(3n) { animation-delay:-1.8s; } .nn-node { animation:neuralPop 2.8s ease-in-out infinite; } .nn-node:nth-child(2n+1) { animation-delay:0s; } .nn-node:nth-child(2n) { animation-delay:-.7s; } .nn-node:nth-child(5n) { animation-delay:-2.1s; } /* ── App Phone Showcase ────────────────────────────────── */ .app-phones-showcase { display:flex; justify-content:center; align-items:flex-end; gap:3rem; margin-top:3.5rem; perspective:900px; } .ap-wrap { display:flex; flex-direction:column; align-items:center; } .ap-wrap.left-wrap { animation:float3dLeft 7s ease-in-out infinite; } .ap-wrap.right-wrap { animation:float3dRight 7.8s ease-in-out infinite; animation-delay:-3s; } .ap-phone { width:162px; height:336px; border-radius:30px; display:flex; flex-direction:column; overflow:hidden; } .ap-teacher { background:linear-gradient(155deg,#0e1a2e,#091320); border:2px solid rgba(24,180,232,.35); box-shadow:0 0 0 1px rgba(24,180,232,.08),0 28px 72px rgba(24,180,232,.28),inset 0 1px 0 rgba(24,180,232,.12); } .ap-parent { background:linear-gradient(155deg,#1e0e22,#130a18); border:2px solid rgba(240,79,166,.35); box-shadow:0 0 0 1px rgba(240,79,166,.08),0 28px 72px rgba(240,79,166,.28),inset 0 1px 0 rgba(240,79,166,.12); } html[data-theme="light"] .ap-teacher { background:linear-gradient(155deg,#edfaff,#d8f2fc); border-color:rgba(24,180,232,.3); box-shadow:0 28px 72px rgba(24,180,232,.14); } html[data-theme="light"] .ap-parent { background:linear-gradient(155deg,#fff0f8,#fcdeed); border-color:rgba(240,79,166,.3); box-shadow:0 28px 72px rgba(240,79,166,.14); } .ap-notch { width:52px; height:10px; border-radius:0 0 10px 10px; margin:5px auto 0; flex-shrink:0; } .ap-teacher .ap-notch { background:#091320; } .ap-parent .ap-notch { background:#130a18; } html[data-theme="light"] .ap-teacher .ap-notch { background:#c8eef9; } html[data-theme="light"] .ap-parent .ap-notch { background:#f9dce9; } .ap-screen { flex:1; padding:7px 9px; display:flex; flex-direction:column; gap:5px; overflow:hidden; } .ap-header { border-radius:9px; padding:7px 9px; display:flex; align-items:center; gap:6px; } .ap-teacher .ap-header { background:linear-gradient(135deg,#18b4e8,#6f43f1); } .ap-parent .ap-header { background:linear-gradient(135deg,#f04fa6,#9f43f1); } .ap-header-icon { width:20px; height:20px; background:rgba(255,255,255,.2); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:10px; color:#fff; } .ap-header-title { font-size:8.5px; font-weight:800; color:#fff; line-height:1.2; } .ap-header-sub { font-size:6.5px; color:rgba(255,255,255,.7); } .ap-kpis { display:grid; grid-template-columns:1fr 1fr; gap:4px; } .ap-kpi { border-radius:8px; padding:6px 7px; text-align:center; } .ap-teacher .ap-kpi { background:rgba(24,180,232,.1); border:1px solid rgba(24,180,232,.16); } .ap-parent .ap-kpi { background:rgba(240,79,166,.1); border:1px solid rgba(240,79,166,.16); } html[data-theme="light"] .ap-teacher .ap-kpi { background:rgba(24,180,232,.07); border-color:rgba(24,180,232,.14); } html[data-theme="light"] .ap-parent .ap-kpi { background:rgba(240,79,166,.07); border-color:rgba(240,79,166,.14); } .ap-kpi-val { display:block; font-size:12px; font-weight:800; line-height:1.2; } .ap-teacher .ap-kpi-val { color:#3ed1ff; } .ap-parent .ap-kpi-val { color:#ff8ed4; } html[data-theme="light"] .ap-teacher .ap-kpi-val { color:#0895bf; } html[data-theme="light"] .ap-parent .ap-kpi-val { color:#d238a4; } .ap-kpi-lbl { display:block; font-size:6px; color:rgba(200,200,255,.5); margin-top:1px; } html[data-theme="light"] .ap-kpi-lbl { color:var(--muted); } .ap-rows { display:flex; flex-direction:column; gap:3px; } .ap-row { border-radius:6px; padding:4px 8px; display:flex; justify-content:space-between; align-items:center; } .ap-teacher .ap-row { background:rgba(24,180,232,.07); border:1px solid rgba(24,180,232,.12); } .ap-parent .ap-row { background:rgba(240,79,166,.07); border:1px solid rgba(240,79,166,.12); } .ap-row-label { font-size:6.5px; color:rgba(200,195,255,.6); } html[data-theme="light"] .ap-row-label { color:var(--muted); } .ap-row-val { font-size:7px; font-weight:700; } .ap-teacher .ap-row-val { color:#3ed1ff; } .ap-parent .ap-row-val { color:#ff8ed4; } html[data-theme="light"] .ap-teacher .ap-row-val { color:#0895bf; } html[data-theme="light"] .ap-parent .ap-row-val { color:#d238a4; } .ap-chart { border-radius:8px; padding:5px 8px; } .ap-teacher .ap-chart { background:rgba(24,180,232,.06); border:1px solid rgba(24,180,232,.1); } .ap-parent .ap-chart { background:rgba(240,79,166,.06); border:1px solid rgba(240,79,166,.1); } .ap-chart-lbl { font-size:6px; margin-bottom:4px; } .ap-teacher .ap-chart-lbl { color:rgba(62,209,255,.55); } .ap-parent .ap-chart-lbl { color:rgba(255,142,212,.55); } html[data-theme="light"] .ap-chart-lbl { color:var(--muted); } .ap-bars { display:flex; align-items:flex-end; gap:2px; height:30px; } .ap-b { flex:1; border-radius:2px 2px 0 0; opacity:.85; } .ap-teacher .ap-b { background:linear-gradient(to top,#18b4e8,#6f43f1); } .ap-parent .ap-b { background:linear-gradient(to top,#f04fa6,#9f43f1); } .ap-pill { border-radius:20px; padding:4px 8px; display:flex; align-items:center; gap:5px; font-size:7px; font-weight:700; } .ap-teacher .ap-pill { background:rgba(24,180,232,.12); border:1px solid rgba(24,180,232,.22); color:#3ed1ff; } .ap-parent .ap-pill { background:rgba(240,79,166,.12); border:1px solid rgba(240,79,166,.22); color:#ff8ed4; } html[data-theme="light"] .ap-teacher .ap-pill { color:#0895bf; } html[data-theme="light"] .ap-parent .ap-pill { color:#d238a4; } .ap-dot { width:5px; height:5px; border-radius:50%; animation:dotBlink 2s ease-in-out infinite; flex-shrink:0; } .ap-teacher .ap-dot { background:#3ed1ff; } .ap-parent .ap-dot { background:#ff8ed4; } .ap-home { width:38px; height:4px; border-radius:2px; margin:5px auto 4px; flex-shrink:0; } .ap-teacher .ap-home { background:rgba(24,180,232,.25); } .ap-parent .ap-home { background:rgba(240,79,166,.25); } .ap-label { text-align:center; margin-top:.9rem; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } /* ── CTA Orbs ─────────────────────────────────────────── */ .cta-orbs { position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; z-index:0; } .cta-card > *:not(.cta-orbs) { position:relative; z-index:1; } .cta-orb { position:absolute; border-radius:50%; animation:orbitFloat 8s ease-in-out infinite; } .cta-orb-1 { width:140px; height:140px; top:-50px; left:5%; background:radial-gradient(circle,rgba(111,67,241,.36),transparent); filter:blur(24px); animation-delay:0s; } .cta-orb-2 { width:100px; height:100px; bottom:-30px; right:6%; background:radial-gradient(circle,rgba(240,79,166,.34),transparent); filter:blur(20px); animation-delay:-3.2s; } .cta-orb-3 { width:80px; height:80px; top:30%; right:20%; background:radial-gradient(circle,rgba(24,180,232,.30),transparent); filter:blur(16px); animation-delay:-1.6s; } .cta-orb-4 { width:55px; height:55px; bottom:25%; left:18%; background:radial-gradient(circle,rgba(111,67,241,.26),transparent); filter:blur(12px); animation-delay:-4.8s; } .cta-orb-5 { width:45px; height:45px; top:15%; left:40%; background:radial-gradient(circle,rgba(240,79,166,.22),transparent); filter:blur(10px); animation-delay:-2.4s; } /* ── Tech Orb Strip (Integrations) ────────────────────── */ .tech-orb-strip { display:flex; justify-content:center; flex-wrap:wrap; gap:1.25rem; margin-top:3rem; } .tech-orb { width:70px; height:70px; border-radius:50%; background:var(--card-bg); border:1px solid var(--card-border); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; font-size:1.55rem; color:var(--primary); box-shadow:0 8px 24px rgba(111,67,241,.12); animation:orbitFloat 6s ease-in-out infinite; transition:transform .3s ease,box-shadow .3s ease; position:relative; flex-direction:column; gap:3px; } .tech-orb:hover { transform:translateY(-8px) scale(1.1); box-shadow:0 20px 42px rgba(111,67,241,.26); } .tech-orb:nth-child(2) { animation-delay:-.9s; color:#18b4e8; } .tech-orb:nth-child(3) { animation-delay:-1.8s; color:#f04fa6; } .tech-orb:nth-child(4) { animation-delay:-2.7s; color:#22c55e; } .tech-orb:nth-child(5) { animation-delay:-3.6s; color:#f59e0b; } .tech-orb:nth-child(6) { animation-delay:-4.5s; color:#6f43f1; } .tech-orb:nth-child(7) { animation-delay:-1.2s; color:#18b4e8; } .tech-orb-lbl { font-size:.52rem; font-weight:700; color:var(--muted); text-align:center; margin-top:.2rem; line-height:1.1; position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); white-space:nowrap; } /* ── Responsive additions ─────────────────────────────── */ @media (max-width:1100px) { .hero-visual-stage { gap:1.25rem; } .hv-phone { width:130px; height:270px; } } @media (max-width:860px) { .hv-wrap { display:none; } .preview-wrap { margin-top:0; } .app-phones-showcase { gap:1.5rem; } .ap-phone { width:138px; height:286px; } .feat-blobs { height:60px; } .feat-blobs .fblob-3,.feat-blobs .fblob-5,.feat-blobs .fblob-6 { display:none; } } @media (max-width:540px) { .app-phones-showcase { gap:1rem; } .ap-phone { width:118px; height:248px; } .tech-orb-strip { gap:.75rem; } .tech-orb { width:56px; height:56px; font-size:1.25rem; } } @media (prefers-reduced-motion:reduce) { .hv-wrap,.hv-badge,.fblob,.cta-orb,.tech-orb,.ap-wrap,.nn-node,.nn-line,.ap-dot,.dotBlink { animation:none !important; } }