/* ════════════════════════════════════════════════════════════════
   tutram-home-new.css — dark navy SaaS landing (rebuild v3)
   ════════════════════════════════════════════════════════════════
   Loaded ONLY by resources/views/welcome.blade.php. Class-namespaced
   .thn-* on every selector so this file cannot collide with the
   global brand.css / responsive-fixes.css.

   Layout that this file supports:
     1.  Hero — 3 overlapping phones, 3 floating decoration cards
     2.  Real-stores carousel (admin-curated)
     3.  Before/With cards with mini phone previews + arrow between
     4.  Steps — horizontal numbered row with arrow connectors
     5.  Features — 6 cards (3-col / 2-col mobile)
     6.  Testimonials — 3 cards (carousel on mobile)
     7.  FAQ accordion
     8.  Pricing — Free / Pro highlighted / Business
     9.  Final CTA bar with gift visual
     10. 4-column footer
   ════════════════════════════════════════════════════════════════ */

:root {
    --thn-bg:          #0b1320;
    --thn-bg-2:        #0a1628;
    --thn-card:        #111c2f;
    --thn-card-soft:   #131e33;
    --thn-card-line:   rgba(148, 163, 184, .12);
    --thn-card-line-2: rgba(148, 163, 184, .22);

    --thn-text:        #e2e8f0;
    --thn-text-2:      #cbd5e1;
    --thn-muted:       #94a3b8;

    --thn-accent:      #22c55e;          /* green from logo */
    --thn-accent-2:    #16a34a;
    --thn-blue:        #3b82f6;          /* blue from logo */
    --thn-blue-2:      #2563eb;
    --thn-grad:        linear-gradient(135deg, #22c55e 0%, #3b82f6 100%);

    --thn-radius-sm:   10px;
    --thn-radius-md:   14px;
    --thn-radius-lg:   20px;
    --thn-radius-xl:   28px;

    --thn-shadow-md:   0 12px 36px rgba(0, 0, 0, .35);
    --thn-shadow-lg:   0 24px 60px rgba(0, 0, 0, .45);
}

body.tutram-home-new {
    background:
        radial-gradient(ellipse at top right, rgba(59, 130, 246, .14), transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(34, 197, 94, .12), transparent 55%),
        linear-gradient(180deg, var(--thn-bg) 0%, var(--thn-bg-2) 100%);
    color: var(--thn-text);
    min-height: 100vh;
    background-attachment: fixed;
}

/* Re-tint the existing white site-header for this page only. */
body.tutram-home-new .site-header {
    background: rgba(11, 19, 32, .72) !important;
    border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .3) !important;
}

/* Homepage-only logo sizing.
   The white wordmark file (tutram-white-logo.png, served by the
   navbar partial when request()->routeIs('home')) is a tight
   3:1 horizontal logo with no transparent padding. The default
   .hdr-logo-img / .hdr-logo-mark sizes (height 100px + scale 1.3
   on desktop, height 64px + scale 2 on mobile) were tuned for
   logo3.png which has heavy transparent padding around its
   artwork — applying those sizes to the white wordmark would
   make it render 3x larger than intended.
   Override here with sizes that match a modern SaaS landing
   wordmark, with sharp PNG rendering on retina screens. */
body.tutram-home-new .hdr-logo-img {
    height: 38px !important;
    transform: none !important;
    image-rendering: -webkit-optimize-contrast;
}
body.tutram-home-new .hdr-logo-mark {
    height: 32px !important;
    transform: none !important;
    image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 768px) {
    body.tutram-home-new .hdr-logo-mark {
        height: 30px !important;
    }
    /* Mobile nav dropdown: the base layout sets background:#fff
       which produces a glaring white panel hanging off the dark
       header on the homepage. Re-tint to the dark navy used in
       the rest of the page chrome so the dropdown reads as part
       of the same surface. The link colors are already overridden
       above (var(--thn-text-2)) so they stay readable. */
    body.tutram-home-new .hdr-nav {
        background: #0d1a2e !important;
        border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important;
    }
    body.tutram-home-new .hdr-nav a:hover {
        background: rgba(255, 255, 255, .06);
        color: #fff;
    }
}
body.tutram-home-new .site-header .hdr-nav a { color: var(--thn-text-2); }
body.tutram-home-new .site-header .hdr-nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
body.tutram-home-new .site-header .lang-dd-btn {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(148, 163, 184, .2);
    color: var(--thn-text);
}
body.tutram-home-new .site-header .lang-dd-btn:hover { border-color: rgba(148, 163, 184, .35); }
body.tutram-home-new .site-header .lang-dd-menu {
    background: #111c2f;
    border-color: rgba(148, 163, 184, .2);
}
body.tutram-home-new .site-header .lang-dd-item { color: var(--thn-text-2); }
body.tutram-home-new .site-header .lang-dd-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
body.tutram-home-new .site-header .lang-dd-item.active { background: rgba(34, 197, 94, .12); color: #86efac; }
body.tutram-home-new .site-header .btn-hdr-ghost { color: var(--thn-text-2); }
body.tutram-home-new .site-header .btn-hdr-ghost:hover { background: rgba(255, 255, 255, .06); color: #fff; }
body.tutram-home-new .site-header .btn-hdr-primary {
    background: var(--thn-grad);
    color: #fff;
    box-shadow: 0 6px 18px rgba(34, 197, 94, .35);
}
body.tutram-home-new .site-header .btn-hdr-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(34, 197, 94, .45);
}

/* ── Containers + section rhythm ─────────────────────────── */
.thn-container          { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.thn-container--narrow  { max-width: 820px; }
@media (max-width: 640px) { .thn-container, .thn-container--narrow { padding: 0 18px; } }

.thn-section { padding: 88px 0; }
@media (max-width: 768px) { .thn-section { padding: 52px 0; } }
@media (max-width: 480px) { .thn-section { padding: 40px 0; } }

.thn-h2 {
    /* Bigger + heavier so titles pull weight against the
       dark canvas — earlier 2.6rem cap looked anemic. */
    font-size: clamp(1.9rem, 3.8vw, 3rem);
    font-weight: 900;
    letter-spacing: -.03em;
    color: #fff;
    margin: 0;
    line-height: 1.1;
}
.thn-h2--center { text-align: center; }

.thn-section-head-center { text-align: center; margin-bottom: 52px; }
@media (max-width: 768px) { .thn-section-head-center { margin-bottom: 32px; } }
.thn-section-eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--thn-accent);
    margin-bottom: 14px;
    /* Subtle glow so the eyebrow reads as the primer it is. */
    text-shadow: 0 0 20px rgba(34, 197, 94, .3);
}
.thn-section-sub {
    font-size: 1.08rem;
    color: var(--thn-muted);
    line-height: 1.65;
    max-width: 660px;
    margin: 18px auto 0;
    font-weight: 500;
}
@media (max-width: 768px) {
    .thn-section-sub { font-size: .96rem; }
}

/* ── Buttons ────────────────────────────────────────────── */
.thn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 28px;
    border-radius: 14px;
    font-size: 1rem; font-weight: 800;
    text-decoration: none; border: none; cursor: pointer;
    line-height: 1.1;
    transition: transform .15s ease, box-shadow .2s ease, background .15s ease;
}
.thn-btn-primary {
    background: var(--thn-grad);
    color: #fff;
    box-shadow: 0 10px 28px rgba(34, 197, 94, .35);
}
.thn-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(34, 197, 94, .45); color: #fff; }
.thn-btn-ghost {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
}
.thn-btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ════════════════════════════════════════════════════════════════
   1. HERO
   ════════════════════════════════════════════════════════════════ */
.thn-hero {
    padding: 150px 0 90px;
    position: relative;
    overflow: hidden;
}
@media (max-width: 768px) { .thn-hero { padding: 110px 0 50px; } }

.thn-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
@media (max-width: 991px) {
    .thn-hero-grid { grid-template-columns: 1fr; gap: 36px; }
}

.thn-hero-left  { min-width: 0; }

.thn-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px;
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .3);
    border-radius: 99px;
    color: #86efac;
    font-size: .82rem; font-weight: 700;
    margin-bottom: 22px;
}
.thn-hero-badge .star { color: #facc15; }

.thn-hero-title {
    /* Bigger + tighter tracking for premium presence. */
    font-size: clamp(2.6rem, 6.2vw, 4.6rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    color: #fff;
    margin: 0 0 26px;
    /* Faint white glow so the headline visually separates
       from the dark gradient bg. */
    text-shadow: 0 2px 30px rgba(0, 0, 0, .4);
}
.thn-hero-title .accent {
    background: var(--thn-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    /* Fall-back glow on the gradient text itself. */
    filter: drop-shadow(0 0 20px rgba(34, 197, 94, .25));
}

.thn-hero-sub {
    font-size: 1.15rem;
    color: var(--thn-text-2);
    line-height: 1.65;
    margin: 0 0 28px;
    max-width: 540px;
    font-weight: 500;
}
@media (max-width: 768px) {
    .thn-hero-sub { font-size: 1rem; }
}

.thn-hero-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: grid; gap: 9px;
}
.thn-hero-list li {
    display: flex; align-items: center; gap: 10px;
    color: var(--thn-text-2);
    font-size: .98rem;
}
.thn-hero-list li i { color: var(--thn-accent); font-size: 1rem; flex-shrink: 0; }

.thn-hero-actions {
    display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px;
}
@media (max-width: 480px) {
    .thn-hero-actions { flex-direction: column; align-items: stretch; }
    .thn-hero-actions .thn-btn { width: 100%; }
}

.thn-hero-trust {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.thn-trust-avatars { display: inline-flex; }
.thn-trust-avatars span {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #3b82f6);
    border: 2px solid var(--thn-bg-2);
    margin-left: -10px;
}
.thn-trust-avatars span:first-child { margin-left: 0; }
.thn-trust-stars { color: #facc15; letter-spacing: 1px; font-size: .9rem; line-height: 1; }
.thn-trust-text  { color: var(--thn-muted); font-size: .82rem; margin-top: 2px; }

/* ── 3-PHONE STAGE ───────────────────────────────────────── */
.thn-hero-stage {
    position: relative;
    height: 580px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 1199px) { .thn-hero-stage { height: 520px; } }
@media (max-width: 991px)  { .thn-hero-stage { height: 480px; } }
@media (max-width: 480px)  { .thn-hero-stage { height: 440px; } }

/* Each phone is positioned absolutely so they overlap.
   Three-shadow stack gives the deep, premium black-glass
   feel the reference shows: ambient + cast + glow. */
.thn-stage-phone {
    position: absolute;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border: 1.5px solid rgba(148, 163, 184, .28);
    border-radius: 42px;
    padding: 10px;
    overflow: hidden;
    /* Layered shadow — ambient occlusion + heavy cast + glow */
    box-shadow:
        0 2px 0 rgba(255, 255, 255, .04) inset,
        0 30px 60px -10px rgba(0, 0, 0, .55),
        0 18px 36px -8px rgba(0, 0, 0, .5),
        0 0 80px rgba(59, 130, 246, .18);
}
.thn-stage-phone-screen {
    background: #fff;
    border-radius: 32px;
    overflow: hidden;
    color: #0f172a;
    width: 100%; height: 100%;
    position: relative;
    display: flex; flex-direction: column;
}
.thn-stage-phone-screen img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}
.thn-stage-phone-url {
    position: absolute;
    top: 16px; left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .94);
    color: #0f172a;
    border-radius: 99px;
    padding: 5px 14px;
    font-size: .7rem;
    font-weight: 800;
    z-index: 3;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Center phone — biggest, on top, slight lift. The dramatic
   green+blue glow underneath sells the premium product feel. */
.thn-stage-phone--center {
    width: 300px; height: 600px;
    z-index: 3;
    transform: translateY(-8px);
    box-shadow:
        0 2px 0 rgba(255, 255, 255, .06) inset,
        0 40px 80px -10px rgba(0, 0, 0, .6),
        0 24px 50px -10px rgba(0, 0, 0, .55),
        0 0 120px rgba(34, 197, 94, .25),
        0 0 200px rgba(59, 130, 246, .2);
}
/* Left phone — smaller, tilted left, behind. */
.thn-stage-phone--left {
    width: 230px; height: 480px;
    left: 0;
    z-index: 1;
    transform: rotate(-8deg) translateY(28px);
    border-radius: 36px;
    opacity: .92;
}
/* Right phone — smaller, tilted right, behind. */
.thn-stage-phone--right {
    width: 230px; height: 480px;
    right: 0;
    z-index: 1;
    transform: rotate(8deg) translateY(28px);
    border-radius: 36px;
    opacity: .92;
}
@media (max-width: 1199px) {
    .thn-stage-phone--center { width: 270px; height: 540px; }
    .thn-stage-phone--left,
    .thn-stage-phone--right  { width: 200px; height: 420px; }
}
@media (max-width: 991px) {
    /* Tablet: still 3 phones but tighter. */
    .thn-stage-phone--center { width: 250px; height: 500px; }
    .thn-stage-phone--left,
    .thn-stage-phone--right  { width: 185px; height: 390px; }
    .thn-stage-phone--left   { left: 4%; }
    .thn-stage-phone--right  { right: 4%; }
}
@media (max-width: 640px) {
    /* Mobile: hide the side phones, keep only the center one
       (matches the mobile reference: ONE main phone). */
    .thn-stage-phone--left,
    .thn-stage-phone--right { display: none; }
    .thn-stage-phone--center { width: 260px; height: 520px; transform: none; }
}
@media (max-width: 380px) {
    .thn-stage-phone--center { width: 240px; height: 480px; }
}

/* ── Floating cards ───────────────────────────────────────
   Stronger glass effect + deeper shadow stack so the
   floats READ as discrete UI cards layered over the
   phones, not as background decoration. */
.thn-float-card {
    position: absolute;
    background: linear-gradient(180deg, rgba(17, 28, 47, .92), rgba(11, 19, 32, .9));
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 14px;
    padding: 14px 16px;
    color: var(--thn-text);
    z-index: 4;
    width: 220px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .05) inset,
        0 18px 40px -8px rgba(0, 0, 0, .55),
        0 8px 20px -4px rgba(0, 0, 0, .45);
}
.thn-float-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.thn-float-icon.green {
    background: linear-gradient(135deg, rgba(34, 197, 94, .25), rgba(34, 197, 94, .12));
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, .35);
}
.thn-float-icon.blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, .25), rgba(59, 130, 246, .12));
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, .35);
}
.thn-float-title { font-weight: 800; font-size: .9rem; color: #fff; line-height: 1.25; }
.thn-float-sub   { font-size: .76rem; color: var(--thn-muted); margin-top: 3px; line-height: 1.45; }

.thn-fl-tl { top: 6%;    left: -2%; }
.thn-fl-tr { top: 22%;   right: -4%; }
.thn-fl-br { bottom: 4%; right: 8%; }
@media (min-width: 1280px) {
    .thn-fl-tl { left: -10%; }
    .thn-fl-tr { right: -10%; }
    .thn-fl-br { right: -2%; }
}
@media (max-width: 991px) { .thn-float-card { display: none; } }

/* ── Phone-screen mockups (when no admin image) ─────────── */
.thn-mock-statusbar {
    height: 22px;
    background: #f8fafc;
    display: flex; justify-content: center; align-items: center;
    font-size: .65rem; font-weight: 700; color: #475569;
    flex-shrink: 0;
}
.thn-mock-content { flex: 1; padding: 16px 14px; overflow: hidden; }
.thn-mock-content--warm { background: linear-gradient(180deg, #fff, #fefbf5); }
.thn-mock-content--cool { background: linear-gradient(180deg, #fff, #f5f9ff); }

.thn-mock-cover {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
    border-radius: 12px;
    padding: 22px 16px;
    text-align: center;
    margin-bottom: 12px;
}
.thn-mock-cover-eyebrow { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.thn-mock-cover-title { font-size: .98rem; font-weight: 800; margin-top: 4px; line-height: 1.1; }

.thn-mock-cats { display: flex; justify-content: space-around; margin-bottom: 12px; }
.thn-mock-cat  { text-align: center; flex: 1; font-size: .55rem; font-weight: 600; color: #64748b; }
.thn-mock-cat-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; margin: 0 auto 4px;
    background: #f1f5f9; border-radius: 8px; color: #475569; font-size: .75rem;
}

.thn-mock-section-title { font-size: .68rem; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
.thn-mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.thn-mock-card {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden;
}
.thn-mock-card-img { height: 60px; }
.thn-mock-card-img.a { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }
.thn-mock-card-img.b { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.thn-mock-card-name { font-size: .55rem; font-weight: 700; color: #0f172a; padding: 4px 6px 0; }
.thn-mock-card-price { font-size: .55rem; font-weight: 800; color: #0f172a; padding: 0 6px 6px; }

/* List variant — for left/right side phones */
.thn-mock-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
}
.thn-mock-row-img { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; }
.thn-mock-row-img.r1 { background: linear-gradient(135deg, #fde68a, #fbbf24); }
.thn-mock-row-img.r2 { background: linear-gradient(135deg, #fed7aa, #fb923c); }
.thn-mock-row-img.r3 { background: linear-gradient(135deg, #fbcfe8, #f472b6); }
.thn-mock-row-img.c1 { background: linear-gradient(135deg, #bfdbfe, #60a5fa); }
.thn-mock-row-img.c2 { background: linear-gradient(135deg, #c7d2fe, #818cf8); }
.thn-mock-row-img.c3 { background: linear-gradient(135deg, #a7f3d0, #34d399); }
.thn-mock-row-meta { flex: 1; }
.thn-mock-row-name { height: 8px; width: 70%; background: #cbd5e1; border-radius: 4px; margin-bottom: 4px; }
.thn-mock-row-line { height: 6px; width: 40%; background: #e2e8f0; border-radius: 3px; }
.thn-mock-banner {
    height: 70px;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-radius: 10px;
    margin-bottom: 10px;
}

/* ════════════════════════════════════════════════════════════════
   2. REAL STORES
   ════════════════════════════════════════════════════════════════ */
.thn-stores-head {
    display: flex; align-items: end; justify-content: space-between;
    margin-bottom: 28px; gap: 16px; flex-wrap: wrap;
}
.thn-stores-head h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.thn-stores-head-right { display: flex; align-items: center; gap: 10px; }
.thn-stores-link {
    color: var(--thn-blue); font-weight: 700; font-size: .9rem;
    text-decoration: none; white-space: nowrap;
}
.thn-stores-link:hover { color: #93c5fd; }

.thn-stores-arrow {
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, .25);
    background: rgba(255, 255, 255, .04);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.thn-stores-arrow:hover {
    background: rgba(34, 197, 94, .15);
    border-color: rgba(34, 197, 94, .4);
}
.thn-stores-arrow:active { transform: scale(.96); }
.thn-stores-arrow:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 768px) { .thn-stores-arrow { display: none; } }

.thn-stores-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.thn-stores-grid::-webkit-scrollbar { display: none; }
.thn-stores-card {
    flex: 0 0 calc((100% - 4 * 16px) / 5);
    scroll-snap-align: start;
    min-width: 0;
    /* Subtle gradient surface gives the cards a "glass over
       dark" feel — not flat panels. */
    background: linear-gradient(180deg, #131e33 0%, #0f1828 100%);
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none; color: inherit;
    transition: transform .25s ease, border-color .2s ease, box-shadow .25s ease;
    display: block;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .04) inset,
        0 12px 28px -8px rgba(0, 0, 0, .4);
}
.thn-stores-card:hover {
    transform: translateY(-6px);
    border-color: rgba(34, 197, 94, .4);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .06) inset,
        0 24px 48px -8px rgba(0, 0, 0, .55),
        0 0 60px rgba(34, 197, 94, .18);
    color: inherit;
}
@media (max-width: 1199px) { .thn-stores-card { flex-basis: calc((100% - 3 * 16px) / 4); } }
@media (max-width: 991px)  { .thn-stores-card { flex-basis: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 768px) {
    .thn-stores-grid { gap: 12px; margin: 0 -18px; padding: 0 18px 8px; }
    .thn-stores-card { flex-basis: 70%; }
}
@media (max-width: 480px) { .thn-stores-card { flex-basis: 78%; } }

/* Logo frame — dark branded surface with subtle radial accent +
   inset highlight. Logos render with object-fit: contain + heavy
   padding so brand marks of ANY aspect ratio (round, wide, tall,
   square) sit centered without stretching. The card always
   reads as a "logo on branded card", not a "cropped photo". */
.thn-stores-logo-frame {
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(circle at 30% 30%, rgba(34, 197, 94, .08), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(59, 130, 246, .08), transparent 60%),
        linear-gradient(135deg, #1a2540 0%, #0f1828 100%);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22%;          /* generous breathing room around any logo */
    border-bottom: 1px solid rgba(148, 163, 184, .1);
    transition: background .25s ease;
}
.thn-stores-logo-frame::after {
    /* Subtle inset top highlight — cards read as glass not flat. */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%);
    pointer-events: none;
}
.thn-stores-card:hover .thn-stores-logo-frame {
    background:
        radial-gradient(circle at 30% 30%, rgba(34, 197, 94, .14), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(59, 130, 246, .14), transparent 60%),
        linear-gradient(135deg, #1d2a48 0%, #111c2f 100%);
}

.thn-stores-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* Drop-shadow gives the logo a slight lift off the dark
       background so thin / transparent logos read cleanly. */
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .35));
    transition: transform .35s cubic-bezier(.25,.46,.45,.94);
    position: relative;
    z-index: 1;
}
.thn-stores-card:hover .thn-stores-logo { transform: scale(1.05); }

/* Icon fallback — only visible when:
     (a) there's no <img> rendered at all (no logo on shop), OR
     (b) the <img> 404'd and the onerror handler stripped it
         and added .thn-stores-logo-frame--missing.
   When an <img> IS present and loading/loaded, the icon stays
   hidden behind it via z-index + display:none default. */
.thn-stores-logo-fallback {
    display: none;
    color: rgba(148, 163, 184, .5);
    font-size: 3.6rem;
    line-height: 1;
    transition: color .25s ease, transform .35s cubic-bezier(.25,.46,.45,.94);
    z-index: 0;
}
/* Show the fallback when there's no <img> at all in the frame
   OR when the .--missing class is set (img 404 stripped it). */
.thn-stores-logo-frame:not(:has(.thn-stores-logo)) .thn-stores-logo-fallback,
.thn-stores-logo-frame--missing .thn-stores-logo-fallback {
    display: inline-flex;
}
.thn-stores-card:hover .thn-stores-logo-fallback {
    color: rgba(148, 163, 184, .75);
    transform: scale(1.08);
}

.thn-stores-body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Reserve consistent space so cards align even when one
       card has a tagline and another doesn't. */
    min-height: 110px;
}
.thn-stores-name {
    font-weight: 800;
    font-size: 1.02rem;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -.01em;
    /* Truncate one-line names that are unusually long so all
       cards align identically. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.thn-stores-tag {
    font-size: .82rem;
    color: var(--thn-muted);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.thn-stores-cta {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: auto;       /* CTA always pinned to the bottom */
    padding-top: 10px;
    color: var(--thn-blue);
    font-weight: 700; font-size: .82rem;
    transition: gap .2s ease, color .2s ease;
}
.thn-stores-card:hover .thn-stores-cta {
    gap: 8px;
    color: #93c5fd;
}

/* ════════════════════════════════════════════════════════════════
   3. BEFORE / WITH compare
   ════════════════════════════════════════════════════════════════ */
.thn-compare-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: stretch;
    margin-top: 36px;
}
@media (max-width: 991px) {
    .thn-compare-row { grid-template-columns: 1fr; gap: 16px; }
}
.thn-compare-card {
    background: var(--thn-card);
    border: 1px solid var(--thn-card-line);
    border-radius: var(--thn-radius-lg);
    padding: 28px 26px;
    display: flex; flex-direction: column; gap: 16px;
}
.thn-compare-card--good {
    border-color: rgba(34, 197, 94, .3);
    background: linear-gradient(180deg, var(--thn-card), #0f1d2e);
}
.thn-compare-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.1rem; font-weight: 900; color: #fff; margin: 0;
}
.thn-compare-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem; font-weight: 900;
}
.thn-compare-icon--x  { background: rgba(248, 113, 113, .15); color: #f87171; border: 1px solid rgba(248, 113, 113, .3); }
.thn-compare-icon--ok { background: rgba(34, 197, 94, .15);  color: #4ade80; border: 1px solid rgba(34, 197, 94, .3); }

.thn-compare-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.thn-compare-list li {
    display: flex; align-items: flex-start; gap: 10px;
    color: var(--thn-text-2);
    font-size: .94rem; line-height: 1.5;
}
.thn-compare-list li i { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.thn-compare-card--bad .thn-compare-list li i  { color: #f87171; }
.thn-compare-card--good .thn-compare-list li i { color: var(--thn-accent); }

/* Mini phone preview at bottom of each compare card */
.thn-compare-mini-phone {
    margin-top: 8px;
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    color: #0f172a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    border: 1px solid #e2e8f0;
    display: flex; flex-direction: column; gap: 10px;
}
.thn-mini-row { display: flex; align-items: center; gap: 10px; }
.thn-mini-circle { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #cbd5e1, #94a3b8); flex-shrink: 0; }
.thn-mini-stack { flex: 1; }
.thn-mini-line { height: 8px; background: #e2e8f0; border-radius: 4px; margin-bottom: 4px; }
.thn-mini-line.w70 { width: 70%; }
.thn-mini-line.w50 { width: 50%; }
.thn-mini-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.thn-mini-grid > div { aspect-ratio: 1/1; background: linear-gradient(135deg, #f1f5f9, #cbd5e1); border-radius: 4px; }
.thn-mini-cover { height: 60px; border-radius: 8px; background: linear-gradient(135deg, #0f172a, #1e293b); }
.thn-mini-shopgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.thn-mini-shopcard { aspect-ratio: 1/1; border-radius: 6px; background: linear-gradient(135deg, #fef3c7, #fbbf24); }
.thn-mini-shopcard:nth-child(2) { background: linear-gradient(135deg, #dbeafe, #60a5fa); }

/* Admin-uploaded image variant — replaces the CSS mockup chips
   above. Same outer chrome (rounded white panel, soft shadow)
   so the section keeps a consistent footprint regardless of
   whether the slot is set. The inner image fills the panel
   with object-fit:cover and a clamped height so wildly tall
   uploads don't push the card layout around. */
.thn-compare-mini-phone--img { padding: 0; overflow: hidden; }
.thn-compare-mini-img {
    display: block;
    width: 100%;
    height: clamp(140px, 22vw, 220px);
    object-fit: cover;
    border-radius: 14px;
}

.thn-compare-arrow {
    align-self: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--thn-grad);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 10px 28px rgba(34, 197, 94, .4);
    flex-shrink: 0;
}
@media (max-width: 991px) {
    .thn-compare-arrow {
        margin: 0 auto;
        transform: rotate(90deg);
    }
}

/* ════════════════════════════════════════════════════════════════
   4. STEPS — horizontal numbered row + arrows
   ════════════════════════════════════════════════════════════════ */
.thn-steps-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 24px;
    align-items: flex-start;
}
@media (max-width: 768px) {
    .thn-steps-row {
        grid-template-columns: 1fr;
        gap: 14px;
        position: relative;
    }
    .thn-steps-row::before {
        content: '';
        position: absolute;
        top: 30px; bottom: 30px; left: 30px;
        width: 2px;
        background: linear-gradient(180deg, rgba(34,197,94,.4), rgba(59,130,246,.2));
        z-index: 0;
    }
}

.thn-step-item {
    text-align: center;
    padding: 0 12px;
}
@media (max-width: 768px) {
    .thn-step-item {
        text-align: left;
        display: grid;
        grid-template-columns: 60px 1fr;
        gap: 14px;
        align-items: start;
        padding: 8px 0;
        position: relative;
        z-index: 1;
    }
}

.thn-step-circle {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--thn-card);
    border: 2px solid rgba(34, 197, 94, .35);
    display: inline-flex; align-items: center; justify-content: center;
    color: #86efac;
    font-weight: 900; font-size: 1.4rem;
    margin: 0 auto 16px;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, .08);
}
@media (max-width: 768px) {
    .thn-step-circle { margin: 0; grid-row: span 2; align-self: start; }
}
.thn-step-title { font-size: 1.05rem; font-weight: 800; color: #fff; margin-bottom: 4px; }
.thn-step-text  { font-size: .9rem; color: var(--thn-muted); line-height: 1.55; }

.thn-step-arrow {
    align-self: center;
    color: rgba(148, 163, 184, .5);
    font-size: 1.5rem;
    margin-top: 14px;
}
@media (max-width: 768px) { .thn-step-arrow { display: none; } }

/* ════════════════════════════════════════════════════════════════
   5. FEATURES
   ════════════════════════════════════════════════════════════════ */
.thn-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 991px) { .thn-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .thn-features-grid { gap: 12px; } }

.thn-feature {
    background: linear-gradient(180deg, #131e33 0%, #0f1828 100%);
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 18px;
    padding: 28px 24px;
    transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .04) inset,
        0 8px 20px -6px rgba(0, 0, 0, .35);
}
.thn-feature:hover {
    border-color: rgba(59, 130, 246, .35);
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .06) inset,
        0 18px 36px -6px rgba(0, 0, 0, .5),
        0 0 50px rgba(59, 130, 246, .15);
}
.thn-feature-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(59, 130, 246, .25), rgba(59, 130, 246, .1));
    color: #93c5fd;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 18px;
    border: 1px solid rgba(59, 130, 246, .25);
    box-shadow: 0 6px 16px rgba(59, 130, 246, .15);
}
.thn-feature-title { font-weight: 800; font-size: 1.05rem; color: #fff; margin-bottom: 8px; letter-spacing: -.01em; }
.thn-feature-text  { font-size: .9rem; color: var(--thn-muted); line-height: 1.6; margin: 0; }

/* ════════════════════════════════════════════════════════════════
   6. TESTIMONIALS
   ════════════════════════════════════════════════════════════════ */
.thn-testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 991px) { .thn-testi-grid { grid-template-columns: 1fr; gap: 14px; } }

.thn-testi {
    background: var(--thn-card);
    border: 1px solid var(--thn-card-line);
    border-radius: var(--thn-radius-md);
    padding: 22px;
}
.thn-testi-quote {
    font-size: .92rem; line-height: 1.6; color: var(--thn-text-2);
    margin: 0 0 16px;
}
.thn-testi-quote::before { content: '“ '; color: var(--thn-accent); font-weight: 900; }
.thn-testi-author { display: flex; align-items: center; gap: 10px; }
.thn-testi-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #3b82f6);
    color: #fff; font-weight: 800; font-size: .82rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.thn-testi-name { font-weight: 800; font-size: .85rem; color: #fff; line-height: 1.2; }
.thn-testi-role { font-size: .76rem; color: var(--thn-muted); margin-top: 2px; }

@media (max-width: 768px) {
    .thn-testi-grid {
        display: flex; gap: 12px;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin: 0 -18px; padding: 0 18px 8px;
    }
    .thn-testi-grid::-webkit-scrollbar { display: none; }
    .thn-testi { flex: 0 0 86%; scroll-snap-align: start; }
}

/* ════════════════════════════════════════════════════════════════
   7. FAQ
   ════════════════════════════════════════════════════════════════ */
.thn-faq {
    display: grid; gap: 14px;
    margin-top: 36px;
}
.thn-faq-item {
    background: linear-gradient(180deg, #131e33 0%, #0f1828 100%);
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .04) inset,
        0 4px 12px -4px rgba(0, 0, 0, .25);
}
.thn-faq-item:hover {
    border-color: rgba(148, 163, 184, .28);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .05) inset,
        0 8px 20px -4px rgba(0, 0, 0, .35);
}
.thn-faq-item.is-open {
    border-color: rgba(34, 197, 94, .35);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .06) inset,
        0 12px 28px -4px rgba(0, 0, 0, .45),
        0 0 40px rgba(34, 197, 94, .12);
}
.thn-faq-q {
    width: 100%;
    padding: 22px 26px;
    background: none; border: none;
    color: #fff;
    font-size: 1.05rem; font-weight: 700;
    text-align: left;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    letter-spacing: -.01em;
}
.thn-faq-q span { line-height: 1.4; }
.thn-faq-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(148, 163, 184, .1);
    color: var(--thn-muted);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .3s ease, color .2s ease, background .2s ease;
    flex-shrink: 0;
    font-size: 1rem;
}
.thn-faq-item.is-open .thn-faq-icon {
    transform: rotate(45deg);
    color: #86efac;
    background: rgba(34, 197, 94, .18);
}
.thn-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.thn-faq-item.is-open .thn-faq-a {
    max-height: 400px;
}
.thn-faq-a p {
    padding: 0 26px 22px;
    margin: 0;
    color: var(--thn-text-2);
    font-size: .98rem; line-height: 1.65;
}

/* ════════════════════════════════════════════════════════════════
   8. PRICING
   ════════════════════════════════════════════════════════════════ */
.thn-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 8px;
}
@media (max-width: 991px) { .thn-pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 8px auto 0; } }

.thn-price {
    background: linear-gradient(180deg, #131e33 0%, #0f1828 100%);
    border: 1.5px solid rgba(148, 163, 184, .14);
    border-radius: 22px;
    padding: 34px 30px;
    display: flex; flex-direction: column;
    transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease;
    position: relative;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .04) inset,
        0 12px 32px -8px rgba(0, 0, 0, .4);
}
.thn-price:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .05) inset,
        0 22px 44px -8px rgba(0, 0, 0, .55);
}

/* Pro card — much stronger differentiation. Gradient border via
   double-background, scale-up, and a blue+green ambient glow
   underneath so the eye lands here first. */
.thn-price.is-highlighted {
    border: 2px solid transparent;
    background:
        linear-gradient(180deg, #14213d 0%, #0c1b3a 100%) padding-box,
        linear-gradient(135deg, #22c55e, #3b82f6) border-box;
    transform: scale(1.04);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .08) inset,
        0 30px 60px -10px rgba(0, 0, 0, .6),
        0 0 80px rgba(59, 130, 246, .25),
        0 0 140px rgba(34, 197, 94, .15);
}
.thn-price.is-highlighted:hover {
    transform: scale(1.05) translateY(-4px);
}
@media (max-width: 991px) { .thn-price.is-highlighted { transform: none; } }

.thn-price-pill {
    position: absolute; top: -14px; left: 50%;
    transform: translateX(-50%);
    background: var(--thn-grad);
    color: #fff;
    font-size: .72rem; font-weight: 800;
    padding: 6px 16px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .08em;
    box-shadow: 0 8px 20px rgba(59, 130, 246, .4);
    white-space: nowrap;
}
.thn-price-name {
    font-weight: 900; font-size: 1.4rem; color: #fff;
    margin-bottom: 10px;
    letter-spacing: -.02em;
}
.thn-price-amount {
    font-size: 2.8rem; font-weight: 900; color: #fff;
    letter-spacing: -.03em;
    line-height: 1;
}
.thn-price-amount small {
    font-size: .88rem; font-weight: 600; color: var(--thn-muted); margin-left: 6px;
}
.thn-price-features {
    list-style: none; padding: 22px 0 0; margin: 18px 0 0;
    border-top: 1px solid rgba(148, 163, 184, .14);
    flex: 1;
    display: grid; gap: 12px;
}
.thn-price-features li {
    font-size: .92rem; color: var(--thn-text-2);
    display: flex; align-items: center; gap: 10px;
    line-height: 1.4;
}
.thn-price-features li i {
    color: var(--thn-accent);
    font-size: 1rem;
    flex-shrink: 0;
    /* Tiny ambient halo so checks feel premium */
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, .35));
}

.thn-price-cta {
    display: block; width: 100%;
    padding: 15px 18px;
    border-radius: 13px;
    text-align: center;
    font-weight: 800; font-size: .98rem;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
    border: 1.5px solid transparent;
    margin-top: 26px;
    letter-spacing: -.005em;
}
.thn-price-cta.outline {
    background: transparent; color: #fff;
    border-color: rgba(148, 163, 184, .35);
}
.thn-price-cta.outline:hover {
    border-color: rgba(148, 163, 184, .65);
    background: rgba(255, 255, 255, .04);
    color: #fff;
}
.thn-price-cta.solid {
    background: var(--thn-grad); color: #fff;
    box-shadow: 0 10px 28px rgba(34, 197, 94, .35);
}
.thn-price-cta.solid:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(34, 197, 94, .45);
    color: #fff;
}
.thn-price-cta.dark {
    background: #0f172a; color: #fff;
    border-color: rgba(148, 163, 184, .25);
}
.thn-price-cta.dark:hover {
    background: #1e293b; color: #fff;
    border-color: rgba(148, 163, 184, .4);
}

/* ════════════════════════════════════════════════════════════════
   9. FINAL CTA
   ════════════════════════════════════════════════════════════════ */
.thn-section--cta { padding-top: 24px; padding-bottom: 60px; }
.thn-finalcta {
    background:
        linear-gradient(135deg, rgba(59, 130, 246, .22), rgba(34, 197, 94, .22)),
        radial-gradient(ellipse at top right, rgba(34, 197, 94, .25), transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(59, 130, 246, .2), transparent 50%);
    border: 1px solid rgba(59, 130, 246, .4);
    border-radius: var(--thn-radius-xl);
    padding: 32px 36px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 24px;
    align-items: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3), 0 0 100px rgba(59, 130, 246, .15);
}
@media (max-width: 768px) {
    .thn-finalcta {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 28px 22px;
        gap: 18px;
    }
}
.thn-finalcta-text  { min-width: 0; }
.thn-finalcta-title { font-weight: 900; font-size: 1.6rem; color: #fff; margin: 0 0 6px; letter-spacing: -.02em; }
.thn-finalcta-sub   { font-size: 1rem; color: var(--thn-text-2); margin: 0; }
.thn-finalcta-gift {
    width: 64px; height: 64px;
    background: var(--thn-grad);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.8rem;
    box-shadow: 0 12px 28px rgba(34, 197, 94, .35);
    flex-shrink: 0;
}
@media (max-width: 768px) { .thn-finalcta-gift { margin: 0 auto; } }
.thn-finalcta-btn { white-space: nowrap; }
@media (max-width: 480px) { .thn-finalcta-btn { width: 100%; } }

/* ════════════════════════════════════════════════════════════════
   FOOTER (4-column)
   ════════════════════════════════════════════════════════════════ */
.thn-footer {
    /* Hairline gradient divider at the top + a darker tint
       for the footer band so the page doesn't end abruptly. */
    border-top: 1px solid transparent;
    padding: 72px 0 36px;
    background:
        linear-gradient(90deg, transparent, rgba(34,197,94,.35), rgba(59,130,246,.35), transparent) top / 100% 1px no-repeat,
        linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .35));
    margin-top: 30px;
}
.thn-footer-grid {
    /* 5 columns now: brand + 4 link sections (Product /
       Company / Legal / Help). Keeps the brand block
       prominent at 2fr while the 4 link cols share equally. */
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 44px;
}
@media (max-width: 1199px) {
    .thn-footer-grid { gap: 32px; }
}
@media (max-width: 991px) {
    /* Tablet: brand on top full-width, links in 2x2 grid below. */
    .thn-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .thn-footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 480px) {
    /* Phone: stack everything single-column. */
    .thn-footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
.thn-footer-brand { max-width: 380px; }
.thn-footer-logo  { display: inline-block; margin-bottom: 16px; }
.thn-footer-tagline {
    color: var(--thn-muted);
    font-size: .94rem; line-height: 1.65;
    margin: 0 0 22px;
}
.thn-footer-socials { display: flex; gap: 12px; }
.thn-footer-socials a {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    border: 1px solid rgba(148, 163, 184, .18);
    color: var(--thn-text-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}
.thn-footer-socials a:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, .25), rgba(59, 130, 246, .25));
    border-color: rgba(34, 197, 94, .4);
    color: #fff;
    transform: translateY(-2px);
}

.thn-footer-col { display: flex; flex-direction: column; gap: 10px; }
.thn-footer-h {
    font-weight: 800; font-size: .82rem;
    color: #fff;
    text-transform: uppercase; letter-spacing: .1em;
    margin-bottom: 12px;
}
.thn-footer-col a {
    color: var(--thn-text-2);
    font-size: .94rem;
    text-decoration: none;
    transition: color .15s ease, transform .15s ease;
    display: inline-block;
}
.thn-footer-col a:hover {
    color: #86efac;
    transform: translateX(2px);
}

.thn-footer-bottom {
    border-top: 1px solid rgba(148, 163, 184, .12);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    color: var(--thn-muted);
    font-size: .85rem;
    flex-wrap: wrap;
}
@media (max-width: 480px) {
    .thn-footer-bottom { justify-content: center; text-align: center; }
}

/* The base layout's white footer is rendered by layouts.base
   AFTER our custom .thn-footer. Hide it on this page only so
   we don't get a double footer. */
body.tutram-home-new .footer { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   VIDEO MODAL — full-viewport overlay with iframe stage
   ════════════════════════════════════════════════════════════════ */
.thn-video-modal {
    position: fixed; inset: 0;
    z-index: 1080;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: thnFadeIn .15s ease both;
}
.thn-video-modal[hidden] { display: none; }
@keyframes thnFadeIn { from { opacity: 0; } to { opacity: 1; } }
.thn-video-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(2, 6, 14, .8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    cursor: pointer;
}
.thn-video-modal-stage {
    position: relative;
    width: 100%;
    max-width: 960px;
}
.thn-video-modal-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    border: 1px solid rgba(148, 163, 184, .2);
}
.thn-video-modal-frame iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
    display: block;
}
.thn-video-modal-close {
    position: absolute;
    top: -52px; right: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.thn-video-modal-close:hover { background: rgba(255, 255, 255, .25); transform: scale(1.05); }
@media (max-width: 640px) {
    .thn-video-modal { padding: 16px; }
    .thn-video-modal-close { top: -46px; width: 36px; height: 36px; font-size: .95rem; }
}