:root{
  --bg:#050716;--panel:#0d1329;--line:rgba(255,255,255,.1);--text:#f8fbff;--muted:#98a2bd;
  --purple:#8b5cf6;--blue:#38bdf8;--green:#22c55e;--orange:#fb923c;--shadow:0 30px 90px rgba(0,0,0,.48)
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:radial-gradient(circle at 50% -8%,rgba(124,58,237,.28),transparent 34%),radial-gradient(circle at 100% 20%,rgba(56,189,248,.11),transparent 30%),linear-gradient(180deg,#030512 0%,#070a18 48%,#050716 100%);
  color:var(--text);overflow-x:hidden;line-height:1.5
}
a{text-decoration:none;color:inherit}.orb{position:fixed;border-radius:50%;filter:blur(70px);opacity:.32;pointer-events:none;z-index:0}.orb-one{width:420px;height:420px;background:#5b21b6;left:-150px;top:160px}.orb-two{width:360px;height:360px;background:#2563eb;right:-130px;top:240px}.orb-three{width:300px;height:300px;background:#7c3aed;right:20%;bottom:-140px}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:22px 5vw;border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(22px);background:rgba(4,6,18,.74)}
.brand{display:flex;gap:12px;align-items:center;font-size:25px;font-weight:900;letter-spacing:-.04em}.brand img{width:42px;height:42px;filter:drop-shadow(0 0 16px rgba(139,92,246,.55))}.brand b{color:#8b5cf6}.nav-menu{display:flex;align-items:center;gap:32px;color:#cad2ea;font-size:14px}.nav-menu a{opacity:.85;transition:.2s}.nav-menu a:hover{opacity:1;color:#fff}.header-actions{display:flex;align-items:center;gap:18px}.signin{font-size:14px;color:#cbd5e1}.menu-toggle{display:none;background:none;border:0;gap:5px;flex-direction:column}.menu-toggle span{width:26px;height:2px;background:white;display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:14px;padding:16px 24px;background:linear-gradient(135deg,#4f46e5,#7c3aed 52%,#a855f7);color:#fff;font-weight:900;box-shadow:0 18px 42px rgba(124,58,237,.32);cursor:pointer;transition:.25s}.btn:hover{transform:translateY(-2px);box-shadow:0 22px 55px rgba(124,58,237,.45)}.btn-small{padding:12px 18px}.btn-glass{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.16);box-shadow:none}
.hero{position:relative;z-index:1;display:grid;grid-template-columns:.92fr 1.38fr;gap:58px;align-items:center;padding:78px 5vw 60px;min-height:820px}.hero-copy{max-width:650px}.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:9px 15px;border:1px solid rgba(168,85,247,.28);background:rgba(139,92,246,.1);border-radius:999px;color:#d7b7ff;text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.08em;margin-bottom:28px}.hero h1{font-size:clamp(54px,5.8vw,94px);line-height:.98;letter-spacing:-.075em;margin-bottom:28px}.hero h1 em{font-style:normal;background:linear-gradient(90deg,#5465ff,#8b5cf6,#c084fc);-webkit-background-clip:text;color:transparent}.hero p{font-size:19px;color:#c6cde0;max-width:590px;margin-bottom:32px}.hero-buttons{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:64px}.calendar-icon{width:15px;height:15px;border:2px solid currentColor;border-radius:4px;position:relative}.calendar-icon:before{content:"";position:absolute;left:1px;right:1px;top:4px;border-top:2px solid currentColor}.trust-block p{font-size:12px;text-transform:uppercase;letter-spacing:.22em;color:#8e97b2;font-weight:900;margin-bottom:16px}.trust-logos{display:flex;flex-wrap:wrap;gap:20px;color:#aeb8d4;font-weight:800;opacity:.78}
.hero-stage{position:relative;min-height:560px}.grid-floor{position:absolute;left:-70px;right:0;bottom:20px;height:300px;opacity:.55;transform:perspective(900px) rotateX(64deg);background-image:linear-gradient(rgba(139,92,246,.26) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,.26) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to top,black,transparent 86%)}.holo-cube{position:absolute;left:24px;bottom:125px;width:126px;height:126px;border:2px solid rgba(168,85,247,.7);box-shadow:0 0 36px rgba(139,92,246,.85),inset 0 0 30px rgba(139,92,246,.4);transform:rotateX(58deg) rotateZ(45deg);z-index:4}.holo-cube:before,.holo-cube:after{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.32)}.holo-cube span{position:absolute;inset:0;background:radial-gradient(circle,rgba(196,181,253,.8),transparent 45%)}
.dashboard-shell{position:relative;z-index:3;margin-left:100px;display:grid;grid-template-columns:168px 1fr;min-height:580px;border:1px solid rgba(255,255,255,.16);border-radius:26px;overflow:hidden;background:linear-gradient(135deg,rgba(9,13,31,.86),rgba(12,19,43,.94));box-shadow:var(--shadow),0 0 90px rgba(124,58,237,.16);backdrop-filter:blur(20px)}.dash-sidebar{padding:24px 18px;background:rgba(4,7,18,.46);border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:10px}.dash-logo img{width:34px;margin-bottom:15px}.dash-sidebar a{padding:13px 14px;border-radius:10px;color:#b9c2d8;font-size:13px}.dash-sidebar a.active{background:linear-gradient(90deg,#5b21b6,#7c3aed);color:#fff;box-shadow:0 12px 26px rgba(91,33,182,.4)}.upgrade-card{margin-top:auto;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.04)}.upgrade-card strong,.upgrade-card small{display:block}.upgrade-card small{color:#9ca8c3;margin:8px 0 14px}.upgrade-card button{width:100%;border:1px solid rgba(139,92,246,.4);background:rgba(139,92,246,.12);color:#d8c4ff;padding:10px;border-radius:10px}
.dash-content{padding:30px}.dash-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px}.dash-header h3{font-size:22px}.dash-header p{color:#97a3bd;font-size:13px;margin-top:3px}.dash-profile{display:flex;align-items:center;gap:14px;color:#c9d2e8}.dash-profile img{width:42px}.dash-profile div{display:flex;flex-direction:column}.dash-profile small{color:#98a2bd}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.metrics article{padding:18px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))}.metrics i{font-style:normal}.purple{color:#8b5cf6}.green{color:#22c55e}.orange{color:#fb923c}.blue{color:#38bdf8}.metrics span{display:block;color:#eaf0ff;font-weight:800;font-size:12px;margin:8px 0}.metrics strong{font-size:34px;display:block}.metrics small{color:#a3adc5}.metrics em{display:block;color:#22c55e;font-style:normal;font-size:11px;margin-top:8px}.metrics em.down{color:#fb7185}.dash-panels{display:grid;grid-template-columns:1fr 1.25fr;gap:20px}.panel{padding:20px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(255,255,255,.035)}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.panel-title a,.blue-link{color:#7da2ff;font-size:13px}.panel-title button{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;color:#cbd5e1;padding:8px 10px}.shift{display:grid;grid-template-columns:1.25fr .8fr .8fr;gap:8px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px;color:#cbd5e1}.shift em{justify-self:end;background:rgba(34,197,94,.14);color:#54e57c;font-style:normal;padding:4px 8px;border-radius:7px;font-weight:800}.shift em.scheduled{background:rgba(139,92,246,.16);color:#b997ff}.chart{height:220px}.chart svg{width:100%;height:185px}.chart-area{fill:url(#chartFill)}.chart-line{fill:none;stroke:#9d6bff;stroke-width:5}.chart circle{fill:#fff;stroke:#9d6bff;stroke-width:4}.chart-days{display:flex;justify-content:space-between;color:#9ca8c3;font-size:11px}
.premium-strip,.stats,.section,.cta,.footer{position:relative;z-index:2;margin-left:5vw;margin-right:5vw}.premium-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:rgba(9,13,31,.72);backdrop-filter:blur(18px);overflow:hidden;box-shadow:0 25px 70px rgba(0,0,0,.28)}.premium-strip article{padding:30px;border-right:1px solid rgba(255,255,255,.07)}.premium-strip i{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.06);font-style:normal;font-size:22px;margin-bottom:20px}.premium-strip h3{margin-bottom:8px}.premium-strip p{color:#aeb8d2;font-size:14px;margin-bottom:18px}.premium-strip a{color:#8ab4ff;font-weight:800;font-size:13px}.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:22px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.035);overflow:hidden}.stats div{text-align:center;padding:26px;border-right:1px solid rgba(255,255,255,.08)}.stats strong{display:block;font-size:32px;color:#9a7cff}.stats span{color:#9ea8c1;font-size:13px}
.section{padding:110px 0}.section-heading{text-align:center;max-width:780px;margin:0 auto 56px}.section-heading span,.section-kicker{display:block;color:#9a7cff;letter-spacing:.32em;font-size:12px;font-weight:900;text-transform:uppercase;margin-bottom:13px}.section-heading h2,.solution-copy h2,.faq-column h2{font-size:clamp(38px,4vw,62px);letter-spacing:-.055em;line-height:1.03;margin-bottom:16px}.section-heading p,.solution-copy p{color:#aeb8d2;font-size:18px}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.process-grid article{position:relative;padding:34px;border-radius:24px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));min-height:260px;overflow:hidden}.process-grid article:before{content:"";position:absolute;inset:auto -40px -60px auto;width:160px;height:160px;background:radial-gradient(circle,rgba(139,92,246,.28),transparent 65%)}.process-grid div{color:#7c86a4;font-size:12px;letter-spacing:.22em;font-weight:900}.process-grid i{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:rgba(139,92,246,.13);color:#d5c2ff;font-style:normal;margin:28px 0 22px}.process-grid p{color:#a9b3cd;margin-top:10px}
.solutions{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center}.solution-copy .btn{margin-top:18px}.solution-board{border:1px solid rgba(255,255,255,.1);border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.025));padding:26px;box-shadow:0 26px 80px rgba(0,0,0,.25)}.solution-tabs{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap}.solution-tabs button{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);color:#cbd5e1;padding:11px 14px;border-radius:12px;font-weight:800;cursor:pointer}.solution-tabs button.active{background:linear-gradient(135deg,#4f46e5,#8b5cf6);color:white}.pro-app-preview{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}.app-frame{position:relative;border:1px solid rgba(255,255,255,.11);border-radius:26px;overflow:hidden;background:linear-gradient(145deg,rgba(9,13,31,.96),rgba(21,28,57,.88));box-shadow:0 26px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);min-height:560px}.app-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(139,92,246,.12),transparent 28%,rgba(56,189,248,.08) 80%,transparent)}.app-topbar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035)}.app-topbar div{display:flex;align-items:center;gap:10px}.status-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 18px #22c55e}.app-topbar button{border:1px solid rgba(139,92,246,.45);background:rgba(139,92,246,.14);color:#d8c4ff;border-radius:12px;padding:9px 12px;font-weight:800}.app-body{position:relative;z-index:1;display:grid;grid-template-columns:150px 1fr;min-height:500px}.app-sidebar{padding:22px 16px;display:grid;align-content:start;gap:12px;border-right:1px solid rgba(255,255,255,.08);background:rgba(3,6,18,.35)}.app-sidebar span{padding:12px 13px;border-radius:12px;color:#aeb8d2;font-size:13px;font-weight:800}.app-sidebar .active{color:#fff;background:linear-gradient(135deg,#4f46e5,#8b5cf6);box-shadow:0 15px 38px rgba(124,58,237,.24)}.app-main{padding:24px}.app-main-head{display:flex;justify-content:space-between;gap:22px;padding:22px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:radial-gradient(circle at 20% 0,rgba(139,92,246,.18),rgba(255,255,255,.035))}.app-main-head small{color:#9a7cff;letter-spacing:.15em;text-transform:uppercase;font-weight:900}.app-main-head h4{margin-top:8px;font-size:clamp(19px,2vw,28px);line-height:1.25;max-width:560px}.mini-kpi{min-width:118px;border-radius:18px;padding:18px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);text-align:center}.mini-kpi strong{display:block;font-size:34px}.mini-kpi span{color:#aeb8d2;font-size:12px}.schedule-grid{display:grid;gap:14px;margin-top:18px}.time-card{display:grid;grid-template-columns:.8fr 1fr 1fr;gap:14px;align-items:center;padding:17px;border-radius:17px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:.25s}.time-card:hover{transform:translateY(-2px);border-color:rgba(139,92,246,.34)}.time-card span{color:#9a7cff;font-weight:900}.time-card em{justify-self:end;color:#76f7a0;background:rgba(34,197,94,.13);padding:7px 10px;border-radius:10px;font-size:12px;font-style:normal;font-weight:900}.time-card em.blue-status{color:#7dd3fc;background:rgba(56,189,248,.13)}.time-card em.orange-status{color:#fdba74;background:rgba(251,146,60,.14)}.time-card em.purple-status{color:#d8b4fe;background:rgba(168,85,247,.16)}.insight-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.insight-row article{padding:22px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035)}.insight-row b{font-size:32px;display:block}.insight-row span{color:#aeb8d2}.benefit-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}.benefit-list article{display:grid;gap:7px;padding:20px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.benefit-list article b{color:#fff}.benefit-list article span{color:#aeb8d2;font-size:13px;font-weight:600}
.pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,520px));gap:28px;justify-content:center}.price-card{position:relative;padding:36px;border-radius:26px;background:rgba(13,19,41,.85);border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 80px rgba(0,0,0,.22)}.price-card.featured{border-color:rgba(168,85,247,.7);box-shadow:0 0 0 1px rgba(139,92,246,.22),0 30px 90px rgba(124,58,237,.18)}.popular{position:absolute;right:28px;top:28px;background:#8b5cf6;border-radius:999px;padding:7px 12px;font-size:11px;font-weight:900}.price-card>span{color:#b99cff;letter-spacing:.25em;text-transform:uppercase;font-size:12px;font-weight:900}.price-card h3{font-size:46px;margin:16px 0 10px}.price-card p{color:#aeb8d2}.price-card ul{list-style:none;margin:26px 0 30px;display:grid;gap:13px}.price-card li{color:#d4dcf3}.price-card li:before{content:"✓";color:#9c7cff;margin-right:10px}
.detailed-portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.project-card{border-radius:26px;border:1px solid rgba(255,255,255,.1);padding:24px;background:rgba(255,255,255,.04);overflow:hidden}.project-card h3{font-size:22px;margin:18px 0 6px}.project-card p{color:#aab4ce}.real-mock{height:390px;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,#080c1f,#151b32);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 70px rgba(0,0,0,.22)}.real-mock.light{background:#f7f9ff;color:#111827}.real-mock.violet{background:linear-gradient(145deg,#1e1048,#11152c 65%,#31136f)}.mock-nav{height:42px;display:flex;gap:8px;align-items:center;padding:0 14px;background:rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.08)}.light .mock-nav{background:#e9eef8;border-bottom-color:#d9e1f0}.mock-nav span{width:9px;height:9px;border-radius:50%;background:#9a7cff}.mock-nav b{margin-left:8px;font-size:12px;color:#dfe6ff}.light .mock-nav b{color:#334155}.mock-nav button{margin-left:auto;border:1px solid rgba(139,92,246,.35);background:rgba(139,92,246,.14);color:#d8c4ff;padding:6px 9px;border-radius:9px;font-size:10px;font-weight:900}.light .mock-nav button{color:#5b21b6;background:#ede9fe}.mock-inner{display:grid;grid-template-columns:72px 1fr;height:348px}.mock-inner aside{display:grid;align-content:start;gap:11px;padding:16px 12px;background:rgba(0,0,0,.24)}.light .mock-inner aside{background:#eef2ff}.mock-inner aside i{height:28px;border-radius:8px;background:rgba(255,255,255,.09)}.mock-inner aside i.active{background:linear-gradient(135deg,#4f46e5,#8b5cf6)}.mock-inner main{padding:18px}.mock-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}.mock-header small{display:block;color:#9a7cff;font-weight:900;font-size:10px;text-transform:uppercase;letter-spacing:.12em}.mock-header strong{display:block;color:#fff;font-size:17px}.light .mock-header strong{color:#111827}.mock-date{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);color:#cbd5e1;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:900}.light .mock-date{color:#475569;background:#eef2ff;border-color:#dbe4f0}.mock-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:13px}.mock-kpis div{padding:12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}.mock-kpis b{display:block;font-size:22px;color:#fff}.mock-kpis span{color:#aeb8d2;font-size:10px}.mini-chart{height:72px;display:flex;align-items:end;gap:8px;padding:12px;margin-bottom:12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}.mini-chart span{flex:1;min-height:18%;border-radius:999px 999px 4px 4px;background:linear-gradient(180deg,#a78bfa,#4f46e5);box-shadow:0 0 16px rgba(139,92,246,.28)}.mock-table-real,.schedule-mini{display:grid;gap:8px}.mock-table-real p,.schedule-mini p{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);font-size:12px}.light .mock-table-real p{background:#eef2ff;border-color:#dde5f3}.mock-table-real em,.schedule-mini em{font-style:normal;font-size:10px;font-weight:900;color:#76f7a0;background:rgba(34,197,94,.13);padding:5px 7px;border-radius:999px}.progress-card{padding:15px;border-radius:15px;background:#fff;border:1px solid #dfe7f5;margin-bottom:12px}.progress-card b{display:block;margin-bottom:10px}.progress-card div{height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden}.progress-card div span{display:block;height:100%;background:linear-gradient(90deg,#4f46e5,#8b5cf6)}.progress-card small{display:block;color:#64748b;margin-top:8px}.client-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.client-grid div{border:1px solid #dfe7f5;background:#fff;border-radius:13px;padding:10px}.client-grid b{display:block;color:#111827;font-size:18px}.client-grid span{color:#64748b;font-size:10px}.coverage-meter{height:13px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:13px 0}.coverage-meter span{display:block;width:78%;height:100%;background:linear-gradient(90deg,#22c55e,#8b5cf6)}.ai-chip{padding:12px;border:1px solid rgba(168,85,247,.4);background:rgba(139,92,246,.15);color:#dccbff;border-radius:14px;font-weight:900;font-size:12px}.project-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.project-tags span{color:#d8c4ff;border:1px solid rgba(139,92,246,.28);background:rgba(139,92,246,.1);border-radius:999px;padding:7px 10px;font-size:12px;font-weight:900}.light-ui{background:#edf2ff;color:#101629}.light-ui p{color:#526071}.light-ui .project-tags span{color:#5b21b6;border-color:#ddd6fe;background:#f3f0ff}.violet-ui{background:linear-gradient(145deg,rgba(76,29,149,.7),rgba(13,19,41,.9))}
.faq-contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}.accordion{margin-top:28px;border:1px solid rgba(255,255,255,.1);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.035)}.accordion button{width:100%;display:flex;justify-content:space-between;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.08);padding:20px 24px;color:#f7faff;font-size:16px;font-weight:850;text-align:left;cursor:pointer}.accordion div{max-height:0;overflow:hidden;transition:.3s}.accordion div p{color:#aeb8d2;padding:0 24px 20px}.accordion .open+div{max-height:120px}.premium-contact{position:relative;overflow:hidden;padding:0;background:linear-gradient(145deg,rgba(13,19,41,.96),rgba(9,13,31,.92)),radial-gradient(circle at 20% 0,rgba(139,92,246,.32),transparent 38%);border:1px solid rgba(168,85,247,.24);border-radius:28px;box-shadow:0 35px 120px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.09)}.contact-glow{position:absolute;width:360px;height:360px;right:-140px;top:-140px;background:radial-gradient(circle,rgba(139,92,246,.34),transparent 66%);filter:blur(8px);pointer-events:none}.contact-head{position:relative;padding:38px 38px 24px;border-bottom:1px solid rgba(255,255,255,.08)}.contact-head h2{font-size:clamp(34px,3.6vw,52px);letter-spacing:-.055em;line-height:1.02;margin-bottom:12px}.contact-head p{color:#b7c1da;max-width:680px;font-size:16px}.premium-contact form{position:relative;padding:30px 38px 38px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}label{display:grid;gap:8px;color:#d4dcf4;font-weight:800;font-size:13px;margin-bottom:16px}.premium-contact label span{color:#e8edff;font-size:13px}input,select,textarea{width:100%;background:rgba(4,7,18,.72);border:1px solid rgba(255,255,255,.12);border-radius:12px;color:#fff;padding:15px;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:.2s}select option{color:#111827}input:focus,select:focus,textarea:focus{border-color:rgba(139,92,246,.75);box-shadow:0 0 0 4px rgba(139,92,246,.14)}textarea{min-height:150px;resize:vertical}.form-footer{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;margin-top:18px}.micro-proof{padding:14px 16px;border-radius:15px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04)}.micro-proof b{display:block;color:#fff;font-size:13px;margin-bottom:4px}.micro-proof span{color:#aeb8d2;font-size:12px}.form-footer .btn{min-width:210px}.premium-contact small{display:block;text-align:center;color:#8e99b4;margin-top:14px}
.cta{position:relative;display:flex;justify-content:space-between;align-items:center;gap:30px;overflow:hidden;padding:42px;border-radius:28px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(255,255,255,.035));margin-bottom:80px}.cta h2{font-size:32px}.cta p{color:#aeb8d2}.cta-cube{position:absolute;right:190px;bottom:-42px;width:120px;height:120px;border:2px solid rgba(168,85,247,.8);transform:rotate(45deg);box-shadow:0 0 40px #8b5cf6}.footer{display:grid;grid-template-columns:1.8fr repeat(3,1fr);gap:42px;padding:58px 5vw;border-top:1px solid rgba(255,255,255,.08);background:rgba(4,6,18,.55)}.footer p{color:#aeb8d2;max-width:360px;margin:16px 0}.footer h4{margin-bottom:14px}.footer a:not(.brand){display:block;color:#aeb8d2;margin:9px 0}.socials{display:flex;gap:10px}.socials span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);color:#cbd5e1}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media (max-width:1200px){.hero{grid-template-columns:1fr}.dashboard-shell{margin-left:0}.premium-strip,.process-grid,.detailed-portfolio-grid{grid-template-columns:repeat(2,1fr)}.solutions,.faq-contact,.pro-app-preview{grid-template-columns:1fr}}
@media (max-width:760px){
  body{background:radial-gradient(circle at 50% -4%,rgba(124,58,237,.34),transparent 31%),radial-gradient(circle at 110% 18%,rgba(56,189,248,.12),transparent 30%),linear-gradient(180deg,#030512 0%,#070a18 46%,#050716 100%)}.orb{filter:blur(55px);opacity:.28}.orb-one{width:260px;height:260px;left:-120px;top:130px}.orb-two{width:240px;height:240px;right:-130px;top:360px}.orb-three{display:none}.site-header{padding:16px 22px}.brand{font-size:21px}.brand img{width:36px}.menu-toggle{display:flex}.nav-menu,.header-actions{display:none}.nav-menu.open{display:flex;position:absolute;left:20px;right:20px;top:74px;flex-direction:column;padding:22px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#080c1f}.hero{display:block;min-height:auto;padding:54px 22px;gap:34px}.hero h1{font-size:46px;line-height:1;letter-spacing:-.065em}.hero p{font-size:16px}.hero-buttons{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:34px}.hero-buttons .btn{width:100%;min-height:54px}.trust-block,.grid-floor,.holo-cube{display:none}.hero-stage{min-height:auto}.dashboard-shell{grid-template-columns:1fr;border-radius:22px;min-height:auto;box-shadow:0 24px 70px rgba(0,0,0,.38),0 0 70px rgba(124,58,237,.16)}.dash-sidebar{display:none}.dash-content{padding:18px}.dash-profile{display:none}.metrics,.dash-panels,.premium-strip,.stats,.process-grid,.benefit-list,.pricing-grid,.detailed-portfolio-grid,.faq-contact,.form-grid,.form-footer,.footer{grid-template-columns:1fr}.metrics{gap:12px}.metrics article{padding:16px}.shift{grid-template-columns:1fr}.shift em{justify-self:start;width:max-content}.chart{height:190px}.chart svg{height:150px}.premium-strip,.stats,.section,.cta,.footer{margin-left:22px;margin-right:22px}.premium-strip{margin-top:26px}.premium-strip article,.stats div{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.section{padding:80px 0}.section-heading{text-align:left;margin-bottom:34px}.section-heading h2,.solution-copy h2,.faq-column h2{font-size:38px}.section-heading p,.solution-copy p{font-size:16px}.solution-tabs{overflow-x:auto;flex-wrap:nowrap}.solution-tabs button{white-space:nowrap}.app-frame{min-height:auto}.app-body{grid-template-columns:1fr}.app-sidebar{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.app-sidebar span{white-space:nowrap}.app-main{padding:16px}.app-main-head{display:grid;padding:18px}.mini-kpi{text-align:left;width:100%}.time-card{grid-template-columns:1fr}.time-card em{justify-self:start}.insight-row{grid-template-columns:1fr}.price-card,.project-card,.contact-card,.solution-board,.process-grid article{border-radius:22px}.price-card{padding:28px}.price-card h3{font-size:38px}.real-mock{height:345px}.mock-inner{height:303px;grid-template-columns:52px 1fr}.mini-chart,.client-grid{display:none}.contact-head,.premium-contact form{padding-left:24px;padding-right:24px}.form-footer .btn{width:100%;min-width:0}.cta{flex-direction:column;align-items:flex-start}
}

/* =========================================================
   Reference-matched homepage polish
   ========================================================= */

body{
  background:
    radial-gradient(circle at 54% 18%, rgba(88,28,135,.28), transparent 32%),
    radial-gradient(circle at 76% 72%, rgba(109,40,217,.20), transparent 34%),
    radial-gradient(circle at 8% 45%, rgba(76,29,149,.26), transparent 42%),
    linear-gradient(180deg,#050615 0%,#08071c 48%,#070614 100%) !important;
}

.site-header{
  position:absolute !important;
  top:0;
  left:0;
  right:0;
  background:transparent !important;
  border-bottom:0 !important;
  backdrop-filter:none !important;
  padding:42px 5.2vw 20px !important;
  z-index:50;
}

.reference-brand{
  gap:14px !important;
  font-size:31px !important;
  font-weight:950 !important;
  letter-spacing:-.06em !important;
}

.reference-brand img{
  width:55px !important;
  height:55px !important;
  filter:
    drop-shadow(0 0 10px rgba(34,211,238,.45))
    drop-shadow(0 0 18px rgba(139,92,246,.45)) !important;
}

.reference-brand b{
  color:#8b5cf6 !important;
}

.nav-menu{
  gap:44px !important;
  font-size:18px !important;
  color:#d7d9e8 !important;
  margin-left:auto;
  margin-right:34px;
}

.nav-menu a:nth-child(n+5){
  display:none;
}

.header-actions .signin{
  display:none !important;
}

.header-actions .btn{
  padding:15px 28px !important;
  font-size:18px !important;
  border-radius:10px !important;
  box-shadow:0 14px 36px rgba(124,58,237,.38) !important;
}

/* Hero layout like reference image */
.hero{
  min-height:960px !important;
  padding:145px 5.2vw 70px !important;
  display:grid !important;
  grid-template-columns:.78fr 1.42fr !important;
  gap:42px !important;
  align-items:center !important;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  left:29%;
  top:7%;
  width:48vw;
  height:48vw;
  background:radial-gradient(circle,rgba(124,58,237,.24),transparent 62%);
  filter:blur(30px);
  pointer-events:none;
  z-index:0;
}

.hero-copy{
  max-width:560px !important;
  position:relative;
  z-index:9;
}

.eyebrow{
  font-size:13px !important;
  padding:12px 20px !important;
  border-radius:999px !important;
  border:1px solid rgba(139,92,246,.55) !important;
  background:rgba(18,12,42,.68) !important;
  color:#dccbff !important;
  margin-bottom:46px !important;
  letter-spacing:.105em !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.hero h1{
  font-size:clamp(54px,5.05vw,86px) !important;
  line-height:.98 !important;
  letter-spacing:-.085em !important;
  margin-bottom:32px !important;
  text-shadow:0 22px 48px rgba(0,0,0,.35);
}

.hero h1 em{
  background:linear-gradient(92deg,#4f65ff 0%,#7c3aed 44%,#a855f7 100%) !important;
  -webkit-background-clip:text !important;
  color:transparent !important;
}

.hero p{
  max-width:520px !important;
  font-size:18px !important;
  line-height:1.55 !important;
  color:#c9cde0 !important;
  margin-bottom:38px !important;
}

.hero-buttons{
  gap:22px !important;
  margin-bottom:70px !important;
}

.hero-buttons .btn{
  min-width:220px;
  height:64px;
  border-radius:11px !important;
  font-size:18px !important;
}

.hero-buttons .btn-glass{
  min-width:205px;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.20) !important;
}

.trust-block p{
  color:#aeb4ca !important;
  letter-spacing:.31em !important;
  font-size:12px !important;
  margin-bottom:18px !important;
}

.trust-logos{
  color:#aeb4c7 !important;
  gap:22px !important;
  font-size:14px;
}

/* Hero right side */
.hero-stage{
  min-height:680px !important;
  position:relative;
  perspective:1600px;
  transform-style:preserve-3d;
  z-index:6;
}

/* Reference-style large cube behind dashboard */
.hero-stage::after{
  content:"";
  position:absolute;
  left:-11%;
  top:4%;
  width:520px;
  height:520px;
  border:3px solid rgba(139,92,246,.58);
  transform:perspective(900px) rotateX(-12deg) rotateY(31deg) rotateZ(0deg);
  box-shadow:
    0 0 24px rgba(139,92,246,.75),
    0 0 90px rgba(139,92,246,.24),
    inset 0 0 45px rgba(56,189,248,.08);
  opacity:.78;
  z-index:0;
  pointer-events:none;
}

.hero-stage::before{
  content:"";
  position:absolute;
  left:-11%;
  top:4%;
  width:520px;
  height:520px;
  background:
    linear-gradient(90deg,rgba(139,92,246,.55),transparent 40%),
    linear-gradient(180deg,rgba(56,189,248,.16),transparent 55%);
  clip-path:polygon(0 20%,50% 0,100% 20%,100% 78%,50% 100%,0 78%);
  opacity:.25;
  filter:blur(.4px);
  z-index:0;
  pointer-events:none;
}

.grid-floor{
  left:-210px !important;
  right:-120px !important;
  bottom:4px !important;
  height:360px !important;
  opacity:.25 !important;
  z-index:0 !important;
}

.holo-cube,
.logo-3d-cube,
.hero-logo-cube,
.hero-cube-lines{
  display:none !important;
}

/* Dashboard like screenshot */
.dashboard-shell{
  z-index:4 !important;
  margin-left:78px !important;
  width:min(100%,980px);
  min-height:590px !important;
  grid-template-columns:150px minmax(0,1fr) !important;
  border-radius:30px !important;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(5,8,24,.94),rgba(7,12,31,.96)) !important;
  border:1px solid rgba(129,140,248,.34) !important;
  box-shadow:
    0 46px 130px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.03),
    0 0 74px rgba(79,70,229,.22),
    inset 0 1px 0 rgba(255,255,255,.065) !important;
  transform:rotateX(1.4deg) rotateY(-3.2deg) rotateZ(.2deg) translateY(12px) !important;
  transform-origin:center;
}

.dashboard-shell::before{
  opacity:.72 !important;
}

.dashboard-shell::after{
  left:11%;
  right:9%;
  bottom:-36px;
  height:75px;
  opacity:.8;
}

.dash-sidebar{
  padding:25px 18px !important;
  background:rgba(3,6,18,.66) !important;
}

.dash-logo img{
  width:36px !important;
  margin-bottom:20px !important;
}

.dash-sidebar a{
  font-size:12px !important;
  padding:12px 12px !important;
  margin-bottom:4px;
}

.dash-sidebar a.active{
  border-radius:9px !important;
  background:linear-gradient(135deg,#5b45ff,#8b35ef) !important;
}

.upgrade-card{
  padding:15px 13px !important;
  border-radius:13px !important;
  background:rgba(255,255,255,.04) !important;
}

.upgrade-card strong{
  font-size:15px !important;
}

.upgrade-card small{
  font-size:11px !important;
  line-height:1.45;
}

.dash-content{
  padding:30px 28px !important;
}

.dash-header{
  margin-bottom:26px !important;
}

.dash-header h3{
  font-size:22px !important;
}

.dash-header p{
  font-size:13px !important;
}

.dash-profile img{
  width:42px !important;
}

.metrics{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important;
  margin-bottom:18px !important;
}

.metrics article{
  min-height:148px;
  padding:17px 16px !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)) !important;
  border:1px solid rgba(255,255,255,.085) !important;
  box-shadow:0 20px 45px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}

.metrics span{
  font-size:12px !important;
}

.metrics strong{
  font-size:34px !important;
}

.metrics small,
.metrics em{
  font-size:11px !important;
}

.dash-panels{
  grid-template-columns:1.08fr 1.35fr !important;
  gap:16px !important;
}

.panel{
  border-radius:16px !important;
  padding:19px 18px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018)) !important;
  border:1px solid rgba(255,255,255,.085) !important;
  box-shadow:0 22px 50px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.04);
}

.panel-title h4{
  font-size:17px !important;
}

.shift{
  font-size:11px !important;
  grid-template-columns:1.1fr .75fr .82fr !important;
}

.chart{
  height:205px !important;
}

.chart svg{
  height:165px !important;
}

.chart-line{
  stroke:#955cff !important;
  stroke-width:5 !important;
}

.chart-area{
  opacity:.85;
}

/* Responsive */
@media (max-width:1280px){
  .hero{
    grid-template-columns:1fr !important;
    padding-top:120px !important;
  }

  .hero-copy{
    max-width:760px !important;
  }

  .dashboard-shell{
    margin-left:0 !important;
    transform:none !important;
    width:100%;
  }

  .hero-stage::before,
  .hero-stage::after{
    left:36%;
    top:-10%;
    opacity:.32;
  }
}

@media (max-width:900px){
  .site-header{
    position:sticky !important;
    padding:16px 22px !important;
    background:rgba(4,6,18,.78) !important;
    backdrop-filter:blur(18px) !important;
  }

  .reference-brand{
    font-size:22px !important;
  }

  .reference-brand img{
    width:38px !important;
    height:38px !important;
  }

  .hero{
    padding:54px 22px 50px !important;
    min-height:auto !important;
  }

  .hero-stage::before,
  .hero-stage::after{
    display:none;
  }

  .metrics,
  .dash-panels{
    grid-template-columns:1fr !important;
  }

  .dashboard-shell{
    grid-template-columns:1fr !important;
  }

  .dash-sidebar{
    display:none !important;
  }
}


/* =========================================================
   Closer reference-match hero update
   - less giant tilted square
   - larger dashboard
   - cube tucked behind dashboard
   - tighter top nav / spacing like reference
   ========================================================= */

.site-header{
  padding:34px 5vw 16px !important;
}

.reference-brand{
  font-size:25px !important;
}

.reference-brand img{
  width:45px !important;
  height:45px !important;
}

.nav-menu{
  gap:40px !important;
  font-size:16px !important;
}

.header-actions .btn{
  padding:14px 24px !important;
  font-size:16px !important;
  border-radius:10px !important;
}

.hero{
  min-height:850px !important;
  padding:126px 5vw 58px !important;
  grid-template-columns:.74fr 1.54fr !important;
  gap:26px !important;
}

.hero-copy{
  max-width:560px !important;
}

.eyebrow{
  margin-bottom:42px !important;
}

.hero h1{
  font-size:clamp(58px,5vw,86px) !important;
  line-height:.98 !important;
}

.hero p{
  max-width:540px !important;
  font-size:17px !important;
}

.hero-stage{
  min-height:660px !important;
}

/* Remove prior oversized flat shape */
.hero-stage::before,
.hero-stage::after{
  display:none !important;
}

/* Build a cleaner wireframe cube behind the dashboard */
.hero-stage .reference-wire-cube,
.hero-stage .reference-wire-cube::before,
.hero-stage .reference-wire-cube::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.hero-stage .reference-wire-cube{
  left:-1%;
  top:11%;
  width:420px;
  height:420px;
  z-index:1;
  opacity:.78;
  transform:perspective(1000px) rotateX(-7deg) rotateY(28deg);
  border:3px solid rgba(139,92,246,.56);
  box-shadow:
    0 0 26px rgba(139,92,246,.78),
    inset 0 0 36px rgba(139,92,246,.10);
}

.hero-stage .reference-wire-cube::before{
  inset:0;
  transform:translate(130px, -72px);
  border:2px solid rgba(82,120,255,.34);
  box-shadow:0 0 34px rgba(56,189,248,.18);
}

.hero-stage .reference-wire-cube::after{
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:
    linear-gradient(25deg,rgba(139,92,246,.34),transparent 42%),
    linear-gradient(120deg,rgba(56,189,248,.16),transparent 55%);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  opacity:.34;
}

/* add connector lines for cube effect */
.hero-stage .reference-wire-cube span{
  position:absolute;
  display:block;
  background:linear-gradient(90deg,rgba(139,92,246,.65),rgba(56,189,248,.28));
  height:2px;
  width:156px;
  transform-origin:left center;
  pointer-events:none;
}
.hero-stage .reference-wire-cube span:nth-child(1){left:0;top:0;transform:translate(0,0) rotate(-29deg);}
.hero-stage .reference-wire-cube span:nth-child(2){right:0;top:0;transform:translate(0,0) rotate(-29deg);}
.hero-stage .reference-wire-cube span:nth-child(3){left:0;bottom:0;transform:translate(0,0) rotate(-29deg);}
.hero-stage .reference-wire-cube span:nth-child(4){right:0;bottom:0;transform:translate(0,0) rotate(-29deg);}

.dashboard-shell{
  width:min(100%,1060px) !important;
  min-height:610px !important;
  margin-left:120px !important;
  z-index:5 !important;
  transform:rotateX(1.3deg) rotateY(-2.6deg) rotateZ(.12deg) translateY(8px) !important;
  border-color:rgba(99,102,241,.44) !important;
  box-shadow:
    0 48px 135px rgba(0,0,0,.68),
    0 0 90px rgba(79,70,229,.28),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.075) !important;
}

.dashboard-shell:hover{
  transform:rotateX(.8deg) rotateY(-1.6deg) rotateZ(.05deg) translateY(0) !important;
}

.dash-sidebar{
  padding-top:30px !important;
}

.dash-content{
  padding:34px 30px !important;
}

.metrics article{
  min-height:160px !important;
}

.dash-panels{
  margin-top:4px;
}

.grid-floor{
  left:-170px !important;
  bottom:0 !important;
  opacity:.23 !important;
}

@media (max-width:1280px){
  .hero{
    grid-template-columns:1fr !important;
    padding-top:112px !important;
  }

  .dashboard-shell{
    margin-left:0 !important;
    width:100% !important;
    transform:none !important;
  }

  .hero-stage .reference-wire-cube{
    left:43%;
    top:-2%;
    opacity:.28;
    width:330px;
    height:330px;
  }
}

@media (max-width:900px){
  .hero-stage .reference-wire-cube{
    display:none !important;
  }
}


/* =========================================================
   RESTORE: strong responsive scaling fix for Solutions section
   ========================================================= */
.solutions{
  grid-template-columns:1fr !important;
  gap:42px !important;
}

.solution-copy{
  max-width:980px;
}

.solution-board{
  max-width:1180px;
  width:100%;
  margin-inline:auto;
  overflow:hidden;
}

.pro-app-preview{
  grid-template-columns:1fr !important;
  gap:22px !important;
}

.app-frame,
.app-main,
.app-main-head,
.schedule-grid,
.time-card,
.insight-row,
.benefit-list{
  min-width:0;
}

.app-body{
  grid-template-columns:132px minmax(0,1fr) !important;
  min-height:auto;
}

.app-main{
  overflow:hidden;
}

.app-main-head{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
}

.app-main-head h4{
  max-width:680px;
  font-size:clamp(19px, 1.6vw, 25px) !important;
  line-height:1.22 !important;
  overflow-wrap:anywhere;
}

.mini-kpi{
  min-width:130px;
}

.time-card{
  grid-template-columns:minmax(110px,.75fr) minmax(140px,1fr) minmax(160px,1fr) !important;
  overflow:hidden;
}

.time-card span,
.time-card b,
.time-card em{
  min-width:0;
  font-size:clamp(12px, .95vw, 15px);
  line-height:1.35;
  overflow-wrap:anywhere;
}

.time-card em{
  white-space:normal;
  justify-self:end;
  text-align:left;
  max-width:100%;
}

.insight-row{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

.benefit-list{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

.benefit-list article{
  min-height:150px;
}

.benefit-list article b,
.benefit-list article span{
  overflow-wrap:anywhere;
}

@media (max-width:1100px){
  .app-body{
    grid-template-columns:1fr !important;
  }

  .app-sidebar{
    display:flex !important;
    overflow-x:auto;
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .app-sidebar span{
    white-space:nowrap;
  }

  .app-main-head{
    grid-template-columns:1fr !important;
  }

  .mini-kpi{
    width:100%;
    text-align:left;
  }

  .time-card{
    grid-template-columns:1fr !important;
  }

  .time-card em{
    justify-self:start;
    width:max-content;
    max-width:100%;
  }

  .benefit-list{
    grid-template-columns:1fr 1fr !important;
  }
}

@media (max-width:700px){
  .solution-board{
    padding:18px;
  }

  .solution-tabs{
    overflow-x:auto;
    flex-wrap:nowrap !important;
  }

  .solution-tabs button{
    white-space:nowrap;
  }

  .benefit-list,
  .insight-row{
    grid-template-columns:1fr !important;
  }
}

/* =========================================================
   RESTORE: real-looking portfolio examples
   ========================================================= */
.realistic-portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
  align-items:stretch;
}

.real-project-card{
  padding:0;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 28px 90px rgba(0,0,0,.28);
  min-width:0;
}

.project-screenshot{
  height:clamp(330px, 28vw, 430px);
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#090d1f;
  min-width:0;
}

.app-window-bar{
  height:46px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 18px;
  background:rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.window-dots{
  display:flex;
  gap:7px;
}

.window-dots span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#a78bfa;
}

.app-window-bar strong{
  color:#e8edff;
  font-size:13px;
  letter-spacing:-.02em;
}

.app-window-bar button{
  margin-left:auto;
  border:1px solid rgba(139,92,246,.36);
  background:rgba(139,92,246,.16);
  color:#e9ddff;
  border-radius:10px;
  padding:7px 10px;
  font-size:11px;
  font-weight:900;
}

.real-app-layout{
  height:calc(100% - 46px);
  display:grid;
  grid-template-columns:clamp(76px, 7vw, 132px) minmax(0,1fr);
}

.real-sidebar{
  padding:16px 12px;
  display:grid;
  align-content:start;
  gap:9px;
  background:#070b1b;
  border-right:1px solid rgba(255,255,255,.08);
}

.side-logo{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:linear-gradient(135deg,#4f46e5,#8b5cf6);
  color:#fff;
  font-size:12px;
  font-weight:950;
  letter-spacing:-.04em;
  margin-bottom:12px;
}

.nav-real a{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 10px;
  border-radius:11px;
  color:#aeb8d2;
  font-size:11px;
  font-weight:850;
  line-height:1;
  border:1px solid transparent;
  min-width:0;
}

.nav-real a.active{
  color:#fff;
  background:linear-gradient(135deg,#4f46e5,#8b5cf6);
  box-shadow:0 12px 26px rgba(139,92,246,.25);
}

.nav-real a i{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:rgba(255,255,255,.08);
  font-style:normal;
  font-size:10px;
  flex:0 0 auto;
}

.nav-real a span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.real-main{
  padding:22px;
  overflow:hidden;
  min-width:0;
}

.real-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}

.real-header small{
  display:block;
  color:#a78bfa;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:900;
}

.real-header h4{
  margin-top:4px;
  font-size:clamp(15px, 1.1vw, 20px);
  line-height:1.15;
  color:#fff;
  letter-spacing:-.04em;
  overflow-wrap:anywhere;
}

.real-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  background:linear-gradient(135deg,#22d3ee,#8b5cf6);
}

.real-kpi-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}

.real-kpi-row div{
  min-width:0;
  padding:clamp(10px, 1vw, 16px);
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

.real-kpi-row b{
  display:block;
  color:#fff;
  font-size:clamp(18px, 1.7vw, 25px);
  margin-bottom:3px;
}

.real-kpi-row span{
  color:#aeb8d2;
  font-size:clamp(9px, .75vw, 11px);
}

.real-content-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(110px,.8fr);
  gap:12px;
}

.real-table,
.shift-list-real{
  display:grid;
  gap:9px;
}

.real-table p,
.shift-list-real p{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:12px 13px;
  border-radius:13px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  min-width:0;
}

.real-table b,
.shift-list-real b{
  color:#dfe6ff;
  font-size:12px;
  min-width:0;
  overflow-wrap:anywhere;
}

.status,
.shift-list-real em{
  border-radius:999px;
  padding:6px 8px;
  font-size:10px;
  font-weight:900;
  white-space:normal;
  text-align:center;
}

.status.progress{color:#7dd3fc;background:rgba(56,189,248,.13);}
.status.approved{color:#86efac;background:rgba(34,197,94,.14);}
.status.pending{color:#fdba74;background:rgba(251,146,60,.14);}

.real-chart-card{
  border-radius:15px;
  padding:13px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}

.bar-chart{
  height:120px;
  display:flex;
  align-items:end;
  gap:8px;
  margin-bottom:10px;
}

.bar-chart i{
  flex:1;
  border-radius:999px 999px 4px 4px;
  background:linear-gradient(180deg,#a78bfa,#4f46e5);
  box-shadow:0 0 18px rgba(139,92,246,.32);
}

.real-chart-card small{
  color:#aeb8d2;
  font-size:11px;
}

.project-copy{
  padding:clamp(18px, 1.7vw, 24px);
  min-width:0;
}

.project-copy h3{
  font-size:24px;
  margin-bottom:8px;
  overflow-wrap:anywhere;
}

.project-copy p{
  color:#b8c1d9;
  margin-bottom:18px;
  font-size:clamp(14px, 1vw, 16px);
  line-height:1.55;
  overflow-wrap:anywhere;
}

.project-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

.project-tags span{
  color:#d8c4ff;
  border:1px solid rgba(139,92,246,.28);
  background:rgba(139,92,246,.1);
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  font-weight:900;
}

.light-project{
  background:#f4f7ff !important;
  color:#111827 !important;
}

.client-screen,
.light-layout{
  background:#f7f9ff;
}

.light-bar{
  background:#e8eef8;
  border-bottom-color:#d8e0ef;
}

.light-bar strong,
.light-project .real-header h4,
.light-project .real-kpi-row b,
.light-project .real-table b,
.light-project .project-copy h3{
  color:#0f172a !important;
}

.light-side{
  background:#eef2ff;
  border-right-color:#d8e0ef;
}

.light-side.nav-real a{
  color:#64748b;
}

.light-side.nav-real a.active{
  color:#fff;
}

.light-project .project-copy p{
  color:#334155 !important;
}

.light-project .project-tags span{
  color:#5b21b6 !important;
  background:#ede9fe !important;
  border-color:#c4b5fd !important;
}

.small-action{
  border:1px solid #ddd6fe;
  color:#5b21b6;
  background:#f3f0ff;
  border-radius:10px;
  padding:8px 10px;
  font-weight:900;
  font-size:11px;
}

.timeline-card{
  background:#fff;
  border:1px solid #dfe7f5;
  border-radius:16px;
  padding:17px;
  margin-bottom:12px;
}

.timeline-title{
  display:flex;
  justify-content:space-between;
  color:#111827;
  margin-bottom:12px;
}

.progress-track{
  height:10px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
  margin-bottom:10px;
}

.progress-track i{
  display:block;
  width:72%;
  height:100%;
  background:linear-gradient(90deg,#4f46e5,#8b5cf6);
}

.timeline-card small{color:#475569;}

.client-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-bottom:12px;
}

.client-detail-grid div{
  background:#fff;
  border:1px solid #dfe7f5;
  border-radius:13px;
  padding:12px;
}

.client-detail-grid b{
  display:block;
  color:#111827;
  font-size:20px;
}

.client-detail-grid span{color:#475569;font-size:11px;}

.client-table p{
  background:#eef2ff;
  border-color:#dfe7f5;
}

.violet-project{
  background:linear-gradient(145deg,rgba(76,29,149,.72),rgba(13,19,41,.95));
}

.schedule-screen{
  background:linear-gradient(145deg,#1b123e,#0b1027 62%,#2b0f68);
}

.schedule-layout{background:transparent;}
.schedule-side{background:rgba(5,7,22,.6);}

.coverage-badge{
  padding:10px 13px;
  border-radius:14px;
  background:rgba(34,197,94,.15);
  color:#86efac;
  font-weight:900;
}

.shift-list-real p{
  grid-template-columns:.9fr .9fr auto;
}

.shift-list-real span{
  color:#cbd5e1;
  font-size:12px;
}

.shift-list-real em{
  font-style:normal;
  color:#86efac;
  background:rgba(34,197,94,.14);
}

.shift-list-real em.open{
  color:#fdba74;
  background:rgba(251,146,60,.14);
}

.ai-recommendation{
  padding:15px;
  border-radius:16px;
  border:1px solid rgba(168,85,247,.42);
  background:rgba(139,92,246,.16);
}

.ai-recommendation strong{
  display:block;
  color:#e9ddff;
  margin-bottom:6px;
}

.ai-recommendation p{
  color:#cfc7e8;
  font-size:12px;
}

@media (max-width:1400px){
  .realistic-portfolio-grid{
    grid-template-columns:1fr;
  }

  .real-project-card{
    max-width:980px;
    width:100%;
    margin-inline:auto;
  }

  .project-screenshot{
    height:430px;
  }

  .real-app-layout{
    grid-template-columns:132px minmax(0,1fr);
  }

  .real-header h4{font-size:20px;}
  .real-kpi-row b{font-size:25px;}
}

@media (max-width:900px){
  .project-screenshot{height:390px;}

  .real-app-layout{
    grid-template-columns:72px minmax(0,1fr);
  }

  .nav-real{
    padding:14px 10px;
  }

  .nav-real .side-logo{
    width:38px;
    height:38px;
    font-size:10px;
  }

  .nav-real a{
    justify-content:center;
    padding:9px;
  }

  .nav-real a span{
    display:none;
  }

  .nav-real a i{
    width:22px;
    height:22px;
  }

  .real-content-grid{
    grid-template-columns:1fr;
  }

  .real-chart-card{
    display:none;
  }
}

@media (max-width:620px){
  .project-screenshot{
    height:auto;
    min-height:0;
  }

  .app-window-bar{
    height:auto;
    min-height:44px;
    padding:10px 12px;
  }

  .app-window-bar strong{
    font-size:11px;
  }

  .app-window-bar button{
    display:none;
  }

  .real-app-layout{
    height:auto;
    min-height:300px;
    grid-template-columns:54px minmax(0,1fr);
  }

  .real-main{
    padding:14px;
  }

  .real-header{
    align-items:flex-start;
    margin-bottom:12px;
  }

  .real-header h4{
    font-size:16px;
  }

  .real-avatar,
  .coverage-badge,
  .small-action{
    display:none;
  }

  .real-kpi-row{
    grid-template-columns:1fr 1fr;
  }

  .real-kpi-row div:nth-child(3){
    display:none;
  }

  .real-table p,
  .shift-list-real p{
    grid-template-columns:1fr;
    gap:7px;
  }

  .status,
  .shift-list-real em{
    width:max-content;
    max-width:100%;
  }

  .timeline-card{
    padding:13px;
  }

  .client-detail-grid{
    display:none;
  }

  .project-tags{
    gap:7px;
  }

  .project-tags span{
    font-size:11px;
  }
}


/* =========================================================
   Final icon upgrade: polished gradient SVG icons
   ========================================================= */
.process-grid i.premium-svg-icon{
  width:62px !important;
  height:62px !important;
  border-radius:18px !important;
  display:grid !important;
  place-items:center !important;
  margin:28px 0 22px !important;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.12),transparent 42%),
    linear-gradient(145deg,rgba(13,19,41,.92),rgba(42,25,88,.82)) !important;
  border:1px solid rgba(139,92,246,.28) !important;
  box-shadow:
    0 18px 42px rgba(76,29,149,.24),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -18px 35px rgba(0,0,0,.18) !important;
  position:relative;
  overflow:hidden;
}

.process-grid i.premium-svg-icon::before{
  content:"";
  position:absolute;
  inset:-35%;
  background:radial-gradient(circle,rgba(139,92,246,.34),transparent 62%);
  filter:blur(8px);
}

.process-grid i.premium-svg-icon svg{
  width:28px;
  height:28px;
  position:relative;
  z-index:1;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 8px currentColor);
}

.process-grid article:nth-child(1) i.premium-svg-icon{color:#a78bfa !important;}
.process-grid article:nth-child(2) i.premium-svg-icon{color:#38bdf8 !important;}
.process-grid article:nth-child(3) i.premium-svg-icon{color:#22c55e !important;}
.process-grid article:nth-child(4) i.premium-svg-icon{color:#f59e0b !important;}

/* Upgrade feature strip icons too */
.premium-strip i{
  width:58px !important;
  height:58px !important;
  border-radius:18px !important;
  font-size:24px !important;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.12),transparent 42%),
    linear-gradient(145deg,rgba(13,19,41,.94),rgba(42,25,88,.82)) !important;
  border:1px solid rgba(139,92,246,.26) !important;
  box-shadow:
    0 18px 42px rgba(76,29,149,.22),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  text-shadow:0 0 12px currentColor;
}

/* =========================================================
   Replace flat tilted background shape with a real cube
   ========================================================= */
.hero-stage .reference-wire-cube,
.hero-stage .reference-wire-cube::before,
.hero-stage .reference-wire-cube::after{
  display:none !important;
}

.reference-cube-3d{
  position:absolute;
  left:-2%;
  top:10%;
  width:460px;
  height:460px;
  z-index:1;
  pointer-events:none;
  opacity:.82;
  transform:perspective(1100px) rotateX(-8deg) rotateY(30deg);
  filter:
    drop-shadow(0 0 22px rgba(139,92,246,.72))
    drop-shadow(0 0 58px rgba(56,189,248,.20));
}

.reference-cube-3d .cube-layer{
  position:absolute;
  width:330px;
  height:330px;
  left:56px;
  top:64px;
  border:3px solid rgba(139,92,246,.68);
  background:
    linear-gradient(135deg,rgba(139,92,246,.10),rgba(56,189,248,.04));
  box-shadow:
    inset 0 0 36px rgba(139,92,246,.12),
    0 0 30px rgba(139,92,246,.36);
  transform:rotate(45deg);
}

.reference-cube-3d .cube-back{
  left:126px;
  top:0;
  border-color:rgba(56,189,248,.38);
  opacity:.7;
}

.reference-cube-3d .cube-front{
  border-color:rgba(139,92,246,.78);
  opacity:.92;
}

.reference-cube-3d .cube-connector{
  position:absolute;
  height:3px;
  width:104px;
  background:linear-gradient(90deg,rgba(139,92,246,.8),rgba(56,189,248,.35));
  transform-origin:left center;
  box-shadow:0 0 14px rgba(139,92,246,.7);
}

.reference-cube-3d .c1{left:220px;top:64px;transform:rotate(-28deg);}
.reference-cube-3d .c2{left:56px;top:228px;transform:rotate(-28deg);}
.reference-cube-3d .c3{left:386px;top:228px;transform:rotate(-28deg);}
.reference-cube-3d .c4{left:220px;top:392px;transform:rotate(-28deg);}

.reference-cube-3d .cube-core{
  position:absolute;
  width:170px;
  height:170px;
  left:144px;
  top:142px;
  transform:rotate(45deg);
  border:1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 50% 50%,rgba(167,139,250,.22),transparent 55%),
    linear-gradient(135deg,rgba(139,92,246,.11),rgba(56,189,248,.06));
  box-shadow:
    inset 0 0 38px rgba(139,92,246,.16),
    0 0 44px rgba(139,92,246,.24);
}

@media (max-width:1280px){
  .reference-cube-3d{
    left:44%;
    top:-4%;
    width:330px;
    height:330px;
    opacity:.28;
  }

  .reference-cube-3d .cube-layer{
    width:230px;
    height:230px;
    left:40px;
    top:52px;
  }

  .reference-cube-3d .cube-back{
    left:92px;
    top:0;
  }

  .reference-cube-3d .cube-core{
    width:112px;
    height:112px;
    left:108px;
    top:112px;
  }

  .reference-cube-3d .cube-connector{
    display:none;
  }
}

@media (max-width:900px){
  .reference-cube-3d{
    display:none !important;
  }
}


/* =========================================================
   Home hero update:
   - remove cube background
   - add a premium table/desk surface under dashboard
   ========================================================= */

/* Remove all cube background elements from homepage */
.reference-cube-3d,
.reference-wire-cube,
.logo-3d-cube,
.holo-cube,
.hero-stage::before,
.hero-stage::after{
  display:none !important;
}

/* Make hero stage feel grounded */
.hero-stage{
  position:relative;
  perspective:1500px;
  isolation:isolate;
}

/* Table / desk surface underneath dashboard */
.hero-stage .dashboard-table{
  position:absolute;
  left:5%;
  right:-4%;
  bottom:28px;
  height:150px;
  z-index:1;
  pointer-events:none;
  transform:
    perspective(900px)
    rotateX(64deg)
    rotateZ(-1.5deg);
  transform-origin:center bottom;
  border-radius:32px;
  background:
    linear-gradient(135deg,
      rgba(139,92,246,.18),
      rgba(10,15,35,.36) 42%,
      rgba(56,189,248,.10));
  border:1px solid rgba(167,139,250,.22);
  box-shadow:
    0 35px 90px rgba(0,0,0,.46),
    0 0 70px rgba(124,58,237,.22),
    inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
}

.hero-stage .dashboard-table::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(139,92,246,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,.18) 1px, transparent 1px);
  background-size:52px 52px;
  opacity:.46;
  mask-image:linear-gradient(to top, black, transparent 96%);
}

.hero-stage .dashboard-table::after{
  content:"";
  position:absolute;
  left:20%;
  right:14%;
  top:12%;
  height:38%;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(139,92,246,.38), transparent 68%);
  filter:blur(16px);
}

/* Contact shadow where dashboard meets table */
.hero-stage .dashboard-contact-shadow{
  position:absolute;
  left:18%;
  right:4%;
  bottom:112px;
  height:76px;
  z-index:2;
  pointer-events:none;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,.58),
      rgba(76,29,149,.24) 42%,
      transparent 72%);
  filter:blur(18px);
  transform:rotate(-1deg);
}

/* Keep dashboard in front of table */
.dashboard-shell{
  position:relative;
  z-index:5 !important;
  transform:
    rotateX(2deg)
    rotateY(-2.5deg)
    rotateZ(.12deg)
    translateY(-8px) !important;
  box-shadow:
    0 38px 90px rgba(0,0,0,.52),
    0 28px 80px rgba(76,29,149,.22),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.075) !important;
}

/* Subtle bottom rim so dashboard feels standing on surface */
.dashboard-shell::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:-18px;
  height:36px;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,.58),
      rgba(139,92,246,.18),
      transparent 72%);
  filter:blur(12px);
  z-index:-1;
  opacity:.95;
}

/* So old floor grid doesn't compete with table */
.grid-floor{
  display:none !important;
}

@media (max-width:1200px){
  .hero-stage .dashboard-table{
    left:0;
    right:0;
    bottom:12px;
    height:120px;
  }

  .hero-stage .dashboard-contact-shadow{
    left:12%;
    right:12%;
    bottom:76px;
  }
}

@media (max-width:900px){
  .hero-stage .dashboard-table,
  .hero-stage .dashboard-contact-shadow{
    display:none !important;
  }

  .dashboard-shell{
    transform:none !important;
  }
}


/* =========================================================
   Replace table effect with floating tablet effect
   ========================================================= */

.hero-stage .dashboard-table,
.hero-stage .dashboard-contact-shadow{
  display:none !important;
}

/* Floating tablet look */
.dashboard-shell{
  position:relative;
  z-index:5 !important;
  transform:
    perspective(1800px)
    rotateY(-8deg)
    rotateX(5deg)
    rotateZ(.2deg)
    translateY(-10px) !important;
  transform-style:preserve-3d;
  border-radius:34px !important;
  border:1px solid rgba(139,92,246,.28) !important;
  background:
    linear-gradient(145deg,
      rgba(3,6,22,.96),
      rgba(5,10,32,.94)) !important;
  box-shadow:
    0 55px 120px rgba(0,0,0,.65),
    0 0 90px rgba(124,58,237,.24),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -24px 50px rgba(0,0,0,.25) !important;
  overflow:visible !important;
}

/* Metallic tablet edge */
.dashboard-shell::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:36px;
  padding:2px;
  background:
    linear-gradient(135deg,
      rgba(139,92,246,.8),
      rgba(56,189,248,.45),
      rgba(139,92,246,.25));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.75;
  pointer-events:none;
}

/* Side thickness */
.dashboard-shell::after{
  content:"";
  position:absolute;
  inset:auto 18px -18px 18px;
  height:22px;
  border-radius:0 0 30px 30px;
  background:
    linear-gradient(to bottom,
      rgba(139,92,246,.24),
      rgba(0,0,0,.55));
  filter:blur(10px);
  opacity:.9;
  z-index:-1;
}

/* Glass reflection */
.dashboard-shell .tablet-glow{
  position:absolute;
  inset:0;
  border-radius:34px;
  overflow:hidden;
  pointer-events:none;
}

.dashboard-shell .tablet-glow::before{
  content:"";
  position:absolute;
  top:-10%;
  left:20%;
  width:38%;
  height:140%;
  background:
    linear-gradient(to right,
      rgba(255,255,255,.12),
      rgba(255,255,255,.02),
      transparent);
  transform:rotate(18deg);
  filter:blur(2px);
  opacity:.55;
}

/* Floating shadow */
.hero-stage::after{
  content:"";
  position:absolute;
  right:6%;
  bottom:4%;
  width:54%;
  height:70px;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,.72),
      rgba(76,29,149,.25) 42%,
      transparent 74%);
  filter:blur(18px);
  z-index:1;
}

@media (max-width:1200px){
  .dashboard-shell{
    transform:
      perspective(1400px)
      rotateY(-5deg)
      rotateX(4deg)
      translateY(-4px) !important;
  }
}

@media (max-width:900px){
  .dashboard-shell{
    transform:none !important;
  }

  .hero-stage::after{
    display:none;
  }
}


/* =========================================================
   Dashboard balance refinements
   ========================================================= */

/* Tone down exaggerated perspective */
.dashboard-shell{
  transform:
    perspective(2200px)
    rotateY(-4deg)
    rotateX(2deg)
    rotateZ(.08deg)
    translateY(-2px) !important;
  width:min(940px,100%);
  margin-left:auto;
  margin-right:0;
}

/* More realistic tablet proportions */
.dashboard-shell{
  border-radius:28px !important;
  overflow:hidden !important;
}

/* Softer glow instead of heavy floating */
.dashboard-shell{
  box-shadow:
    0 24px 60px rgba(0,0,0,.42),
    0 10px 28px rgba(76,29,149,.18),
    0 0 48px rgba(124,58,237,.14),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Reduce metallic border intensity */
.dashboard-shell::before{
  opacity:.42 !important;
}

/* Smaller bottom depth shadow */
.dashboard-shell::after{
  inset:auto 8% -10px 8%;
  height:18px;
  opacity:.55;
  filter:blur(8px);
}

/* More subtle glass reflection */
.dashboard-shell .tablet-glow::before{
  width:22%;
  left:18%;
  opacity:.22;
  filter:blur(1px);
}

/* Improve placement in hero */
.hero-stage{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* Pull dashboard slightly lower/right */
.hero-stage .dashboard-shell{
  position:relative;
  right:-18px;
  top:10px;
}

/* More premium subtle edge */
.dashboard-shell{
  border:1px solid rgba(139,92,246,.16) !important;
}

/* Fix stretched appearance on large monitors */
@media (min-width:1600px){
  .dashboard-shell{
    width:920px;
  }
}

@media (max-width:1200px){
  .dashboard-shell{
    transform:
      perspective(1800px)
      rotateY(-2deg)
      rotateX(1deg)
      translateY(0) !important;
    right:0;
  }
}

/* Mobile = flat clean */
@media (max-width:900px){
  .dashboard-shell{
    width:100%;
    border-radius:24px !important;
    transform:none !important;
    box-shadow:
      0 16px 36px rgba(0,0,0,.34),
      0 0 28px rgba(124,58,237,.10) !important;
  }
}


/* =========================================================
   Final visibility fix for "Message" button/text
   ========================================================= */

/* Darker text and stronger contrast */
.message-btn,
button.message-btn,
.workspace-message,
.client-message-btn{
  color:#5b21b6 !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  text-shadow:none !important;
}

/* Improve button visibility */
.message-btn,
.client-message-btn{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.92),
      rgba(240,232,255,.88)) !important;
  border:1px solid rgba(124,58,237,.34) !important;
  box-shadow:
    0 8px 20px rgba(124,58,237,.12),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* Hover state */
.message-btn:hover,
.client-message-btn:hover{
  color:#4c1d95 !important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,1),
      rgba(235,225,255,.96)) !important;
}


/* =========================================================
   Fix hard-to-read "Message" button in Client Project Workspace
   ========================================================= */

.light-project .app-window-bar button,
.light-project .light-bar button,
.client-screen .app-window-bar button,
.client-screen .light-bar button{
  color:#5b21b6 !important;
  font-weight:900 !important;
  background:linear-gradient(180deg,#ffffff 0%,#f4efff 100%) !important;
  border:2px solid rgba(124,58,237,.38) !important;
  box-shadow:
    0 8px 20px rgba(124,58,237,.14),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  text-shadow:none !important;
  opacity:1 !important;
}

.light-project .app-window-bar button:hover,
.light-project .light-bar button:hover,
.client-screen .app-window-bar button:hover,
.client-screen .light-bar button:hover{
  color:#4c1d95 !important;
  border-color:rgba(124,58,237,.55) !important;
  background:#ffffff !important;
}

/* Also improve the light card top bar contrast overall */
.light-project .app-window-bar strong,
.light-project .light-bar strong,
.client-screen .app-window-bar strong,
.client-screen .light-bar strong{
  color:#0f172a !important;
}

.light-project .window-dots span,
.client-screen .window-dots span{
  background:#8b5cf6 !important;
}


/* =========================================================
   Slightly smaller homepage dashboard/tablet
   ========================================================= */

.hero-dashboard,
.dashboard-tablet,
.hero-visual .dashboard-wrap{
    transform: scale(0.9) rotateY(-10deg) rotateX(4deg) !important;
    transform-origin: center right !important;
}

@media (max-width: 1100px){
    .hero-dashboard,
    .dashboard-tablet,
    .hero-visual .dashboard-wrap{
        transform: scale(0.96) !important;
    }
}

@media (max-width: 768px){
    .hero-dashboard,
    .dashboard-tablet,
    .hero-visual .dashboard-wrap{
        transform: scale(1) !important;
    }
}


/* =========================================================
   Refined hero dashboard sizing
   ========================================================= */

.hero-dashboard,
.dashboard-tablet,
.hero-visual .dashboard-wrap{
    transform: scale(0.84) rotateY(-10deg) rotateX(4deg) !important;
    transform-origin: center right !important;
}

/* Better spacing balance */
.hero-visual{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    padding-right:1rem;
}

/* =========================================================
   Premium logo typography refinement
   ========================================================= */

.logo-text,
.nav-logo-text,
.brand-text{
    font-weight:700 !important;
    letter-spacing:-0.04em !important;
    font-stretch:98%;
    text-rendering:geometricPrecision;
}

/* Make AI slightly thinner/more elegant */
.logo-text span,
.nav-logo-text span,
.brand-text span{
    font-weight:600 !important;
    letter-spacing:-0.02em !important;
    opacity:.95;
}

@media (max-width: 1100px){
    .hero-dashboard,
    .dashboard-tablet,
    .hero-visual .dashboard-wrap{
        transform: scale(0.92) !important;
    }
}

@media (max-width: 768px){
    .hero-dashboard,
    .dashboard-tablet,
    .hero-visual .dashboard-wrap{
        transform: scale(1) !important;
    }
}


/* =========================================================
   STRONGER dashboard reduction + premium logo typography
   ========================================================= */

/* noticeably reduce hero dashboard size */
.hero-dashboard,
.dashboard-tablet,
.hero-visual .dashboard-wrap,
.hero-dashboard-wrapper{
    transform: scale(0.76) rotateY(-11deg) rotateX(5deg) !important;
    transform-origin: center right !important;
    max-width: 980px !important;
}

/* give more breathing room */
.hero-visual{
    padding-right: 3rem !important;
}

/* refine logo typography */
.logo-text,
.brand-text,
.nav-logo-text{
    font-weight: 650 !important;
    letter-spacing: -0.055em !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}

/* AI text thinner */
.logo-text .ai,
.brand-text .ai,
.nav-logo-text .ai{
    font-weight: 500 !important;
    opacity: .92 !important;
}

/* smaller logo overall */
.logo-wrap{
    gap: 10px !important;
}

.logo-wrap img,
.logo-icon{
    width: 38px !important;
    height: 38px !important;
}

@media (max-width: 1200px){
    .hero-dashboard,
    .dashboard-tablet,
    .hero-visual .dashboard-wrap,
    .hero-dashboard-wrapper{
        transform: scale(0.88) !important;
    }
}

@media (max-width: 768px){
    .hero-dashboard,
    .dashboard-tablet,
    .hero-visual .dashboard-wrap,
    .hero-dashboard-wrapper{
        transform: scale(1) !important;
        max-width: 100% !important;
    }
}


/* =========================================================
   Footer
   ========================================================= */

.site-footer{
    width:100%;
    padding:36px 24px;
    margin-top:80px;
    border-top:1px solid rgba(255,255,255,0.08);
    background:rgba(5,5,20,0.72);
    backdrop-filter:blur(12px);
    text-align:center;
}

.site-footer p{
    color:rgba(255,255,255,0.58);
    font-size:13px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    font-weight:600;
    line-height:1.8;
}