/* ============================================================================
   Travelieons public website — the whole stylesheet.
   Ported from files/design/Travelieons Website.dc.html (the .dc design file).

   Rules this file lives by:
     · no build step, no CDN, no framework — this is the only stylesheet the
       marketing site loads besides self-hosted Bootstrap Icons;
     · every class the section partials use is prefixed `tw-` (travel website),
       so nothing here can collide with the app shell or the admin console;
     · the design leans hard on motion, so every animation is switched off
       under prefers-reduced-motion at the bottom of this file.
   ========================================================================== */

:root {
    /* Brand — terracotta on cream. Violet is the AI accent only. */
    --tw-orange: #F26B32;
    --tw-orange-2: #FF9A5A;
    --tw-coral: #FF7A59;
    --tw-amber: #F59E0B;
    --tw-pink: #E11D74;
    --tw-deep: #C4551F;
    --tw-rust: #D9762F;

    /* Canvas + hairlines */
    --tw-cream: #FDF9F4;
    --tw-cream-2: #FFFCF8;
    --tw-sand: #FFF5EE;
    --tw-sand-2: #FFEFE4;
    --tw-line: #F1E6D9;
    --tw-line-2: #F7E2D0;
    --tw-line-3: #E7EBF0;

    /* Ink */
    --tw-ink: #1F2937;
    --tw-body: #374151;
    --tw-label: #4B5563;
    --tw-muted: #5A6270;
    --tw-faint: #9AA3B2;

    /* Semantic */
    --tw-green: #16A34A;
    --tw-green-2: #4ADE80;
    --tw-blue: #0284C7;
    --tw-blue-2: #4FC3F7;

    /* AI surfaces only */
    --tw-ai: #5B4BE8;
    --tw-ai-2: #8B5CF6;
    --tw-ai-soft: #EEEBFF;
    --tw-ai-line: #E4DFFB;
    --tw-ai-text: #8B7CFF;

    /* Footer / dark blocks */
    --tw-dark: #33190A;
    --tw-dark-2: #1E1006;
    --tw-dark-text: #E0D2C3;
    --tw-dark-muted: #CBB9A7;
    --tw-dark-faint: #A2917E;
    --tw-gold: #F0A45C;

    /* Gradients */
    --tw-grad: linear-gradient(135deg, #FF7A59, #F59E0B);
    --tw-grad-brand: linear-gradient(135deg, #F26B32, #FF9A5A);
    --tw-grad-hot: linear-gradient(120deg, #F26B32, #E11D74 55%, #FF7A59);
    --tw-grad-bar: linear-gradient(90deg, #F26B32, #E11D74);
    --tw-grad-sky: linear-gradient(90deg, #F26B32, #FF9A5A, #E11D74, #FF7A59);
    --tw-grad-ai: linear-gradient(135deg, #5B4BE8, #8B5CF6);

    /* Shadows */
    --tw-sh-sm: 0 4px 14px rgba(242, 107, 50, .08);
    --tw-sh: 0 12px 28px rgba(242, 107, 50, .18);
    --tw-sh-cta: 0 12px 28px rgba(255, 122, 89, .34);
    --tw-sh-cta-hi: 0 20px 38px rgba(255, 122, 89, .46);
    --tw-sh-card: 0 26px 54px rgba(120, 62, 26, .14);
    --tw-sh-shot: 0 30px 70px rgba(120, 62, 26, .16);

    --tw-wrap: 1200px;
    --tw-font: 'Poppins', 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html, body { overflow-x: hidden; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--tw-cream);
    font-family: var(--tw-font);
    color: var(--tw-ink);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--tw-orange); text-decoration: none; }
a:hover { color: var(--tw-deep); }

img, svg, video { max-width: 100%; }
img { border-style: none; }

input, textarea, select, button { font-family: inherit; font-size: inherit; }
button { border: 0; background: none; cursor: pointer; color: inherit; }

h1, h2, h3, h4, h5, h6 { font-family: var(--tw-font); margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: #FBD9C1; }

:focus-visible {
    outline: 3px solid rgba(242, 107, 50, .45);
    outline-offset: 2px;
    border-radius: 6px;
}

.tw-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.tw-skip {
    position: absolute; left: -9999px; top: 8px; z-index: 200;
    background: #fff; color: var(--tw-orange); padding: 10px 16px;
    border-radius: 10px; font-weight: 700; box-shadow: var(--tw-sh);
}
.tw-skip:focus { left: 12px; }

/* ── Keyframes — every one from the design, ported verbatim ───────────────── */

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes floaty2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes dash { to { stroke-dashoffset: -1000; } }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); } 70% { box-shadow: 0 0 0 12px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }
@keyframes skyShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes growW { from { width: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes pulseRing { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes stampIn { 0% { transform: rotate(-14deg) scale(1); } 50% { transform: rotate(-10deg) scale(1.04); } 100% { transform: rotate(-14deg) scale(1); } }
@keyframes trail { to { stroke-dashoffset: -600; } }
@keyframes aiShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes tick { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* Namespaced duplicates of the four the section partials animate against, so a
   page built only from sections never depends on the unprefixed set above. */
@keyframes tw-fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes tw-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes tw-floaty-2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes tw-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tw-sky-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* ── Motion utilities ─────────────────────────────────────────────────────── */

/* CSS-only entrance — this is the one the section partials use. It runs on
   load, never waits for JavaScript, and siblings stagger with an inline
   `animation-delay`. Nothing here can strand content at opacity 0. */
.tw-reveal { animation: tw-fadeUp .55s cubic-bezier(.2, .7, .3, 1) both; }

/* Scroll-triggered variant for anything that should fire on entering the
   viewport instead of on load. The hidden resting state applies only once JS
   has stamped `tw-js` on <html>, so with JS off the page is still readable. */
.tw-js [data-reveal],
.tw-js .tw-fade-up { opacity: 0; }

[data-reveal].is-in,
.tw-fade-up.is-in { animation: fadeUp .62s cubic-bezier(.22, .68, .35, 1) both; }

.tw-float { animation: tw-floaty 5.4s ease-in-out infinite; }
.tw-float-slow { animation: tw-floaty-2 8.5s ease-in-out infinite; }
.tw-float-2 { animation: floaty2 7.5s ease-in-out infinite; }

/* Pans a gradient the element already declares for itself. */
.tw-gradient-pan { background-size: 300% 100%; animation: tw-sky-shift 14s ease infinite; }
.tw-spin-slow { animation: spinSlow 22s linear infinite; }
.tw-blink { animation: blink 1.4s ease-in-out infinite; }
.tw-pop { animation: popIn .38s cubic-bezier(.2, .9, .3, 1.2) both; }
.tw-nudge { animation: tick 2.4s ease-in-out infinite; }
.tw-stamp { animation: stampIn 4s ease-in-out infinite; transform: rotate(-14deg); }
.tw-grow { animation: growW 1.4s cubic-bezier(.22, .68, .35, 1) both; }
.tw-dash { animation: dash 26s linear infinite; }
.tw-dash-slow { animation: dash 34s linear infinite; }
.tw-trail { animation: trail 18s linear infinite; }

/* Slow gradient wash — announcement bar, modal headers, hero ribbons. */
.tw-sky {
    background: var(--tw-grad-sky);
    background-size: 300% 100%;
    animation: skyShift 14s ease infinite;
}

/* AI surfaces only — the one place violet is allowed. */
.tw-shimmer {
    background: linear-gradient(90deg, #5B4BE8, #8B5CF6, #C9BEFF, #8B5CF6, #5B4BE8);
    background-size: 300% 100%;
    animation: aiShimmer 9s ease infinite;
}

.tw-typing {
    display: inline-block; overflow: hidden; white-space: nowrap;
    animation: typing 2.6s steps(32, end) both;
}

/* Live dot — the green "connected" pip. */
.tw-pulse-dot {
    width: 9px; height: 9px; border-radius: 50%; background: var(--tw-green);
    display: inline-block; flex-shrink: 0; animation: pulseDot 2.4s ease-out infinite;
}

/* Expanding ring behind an icon (map pins, notifications). */
.tw-ring { position: relative; }
.tw-ring::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    border: 2px solid currentColor; animation: pulseRing 2.6s ease-out infinite;
    pointer-events: none;
}

/* Infinite marquee. The partial prints its run of items twice inside the rail;
   the drift is exactly -50%, so the seam is invisible. Edges fade out so items
   do not appear to hit a wall. */
.tw-marquee {
    overflow: hidden; width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.tw-marquee-rail,
.tw-marquee-track {
    display: flex; align-items: center; gap: 44px;
    white-space: nowrap; width: max-content;
    will-change: transform;
    animation: tw-drift 32s linear infinite;
}
.tw-marquee-slow .tw-marquee-rail, .tw-marquee-slow .tw-marquee-track { animation-duration: 52s; }
.tw-marquee-fast .tw-marquee-rail, .tw-marquee-fast .tw-marquee-track { animation-duration: 20s; }
.tw-marquee:hover .tw-marquee-rail,
.tw-marquee:hover .tw-marquee-track { animation-play-state: paused; }

/* ── Hover lifts ──────────────────────────────────────────────────────────────
   One per surface, because a card on cream, a card already on white and an AI
   card each need a different resting-to-hover move. */

.tw-lift { transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease; }
.tw-lift:hover {
    transform: translateY(-6px); background: #fff;
    border-color: #FBD9C1; box-shadow: 0 22px 46px rgba(120, 62, 26, .13);
}

.tw-lift-sm { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.tw-lift-sm:hover { transform: translateY(-5px); background: #fff; box-shadow: 0 16px 34px rgba(120, 62, 26, .1); }

/* Already sitting on white — move only, no colour change. */
.tw-lift-flat { transition: transform .25s ease, box-shadow .25s ease; }
.tw-lift-flat:hover { transform: translateY(-5px); }

/* AI / violet surfaces only. */
.tw-lift-ai { transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.tw-lift-ai:hover { transform: translateY(-6px); border-color: #F0DCEC; box-shadow: 0 22px 46px rgba(177, 75, 224, .14); }

.tw-lift-lg { transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease, background .26s ease; }
.tw-lift-lg:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(120, 62, 26, .18); }

/* A list row slides sideways rather than lifting. */
.tw-row { transition: transform .2s ease, box-shadow .2s ease; }
.tw-row:hover { transform: translateX(4px); box-shadow: 0 12px 26px rgba(120, 62, 26, .1); }

/* Pricing card. */
.tw-plan { transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.tw-plan:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(120, 62, 26, .16); border-color: #FBD9C1; }

/* Client / partner logo tile. */
.tw-logo-tile { transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.tw-logo-tile:hover {
    transform: translateY(-5px); background: #fff;
    box-shadow: 0 16px 34px rgba(120, 62, 26, .1); border-color: #FBD9C1;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */

.tw-wrap { max-width: var(--tw-wrap); margin: 0 auto; padding: 0 24px; width: 100%; }
.tw-wrap-sm { max-width: 860px; margin: 0 auto; padding: 0 24px; width: 100%; }
.tw-wrap-xs { max-width: 700px; margin: 0 auto; padding: 0 24px; width: 100%; }

.tw-section { padding: 88px 24px; position: relative; }
.tw-section-tight { padding: 56px 24px; position: relative; }
.tw-section-slim { padding: 26px 0; position: relative; }

.tw-section-cream { background: var(--tw-cream); }
.tw-section-white { background: #fff; }
.tw-section-sand { background: var(--tw-sand); }
.tw-section-soft {
    background:
        radial-gradient(1100px 520px at 78% -8%, #FFEADB 0%, rgba(255, 255, 255, 0) 62%),
        linear-gradient(180deg, #FDF9F4, #FFFFFF);
    overflow: hidden;
}
.tw-section-dark { background: linear-gradient(168deg, var(--tw-dark), var(--tw-dark-2)); color: #fff; }
.tw-section-ai { background: linear-gradient(180deg, #FBFAFF, #F4F1FF); }
.tw-rule-y { border-top: 1px solid #F0EDFA; border-bottom: 1px solid #F0EDFA; }
.tw-clip { overflow: hidden; }

/* The centred eyebrow + headline + lead that opens most sections. */
.tw-section-head { text-align: center; max-width: 700px; margin: 0 auto 46px; }
.tw-section-head .tw-lead { margin-left: auto; margin-right: auto; }

/* Decorative full-bleed SVG behind a section. */
.tw-bg-art {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: .5; pointer-events: none; z-index: 0;
}
.tw-above { position: relative; z-index: 1; }

/* Grids */
.tw-grid { display: grid; gap: 24px; }
.tw-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tw-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tw-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tw-g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tw-gap-sm { gap: 12px; }
.tw-gap-lg { gap: 32px; }
.tw-stretch { align-items: stretch; }

/* Two-up hero / feature split. */
.tw-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.tw-split-even { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.tw-split-rev > :first-child { order: 2; }
.tw-split-rev > :last-child { order: 1; }

/* Flex helpers. (Not `.tw-row` — that name belongs to the list-row hover.) */
.tw-flex { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.tw-flex-top { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.tw-between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.tw-stack { display: flex; flex-direction: column; gap: 10px; }
.tw-stack-lg { display: flex; flex-direction: column; gap: 18px; }
.tw-spacer { flex: 1; }
.tw-center { text-align: center; }
.tw-nowrap { white-space: nowrap; }

.tw-mt-sm { margin-top: 12px; }
.tw-mt { margin-top: 20px; }
.tw-mt-lg { margin-top: 32px; }
.tw-mb-sm { margin-bottom: 12px; }
.tw-mb { margin-bottom: 20px; }
.tw-mb-lg { margin-bottom: 32px; }

/* ── Type ─────────────────────────────────────────────────────────────────── */

.tw-eyebrow {
    font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
    color: var(--tw-rust); text-transform: uppercase;
}
.tw-eyebrow-ai { color: var(--tw-ai-text); }
.tw-eyebrow-light { color: var(--tw-gold); }
.tw-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--tw-gold); }

.tw-h1 {
    font-weight: 800; letter-spacing: -.018em; line-height: 1.03;
    font-size: clamp(32px, 6.4vw, 60px); margin: 0;
}
.tw-h2 {
    font-weight: 800; letter-spacing: -.01em; line-height: 1.1;
    font-size: clamp(26px, 4.4vw, 41px); margin: 0;
}
.tw-h3 {
    font-weight: 800; letter-spacing: -.012em; line-height: 1.18;
    font-size: clamp(20px, 2.6vw, 27px); margin: 0;
}
.tw-h4 { font-weight: 800; letter-spacing: -.012em; font-size: clamp(17px, 2vw, 21px); margin: 0; }
.tw-h5 { font-weight: 700; letter-spacing: -.01em; font-size: 15.5px; margin: 0; }

.tw-lead {
    font-size: clamp(15.5px, 1.6vw, 18.5px); line-height: 1.62;
    color: var(--tw-muted); max-width: 640px; text-wrap: pretty;
}
.tw-p { font-size: 15.5px; line-height: 1.62; color: var(--tw-muted); text-wrap: pretty; }
.tw-small { font-size: 13.5px; line-height: 1.55; color: var(--tw-muted); }
.tw-tiny { font-size: 12.4px; line-height: 1.5; color: var(--tw-faint); }
.tw-muted { color: var(--tw-muted); }
.tw-faint { color: var(--tw-faint); }
.tw-ink { color: var(--tw-ink); }
.tw-strong { font-weight: 700; color: var(--tw-ink); }

/* Headline word painted in the brand gradient.

   The flat colour is the base rule and the gradient only applies where
   background-clip:text is supported — declaring `color:transparent` up front
   with a fallback above it does not help, because the transparent one still
   wins in a browser that ignored the clip. */
.tw-accent, .tw-grad-text { color: var(--tw-orange); }
.tw-grad-text-ai { color: var(--tw-ai); }

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .tw-accent,
    .tw-grad-text {
        background: var(--tw-grad-hot);
        -webkit-background-clip: text; background-clip: text;
        color: transparent;
    }
    .tw-grad-text-ai {
        background: var(--tw-grad-ai);
        -webkit-background-clip: text; background-clip: text;
        color: transparent;
    }
}

.tw-balance { text-wrap: balance; }
.tw-pretty { text-wrap: pretty; }

/* Gradient underline that grows on hover — nav items and inline links. */
.tw-underline {
    background-image: var(--tw-grad-bar);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2.5px;
    transition: background-size .24s ease, color .18s ease;
    padding-bottom: 2px;
}
.tw-underline:hover,
.tw-underline.is-active { background-size: 100% 2.5px; }

.tw-link { color: var(--tw-orange); text-decoration: none; }
.tw-link:hover { color: var(--tw-deep); text-decoration: underline; text-underline-offset: 3px; }

/* A link sitting on the orange band — inherit the band's white. */
.tw-link-onbrand { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.tw-link-onbrand:hover { color: inherit; opacity: .82; }

.tw-link-light { color: var(--tw-dark-text); transition: color .16s ease; }
.tw-link-light:hover { color: #fff; }

/* Admin rich text lands here, so the tags it may contain all need a look. */
.tw-prose { color: var(--tw-muted); line-height: 1.68; }
.tw-prose > :last-child { margin-bottom: 0; }
.tw-prose p { margin: 0 0 14px; }
.tw-prose ul, .tw-prose ol { margin: 0 0 14px; padding-left: 20px; }
.tw-prose ul { list-style: disc; }
.tw-prose ol { list-style: decimal; }
.tw-prose li { margin-bottom: 6px; }
.tw-prose strong, .tw-prose b { color: var(--tw-ink); font-weight: 700; }
.tw-prose a { color: var(--tw-orange); }
.tw-prose a:hover { color: var(--tw-deep); text-decoration: underline; text-underline-offset: 3px; }
.tw-prose h2, .tw-prose h3, .tw-prose h4 { color: var(--tw-ink); margin: 24px 0 10px; letter-spacing: -.012em; }
.tw-prose blockquote {
    margin: 0 0 14px; padding: 12px 18px;
    border-left: 3px solid #FBD9C1; background: var(--tw-cream-2); border-radius: 0 12px 12px 0;
}
.tw-prose code {
    background: var(--tw-sand); border-radius: 6px; padding: 1px 6px;
    font-size: .92em; color: var(--tw-deep);
}
.tw-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.tw-link-arrow i { transition: transform .18s ease; }
.tw-link-arrow:hover i { transform: translateX(3px); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.tw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 24px; border-radius: 12px;
    font-size: 15px; font-weight: 700; line-height: 1.2;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    background: #fff; color: var(--tw-ink);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}

/* Primary — the gradient CTA. */
.tw-btn-pri, .tw-btn-primary { background: var(--tw-grad); color: #fff; box-shadow: 0 12px 28px rgba(255, 122, 89, .34); }
.tw-btn-pri:hover, .tw-btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 36px rgba(255, 122, 89, .46); }

/* Secondary on a light band. */
.tw-btn-sec { background: #fff; border: 1.5px solid #FBD9C1; color: var(--tw-orange); }
.tw-btn-sec:hover { background: var(--tw-sand); border-color: var(--tw-orange); color: var(--tw-orange); transform: translateY(-2px); }

.tw-btn-dark { background: #241207; color: #fff; }
.tw-btn-dark:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(36, 18, 7, .3); }

/* On an orange band: solid white, brand-coloured text. */
.tw-btn-onbrand { background: #fff; color: #D9531F; }
.tw-btn-onbrand:hover { color: #D9531F; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .18); }

/* On an orange or dark band: outline only. */
.tw-btn-ghost, .tw-btn-outline-light {
    background: transparent; border: 1.5px solid rgba(255, 255, 255, .6); color: #fff;
}
.tw-btn-ghost:hover, .tw-btn-outline-light:hover {
    background: rgba(255, 255, 255, .18); border-color: #fff; color: #fff; transform: translateY(-2px);
}

.tw-btn-ai { background: var(--tw-grad-ai); color: #fff; box-shadow: 0 12px 28px rgba(91, 75, 232, .3); }
.tw-btn-ai:hover { color: #fff; transform: translateY(-2px); }

/* Neutral — "Sign in" and other non-marketing actions. */
.tw-btn-quiet { background: #fff; border: 1.5px solid var(--tw-line); color: var(--tw-muted); }
.tw-btn-quiet:hover { background: var(--tw-cream); border-color: var(--tw-faint); color: var(--tw-ink); transform: translateY(-2px); }

.tw-btn-lg { padding: 15px 26px; font-size: 16px; border-radius: 13px; }
.tw-btn-sm { padding: 9px 15px; font-size: 13.5px; border-radius: 10px; }
.tw-btn-block { display: flex; width: 100%; }
.tw-btn-row { display: flex; flex-wrap: wrap; gap: 13px; }
.tw-btn[disabled], .tw-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ── Cards & surfaces ─────────────────────────────────────────────────────── */

.tw-card {
    background: #fff;
    border: 1px solid var(--tw-line);
    border-radius: 22px;
    padding: 26px;
    position: relative;
    overflow: hidden;
}
.tw-card-lg { padding: 32px; }
.tw-card-sm { padding: 18px; border-radius: 18px; }
.tw-card-flat { box-shadow: none; }
.tw-card-shadow { box-shadow: 0 10px 30px rgba(120, 62, 26, .08); }
.tw-card-ai { border-color: var(--tw-ai-line); background: #fff; }
.tw-card-cream { background: var(--tw-cream-2); }
.tw-card-dark {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px; padding: 18px; color: #fff;
    position: relative; overflow: hidden;
}
.tw-card-dark:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); }

.tw-card-glass {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px; padding: 26px 30px; color: #fff;
}

/* Soft radial blob in a card corner — pure decoration. */
.tw-glow::before,
.tw-glow-ai::before,
.tw-glow-dark::before {
    content: ''; position: absolute; right: -40px; top: -40px;
    width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, #FFEADB, rgba(255, 255, 255, 0));
    pointer-events: none;
}
.tw-glow-ai::before { background: radial-gradient(circle, var(--tw-ai-soft), rgba(255, 255, 255, 0)); }
.tw-glow-dark::before {
    width: 104px; height: 104px; right: -30px; top: -30px;
    background: radial-gradient(circle, rgba(242, 107, 50, .33), rgba(0, 0, 0, 0));
}

.tw-panel { background: var(--tw-sand); border-radius: 16px; padding: 18px 20px; }
.tw-dashed { border: 1px dashed #F0CFB2; border-radius: 16px; background: #FFF6EE; padding: 16px 18px; }
.tw-divider { height: 1px; background: var(--tw-line); border: 0; margin: 26px 0; }
.tw-divider-light { height: 1px; background: rgba(255, 255, 255, .1); border: 0; margin: 26px 0; }

/* ── Pills, chips, badges, icon tiles ─────────────────────────────────────── */

.tw-pill {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 14px; border-radius: 999px;
    background: #fff; border: 1px solid var(--tw-line-2);
    box-shadow: var(--tw-sh-sm);
    font-size: 13px; font-weight: 600; color: #4B4266;
    max-width: 100%;
}
.tw-pill-grad {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px;
    background: var(--tw-grad-hot); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .05em;
}
.tw-pill-soft {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px; border-radius: 999px;
    background: var(--tw-sand); color: var(--tw-orange);
    font-size: 12.5px; font-weight: 700;
}
.tw-pill-ai { background: var(--tw-ai-soft); color: var(--tw-ai); }
.tw-pill-green { background: #E9F9EF; color: #15803D; }
.tw-pill-dark {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px; padding: 9px 14px;
    font-size: 13px; color: var(--tw-dark-text); font-weight: 600;
}

/* Radio pill. The real <input> stays in the accessibility tree and keeps focus
   — it is hidden by size and opacity, never by display:none — and the visible
   half is a sibling <span> styled from the input's :checked / :focus-visible. */
.tw-chip-input {
    position: absolute; opacity: 0; width: 1px; height: 1px;
    margin: 0; padding: 0; border: 0;
}
.tw-chip {
    display: inline-block;
    padding: 10px 18px; border-radius: 999px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    border: 1.5px solid #EFE3D6; background: #fff; color: #8A7965;
    transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.tw-chip:hover { border-color: #FBD9C1; }
.tw-chip-input:checked + .tw-chip,
.tw-chip.is-active { border-color: var(--tw-orange); background: #FFF1E7; color: #D9531F; }
.tw-chip-input:focus-visible + .tw-chip { box-shadow: 0 0 0 4px var(--tw-sand-2); }
.tw-chip-sq { border-radius: 10px; padding: 9px 16px; font-size: 13.5px; }

.tw-badge-live {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 700; color: #15803D;
}

/* Gradient icon tile — the design's signature square. */
.tw-icon {
    width: 52px; height: 52px; border-radius: 16px;
    background: var(--tw-grad-brand);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px; flex-shrink: 0;
    box-shadow: 0 12px 26px rgba(242, 107, 50, .3);
}
.tw-icon-sm { width: 38px; height: 38px; border-radius: 12px; font-size: 17px; box-shadow: 0 8px 18px rgba(242, 107, 50, .28); }
.tw-icon-xs { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; box-shadow: none; }
.tw-icon-lg { width: 62px; height: 62px; border-radius: 20px; font-size: 26px; }
.tw-icon-ai { background: var(--tw-grad-ai); box-shadow: 0 12px 26px rgba(91, 75, 232, .32); }
.tw-icon-green { background: linear-gradient(135deg, #16A34A, #4ADE80); box-shadow: 0 12px 26px rgba(22, 163, 74, .28); }
.tw-icon-blue { background: linear-gradient(135deg, #4FC3F7, #0284C7); box-shadow: 0 12px 26px rgba(2, 132, 199, .26); }
.tw-icon-soft { background: var(--tw-sand); color: var(--tw-orange); box-shadow: none; }
.tw-icon-plain { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; }

/* Tick list */
.tw-ticks { display: flex; flex-direction: column; gap: 11px; }
.tw-tick { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--tw-body); line-height: 1.55; }
.tw-tick > i { color: var(--tw-green); font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.tw-tick-ai > i { color: var(--tw-ai); }
.tw-tick-orange > i { color: var(--tw-orange); }

/* Inline stat block */
.tw-stat-value { font-weight: 800; letter-spacing: -.014em; font-size: clamp(24px, 3.4vw, 34px); line-height: 1; }
.tw-stat-label { font-size: 13px; color: var(--tw-faint); font-weight: 600; margin-top: 6px; }

/* Progress bar */
.tw-bar { height: 6px; border-radius: 4px; background: #F7EEE4; overflow: hidden; }
.tw-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--tw-grad-bar); }

/* ── Screenshot / browser mock ────────────────────────────────────────────── */

.tw-browser {
    position: relative; background: #fff;
    border: 1px solid var(--tw-line); border-radius: 20px;
    box-shadow: var(--tw-sh-shot); overflow: hidden;
}
.tw-browser-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 14px; border-bottom: 1px solid #F1EFFA; background: var(--tw-cream-2);
}
.tw-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tw-coral); flex-shrink: 0; }
.tw-dot-2 { background: var(--tw-amber); }
.tw-dot-3 { background: var(--tw-green); }
.tw-browser-url { margin-left: 10px; font-size: 11.5px; color: var(--tw-faint); font-weight: 600; }
.tw-shot { display: block; width: 100%; height: auto; }

/* Small white card that floats over a screenshot. */
.tw-float-card {
    position: absolute; z-index: 3;
    background: #fff; border: 1px solid var(--tw-line);
    border-radius: 14px; padding: 11px 13px;
    box-shadow: 0 16px 34px rgba(120, 62, 26, .22);
}
.tw-float-card-grad {
    position: absolute; z-index: 3;
    background: var(--tw-grad-brand); color: #fff;
    border-radius: 12px; padding: 8px 12px;
    box-shadow: 0 12px 26px rgba(242, 107, 50, .42);
    display: flex; align-items: center; gap: 7px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
/* A placeholder when a section has no image set. */
.tw-shot-empty {
    display: flex; align-items: center; justify-content: center;
    min-height: 260px; background: linear-gradient(135deg, #FFF3E9, #FFE7D6);
    color: #D8A783; font-size: 34px;
}

/* ── Forms ────────────────────────────────────────────────────────────────── */

.tw-field { display: block; margin-bottom: 14px; }
.tw-lbl, .tw-label { display: block; font-size: 13px; font-weight: 700; color: var(--tw-label); margin-bottom: 6px; }

.tw-input, .tw-textarea, .tw-select,
textarea.tw-input, select.tw-input {
    width: 100%; padding: 12px 14px; border-radius: 11px;
    border: 1.5px solid var(--tw-line-3); background: #fff; color: var(--tw-ink);
    font-size: 14.5px; font-family: inherit; outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.tw-textarea, textarea.tw-input { resize: vertical; min-height: 96px; }
.tw-input:focus, .tw-textarea:focus, .tw-select:focus {
    border-color: var(--tw-orange); box-shadow: 0 0 0 4px var(--tw-sand-2);
}
.tw-input::placeholder, .tw-textarea::placeholder { color: #B6BDC8; }

/* Server-side validation state. */
.tw-input.tw-input-err,
.tw-input-err { border-color: #DC2626; }
.tw-input.tw-input-err:focus,
.tw-input-err:focus { border-color: #DC2626; box-shadow: 0 0 0 4px #FEE2E2; }
.tw-err, .tw-error { font-size: 12.5px; font-weight: 600; color: #DC2626; margin-top: 6px; }

.tw-input-dark {
    background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); color: #fff;
}
.tw-input-dark::placeholder { color: rgba(255, 255, 255, .45); }
.tw-input-dark:focus { border-color: var(--tw-gold); background: rgba(255, 255, 255, .12); box-shadow: none; }
.tw-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tw-hint { font-size: 12.5px; color: var(--tw-faint); margin-top: 8px; }
.tw-note {
    background: #E9F9EF; border: 1px solid #BBE7CA; color: #15803D;
    border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600;
}

/* ── FAQ — native <details>/<summary>, no JavaScript ──────────────────────── */

.tw-faq { background: #fff; border: 1px solid var(--tw-line); border-radius: 16px; overflow: hidden; }
.tw-faq-q {
    padding: 18px 22px; display: flex; gap: 14px; align-items: center;
    cursor: pointer; font-weight: 700; font-size: 16px; list-style: none;
    transition: background .18s ease;
}
.tw-faq-q::-webkit-details-marker { display: none; }
.tw-faq-q::marker { content: none; }
.tw-faq-q:hover { background: var(--tw-cream-2); }
.tw-faq-q:focus-visible { outline: 2px solid var(--tw-orange); outline-offset: -2px; }
/* The icon is a plus, so a quarter turn makes it a cross. */
.tw-faq-ico { color: var(--tw-orange); font-size: 16px; transition: transform .25s ease; margin-left: auto; }
.tw-faq[open] .tw-faq-ico { transform: rotate(45deg); }

/* ── Empty media placeholders ─────────────────────────────────────────────────
   Every image slot on this site can be empty — a page half-filled in the admin
   still has to look deliberate rather than broken. */

.tw-ph {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; text-align: center; padding: 28px; min-height: 160px;
    border: 2px dashed #F0D9C4; border-radius: 18px;
    background: repeating-linear-gradient(135deg, #FFFCF8 0 10px, #FFF7F0 10px 20px);
    color: #C1A88F; font-size: 13px; font-weight: 600;
}
.tw-ph i { font-size: 30px; opacity: .8; }
.tw-ph small { font-size: 11.5px; font-weight: 600; opacity: .85; }
.tw-ph-sq { aspect-ratio: 1 / 1; min-height: 0; padding: 16px; border-radius: 14px; }
.tw-ph-sq small { display: none; }
.tw-ph-round { border-radius: 50%; aspect-ratio: 1 / 1; min-height: 0; padding: 0; }
.tw-ph-round small { display: none; }
.tw-ph-light {
    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .8);
}

/* ── Announcement bar ─────────────────────────────────────────────────────── */

.tw-announce {
    color: #fff; font-size: 13.5px; font-weight: 600;
    padding: 9px 20px; display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 6px 10px; text-align: center;
}
.tw-announce a, .tw-announce button {
    color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 700;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.tw-header {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--tw-line);
}
.tw-header-in {
    max-width: var(--tw-wrap); margin: 0 auto;
    padding: 14px 24px;
    display: flex; align-items: center; column-gap: 20px; row-gap: 10px;
}

.tw-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; color: inherit; }
.tw-logo:hover { color: inherit; }
.tw-logo-mark {
    width: 38px; height: 38px; border-radius: 12px;
    background: var(--tw-grad-brand);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 17px;
    box-shadow: 0 8px 18px rgba(242, 107, 50, .32);
}
.tw-logo-mark i { transform: rotate(-45deg); }
.tw-logo-words { display: block; }
.tw-logo-name { display: block; font-weight: 800; font-size: 19px; letter-spacing: -.012em; line-height: 1; }
.tw-logo-sub { display: block; font-size: 10.5px; color: var(--tw-faint); letter-spacing: .14em; font-weight: 600; margin-top: 3px; }

.tw-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.tw-nav-link {
    position: relative; display: block;
    padding: 8px 14px; border-radius: 9px;
    font-size: 14.5px; font-weight: 600; color: var(--tw-label);
    white-space: nowrap; transition: background .18s ease, color .18s ease;
}
.tw-nav-link:hover { background: var(--tw-sand); color: var(--tw-orange); }
.tw-nav-link.is-active { color: var(--tw-ink); }
.tw-nav-link.is-active::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 1px;
    height: 2.5px; border-radius: 2px; background: var(--tw-grad-bar);
}

.tw-header-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.tw-header-cta .tw-btn { padding: 10px 17px; font-size: 14.5px; border-radius: 11px; }

.tw-burger {
    display: none; margin-left: auto;
    width: 42px; height: 42px; border-radius: 12px;
    align-items: center; justify-content: center;
    border: 1.5px solid var(--tw-line-2); background: #fff;
    color: var(--tw-orange); font-size: 20px;
}
.tw-burger:hover { background: var(--tw-sand); border-color: var(--tw-orange); }
.tw-burger .bi-x-lg { display: none; }
.tw-burger[aria-expanded="true"] .bi-list { display: none; }
.tw-burger[aria-expanded="true"] .bi-x-lg { display: inline-block; }

.tw-mobile-nav {
    display: none;
    border-top: 1px solid var(--tw-line);
    background: rgba(255, 255, 255, .97);
    padding: 12px 20px 18px;
}
.tw-mobile-nav.is-open { display: block; }
.tw-mobile-nav .tw-nav-link {
    display: block; padding: 12px 12px; border-radius: 11px;
    font-size: 15.5px; border-bottom: 1px solid #F8F1E8;
}
.tw-mobile-nav .tw-nav-link.is-active { background: var(--tw-sand); color: var(--tw-orange); }
.tw-mobile-nav .tw-nav-link.is-active::after { display: none; }
.tw-mobile-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.tw-mobile-cta .tw-btn { width: 100%; }

/* ── Floating enquiry button ──────────────────────────────────────────────── */

.tw-fab {
    position: fixed; right: 24px; bottom: 24px; z-index: 70;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 20px; border-radius: 999px;
    background: linear-gradient(135deg, #F26B32, #E11D74);
    color: #fff; font-weight: 700; font-size: 15px;
    box-shadow: 0 16px 36px rgba(242, 107, 50, .42);
    animation: floaty 5s ease-in-out infinite;
    transition: transform .2s ease;
}
.tw-fab:hover { color: #fff; transform: translateY(-3px) scale(1.03); }

/* ── Footer ───────────────────────────────────────────────────────────────── */

.tw-foot {
    background: linear-gradient(168deg, var(--tw-dark), var(--tw-dark-2));
    color: #fff; padding: 0 0 26px; position: relative; overflow: hidden;
}
.tw-foot-stars {
    position: absolute; inset: 0; opacity: .13; pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 12% 24%, #fff, transparent),
        radial-gradient(1.6px 1.6px at 62% 48%, #fff, transparent),
        radial-gradient(2px 2px at 88% 18%, #fff, transparent),
        radial-gradient(1.4px 1.4px at 38% 76%, #fff, transparent),
        radial-gradient(1.4px 1.4px at 76% 86%, #fff, transparent);
}
.tw-foot-wave { position: relative; display: block; width: 100%; height: 90px; opacity: .5; }
.tw-foot-in { position: relative; max-width: var(--tw-wrap); margin: 0 auto; padding: 0 24px; }

.tw-foot-news {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px; padding: 26px 30px;
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    margin-bottom: 46px;
}
.tw-foot-news-copy { flex: 1 1 280px; min-width: 260px; }
.tw-foot-news-form { display: flex; gap: 10px; flex-wrap: wrap; flex: 1 1 300px; min-width: 280px; }
.tw-foot-news-form .tw-input { flex: 1; min-width: 180px; padding: 13px 15px; }

.tw-foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.tw-foot-head {
    font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
    color: var(--tw-gold); margin-bottom: 15px; text-transform: uppercase;
}
.tw-foot-links { display: flex; flex-direction: column; gap: 10px; font-size: 14.3px; color: var(--tw-dark-text); }
.tw-foot-link { color: var(--tw-dark-text); transition: color .16s ease; }
.tw-foot-link:hover { color: #fff; }
.tw-foot-about { color: var(--tw-dark-muted); font-size: 14.3px; line-height: 1.62; margin: 16px 0 18px; max-width: 300px; }
.tw-foot-contact { display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: var(--tw-dark-text); }
.tw-foot-contact a { color: var(--tw-dark-text); }
.tw-foot-contact a:hover { color: #fff; }
.tw-foot-contact > * { display: flex; align-items: flex-start; gap: 9px; }
.tw-foot-contact i { color: var(--tw-gold); flex-shrink: 0; margin-top: 3px; }

.tw-social { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.tw-social a {
    width: 36px; height: 36px; border-radius: 11px;
    background: rgba(255, 255, 255, .1);
    display: flex; align-items: center; justify-content: center;
    color: #fff; transition: background .2s ease, transform .2s ease;
}
.tw-social a:hover { background: var(--tw-orange); color: #fff; transform: translateY(-2px); }
.tw-social a.tw-social-wa:hover { background: var(--tw-green); }

.tw-prod-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.tw-prod-card {
    position: relative; display: flex; flex-direction: column;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px; padding: 18px; overflow: hidden;
    transition: transform .26s ease, background .26s ease, border-color .26s ease;
    color: #fff;
}
.tw-prod-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: #fff; }
.tw-prod-card.is-here { background: rgba(242, 107, 50, .16); border-color: rgba(255, 154, 90, .55); }
.tw-prod-logo {
    position: relative; height: 40px; background: #fff; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; padding: 0 12px; gap: 8px;
}
.tw-prod-logo .tw-icon-xs { border-radius: 8px; width: 26px; height: 26px; font-size: 12px; }
.tw-prod-logo-text { font-weight: 800; font-size: 13px; letter-spacing: -.01em; color: #241207; }
.tw-prod-name { position: relative; font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; margin: 15px 0 5px; }
.tw-prod-desc { position: relative; font-size: 12.4px; color: #C4B3A2; line-height: 1.5; flex: 1; }
.tw-prod-cta { position: relative; margin-top: 13px; font-size: 12.4px; font-weight: 700; color: var(--tw-gold); display: inline-flex; align-items: center; gap: 6px; }
.tw-prod-cta:hover { color: #fff; }
.tw-here-badge {
    position: relative; margin-top: 13px; display: inline-flex; align-items: center; gap: 6px;
    align-self: flex-start; background: var(--tw-grad); color: #fff;
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
    border-radius: 999px; padding: 5px 11px;
}

.tw-foot-trust { display: flex; gap: 10px; flex-wrap: wrap; }
.tw-store-row { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.tw-store-btn {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 13px;
    padding: 9px 16px; color: #fff; transition: background .2s ease;
}
.tw-store-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.tw-store-btn i { font-size: 19px; color: var(--tw-gold); }
.tw-store-cap { display: block; font-size: 10px; color: #B9A695; }
.tw-store-name { display: block; font-size: 13.5px; font-weight: 700; }

.tw-foot-band {
    margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .1);
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center;
}
.tw-foot-bottom {
    margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    color: var(--tw-dark-faint); font-size: 13.3px;
}
.tw-foot-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.tw-foot-more { margin-top: 44px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .1); }
.tw-foot-more-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
    .tw-split, .tw-split-even { grid-template-columns: 1fr; gap: 36px; }
    .tw-split-rev > :first-child, .tw-split-rev > :last-child { order: 0; }
    .tw-g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tw-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tw-foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .tw-prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .tw-section { padding: 68px 20px; }
    .tw-section-tight { padding: 44px 20px; }
    .tw-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tw-foot-band { grid-template-columns: 1fr; }
    .tw-store-row { justify-content: flex-start; }
}

/* Hamburger threshold. */
@media (max-width: 860px) {
    .tw-header-in .tw-nav,
    .tw-header-cta { display: none; }
    .tw-burger { display: inline-flex; }
    .tw-logo-sub { display: none; }
}

@media (max-width: 720px) {
    .tw-section { padding: 54px 18px; }
    .tw-section-tight { padding: 38px 18px; }
    .tw-wrap, .tw-wrap-sm, .tw-wrap-xs, .tw-header-in, .tw-foot-in { padding-left: 18px; padding-right: 18px; }
    .tw-g2, .tw-g3, .tw-g4, .tw-g5 { grid-template-columns: minmax(0, 1fr); }
    .tw-form-grid { grid-template-columns: minmax(0, 1fr); }
    .tw-foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
    .tw-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tw-card { padding: 22px; border-radius: 18px; }
    .tw-card-lg { padding: 24px; }
    .tw-card-glass, .tw-foot-news { padding: 22px; }
    .tw-section-head { margin-bottom: 32px; }
    .tw-btn-row .tw-btn { flex: 1 1 100%; }
    .tw-fab { right: 14px; bottom: 14px; padding: 12px 17px; font-size: 14px; }
    .tw-foot-wave { height: 60px; }
    /* Floating screenshot cards stop floating — they overlap on a phone. */
    .tw-float-card, .tw-float-card-grad { position: static; margin-top: 12px; width: auto; }
}

@media (max-width: 480px) {
    body { font-size: 15.5px; }
    .tw-section { padding: 44px 14px; }
    .tw-wrap, .tw-wrap-sm, .tw-wrap-xs, .tw-header-in, .tw-foot-in { padding-left: 14px; padding-right: 14px; }
    .tw-header-in { padding-top: 10px; padding-bottom: 10px; }
    .tw-foot-grid, .tw-prod-grid { grid-template-columns: minmax(0, 1fr); }
    .tw-card { padding: 18px; }
    .tw-btn-lg { padding: 13px 20px; font-size: 15px; }
    .tw-foot-news-form { flex-direction: column; }
    .tw-foot-news-form .tw-btn { width: 100%; }
    .tw-marquee-track { gap: 26px; font-size: 16px; }
    .tw-fab span { display: none; }
    .tw-fab { padding: 14px; border-radius: 50%; }
}

@media (max-width: 380px) {
    .tw-logo-name { font-size: 17px; }
    .tw-logo-mark { width: 34px; height: 34px; font-size: 15px; }
    .tw-icon { width: 46px; height: 46px; border-radius: 14px; font-size: 19px; }
}

/* Wide desktop — let the marquee and hero breathe. */
@media (min-width: 1400px) {
    :root { --tw-wrap: 1240px; }
}

/* ── Print ────────────────────────────────────────────────────────────────── */

@media print {
    .tw-header, .tw-fab, .tw-mobile-nav, .tw-foot-news { display: none !important; }
    body { background: #fff; }
    .tw-section { padding: 18px 0; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────────
   The design animates almost everything. If the visitor has asked their OS for
   less of that, they get none of it — and the reveal elements must be forced
   visible, because their resting state is opacity:0 until the animation runs. */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto; }
    .tw-js [data-reveal],
    .tw-js .tw-fade-up,
    [data-reveal],
    .tw-fade-up,
    .tw-reveal { opacity: 1 !important; transform: none !important; }
    .tw-btn:hover, .tw-lift:hover, .tw-lift-sm:hover, .tw-lift-flat:hover,
    .tw-lift-ai:hover, .tw-lift-lg:hover, .tw-row:hover, .tw-plan:hover,
    .tw-logo-tile:hover, .tw-prod-card:hover, .tw-fab:hover,
    .tw-social a:hover { transform: none !important; }
}