:root { --ink:#111a3a; --muted:#68708e; --line:rgba(174,184,215,.42); --shadow:0 28px 80px rgba(67,82,139,.13); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:radial-gradient(circle at 7% 0%,rgba(165,220,255,.75),transparent 25%),radial-gradient(circle at 94% 6%,rgba(225,193,255,.66),transparent 23%),linear-gradient(145deg,#f7fbff,#f3f4fb 48%,#faf7ff); background-attachment:fixed; }
a { color:inherit; text-decoration:none; } button,input,textarea,select { font:inherit; } button { cursor:pointer; }
.topbar { width:min(1240px,calc(100% - 48px)); margin:18px auto 0; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; border:1px solid rgba(255,255,255,.82); border-radius:24px; background:rgba(255,255,255,.58); backdrop-filter:blur(24px) saturate(145%); -webkit-backdrop-filter:blur(24px) saturate(145%); box-shadow:0 15px 45px rgba(71,88,145,.1),inset 0 1px rgba(255,255,255,.95); }
.brand { display:flex; align-items:center; gap:9px; font-size:20px; font-weight:800; letter-spacing:-.06em; } .brand-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:#fff; background:linear-gradient(140deg,#80c9ff,#a979ff 72%); box-shadow:0 8px 18px rgba(141,156,255,.28),inset 0 1px rgba(255,255,255,.55); } .topbar nav { display:flex; align-items:center; gap:22px; font-size:14px; font-weight:700; }
.button { display:inline-flex; align-items:center; gap:14px; padding:15px 21px; border:1px solid rgba(255,255,255,.18); border-radius:999px; color:#fff; font-weight:800; background:linear-gradient(145deg,rgba(37,51,96,.96),rgba(16,23,53,.98)); box-shadow:0 14px 28px rgba(17,26,58,.24),inset 0 1px rgba(255,255,255,.2); transition:transform .2s,box-shadow .2s; } .button:hover { transform:translateY(-2px); box-shadow:0 18px 35px rgba(17,26,58,.3),inset 0 1px rgba(255,255,255,.25); } .button span { font-size:18px; } .button-small { padding:11px 16px; font-size:13px; } .text-link { color:#536184; font-size:13px; font-weight:800; }
.landing-shell { width:min(1240px,calc(100% - 48px)); margin:25px auto 40px; } .mosaic-card,.panel,.auth-card,.empty-card { border:1px solid rgba(255,255,255,.84); border-radius:30px; background:rgba(255,255,255,.64); backdrop-filter:blur(24px) saturate(135%); -webkit-backdrop-filter:blur(24px) saturate(135%); box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.9); } .mosaic-card { overflow:hidden; }
.hero { display:grid; grid-template-columns:1fr 1fr; min-height:570px; } .hero-copy { display:flex; flex-direction:column; justify-content:center; padding:78px 72px; background:linear-gradient(120deg,rgba(255,255,255,.58),rgba(255,255,255,.18)); } .eyebrow { margin:0 0 17px; color:#7b82a3; font-size:10px; font-weight:900; letter-spacing:.15em; } .hero h1,.page-heading h1 { max-width:650px; margin:0 0 27px; font-size:clamp(45px,6vw,80px); line-height:.98; letter-spacing:-.075em; } .hero h1 em { font-style:normal; background:linear-gradient(90deg,#6ba8ff,#ad78ef,#e789bf); -webkit-background-clip:text; color:transparent; } .hero-lede { max-width:470px; color:var(--muted); font-size:17px; line-height:1.65; } .hero-actions { display:flex; align-items:center; gap:24px; margin-top:24px; }
.hero-art { position:relative; min-height:570px; overflow:hidden; background:linear-gradient(135deg,#93dbff,#a3b8ff 43%,#f5b4e7); } .orb { position:absolute; border-radius:50%; filter:blur(4px); mix-blend-mode:screen; } .orb-one { top:-70px; right:-30px; width:430px; height:430px; background:radial-gradient(circle at 35% 35%,#fff,transparent 55%),linear-gradient(140deg,#78d5ff,#9886ff); } .orb-two { bottom:-110px; left:-90px; width:360px; height:360px; background:radial-gradient(circle at 60% 30%,#fff9,transparent 20%),linear-gradient(140deg,#99f4dd,#7c9cff); }
.floating-note { position:absolute; z-index:2; display:flex; align-items:center; gap:12px; padding:16px 18px; border:1px solid rgba(255,255,255,.7); border-radius:20px; background:rgba(255,255,255,.65); backdrop-filter:blur(18px); box-shadow:0 20px 35px rgba(48,69,148,.17),inset 0 1px rgba(255,255,255,.9); } .floating-note span { display:grid; place-items:center; width:33px; height:33px; border-radius:12px; color:#6e78de; background:rgba(255,255,255,.9); } .floating-note strong { font-size:12px; line-height:1.25; } .note-top { top:86px; left:70px; } .note-bottom { right:45px; bottom:82px; min-width:230px; } .note-bottom small,.note-bottom strong { display:block; } .note-bottom small { color:#717b9d; font-size:10px; } .note-bottom b { margin-left:auto; color:#735cda; } .mini-avatar { color:#fff!important; background:#15204a!important; font-size:10px!important; }
.hero-grid { position:absolute; z-index:1; top:180px; right:48px; display:grid; grid-template-columns:1fr 1fr; width:260px; gap:9px; transform:rotate(-7deg); } .hero-grid span { display:flex; align-items:end; height:72px; padding:13px; border:1px solid rgba(255,255,255,.7); border-radius:17px; background:rgba(255,255,255,.48); font-size:11px; font-weight:800; box-shadow:inset 0 1px rgba(255,255,255,.85); } .hero-grid span:nth-child(2),.hero-grid span:nth-child(5) { color:#fff; background:rgba(24,34,77,.9); }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; } .tile,.stat-card,.match-card { border:1px solid rgba(255,255,255,.65); box-shadow:0 22px 55px rgba(67,82,139,.1),inset 0 1px rgba(255,255,255,.75); } .tile { min-height:260px; padding:29px; border-radius:27px; } .tile h2 { max-width:220px; margin:55px 0 15px; font-size:28px; line-height:1.02; letter-spacing:-.06em; } .tile p:not(.tile-number) { max-width:270px; margin:0; line-height:1.6; } .tile-number { font-size:12px; font-weight:900; letter-spacing:.1em; } .tile-blue { background:linear-gradient(145deg,#bde5ff,#86c2fc); } .tile-purple { background:linear-gradient(145deg,#dccbff,#bda0fa); } .tile-white { background:rgba(255,255,255,.64); }
.quote-card { position:relative; margin-top:18px; padding:50px 70px; overflow:hidden; border-radius:27px; color:#fff; background:rgba(24,34,77,.95); } .quote-card:after { content:""; position:absolute; top:-120px; right:-80px; width:300px; height:300px; border-radius:50%; opacity:.8; background:linear-gradient(140deg,#6eb5ff,#d391f1); filter:blur(8px); } .quote-mark { color:#a7c6ff; font-size:68px; line-height:0; } .quote-card p { position:relative; z-index:1; max-width:800px; margin:20px 0; font-size:30px; line-height:1.1; letter-spacing:-.05em; } .quote-label { color:#b9c3eb; font-size:10px; letter-spacing:.15em; } .footer { display:flex; justify-content:space-between; width:min(1240px,calc(100% - 48px)); margin:0 auto; padding:28px 0 38px; color:#8690ad; font-size:12px; }
.auth-shell { display:grid; place-items:center; min-height:100vh; padding:30px; background:radial-gradient(circle at 15% 15%,rgba(188,231,255,.8),transparent 28%),radial-gradient(circle at 90% 90%,rgba(233,201,255,.78),transparent 30%),linear-gradient(145deg,#f7fbff,#f5f3fc); } .auth-shell>.brand { position:fixed; top:30px; left:38px; }
.auth-card { width:min(450px,calc(100% - 32px)); padding:44px; } .auth-card-wide { width:min(600px,calc(100% - 32px)); } .auth-card h1 { margin:0 0 13px; font-size:42px; line-height:1; letter-spacing:-.07em; } .muted { color:var(--muted); line-height:1.6; } .auth-card form { margin-top:28px; } .auth-foot { margin:27px 0 0; color:var(--muted); font-size:13px; text-align:center; } .auth-foot a,.soft-link { color:#6e5ed2; font-weight:800; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } label { display:block; margin:0 0 18px; color:#3c4669; font-size:12px; font-weight:800; } input,textarea,select { display:block; width:100%; margin-top:8px; padding:14px 15px; border:1px solid var(--line); border-radius:14px; outline:0; color:var(--ink); background:rgba(255,255,255,.56); box-shadow:inset 0 1px rgba(255,255,255,.85); transition:border .2s,box-shadow .2s; } textarea { resize:vertical; } input:focus,textarea:focus,select:focus { border-color:#9a8cf1; box-shadow:0 0 0 4px rgba(169,149,255,.12),inset 0 1px rgba(255,255,255,.9); } .check-row { display:flex; align-items:center; gap:9px; margin-top:7px; font-weight:600; } .check-row input { width:auto; margin:0; } .form-message { min-height:20px; margin:12px 0 0; font-size:12px; } .form-message.error { color:#c44f71; } .form-message.good { color:#3d9272; }
.app-topbar { width:min(1240px,calc(100% - 48px)); margin-top:18px; padding:14px 18px; } .app-nav { gap:25px!important; } .nav-button { border:0; color:#7d86a2; background:none; font-size:13px; font-weight:800; } .app-main { width:min(1240px,calc(100% - 48px)); margin:58px auto 80px; } .app-main.narrow { width:min(980px,calc(100% - 48px)); } .page-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:33px; } .page-heading h1 { margin-bottom:10px; font-size:clamp(40px,5vw,65px); } .page-heading .muted { margin:0; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .stat-card { display:flex; flex-direction:column; justify-content:space-between; min-height:176px; padding:25px; border-radius:25px; } .stat-card small { font-size:10px; font-weight:900; letter-spacing:.13em; } .stat-card strong { font-size:51px; letter-spacing:-.08em; } .stat-card span { color:#39476e; font-size:12px; } .stat-blue { background:linear-gradient(145deg,#bfe9ff,#91c4ff); } .stat-purple { background:linear-gradient(145deg,#eadfff,#c5abff); } .stat-pink { background:linear-gradient(145deg,#ffd9ed,#f4b9d4); }
.dashboard-grid { display:grid; grid-template-columns:1.7fr 1fr; gap:18px; margin-top:18px; } .panel { padding:30px; } .panel-heading { display:flex; align-items:start; justify-content:space-between; } .panel h2 { margin:0 0 20px; font-size:29px; letter-spacing:-.06em; } .panel-side { background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(236,228,255,.58)); } .panel-side h2 { margin-top:52px; } .panel-side p { font-size:14px; } .soft-link { display:inline-flex; gap:12px; margin-top:18px; font-size:13px; } .match-list { display:grid; gap:12px; }
.match-card { padding:20px; border-radius:20px; background:rgba(255,255,255,.48); backdrop-filter:blur(18px) saturate(125%); -webkit-backdrop-filter:blur(18px) saturate(125%); } .match-top { display:flex; align-items:center; gap:12px; } .avatar { display:grid; place-items:center; width:44px; height:44px; border-radius:15px; color:#fff; background:linear-gradient(140deg,#91c9ff,#b38cf5); font-size:12px; font-weight:900; } .match-top h3 { margin:0; font-size:17px; letter-spacing:-.03em; } .match-top .eyebrow { margin-bottom:5px; } .score { margin-left:auto; color:#735fd4; } .score-line { height:5px; margin:15px 0; border-radius:99px; background:rgba(224,228,241,.8); } .score-line span { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#7dbdff,#aa7ff1); } .match-card>p { color:#58617c; font-size:13px; line-height:1.55; } .tags { display:flex; flex-wrap:wrap; gap:6px; } .tag { padding:6px 9px; border-radius:999px; color:#655bc3; background:rgba(232,231,255,.85); font-size:10px; font-weight:800; } .idea { display:flex; flex-direction:column; gap:5px; margin:17px 0 2px; padding:8px 12px; border-left:3px solid #b796f8; } .idea small { color:#8c91aa; font-size:9px; font-weight:900; letter-spacing:.14em; } .idea span { color:#384464; font-size:12px; }
.matches-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .matches-grid .match-card { padding:25px; background:rgba(255,255,255,.62); } .empty-state { padding:25px 0; color:#8b93ad; font-size:13px; } .empty-card { grid-column:1/-1; padding:70px 25px; text-align:center; } .empty-icon { color:#8c75e4; font-size:32px; } .empty-card h2 { margin:12px 0; font-size:30px; letter-spacing:-.06em; } .empty-card p { margin-bottom:28px; color:var(--muted); } .form-panel { padding:40px; } .label-hint { color:#9da3b8; font-weight:500; } .form-actions { display:flex; align-items:center; justify-content:space-between; margin-top:10px; } .form-actions .form-message { margin:0; } .notify-button { padding:0; border:0; background:none; } .notify-button:disabled { opacity:.55; }
@media(max-width:850px) { .hero { grid-template-columns:1fr; } .hero-art { min-height:400px; } .hero-copy { padding:52px 35px; } .feature-grid,.stats-grid,.matches-grid { grid-template-columns:1fr; } .dashboard-grid { grid-template-columns:1fr; } .page-heading { align-items:start; flex-direction:column; } .app-nav a { display:none; } }
@media(max-width:560px) { .topbar,.landing-shell,.footer,.app-main { width:calc(100% - 28px); } .topbar { padding:12px 14px; } .topbar nav { gap:12px; } .topbar nav>a:first-child { display:none; } .hero-copy { padding:40px 25px; } .hero h1 { font-size:48px; } .hero-art { min-height:340px; } .note-top { top:45px; left:24px; } .note-bottom { right:17px; bottom:32px; } .hero-grid { top:130px; right:25px; transform:scale(.8) rotate(-7deg); } .quote-card { padding:35px 25px; } .quote-card p { font-size:25px; } .form-grid { grid-template-columns:1fr; } .auth-shell>.brand { position:absolute; top:22px; left:20px; } .auth-card { padding:30px 24px; } .app-topbar { padding:12px 14px; } .app-main { margin-top:35px; } .form-panel { padding:25px; } .form-actions { align-items:start; flex-direction:column; gap:15px; } }
@supports not (backdrop-filter:blur(1px)) { .topbar,.mosaic-card,.panel,.auth-card,.match-card { background:#fff; } }

/* Monochrome glass theme: white frosted surfaces over a softly lit dark backdrop. */
body { position:relative; min-height:100vh; color:#f4f4f5; background:radial-gradient(55% 45% at 12% 0%,rgba(255,255,255,.09),transparent 70%),radial-gradient(45% 40% at 90% 100%,rgba(255,255,255,.05),transparent 70%),linear-gradient(165deg,#151517 0%,#0b0b0c 55%,#070708 100%); background-color: #0b0b0c; background-attachment: scroll; }
body > * { position:relative; z-index:1; }
.brand-mark { color:#0b0b0c; background:#fff; box-shadow:0 8px 18px rgba(0,0,0,.3); }
.topbar,.app-topbar,.mosaic-card,.panel,.auth-card,.empty-card,.tile,.stat-card,.match-card,.quote-card,.floating-note,.hero-grid span { color:#f4f4f5; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.055); backdrop-filter:blur(24px) saturate(120%); -webkit-backdrop-filter:blur(24px) saturate(120%); box-shadow:0 24px 70px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.12); }
.topbar nav a,.app-nav a,.nav-button { color:rgba(255,255,255,.72); }
.hero-copy,.panel-side,.tile-blue,.tile-purple,.tile-white,.stat-blue,.stat-purple,.stat-pink,.matches-grid .match-card { background:rgba(255,255,255,.04); }
.hero h1,.page-heading h1,.auth-card h1,.panel h2,.empty-card h2 { color:#fff; text-shadow:none; }
.hero h1 em { background:none; color:#fff; -webkit-text-fill-color:#fff; }
.hero-lede,.muted,.panel-side p,.match-card>p,.tile p:not(.tile-number),.stat-card span,.idea span { color:rgba(255,255,255,.62); }
.eyebrow,.idea small,.note-bottom small,.label-hint,.contact-label { color:rgba(255,255,255,.5); }
.hero-art { background:radial-gradient(circle at 68% 26%,rgba(255,255,255,.22),transparent 34%),radial-gradient(circle at 22% 78%,rgba(255,255,255,.1),transparent 30%),rgba(255,255,255,.03); }
.orb { opacity:.16; filter:blur(40px); background:#fff; mix-blend-mode:normal; }
.floating-note span,.hero-grid span:nth-child(2),.hero-grid span:nth-child(5) { color:#fff; background:rgba(255,255,255,.12); }
.note-bottom b,.score { color:#fff; }
.mini-avatar { color:#0b0b0c!important; background:#fff!important; }
.quote-card:after { opacity:.14; background:#fff; filter:blur(60px); }
.quote-mark,.quote-label { color:rgba(255,255,255,.55); }
.button { border:1px solid #fff; color:#0b0b0c; background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.3); }
.button:hover { background:rgba(255,255,255,.88); box-shadow:0 16px 36px rgba(0,0,0,.38); }
.text-link,.soft-link,.auth-foot a { color:#fff; }
.auth-shell { background:none; }
label { color:rgba(255,255,255,.72); }
input,textarea,select { color:#f4f4f5; border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.05); box-shadow:none; }
input::placeholder,textarea::placeholder { color:rgba(255,255,255,.36); }
input:focus,textarea:focus,select:focus { border-color:rgba(255,255,255,.55); box-shadow:0 0 0 4px rgba(255,255,255,.08); }
.avatar { color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); }
.score-line { background:rgba(255,255,255,.12); }
.score-line span { background:#fff; }
.tag { color:#f4f4f5; background:transparent; border:1px solid rgba(255,255,255,.3); }
.idea { border-left-color:rgba(255,255,255,.4); }
.empty-state,.empty-card p,.footer { color:rgba(255,255,255,.52); }
.empty-icon { color:#fff; }
.form-message.error { color:#ffb4a8; }
.form-message.good { color:#f4f4f5; }
.contact-label { display:block; margin-top:4px; font-size:11px; font-weight:600; }

html { background: #0b0b0c; }
body { display:flow-root; }
.topbar nav a.button,.app-nav a.button { color:#0b0b0c; }