:root{--bg:#fbfaf6;--bg2:#eef5f3;--card:#fff;--line:rgba(15,42,46,.12);--text:#0f2a2e;--muted:#52696c;--v:#0f766e;--c:#d97706;--a:#f59e0b;--grad:linear-gradient(135deg,#0f766e,#14a899);--grad2:linear-gradient(100deg,#0f766e,#14a899 60%,#f59e0b);--r:18px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:16px/1.65 DM Sans,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',DM Sans,sans-serif;line-height:1.1;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,6vw,4.6rem)}h2{font-size:clamp(1.8rem,4vw,2.9rem)}h3{font-size:1.25rem}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.container{width:min(1160px,92%);margin:auto}
.muted{color:var(--muted)}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;color:#000;padding:8px;z-index:99}
.grad-text{background:var(--grad2);-webkit-background-clip:text;background-clip:text;color:transparent}
section{padding:96px 0;position:relative}
.eyebrow{display:inline-block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--v);font-weight:600;margin-bottom:14px}
.section-head{max-width:640px;margin-bottom:48px}.section-head p{color:var(--muted);margin-top:14px}
.center{text-align:center;margin-inline:auto}

/* header */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(251,250,246,.85);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;font:700 1.2rem 'Plus Jakarta Sans',sans-serif}
.logo b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a:not(.btn){color:var(--muted);font-weight:500;transition:.2s}
.nav-links a:hover,.nav-links a.active{color:var(--v)}
.nav-toggle{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer}
.nav-toggle span{display:block;height:2px;background:var(--text);margin:7px 8px;transition:.3s}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:600;border:0;cursor:pointer;color:#fff;background:var(--grad);box-shadow:0 10px 26px -8px rgba(15,118,110,.55);transition:transform .2s,box-shadow .2s;font-size:1rem;font-family:inherit}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -8px rgba(15,118,110,.6)}
.btn-sm{padding:9px 18px;font-size:.92rem}
.btn-ghost{background:transparent;border:1px solid var(--line);box-shadow:none;color:var(--text)}
.btn-ghost:hover{background:#fff;border-color:var(--v);box-shadow:none}

/* hero */
.hero{padding:120px 0 100px;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(110px);opacity:.28;z-index:0;animation:float 14s ease-in-out infinite}
.hero::before{width:520px;height:520px;background:#14a899;top:-160px;left:-120px}
.hero::after{width:460px;height:460px;background:var(--a);right:-120px;top:60px;animation-delay:-6s}
@keyframes float{50%{transform:translate(40px,30px) scale(1.1)}}
.hero .container{position:relative;z-index:1}
.hero h1{max-width:900px}
.hero p.lead{font-size:1.2rem;color:var(--muted);max-width:620px;margin:26px 0 38px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.badge{display:inline-flex;gap:8px;align-items:center;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.88rem;margin-bottom:26px}
.badge i{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399}
.stats{display:flex;gap:48px;flex-wrap:wrap;margin-top:70px}
.stats strong{display:block;font:700 2.2rem 'Plus Jakarta Sans';}
.stats span{color:var(--muted);font-size:.92rem}

/* cards */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card{background:var(--card);box-shadow:0 1px 2px rgba(15,42,46,.04);border:1px solid var(--line);border-radius:var(--r);padding:30px;transition:transform .3s,border-color .3s,background .3s}
.card:hover{transform:translateY(-6px);border-color:var(--v);box-shadow:0 18px 40px -18px rgba(15,118,110,.35)}
.icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--grad);font-size:1.4rem;margin-bottom:20px;color:#fff}
.card p{color:var(--muted);margin-top:10px}
.alt{background:var(--bg2)}

/* process */
.steps{counter-reset:s}
.step{position:relative;padding-top:20px}
.step::before{counter-increment:s;content:"0" counter(s);font:700 3rem 'Plus Jakarta Sans';background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* work */
.thumb{height:210px;border-radius:12px;margin-bottom:22px;display:grid;place-items:center;font:700 1.6rem 'Plus Jakarta Sans';color:#fff;overflow:hidden;position:relative}
.t1{background:linear-gradient(135deg,#0f766e,#14a899)}.t2{background:linear-gradient(135deg,#f59e0b,#ea580c)}.t3{background:linear-gradient(135deg,#0e4f58,#2dd4bf)}
.tags{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}.tags span{font-size:.78rem;border:1px solid var(--line);padding:3px 12px;border-radius:999px;color:var(--muted)}

/* pricing */
.price{font:700 2.1rem 'Plus Jakarta Sans';margin:12px 0}
.card ul{list-style:none;padding:0;margin:20px 0 26px}
.card li{padding:7px 0 7px 26px;position:relative;color:var(--muted)}
.card li::before{content:"✓";position:absolute;left:0;color:var(--v);font-weight:700}
.featured{border-color:var(--v);background:linear-gradient(180deg,rgba(20,168,153,.12),#fff)}
.pop{font-size:.75rem;color:#fff;background:var(--grad);padding:3px 12px;border-radius:999px;margin-left:8px;vertical-align:middle}

/* quote */
blockquote{font-size:1.1rem}.who{margin-top:18px;color:var(--muted);font-size:.92rem}

/* cta */
.cta-box{text-align:center;padding:72px 28px;border-radius:28px;background:linear-gradient(135deg,rgba(15,118,110,.14),rgba(245,158,11,.18));border:1px solid var(--line)}
.cta-box p{color:var(--muted);margin:16px auto 30px;max-width:520px}

/* page hero */
.page-hero{padding:90px 0 40px}.page-hero p{color:var(--muted);max-width:620px;margin-top:18px;font-size:1.1rem}

/* form */
form .row{display:grid;gap:18px;grid-template-columns:1fr 1fr}
label{display:block;font-weight:500;font-size:.92rem;margin-bottom:6px}
input,select,textarea{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--text);font:inherit}

input:focus,select:focus,textarea:focus{outline:2px solid var(--v);border-color:transparent}
.field{margin-bottom:18px}
.hp{position:absolute;left:-9999px}
.alert{padding:16px 20px;border-radius:12px;margin-bottom:24px}
.ok{background:#e6f7ef;border:1px solid #34d399}.err{background:#fdecec;border:1px solid #f87171}
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:60px 0 24px;background:#0b2a2e;color:#e8f3f1}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.footer-grid h4{margin-bottom:12px}.footer-grid a,.footer-grid span{display:block;color:var(--muted);margin:6px 0}
.footer-grid a:hover{color:#fff}.site-footer .muted,.footer-grid a,.footer-grid span,.copy{color:#9fbab6}.footer-grid h4{color:#fff}.site-footer .logo{color:#fff}.copy{border-color:rgba(255,255,255,.12)}
.footer-grid p{margin-top:14px;max-width:320px}
.copy{margin-top:40px;color:var(--muted);font-size:.86rem;border-top:1px solid var(--line);padding-top:20px}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

@media(max-width:820px){
 section{padding:70px 0}
 .nav-toggle{display:block}
 .nav-links{position:absolute;top:72px;left:0;right:0;flex-direction:column;padding:24px;background:var(--bg);border-bottom:1px solid var(--line);display:none;gap:18px}
 .nav-links.open{display:flex}
 .contact-grid,.footer-grid,form .row{grid-template-columns:1fr}
}

/* extra gradients */
:root{--sky:#0ea5e9;--rose:#f43f5e;--grad3:linear-gradient(135deg,#0ea5e9,#0f766e);--grad4:linear-gradient(135deg,#f59e0b,#f43f5e);--grad5:linear-gradient(135deg,#14a899,#84cc16)}
body{background:linear-gradient(180deg,#fbfaf6 0%,#f3f8f6 100%)}
.hero{background:radial-gradient(900px 500px at 85% 0%,rgba(14,165,233,.14),transparent 60%),radial-gradient(700px 500px at 0% 100%,rgba(244,63,94,.08),transparent 60%)}
.alt{background:linear-gradient(135deg,#e6f4f1 0%,#eef6fb 50%,#fdf3e3 100%)}
.btn{background:linear-gradient(120deg,#0f766e,#0ea5e9);background-size:140% 100%;background-position:0 0;transition:transform .2s,box-shadow .2s,background-position .4s}
.btn:hover{background-position:100% 0}
.btn-ghost{background:transparent}
.grid>.card:nth-child(6n+1) .icon{background:var(--grad)}
.grid>.card:nth-child(6n+2) .icon{background:var(--grad3)}
.grid>.card:nth-child(6n+3) .icon{background:var(--grad4)}
.grid>.card:nth-child(6n+4) .icon{background:var(--grad5)}
.grid>.card:nth-child(6n+5) .icon{background:linear-gradient(135deg,#f59e0b,#ea580c)}
.grid>.card:nth-child(6n) .icon{background:linear-gradient(135deg,#6366f1,#0ea5e9)}
.grid>.card::before{content:"";display:block;height:3px;margin:-30px -30px 26px;border-radius:var(--r) var(--r) 0 0;background:linear-gradient(90deg,#0f766e,#0ea5e9,#f59e0b);opacity:0;transition:opacity .3s}
.grid>.card:hover::before{opacity:1}
a.card .thumb,.card .thumb{box-shadow:0 14px 30px -16px rgba(15,42,46,.5)}
.t1{background:linear-gradient(135deg,#0f766e,#0ea5e9)}.t2{background:linear-gradient(135deg,#f59e0b,#f43f5e)}.t3{background:linear-gradient(135deg,#6366f1,#14a899)}
.step:nth-child(2)::before{background:var(--grad3);-webkit-background-clip:text;background-clip:text}
.step:nth-child(3)::before{background:var(--grad4);-webkit-background-clip:text;background-clip:text}
.stats strong{background:var(--grad2);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-box{background:linear-gradient(120deg,#0f766e 0%,#0ea5e9 55%,#6366f1 100%);color:#fff;border:0;box-shadow:0 30px 60px -30px rgba(14,165,233,.6)}
.cta-box p{color:rgba(255,255,255,.88)}
.cta-box .btn{background:#fff;color:#0f766e;box-shadow:0 12px 30px -10px rgba(0,0,0,.35)}
.page-hero{background:radial-gradient(700px 300px at 90% 0%,rgba(245,158,11,.16),transparent 70%),radial-gradient(700px 300px at 0% 0%,rgba(20,168,153,.16),transparent 70%)}
.featured{background:linear-gradient(180deg,rgba(14,165,233,.12),rgba(20,168,153,.08) 40%,#fff)}
.site-footer{background:linear-gradient(135deg,#0b2a2e,#0c3b4a 60%,#14325a)}
.eyebrow{background:var(--grad3);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-mark{background:linear-gradient(135deg,#0f766e,#0ea5e9)}

/* light theme with dark gradient accents */
:root{--bg:#f7f8fc;--bg2:#eef1fb;--card:#fff;--line:rgba(20,24,60,.12);--text:#12163a;--muted:#555b82;--v:#4f46e5;--c:#0d9488;--a:#f59e0b;--grad:linear-gradient(135deg,#4f46e5,#0ea5e9);--grad2:linear-gradient(100deg,#7c3aed,#0ea5e9 55%,#14b8a6);--grad3:linear-gradient(135deg,#0ea5e9,#4f46e5);--grad4:linear-gradient(135deg,#f59e0b,#e11d48);--grad5:linear-gradient(135deg,#0d9488,#65a30d);--dark:linear-gradient(135deg,#0b1030 0%,#1b1458 50%,#0b4a5a 100%)}
body{background:#f7f8fc;color:var(--text)}
.site-header{background:rgba(247,248,252,.85)}
.nav-links a:hover,.nav-links a.active{color:var(--v)}
.nav-toggle span{background:var(--text)}
@media(max-width:820px){.nav-links{background:#f7f8fc}}
.logo-mark{background:linear-gradient(135deg,#4f46e5,#0ea5e9);color:#fff}
.btn{background:linear-gradient(120deg,#4f46e5,#0ea5e9);background-size:140% 100%;color:#fff;box-shadow:0 10px 28px -8px rgba(79,70,229,.55)}
.btn:hover{background-position:100% 0;box-shadow:0 16px 36px -8px rgba(79,70,229,.6)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}
.btn-ghost:hover{background:#fff;border-color:var(--v)}

/* dark hero */
.hero{background:var(--dark);color:#fff}
.hero::before{background:#7c3aed;opacity:.45}.hero::after{background:#0ea5e9;opacity:.35}
.hero p.lead,.stats span{color:#b9c0ea}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.1)}
.hero .grad-text{background:linear-gradient(100deg,#67e8f9,#a78bfa 50%,#fbbf24);-webkit-background-clip:text;background-clip:text}
.stats strong{background:linear-gradient(100deg,#67e8f9,#fbbf24);-webkit-background-clip:text;background-clip:text;color:transparent}
.badge{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}

.alt{background:linear-gradient(135deg,#eaeefc 0%,#e4f3f6 55%,#fdf1de 100%)}
.card{background:#fff;box-shadow:0 1px 2px rgba(20,24,60,.05);backdrop-filter:none}
.card:hover{background:#fff;border-color:var(--v);box-shadow:0 20px 44px -22px rgba(79,70,229,.45)}
.grid>.card:nth-child(6n+1) .icon{background:var(--grad)}
.grid>.card:nth-child(6n+2) .icon{background:linear-gradient(135deg,#0d9488,#0ea5e9)}
.grid>.card:nth-child(6n+3) .icon{background:var(--grad4)}
.grid>.card:nth-child(6n+4) .icon{background:var(--grad5)}
.grid>.card:nth-child(6n+5) .icon{background:linear-gradient(135deg,#f59e0b,#ea580c)}
.grid>.card:nth-child(6n) .icon{background:linear-gradient(135deg,#7c3aed,#db2777)}
.icon{color:#fff}
.eyebrow{background:linear-gradient(90deg,#4f46e5,#0d9488);-webkit-background-clip:text;background-clip:text;color:transparent}
.step::before{background:var(--grad);-webkit-background-clip:text;background-clip:text}
.step:nth-child(2)::before{background:linear-gradient(135deg,#0d9488,#0ea5e9);-webkit-background-clip:text;background-clip:text}
.step:nth-child(3)::before{background:var(--grad4);-webkit-background-clip:text;background-clip:text}
.t1{background:linear-gradient(135deg,#1e1b4b,#4f46e5)}.t2{background:linear-gradient(135deg,#0b1030,#0d9488)}.t3{background:linear-gradient(135deg,#4c1d95,#db2777)}
.thumb{color:#fff;box-shadow:0 14px 30px -16px rgba(20,24,60,.6)}
.card li::before{color:var(--v)}
.featured{border:0;color:#fff;background:var(--dark);box-shadow:0 30px 60px -28px rgba(79,70,229,.6)}
.featured p,.featured li{color:#c7cdf2}.featured li::before{color:#67e8f9}
.featured .btn{background:#fff;color:#1b1458}
.pop{color:#fff}
.cta-box{background:var(--dark);color:#fff;border:0;box-shadow:0 30px 70px -30px rgba(79,70,229,.6)}
.cta-box p{color:#c7cdf2}
.cta-box .btn{background:linear-gradient(120deg,#67e8f9,#a78bfa);color:#0b1030}
.page-hero{background:var(--dark);color:#fff;padding:90px 0 70px}
.page-hero p{color:#c7cdf2}
.page-hero .eyebrow{background:linear-gradient(90deg,#67e8f9,#fbbf24);-webkit-background-clip:text;background-clip:text}
.page-hero code{color:#fbbf24}
input,select,textarea{background:#fff;color:var(--text)}
.ok{background:#e6f7ef}.err{background:#fdecec}
.site-footer{background:var(--dark);color:#e8ecff}
.site-footer .muted,.footer-grid a,.footer-grid span,.copy{color:#b9c0ea}
.footer-grid a:hover{color:#fff}
.footer-grid a.logo{display:flex;color:#fff;margin:0}
.footer-grid a.logo .logo-mark{color:#fff}
.site-footer .logo b{background:linear-gradient(100deg,#67e8f9,#a78bfa);-webkit-background-clip:text;background-clip:text}
.price small{font:500 .9rem DM Sans,sans-serif;color:var(--muted)}
.featured .price small{color:#b9c0ea}
.addons{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0 48px;padding:12px 30px}
.addon{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.addon strong{color:var(--v);white-space:nowrap}
.addons:hover{transform:none}
.g4{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.g4 .card{padding:26px}
h1,h2,h3,h4{letter-spacing:-.015em}h1{line-height:1.08}
.logo{white-space:nowrap}@media(max-width:420px){.logo{font-size:1.05rem}}

/* animations */
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes shift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.7)}100%{box-shadow:0 0 0 12px rgba(52,211,153,0)}}
@keyframes sheen{from{transform:translateX(-120%) skewX(-20deg)}to{transform:translateX(320%) skewX(-20deg)}}
@keyframes drift{50%{transform:translate(50px,-30px) scale(1.15)}}
.hero .container>*,.page-hero .container>*{opacity:0;animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero .container>:nth-child(2),.page-hero .container>:nth-child(2){animation-delay:.12s}
.hero .container>:nth-child(3),.page-hero .container>:nth-child(3){animation-delay:.24s}
.hero .container>:nth-child(4){animation-delay:.36s}
.hero .container>:nth-child(5){animation-delay:.48s}
.hero,.page-hero,.cta-box,.featured,.site-footer{background-size:200% 200%;animation:shift 14s ease-in-out infinite}
.hero .grad-text{background-size:200% 100%;animation:shift 6s ease-in-out infinite}
.badge i{animation:pulse 1.8s infinite}
.hero::before{animation:drift 16s ease-in-out infinite}.hero::after{animation:drift 20s ease-in-out infinite reverse}
.icon{animation:bob 4s ease-in-out infinite}
.grid>.card:nth-child(2n) .icon{animation-delay:-1.3s}.grid>.card:nth-child(3n) .icon{animation-delay:-2.6s}
.card:hover .icon{animation-play-state:paused;transform:scale(1.12) rotate(-6deg);transition:transform .3s}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:0;width:40%;height:100%;background:rgba(255,255,255,.35);transform:translateX(-120%) skewX(-20deg)}
.btn:hover::after{animation:sheen .7s}
.btn:active{transform:scale(.97)}
.nav-links a:not(.btn){position:relative}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav-links a:not(.btn):hover::after,.nav-links a.active::after{transform:scaleX(1)}
.site-header{transition:height .3s,box-shadow .3s}
.site-header.scrolled{box-shadow:0 8px 30px -14px rgba(20,24,60,.4)}
.site-header.scrolled .nav{height:60px}.nav{transition:height .3s}
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#4f46e5,#0ea5e9,#f59e0b);z-index:100}
.thumb{transition:transform .5s}.card:hover .thumb{transform:scale(1.04)}
.reveal.in{transition-delay:var(--d,0s)}
.reveal.left{transform:translateX(-30px)}.reveal.left.in{transform:none}
.step::before{display:inline-block;transition:transform .4s}.step:hover::before{transform:scale(1.12) rotate(-4deg)}
.addon{transition:padding-left .25s}.addon:hover{padding-left:10px}
.logo-mark{transition:transform .4s}.logo:hover .logo-mark{transform:rotate(-10deg) scale(1.08)}
.alert{animation:rise .5s both}
body{animation:fadein .5s both}@keyframes fadein{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero .container>*,.page-hero .container>*{opacity:1}}
.card.reveal.in{transition:transform .2s ease-out,border-color .3s,box-shadow .3s,background .3s;transition-delay:0s}
img.logo-mark{width:36px;height:36px;border-radius:10px;object-fit:cover;background:none;display:block}
.g5{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.g5 .card{padding:24px}.g5 .price{font-size:1.55rem}
.g5{grid-template-columns:repeat(6,1fr)}.g5 .card{grid-column:span 2;padding:28px}.g5 .card:nth-child(n+4){grid-column:span 3}
.g5 .price{font-size:1.7rem}.price small{display:block;margin-top:2px}
@media(max-width:900px){.g5{grid-template-columns:1fr 1fr}.g5 .card,.g5 .card:nth-child(n+4){grid-column:auto}}
@media(max-width:600px){.g5{grid-template-columns:1fr}}