:root{--blue:#2563eb;--blue2:#1d4ed8;--ink:#0f172a;--muted:#5b6475;--line:#e7ebf2;--bg:#f8fafc;--dark:#06111f}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:15px Inter,system-ui,sans-serif;line-height:1.6}
button,input,textarea,select{font:inherit}button{cursor:pointer}
.container{max-width:1120px;margin:auto;padding:0 28px}
.nav{height:70px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);background:#f8fafcf0;backdrop-filter:blur(16px);position:sticky;top:0;z-index:8}
.brand{font-weight:800;font-size:17px;letter-spacing:-.6px}.brand span{color:var(--blue)}
.navlinks{display:flex;gap:25px;color:var(--muted);font-size:14px}.navlinks a{color:inherit;text-decoration:none}
.btn{border:1px solid transparent;border-radius:11px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;padding:11px 18px;font-weight:600}
.btn.soft{background:#fff;border-color:var(--line);color:var(--ink)}
.hero{text-align:center;padding:94px 0 55px;background:radial-gradient(ellipse at 20% 50%,#2563eb12,transparent 48%),radial-gradient(ellipse at 80% 20%,#7c3aed0d,transparent 42%)}
.kicker,.tag{display:inline-block;border:1px solid #d0e3fd;background:#eff6ff;border-radius:99px;padding:7px 12px;color:#1e40af;font-size:12px;font-weight:700}
.hero h1{font-size:clamp(44px,7vw,80px);line-height:1;letter-spacing:-.065em;max-width:830px;margin:22px auto}
.hero h1 em{font-style:normal;color:var(--blue)}
.sub{color:#4a5568;max-width:600px;margin:auto;font-size:17px}
.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.trust{display:flex;justify-content:center;gap:25px;flex-wrap:wrap;color:#64748b;margin:23px;font-size:13px}.trust b{color:#22c55e}
.section{padding:78px 0;border-top:1px solid var(--line)}.section.white{background:#fff}
.eyebrow{color:var(--blue2);font-size:12px;text-transform:uppercase;letter-spacing:.13em;font-weight:700}
.section h2{font-size:clamp(28px,4vw,46px);letter-spacing:-.05em;line-height:1.1;margin:10px 0}
.lead{color:var(--muted);max-width:510px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:19px;margin-top:32px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:25px;box-shadow:0 8px 28px #0f172a0a}
.card h3{margin:12px 0 7px;font-size:17px}.card p{margin:0;color:var(--muted);font-size:14px}
.audience{display:grid;grid-template-columns:1fr 1fr;gap:66px;align-items:center}
.audience.reverse{direction:rtl}.audience.reverse>*{direction:ltr}
.list{padding:0;list-style:none;color:#334155;font-size:14px}.list li{margin:9px 0}
.list li:before{content:'✓';color:var(--blue);font-weight:800;margin-right:9px}
.preview{background:linear-gradient(160deg,#06101e,#091424);border-radius:22px;padding:21px;color:#c8d8ec;box-shadow:0 24px 75px #06111f4d}
.previewtop{display:flex;justify-content:space-between;font-size:12px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:17px 0}
.metric{background:#2563eb1c;border:1px solid #2563eb38;border-radius:12px;padding:12px}
.metric strong{display:block;color:#fff;font-size:20px}.metric span{color:#7a8ea6;text-transform:uppercase;font-size:9px}
.prows{border:1px solid #ffffff16;border-radius:12px;overflow:hidden}
.prow{padding:10px 12px;border-top:1px solid #ffffff13;font-size:12px;display:flex;justify-content:space-between}
.statusPill{font-size:10px;font-weight:700;border-radius:99px;padding:3px 7px;background:#22c55e1c;color:#7de8a4}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-top:30px}
.step{border:1px solid var(--line);border-radius:18px;padding:20px}.step small{color:var(--blue);font-weight:700;letter-spacing:.1em}
.step h3{margin:8px 0}.step p{color:var(--muted);font-size:13px}
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:19px;margin-top:30px}
.featured{background:linear-gradient(175deg,#0b1626,#091020);color:#fff;border-color:#1a2d47}
.featured p,.featured li{color:#9ab8d4}
.val{font-size:29px;font-weight:800;letter-spacing:-.05em;margin:10px 0}
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:50px}
.formcard{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:25px}
.field{margin:13px 0}.field label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;padding:12px;border:1px solid #dbe2ec;border-radius:10px;background:#fff}
.field textarea{min-height:92px}
.footer{padding:28px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#8090a7;font-size:13px}
.modal{position:fixed;inset:0;background:#020612c9;z-index:20;padding:18px;display:none;align-items:center;justify-content:center;backdrop-filter:blur(12px)}
.modal.open{display:flex}
.shell{max-width:1260px;width:100%;height:min(92vh,880px);background:linear-gradient(170deg,#07101e,#060e1c);border:1px solid #94a3b826;border-radius:24px;overflow:hidden;color:#dbe8f8;display:flex;flex-direction:column}
.pnav{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #94a3b81c;flex-shrink:0}
.pnav .brand{color:#fff}
.roles{display:flex;gap:5px;padding:4px;border:1px solid #94a3b81c;border-radius:10px}
.roles button,.close{background:transparent;border:0;color:#71829b;padding:8px 12px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer}
.roles button.active{background:#0e1c30;color:#dce9f8}
.close{border:1px solid #94a3b82b;color:#c8d8ec}
.portal{padding:21px;overflow:auto;flex:1}
.ptabs{display:flex;gap:6px;overflow:auto;border-bottom:1px solid #94a3b81c;margin-bottom:18px;flex-wrap:wrap}
.ptabs button{border:0;background:transparent;color:#71829b;padding:10px 13px;border-bottom:2px solid transparent;white-space:nowrap;font-weight:600;cursor:pointer}
.ptabs button.active{color:#93c5fd;border-color:var(--blue);background:#2563eb14}
.pkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:16px}
.pkpi,.panel{background:#ffffff05;border:1px solid #94a3b81c;border-radius:15px;padding:16px}
.pkpi{cursor:pointer;transition:.15s}.pkpi:hover{border-color:#60a5fa;background:#2563eb14}
.pkpi strong{font-size:25px;color:#fff;display:block}.pkpi span{font-size:12px;color:#71829b}
.pgrid{display:grid;grid-template-columns:1.5fr .9fr;gap:14px}
.panel h3{margin:0 0 4px;font-size:15px}.panel > p{font-size:13px;color:#8ba0bc;margin:0 0 10px}
.drow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #94a3b817;font-size:13px;cursor:pointer;transition:.15s;border-radius:8px}
.drow:hover{background:#2563eb0f;padding-left:6px;padding-right:6px}
.drow:last-child{border:0}
.bar{height:6px;border-radius:5px;background:#ffffff12;overflow:hidden;margin:7px 0}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#60a5fa)}
.request{font-size:11px;padding:6px 9px;border-radius:7px;background:#2563eb24;border:1px solid #2563eb55;color:#93c5fd;font-weight:700;cursor:pointer}
.request.ok{color:#7de8a4;background:#22c55e1c;border-color:#22c55e44}
.request.amber{color:#fbbf24;background:#f59e0b1c;border-color:#f59e0b44}
.formstep{display:none}.formstep.active{display:block}
.progress{height:5px;background:#ffffff14;border-radius:8px;margin:12px 0 20px}
.progress i{height:100%;display:block;background:#60a5fa;border-radius:8px}
.portal .field input,.portal .field textarea,.portal .field select{background:#ffffff08;border-color:#94a3b82b;color:#e5eefb}
.portal .field label{color:#c8d8ec}
.notice{font-size:12px;color:#9ab8d4;background:#2563eb13;border:1px solid #2563eb35;padding:11px;border-radius:9px}
.portal .btn.soft{background:#ffffff0d;color:#dbe8f8;border-color:#94a3b82b}
.detailPanel{margin-top:16px;background:#0e1c30;border:1px solid #2563eb44;border-radius:16px;padding:18px;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.detailhead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:14px}
.detailhead h3{margin:2px 0 0;font-size:19px;color:#fff}
.detailgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.detailbox{padding:13px;border-radius:11px;background:#ffffff06;border:1px solid #94a3b81c;font-size:13px;color:#c3d2e6}
.detailbox b{display:block;color:#93c5fd;font-size:11px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.actionrow{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}
.crumbs{font-size:12px;color:#6b7e96;margin-bottom:10px}
.crumbs b{color:#93c5fd}
@media(max-width:800px){.navlinks{display:none}.grid3,.price,.steps,.audience,.contact,.pgrid,.detailgrid{grid-template-columns:1fr}
.audience.reverse{direction:ltr}.pkpis{grid-template-columns:1fr 1fr}.hero{padding-top:60px}.shell{height:94vh}.roles button{padding:7px}.container{padding:0 18px}}

/* ---- Additions for the real app (auth pages, dashboard, alerts) ---- */
.authwrap{max-width:420px;margin:70px auto;padding:0 20px}
.authcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:0 8px 28px #0f172a0a}
.authcard h2{margin-top:0}
.alert{padding:12px 14px;border-radius:10px;font-size:13px;margin-bottom:16px}
.alert.error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.alert.success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.alert.info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}
.helptext{font-size:12px;color:var(--muted);margin-top:4px}
.dash{max-width:1120px;margin:auto;padding:36px 28px 70px}
.dashhead{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px;flex-wrap:wrap;gap:10px}
.dashtabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:24px;flex-wrap:wrap}
.dashtabs a{padding:10px 14px;color:var(--muted);text-decoration:none;font-weight:600;font-size:14px;border-bottom:2px solid transparent}
.dashtabs a.active{color:var(--blue2);border-color:var(--blue)}
.dkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.dkpi{background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px}
.dkpi strong{font-size:26px;display:block}.dkpi span{font-size:12px;color:var(--muted)}
.dpanel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:16px}
.dpanel h3{margin:0 0 4px}.dpanel>p.lead{font-size:13px;margin:0 0 14px;max-width:none}
.drow2{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.drow2:last-child{border:0}
.statuspill2{font-size:11px;font-weight:700;border-radius:99px;padding:3px 9px;background:#eff6ff;color:#1e40af}
.statuspill2.ok{background:#f0fdf4;color:#166534}
.statuspill2.amber{background:#fffbeb;color:#92400e}
.pill-sm{font-size:11px;font-weight:700;padding:4px 8px;border-radius:8px;background:#f1f5f9;color:#475569}
form .field{margin:13px 0}
.dash .btn.small, .dpanel .btn.small{padding:7px 12px;font-size:13px}
.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
@media(max-width:800px){.dkpis{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr}}
.badge-role{display:inline-block;background:#eff6ff;color:#1e40af;border-radius:99px;padding:2px 9px;font-size:11px;font-weight:700}