/*
Theme Name: Taximodule
Theme URI: https://taximodule.nl
Author: Taximodule
Author URI: https://taximodule.nl
Description: Een modern, conversiegericht WordPress-thema voor Taximodule — het SaaS-ritboekingssysteem voor taxibedrijven. Ontworpen met snelheid, helderheid en vertrouwen in gedachten.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taximodule
Tags: saas, business, landing-page, custom-colors, custom-logo, custom-menu, responsive-layout, translation-ready
*/

/* ============================================================
   Taximodule — Base Styles
   Colour system:
     --tm-primary: #FFC600 (taxi yellow)
     --tm-ink:     #0B0F19 (near-black)
     --tm-muted:   #5A6275
     --tm-bg:      #FFFFFF
     --tm-soft:    #F6F7FB
     --tm-accent:  #1B2B5B (deep blue)
   ============================================================ */

:root {
    /* Primary brand colour — matches the app's action-blue CTA. */
    --tm-primary: #3B82F6;
    --tm-primary-600: #2563EB;
    --tm-primary-700: #1D4ED8;
    /* Legacy yellow kept for decorative accents (hero glow, testimonial quote-marks). */
    --tm-accent-yellow: #FFC600;
    --tm-ink: #0B0F19;
    --tm-muted: #5A6275;
    --tm-bg: #FFFFFF;
    --tm-soft: #F5F6F8;
    --tm-accent: #1B2B5B;
    --tm-border: #E5E7EF;
    --tm-success: #15A34A;
    --tm-danger: #DC2626;
    --tm-radius: 14px;
    --tm-radius-sm: 8px;
    --tm-radius-pill: 999px;
    --tm-shadow-sm: 0 1px 2px rgba(11, 15, 25, 0.06), 0 1px 3px rgba(11, 15, 25, 0.04);
    --tm-shadow-md: 0 10px 30px rgba(11, 15, 25, 0.08);
    --tm-shadow-lg: 0 24px 60px rgba(11, 15, 25, 0.12);
    --tm-font: "Inter", "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;
    --tm-container: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

a { color: var(--tm-accent); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--tm-primary-600); }

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 {
    font-family: var(--tm-font);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--tm-ink);
    margin: 0 0 .6em;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.35rem; font-weight: 700; }
h4 { font-size: 1.1rem; font-weight: 700; }

p { margin: 0 0 1em; color: var(--tm-ink); }

.tm-container {
    max-width: var(--tm-container);
    margin: 0 auto;
    padding: 0 24px;
}

.tm-muted { color: var(--tm-muted); }

/* ---------- Buttons ---------- */
.tm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: var(--tm-radius-sm);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    white-space: nowrap;
}
.tm-btn:active { transform: translateY(1px); }
.tm-btn-primary { background: var(--tm-primary); color: #fff; }
.tm-btn-primary:hover { background: var(--tm-primary-600); color: #fff; }
.tm-btn-dark { background: var(--tm-ink); color: #fff; }
.tm-btn-dark:hover { background: var(--tm-accent); color: #fff; }
.tm-btn-ghost { background: transparent; color: var(--tm-ink); border-color: var(--tm-border); }
.tm-btn-ghost:hover { background: var(--tm-soft); color: var(--tm-ink); }
.tm-btn-lg { padding: 16px 28px; font-size: 16px; }

/* ---------- Header (matches app.taximodule.nl) ----------
   Pure white background, no border, no shadow.
   Large logo left. Language pill + login link right.
   ---------------------------------------------------------- */
.tm-site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #FFFFFF;
}
.tm-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0;
    min-height: 96px;
}

/* Logo: image only — matches the app header. */
.tm-logo a {
    display: inline-flex;
    align-items: center;
    color: var(--tm-ink);
}
.tm-logo img {
    height: 64px;
    width: auto;
    display: block;
}
.tm-logo .tm-site-name {
    /* Visually hidden, still exposed to screen readers. */
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px; height: 1px;
    overflow: hidden;
}

/* Centred nav — only shown on marketing pages, and collapses on mobile. */
.tm-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}
.tm-nav ul {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.tm-nav a {
    color: var(--tm-ink);
    font-weight: 500;
    font-size: 14px;
    padding: 8px 0;
    transition: color .15s ease;
}
.tm-nav a:hover { color: var(--tm-primary); }
.tm-nav .current-menu-item > a,
.tm-nav .current_page_item > a { color: var(--tm-primary); font-weight: 600; }

/* Right side: language pill + login link + primary CTA. */
.tm-header-cta {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* Language switcher — styled as a pill with a chevron, matches the app. */
.tm-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: var(--tm-radius-pill);
    background: #F2F3F6;
    color: var(--tm-ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 0;
    transition: background .15s ease;
}
.tm-lang:hover { background: #E8EAEF; color: var(--tm-ink); }
.tm-lang svg { width: 12px; height: 12px; }

/* Plain text login link. */
.tm-header-cta .tm-btn-link {
    color: var(--tm-ink);
    font-weight: 500;
    font-size: 15px;
    padding: 9px 4px;
    background: transparent;
    border: 0;
}
.tm-header-cta .tm-btn-link:hover { color: var(--tm-primary); }

.tm-header-cta .tm-btn {
    padding: 10px 18px;
    font-size: 14px;
    border-radius: 8px;
}

.tm-menu-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-sm);
    padding: 8px 10px;
    cursor: pointer;
}
.tm-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--tm-ink);
    margin: 4px 0;
    transition: transform .2s ease;
}

/* ---------- Hero ---------- */
.tm-hero {
    position: relative;
    overflow: hidden;
    padding: 80px 0 72px;
    background:
        radial-gradient(1200px 400px at 10% -10%, rgba(255, 198, 0, .18), transparent 60%),
        radial-gradient(800px 400px at 100% 0%, rgba(27, 43, 91, .08), transparent 60%),
        linear-gradient(180deg, #fff 0%, var(--tm-soft) 100%);
}
.tm-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: center;
}
.tm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tm-accent);
    background: #fff;
    border: 1px solid var(--tm-border);
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: var(--tm-shadow-sm);
}
.tm-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tm-success); }

.tm-hero h1 { margin-top: 18px; }
.tm-hero .tm-lead { font-size: 1.125rem; color: var(--tm-muted); max-width: 54ch; }
.tm-hero-actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.tm-hero-meta { display: flex; gap: 18px; margin-top: 22px; color: var(--tm-muted); font-size: 14px; flex-wrap: wrap; }
.tm-hero-meta span { display: inline-flex; gap: 6px; align-items: center; }
.tm-check { color: var(--tm-success); font-weight: 700; }

.tm-hero-visual {
    position: relative;
    border-radius: var(--tm-radius);
    padding: 22px;
    background: #fff;
    border: 1px solid var(--tm-border);
    box-shadow: var(--tm-shadow-lg);
}
.tm-hero-visual::before {
    content: "";
    position: absolute;
    inset: auto -24px -24px auto;
    width: 160px; height: 160px;
    background: radial-gradient(circle, var(--tm-primary) 0%, transparent 70%);
    filter: blur(10px);
    opacity: .5;
    z-index: -1;
}
.tm-mock-toolbar { display: flex; gap: 6px; margin-bottom: 14px; }
.tm-mock-toolbar span { width: 10px; height: 10px; border-radius: 50%; background: #E5E7EF; }
.tm-mock-toolbar span:first-child { background: #FF605C; }
.tm-mock-toolbar span:nth-child(2) { background: #FFBD44; }
.tm-mock-toolbar span:nth-child(3) { background: #00CA4E; }
.tm-mock-row { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--tm-border); border-radius: 10px; margin-bottom: 10px; align-items: center; }
.tm-mock-row .pill { background: var(--tm-soft); border-radius: 6px; height: 12px; flex: 1; }
.tm-mock-row .pill.w-2 { flex: 0 0 90px; }
.tm-mock-row .status { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: #E8F8EF; color: var(--tm-success); font-weight: 600; }
.tm-mock-row .status.pending { background: #FFF7D6; color: #8A6A00; }

/* ---------- Trust bar ---------- */
.tm-trust { padding: 28px 0; border-top: 1px solid var(--tm-border); border-bottom: 1px solid var(--tm-border); background: #fff; }
.tm-trust-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.tm-trust-label { font-size: 13px; color: var(--tm-muted); letter-spacing: .08em; text-transform: uppercase; }
.tm-trust-items { display: flex; gap: 32px; flex-wrap: wrap; color: var(--tm-muted); font-weight: 600; }

/* ---------- Sections ---------- */
.tm-section { padding: 88px 0; }
.tm-section.alt { background: var(--tm-soft); }
.tm-section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.tm-section-head .tm-eyebrow { margin-bottom: 12px; }
.tm-section-head p { color: var(--tm-muted); font-size: 1.075rem; }

/* ---------- Feature grid ---------- */
.tm-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tm-feature {
    background: #fff;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    padding: 26px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tm-feature:hover { transform: translateY(-3px); box-shadow: var(--tm-shadow-md); border-color: #D8DCE8; }
.tm-feature-icon {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: #FFF7D6;
    color: var(--tm-accent);
    margin-bottom: 16px;
}
.tm-feature h3 { margin-bottom: 8px; }
.tm-feature p { color: var(--tm-muted); margin: 0; }

/* ---------- How it works ---------- */
.tm-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.tm-step {
    background: #fff;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    padding: 26px;
    position: relative;
}
.tm-step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    font-weight: 800;
    color: var(--tm-primary-600);
    font-size: 14px;
    letter-spacing: .08em;
    display: block;
    margin-bottom: 10px;
}
.tm-step h4 { margin-bottom: 8px; }
.tm-step p { margin: 0; color: var(--tm-muted); font-size: .95rem; }

/* ---------- Pricing ---------- */
.tm-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.tm-plan {
    background: #fff;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    padding: 32px 28px;
    display: flex; flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.tm-plan:hover { transform: translateY(-3px); box-shadow: var(--tm-shadow-md); }
.tm-plan.featured {
    border: 2px solid var(--tm-ink);
    background: var(--tm-ink);
    color: #fff;
    box-shadow: var(--tm-shadow-lg);
    position: relative;
}
.tm-plan.featured h3, .tm-plan.featured .tm-plan-price { color: #fff; }
.tm-plan.featured .tm-plan-desc { color: #CBD1DF; }
.tm-plan.featured .tm-plan-features li { color: #E5E7EF; }
.tm-plan.featured .tm-plan-features li::before { color: var(--tm-primary); }
.tm-plan.featured .tm-btn-ghost { border-color: rgba(255,255,255,.2); color: #fff; }
.tm-plan.featured .tm-btn-ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
.tm-plan-badge {
    position: absolute;
    top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--tm-primary);
    color: var(--tm-ink);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
}
.tm-plan h3 { margin-bottom: 6px; }
.tm-plan-desc { color: var(--tm-muted); font-size: .95rem; min-height: 48px; }
.tm-plan-price {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 12px 0 4px;
    line-height: 1;
    letter-spacing: -0.02em;
}
.tm-plan-price sup { font-size: 1.1rem; font-weight: 600; color: var(--tm-muted); margin-right: 4px; }
.tm-plan-period { font-size: .9rem; color: var(--tm-muted); margin-bottom: 22px; }
.tm-plan-features { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; }
.tm-plan-features li {
    padding-left: 26px;
    position: relative;
    color: var(--tm-ink);
    font-size: .95rem;
}
.tm-plan-features li::before {
    content: "✓";
    position: absolute;
    left: 0; top: 0;
    color: var(--tm-success);
    font-weight: 700;
}
.tm-plan .tm-btn { margin-top: auto; width: 100%; }

.tm-pricing-note { text-align: center; margin-top: 22px; color: var(--tm-muted); font-size: .9rem; }

/* ---------- Testimonials ---------- */
.tm-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tm-testimonial {
    background: #fff;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    padding: 28px;
}
.tm-testimonial p { font-size: 1rem; color: var(--tm-ink); }
.tm-testimonial .tm-quote-mark { font-size: 2.5rem; color: var(--tm-primary); line-height: 0; display: block; margin-bottom: 10px; font-family: Georgia, serif; }
.tm-testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.tm-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--tm-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.tm-testimonial-author strong { display: block; font-size: .95rem; }
.tm-testimonial-author span { font-size: .85rem; color: var(--tm-muted); }

/* ---------- FAQ ---------- */
.tm-faq { max-width: 820px; margin: 0 auto; }
.tm-faq details {
    background: #fff;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-sm);
    padding: 18px 22px;
    margin-bottom: 12px;
    transition: border-color .2s ease;
}
.tm-faq details[open] { border-color: var(--tm-accent); }
.tm-faq summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.tm-faq summary::-webkit-details-marker { display: none; }
.tm-faq summary::after {
    content: "+";
    font-size: 1.5rem;
    color: var(--tm-muted);
    transition: transform .2s ease;
    line-height: 1;
}
.tm-faq details[open] summary::after { content: "−"; }
.tm-faq details p { margin: 12px 0 0; color: var(--tm-muted); }

/* ---------- CTA band ---------- */
.tm-cta-band {
    background: linear-gradient(135deg, var(--tm-ink) 0%, var(--tm-accent) 100%);
    color: #fff;
    border-radius: var(--tm-radius);
    padding: 56px 48px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.tm-cta-band::before {
    content: "";
    position: absolute;
    top: -80px; right: -80px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, var(--tm-primary) 0%, transparent 70%);
    opacity: .3;
}
.tm-cta-band h2 { color: #fff; margin: 0 0 8px; }
.tm-cta-band p { color: #CBD1DF; margin: 0; font-size: 1.05rem; }
.tm-cta-band-actions { display: flex; gap: 12px; justify-content: flex-end; position: relative; z-index: 1; flex-wrap: wrap; }

/* ---------- Footer ----------
   Light, airy, matches the app's clean aesthetic. No dark slab.
   Opens with a subscribe-CTA strip, then brand/links, then legal.
   ------------------------------------------------------------ */
.tm-site-footer {
    background: #FFFFFF;
    color: var(--tm-muted);
    padding: 0 0 32px;
    border-top: 1px solid var(--tm-border);
}

/* Footer CTA strip — sits flush at the top of the footer. */
.tm-footer-cta {
    background: var(--tm-soft);
    border-bottom: 1px solid var(--tm-border);
    padding: 36px 0;
}
.tm-footer-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.tm-footer-cta-copy h3 {
    margin: 0 0 4px;
    font-size: 1.35rem;
    color: var(--tm-ink);
}
.tm-footer-cta-copy p {
    margin: 0;
    color: var(--tm-muted);
    font-size: .95rem;
}
.tm-footer-cta-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tm-footer-main {
    padding-top: 72px;
}
.tm-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 56px;
}
.tm-footer-brand {
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
}
.tm-footer-brand img { height: 48px; width: auto; display: block; }
.tm-footer-brand .tm-site-name {
    position: absolute !important;
    clip: rect(1px,1px,1px,1px);
    width: 1px; height: 1px;
    overflow: hidden;
}
.tm-footer-about p {
    color: var(--tm-muted);
    font-size: .95rem;
    margin: 0;
    max-width: 36ch;
    line-height: 1.6;
}
.tm-footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}
.tm-footer-socials a {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tm-soft);
    color: var(--tm-ink);
    transition: background .15s ease, color .15s ease;
}
.tm-footer-socials a:hover { background: var(--tm-primary); color: #fff; }
.tm-footer-socials svg { width: 16px; height: 16px; }

.tm-footer h4 {
    color: var(--tm-ink);
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.tm-site-footer ul,
.tm-site-footer ol {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    padding: 0 !important;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tm-site-footer ul li,
.tm-site-footer ol li {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin: 0;
    background: none;
}
.tm-site-footer ul li::before,
.tm-site-footer ol li::before { content: none !important; }
.tm-site-footer ul li::marker,
.tm-site-footer ol li::marker { content: "" !important; }
.tm-footer a {
    color: var(--tm-muted);
    font-size: .95rem;
    transition: color .15s ease;
}
.tm-footer a:hover { color: var(--tm-ink); }

.tm-footer-bottom {
    border-top: 1px solid var(--tm-border);
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: .85rem;
    color: var(--tm-muted);
    flex-wrap: wrap;
}
.tm-footer-legal {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.tm-footer-legal a { color: var(--tm-muted); }
.tm-footer-legal a:hover { color: var(--tm-ink); }

/* Language switcher lives here in the footer bar. */
.tm-footer-legal .tm-lang {
    padding: 7px 12px;
    font-size: 13px;
    background: var(--tm-soft);
    color: var(--tm-ink);
}
.tm-footer-legal .tm-lang:hover { background: #E8EAEF; }

/* ---------- Content pages ---------- */
.tm-page-header {
    background: var(--tm-soft);
    padding: 72px 0 56px;
    text-align: center;
    border-bottom: 1px solid var(--tm-border);
}
.tm-page-header h1 { margin-bottom: 10px; }
.tm-page-header p { color: var(--tm-muted); max-width: 640px; margin: 0 auto; font-size: 1.075rem; }

.tm-content {
    max-width: 780px;
    margin: 0 auto;
    padding: 64px 24px;
    font-size: 1.025rem;
}
.tm-content h2 { margin-top: 2em; }
.tm-content h3 { margin-top: 1.6em; }
.tm-content ul, .tm-content ol { padding-left: 1.4em; }
.tm-content blockquote {
    border-left: 4px solid var(--tm-primary);
    background: var(--tm-soft);
    padding: 16px 22px;
    margin: 1.4em 0;
    border-radius: 0 var(--tm-radius-sm) var(--tm-radius-sm) 0;
    font-style: italic;
}

/* ---------- Contact form ---------- */
.tm-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 64px 24px;
}
.tm-contact-info h2 { margin-bottom: 12px; }
.tm-contact-info p { color: var(--tm-muted); }
.tm-contact-info dl { margin: 24px 0 0; display: flex; flex-direction: column; gap: 14px; }
.tm-contact-info dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tm-muted); margin-bottom: 2px; }
.tm-contact-info dd { margin: 0; font-weight: 600; color: var(--tm-ink); }
.tm-contact-info dd a { color: var(--tm-ink); }
.tm-contact-info dd a:hover { color: var(--tm-accent); }

.tm-form {
    background: #fff;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    padding: 32px;
    box-shadow: var(--tm-shadow-sm);
}
.tm-field { margin-bottom: 18px; }
.tm-field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--tm-ink); }
.tm-field input, .tm-field select, .tm-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-sm);
    font: inherit;
    color: var(--tm-ink);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tm-field input:focus, .tm-field select:focus, .tm-field textarea:focus {
    outline: none;
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px rgba(27, 43, 91, .15);
}
.tm-field textarea { min-height: 130px; resize: vertical; }
.tm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tm-form .tm-btn { width: 100%; }
.tm-form-note { font-size: .82rem; color: var(--tm-muted); margin: 10px 0 0; }

/* ---------- Full-width page content ---------- */
.tm-fullwidth { padding: 0; }
.tm-fullwidth > .tm-section:first-child,
.tm-fullwidth > .tm-hero:first-child { margin-top: 0; }

/* ---------- Utilities ---------- */
.tm-hide { display: none !important; }
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .tm-hero-grid { grid-template-columns: 1fr; }
    .tm-hero-visual { order: 2; }
    .tm-features, .tm-pricing, .tm-testimonials { grid-template-columns: 1fr 1fr; }
    .tm-steps { grid-template-columns: 1fr 1fr; }
    .tm-footer-grid { grid-template-columns: 1fr 1fr; }
    .tm-cta-band { grid-template-columns: 1fr; text-align: center; padding: 40px 28px; }
    .tm-cta-band-actions { justify-content: center; }
    .tm-contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .tm-section { padding: 64px 0; }
    .tm-hero { padding: 56px 0 48px; }
    .tm-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--tm-border); padding: 16px 24px; }
    .tm-nav.is-open { display: flex; justify-content: flex-start; }
    .tm-nav ul { flex-direction: column; gap: 12px; align-items: flex-start; }
    .tm-menu-toggle { display: inline-block; }
    .tm-header-cta .tm-lang { display: none; }
    .tm-header-cta .tm-btn-link { display: none; }
    .tm-header-inner { min-height: 72px; padding: 14px 0; }
    .tm-logo img { height: 44px; }
    .tm-footer-cta-inner { flex-direction: column; align-items: flex-start; text-align: left; }
    .tm-footer-bottom { flex-direction: column; align-items: flex-start; }
    .tm-features, .tm-pricing, .tm-testimonials, .tm-steps { grid-template-columns: 1fr; }
    .tm-footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .tm-row { grid-template-columns: 1fr; }
    .tm-footer-bottom { flex-direction: column; align-items: flex-start; }
}