@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800&family=DM+Serif+Display:ital@0;1&display=swap');
:root{
  --green:#10B981;--green-d:#059669;--teal:#0EA5E9;
  --gradient:linear-gradient(135deg,#10B981,#0EA5E9);
  --dark:#0a1628;--dark2:#0f2236;
  --white:#fff;--gray:#f8fafc;
  --text:#0f172a;--text2:#475569;--textm:#94a3b8;
  --border:#e2e8f0;--red:#ef4444;--red-bg:#fef2f2;--green-bg:#f0fdf4;
  --sh:0 8px 30px rgba(0,0,0,.07);--shb:0 20px 60px rgba(0,0,0,.11);
  --r:16px;--rs:10px;
}
*{margin:0;padding:0;box-sizing:border-box;cursor:none!important}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;color:var(--text);background:var(--white);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* PROGRESS */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--gradient);z-index:99999;pointer-events:none;box-shadow:0 0 10px rgba(16,185,129,.6);transition:width .1s}

/* CURSOR */
#dev-cursor{width:30px;height:30px;position:fixed;pointer-events:none;z-index:9999;transform:translate(-3px,-3px) rotate(-45deg);filter:drop-shadow(0 0 5px rgba(16,185,129,.8))}
#dev-cursor svg{width:30px;height:30px;display:block}
#dev-follower{width:38px;height:38px;border:2px solid rgba(16,185,129,.45);border-radius:50%;position:fixed;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s;box-shadow:0 0 10px rgba(16,185,129,.15)}
#dev-follower::before{content:'';position:absolute;inset:7px;border:1px solid rgba(14,165,233,.3);border-radius:50%}
#dev-follower::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:4px;background:#10B981;border-radius:50%}
#dev-follower.hovered{width:52px;height:52px;border-color:rgba(16,185,129,.85)}
#dev-follower.clicked{width:26px;height:26px;border-color:rgba(14,165,233,.9)}

/* HERO */
.hero{min-height:100vh;background:radial-gradient(ellipse 70% 60% at 15% 20%,rgba(16,185,129,.14) 0%,transparent 60%),radial-gradient(ellipse 55% 50% at 85% 80%,rgba(14,165,233,.12) 0%,transparent 60%),var(--dark);background-size:200% 200%;animation:hbg 14s ease-in-out infinite alternate;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:60px 20px;position:relative;overflow:hidden}
@keyframes hbg{0%{background-position:0% 0%,100% 100%}100%{background-position:100% 100%,0% 0%}}
#particles-canvas{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero::before{content:'';position:absolute;top:-25%;right:-15%;width:65%;height:65%;background:radial-gradient(circle,rgba(16,185,129,.12),transparent 60%);border-radius:50%;animation:op 7s ease-in-out infinite;pointer-events:none;z-index:0}
.hero::after{content:'';position:absolute;bottom:-25%;left:-15%;width:55%;height:55%;background:radial-gradient(circle,rgba(14,165,233,.1),transparent 60%);border-radius:50%;animation:op 9s ease-in-out infinite reverse;pointer-events:none;z-index:0}
@keyframes op{0%,100%{transform:scale(1)}50%{transform:scale(1.2);opacity:.6}}
.hero-content{position:relative;z-index:1;max-width:820px;width:100%}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);padding:10px 22px;border-radius:50px;color:rgba(255,255,255,.85);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:36px;animation:bdrop 1s cubic-bezier(.34,1.56,.64,1) .3s both}
@keyframes bdrop{from{opacity:0;transform:translateY(-20px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}
.dot{width:6px;height:6px;background:#10B981;border-radius:50%;animation:dblink 2s ease-in-out infinite}
@keyframes dblink{0%,100%{opacity:1;box-shadow:0 0 8px #10B981}50%{opacity:.2;box-shadow:none}}
.hero-header-img{width:110px;height:110px;margin:0 auto 28px;position:relative;animation:ipop 1.2s cubic-bezier(.34,1.56,.64,1) .5s both}
@keyframes ipop{from{opacity:0;transform:scale(.2) rotate(-20deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.hero-header-img img{width:100%;height:110px;object-fit:contain;position:relative;z-index:2;background:rgba(255,255,255,.08);border-radius:12px;padding:8px;animation:hfloat 4s ease-in-out 1.7s infinite}
@keyframes hfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-img-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(16,185,129,.4);pointer-events:none}
.ring1{width:125px;height:125px;animation:rexp 2.5s ease-out 2s infinite}
.ring2{width:125px;height:125px;animation:rexp 2.5s ease-out 2.9s infinite}
.ring3{width:125px;height:125px;animation:rexp 2.5s ease-out 3.8s infinite}
@keyframes rexp{0%{transform:translate(-50%,-50%) scale(1);opacity:.7}100%{transform:translate(-50%,-50%) scale(2.6);opacity:0}}
.hero h1{font-family:'DM Serif Display',serif;font-size:clamp(28px,6vw,62px);font-weight:400;color:#fff;line-height:1.1;margin-bottom:20px;animation:trise 1s cubic-bezier(.23,1,.32,1) .7s both}
@keyframes trise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.hero h1 em{font-style:italic;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:15px;color:rgba(255,255,255,.55);max-width:540px;margin:0 auto 40px;font-weight:300;animation:fup .9s cubic-bezier(.23,1,.32,1) .9s both}
@keyframes fup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hero-logos{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;animation:fup .9s cubic-bezier(.23,1,.32,1) 1.1s both}
.hero-logo-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 22px;color:#fff;font-weight:600;font-size:15px;transition:all .35s}
.hero-logo-item:hover{background:rgba(255,255,255,.11);transform:translateY(-4px)}
.hero-logo-item.dev{background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(14,165,233,.15));border-color:rgba(16,185,129,.35);color:#34d399}
.hero-x{color:rgba(255,255,255,.2);font-size:20px}
.hero-meta{margin-top:36px;display:flex;gap:24px;justify-content:center;flex-wrap:wrap;animation:fup .9s cubic-bezier(.23,1,.32,1) 1.3s both}
.hero-meta-item{text-align:center;color:rgba(255,255,255,.4);font-size:11px}
.hero-meta-item strong{display:block;color:rgba(255,255,255,.8);font-size:12px;font-weight:600;margin-bottom:2px}
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(255,255,255,.3);font-size:9px;letter-spacing:2px;text-transform:uppercase;z-index:1;animation:fup 2s ease .3s both}
.scroll-dot{animation:sbounce 1.6s ease-in-out infinite}
@keyframes sbounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* SECTIONS */
.sec{padding:80px 20px}
.sec-white{background:#fff}
.sec-gray{background:#f8fafc}
.sec-dark{background:var(--dark);position:relative;overflow:hidden;color:#fff}
.sec-dark::before{content:'';position:absolute;top:-40%;right:-20%;width:60%;height:80%;background:radial-gradient(circle,rgba(16,185,129,.09),transparent 60%);border-radius:50%;animation:op 7s ease-in-out infinite;pointer-events:none}
.sec-dark::after{content:'';position:absolute;bottom:-30%;left:-15%;width:50%;height:60%;background:radial-gradient(circle,rgba(14,165,233,.07),transparent 60%);border-radius:50%;animation:op 9s ease-in-out infinite reverse;pointer-events:none}
.container{max-width:1040px;margin:0 auto}
.sec-label{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px}
.sec-label.center{text-align:center}
.sec-title{font-family:'DM Serif Display',serif;font-size:clamp(24px,4vw,44px);font-weight:400;color:var(--text);line-height:1.15;margin-bottom:16px}
.sec-title.white{color:#fff}
.sec-title.center{text-align:center}
.sec-desc{font-size:15px;color:var(--text2);max-width:600px;line-height:1.8;font-weight:300;margin-bottom:40px}
.sec-desc.center{text-align:center;margin-left:auto;margin-right:auto}
.sec-desc.wide{max-width:700px}
.sec-desc.muted{color:rgba(255,255,255,.5)}
.grad-text{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pricing-hdr{text-align:center;margin-bottom:48px}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(16,185,129,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(16,185,129,.05) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}
.mt-section{margin-top:48px}

/* CARDS GRID */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:24px}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:28px;transition:all .4s;position:relative;overflow:hidden}
.card::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:var(--gradient);transform:scaleX(0);transition:transform .4s}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(16,185,129,.1);border-color:rgba(16,185,129,.2)}
.card:hover::after{transform:scaleX(1)}
.card-icon{font-size:30px;margin-bottom:14px;display:block;transition:transform .4s}
.card:hover .card-icon{transform:scale(1.18) rotate(-5deg)}
.card h3{font-size:15px;font-weight:700;margin-bottom:8px}
.card p{font-size:13px;color:var(--text2);line-height:1.75}

/* STATS ROW */
.stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-top:24px;background:var(--dark);border-radius:var(--r);overflow:hidden}
.stat-box{text-align:center;padding:28px 16px;border-right:1px solid rgba(255,255,255,.07);transition:all .4s}
.stat-box:last-child{border-right:none}
.stat-box:hover{background:rgba(16,185,129,.06)}
.stat-num{font-family:'DM Serif Display',serif;font-size:34px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;margin-bottom:4px}
.stat-lbl{font-size:11px;color:rgba(255,255,255,.45);font-weight:500}

/* GRADES */
.grades-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;margin-bottom:36px;margin-top:32px}
.grade-box{background:#fff;border:1px solid var(--border);border-radius:var(--rs);padding:18px 12px;text-align:center;transition:all .35s;position:relative;overflow:hidden}
.grade-box::before{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:var(--gradient);transform:scaleX(0);transition:transform .35s}
.grade-box:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.grade-box:hover::before{transform:scaleX(1)}
.grade{font-size:22px;font-weight:800;margin-bottom:3px}
.grade.bad{color:#ef4444}
.grade.mid{color:#f59e0b}
.grade-lbl{font-size:10px;color:var(--textm);font-weight:600;text-transform:uppercase;letter-spacing:.5px}

/* TWO COLS COMPARE */
.two-cols{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r);overflow:hidden;border:1px solid var(--border)}
.col-bad{background:#fef2f2;padding:28px}
.col-good{background:#f0fdf4;padding:28px}
.col-head-red{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#dc2626;margin-bottom:18px}
.col-head-green{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--green);margin-bottom:18px}
.cmp-item{margin-bottom:12px;padding:10px 12px;border-radius:8px;transition:all .25s}
.cmp-item:last-child{margin-bottom:0}
.col-bad .cmp-item:hover{background:rgba(239,68,68,.07);transform:translateX(4px)}
.col-good .cmp-item:hover{background:rgba(16,185,129,.07);transform:translateX(4px)}
.cmp-item h4{font-size:13px;font-weight:700;margin-bottom:3px}
.col-bad .cmp-item h4{color:#dc2626}
.col-good .cmp-item h4{color:var(--green-d)}
.cmp-item p{font-size:12px;color:var(--text2);line-height:1.65}

/* BEFORE/AFTER */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:40px}
.ba-card{border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--sh);transition:all .4s;background:#fff}
.ba-card:hover{box-shadow:var(--shb);transform:translateY(-5px)}
.ba-head{padding:11px 18px;display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.bad-head{background:#fef2f2;color:#dc2626}
.good-head{background:#f0fdf4;color:var(--green)}
.ba-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.bad-dot{background:#dc2626;box-shadow:0 0 6px rgba(220,38,38,.5)}
.good-dot{background:#10B981;box-shadow:0 0 6px rgba(16,185,129,.6);animation:dblink 2s infinite}
.ba-img-wrap{position:relative;overflow:hidden;max-height:320px}
.ba-img-wrap img{width:100%;display:block;filter:saturate(.75);transition:filter .4s}
.ba-card:hover .ba-img-wrap img{filter:saturate(.5)}
.ba-badges{position:absolute;bottom:0;left:0;right:0;padding:8px 12px;background:linear-gradient(transparent,rgba(220,38,38,.8));display:flex;gap:6px;flex-wrap:wrap}
.ba-badges span{background:rgba(255,255,255,.15);color:#fff;font-size:9px;font-weight:600;padding:3px 8px;border-radius:20px;border:1px solid rgba(255,255,255,.2)}
.ba-caption{padding:14px 18px;border-top:1px solid var(--border)}
.ba-caption h4{font-size:13px;font-weight:700;margin-bottom:3px}
.ba-caption p{font-size:11px;color:var(--text2);line-height:1.6}
.bad-caption h4{color:#dc2626}
.good-caption h4{color:var(--green-d)}

/* AFTER MOCKUP */
.after-mockup{background:#0b1929;position:relative;overflow:hidden;min-height:320px}
.after-mockup::before{content:'';position:absolute;top:-30%;right:-20%;width:60%;height:60%;background:radial-gradient(circle,rgba(16,185,129,.18),transparent 65%);border-radius:50%;pointer-events:none}
.mock-nav{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06);position:relative;z-index:2}
.mock-logo{display:flex;align-items:center;gap:5px}
.mock-logo-box{width:18px;height:18px;border-radius:5px;background:var(--gradient)}
.mock-logo-lines{display:flex;flex-direction:column;gap:2.5px}
.mock-logo-lines div{height:3px;border-radius:2px;background:rgba(255,255,255,.5)}
.mock-logo-lines div:first-child{width:24px}
.mock-logo-lines div:last-child{width:16px}
.mock-links{display:flex;gap:10px}
.ml{font-size:7.5px;color:rgba(255,255,255,.4);font-weight:500;padding:2px 5px;border-radius:4px}
.ml.active{color:#34d399;background:rgba(16,185,129,.15)}
.mock-cta-btn{font-size:7.5px;background:var(--gradient);color:#fff;padding:4px 9px;border-radius:20px;font-weight:700}
.mock-hero-area{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 14px 10px;position:relative;z-index:2}
.mock-left{display:flex;flex-direction:column;gap:6px}
.mock-pill{display:inline-block;font-size:6.5px;color:rgba(255,255,255,.6);background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.25);padding:3px 7px;border-radius:20px;font-weight:600}
.mock-headline{font-size:20px;font-weight:800;color:#fff;line-height:1.1}
.mock-grad{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.mock-line{height:3.5px;border-radius:2px;background:rgba(255,255,255,.12);width:90%}
.mock-line.short{width:60%}
.mock-actions{display:flex;gap:5px;margin-top:3px}
.mact-p{font-size:7px;background:var(--gradient);color:#fff;padding:4px 9px;border-radius:20px;font-weight:700}
.mact-s{font-size:7px;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.15);padding:4px 9px;border-radius:20px}
.mock-right{display:flex;flex-direction:column;gap:6px;padding-top:4px}
.mock-service-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:7px;padding:7px 9px;display:flex;align-items:center;gap:7px;transition:all .3s}
.mock-service-card:hover{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.25);transform:translateX(3px)}
.anim1{animation:mf 3s ease-in-out infinite}
.anim2{animation:mf 3s ease-in-out .8s infinite}
.anim3{animation:mf 3s ease-in-out 1.6s infinite}
@keyframes mf{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.mock-service-card span{font-size:13px}
.msc-line{height:3px;border-radius:2px;background:rgba(255,255,255,.18);margin-bottom:3px}
.msc-line.s{width:60%;background:rgba(255,255,255,.1)}
.mock-strip{display:flex;border-top:1px solid rgba(255,255,255,.06);position:relative;z-index:2}
.ms{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 3px;border-right:1px solid rgba(255,255,255,.05);font-size:11px;transition:background .2s}
.ms:last-child{border-right:none}
.ms.active,.ms:hover{background:rgba(16,185,129,.08)}
.ms-t{font-size:6px;color:rgba(255,255,255,.35);font-weight:600}
.ms.active .ms-t{color:#34d399}
.mock-badge{font-size:7px;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:right;padding:5px 12px;position:relative;z-index:3}

/* IMPROVEMENTS */
.impr-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;margin-top:32px}
.impr{background:#fff;border:1px solid var(--border);border-radius:var(--rs);padding:16px 12px;text-align:center;font-size:12px;font-weight:600;color:var(--text2);transition:all .3s}
.impr:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:rgba(16,185,129,.2)}
.impr-icon{font-size:22px;display:block;margin-bottom:6px}

/* DELIVERABLES */
.deliver-card{background:#fff;border:1px solid var(--border);border-radius:var(--rs);padding:20px 16px;text-align:center;transition:all .4s;position:relative;overflow:hidden}
.deliver-card::after{content:'';position:absolute;inset:0;background:var(--gradient);opacity:0;transition:opacity .4s}
.deliver-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(16,185,129,.12);border-color:rgba(16,185,129,.25)}
.deliver-card:hover::after{opacity:.04}
.deliver-card>*{position:relative;z-index:1}
.dc-icon{font-size:26px;display:block;margin:0 auto 8px;transition:transform .4s}
.deliver-card:hover .dc-icon{transform:scale(1.25) rotate(-8deg)}
.deliver-card h4{font-size:13px;font-weight:700;margin-bottom:4px}
.deliver-card p{font-size:11px;color:var(--textm);line-height:1.5}

/* PRICING */
.pricing-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:720px;margin:0 auto}
.price-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:all .4s}
.price-card:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(16,185,129,.14);border-color:rgba(16,185,129,.3)}
.price-top{padding:24px 22px 18px;text-align:center;border-bottom:1px solid var(--border);background:#f8fafc}
.pc-icon{font-size:34px;display:block;margin:0 auto 10px;transition:transform .4s}
.price-card:hover .pc-icon{transform:scale(1.18) rotate(-8deg)}
.price-top h3{font-size:17px;font-weight:700;margin-bottom:3px}
.pc-type{font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--textm)}
.price-num{padding:18px 22px;text-align:center;border-bottom:1px solid var(--border);background:var(--dark)}
.pc-amount{font-family:'DM Serif Display',serif;font-size:32px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pc-period{font-size:13px;color:rgba(255,255,255,.4)}
.pc-features{list-style:none;padding:20px 22px;flex:1}
.pc-features li{font-size:12.5px;color:var(--text2);padding:4px 0 4px 20px;position:relative;line-height:1.55}
.pc-features li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:700;font-size:11px}
.price-card:hover .pc-features li{color:var(--text)}
.pc-footer{padding:16px 22px;background:#f8fafc;border-top:1px solid var(--border);font-size:11px;color:var(--textm);text-align:center}
.bundle-box{margin-top:24px;padding:18px 22px;background:#f0fdf4;border-radius:var(--rs);border:1px solid rgba(16,185,129,.2);text-align:center;font-size:13px;color:var(--text2);line-height:1.7}

/* RETAINER */
.retainer-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.ret-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:32px 24px;position:relative;transition:all .4s;overflow:hidden}
.ret-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:var(--gradient);transform:scaleX(0);transition:transform .4s}
.ret-card:hover{transform:translateY(-7px);box-shadow:0 28px 60px rgba(16,185,129,.12);border-color:rgba(16,185,129,.2)}
.ret-card:hover::before{transform:scaleX(1)}
.ret-featured{border:2px solid var(--green);box-shadow:var(--sh)}
.ret-featured::before{transform:scaleX(1)}
.ret-badge-pill{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--gradient);color:#fff;padding:4px 16px;border-radius:0 0 12px 12px;font-size:9px;font-weight:700;letter-spacing:1.5px;white-space:nowrap}
.ret-tier{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:6px;margin-top:12px}
.ret-featured .ret-tier{margin-top:20px}
.ret-card h3{font-size:18px;font-weight:700;margin-bottom:12px}
.ret-price{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.ret-amount{font-family:'DM Serif Display',serif;font-size:34px;color:var(--text)}
.ret-period{font-size:14px;color:var(--textm)}
.ret-best{font-size:12px;color:var(--text2);font-style:italic;margin-bottom:16px;padding:8px 12px;background:#f8fafc;border-radius:8px;line-height:1.55}
.ret-features{list-style:none}
.ret-features li{font-size:12.5px;color:var(--text2);padding:4px 0 4px 20px;position:relative;line-height:1.5}
.ret-features li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:700;font-size:11px}
.ret-card:hover .ret-features li{color:var(--text)}
.ret-commit{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);font-size:11px;color:var(--textm);text-align:center;font-weight:600}
.loyalty-box{margin-top:24px;padding:16px 20px;background:#fff;border-radius:var(--rs);border:1px solid var(--border);text-align:center;font-size:13px;color:var(--text2)}

/* ADDONS */
.addon-card{background:#fff;border:1px solid var(--border);border-radius:var(--rs);padding:18px 14px;text-align:center;transition:all .35s}
.addon-card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:rgba(16,185,129,.2)}
.addon-card h4{font-size:13px;font-weight:600;margin-bottom:4px}
.addon-price{font-size:16px;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.addon-note{font-size:11px;color:var(--textm);margin-top:2px}

/* WHY DEVMENTA */
.big-stats{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:18px;margin:40px 0;position:relative;z-index:1}
.big-stat{text-align:center;padding:24px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:var(--r);transition:all .4s;position:relative;overflow:hidden}
.big-stat::before{content:'';position:absolute;inset:0;background:var(--gradient);opacity:0;transition:opacity .4s}
.big-stat:hover{transform:translateY(-7px) scale(1.04);border-color:rgba(16,185,129,.35);box-shadow:0 20px 45px rgba(16,185,129,.2)}
.big-stat:hover::before{opacity:.06}
.bs-num{font-family:'DM Serif Display',serif;font-size:36px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:4px;position:relative;z-index:1}
.bs-lbl{font-size:11px;color:rgba(255,255,255,.4);font-weight:500;position:relative;z-index:1}
.dark-card{padding:26px;border-radius:var(--r);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);transition:all .4s;position:relative;z-index:1;overflow:hidden}
.dark-card::before{content:'';position:absolute;left:0;top:0;width:3px;height:100%;background:var(--gradient);transform:scaleY(0);transition:transform .4s}
.dark-card:hover{background:rgba(255,255,255,.06);transform:translateX(7px)}
.dark-card:hover::before{transform:scaleY(1)}
.dc-i{font-size:26px;margin-bottom:12px;display:block;transition:transform .4s}
.dark-card:hover .dc-i{transform:scale(1.18) rotate(-8deg)}
.dark-card h3{font-size:15px;font-weight:600;color:#fff;margin-bottom:6px}
.dark-card p{font-size:13px;color:rgba(255,255,255,.45);line-height:1.75}

/* CTA */
.cta-sec{text-align:center;position:relative;overflow:hidden}
.cta-sec::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(16,185,129,.06),transparent 60%);border-radius:50%;pointer-events:none;animation:op 8s ease-in-out infinite}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:40px;position:relative;z-index:1}
.btn-main{display:inline-flex;align-items:center;padding:14px 32px;border-radius:50px;background:var(--gradient);color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:all .35s;box-shadow:0 6px 22px rgba(16,185,129,.3);font-family:'DM Sans',sans-serif}
.btn-main:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 14px 40px rgba(16,185,129,.45)}
.btn-out{display:inline-flex;align-items:center;padding:14px 32px;border-radius:50px;background:transparent;color:var(--text);font-size:14px;font-weight:600;text-decoration:none;border:2px solid var(--border);transition:all .35s;font-family:'DM Sans',sans-serif}
.btn-out:hover{border-color:var(--green);color:var(--green);transform:translateY(-4px)}
.cta-info{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.cta-info-item{text-align:center}
.ci-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--textm);margin-bottom:3px}
.ci-val{font-size:14px;font-weight:600;color:var(--text)}

/* FOOTER */
.footer{padding:32px 20px;text-align:center;border-top:1px solid var(--border)}
.footer p{font-size:11px;color:var(--textm);line-height:1.9}
.footer-logos{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:10px}
.fl-anfield{font-weight:700;font-size:15px;color:#005EB8}
.fl-x{color:var(--textm)}
.fl-dev{font-weight:700;font-size:15px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* TOAST */
.toast{position:fixed;bottom:24px;right:24px;background:var(--dark);color:#fff;padding:12px 20px;border-radius:50px;font-size:12px;font-weight:500;border:1px solid rgba(16,185,129,.35);z-index:9999;transform:translateX(160%);transition:transform .55s cubic-bezier(.23,1,.32,1);box-shadow:0 10px 40px rgba(16,185,129,.25)}
.toast.show{transform:translateX(0)}
.toast span{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}

@keyframes dart-hit{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(8);opacity:0}}

/* ===================== MOBILE ===================== */
@media(max-width:768px){
  *{cursor:auto!important}
  #dev-cursor,#dev-follower{display:none!important}

  .sec{padding:56px 16px}
  .sec-title{font-size:clamp(22px,7vw,34px)}
  .sec-desc{font-size:14px;margin-bottom:28px}

  /* ALL multi-col grids → 1 col */
  .grid-2,.retainer-cards,.pricing-cards,.ba-grid,.big-stats,.two-cols{grid-template-columns:1fr!important;gap:14px}

  /* 2-col where space allows */
  .grid-3,.grades-row,.impr-row{grid-template-columns:1fr 1fr!important;gap:10px}
  .stats-row{grid-template-columns:1fr 1fr 1fr}

  /* Cards */
  .card{padding:20px 16px}
  .ret-card{padding:24px 18px}

  /* Two col compare — stack */
  .two-cols{border:none;gap:0}
  .col-bad,.col-good{padding:20px 16px;border:1px solid var(--border);border-radius:var(--r)}

  /* Pricing */
  .pricing-cards{max-width:100%}

  /* Hero */
  .hero{padding:70px 18px 50px;min-height:100svh}
  .hero h1{font-size:clamp(26px,8vw,40px)}
  .hero-sub{font-size:14px}
  .hero-logos{gap:12px}
  .hero-logo-item{padding:10px 16px;font-size:13px}
  .hero-meta{gap:16px;margin-top:28px}
  .hero-header-img{width:88px;height:88px}
  .hero-badge{font-size:10px;padding:8px 16px}

  /* After mockup mobile */
  .mock-hero-area{grid-template-columns:1fr}
  .mock-right{display:none}
  .mock-strip{display:none}

  /* CTA */
  .cta-btns{flex-direction:column;align-items:center}
  .btn-main,.btn-out{width:100%;max-width:280px;justify-content:center}
  .cta-info{gap:20px}

  /* Toast */
  .toast{bottom:12px;right:12px;left:12px;text-align:center;border-radius:14px}

  /* Bundle/loyalty boxes */
  .bundle-box,.loyalty-box{font-size:12px;padding:14px 16px}
}

@media(max-width:380px){
  .grid-3,.grades-row,.impr-row{grid-template-columns:1fr!important}
  .stats-row{grid-template-columns:1fr 1fr}
}