/* Big Wella — shared styles (extracted from per-page inline CSS) */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
      --green:       #3A7D44;
      --green-light: #EAF4EB;
      --pink:        #E8837A;
      --pink-light:  #FDF0EF;
      --black:       #1A1A1A;
      --grey:        #555555;
      --rule:        #E0E0E0;
      --muted:       #6F6F6F;
      --off-white:   #F7F7F7;
      --white:       #FFFFFF;
      --font:        'Plus Jakarta Sans', sans-serif;
    }

html { scroll-behavior: smooth; }

body {
      font-family: var(--font);
      color: var(--black);
      background: var(--white);
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

.top-rule { height: 3px; background: var(--green); }

.bottom-rule { height: 3px; background: var(--green); }

/* NAV */
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 64px;
      border-bottom: 0.75pt solid var(--rule);
      position: sticky;
      top: 0;
      background: var(--white);
      z-index: 100;
    }

.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }

.nav-logo img { width: 40px; height: 40px; }

.nav-logo-text { font-size: 18px; font-weight: 800; color: var(--black); letter-spacing: -0.02em; }

.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }

.nav-links a { font-size: 14px; font-weight: 500; color: var(--grey); text-decoration: none; transition: color 0.15s; }

.nav-cta { font-size: 14px; font-weight: 600; color: var(--white) !important; background: var(--green); padding: 8px 20px; border-radius: 6px; transition: opacity 0.15s !important; }

.nav-cta:hover { opacity: 0.88 !important; }

/* SHARED */
    .section-inner { max-width: 960px; margin: 0 auto; }

.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); margin-bottom: 20px; }

/* FOOTER */
    footer { padding: 40px 64px; border-top: 0.75pt solid var(--rule); display: flex; align-items: center; justify-content: space-between; }

.footer-left { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.footer-left img { width: 40px; height: 40px; }

.footer-brand { font-size: 14px; font-weight: 700; color: var(--black); text-align: center; }

.footer-meta { font-size: 12px; color: var(--muted); margin-top: 2px; text-align: center; }

.footer-right { font-size: 12px; color: var(--muted); text-align: right; line-height: 1.8; }

.footer-right a { color: var(--muted); text-decoration: none; transition: color 0.15s; }

.footer-right a:hover { color: var(--green); }

/* REVEAL */
    .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }

.reveal.visible { opacity: 1; transform: none; }

@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* taste-skill: card depth */
    .cta-card, .product-card, .testimonial, .tool-card, .dev-card, .course-card {
        box-shadow: 0 2px 8px rgba(26,26,26,0.05);
    }

/* taste-skill: button active feedback */
    .btn:active, a.nav-cta:active, [class*="btn"]:active {
        transform: scale(0.98);
    }

/* taste-skill: focus rings (CRITICAL — inputs currently have outline: none) */
    input:focus, textarea:focus, select:focus {
        outline: 2px solid var(--green) !important;
        outline-offset: 2px;
    }

input:focus-visible, textarea:focus-visible, select:focus-visible {
        outline: 2px solid var(--green) !important;
        outline-offset: 2px;
    }

/* taste-skill: disabled states */
    button:disabled, input:disabled, select:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* taste-skill: prose line-length */
    .hero-sub, .problem p, .section-body {
        max-width: 70ch;
    }

/* taste-skill: tablet breakpoint */
    @media (max-width: 768px) {
        .hero { padding: 80px 24px 64px; }
        nav { padding: 16px 24px; }
        footer { padding: 32px 24px; }
    }

/* taste-skill: testimonial hover depth */
    .testimonial:hover {
        box-shadow: 0 4px 16px rgba(26,26,26,0.1);
        transition: box-shadow 0.15s ease;
    }

/* elevate: keyboard focus visibility */
    a:focus-visible, button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }

/* elevate: selection, balance, depth, motion */
    ::selection { background: var(--green-light); color: var(--black); }

h1, h2, h3 { text-wrap: balance; }

.product-screenshot { transition: transform 0.3s ease, box-shadow 0.3s ease; }

.product-feature:hover .product-screenshot { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); }

.dev-card { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }

.dev-card:hover { border-color: var(--green); box-shadow: 0 6px 20px rgba(26,26,26,0.08); transform: translateY(-2px); }

.course-card { transition: border-color 0.2s ease; }

.course-card:hover { border-color: var(--green); }

.product-tag::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 6px; vertical-align: 1px; animation: livePulse 2.4s ease-in-out infinite; }

@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
      html { scroll-behavior: auto; }
      .reveal, .hero h1, .hero-sub, .hero-rule { opacity: 1; transform: none; }
    }