:root{ /* ---- dark premium · locked palette ---- */ --bg:#000000; --bg-2:#0a0a0a; --card:#0e0913; --card-2:#130c1a; --glass:rgba(14,14,16,.62); --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13); --text:#f7f2f9; --muted:rgba(247,242,249,.62); --muted-2:rgba(247,242,249,.42); /* glow family (LIGHT effects only) */ --pink:#e84fc9; /* glow bright — arcs, strips, accents */ --pink-hi:#ff5adc; /* glow hot — cores, crescents, highlights */ --pink-mid:#c41a9e; /* glow mid */ --mag:#840f68; /* brand magenta — solid */ --mag-d:#5e0a4b; --lime:#b8f24a; /* prices / positive */ --glow-pink:rgba(196,26,158,.55); /* glow mid */ --glow-soft:rgba(160,24,128,.30); /* glow halo */ --grad-mag:linear-gradient(165deg,#ff5adc 0%, var(--pink) 36%, var(--mag) 100%); --logo:'Comfortaa',system-ui,sans-serif; --mono:'IBM Plex Mono','SF Mono',ui-monospace,monospace; --shadow:0 40px 120px rgba(0,0,0,.6); --radius:28px; --radius-lg:34px; --radius-sm:18px; --container:min(2000px, calc(100vw - 96px)); /* theme-able chrome — dark defaults; [data-theme="light"] overrides below */ --body-bg: radial-gradient(560px 340px at 84% 11%, rgba(196,26,158,.10), transparent 64%), radial-gradient(680px 420px at 50% 60%, rgba(160,24,128,.07), transparent 62%), radial-gradient(520px 440px at 5% 99%, rgba(196,26,158,.10), transparent 60%), #000; --nav-bg:linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.40)); --nav-border:rgba(255,255,255,.05); --surface:rgba(255,255,255,.03); --surface-2:rgba(255,255,255,.045); --hairline:rgba(255,255,255,.08); --hairline-2:rgba(255,255,255,.10); --heading:#ffffff; --toggle-bg:rgba(255,255,255,.05); --toggle-border:rgba(255,255,255,.14); } /* ---- light theme (toggled via data-theme on , persisted in localStorage) ---- */ html[data-theme="light"]{ --text:#1b1022; --muted:rgba(27,16,34,.64); --muted-2:rgba(27,16,34,.46); --glass:rgba(255,255,255,.72); --body-bg: radial-gradient(620px 380px at 86% 6%, rgba(196,26,158,.13), transparent 60%), radial-gradient(720px 460px at 48% 56%, rgba(160,24,128,.07), transparent 58%), radial-gradient(560px 460px at 3% 100%, rgba(196,26,158,.11), transparent 56%), #f4eef8; --nav-bg:linear-gradient(180deg, rgba(247,242,250,.92), rgba(247,242,250,.55)); --nav-border:rgba(27,16,34,.09); --surface:rgba(255,255,255,.74); --surface-2:rgba(24,14,32,.05); --hairline:rgba(27,16,34,.12); --hairline-2:rgba(27,16,34,.12); --heading:#180e20; --toggle-bg:rgba(27,16,34,.06); --toggle-border:rgba(27,16,34,.16); } /* always-dark showcase panels: re-declare the palette locally so their light-on-dark text stays correct even when the page is in light mode */ .dashboard, .cta, .map-canvas, .hiw-cta, .plans-cta{ --text:#f7f2f9; --muted:rgba(247,242,249,.62); --muted-2:rgba(247,242,249,.42); --heading:#ffffff; --surface:rgba(255,255,255,.05); --hairline:rgba(255,255,255,.08); --hairline-2:rgba(255,255,255,.10); } /* in light mode, give the map a dark backdrop so the dotted earth still reads (mask fades the edges into the page) */ html[data-theme="light"] .map-canvas{background:radial-gradient(125% 140% at 50% 40%, #18091e 0%, #0a0510 72%)} *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif; color:var(--text); background:var(--body-bg); background-attachment:fixed; transition:color .25s ease; min-height:100vh; overflow-x:hidden; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} svg{display:block} /* ICONS — Lucide (ISC license, github.com/lucide-icons/lucide), inlined as line SVGs. Hard size cap so an icon can NEVER blow up the layout again: size is driven by the container's font-size via 1em; every inline also carries width/height attrs. */ svg.icon{width:1em;height:1em;flex:0 0 auto;stroke-width:2;display:block} .container{width:var(--container);margin:0 auto} .topbar{ position:sticky; top:0; z-index:50; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); background:var(--nav-bg); border-bottom:1px solid var(--nav-border); } .nav{ width:var(--container); margin:0 auto; min-height:84px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; } .brand{display:inline-flex;align-items:center;gap:9px;line-height:1;justify-self:start} .brand-word{font-family:var(--logo);font-weight:700;font-size:1.55rem;letter-spacing:-.02em;color:var(--heading)} .nav-links{display:flex;gap:36px;color:var(--muted);font-weight:500;font-size:.96rem;justify-self:center} .nav-links a{transition:.24s ease} .nav-links a:hover{color:var(--text)} .nav-links a.active{color:var(--heading);text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:7px;text-decoration-thickness:2px} /* Company dropdown */ .nav-dd{position:relative;display:inline-flex} .nav-company{background:none;border:none;font:inherit;font-size:.96rem;font-weight:500;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:0;transition:.24s ease} .nav-company:hover{color:var(--text)} .nav-company svg{width:13px;height:13px;opacity:.75;transition:transform .2s ease} .nav-dd.open .nav-company{color:var(--text)} .nav-dd.open .nav-company svg{transform:rotate(180deg)} .nav-dd-menu{position:absolute;top:calc(100% + 12px);left:50%;min-width:172px;padding:7px;border-radius:14px; background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); box-shadow:inset 0 0 0 1px var(--hairline), 0 22px 54px -22px rgba(0,0,0,.7); opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(-6px);transition:opacity .18s ease, transform .18s ease;z-index:60} .nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)} .nav-dd-menu a{display:block;padding:9px 13px;border-radius:9px;font-size:.92rem;font-weight:500;color:var(--muted);transition:.16s ease} .nav-dd-menu a:hover{color:var(--text);background:rgba(232,79,201,.12)} .nav-actions{display:flex;gap:13px;align-items:center;justify-self:end} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; border-radius:999px;padding:12px 22px;font-weight:600;font-size:.96rem; transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, filter .16s ease; cursor:pointer;white-space:nowrap;border:none; } .btn:hover{transform:translateY(-1px)} .btn-outline{background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline);color:var(--text)} .btn-outline:hover{filter:brightness(1.18)} .btn-primary{background:var(--grad-mag);color:#fff;box-shadow:0 12px 30px -8px var(--glow-pink)} .btn-primary:hover{filter:brightness(1.08);box-shadow:0 16px 40px -8px var(--glow-pink)} /* theme toggle — circular sun/moon button, rightmost in the nav */ .theme-toggle{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;background:var(--toggle-bg);box-shadow:inset 0 0 0 1px var(--toggle-border);color:var(--text);font-size:18px;transition:transform .2s ease, filter .16s ease} .theme-toggle:hover{transform:translateY(-1px);filter:brightness(1.2)} .theme-toggle .ic-sun{display:none} html[data-theme="light"] .theme-toggle .ic-sun{display:block} html[data-theme="light"] .theme-toggle .ic-moon{display:none} main{padding:30px 0 0} .hero{ display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;padding-top:18px; } .hero-copy{padding-top:0;position:relative;z-index:2} .hero-title{ font-size:clamp(3rem, 4.2vw, 4.9rem);line-height:1.04;letter-spacing:-.035em; margin:0;max-width:none;color:var(--heading);font-weight:700; } .hero-title span{display:block;white-space:nowrap} .hero-sub{display:none} .hero-title .accent{ color:var(--pink); text-shadow:0 0 32px rgba(232,79,201,.55), 0 0 10px rgba(232,79,201,.4); } .request-box{ width:min(560px,100%);margin-top:30px;display:flex;align-items:center;gap:12px; padding:11px 11px 11px 22px;border-radius:20px; background:var(--glass); box-shadow:inset 0 0 0 1px var(--hairline), 0 18px 50px -20px rgba(0,0,0,.45); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); transition:box-shadow .2s ease; } .request-box:focus-within{box-shadow:inset 0 0 0 1px var(--pink), 0 0 0 4px rgba(232,79,201,.16), 0 18px 50px -20px rgba(0,0,0,.7)} .request-box input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:1.1rem;font-weight:500;min-width:0} .request-box input::placeholder{color:var(--muted-2)} .request-btn{ width:52px;height:52px;border-radius:50%;border:none;color:#fff;cursor:pointer;display:grid;place-items:center;font-size:22px; background:radial-gradient(circle at 36% 30%, #ff5adc 0, var(--pink) 44%, var(--mag) 100%); box-shadow:0 10px 26px -6px var(--glow-pink), inset 0 0 0 1px rgba(255,255,255,.18); transition:.22s cubic-bezier(.34,1.56,.64,1); } .request-btn:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.06)} .example{margin-top:14px;padding-left:4px;font-size:.9rem;color:var(--muted);display:flex;align-items:center;gap:7px} .example svg{color:var(--pink)} .example b{color:var(--pink);font-weight:600} .mini-pills{display:flex;flex-wrap:wrap;gap:13px;margin-top:38px} .pill{ padding:13px 17px;min-width:140px;border-radius:16px; background:var(--glass);box-shadow:inset 0 0 0 1px var(--hairline); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } .pill-title{font-size:.96rem;font-weight:700;letter-spacing:-.02em;color:var(--text);display:flex;align-items:center;gap:10px} .pill-title .i{ width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;font-size:16px; background:rgba(232,79,201,.14);color:var(--pink-hi); box-shadow:inset 0 0 0 1px rgba(232,79,201,.3), 0 0 14px -2px var(--glow-soft); } .pill-sub{margin-top:6px;color:var(--muted);font-size:.86rem} /* ---------------- dashboard panel (flat, upright) ---------------- */ .dashboard-wrap{position:relative} .dashboard-glow{ position:absolute;left:50%;transform:translateX(-50%); width:82%;height:120px;bottom:-48px;pointer-events:none; background:radial-gradient(ellipse, rgba(196,26,158,.5) 0%, rgba(160,24,128,.18) 45%, transparent 72%); filter:blur(38px); } .dashboard{ position:relative;width:100%;padding:18px;border-radius:18px;font-size:13px; background:linear-gradient(160deg, #100c14, #0a070d); box-shadow:0 0 0 1px rgba(196,26,158,.28), 0 30px 90px -34px rgba(196,26,158,.55), 0 0 60px -10px var(--glow-soft); } .dash-grid{display:grid;grid-template-columns:44px 1fr;gap:16px} .side-rail{ border-radius:14px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:8px; } .rail-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--muted-2);transition:.2s ease;font-size:17px} .rail-icon:hover{color:var(--text);background:rgba(255,255,255,.05)} .rail-icon.active{color:#fff;background:var(--grad-mag);box-shadow:0 6px 16px -6px var(--glow-pink)} .dash-main{display:flex;flex-direction:column;gap:14px} .dash-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .dash-lr{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:.95rem;color:var(--text)} .live-tag{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;color:var(--lime)} .live-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px 1px rgba(184,242,74,.85)} .sample-pill{font-size:.66rem;font-weight:700;letter-spacing:.03em;padding:5px 11px;border-radius:999px;background:rgba(232,79,201,.16);color:var(--pink-hi);box-shadow:inset 0 0 0 1px rgba(232,79,201,.28)} .dash-search{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:11px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)} .dash-search .ds-ic{color:var(--pink-hi);display:flex;font-size:15px} .dash-search .ds-q{flex:1;font-size:.85rem;color:var(--text);font-weight:500} .dash-search .ds-prog{font-size:.76rem;color:var(--muted);white-space:nowrap} .dash-search .ds-prog strong{font-family:var(--mono);color:var(--text);font-weight:600;margin-left:4px} .progress-bar{height:5px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;position:relative;margin-top:-6px} .progress-fill{width:63%;height:100%;border-radius:999px;background:linear-gradient(90deg, var(--mag), var(--pink) 70%, var(--pink-hi));box-shadow:0 0 12px var(--glow-pink);background-size:200% 100%;animation:progressShimmer 2.8s linear infinite} .dash-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:9px} .dchip{border-radius:11px;padding:11px 11px 10px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} .dc-t{font-size:.7rem;font-weight:600;color:var(--text);line-height:1.25;min-height:2.5em} .dc-s{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:.68rem;font-weight:700} .dc-s .dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor} .dc-s.live,.dc-s.active{color:var(--lime)} .dc-s.wait{color:#ffbf78} .dc-s.next{color:rgba(247,242,249,.5)} .dash-lower{display:grid;grid-template-columns:.92fr 1.08fr;gap:12px;align-items:stretch} .dash-card{border-radius:14px;background:rgba(255,255,255,.028);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);padding:14px} .robot-card{display:flex;flex-direction:column} .rc-title{font-size:.74rem;font-weight:700;color:var(--muted);margin-bottom:6px} .robot-visual{ flex:1;border-radius:12px;min-height:180px;position:relative;overflow:hidden;display:grid;place-items:center; background:radial-gradient(circle at 50% 60%, rgba(196,26,158,.22), transparent 52%), radial-gradient(circle at 50% 28%, rgba(160,24,128,.1), transparent 44%), rgba(255,255,255,.015); } .robot-visual::after{content:"";position:absolute;left:50%;bottom:28px;transform:translateX(-50%);width:112px;height:26px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side, rgba(196,26,158,.55), rgba(160,24,128,.18) 60%, transparent 78%);filter:blur(4px)} .robot-ring,.robot-ring2{position:absolute;border-radius:50%;border:1.5px solid rgba(196,26,158,.4);box-shadow:0 0 12px var(--glow-soft)} .robot-ring{width:120px;height:34px;bottom:26px;border-color:rgba(232,79,201,.65)} .robot-ring2{width:158px;height:46px;bottom:16px;border-color:rgba(196,26,158,.3)} .robot-core{width:92px;height:120px;position:relative;z-index:2;animation:floatBot 4.5s ease-in-out infinite} .bot-head{ width:66px;height:66px;border-radius:50%;margin:0 auto;position:relative; background:radial-gradient(circle at 38% 30%, #8a1a6e 0%, #4a0a3a 42%, #220418 80%, #120210 100%); box-shadow:0 0 18px var(--glow-soft), inset 0 -5px 15px rgba(0,0,0,.6), inset 0 4px 8px rgba(232,79,201,.25); } .bot-head::before,.bot-head::after{content:"";position:absolute;top:27px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,150,236,.85)} .bot-head::before{left:17px} .bot-head::after{right:17px} .bot-body{ width:84px;height:64px;border-radius:42px 42px 32px 32px;margin:-6px auto 0; background:radial-gradient(ellipse at 40% 32%, #7a1660 0%, #3a0830 50%, #1a0314 100%); box-shadow:0 0 18px var(--glow-soft), inset 0 -8px 14px rgba(0,0,0,.6), inset 0 4px 9px rgba(232,79,201,.18); } .agents-card{display:flex;flex-direction:column;justify-content:center;gap:1px} .agent-row{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:7px 2px} .agent-row+.agent-row{border-top:1px solid rgba(255,255,255,.05)} .ag-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:rgba(232,79,201,.12);color:var(--pink-hi);flex-shrink:0;font-size:16px} .ag-t strong{display:block;font-size:.8rem;color:var(--text);font-weight:600} .ag-t span{display:block;color:var(--muted-2);font-size:.68rem;margin-top:1px} .ag-st{font-size:.7rem;font-weight:700;white-space:nowrap} .ag-st.live,.ag-st.active{color:var(--lime)} .ag-st.review{color:var(--pink-hi)} .dash-foot{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} .df-ic{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;background:rgba(232,79,201,.14);color:var(--pink-hi);font-size:16px} .df-t strong{display:block;font-size:.8rem;color:var(--text);font-weight:600} .df-t span{display:block;color:var(--muted-2);font-size:.72rem;margin-top:1px} /* ---------------- map ---------------- */ .map-section{margin-top:0;padding:8px 0 0;position:relative} /* heading is a standalone row ABOVE the map (clean black space), not an overlay */ .map-heading{margin:0 0 32px;padding-top:48px;text-align:center;font-size:clamp(2rem,4vw,3.4rem);font-weight:600;letter-spacing:-.04em;color:var(--heading)} /* canvas aspect matches the map's viewBox (1440x410) so the dotted continents fill it with no dead bands; soft-fade the edges (top/bottom strong, left/right gentle) so the dots melt into black, not hard-cut */ .map-canvas{position:relative;height:auto;aspect-ratio:1440/410;width:100%;margin:0;overflow:hidden; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%); -webkit-mask-composite:source-in;mask-composite:intersect} .map-graphic{position:absolute;inset:0} .map-graphic svg{display:block;width:100%;height:100%} /* real-coastline land filled with a magenta dot pattern (keeps the "dotted earth" look) */ .wm-dot{fill:var(--pink);fill-opacity:.55} .wm-land{fill:url(#wmDots);stroke:rgba(232,79,201,.18);stroke-width:.5} .wm-arc-glow{fill:none;stroke:var(--pink);stroke-width:12;opacity:.22;stroke-linecap:round} .wm-arc{fill:none;stroke:var(--pink-hi);stroke-width:2.6;opacity:.95;stroke-linecap:round} .wm-arc-flow{fill:none;stroke:#fff;stroke-width:2.4;opacity:.85;stroke-linecap:round;stroke-dasharray:4 210;animation:wmFlow 3.6s linear infinite} .wm-bloom{fill:url(#wmB)} .wm-ring{fill:none;stroke:var(--pink-hi);stroke-width:2.5;opacity:.95} .wm-core{fill:#fff} .map-canvas::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:50%;pointer-events:none; background:radial-gradient(ellipse 78% 75% at 50% 82%, rgba(196,26,158,.62) 0%, rgba(160,24,128,.32) 32%, transparent 68%); filter:blur(10px); } /* (removed .globe-arc — the oversized horizon curve; .map-canvas::after already provides the bottom glow) */ /* map floating label chips — positions set data-driven in app.js (projected lon/lat) */ .map-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:9px;padding:8px 13px 8px 9px;border-radius:12px; background:rgba(14,10,16,.82);box-shadow:inset 0 0 0 1px rgba(232,79,201,.3), 0 8px 24px -8px rgba(0,0,0,.7); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .map-chip .mc-ic{width:26px;height:26px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;background:rgba(232,79,201,.14);color:var(--pink-hi);font-size:16px} .map-chip strong{display:block;font-size:.82rem;font-weight:700;color:var(--text);line-height:1.1} .map-chip span{display:block;font-size:.7rem;color:var(--muted);margin-top:1px} .mc-discover{left:6%;top:20%} .mc-reach{left:53%;top:52%} .mc-compare{left:82%;top:30%} .mc-close{left:62%;top:43%} /* trust row below the map */ .map-trust{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:20px;position:relative;z-index:2} .mt-item{display:flex;align-items:center;gap:12px;padding:6px 34px} .mt-item+.mt-item{border-left:1px solid var(--hairline-2)} .mt-ic{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;background:rgba(232,79,201,.1);color:var(--pink-hi);font-size:18px} .mt-item strong{display:block;font-size:.92rem;font-weight:700;color:var(--text)} .mt-item div span{display:block;font-size:.8rem;color:var(--muted);margin-top:2px} /* ---------------- feature cards (left-aligned, flat) ---------------- */ .feature-row{margin-top:36px;width:min(2200px, calc(100vw - 96px));margin-inline:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .feature-card{ border-radius:18px;padding:26px;display:flex;flex-direction:column;align-items:flex-start;text-align:left; background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline); } .fc-ic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin-bottom:18px;color:var(--pink-hi);font-size:28px; background:radial-gradient(circle at 50% 50%, rgba(232,79,201,.14), transparent 70%); box-shadow:inset 0 0 0 1.6px rgba(232,79,201,.55), 0 0 22px -6px var(--glow-pink)} .feature-card h3{font-size:1.12rem;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;color:var(--heading)} .feature-card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5} /* ---------------- CTA ---------------- */ .cta{ margin-top:40px;padding:52px 60px;position:relative;overflow:hidden;border-radius:24px; background:linear-gradient(180deg,#0e0913,#0a0610);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); display:grid;grid-template-columns:42% 58%;align-items:center;min-height:340px; } /* large dark wireframe planet — its centre sits below the card's bottom-left; the rounded card clips it */ .cta-globe{position:absolute;left:17%;top:112%;width:clamp(560px,48vw,740px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:1;pointer-events:none} .cta-globe .globe-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 0 46px rgba(196,26,158,.3))} .cta-mesh ellipse{stroke:var(--pink);stroke-width:1;opacity:.3} .cta-stars{filter:drop-shadow(0 0 3px rgba(255,120,230,.7))} .cta-cr-bloom{opacity:.22;stroke-linecap:round} .cta-cr-mid{opacity:.5;stroke-linecap:round} .cta-cr-core{stroke-linecap:round;filter:drop-shadow(0 0 5px #ff5adc) drop-shadow(0 0 13px rgba(232,79,201,.7))} .cta-copy{position:relative;z-index:2;grid-column:2;justify-self:start;text-align:left;max-width:600px} .cta-title{margin:0 0 18px;font-size:clamp(2.1rem,3.6vw,3.4rem);line-height:1;letter-spacing:-.04em;color:#fff;font-weight:700} .cta-title .accent{color:var(--pink);text-shadow:0 0 30px rgba(232,79,201,.5)} .cta-title span{display:block} .bullet-row{display:flex;gap:24px;flex-wrap:wrap;justify-content:flex-start;color:var(--text);font-weight:600;margin-bottom:26px;font-size:.96rem} .bullet-row span{display:flex;align-items:center;gap:8px} .bullet-row span svg{width:17px;height:17px;color:var(--pink);flex-shrink:0} .cta-actions{display:flex;gap:13px;flex-wrap:wrap;justify-content:flex-start} .btn-darkglass{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:var(--text)} .btn-darkglass:hover{background:rgba(255,255,255,.08)} /* ---------------- footer ---------------- */ /* footer — 4-column (sitewide) */ footer{padding:54px 0 40px;color:var(--muted);font-size:.9rem;position:relative;z-index:2;border-top:1px solid var(--hairline);margin-top:24px} .footer-inner{width:var(--container);margin:0 auto;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:30px;align-items:start} .footer-brandcol{display:flex;flex-direction:column;gap:13px} .footer-brand{font-family:var(--logo);font-weight:700;font-size:1.3rem;color:var(--heading);letter-spacing:-.02em} .footer-copy{color:var(--muted-2);font-size:.86rem} .footer-social{display:flex;gap:10px;margin-top:4px} .fsoc{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:17px;color:var(--text);background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline);transition:.18s ease} .fsoc:hover{color:#fff;background:rgba(232,79,201,.16);box-shadow:inset 0 0 0 1px rgba(232,79,201,.4)} .footer-col{display:flex;flex-direction:column;gap:11px} .footer-h{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:4px} .footer-col a{color:var(--muted);font-size:.9rem;transition:.16s ease} .footer-col a:hover{color:var(--text)} @media (max-width:880px){.footer-inner{grid-template-columns:1fr 1fr 1fr;gap:26px}.footer-brandcol{grid-column:1 / -1}} @media (max-width:560px){.footer-inner{grid-template-columns:1fr 1fr}} [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease} [data-reveal].visible{opacity:1;transform:none} @keyframes pulse{50%{transform:scale(1.14)}} @keyframes progressShimmer{0%{background-position:0 0}100%{background-position:200% 0}} @keyframes floatBot{50%{transform:translateY(-8px)}} @keyframes wmFlow{to{stroke-dashoffset:-214}} @media (max-width:1120px){ .hero{grid-template-columns:1fr} .hero-copy{padding-top:24px} .feature-row{grid-template-columns:repeat(2,1fr)} .cta{grid-template-columns:1fr;text-align:center;justify-items:center;padding-top:250px} .cta-globe{left:50%;top:0;transform:translate(-50%,-56%);width:min(540px,94vw)} .cta-copy{grid-column:1;margin:0 auto;text-align:center} .bullet-row,.cta-actions{justify-content:center} } @media (max-width:880px){ .nav-links{display:none} .dash-lower{grid-template-columns:1fr} .dash-chips{grid-template-columns:repeat(3,1fr)} .feature-row{grid-template-columns:1fr} .map-trust{flex-direction:column;gap:16px} .mt-item{padding:6px 0} .mt-item+.mt-item{border-left:none} .map-chip span{display:none} } @media (max-width:640px){ :root{--container:min(100vw - 24px, 100vw)} .nav{min-height:72px} .brand-word{font-size:1.3rem} .hero-copy{padding-top:8px} .request-box{padding:9px 9px 9px 18px} .request-btn{width:48px;height:48px;font-size:20px} .dashboard{padding:12px;font-size:11px} .dash-grid{grid-template-columns:1fr} .side-rail{flex-direction:row;flex-wrap:wrap;justify-content:center} .dash-chips{grid-template-columns:repeat(2,1fr)} .map-section{padding:34px 10px 0} .map-chip{display:none} .feature-card h3{font-size:1.1rem} .cta{padding:40px 18px} .footer-inner{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px} .footer-brand,.footer-links,.footer-copy{justify-self:center} .nav-actions .btn{padding:11px 16px} .hero-title{font-size:clamp(2.2rem,9vw,3rem)} .hero-title span{white-space:normal} .mini-pills{gap:10px} .pill{min-width:unset;flex:1 1 calc(50% - 10px)} } .no-js [data-reveal]{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important} [data-reveal]{opacity:1;transform:none} } /* ============ HOW IT WORKS PAGE ============ */ .hiw-sec{position:relative;padding:62px 0} .hiw-sec-cta{padding-top:18px} .hiw-kicker{font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pink-hi);margin-bottom:16px} .hiw-h2{font-size:clamp(2rem,3.2vw,3rem);line-height:1.1;letter-spacing:-.03em;color:var(--heading);font-weight:700;margin:0 0 12px;text-align:center} .hiw-h2-left{text-align:left} .hiw-sub{color:var(--muted);font-size:1.05rem;text-align:center;margin:0 auto 44px;max-width:560px} .hiw-lead{color:var(--muted);font-size:1.04rem;line-height:1.6;max-width:520px;margin:0 0 28px} /* section 1 — hero + orbit */ .hiw-hero{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;padding-top:30px} .hiw-hero h1{font-size:clamp(2.4rem,3.9vw,3.9rem);line-height:1.05;letter-spacing:-.035em;margin:0 0 20px;color:var(--heading);font-weight:700} .hiw-hero h1 span{display:block} .hiw-hero h1 .accent{color:var(--pink);text-shadow:0 0 30px rgba(232,79,201,.5)} .hiw-points{display:flex;flex-direction:column;gap:18px} .hiw-point{display:flex;align-items:flex-start;gap:14px} .hiw-point-ic{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;font-size:20px;color:var(--pink-hi);background:rgba(232,79,201,.12);box-shadow:inset 0 0 0 1px rgba(232,79,201,.28)} .hiw-point strong{display:block;font-size:.98rem;color:var(--heading);font-weight:700} .hiw-point span{display:block;color:var(--muted);font-size:.9rem;margin-top:2px} .hiw-orbit{position:relative;width:clamp(440px,46vw,560px);aspect-ratio:1;margin-inline:auto} .hiw-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .hiw-ring .ring{fill:none;stroke:var(--pink);stroke-opacity:.4;stroke-width:.4;stroke-dasharray:.5 2.4;stroke-linecap:round} .hiw-ring .node{fill:var(--pink-hi)} .hiw-robot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:148px;height:172px;display:grid;place-items:center;z-index:2} .hiw-robot::before{content:"";position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:210px;height:210px;border-radius:50%;background:radial-gradient(circle, rgba(196,26,158,.3), transparent 62%);z-index:-1;pointer-events:none} .hiw-orbit-card{position:absolute;transform:translate(-50%,-50%);width:150px;z-index:3;border-radius:14px;padding:13px; background:linear-gradient(160deg,#150d1b,#0c0810);box-shadow:0 0 0 1px rgba(196,26,158,.22), 0 14px 32px -16px rgba(0,0,0,.85)} .hiw-orbit-card .oc-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:16px;color:var(--pink-hi);background:rgba(232,79,201,.14);margin-bottom:8px} .hiw-orbit-card strong{display:block;font-size:.84rem;color:#fff;font-weight:700} .hiw-orbit-card span{display:block;font-size:.69rem;color:rgba(247,242,249,.55);margin-top:3px;line-height:1.3} /* section 2 — steps */ .hiw-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;text-align:left} .hiw-step{position:relative;border-radius:16px;padding:20px 18px 18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline)} .hiw-step-num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:.92rem;color:#fff;background:var(--grad-mag);box-shadow:0 6px 16px -6px var(--glow-pink);margin-bottom:14px} .hiw-step-ic{font-size:22px;color:var(--pink-hi);margin-bottom:10px} .hiw-step h3{font-size:.98rem;font-weight:700;color:var(--heading);margin:0 0 7px;letter-spacing:-.01em;line-height:1.2} .hiw-step p{font-size:.84rem;color:var(--muted);line-height:1.45;margin:0 0 14px} .hiw-step:not(:last-child)::before{content:"";position:absolute;top:37px;right:-13px;width:8px;border-top:2px dotted var(--pink);opacity:.5} .hiw-step:not(:last-child)::after{content:"\203A";position:absolute;top:26px;right:-15px;color:var(--pink);font-size:20px;font-weight:700;opacity:.7;line-height:1} .hiw-mini{border-radius:10px;padding:11px 12px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--hairline)} .hiw-mini-label{font-size:.64rem;font-weight:600;color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em} .hiw-mini-val{font-family:var(--mono);font-weight:600;font-size:1.04rem;color:var(--heading);margin-top:3px} .hiw-mini-val.green{color:#28a85a} .hiw-mini-sub{font-size:.74rem;color:var(--muted);margin-top:1px} .hiw-avatars{display:flex;align-items:center;margin-top:9px} .hiw-av{width:20px;height:20px;border-radius:50%;background:var(--grad-mag);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)} .hiw-av+.hiw-av{margin-left:-7px} .hiw-plus{margin-left:9px;font-size:.72rem;color:var(--muted);font-family:var(--mono)} .hiw-bars{display:flex;align-items:flex-end;gap:5px;height:28px;margin-top:9px} .hiw-bar{width:7px;border-radius:2px 2px 0 0;background:var(--grad-mag);opacity:.9} .hiw-revicons{display:flex;gap:6px;margin-top:9px} .hiw-revicons span{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:14px;background:rgba(232,79,201,.1)} .hiw-revicons .rev-eye{color:var(--pink-hi)} .hiw-revicons .rev-ok{color:#28a85a} .hiw-revicons .rev-no{color:var(--muted)} /* section 3 — control */ .hiw-control-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:48px;align-items:center} .hiw-control-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px} .hiw-ctrl-card{border-radius:16px;padding:22px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline)} .hiw-ctrl-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:21px;color:var(--pink-hi);background:rgba(232,79,201,.12);box-shadow:inset 0 0 0 1px rgba(232,79,201,.28);margin-bottom:14px} .hiw-ctrl-card strong{display:block;font-size:1rem;color:var(--heading);font-weight:700;margin-bottom:6px} .hiw-ctrl-card p{font-size:.88rem;color:var(--muted);line-height:1.45;margin:0} /* section 4 — cta band */ .hiw-cta{position:relative;overflow:hidden;border-radius:24px;padding:46px 56px;min-height:200px; background:linear-gradient(180deg,#0e0913,#0a0610);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px} .hiw-cta h2{font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.12;letter-spacing:-.03em;color:#fff;font-weight:700;margin:0;max-width:380px;position:relative;z-index:2} .hiw-cta-right{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:16px} .hiw-cta .bullet-row{margin-bottom:0} .hiw-cta .cta-globe{left:auto;right:0;top:auto;bottom:0;transform:translate(36%,42%);width:clamp(340px,30vw,440px);z-index:1} @media (max-width:1120px){ .hiw-hero{grid-template-columns:1fr;gap:34px} .hiw-steps{grid-template-columns:repeat(3,1fr)} .hiw-step:not(:last-child)::before,.hiw-step:not(:last-child)::after{display:none} .hiw-control-grid{grid-template-columns:1fr;gap:30px} .hiw-cta{grid-template-columns:1fr;gap:22px} .hiw-cta h2{max-width:none} } @media (max-width:880px){ .hiw-orbit{aspect-ratio:auto;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0} .hiw-ring{display:none} .hiw-robot{position:static;transform:none;grid-column:1 / -1;margin:0 auto 6px;width:150px;height:160px} .hiw-robot::before{top:50%} .hiw-orbit-card{position:static;transform:none;width:auto} .hiw-steps{grid-template-columns:repeat(2,1fr)} .hiw-cta .cta-globe{display:none} } @media (max-width:560px){ .hiw-steps{grid-template-columns:1fr} .hiw-control-cards{grid-template-columns:1fr} .hiw-orbit{grid-template-columns:1fr} .hiw-cta{padding:32px 24px} } /* shared gradient text */ .grad-text{background:var(--grad-mag);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} /* ============ PLANS PAGE ============ */ .plans-hero{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;padding-top:30px} .plans-kicker{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-hi);background:rgba(232,79,201,.12);box-shadow:inset 0 0 0 1px rgba(232,79,201,.3);padding:6px 14px;border-radius:999px;margin-bottom:20px} .plans-hero h1{font-size:clamp(2.4rem,3.9vw,3.9rem);line-height:1.05;letter-spacing:-.035em;margin:0 0 18px;color:var(--heading);font-weight:700} .plans-hero h1 span{display:block} .plans-lead{color:var(--muted);font-size:1.08rem;line-height:1.6;margin:0 0 26px} .plans-hero-figure{width:100%} .plans-hero-art{width:100%;height:auto;display:block;filter:drop-shadow(0 0 46px rgba(196,26,158,.26))} /* trust bar (hero + all-plans-include) */ .trust-bar{display:inline-flex;flex-wrap:wrap;align-items:center;border-radius:14px;padding:4px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline);max-width:100%} .trust-bar-center{display:flex;justify-content:center;margin:0 auto;width:fit-content} .trust-bar .ti{display:flex;align-items:center;gap:9px;padding:10px 18px;font-size:.9rem;font-weight:600;color:var(--text);white-space:nowrap} .trust-bar .ti+.ti{border-left:1px solid var(--hairline-2)} .trust-bar .tic{font-size:18px;color:var(--pink-hi);display:inline-flex} .plans-include-sec{text-align:center} /* pricing cards */ .plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;max-width:1080px;margin:0 auto;padding-top:16px} .plan-card{position:relative;border-radius:20px;padding:30px 26px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline);display:flex;flex-direction:column} .plan-pop{background:linear-gradient(180deg, rgba(232,79,201,.09), var(--surface));box-shadow:inset 0 0 0 1.5px rgba(232,79,201,.55), 0 26px 64px -26px var(--glow-pink);transform:translateY(-14px)} .plan-badge{align-self:center;margin:0 0 16px;font-size:.64rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--grad-mag);padding:6px 15px;border-radius:999px;box-shadow:0 8px 20px -6px var(--glow-pink);white-space:nowrap} .plan-ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:24px;color:var(--pink-hi);background:rgba(232,79,201,.12);box-shadow:inset 0 0 0 1px rgba(232,79,201,.28);margin-bottom:18px} .plan-name{font-size:1.2rem;font-weight:700;color:var(--heading);margin:0 0 10px} .plan-price{display:flex;align-items:baseline;gap:7px;margin-bottom:22px;min-height:42px} .plan-amt{font-family:var(--mono);font-weight:600;font-size:1.9rem;color:var(--heading);letter-spacing:-.02em} .plan-per{font-size:.9rem;color:var(--muted)} .plan-divider{height:1px;background:var(--hairline);margin:2px 0 20px} .plan-feats{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:12px} .plan-feats li{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;color:var(--text);line-height:1.4} .plan-feats .fchk{color:var(--pink-hi);flex-shrink:0;font-size:18px;margin-top:1px;display:inline-flex} .plan-btn{width:100%;margin-top:auto} /* plans cta band */ .plans-cta{position:relative;overflow:hidden;border-radius:24px;padding:62px 40px;text-align:center;background:linear-gradient(180deg,#0e0913,#0a0610);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} .plans-cta::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:760px;height:520px;max-width:150%;border-radius:50%;background:radial-gradient(ellipse, rgba(196,26,158,.22), transparent 62%);z-index:0;pointer-events:none} .plans-cta-orbit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,124%);height:auto;z-index:1;pointer-events:none} .plans-cta-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center} .plans-cta-spark{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin:0 auto 22px;font-size:26px;color:var(--pink-hi);background:rgba(232,79,201,.14);box-shadow:inset 0 0 0 1px rgba(232,79,201,.4), 0 0 30px -6px var(--glow-pink)} .plans-cta h2{font-size:clamp(1.9rem,3vw,2.8rem);line-height:1.12;letter-spacing:-.03em;color:#fff;font-weight:700;margin:0 0 14px} .plans-cta h2 span{display:block} .plans-cta p{color:rgba(247,242,249,.66);font-size:1.05rem;margin:0 0 28px} .plans-cta .cta-actions{justify-content:center} @media (max-width:1120px){ .plans-hero{grid-template-columns:1fr;gap:34px} .plans-hero-figure{max-width:540px;margin:0 auto} } @media (max-width:920px){ .plans-grid{grid-template-columns:1fr;max-width:460px} .plan-pop{transform:none} } @media (max-width:560px){ .trust-bar{display:flex;flex-direction:column;align-items:stretch} .trust-bar .ti+.ti{border-left:none;border-top:1px solid var(--hairline-2)} .plans-cta{padding:44px 22px} } /* ============ LOGIN PAGE ============ */ .grad-text-violet{background:linear-gradient(95deg,#ff5adc 0%, #c41a9e 42%, #8b4dff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} /* size to content (no viewport pinning → no scaling dead-space); fixed comfortable padding instead */ .login-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch;padding:64px 0 80px} /* image-only left panel (single approved raster); dark fallback bg if the image fails to load */ .login-left{position:relative;overflow:hidden;border-radius:24px;background:#0a0510;min-height:587px} .login-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;display:block} .login-logo{display:block;text-align:center;margin:0 0 28px} .login-logo .brand-word{font-family:var(--logo);font-weight:700;font-size:2.1rem;color:var(--heading);letter-spacing:-.02em;position:relative;display:inline-block} .login-logo .brand-word::after{content:"";position:absolute;left:1px;bottom:-9px;width:34px;height:3px;border-radius:2px;background:var(--pink)} .sso-col{display:flex;flex-direction:column;gap:12px} .signin-btn{background:linear-gradient(95deg,#ff5adc 0%,#c41a9e 45%,#8b4dff 100%)} /* left panel */ .login-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-hi);background:rgba(232,79,201,.12);box-shadow:inset 0 0 0 1px rgba(232,79,201,.3);padding:7px 14px;border-radius:999px;margin-bottom:22px} .login-kicker svg{width:15px;height:15px} .login-left h1{font-size:clamp(2.2rem,3.6vw,3.5rem);line-height:1.05;letter-spacing:-.035em;margin:0 0 18px;color:var(--heading);font-weight:700} .login-left h1 span{display:block} .login-sub{color:var(--muted);font-size:1.02rem;line-height:1.6;max-width:460px;margin:0 0 24px} .login-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start} .lf-card{border-radius:14px;padding:16px 15px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline)} .lf-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--pink-hi);background:rgba(232,79,201,.12);box-shadow:inset 0 0 0 1px rgba(232,79,201,.28);margin-bottom:11px} .lf-ic svg{width:22px;height:22px;stroke-width:1.75;color:var(--pink-hi);flex:0 0 auto} .lf-card strong{display:block;font-size:.92rem;font-weight:700;color:var(--heading);margin-bottom:5px} .lf-card span{display:block;font-size:.82rem;color:var(--muted);line-height:1.4} /* rich glowing planet bleeding off the panel's bottom-left (panel clips it), filling the lower-left */ .login-figure{position:relative;height:300px;overflow:hidden;margin:2px 0 14px} .login-figure #login-planet{position:absolute;left:-18%;bottom:-50%;width:min(820px,158%);aspect-ratio:1} .login-planet-svg{width:100%;height:auto;display:block} .lp-stars{filter:drop-shadow(0 0 2px rgba(255,140,232,.6))} .lp-arc-glow{fill:none;stroke:var(--pink);stroke-width:7;opacity:.2;stroke-linecap:round} .lp-arc{fill:none;stroke:#ff9bea;stroke-width:1.6;opacity:.82;stroke-linecap:round} .lp-node{fill:#ffaef0;filter:drop-shadow(0 0 4px #ff5adc)} .lp-cr-bloom{opacity:.4;stroke-linecap:round} .lp-cr-core{stroke-linecap:round;filter:drop-shadow(0 0 5px #ff5adc) drop-shadow(0 0 12px rgba(232,79,201,.7))} .login-trust{display:flex;align-items:center;gap:16px;border-radius:16px;padding:16px 20px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline)} .lt-ic{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;font-size:19px;color:var(--pink-hi);background:rgba(232,79,201,.12)} .lt-body strong{display:block;font-size:.92rem;font-weight:700;color:var(--heading);margin-bottom:10px} .lt-chips{display:flex;flex-wrap:wrap;gap:8px} .lt-chip{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;line-height:1;color:var(--muted);padding:8px 13px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--hairline)} .lt-chip svg{width:16px;height:16px;stroke-width:1.75;color:var(--pink-hi);flex:0 0 auto} /* right card */ .login-card{position:relative;width:100%;max-width:460px;margin-inline:auto;display:flex;flex-direction:column;justify-content:center;border-radius:24px;padding:34px 36px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(232,79,201,.22), 0 30px 80px -30px rgba(0,0,0,.7), 0 0 60px -22px var(--glow-pink)} .hcube{position:absolute;top:-26px;right:24px;width:118px;height:118px;filter:drop-shadow(0 0 26px rgba(196,26,158,.5));pointer-events:none} .hcube svg{width:100%;height:100%;display:block} .login-h{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;color:var(--heading);margin:0 0 6px} .login-csub{color:var(--muted);font-size:.96rem;margin:0 0 24px} .sso-row{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:18px} .sso-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 14px;border-radius:13px;border:none;cursor:pointer;font:inherit;font-size:.92rem;font-weight:600;color:var(--text);background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline);transition:.18s ease} .sso-btn:hover{filter:brightness(1.15);box-shadow:inset 0 0 0 1px rgba(232,79,201,.4)} .sso-btn:active{transform:scale(.985)} .or-div{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:.88rem;margin:4px 0 20px} .or-div::before,.or-div::after{content:"";flex:1;height:1px;background:var(--hairline-2)} .field{margin-bottom:18px} .field label{display:block;font-size:.86rem;font-weight:600;color:var(--text);margin-bottom:9px} .input-wrap{position:relative;display:flex;align-items:center;border-radius:13px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline);transition:box-shadow .18s ease} .input-wrap:focus-within{box-shadow:inset 0 0 0 1px var(--pink), 0 0 0 3px rgba(232,79,201,.25)} .input-wrap .fi-ic{display:grid;place-items:center;padding-left:14px;font-size:18px;color:var(--muted-2)} .input-wrap input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:.98rem;padding:14px 12px;min-width:0} .input-wrap input::placeholder{color:var(--muted-2)} /* defeat Chrome's light-blue autofill bg + black text so the field keeps the dark theme */ .input-wrap input:-webkit-autofill, .input-wrap input:-webkit-autofill:hover, .input-wrap input:-webkit-autofill:focus, .request-box input:-webkit-autofill, .request-box input:-webkit-autofill:hover, .request-box input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--text); caret-color:var(--text); transition:background-color 9999s ease-in-out 0s; box-shadow:0 0 0 1000px transparent inset; } .pw-toggle{background:none;border:none;cursor:pointer;display:grid;place-items:center;padding:0 14px;font-size:18px;color:var(--muted-2);transition:.16s ease} .pw-toggle:hover{color:var(--text)} .pw-toggle .ic-eyeoff{display:none} .input-wrap.revealed .pw-toggle .ic-eye{display:none} .input-wrap.revealed .pw-toggle .ic-eyeoff{display:block} .login-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 22px} .remember{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;color:var(--text);cursor:pointer} .remember input{width:17px;height:17px;accent-color:var(--pink);cursor:pointer} .forgot{font-size:.9rem;font-weight:600;color:var(--pink)} .forgot:hover{color:var(--pink-hi)} .login-submit{width:100%;padding:15px;font-size:1rem} .login-submit:active{transform:scale(.99)} .login-note{margin:14px 0 0;text-align:center;font-size:.88rem;color:var(--pink-hi);background:rgba(232,79,201,.1);border-radius:11px;padding:11px 14px;box-shadow:inset 0 0 0 1px rgba(232,79,201,.25)} .login-alt{text-align:center;color:var(--muted);font-size:.92rem;margin:18px 0 0} .login-alt a{color:var(--pink);font-weight:600} .login-alt a:hover{color:var(--pink-hi)} .login-cardline{height:1px;background:var(--hairline);margin:26px 0 22px} .login-trustrow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:center} .ltr-item{display:flex;flex-direction:column;align-items:center} .ltr-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:var(--pink-hi);background:rgba(232,79,201,.1);box-shadow:inset 0 0 0 1px rgba(232,79,201,.22);margin-bottom:10px} .ltr-item strong{font-size:.84rem;font-weight:700;color:var(--heading);margin-bottom:4px} .ltr-item span{font-size:.76rem;color:var(--muted);line-height:1.4} @media (max-width:1000px){ .login-wrap{grid-template-columns:1fr;gap:30px;min-height:auto;padding:24px 0 48px} .login-left{min-height:240px} } @media (max-width:640px){ .login-feats{grid-template-columns:1fr} .login-trustrow{grid-template-columns:1fr;gap:14px} .login-card{padding:28px 22px} .login-left{min-height:170px} } /* large screens: scale the panels up so they fill the space and don't look small/lost. The card is flex+justify-center, so its content stays centered when the panel grows. */ @media (min-width:1001px) and (min-height:900px){ .login-left{min-height:640px} } @media (min-width:1600px){ .login-card{max-width:520px;padding:40px 44px} }