/* ============================================================
   WWXIA — DESIGN SYSTEM COMPLET
   www.wwxia.com — Site Vitrine Professionnel
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --navy:       #0a0f2e;
  --navy-light: #111936;
  --blue:       #1d4ed8;
  --blue-mid:   #2563eb;
  --blue-light: #3b82f6;
  --blue-pale:  #60a5fa;
  --cyan:       #06b6d4;
  --cyan-light: #22d3ee;
  --gold:       #f59e0b;
  --gold-light: #fbbf24;
  --emerald:    #10b981;
  --purple:     #8b5cf6;
  --rose:       #f43f5e;
  --white:      #ffffff;
  --bg:         #f8fafc;
  --bg-card:    #ffffff;
  --text:       #0f172a;
  --text-2:     #334155;
  --text-3:     #64748b;
  --text-4:     #94a3b8;
  --border:     #e2e8f0;
  --border-2:   #cbd5e1;
  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow:     0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl:  0 24px 64px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.08);
  --glow-blue:  0 0 40px rgba(59,130,246,.35);
  --glow-gold:  0 0 40px rgba(245,158,11,.3);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',sans-serif;color:var(--text);background:var(--bg);overflow-x:hidden;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
h1,h2,h3,h4,h5,h6{font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1.2}

/* === UTILITAIRES === */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.container-wide{max-width:1400px;margin:0 auto;padding:0 24px}
.section{padding:100px 0}
.section-sm{padding:64px 0}
.text-center{text-align:center}
.text-gradient{background:linear-gradient(135deg,var(--blue-light),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-gradient-gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hidden{display:none}
.flex{display:flex}
.flex-center{display:flex;align-items:center;justify-content:center}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.gap-4{gap:16px}
.gap-6{gap:24px}
.gap-8{gap:32px}
.mb-2{margin-bottom:8px}
.mb-3{margin-bottom:12px}
.mb-4{margin-bottom:16px}
.mb-6{margin-bottom:24px}
.mb-8{margin-bottom:32px}
.mb-12{margin-bottom:48px}
.mt-4{margin-top:16px}
.mt-6{margin-top:24px}
.mt-8{margin-top:32px}

/* === BADGE === */
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.badge-blue{background:rgba(59,130,246,.12);color:var(--blue-light);border:1px solid rgba(59,130,246,.25)}
.badge-gold{background:rgba(245,158,11,.12);color:var(--gold);border:1px solid rgba(245,158,11,.25)}
.badge-green{background:rgba(16,185,129,.12);color:var(--emerald);border:1px solid rgba(16,185,129,.25)}
.badge-purple{background:rgba(139,92,246,.12);color:var(--purple);border:1px solid rgba(139,92,246,.25)}
.badge-cyan{background:rgba(6,182,212,.12);color:var(--cyan);border:1px solid rgba(6,182,212,.25)}

/* === BOUTONS === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:var(--radius);font-size:15px;font-weight:600;transition:all .2s ease;white-space:nowrap}
.btn-lg{padding:18px 40px;font-size:17px;border-radius:var(--radius-lg)}
.btn-sm{padding:10px 20px;font-size:13px;border-radius:var(--radius-sm)}
.btn-primary{background:linear-gradient(135deg,var(--blue-mid),var(--blue-light));color:white;box-shadow:0 4px 15px rgba(37,99,235,.4)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(37,99,235,.5)}
.btn-secondary{background:white;color:var(--blue-mid);border:2px solid var(--border-2)}
.btn-secondary:hover{border-color:var(--blue-light);background:var(--bg);transform:translateY(-1px)}
.btn-outline-white{background:transparent;color:white;border:2px solid rgba(255,255,255,.35)}
.btn-outline-white:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy);box-shadow:0 4px 15px rgba(245,158,11,.35)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(245,158,11,.5)}
.btn-ghost{background:transparent;color:var(--text-3)}
.btn-ghost:hover{color:var(--blue-light);background:rgba(59,130,246,.06)}

/* === NAVIGATION === */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 24px;transition:all .3s ease}
.navbar.scrolled{background:rgba(10,15,46,.95);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 4px 24px rgba(0,0,0,.3)}
.navbar-inner{max-width:1200px;margin:0 auto;height:70px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.navbar-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.navbar-logo{width:38px;height:38px;background:linear-gradient(135deg,var(--blue-mid),var(--cyan));border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:800;color:white;font-size:18px;box-shadow:var(--glow-blue)}
.navbar-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;color:white;letter-spacing:-.3px}
.navbar-name span{color:var(--blue-pale)}
.navbar-links{display:flex;align-items:center;gap:4px}
.navbar-links a{padding:8px 14px;border-radius:var(--radius-sm);color:rgba(255,255,255,.75);font-size:14px;font-weight:500;transition:all .2s}
.navbar-links a:hover{color:white;background:rgba(255,255,255,.08)}
.navbar-links a.active{color:var(--blue-pale);background:rgba(59,130,246,.12)}
.navbar-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px;border-radius:8px;cursor:pointer;flex-shrink:0;margin-left:auto}
.hamburger span{display:block;width:22px;height:2px;background:white;border-radius:2px;transition:.3s}
.mobile-menu{display:none;position:fixed;top:70px;left:0;right:0;background:rgba(10,15,46,.98);backdrop-filter:blur(20px);padding:24px;border-bottom:1px solid rgba(255,255,255,.1);z-index:999}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:12px 16px;color:rgba(255,255,255,.8);font-size:15px;font-weight:500;border-radius:var(--radius-sm);margin-bottom:4px;transition:.2s}
.mobile-menu a:hover{background:rgba(255,255,255,.08);color:white}
.mobile-menu a:last-child{background:linear-gradient(135deg,var(--blue-mid),var(--blue-light));color:white!important;text-align:center;margin-top:8px;font-weight:700}
.mobile-menu a:last-child:hover{opacity:.9}
.mobile-menu a:nth-last-child(2){border-top:1px solid rgba(255,255,255,.08);padding-top:16px;margin-top:8px}

/* === HERO === */
.hero{min-height:100vh;background:var(--navy);position:relative;display:flex;align-items:center;overflow:hidden;padding-top:70px}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at center,black 40%,transparent 75%)}
.hero-orb{position:absolute;border-radius:50%;filter:blur(80px);animation:orbFloat 8s ease-in-out infinite}
.hero-orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(37,99,235,.35),transparent 70%);top:-100px;right:-100px;animation-delay:0s}
.hero-orb-2{width:400px;height:400px;background:radial-gradient(circle,rgba(6,182,212,.25),transparent 70%);bottom:50px;left:-50px;animation-delay:3s}
.hero-orb-3{width:300px;height:300px;background:radial-gradient(circle,rgba(245,158,11,.2),transparent 70%);top:30%;left:40%;animation-delay:6s}
@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.05)}}
.hero-content{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:80px 24px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.hero-text .badge{margin-bottom:24px}
.hero-title{font-size:clamp(36px,5vw,64px);font-weight:800;color:white;line-height:1.05;margin-bottom:24px;letter-spacing:-1.5px}
.hero-title em{font-style:normal;background:linear-gradient(135deg,var(--blue-pale),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:18px;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:40px;max-width:520px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:48px}
.hero-stats{display:flex;gap:40px}
.hero-stat-num{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:800;color:white}
.hero-stat-num span{color:var(--blue-pale)}
.hero-stat-label{font-size:12px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px}
.hero-visual{position:relative}
.app-showcase{position:relative}
.laptop-frame{width:100%;max-width:500px;margin:0 auto;position:relative}
.laptop-screen{background:linear-gradient(135deg,#1a2744,#0f172a);border-radius:16px 16px 4px 4px;padding:20px;border:2px solid rgba(255,255,255,.1);box-shadow:0 40px 80px rgba(0,0,0,.6),var(--glow-blue)}
.screen-bar{display:flex;align-items:center;gap:6px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}
.screen-dot{width:10px;height:10px;border-radius:50%}
.screen-dot-r{background:#ef4444}
.screen-dot-y{background:#f59e0b}
.screen-dot-g{background:#10b981}
.screen-url{flex:1;background:rgba(255,255,255,.06);border-radius:999px;height:20px;margin-left:8px}
.screen-content{display:grid;grid-template-columns:180px 1fr;gap:12px;height:220px}
.screen-sidebar{background:rgba(255,255,255,.04);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px}
.screen-nav-item{height:10px;background:rgba(255,255,255,.08);border-radius:4px}
.screen-nav-item.active{background:linear-gradient(90deg,var(--blue-mid),var(--blue-light));width:80%}
.screen-main{display:flex;flex-direction:column;gap:10px}
.screen-header{height:36px;background:linear-gradient(90deg,rgba(37,99,235,.3),rgba(6,182,212,.2));border-radius:8px}
.screen-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1}
.screen-card{background:rgba(255,255,255,.05);border-radius:8px;padding:10px;border:1px solid rgba(255,255,255,.06)}
.screen-card-top{height:8px;background:rgba(59,130,246,.4);border-radius:4px;margin-bottom:8px;width:60%}
.screen-card-line{height:6px;background:rgba(255,255,255,.08);border-radius:3px;margin-bottom:5px}
.screen-card-line.w80{width:80%}
.screen-card-line.w60{width:60%}
.laptop-base{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));height:20px;border-radius:0 0 8px 8px;margin-top:2px}
.laptop-stand{width:120px;height:12px;background:rgba(255,255,255,.06);margin:0 auto;border-radius:0 0 8px 8px}
.floating-card{position:absolute;background:rgba(15,23,42,.95);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow-lg);animation:float 4s ease-in-out infinite}
.floating-card-1{top:-20px;right:-30px;animation-delay:0s}
.floating-card-2{bottom:40px;left:-40px;animation-delay:2s}
.floating-card-icon{font-size:20px;margin-bottom:6px}
.floating-card-label{font-size:11px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.floating-card-value{font-size:15px;font-weight:700;color:white}
.floating-card-sub{font-size:11px;color:var(--emerald)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* === SECTION TITLES === */
.section-label{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--blue-light);margin-bottom:16px}
.section-label::before{content:'';width:24px;height:2px;background:var(--blue-light);border-radius:1px}
.section-title{font-size:clamp(28px,4vw,46px);font-weight:800;color:var(--text);line-height:1.15;letter-spacing:-.5px;margin-bottom:16px}
.section-subtitle{font-size:17px;color:var(--text-3);line-height:1.7;max-width:600px}

/* === STATS BAR === */
.stats-bar{background:var(--navy);padding:40px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.stats-bar .container{display:flex;justify-content:space-around;flex-wrap:wrap;gap:32px}
.stat-item{text-align:center;position:relative}
.stat-item+.stat-item::before{content:'';position:absolute;left:-24px;top:50%;transform:translateY(-50%);height:40px;width:1px;background:rgba(255,255,255,.1)}
.stat-num{font-family:'Space Grotesk',sans-serif;font-size:42px;font-weight:800;line-height:1;background:linear-gradient(135deg,white,var(--blue-pale));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-label{font-size:13px;color:rgba(255,255,255,.5);margin-top:6px;text-transform:uppercase;letter-spacing:.5px}

/* === FEATURES === */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;transition:all .3s ease;position:relative;overflow:hidden}
.feature-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(37,99,235,.03),rgba(6,182,212,.02));opacity:0;transition:.3s}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(59,130,246,.25)}
.feature-card:hover::before{opacity:1}
.feature-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:20px}
.feature-icon-blue{background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(59,130,246,.08));color:var(--blue-light)}
.feature-icon-cyan{background:linear-gradient(135deg,rgba(6,182,212,.12),rgba(34,211,238,.08));color:var(--cyan)}
.feature-icon-gold{background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(251,191,36,.08));color:var(--gold)}
.feature-icon-green{background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(52,211,153,.08));color:var(--emerald)}
.feature-icon-purple{background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(167,139,250,.08));color:var(--purple)}
.feature-icon-rose{background:linear-gradient(135deg,rgba(244,63,94,.12),rgba(251,113,133,.08));color:var(--rose)}
.feature-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:10px}
.feature-text{font-size:14px;color:var(--text-3);line-height:1.65}

/* === MODULE CARDS === */
.modules-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.module-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px;text-align:center;transition:all .25s ease;position:relative;overflow:hidden}
.module-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(59,130,246,.2)}
.module-card-icon{font-size:32px;margin-bottom:14px;display:block}
.module-card-name{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px}
.module-card-desc{font-size:12px;color:var(--text-3);line-height:1.5}
.module-card-tag{position:absolute;top:12px;right:12px;font-size:10px;padding:3px 8px;border-radius:999px;font-weight:600;letter-spacing:.3px}
.module-card-tag-new{background:rgba(16,185,129,.12);color:var(--emerald)}
.module-card-tag-pro{background:rgba(245,158,11,.12);color:var(--gold)}
.module-card-tag-ia{background:rgba(139,92,246,.12);color:var(--purple)}

/* === APPS SECTION === */
.apps-showcase{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px}
.app-card{background:var(--navy);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-xl);padding:40px 32px;text-align:center;transition:all .35s ease;position:relative;overflow:hidden}
.app-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue-mid),var(--cyan));opacity:0;transition:.3s}
.app-card:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(0,0,0,.4),var(--glow-blue)}
.app-card:hover::after{opacity:1}
.app-card-icon{width:80px;height:80px;border-radius:22px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;font-size:36px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.app-card-title{font-size:22px;font-weight:700;color:white;margin-bottom:12px}
.app-card-desc{font-size:14px;color:rgba(255,255,255,.55);line-height:1.65;margin-bottom:24px}
.app-card-features{text-align:left;margin-bottom:28px}
.app-card-features li{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.7);margin-bottom:10px}
.app-card-features li::before{content:'✓';color:var(--cyan);font-weight:700;font-size:12px;flex-shrink:0}

/* === ERP COMPATIBILITY === */
.erp-section{background:linear-gradient(135deg,var(--navy),#0d1b3e);padding:80px 0}
.erp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:48px}
.erp-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:20px 16px;text-align:center;transition:all .25s}
.erp-card:hover{background:rgba(255,255,255,.08);border-color:rgba(59,130,246,.3);transform:translateY(-3px)}
.erp-logo{font-size:28px;margin-bottom:10px}
.erp-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.75)}
.erp-type{font-size:11px;color:rgba(255,255,255,.35);margin-top:3px}

/* === DOWNLOAD === */
.download-section{background:linear-gradient(135deg,var(--navy-light),var(--navy));padding:80px 0}
.download-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.download-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);padding:36px 28px;text-align:center;transition:.3s}
.download-card:hover{background:rgba(255,255,255,.08);transform:translateY(-4px)}
.download-icon{font-size:48px;margin-bottom:20px}
.download-title{font-size:20px;font-weight:700;color:white;margin-bottom:8px}
.download-sub{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:24px;line-height:1.5}
.download-version{display:inline-block;font-size:11px;padding:4px 12px;border-radius:999px;background:rgba(59,130,246,.15);color:var(--blue-pale);margin-bottom:20px;font-weight:600}
.download-btns{display:flex;flex-direction:column;gap:10px}
.btn-download{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;border-radius:var(--radius);font-size:14px;font-weight:600;transition:all .2s}
.btn-dl-primary{background:linear-gradient(135deg,var(--blue-mid),var(--blue-light));color:white}
.btn-dl-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,99,235,.4)}
.btn-dl-secondary{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.15)}
.btn-dl-secondary:hover{background:rgba(255,255,255,.12);color:white}
.store-badges{display:flex;flex-direction:column;gap:10px;align-items:center}
.store-badge{display:flex;align-items:center;gap:12px;padding:12px 20px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);color:white;width:100%;transition:.2s}
.store-badge:hover{background:rgba(0,0,0,.6);transform:translateY(-2px)}
.store-badge-icon{font-size:22px}
.store-badge-text{text-align:left}
.store-badge-sup{font-size:10px;color:rgba(255,255,255,.5);letter-spacing:.3px}
.store-badge-name{font-size:15px;font-weight:700}

/* === PRICING === */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pricing-card{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-xl);padding:40px 32px;transition:.3s;position:relative}
.pricing-card.popular{border-color:var(--blue-light);background:linear-gradient(180deg,rgba(37,99,235,.04),var(--bg-card))}
.pricing-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,var(--blue-mid),var(--blue-light));color:white;font-size:12px;font-weight:700;padding:6px 20px;border-radius:999px;letter-spacing:.5px;white-space:nowrap}
.pricing-plan{font-size:13px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.pricing-price{font-family:'Space Grotesk',sans-serif;font-size:52px;font-weight:800;color:var(--text);line-height:1;margin-bottom:4px}
.pricing-price span{font-size:18px;font-weight:500;color:var(--text-3);margin-left:4px}
.pricing-period{font-size:13px;color:var(--text-4);margin-bottom:24px}
.pricing-divider{height:1px;background:var(--border);margin-bottom:24px}
.pricing-features{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
.pricing-feature{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2)}
.pricing-feature .check{color:var(--emerald);font-size:12px;flex-shrink:0}
.pricing-feature .cross{color:var(--text-4);font-size:12px;flex-shrink:0}

/* === TESTIMONIALS === */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testimonial-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;transition:.25s}
.testimonial-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.testimonial-stars{color:var(--gold);font-size:14px;margin-bottom:16px;letter-spacing:2px}
.testimonial-text{font-size:15px;color:var(--text-2);line-height:1.7;margin-bottom:20px;font-style:italic}
.testimonial-text::before{content:'"';font-size:48px;color:var(--blue-light);opacity:.3;line-height:.5;float:left;margin-right:8px}
.testimonial-author{display:flex;align-items:center;gap:12px}
.testimonial-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--blue-mid),var(--cyan));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:white;flex-shrink:0}
.testimonial-name{font-size:14px;font-weight:700;color:var(--text)}
.testimonial-role{font-size:12px;color:var(--text-3)}

/* === CTA BANNER === */
.cta-banner{background:linear-gradient(135deg,var(--blue-mid) 0%,#1d4ed8 40%,var(--navy) 100%);padding:100px 24px;text-align:center;position:relative;overflow:hidden}
.cta-banner::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.cta-banner-title{font-size:clamp(28px,4vw,50px);font-weight:800;color:white;margin-bottom:16px;letter-spacing:-.5px}
.cta-banner-sub{font-size:18px;color:rgba(255,255,255,.7);margin-bottom:40px;max-width:560px;margin-left:auto;margin-right:auto}
.cta-banner-actions{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}

/* === FOOTER === */
.footer{background:var(--navy);color:rgba(255,255,255,.65);padding:80px 0 40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;margin-bottom:60px}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.footer-logo{width:36px;height:36px;background:linear-gradient(135deg,var(--blue-mid),var(--cyan));border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:800;color:white;font-size:17px}
.footer-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;color:white}
.footer-desc{font-size:14px;line-height:1.65;color:rgba(255,255,255,.45);max-width:260px;margin-bottom:24px}
.footer-social{display:flex;gap:12px}
.footer-social-link{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:15px;transition:.2s;color:rgba(255,255,255,.6)}
.footer-social-link:hover{background:rgba(59,130,246,.2);border-color:rgba(59,130,246,.4);color:white}
.footer-heading{font-size:13px;font-weight:700;color:white;text-transform:uppercase;letter-spacing:.5px;margin-bottom:20px}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:14px;color:rgba(255,255,255,.45);transition:.2s}
.footer-links a:hover{color:white}
.footer-divider{border:none;border-top:1px solid rgba(255,255,255,.07);margin-bottom:32px}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer-copy{font-size:13px;color:rgba(255,255,255,.3)}
.footer-badges{display:flex;gap:12px;flex-wrap:wrap}
.footer-badge{font-size:11px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.08)}

/* === PAGE HEADER === */
.page-hero{background:var(--navy);padding:140px 24px 80px;text-align:center;position:relative;overflow:hidden}
.page-hero-bg{position:absolute;inset:0}
.page-hero-bg::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(37,99,235,.3),transparent 70%);border-radius:50%}
.page-hero-bg::after{content:'';position:absolute;bottom:-50px;left:-50px;width:350px;height:350px;background:radial-gradient(circle,rgba(6,182,212,.2),transparent 70%);border-radius:50%}
.page-hero-content{position:relative;z-index:2}
.page-hero-title{font-size:clamp(32px,5vw,56px);font-weight:800;color:white;margin-bottom:16px;letter-spacing:-.5px}
.page-hero-sub{font-size:18px;color:rgba(255,255,255,.6);max-width:600px;margin:0 auto;line-height:1.65}

/* === DOC STYLES === */
.doc-layout{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start}
.doc-sidebar{position:sticky;top:90px}
.doc-nav-group{margin-bottom:28px}
.doc-nav-title{font-size:11px;font-weight:700;color:var(--text-4);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;padding-left:12px}
.doc-nav-link{display:block;padding:8px 12px;font-size:14px;color:var(--text-3);border-radius:var(--radius-sm);transition:.15s;border-left:2px solid transparent}
.doc-nav-link:hover{color:var(--blue-light);background:rgba(59,130,246,.06);border-left-color:var(--blue-light)}
.doc-nav-link.active{color:var(--blue-light);background:rgba(59,130,246,.08);border-left-color:var(--blue-light);font-weight:600}
.doc-toggle{display:none;align-items:center;gap:8px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.25);color:var(--blue-light);border-radius:var(--radius-sm);padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:20px;font-family:inherit}
.doc-toggle:hover{background:rgba(59,130,246,.18)}
.doc-sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:599;backdrop-filter:blur(2px)}
.doc-content h2{font-size:28px;font-weight:800;color:var(--text);margin-bottom:12px;margin-top:48px}
.doc-content h2:first-child{margin-top:0}
.doc-content h3{font-size:20px;font-weight:700;color:var(--text);margin-bottom:10px;margin-top:32px}
.doc-content p{font-size:15px;color:var(--text-2);line-height:1.75;margin-bottom:16px}
.doc-content ul{margin-left:20px;margin-bottom:16px}
.doc-content li{font-size:15px;color:var(--text-2);margin-bottom:8px;line-height:1.6;list-style:disc}
.doc-content code{background:rgba(59,130,246,.08);color:var(--blue-mid);padding:2px 7px;border-radius:5px;font-size:13px;font-family:monospace}
.doc-content pre{background:var(--navy);color:#e2e8f0;padding:24px;border-radius:var(--radius);margin:20px 0;overflow-x:auto;font-size:13px;line-height:1.6;border:1px solid rgba(255,255,255,.06)}
.doc-content .note{background:rgba(59,130,246,.06);border-left:3px solid var(--blue-light);padding:16px 20px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:20px 0;font-size:14px;color:var(--text-2)}
.doc-content .warning{background:rgba(245,158,11,.06);border-left:3px solid var(--gold);padding:16px 20px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:20px 0;font-size:14px;color:var(--text-2)}
.doc-content .success{background:rgba(16,185,129,.06);border-left:3px solid var(--emerald);padding:16px 20px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:20px 0;font-size:14px;color:var(--text-2)}

/* === STEP GUIDE === */
.step-list{display:flex;flex-direction:column;gap:0}
.step-item{display:grid;grid-template-columns:60px 1fr;gap:24px;position:relative;padding-bottom:48px}
.step-item:last-child{padding-bottom:0}
.step-item:not(:last-child)::after{content:'';position:absolute;left:29px;top:60px;bottom:0;width:2px;background:linear-gradient(180deg,var(--blue-light),transparent)}
.step-number{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--blue-mid),var(--blue-light));display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:20px;color:white;flex-shrink:0;box-shadow:0 0 0 6px rgba(37,99,235,.12),var(--glow-blue)}
.step-body{padding-top:12px}
.step-title{font-size:20px;font-weight:700;color:var(--text);margin-bottom:8px}
.step-desc{font-size:15px;color:var(--text-3);line-height:1.65;margin-bottom:16px}
.step-visual{background:var(--navy);border-radius:var(--radius);padding:20px;border:1px solid rgba(255,255,255,.08);margin-bottom:16px;font-family:monospace;font-size:13px;color:#a5f3fc;line-height:1.8;overflow-x:auto}
.step-visual .cmd{color:#fbbf24}
.step-visual .out{color:#6ee7b7;opacity:.8}
.step-visual .comment{color:#64748b}

/* === TABS === */
.tabs{display:flex;gap:4px;background:rgba(0,0,0,.04);border-radius:var(--radius);padding:4px;margin-bottom:32px}
.tab-btn{flex:1;padding:10px 16px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;color:var(--text-3);transition:.2s;cursor:pointer;border:none;background:none;font-family:'Inter',sans-serif}
.tab-btn.active{background:var(--bg-card);color:var(--blue-mid);box-shadow:var(--shadow-sm)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* === DIAGRAM VISUAL === */
.arch-diagram{background:var(--navy);border-radius:var(--radius-xl);padding:48px;border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
.arch-row{display:flex;justify-content:space-between;gap:16px;margin-bottom:24px;position:relative;z-index:2}
.arch-node{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:16px 12px;text-align:center;transition:.2s}
.arch-node:hover{background:rgba(255,255,255,.08);border-color:rgba(59,130,246,.4)}
.arch-node-icon{font-size:24px;margin-bottom:8px}
.arch-node-label{font-size:12px;font-weight:600;color:white}
.arch-node-sub{font-size:10px;color:rgba(255,255,255,.35);margin-top:3px}
.arch-node.highlight{border-color:var(--blue-light);background:rgba(37,99,235,.15)}
.arch-node.highlight-gold{border-color:var(--gold);background:rgba(245,158,11,.1)}
.arch-arrow{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.3);font-size:20px;margin-bottom:8px}

/* === SCROLLBAR === */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--text-4)}

/* === ANIMATIONS === */
.fade-up{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}
.fade-in{opacity:0;transition:opacity .6s ease}
.fade-in.visible{opacity:1}
.scale-in{opacity:0;transform:scale(.95);transition:opacity .5s ease,transform .5s ease}
.scale-in.visible{opacity:1;transform:scale(1)}
.stagger-1{transition-delay:.1s}
.stagger-2{transition-delay:.2s}
.stagger-3{transition-delay:.3s}
.stagger-4{transition-delay:.4s}
.stagger-5{transition-delay:.5s}
.stagger-6{transition-delay:.6s}

/* === RESPONSIVE === */

/* ---- 1100px : Large tablet ---- */
@media(max-width:1100px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .modules-grid{grid-template-columns:repeat(3,1fr)}
  .erp-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .apps-showcase{grid-template-columns:1fr 1fr}
  .download-cards{grid-template-columns:1fr 1fr}
  .arch-row{flex-wrap:wrap;gap:12px}
  .arch-node{flex:1 1 calc(50% - 8px)}
}

/* ---- 900px : Tablet ---- */
@media(max-width:900px){
  .hero-content{grid-template-columns:1fr;text-align:center;gap:40px;padding:60px 24px}
  .hero-sub{margin:0 auto;max-width:500px}
  .hero-stats{justify-content:center;flex-wrap:wrap;gap:24px}
  .hero-actions{justify-content:center}
  .hero-visual{order:-1}
  .apps-showcase{grid-template-columns:1fr}
  .download-cards{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr 1fr}
  .testimonials-grid{grid-template-columns:1fr 1fr}
  .doc-layout{grid-template-columns:1fr}
  .doc-sidebar{position:fixed;top:0;left:-290px;width:280px;height:100dvh;overflow-y:auto;background:var(--bg-card);border-right:1px solid var(--border);z-index:600;transition:transform .3s ease;padding:80px 16px 32px;box-shadow:none}
  .doc-sidebar.open{transform:translateX(290px);box-shadow:4px 0 32px rgba(0,0,0,.4)}
  .doc-toggle{display:flex}
  .doc-sidebar-overlay{display:block}
  .grid-2{grid-template-columns:1fr}
  .arch-diagram{padding:32px 20px}
}

/* ---- 768px : Mobile ---- */
@media(max-width:768px){
  html{font-size:15px}
  .section{padding:56px 0}
  .section-sm{padding:40px 0}
  .container,.container-wide{padding:0 16px}
  /* Navbar */
  .navbar{padding:0 16px}
  .navbar-links{display:none}
  .navbar-actions{display:none}
  .hamburger{display:flex}
  .navbar-inner{gap:12px;height:60px}
  .mobile-menu{top:60px}
  /* Grids */
  .features-grid{grid-template-columns:1fr}
  .modules-grid{grid-template-columns:repeat(2,1fr)}
  .erp-grid{grid-template-columns:repeat(3,1fr)}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  /* Stats */
  .stats-bar .container{gap:20px}
  .stat-item+.stat-item::before{display:none}
  .stat-num{font-size:32px}
  /* Pricing / testimonials */
  .pricing-grid{grid-template-columns:1fr}
  .testimonials-grid{grid-template-columns:1fr}
  .download-cards{grid-template-columns:1fr}
  /* Footer */
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer{padding:56px 0 32px}
  /* Page hero */
  .page-hero{padding:110px 16px 56px}
  /* Architecture */
  .arch-diagram{padding:24px 16px}
  .arch-row{flex-wrap:wrap;gap:10px}
  .arch-node{flex:1 1 calc(50% - 6px);min-width:0}
  .arch-node-label{font-size:11px}
  .arch-node-sub{font-size:9px}
  /* Steps */
  .step-item{grid-template-columns:48px 1fr;gap:16px}
  .step-visual{font-size:12px;padding:14px;overflow-x:auto}
  /* Inline 2-col grids inside step bodies → 1 col on mobile */
  .step-body > div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .step-body > div > div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  /* Doc inline grids */
  .doc-content > div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  /* Section inline grids */
  section > .container > div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  section > .container > div > div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  /* ERP grid */
  .erp-section .container > div[style*="grid-template-columns"]{grid-template-columns:repeat(3,1fr)!important}
  /* App showcase card inner grids */
  .app-card-features{text-align:left}
  /* Hero */
  .hero-title{letter-spacing:-.5px}
  /* CTA */
  .cta-banner{padding:72px 16px}
  /* Pricing card */
  .pricing-card{padding:32px 24px}
}

/* ---- 600px : Small mobile ---- */
@media(max-width:600px){
  /* Force 1 col on any remaining inline 2-col grids */
  div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  div[style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important}
  div[style*="grid-template-columns:repeat(2,1fr)"]{grid-template-columns:1fr!important}
  div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important}
  /* Keep erp 2-col */
  .erp-grid{grid-template-columns:repeat(2,1fr)!important}
  /* Team grid → 1 col */
  div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  /* Module grid stays 2-col */
  .modules-grid{grid-template-columns:repeat(2,1fr)!important}
  /* Arch nodes 2-col */
  .arch-row{flex-wrap:wrap}
  .arch-node{flex:1 1 calc(50% - 6px)!important}
  /* Download card inner specs */
  .download-cards > .download-card > div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
}

/* ---- 480px : XS mobile ---- */
@media(max-width:480px){
  html{font-size:14px}
  .section{padding:44px 0}
  .container,.container-wide{padding:0 12px}
  /* Hero */
  .hero-content{padding:44px 12px 28px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-stats{flex-direction:column;align-items:center;gap:16px}
  /* Grids */
  .grid-4{grid-template-columns:1fr 1fr}
  .erp-grid{grid-template-columns:repeat(2,1fr)}
  .modules-grid{grid-template-columns:1fr 1fr}
  /* Steps */
  .step-item{grid-template-columns:36px 1fr;gap:12px}
  .step-number{width:36px;height:36px;font-size:14px}
  .step-item:not(:last-child)::after{left:17px}
  .step-visual{font-size:11px}
  /* CTA */
  .cta-banner{padding:56px 12px}
  .cta-banner-actions{flex-direction:column;align-items:stretch}
  .cta-banner-actions .btn{width:100%;justify-content:center}
  /* Cards */
  .pricing-card{padding:28px 16px}
  .app-card{padding:28px 20px}
  .feature-card{padding:24px 18px}
  .testimonial-card{padding:24px 18px}
  /* Team / screenshots grids */
  div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  div[style*="grid-template-columns:2fr 1fr 1fr"]{grid-template-columns:1fr!important}
  /* Navbar */
  .navbar-inner{height:60px}
  .hero{padding-top:60px}
  /* Page hero */
  .page-hero{padding:96px 12px 44px}
  /* Footer */
  .footer-grid{gap:20px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  /* Arch */
  .arch-diagram{padding:16px 10px}
  .arch-row{gap:8px}
  .arch-node{padding:10px 6px}
  .arch-node-icon{font-size:18px}
  /* Doc content */
  .doc-content pre,.step-visual{font-size:11px;padding:12px}
  /* Floating cards in hero → hide on very small */
  .floating-card{display:none}
  /* Buttons in download */
  .btn-download{padding:10px 14px;font-size:13px}
  /* Stats bar */
  .stat-num{font-size:28px}
  .stat-label{font-size:11px}
}

/* ---- 360px : Watch / fold ---- */
@media(max-width:360px){
  .modules-grid,.grid-4{grid-template-columns:1fr}
  .erp-grid{grid-template-columns:1fr 1fr}
  .arch-node{flex:1 1 100%}
  .pricing-card{padding:24px 14px}
  .hero-stat-num{font-size:22px}
  .navbar-logo{width:32px;height:32px;font-size:15px}
  .navbar-name{font-size:17px}
}

/* ---- Touch / hover improvements ---- */
@media(hover:none){
  .feature-card:hover,.module-card:hover,.app-card:hover,
  .erp-card:hover,.testimonial-card:hover,.download-card:hover{
    transform:none;box-shadow:none
  }
  .btn:hover{transform:none}
}

/* ---- Print ---- */
@media print{
  .navbar,.hamburger,.mobile-menu,.cta-banner,.footer-social,
  .floating-card,.fade-up,.hero-orb{display:none!important}
  body{background:white;color:black}
  .hero,.erp-section,.download-section{background:white!important}
  .section{padding:24px 0}
  *{box-shadow:none!important}
}