/* ============================================
   DigiBrand Booster — Final Stylesheet
   Clean design system: variables, layout, components
============================================ */

/* RESET */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  --primary:#0066CC;
  --primary-dark:#0052A3;
  --bg:#FFFFFF;
  --muted:#4A4A4A;
  --muted-2:#8A8A8A;
  --surface:#F8F9FC;
  --border:#E5E5E5;
  --shadow-sm:0 2px 8px rgba(0,0,0,0.05);
  --shadow-md:0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.12);
}

body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;color:var(--muted);background:var(--bg);font-size:16px;line-height:1.6}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
section{padding:100px 0}
.section-header{text-align:center;margin-bottom:60px}
.section-header h2{font-size:42px;color:#111;font-weight:800;margin-bottom:12px}
.section-header p{color:var(--muted);max-width:700px;margin:0 auto}

/* BUTTONS */
.btn{display:inline-block;padding:12px 22px;border-radius:8px;text-decoration:none;font-weight:700;transition:all .22s ease}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary)}

/* HEADER */
.header{background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:80}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0}
.logo{display:flex;align-items:center;gap:12px;color:#111;font-weight:800;font-size:18px;text-decoration:none}
.logo-icon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#E6F4FF,#F0F8FF);color:var(--primary);border-radius:8px;font-weight:900}
.nav{display:flex;gap:28px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;font-weight:600}
.nav a:hover{color:var(--primary)}
.mobile-menu-toggle{display:none;background:none;border:0;font-size:22px}

/* HERO */
.hero{background:linear-gradient(180deg,#FAFBFD,#FFF);padding:120px 0}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero-label{font-size:13px;color:var(--primary);font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.hero-title{font-size:48px;color:#111;line-height:1.05;margin-bottom:18px}
.hero-subtitle{font-size:18px;color:var(--muted);margin-bottom:22px}
.hero-ctas{display:flex;gap:12px}
.hero-visual{position:relative;min-height:320px}
.hero-graphic{position:relative;width:100%;height:100%}
.graphic-element{position:absolute;border-radius:12px;opacity:0.98}
.graphic-1{width:240px;height:240px;background:linear-gradient(135deg,#0066CC,#004AA3);top:10px;right:10px}
.graphic-2{width:180px;height:180px;background:linear-gradient(135deg,#E6F0FF,#CCE0FF);bottom:40px;right:70px}
.graphic-3{width:130px;height:130px;background:linear-gradient(135deg,#0052A3,#003D7A);bottom:20px;left:20px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.graphic-element{animation:float 6s ease-in-out infinite}

/* TRUST */
.trust-bar{padding:60px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg)}
.logo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;align-items:center}
.logo-placeholder{background:var(--surface);padding:18px;border-radius:8px;text-align:center;color:var(--muted)}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.service-card{padding:28px;background:#fff;border-radius:10px;border:1px solid var(--border);text-align:center;transition:all .22s}
.service-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-8px);border-color:var(--primary)}
.service-icon{font-size:36px;margin-bottom:14px}
.service-card h3{font-size:20px;margin-bottom:8px}
.service-card p{color:var(--muted)}

/* RESULTS */
.results{background:var(--surface)}
.results-inner{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.metric-item{background:#fff;padding:20px;border-radius:10px;text-align:center;box-shadow:var(--shadow-sm)}
.metric-number{font-size:36px;color:var(--primary);font-weight:800}

/* WHY */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.why-item{text-align:center;padding:20px}
.why-icon{font-size:36px;margin-bottom:12px}

/* TESTIMONIALS */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testimonial-card{background:#fff;padding:24px;border-radius:10px;box-shadow:var(--shadow-md)}
.testimonial-stars{color:#FFB800;margin-bottom:10px}
.testimonial-text{font-style:italic;color:var(--muted)}

/* PROCESS */
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.process-step{background:var(--surface);padding:20px;border-radius:10px}
.step-number{font-size:28px;font-weight:800;color:var(--primary);margin-bottom:8px}

/* CASES */
.cases-grid{display:grid;grid-template-columns:1fr;gap:20px}
.case-study{background:#fff;padding:20px;border-radius:10px;border:1px solid var(--border)}

/* FORM */
.growth-form{background:#fff;padding:20px;border-radius:12px;max-width:720px;margin:0 auto;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.growth-form input,.growth-form textarea{padding:12px;border:1px solid var(--border);border-radius:8px;width:100%;font-family:inherit}
.growth-form textarea{grid-column:1/-1}

/* FOOTER */
.footer{background:#0F1419;color:#fff;padding:40px 0}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:18px}
.footer-col h4{color:#fff;margin-bottom:8px}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:16px;text-align:center;color:rgba(255,255,255,0.7)}

/* ANIMATIONS */
.scroll-animate{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.scroll-animate.animate-in{opacity:1;transform:translateY(0)}

/* RESPONSIVE */
@media (max-width:1024px){.hero-inner,.results-inner{grid-template-columns:1fr}.services-grid,.why-grid,.testimonials-grid{grid-template-columns:repeat(2,1fr)}.process-steps{grid-template-columns:repeat(2,1fr)}.logo-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.container{padding:0 20px}.nav{display:none}.mobile-menu-toggle{display:block}.hero{padding:80px 0}.hero-title{font-size:36px}.services-grid,.why-grid,.testimonials-grid{grid-template-columns:1fr}.process-steps{grid-template-columns:1fr}}
@media (max-width:480px){.hero-title{font-size:28px}.section-header h2{font-size:24px}.form-row{grid-template-columns:1fr}}

/* Accessibility */
a:focus,button:focus,input:focus,textarea:focus{outline:3px solid rgba(0,102,204,0.12);outline-offset:2px}

/* Small utilities */
.text-center{text-align:center}