*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:#f5f8ff;color:#111827;line-height:1.55;overflow-x:hidden}html[dir=rtl] body{font-family:Tahoma,Arial,sans-serif}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}.page-noise{position:fixed;inset:0;pointer-events:none;z-index:-2;background:radial-gradient(circle at 12% 8%,rgba(37,99,235,.10),transparent 32%),radial-gradient(circle at 88% 20%,rgba(6,182,212,.12),transparent 30%)}a{text-decoration:none;color:inherit}button,input{font:inherit}.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid #e5e7eb}.nav{height:78px;display:flex;align-items:center;gap:26px}.brand{display:flex;align-items:center;gap:11px;font-weight:900;font-size:21px;white-space:nowrap}.brand>b,.panel-brand>b{display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;border-radius:15px;box-shadow:0 12px 28px rgba(37,99,235,.22)}.brand>b{width:46px;height:46px;font-size:24px}.nav nav{display:flex;align-items:center;gap:22px;margin-inline:auto}.nav nav a{font-weight:700;font-size:14px;color:#526075}.nav nav a:hover{color:#2563eb}.nav-actions{display:flex;align-items:center;gap:9px}.icon-btn,.lang-btn,.menu-btn{height:44px;min-width:44px;border:1px solid #dfe5ef;background:#fff;border-radius:13px;font-weight:800;cursor:pointer}.menu-btn{display:none;padding:11px}.menu-btn span{display:block;width:20px;height:2px;background:#111827;margin:4px auto}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:14px;border:1px solid #dfe5ef;font-weight:800;cursor:pointer;background:#fff}.btn.primary{color:#fff;border:0;background:linear-gradient(120deg,#2563eb,#06b6d4);box-shadow:0 14px 32px rgba(37,99,235,.20)}.btn.glass{background:rgba(255,255,255,.72)}.btn.xl{min-height:58px;padding:0 30px}.btn.full{width:100%}.hero{padding:86px 0 72px}.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(460px,.98fr);gap:72px;align-items:center}.eyebrow,.kicker{display:inline-flex;align-items:center;padding:8px 13px;border:1px solid #d9e3f4;border-radius:999px;background:rgba(255,255,255,.7);font-size:12px;font-weight:900;letter-spacing:1.3px;color:#2563eb}.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e;margin-inline-end:8px;box-shadow:0 0 0 5px rgba(34,197,94,.12)}h1{font-size:clamp(52px,5.4vw,76px);line-height:.98;letter-spacing:-4px;margin:25px 0 24px;max-width:700px}h1 span{background:linear-gradient(100deg,#2563eb,#06b6d4);-webkit-background-clip:text;color:transparent}.hero-copy>p{font-size:18px;color:#6b7280;max-width:640px}.hero-actions{display:flex;gap:12px;margin:30px 0 24px}.trust-row{display:flex;flex-wrap:wrap;gap:14px 22px;font-size:13px}.trust-row span{color:#16a34a}.trust-row b{color:#1f2937}.hero-stage{position:relative;min-width:0}.halo{position:absolute;inset:8% 5%;border-radius:50%;background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(6,182,212,.18));filter:blur(48px)}.panel3d{position:relative;z-index:1;padding:22px;border:1px solid rgba(203,213,225,.8);border-radius:28px;background:rgba(255,255,255,.88);box-shadow:0 35px 75px rgba(30,64,175,.16);transform:perspective(1200px) rotateY(-3deg) rotateX(2deg)}html[dir=rtl] .panel3d{transform:perspective(1200px) rotateY(3deg) rotateX(2deg)}.panel-top,.panel-brand,.order-line,.chart-title{display:flex;align-items:center}.panel-top{justify-content:space-between;margin-bottom:18px}.panel-brand{gap:10px}.panel-brand>b{width:42px;height:42px}.panel-brand span{display:grid}.panel-brand small,.chart-title small,.order-line small{color:#8a94a6}.online{display:flex;align-items:center;gap:7px;color:#64748b;font-size:12px}.online i{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.12)}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.metric-grid article,.chart-box,.order-line{border:1px solid #e5eaf2;background:#fff;border-radius:18px}.metric-grid article{padding:18px;display:grid;gap:5px}.metric-grid strong{font-size:28px}.metric-grid em{font-style:normal;color:#16a34a;font-size:12px}.chart-box{padding:18px;margin:12px 0}.chart-title{justify-content:space-between;font-weight:800}.bars{height:110px;display:flex;align-items:end;gap:8px;margin-top:12px}.bars i{flex:1;height:var(--h);min-width:8px;border-radius:8px 8px 3px 3px;background:linear-gradient(#06b6d4,#2563eb)}.order-line{padding:12px 14px;margin-top:9px;gap:12px}.order-line>b{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#eef4ff;color:#2563eb}.order-line>span{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1}.order-line em{font-style:normal;color:#16a34a;font-size:12px;white-space:nowrap}.numbers{background:#fff;border-block:1px solid #e7ebf2}.number-grid{display:grid;grid-template-columns:repeat(4,1fr)}.number-grid div{padding:26px;text-align:center;border-inline-end:1px solid #edf0f5}.number-grid div:last-child{border:0}.number-grid strong,.number-grid span{display:block}.number-grid strong{font-size:24px}.number-grid span{font-size:12px;color:#7b8495}.section{padding:92px 0}.soft{background:rgba(238,244,255,.62)}.section-head{text-align:center;max-width:760px;margin:0 auto 42px}.section-head h2,.demo-cta h2,.contact-card h2,.faq-copy h2{font-size:clamp(34px,4vw,50px);line-height:1.05;letter-spacing:-2px;margin:16px 0}.section-head p,.feature p,.steps p,.faq-copy p,.contact-card p{color:#6b7280}.showcase{display:grid;grid-template-columns:220px 1fr;min-height:520px;border:1px solid #dfe5ef;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 30px 70px rgba(30,64,175,.12)}.mock-side{padding:25px;background:#111827;color:#fff}.mock-side>*{display:block;margin-bottom:16px}.mock-main{padding:28px;min-width:0}.mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mock-stats article,.mock-chart,.mock-list{padding:18px;border:1px solid #e6eaf1;border-radius:18px}.mock-stats strong{display:block;font-size:25px}.mock-content{display:grid;grid-template-columns:1.35fr .65fr;gap:14px;margin-top:14px}.line-chart{height:220px;margin-top:15px;border-radius:14px;background:linear-gradient(180deg,#eef6ff,#fff);position:relative;overflow:hidden}.line-chart:after{content:"";position:absolute;inset:55% -5% auto;height:3px;background:linear-gradient(90deg,#2563eb,#06b6d4);transform:rotate(-7deg)}.mock-list span{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #edf0f4}.center-action{text-align:center;margin-top:26px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feature,.steps article,.plan,.faq-item,.contact-card,.demo-cta{border:1px solid #e0e6ef;background:rgba(255,255,255,.88);box-shadow:0 18px 45px rgba(30,64,175,.07)}.feature{padding:28px;border-radius:22px}.feature>i{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#edf5ff;color:#2563eb;font-style:normal;font-size:20px}.feature h3{margin:18px 0 8px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.steps article{padding:28px;border-radius:22px}.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}.plan{position:relative;padding:30px;border-radius:26px;display:flex;flex-direction:column;min-width:0}.plan.featured{border-color:#60a5fa;transform:translateY(-8px);box-shadow:0 25px 60px rgba(37,99,235,.14)}.popular{position:absolute;top:0;inset-inline-start:0;padding:8px 14px;border-radius:25px 0 16px 0;background:linear-gradient(120deg,#2563eb,#06b6d4);color:#fff;font-size:10px;font-weight:900}.plan-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.plan-top span{padding:7px 11px;background:#f1f5f9;border-radius:999px;color:#64748b;font-size:12px}.plan-price{display:flex;align-items:start;gap:6px;margin:18px 0}.plan-price strong{font-size:58px;line-height:1}.plan-price small{color:#2563eb;font-weight:900}.plan>p{color:#7b8495}.plan ul{list-style:none;padding:0;margin:14px 0 24px;flex:1}.plan li{display:flex;gap:9px;padding:12px 0;border-bottom:1px dashed #e4e8ef}.plan li>b{color:#16a34a}.compare-card{border:1px solid #e0e6ef;border-radius:22px;overflow:hidden;background:#fff}.compare-row{display:grid;grid-template-columns:1.4fr repeat(3,1fr);padding:15px 20px;border-bottom:1px solid #edf0f5}.demo-cta,.contact-card{border-radius:28px;padding:42px;display:flex;align-items:center;justify-content:space-between;gap:30px}.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:32px}.faq-item{border-radius:16px;margin-bottom:10px;overflow:hidden}.faq-item summary{cursor:pointer;padding:18px;font-weight:800}.faq-item p{padding:0 18px 18px;margin:0;color:#6b7280}.contact-actions{display:flex;gap:10px}.footer{padding:50px 0 26px;background:#101827;color:#cbd5e1}.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:30px}.footer h4{color:#fff}.footer a{display:block;margin:9px 0;color:#aeb9c9}.copyright{display:flex;justify-content:space-between;border-top:1px solid #263144;margin-top:35px;padding-top:22px;font-size:12px}.social-float{position:fixed;z-index:45;right:18px;bottom:18px;display:grid;gap:9px}.sf{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;color:#fff;font-weight:900;box-shadow:0 12px 30px rgba(15,23,42,.18)}.sf.wa{background:#22c55e}.sf.tg{background:#0ea5e9}.sf em{display:none}.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px}.modal.open{display:grid}.modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(8px)}.modal-card{position:relative;width:min(520px,100%);background:#fff;border-radius:24px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.2)}.modal-close{position:absolute;top:14px;inset-inline-end:14px;border:0;background:#eef2f7;border-radius:10px;width:38px;height:38px}.modal-card input{width:100%;height:48px;border:1px solid #dce3ec;border-radius:12px;padding:0 13px;margin:6px 0 12px}.reveal{opacity:0;transform:translateY(18px);transition:.55s ease}.reveal.visible{opacity:1;transform:none}[data-theme=dark] body{background:#0b1220;color:#e5edf8}[data-theme=dark] .topbar,[data-theme=dark] .feature,[data-theme=dark] .steps article,[data-theme=dark] .plan,[data-theme=dark] .faq-item,[data-theme=dark] .contact-card,[data-theme=dark] .demo-cta,[data-theme=dark] .showcase,[data-theme=dark] .panel3d,[data-theme=dark] .metric-grid article,[data-theme=dark] .chart-box,[data-theme=dark] .order-line,[data-theme=dark] .compare-card,[data-theme=dark] .modal-card{background:#111b2d;color:#e5edf8;border-color:#26334a}[data-theme=dark] .numbers{background:#0f1929;border-color:#26334a}[data-theme=dark] .icon-btn,[data-theme=dark] .lang-btn,[data-theme=dark] .menu-btn{background:#111b2d;color:#fff;border-color:#26334a}[data-theme=dark] .trust-row b{color:#e5edf8}[data-theme=dark] .soft{background:#0e1727}[data-theme=dark] .btn.glass{background:#152136;color:#fff;border-color:#2a3953}html[dir=rtl] .social-float{right:auto;left:18px}@media(max-width:1050px){.nav nav{display:none;position:absolute;top:78px;inset-inline:24px;padding:14px;background:#fff;border:1px solid #dfe5ef;border-radius:18px;box-shadow:0 18px 45px rgba(15,23,42,.12);flex-direction:column;align-items:stretch}.nav nav.open{display:flex}.menu-btn{display:block}.nav-cta{display:none}.hero-grid{grid-template-columns:1fr;gap:50px}.hero-copy{text-align:center}.hero-copy>p{margin-inline:auto}.hero-actions,.trust-row{justify-content:center}.hero-stage{width:min(680px,100%);margin:auto}.panel3d,html[dir=rtl] .panel3d{transform:none}.feature-grid{grid-template-columns:repeat(2,1fr)}.plans{grid-template-columns:repeat(2,1fr)}.plan.featured{transform:none}.showcase{grid-template-columns:170px 1fr}.faq-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:2fr 1fr 1fr}.footer-grid>div:last-child{display:none}}@media(max-width:700px){.wrap{width:min(100% - 28px,1180px)}.nav{height:68px;gap:7px}.brand{font-size:17px}.brand>b{width:40px;height:40px}.icon-btn{display:none}.nav nav{top:68px;inset-inline:14px}.hero{padding:54px 0 46px}.hero-grid{gap:32px}h1{font-size:44px;letter-spacing:-2.6px}.hero-copy>p{font-size:15px}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.trust-row{gap:9px 14px}.hero-stage{width:100%}.panel3d{padding:15px;border-radius:22px}.metric-grid strong{font-size:22px}.bars{height:78px}.order-line{padding:10px}.order-line>span{display:grid;gap:0}.numbers{overflow:hidden}.number-grid{grid-template-columns:1fr 1fr}.number-grid div{padding:18px 8px}.number-grid div:nth-child(2){border-inline-end:0}.section{padding:68px 0}.section-head{margin-bottom:28px}.section-head h2,.demo-cta h2,.contact-card h2,.faq-copy h2{font-size:34px;letter-spacing:-1.4px}.showcase{grid-template-columns:1fr;min-height:0}.mock-side{display:none}.mock-main{padding:15px}.mock-stats{grid-template-columns:1fr 1fr}.mock-stats article:last-child{display:none}.mock-content{grid-template-columns:1fr}.mock-list{display:none}.feature-grid,.steps,.plans{grid-template-columns:1fr}.feature,.steps article,.plan{padding:22px}.compare-card{overflow-x:auto}.compare-row{min-width:610px}.demo-cta,.contact-card{padding:28px 20px;flex-direction:column;text-align:center}.contact-actions{width:100%;display:grid}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.copyright{flex-direction:column;gap:7px}.social-float{right:10px;bottom:12px}html[dir=rtl] .social-float{left:10px;right:auto}.sf{width:44px;height:44px;border-radius:13px}.modal-card{padding:24px 17px}}@media(max-width:380px){h1{font-size:38px}.brand span{display:none}.metric-grid{grid-template-columns:1fr}.number-grid{grid-template-columns:1fr}.number-grid div{border-inline-end:0;border-bottom:1px solid #edf0f5}.plan-price strong{font-size:50px}}
/* V4 navigation / dark / social fixes */
.theme-btn{display:inline-grid!important;place-items:center;font-size:20px}
.social-float{position:fixed!important;top:auto!important;right:18px!important;left:auto!important;bottom:18px!important;z-index:90;display:grid;gap:10px}
html[dir=rtl] .social-float{right:18px!important;left:auto!important}
.sf{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 12px 30px rgba(15,23,42,.24);transition:transform .2s ease,box-shadow .2s ease}
.sf:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 16px 34px rgba(15,23,42,.3)}
.sf svg{width:29px;height:29px;display:block}
.sf.wa{background:#25D366}.sf.tg{background:#229ED9}
[data-theme=dark] .page-noise{background:radial-gradient(circle at 12% 8%,rgba(37,99,235,.16),transparent 32%),radial-gradient(circle at 88% 20%,rgba(6,182,212,.12),transparent 30%)}
[data-theme=dark] .nav nav{background:#111b2d;border-color:#26334a}
[data-theme=dark] .nav nav a{color:#d7e2f2}
[data-theme=dark] .mock-main,[data-theme=dark] .mock-stats article,[data-theme=dark] .mock-chart,[data-theme=dark] .mock-list{background:#111b2d;color:#e5edf8;border-color:#26334a}
[data-theme=dark] .plan-top span,[data-theme=dark] .modal-close{background:#1a2940;color:#e5edf8}
[data-theme=dark] .modal-card input{background:#0e1727;color:#fff;border-color:#31415c}
@media(max-width:1050px){
.topbar{position:relative}
.nav{position:relative}
.nav nav{position:absolute;top:calc(100% + 10px);inset-inline:0;z-index:80;padding:10px;gap:7px;border-radius:16px;max-height:none}
.nav nav a{display:flex;align-items:center;min-height:43px;padding:9px 13px;border:1px solid #e4e9f1;border-radius:11px;background:#fff;font-size:14px}
.nav nav a:hover{background:#eef5ff}
[data-theme=dark] .nav nav a{background:#152136;border-color:#2a3953}
[data-theme=dark] .nav nav a:hover{background:#1b2b45}
}
@media(max-width:700px){
.icon-btn{display:inline-grid!important}
.nav-actions{gap:7px}
.icon-btn,.lang-btn,.menu-btn{height:46px;min-width:46px}
.nav nav{top:calc(100% + 8px);inset-inline:0;padding:9px;gap:6px}
.nav nav a{min-height:40px;padding:8px 12px;border-radius:10px}
.social-float{position:fixed!important;top:auto!important;right:12px!important;left:auto!important;bottom:16px!important}
html[dir=rtl] .social-float{right:12px!important;left:auto!important}
.sf{width:50px;height:50px;border-radius:50%}
.sf svg{width:27px;height:27px}
}
@media(min-width:1051px){.social-float{position:fixed!important;top:auto!important;right:18px!important;left:auto!important;bottom:18px!important}}
/* Admin flash messages */
.saas > div[style*="background:#fff0f2"],
.saas > div[style*="background:#e9fff1"]{
display:block !important;
width:auto !important;
max-width:none !important;
height:auto !important;
min-height:50px !important;
overflow:visible !important;
white-space:normal !important;
word-break:break-word !important;
line-height:1.8 !important;
direction:ltr !important;
text-align:left !important;
position:relative !important;
z-index:9999 !important;
}
/* MarinesPanel 3D Checkout */
#planModal .modal-content,
#planModal .modal-card,
#planModal > div > div {
background:rgba(255,255,255,.96);
border:1px solid rgba(255,255,255,.85);
border-radius:28px;
box-shadow:
0 30px 80px rgba(20,35,70,.22),
0 8px 22px rgba(20,35,70,.10),
inset 0 1px 0 rgba(255,255,255,.95);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}
#planModal input {
border:1px solid #dfe5ee;
border-radius:18px;
background:linear-gradient(180deg,#fff,#f8fafc);
box-shadow:
inset 0 2px 5px rgba(20,35,70,.04),
0 5px 14px rgba(20,35,70,.04);
transition:.2s ease;
}
#planModal input:focus {
outline:none;
border-color:#91b7ff;
box-shadow:
0 0 0 4px rgba(80,135,255,.10),
0 8px 20px rgba(20,35,70,.08);
transform:translateY(-1px);
}
#mpCheckoutButton {
width:100%;
min-height:58px;
margin-top:18px;
border:0;
border-radius:18px;
font-weight:800;
font-size:17px;
cursor:pointer;
color:#fff;
background:linear-gradient(135deg,#2563eb,#4f7df3);
box-shadow:
0 13px 25px rgba(37,99,235,.28),
inset 0 1px 0 rgba(255,255,255,.28);
transition:.2s ease;
}
#mpCheckoutButton:hover {
transform:translateY(-2px);
box-shadow:
0 17px 30px rgba(37,99,235,.32),
inset 0 1px 0 rgba(255,255,255,.28);
}
#mpCheckoutButton:active {
transform:translateY(1px);
}
#mpCheckoutButton:disabled {
opacity:.65;
cursor:not-allowed;
transform:none;
}
.mp-checkout-error {
margin-top:12px;
padding:11px 14px;
border-radius:14px;
background:#fff1f2;
border:1px solid #fecdd3;
color:#9f1239;
display:none;
}
/* MarinesPanel checkout modal */
#planModal .modal-card,
#planModal .modal-content{
border-radius:28px;
border:1px solid rgba(255,255,255,.72);
box-shadow:
0 28px 70px rgba(15,23,42,.22),
0 10px 25px rgba(15,23,42,.12),
inset 0 1px 0 rgba(255,255,255,.9);
transform:perspective(1200px) translateZ(0);
}
#planModal input{
border-radius:18px;
min-height:58px;
box-shadow:
inset 0 2px 5px rgba(15,23,42,.04),
0 7px 18px rgba(15,23,42,.05);
}
#planModal .mp-pay-btn{
min-height:60px;
border-radius:18px;
font-weight:800;
box-shadow:
0 14px 28px rgba(37,99,235,.22),
inset 0 1px 0 rgba(255,255,255,.35);
transition:transform .18s ease,box-shadow .18s ease;
}
#planModal .mp-pay-btn:active{
transform:translateY(2px);
box-shadow:0 7px 16px rgba(37,99,235,.18);
}
/* =========================================================
MarinesPanel — Professional 3D Home UI
========================================================= */
/* HERO */
.hero{
position:relative;
overflow:hidden;
isolation:isolate;
}
.hero::before{
content:"";
position:absolute;
width:520px;
height:520px;
border-radius:50%;
top:-220px;
right:-180px;
background:radial-gradient(
circle,
rgba(32,188,220,.18) 0%,
rgba(45,108,235,.09) 45%,
transparent 72%
);
filter:blur(4px);
z-index:-1;
pointer-events:none;
}
.hero-copy{
position:relative;
transform-style:preserve-3d;
}
/* Main title depth */
.hero-copy h1{
position:relative;
text-shadow:
0 1px 0 rgba(255,255,255,.85),
0 7px 16px rgba(25,55,110,.10),
0 18px 38px rgba(30,95,180,.08);
}
.hero-copy h1 span{
filter:drop-shadow(0 8px 15px rgba(16,142,216,.14));
}
/* =========================================================
HERO ACTIONS
Row 1: Create account + Login
Row 2: Choose plan + Demo
========================================================= */
.hero-actions{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px !important;
width:100%;
margin-top:25px;
align-items:stretch;
}
.hero-actions .btn{
min-height:62px;
display:flex;
align-items:center;
justify-content:center;
border-radius:18px;
font-weight:800;
position:relative;
overflow:hidden;
transform:translateZ(0);
transition:
transform .22s ease,
box-shadow .22s ease,
border-color .22s ease;
}
/* Choose plan */
.hero-actions .btn.primary{
grid-column:1 / 2;
grid-row:2;
box-shadow:
0 8px 0 rgba(21,82,181,.16),
0 17px 32px rgba(32,105,225,.20),
inset 0 1px 0 rgba(255,255,255,.35);
}
/* Demo */
.hero-actions > a[href*="demo"]{
grid-column:2 / 3;
grid-row:2;
}
/* Create account */
.hero-actions > a[href*="signup"]{
grid-column:1 / 2;
grid-row:1;
border:1px solid rgba(26,113,226,.28);
background:
linear-gradient(145deg,#ffffff,#f0f6ff);
color:#1764ce;
box-shadow:
0 7px 0 rgba(31,104,204,.10),
0 15px 30px rgba(34,92,180,.13),
inset 0 1px 0 #fff;
animation:mpSignupAlert 2.4s ease-in-out infinite;
}
/* Login */
.hero-actions > a[href*="login"]{
grid-column:2 / 3;
grid-row:1;
border:1px solid rgba(117,137,170,.22);
background:
linear-gradient(145deg,#fff,#f6f8fc);
box-shadow:
0 7px 0 rgba(58,79,115,.08),
0 15px 28px rgba(32,55,95,.10),
inset 0 1px 0 #fff;
}
/* Account button when logged in */
.hero-actions > a[href*="client"]{
grid-column:1 / 3;
grid-row:1;
background:
linear-gradient(145deg,#ffffff,#eef6ff);
border:1px solid rgba(32,115,225,.24);
box-shadow:
0 7px 0 rgba(31,104,204,.09),
0 15px 30px rgba(30,91,178,.12);
}
.hero-actions .btn:hover{
transform:translateY(-3px);
}
.hero-actions .btn:active{
transform:translateY(3px);
box-shadow:
0 3px 0 rgba(25,65,125,.10),
0 8px 18px rgba(25,65,125,.10);
}
/* Moving notification effect */
@keyframes mpSignupAlert{
0%,100%{
transform:translateY(0) scale(1);
box-shadow:
0 7px 0 rgba(31,104,204,.10),
0 15px 30px rgba(34,92,180,.13),
0 0 0 0 rgba(30,125,235,.15);
}
50%{
transform:translateY(-3px) scale(1.018);
box-shadow:
0 9px 0 rgba(31,104,204,.09),
0 20px 36px rgba(34,92,180,.18),
0 0 0 8px rgba(30,125,235,0);
}
}
/* =========================================================
CARDS — 3D DEPTH
========================================================= */
.card,
.price-card,
.preview-card,
.demo-card{
transform:translateZ(0);
border:1px solid rgba(110,135,175,.18);
box-shadow:
0 2px 0 rgba(255,255,255,.9) inset,
0 8px 0 rgba(50,80,125,.035),
0 20px 45px rgba(40,75,130,.10);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.card:hover,
.price-card:hover{
transform:translateY(-5px);
box-shadow:
0 2px 0 rgba(255,255,255,.9) inset,
0 10px 0 rgba(50,80,125,.035),
0 28px 55px rgba(40,75,130,.14);
}
/* Trust badges */
.trust-row span{
padding:8px 10px;
border-radius:12px;
background:rgba(255,255,255,.58);
border:1px solid rgba(110,135,175,.10);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
0 6px 16px rgba(45,75,120,.06);
}
/* Navbar depth */
.site-header{
box-shadow:
0 1px 0 rgba(255,255,255,.9) inset,
0 9px 28px rgba(36,66,110,.08);
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:720px){
.hero-actions{
grid-template-columns:1fr 1fr !important;
gap:11px !important;
}
.hero-actions .btn{
min-height:58px;
padding:12px 8px;
font-size:15px;
border-radius:16px;
}
.hero-actions > a[href*="signup"]{
grid-column:1;
grid-row:1;
}
.hero-actions > a[href*="login"]{
grid-column:2;
grid-row:1;
}
.hero-actions > a[href*="client"]{
grid-column:1 / 3;
grid-row:1;
}
.hero-actions .btn.primary{
grid-column:1;
grid-row:2;
}
.hero-actions > a[href*="demo"]{
grid-column:2;
grid-row:2;
}
}
@media(prefers-reduced-motion:reduce){
.hero-actions > a[href*="signup"]{
animation:none;
}
}