/* ─── Street Cuisines — Global Stylesheet ────────────────────────────────────
   Mobile-first. No framework. All design tokens defined in :root.
   Sections: Tokens → Reset → Base → Layout → Header → Hero → Why →
             How It Works → Audiences → Form → Footer → Utilities → Responsive
   ─────────────────────────────────────────────────────────────────────────── */

/* ── 1. Design Tokens ────────────────────────────────────────────────────── */
:root {
    --color-crimson:    #C0272D;
    --color-crimson-dk: #9B1F24;
    --color-charcoal:   #1A1A1A;
    --color-gray:       #6B6B6B;
    --color-rule:       #D9D0C7;
    --color-bg:         #F7F5F2;
    --color-bg-alt:     #F0EBE3;
    --color-white:      #FFFFFF;

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Inter', system-ui, sans-serif;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.375rem;
    --text-2xl:  1.75rem;
    --text-3xl:  2.25rem;
    --text-4xl:  3rem;
    --text-5xl:  3.75rem;

    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 16px;

    --shadow-card: 0 2px 16px rgba(0,0,0,0.08);
    --shadow-btn:  0 4px 12px rgba(192,39,45,0.3);

    --transition: 200ms ease;
    --max-width:  1100px;
}

/* ── 2. Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── 3. Base ──────────────────────────────────────────────────────────────── */
body {
    font-family:      var(--font-body);
    font-size:        var(--text-base);
    line-height:      1.6;
    color:            var(--color-charcoal);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family:  var(--font-display);
    line-height:  1.15;
    font-weight:  700;
}

p { max-width: 64ch; }

/* ── 4. Layout Helpers ────────────────────────────────────────────────────── */
.container {
    width:   100%;
    max-width: var(--max-width);
    margin:  0 auto;
    padding: 0 var(--space-6);
}

.section {
    padding: var(--space-16) 0;
}

.section--alt {
    background-color: var(--color-bg-alt);
}

/* ── 5. Site Header ───────────────────────────────────────────────────────── */
.site-header {
    position:   sticky;
    top:        0;
    z-index:    100;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-rule);
    padding:    var(--space-3) 0;
}

.site-header__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}

.site-header__logo {
    height: 48px;
    width:  auto;
}

.site-header__cta {
    font-size:   var(--text-sm);
    font-weight: 600;
    color:       var(--color-crimson);
    border:      1.5px solid var(--color-crimson);
    padding:     var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    transition:  background var(--transition), color var(--transition);
}

.site-header__cta:hover {
    background: var(--color-crimson);
    color:      var(--color-white);
}

/* ── 6. Hero ──────────────────────────────────────────────────────────────── */
.hero {
    background-color: var(--color-charcoal);
    color:            var(--color-white);
    padding:          var(--space-24) 0 var(--space-16);
    overflow:         hidden;
    position:         relative;
}

.hero::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     4px;
    background: var(--color-crimson);
}

.hero__inner {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-8);
}

.hero__headline {
    font-family: var(--font-display);
    font-size:   var(--text-4xl);
    font-weight: 700;
    line-height: 1.08;
}

.hero__headline span {
    color: var(--color-crimson);
    display: block;
}

.hero__body {
    font-size:   var(--text-lg);
    color:       #C8C2BA;
    max-width:   52ch;
    line-height: 1.65;
}

.hero__actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-4);
    align-items: center;
}

.hero__eyebrow {
    font-family:    var(--font-body);
    font-size:      var(--text-xs);
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--color-crimson);
    margin-bottom:  var(--space-4);
}

/* ── 7. Why Section ───────────────────────────────────────────────────────── */
.why__inner {
    display:   grid;
    gap:       var(--space-8);
    max-width: 740px;
}

.why__heading {
    font-size: var(--text-3xl);
}

.why__body {
    font-size:   var(--text-lg);
    color:       var(--color-gray);
    line-height: 1.7;
}

.why__rule {
    width:      48px;
    height:     3px;
    background: var(--color-crimson);
    border:     none;
    margin:     0;
}

/* ── 8. How It Works ──────────────────────────────────────────────────────── */
.how__heading {
    font-size:     var(--text-3xl);
    margin-bottom: var(--space-12);
}

.how__steps {
    display: grid;
    gap:     var(--space-6);
}

.step-card {
    background:    var(--color-white);
    border:        1px solid var(--color-rule);
    border-radius: var(--radius);
    padding:       var(--space-6);
    display:       flex;
    gap:           var(--space-4);
    align-items:   flex-start;
    box-shadow:    var(--shadow-card);
    transition:    transform var(--transition), box-shadow var(--transition);
}

.step-card:hover {
    transform:  translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.11);
}

.step-card__icon {
    font-size:   1.75rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top:  var(--space-1);
}

.step-card__title {
    font-family:   var(--font-display);
    font-size:     var(--text-lg);
    font-weight:   700;
    margin-bottom: var(--space-2);
}

.step-card__desc {
    font-size: var(--text-sm);
    color:     var(--color-gray);
    max-width: unset;
}

/* ── 9. Audience Split ────────────────────────────────────────────────────── */
.audiences {
    display: grid;
    gap:     var(--space-6);
}

.audience-card {
    background:    var(--color-white);
    border-radius: var(--radius-lg);
    padding:       var(--space-8);
    border-left:   4px solid var(--color-crimson);
    box-shadow:    var(--shadow-card);
}

.audience-card__label {
    font-size:      var(--text-xs);
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--color-crimson);
    margin-bottom:  var(--space-3);
}

.audience-card__heading {
    font-size:     var(--text-2xl);
    margin-bottom: var(--space-3);
}

.audience-card__body {
    color:     var(--color-gray);
    font-size: var(--text-base);
    max-width: unset;
}

/* ── 10. Interest Form ────────────────────────────────────────────────────── */
.form-section__inner {
    max-width: 580px;
}

.form-section__heading {
    font-size:     var(--text-3xl);
    margin-bottom: var(--space-3);
}

.form-section__sub {
    color:         var(--color-gray);
    margin-bottom: var(--space-8);
    font-size:     var(--text-base);
    max-width: unset;
}

.interest-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.form-row {
    display: grid;
    gap:     var(--space-4);
}

.field {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

.field__label {
    font-size:   var(--text-sm);
    font-weight: 600;
    color:       var(--color-charcoal);
}

.field__label span {
    color: var(--color-crimson);
    margin-left: var(--space-1);
}

.field__input,
.field__select {
    border:        1.5px solid var(--color-rule);
    border-radius: var(--radius-sm);
    padding:       var(--space-3) var(--space-4);
    font-size:     var(--text-base);
    background:    var(--color-white);
    color:         var(--color-charcoal);
    width:         100%;
    transition:    border-color var(--transition), box-shadow var(--transition);
    appearance:    none;
}

.field__input:focus,
.field__select:focus {
    outline:      none;
    border-color: var(--color-crimson);
    box-shadow:   0 0 0 3px rgba(192,39,45,0.12);
}

.field__input.has-error,
.field__select.has-error {
    border-color: var(--color-crimson);
}

.field__error {
    font-size: var(--text-xs);
    color:     var(--color-crimson);
    display:   none;
}

.field__error.visible {
    display: block;
}

.form__feedback {
    padding:       var(--space-4);
    border-radius: var(--radius-sm);
    font-size:     var(--text-sm);
    font-weight:   500;
    display:       none;
}

.form__feedback.success {
    background: #EDF7ED;
    color:      #1E6B1E;
    border:     1px solid #A8D5A8;
    display:    block;
}

.form__feedback.error {
    background: #FDF0F0;
    color:      #9B1F24;
    border:     1px solid #F0C0C2;
    display:    block;
}

/* ── 11. Buttons ──────────────────────────────────────────────────────────── */
.btn {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    gap:           var(--space-2);
    font-weight:   600;
    font-size:     var(--text-base);
    border-radius: var(--radius-sm);
    padding:       var(--space-4) var(--space-8);
    border:        none;
    cursor:        pointer;
    transition:    background var(--transition), transform var(--transition), box-shadow var(--transition);
    line-height:   1;
    white-space:   nowrap;
}

.btn--primary {
    background:  var(--color-crimson);
    color:       var(--color-white);
    box-shadow:  var(--shadow-btn);
}

.btn--primary:hover:not(:disabled) {
    background:  var(--color-crimson-dk);
    transform:   translateY(-1px);
    box-shadow:  0 6px 16px rgba(192,39,45,0.38);
}

.btn--primary:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}

.btn--outline-light {
    background:  transparent;
    color:       var(--color-white);
    border:      1.5px solid rgba(255,255,255,0.4);
}

.btn--outline-light:hover {
    background:  rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.7);
}

.btn--full {
    width: 100%;
}

/* ── 12. Footer ───────────────────────────────────────────────────────────── */
.site-footer {
    background:    var(--color-charcoal);
    color:         #8A8480;
    padding:       var(--space-12) 0;
    text-align:    center;
}

.site-footer__logo {
    height:        40px;
    width:         auto;
    margin:        0 auto var(--space-4);
    opacity:       0.6;
    filter:        brightness(0) invert(1);
}

.site-footer__tagline {
    font-size:      var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom:  var(--space-4);
    color:          #6A6460;
}

.site-footer__copy {
    font-size: var(--text-xs);
}

/* ── 13. Scroll Reveal ────────────────────────────────────────────────────── */
.reveal {
    opacity:    0;
    transform:  translateY(20px);
    transition: opacity 500ms ease, transform 500ms ease;
}

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

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── 14. Responsive ───────────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .form-row { grid-template-columns: 1fr 1fr; }
    .how__steps { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
    .hero__headline  { font-size: var(--text-5xl); }
    .audiences       { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
    .how__steps { grid-template-columns: repeat(4, 1fr); }
}