/* ===========================================================================
   DESIGN 2 - BOLD & COLORFUL
   Gradients, oversized type, pill buttons, playful blobs.
   Suits: startups, fitness, food, youth-facing brands.
   =========================================================================== */

.design-2 { --grad: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 55%, var(--c-accent) 100%); }

.design-2 h1, .design-2 h2, .design-2 h3 { font-weight: 800; letter-spacing: -0.02em; }
.design-2 .eyebrow {
  background: var(--grad); color: #fff;
  padding: 5px 14px; border-radius: 999px; letter-spacing: .1em;
}

.design-2 .btn { border-radius: 999px; font-weight: 700; }
.design-2 .btn-primary { background: var(--grad); border: none; }
.design-2 .btn-primary:hover { filter: brightness(1.05); box-shadow: 0 10px 28px color-mix(in srgb, var(--c-primary) 40%, transparent); }
.design-2 .btn-ghost { border-width: 3px; border-color: var(--c-primary); color: var(--c-primary); }

.design-2 .site-header { border-bottom: none; box-shadow: 0 2px 20px rgba(124,58,237,.08); }
.design-2 .brand-mark { background: var(--grad); border-radius: 14px; }

/* Hero: gradient wash with soft blobs */
.design-2 .section-hero { background: var(--c-surface); }
.design-2 .section-hero::before,
.design-2 .section-hero::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .32; z-index: 0;
}
.design-2 .section-hero::before { width: 380px; height: 380px; background: var(--c-primary); top: -120px; right: -80px; }
.design-2 .section-hero::after  { width: 300px; height: 300px; background: var(--c-secondary); bottom: -120px; left: -60px; }
.design-2 .hero-title { font-size: clamp(2.4rem, 6.4vw, 4.4rem); }
.design-2 .hero-title::after {
  content: ''; display: block; width: 120px; height: 8px; border-radius: 999px;
  background: var(--grad); margin-top: var(--sp-4);
}

.design-2 .card { border-radius: 22px; border: none; box-shadow: 0 8px 30px rgba(30,27,75,.07); }
.design-2 .card:hover { transform: translateY(-8px) rotate(-.4deg); box-shadow: 0 18px 44px rgba(30,27,75,.13); }
.design-2 .card-icon { border-radius: 14px; background: var(--grad); }

.design-2 .feature { border-radius: 22px; background: var(--c-bg); box-shadow: 0 6px 24px rgba(30,27,75,.06); }
.design-2 .feature-icon { border-radius: 14px; background: var(--grad); }

.design-2 .section-stats { background: var(--grad); }
.design-2 .section-stats .section-title,
.design-2 .stat-value, .design-2 .stat-suffix { color: #fff; }
.design-2 .stat-label { color: rgba(255,255,255,.85); }

.design-2 .gallery-item img { border-radius: 18px; }

.design-2 .price-card { border-radius: 24px; border-width: 2px; }
.design-2 .price-card.is-featured { background: var(--grad); color: #fff; border: none; transform: scale(1.03); }
.design-2 .price-card.is-featured .price-features,
.design-2 .price-card.is-featured .price-period { color: rgba(255,255,255,.9); }
.design-2 .price-card.is-featured .btn-primary { background: #fff; color: var(--c-primary); }
.design-2 .price-badge { background: var(--c-accent); color: #1e1b4b; }

.design-2 .testimonial { border-radius: 22px; background: var(--c-bg); box-shadow: 0 8px 30px rgba(30,27,75,.07); }
.design-2 .slider-dots button.is-active { background: var(--grad); }

.design-2 .section-cta { background: var(--grad); }
.design-2 .section-cta .btn-primary { background: #fff; color: var(--c-primary); }

.design-2 .contact-form { border-radius: 24px; }
.design-2 .field input, .design-2 .field textarea { border-radius: 14px; border-width: 2px; }

.design-2 .site-footer { background: var(--c-primary); color: #fff; }
.design-2 .site-footer p, .design-2 .footer-links, .design-2 .footer-col h4 { color: rgba(255,255,255,.78); }
.design-2 .site-footer a:hover { color: #fff; }
.design-2 .footer-bottom, .design-2 .social-list a { border-color: rgba(255,255,255,.2); }

/* --- Structural personality: chunky, saturated, playful ------------------- */
.design-2 .section { padding-block: var(--sp-9); }
.design-2 .section-title { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -.02em; }
.design-2 .eyebrow {
  display: inline-block; background: var(--c-accent); color: #fff;
  padding: 5px 14px; border-radius: 999px; letter-spacing: .1em; font-weight: 800;
}

/* Alternating colour blocks give the page a strong rhythm */
.design-2 .section:nth-of-type(even) { background: var(--c-surface); }
.design-2 .section-hero {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 130%);
  color: #fff;
}
.design-2 .section-hero .hero-sub,
.design-2 .section-hero .hero-body { color: rgba(255,255,255,.9); }
.design-2 .section-hero .eyebrow { background: rgba(255,255,255,.2); }
.design-2 .hero-title { font-weight: 800; text-shadow: 0 2px 20px rgba(0,0,0,.18); }
.design-2 .hero-media img { border-radius: 24px; transform: rotate(-2deg); box-shadow: 0 24px 60px rgba(0,0,0,.24); }

.design-2 .card {
  border-radius: 20px; border: 2px solid var(--c-border);
  box-shadow: 0 6px 0 var(--c-border);
}
.design-2 .card:hover { transform: translate(-2px, -4px); box-shadow: 0 10px 0 var(--c-primary); border-color: var(--c-primary); }
.design-2 .card-icon { border-radius: 14px; background: var(--c-accent); color: #fff; }

.design-2 .feature { border-radius: 18px; background: var(--c-surface); border: 0; }
.design-2 .feature-icon { background: var(--c-primary); color: #fff; border-radius: 14px; }

.design-2 .price-card { border-radius: 22px; border-width: 2px; }
.design-2 .price-card.is-featured { transform: scale(1.04); border-color: var(--c-primary); }
.design-2 .price-badge { border-radius: 999px; background: var(--c-primary); }
.design-2 .stat-value { font-weight: 800; color: var(--c-primary); }
.design-2 .testimonial { border-radius: 22px; border: 2px solid var(--c-border); }
.design-2 .accordion-item { border-radius: 16px; background: var(--c-surface); border: 0; margin-bottom: 10px; }
.design-2 .btn { font-weight: 800; letter-spacing: .01em; }
.design-2 .btn-primary:hover { transform: translateY(-2px); }
.design-2 .cta-inner { background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); border-radius: 28px; color: #fff; }
.design-2 .site-footer { background: var(--c-text); color: #fff; }

/* Hero gradient must cover each slide, since slides are the layout unit now */
.design-2 .section-hero { background: none; }
.design-2 .hero-slide { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 130%); color: #fff; }
.design-2 .hero-slide .hero-sub,
.design-2 .hero-slide .hero-body { color: rgba(255,255,255,.9); }
.design-2 .hero-slide .eyebrow { background: rgba(255,255,255,.2); color: #fff; }
.design-2 .hero-arrow { background: rgba(255,255,255,.9); border-color: transparent; }
.design-2 .hero-dots button { background: #fff; }
.design-2 .hero-facts { background: var(--c-surface); }