/* ═══ CENTRALIZEPRO v2 — MODERN DARK DESIGN ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root {
  --orange:#FF6B35; --orange-dk:#E85420; --gold:#F7B538; --gold-lt:#FFCE6E;
  --charcoal:#2C2E35; --charcoal-lt:#3D3F49; --dark-bg:#1a1b21; --card-bg:#23252d;
  --white:#FFFFFF; --off-white:#F8F7F4; --muted:#9A9BA3; --border:#E8E6E1;
  --border-dark:rgba(255,255,255,.06);
  --grad-brand:linear-gradient(135deg,#FFCE6E 0%,#FF6B35 55%,#E85420 100%);
  --grad-pro:linear-gradient(135deg,#F7B538 0%,#FF6B35 60%,#E85420 100%);
  --grad-text:linear-gradient(135deg,#F7B538 0%,#FF6B35 100%);
  --font-d:'Poppins',sans-serif; --font-s:'Merriweather',serif;
  --shadow-cta:0 4px 18px rgba(255,107,53,.32);
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:9999px;
}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--font-d);background:var(--dark-bg);color:var(--charcoal);line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ── NAV ── */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:background .3s,box-shadow .3s,padding .3s}
.site-nav.scrolled{background:rgba(26,27,33,.95);box-shadow:0 1px 32px rgba(0,0,0,.3);padding:10px 0;backdrop-filter:blur(16px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1120px;margin:0 auto;padding:0 24px}
.nav-logo img{height:44px;width:auto;object-fit:contain}
.nav-logo .logo-icon{display:none;height:60px}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-size:14px;font-weight:500;color:rgba(255,255,255,.7);transition:color .2s}
.nav-links a:hover{color:var(--white)}
.nav-cta{display:inline-flex;align-items:center;padding:11px 24px;background:var(--grad-brand);color:#fff;font-size:13px;font-weight:700;border:none;border-radius:var(--r-full);box-shadow:var(--shadow-cta);transition:opacity .2s,transform .2s;cursor:pointer;white-space:nowrap}
.nav-cta:hover{opacity:.88;transform:translateY(-1px)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none;z-index:101;position:relative}
.hamburger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ── HERO ── */
.hero{min-height:100vh;background:var(--dark-bg);display:flex;align-items:center;position:relative;overflow:hidden;padding:120px 0 60px}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 80% 60% at 70% 50%,rgba(255,107,53,.07) 0%,transparent 60%),
  radial-gradient(ellipse 60% 50% at 10% 80%,rgba(247,181,56,.06) 0%,transparent 60%),
  radial-gradient(ellipse 40% 30% at 50% 0%,rgba(255,107,53,.04) 0%,transparent 50%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;position:relative}
.hero-eyebrow{font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.hero-eyebrow::before{content:"";width:24px;height:1.5px;background:var(--gold);border-radius:2px}
.hero h1{font-size:clamp(34px,4.8vw,60px);font-weight:900;color:#fff;letter-spacing:-2.5px;line-height:1.04;margin-bottom:18px;text-wrap:pretty}
.hero h1 .grad{background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:16px;font-weight:300;color:rgba(255,255,255,.6);line-height:1.75;margin-bottom:36px;max-width:460px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn-p{display:inline-flex;align-items:center;justify-content:center;padding:14px 30px;background:var(--grad-brand);color:#fff;font-family:var(--font-d);font-size:14px;font-weight:700;border:none;border-radius:var(--r-full);cursor:pointer;box-shadow:var(--shadow-cta);transition:opacity .2s,transform .2s}
.btn-p:hover{opacity:.88;transform:translateY(-1px)}
.btn-s{display:inline-flex;align-items:center;justify-content:center;padding:13px 24px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.8);font-family:var(--font-d);font-size:14px;font-weight:600;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-full);cursor:pointer;transition:border-color .2s,background .2s;backdrop-filter:blur(4px)}
.btn-s:hover{border-color:var(--orange);background:rgba(255,107,53,.06)}
/* Hero visual with glow + perspective */
.hero-visual{position:relative;perspective:900px}
.hero-screenshot{border-radius:var(--r-xl);overflow:hidden;position:relative;transform:rotateY(-4deg) rotateX(2deg);transition:transform .4s ease;border:1px solid rgba(255,255,255,.08);box-shadow:0 32px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04)}
.hero-screenshot:hover{transform:rotateY(-1deg) rotateX(0.5deg)}
.hero-screenshot img{width:100%;display:block}
.hero-glow{position:absolute;width:120%;height:120%;top:-10%;left:-10%;background:radial-gradient(ellipse at 40% 50%,rgba(255,107,53,.18) 0%,rgba(247,181,56,.08) 30%,transparent 65%);pointer-events:none;z-index:-1;filter:blur(40px)}
/* Floating elements */
.float-el{position:absolute;border-radius:var(--r-lg);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);padding:10px 14px;font-size:11px;font-weight:600;color:#fff;z-index:2;animation:float 4s ease-in-out infinite;pointer-events:none}
.float-el.el1{top:8%;right:-28px;background:rgba(255,107,53,.15);animation-delay:0s}
.float-el.el2{bottom:14%;left:-24px;background:rgba(247,181,56,.12);animation-delay:1.5s}
.float-el.el3{top:50%;right:-40px;background:rgba(52,199,89,.1);animation-delay:3s}
.float-dot{position:absolute;border-radius:50%;pointer-events:none;z-index:2}
.float-dot.d1{width:8px;height:8px;background:var(--orange);top:20%;left:-12px;opacity:.5;animation:pulse 3s ease-in-out infinite}
.float-dot.d2{width:6px;height:6px;background:var(--gold);bottom:24%;right:10%;opacity:.4;animation:pulse 3s ease-in-out infinite 1s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.7;transform:scale(1.3)}}

/* ── STATS ── */
.stats{background:var(--dark-bg);border-top:1px solid var(--border-dark);padding:48px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat{padding:16px;border-radius:var(--r-lg);background:rgba(255,255,255,.02);border:1px solid var(--border-dark)}
.stat-num{font-size:clamp(28px,3vw,40px);font-weight:800;background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;margin-bottom:4px}
.stat-label{font-size:12px;font-weight:400;color:rgba(255,255,255,.5);letter-spacing:.04em}

/* ── SECTION BASE ── */
.section{padding:100px 0;position:relative}
.section-header{text-align:center;max-width:600px;margin:0 auto 64px}
.section-eyebrow{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.section-title{font-size:clamp(28px,3.5vw,44px);font-weight:900;letter-spacing:-1.5px;line-height:1.1;margin-bottom:14px}
.section-sub{font-size:15px;font-weight:300;line-height:1.75}
.section--dark{background:var(--charcoal);color:#fff}
.section--dark .section-title{color:#fff}
.section--dark .section-sub{color:rgba(255,255,255,.6)}
.section--darker{background:var(--dark-bg);color:#fff}
.section--darker .section-title{color:#fff}
.section--darker .section-sub{color:rgba(255,255,255,.55)}
.section--light{background:var(--off-white);color:var(--charcoal)}
.section--light .section-title{color:var(--charcoal)}
.section--light .section-sub{color:var(--muted)}
/* Mesh bg effect */
.mesh-bg{position:relative;overflow:hidden}
.mesh-bg::before{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 50% 40% at 80% 20%,rgba(255,107,53,.06) 0%,transparent 60%),
  radial-gradient(ellipse 40% 50% at 15% 80%,rgba(247,181,56,.05) 0%,transparent 60%);pointer-events:none}
/* Grid dot bg */
.grid-bg::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:24px 24px;pointer-events:none}

/* ── FEATURES BENTO ── */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;z-index:1}
.bento-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-xl);padding:28px 24px;transition:transform .3s,border-color .3s,box-shadow .3s;position:relative;overflow:hidden}
.bento-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);opacity:0;transition:opacity .3s}
.bento-card:hover{transform:translateY(-3px);border-color:rgba(255,107,53,.15);box-shadow:0 16px 48px rgba(0,0,0,.2)}
.bento-card:hover::before{opacity:1}
.bento-icon{width:40px;height:40px;border-radius:var(--r-md);background:linear-gradient(135deg,rgba(255,107,53,.12),rgba(247,181,56,.08));display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.bento-icon svg{width:20px;height:20px;stroke:var(--orange);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bento-card h3{font-size:15px;font-weight:700;color:#fff;margin-bottom:6px;letter-spacing:-.2px}
.bento-card p{font-size:13px;color:rgba(255,255,255,.55);line-height:1.6}

/* ── DETAIL SECTIONS ── */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.detail.reverse{direction:rtl}
.detail.reverse>*{direction:ltr}
.detail-visual{position:relative;perspective:800px}
.detail-img{border-radius:var(--r-xl);overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.06);box-shadow:0 24px 64px rgba(0,0,0,.3);transition:transform .4s}
.section--light .detail-img{border-color:rgba(0,0,0,.08);box-shadow:0 24px 64px rgba(0,0,0,.08)}
.detail-img img{width:100%;display:block}
.detail-glow{position:absolute;inset:-20%;background:radial-gradient(ellipse at center,rgba(255,107,53,.12) 0%,transparent 65%);pointer-events:none;z-index:-1;filter:blur(30px)}
.section--light .detail-glow{background:radial-gradient(ellipse at center,rgba(255,107,53,.08) 0%,transparent 65%)}
.detail-eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.detail-title{font-size:clamp(24px,2.8vw,36px);font-weight:900;letter-spacing:-1px;line-height:1.12;margin-bottom:14px}
.section--dark .detail-title,.section--darker .detail-title{color:#fff}
.detail-text{font-size:15px;line-height:1.8;margin-bottom:24px}
.section--dark .detail-text{color:rgba(255,255,255,.6)}
.section--light .detail-text{color:var(--muted)}
.detail-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.detail-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5}
.section--dark .detail-list li{color:rgba(255,255,255,.7)}
.section--light .detail-list li{color:var(--charcoal-lt)}
.detail-list li::before{content:"";flex-shrink:0;width:20px;height:20px;border-radius:50%;margin-top:2px;background:linear-gradient(135deg,rgba(255,107,53,.15),rgba(247,181,56,.1));background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FF6B35' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:11px}
/* Detail floating badges */
.detail-float{position:absolute;border-radius:var(--r-lg);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);padding:8px 14px;font-size:10px;font-weight:600;color:#fff;z-index:3;animation:float 5s ease-in-out infinite;pointer-events:none;white-space:nowrap}

/* ── PRICING ── */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;position:relative;z-index:1}
.plan{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-xl);padding:36px 28px;position:relative;transition:transform .3s,box-shadow .3s}
.plan:hover{transform:translateY(-4px);box-shadow:0 20px 56px rgba(0,0,0,.25)}
.plan--featured{background:rgba(255,107,53,.04);border:1.5px solid rgba(255,107,53,.2);box-shadow:0 0 48px rgba(255,107,53,.08)}
.plan--featured:hover{box-shadow:0 20px 56px rgba(255,107,53,.12)}
.plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad-brand);color:#fff;font-size:11px;font-weight:700;padding:5px 18px;border-radius:var(--r-full);letter-spacing:.06em;white-space:nowrap}
.plan-name{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:4px;color:#fff}
.plan-desc{font-size:13px;color:rgba(255,255,255,.55);margin-bottom:20px;line-height:1.5}
.plan-price{display:flex;align-items:baseline;gap:4px;margin-bottom:6px}
.plan-currency{font-size:16px;font-weight:600;color:rgba(255,255,255,.4)}
.plan-amount{font-size:clamp(38px,3.5vw,50px);font-weight:900;letter-spacing:-2px;line-height:1;background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.plan-period{font-size:14px;color:rgba(255,255,255,.5);font-weight:400}
.plan-divider{height:1px;background:rgba(255,255,255,.06);margin:20px 0}
.plan-features{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.plan-features li{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.7)}
.plan-features li .ico{flex-shrink:0;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px}
.plan-features li .ico.yes{background:rgba(52,199,89,.12)}
.plan-features li .ico.yes svg{stroke:#34c759}
.plan-features li .ico.no{background:rgba(255,255,255,.04)}
.plan-features li .ico.no svg{stroke:rgba(255,255,255,.2)}
.plan-features li .ico svg{width:11px;height:11px;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.plan-features li.dim{color:rgba(255,255,255,.35)}
.plan-cta{display:block;width:100%;text-align:center;padding:13px 24px;border-radius:var(--r-full);font-family:var(--font-d);font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;border:none}
.plan-cta.primary{background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-cta)}
.plan-cta.primary:hover{opacity:.88;transform:translateY(-1px)}
.plan-cta.secondary{background:rgba(255,255,255,.04);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.1)}
.plan-cta.secondary:hover{border-color:var(--orange);background:rgba(255,107,53,.06);color:#fff}
.pricing-note{text-align:center;margin-top:32px;font-size:13px;color:rgba(255,255,255,.5);line-height:1.8;position:relative;z-index:1}
.pricing-note strong{color:rgba(255,255,255,.8)}

/* ── CTA SECTION ── */
.cta-section{background:var(--charcoal);padding:100px 0;text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 50% 60% at 50% 120%,rgba(255,107,53,.15) 0%,transparent 60%),
  radial-gradient(ellipse 40% 40% at 20% -20%,rgba(247,181,56,.06) 0%,transparent 60%);pointer-events:none}
.cta-section h2{font-size:clamp(30px,4vw,48px);font-weight:900;color:#fff;letter-spacing:-2px;line-height:1.08;margin-bottom:14px;position:relative}
.cta-section .sub{font-size:16px;color:rgba(255,255,255,.6);margin-bottom:36px;position:relative;font-weight:300}
.cta-section .hero-actions{justify-content:center;position:relative}

/* ── FOOTER ── */
.site-footer{background:var(--dark-bg);padding:64px 0 0;color:rgba(255,255,255,.55);border-top:1px solid var(--border-dark)}
.footer-grid{display:grid;grid-template-columns:auto 1.5fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--border-dark)}
.footer-brand img{height:60px;width:auto;object-fit:contain;margin-bottom:16px}
.footer-brand p{font-size:13px;line-height:1.75;max-width:280px}
.footer-col h4{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.2);margin-bottom:16px}
.footer-col a{display:block;font-size:13px;padding:4px 0;color:rgba(255,255,255,.55);transition:color .2s}
.footer-col a:hover{color:var(--orange)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 0;font-size:12px;color:rgba(255,255,255,.4)}

/* ── ANIMATIONS ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}

/* ── MOBILE MENU ── */
.mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(26,27,33,.98);z-index:99;flex-direction:column;align-items:center;justify-content:center;gap:24px;backdrop-filter:blur(20px)}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:20px;font-weight:600;color:#fff;padding:8px 0}
.mobile-menu .nav-cta{margin-top:16px;font-size:15px;padding:14px 32px}
.mobile-close{position:absolute;top:20px;right:24px;background:none;border:none;cursor:pointer;z-index:101;padding:12px;width:48px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.mobile-close span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;position:absolute}
.mobile-close span:first-child{transform:rotate(45deg)}
.mobile-close span:last-child{transform:rotate(-45deg)}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:40px}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-eyebrow{justify-content:center}
  .hero-screenshot{transform:none!important}
  .hero-visual{perspective:none}
  .bento{grid-template-columns:repeat(2,1fr)}
  .detail{grid-template-columns:1fr;gap:36px}
  .detail.reverse{direction:ltr}
  .pricing-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .footer-grid{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .float-el,.float-dot,.detail-float{display:none}
  .hero{overflow:hidden}
  .section{overflow:hidden}
}
@media(max-width:768px){
  .nav-links{display:none}
  .nav-cta.desktop{display:none}
  .hamburger{display:flex}
  .nav-logo .logo-full{display:block}
  .nav-logo .logo-icon{display:none}
  .nav-logo img{height:36px;width:auto;object-fit:contain}
  .site-nav{padding:12px 0}
  .site-nav.scrolled{padding:8px 0}
  .section{padding:56px 0}
  .section-header{margin-bottom:36px}
  .section-title{font-size:28px}
  .section-sub{font-size:14px}
  .detail-title{font-size:26px}
  .detail-text{font-size:14px}
  .hero h1{font-size:34px;letter-spacing:-1.5px}
  .hero-sub{font-size:15px}
  .hero{padding:100px 0 60px}
  .stat-num{font-size:28px}
  .plan-amount{font-size:40px}
  .plan-name{font-size:20px}
  .plan-features li{font-size:14px}
  .bento-card h3{font-size:16px}
  .bento-card p{font-size:14px}
  .cta-section h2{font-size:30px}
  .cta-section .sub{font-size:15px}
  .footer-grid{grid-template-columns:1fr}
  .footer-brand img{height:80px;width:auto}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
}
@media(max-width:480px){
  .bento{grid-template-columns:1fr}
  .hero h1{font-size:28px;letter-spacing:-1px}
  .hero-sub{font-size:14px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .section-title{font-size:24px}
  .detail-title{font-size:22px}
  .cta-section h2{font-size:26px}
  .pricing-grid{max-width:100%}
}