/* ==========================================================================
   DM Web — Stylesheet
   ========================================================================== */

/* --- Variables --- */
:root {
  --orange: #FC581F;
  --orange-dark: #E04A15;
  --orange-soft: rgba(252,88,31,0.08);
  --orange-glow: rgba(252,88,31,0.2);
  --ink: #1E1E1E;
  --ink-light: #2D2D2D;
  --text: #1E1E1E;
  --text-body: #3D3D3D;
  --text-muted: #6B6B6B;
  --text-dim: #999;
  --bg: #FFFFFF;
  --bg-warm: #FAF9F7;
  --bg-dark: #131313;
  --bg-card: #FFFFFF;
  --border: #E2E2E2;
  --border-light: #F0EFED;
  --green: #16A34A;
  --green-bg: rgba(22,163,74,0.06);
  --blue: #2563EB;
  --blue-bg: rgba(37,99,235,0.06);
  --purple: #7C3AED;
  --purple-bg: rgba(124,58,237,0.06);
  --radius: 8px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(30,30,30,0.04);
  --shadow: 0 1px 3px rgba(30,30,30,0.06), 0 4px 16px rgba(30,30,30,0.04);
  --shadow-lg: 0 4px 12px rgba(30,30,30,0.06), 0 16px 40px rgba(30,30,30,0.08);
  --font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --max-w: 1080px;
}

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--text-body);
  background: var(--bg);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.font-sora { font-family: 'Sora', -apple-system, sans-serif; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* --- Animations --- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-section { opacity: 1; }
.fade-section.will-animate { opacity: 0; transform: translateY(24px); transition: all 0.7s cubic-bezier(0.16,1,0.3,1); }
.fade-section.visible { opacity: 1; transform: translateY(0); }

/* --- Navbar --- */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 20px 32px; transition: all 0.35s cubic-bezier(0.16,1,0.3,1); }
.navbar.scrolled { padding: 14px 32px; background: rgba(255,255,255,0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-light); }
.nav-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; }
.nav-logo-img { height: 26px; width: auto; display: block; transition: filter 0.3s ease; }
.navbar.scrolled .nav-logo-img { filter: brightness(0) opacity(.8); }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-link { font-size: 13.5px; font-weight: 500; color: var(--text-muted); transition: color 0.2s; }
.nav-link:hover { color: var(--text); }
.nav-cta { display: inline-flex; align-items: center; gap: 6px; padding: 11px 24px; border-radius: 7px; background: var(--orange); color: #fff; font-size: 13.5px; font-weight: 600; transition: all 0.25s cubic-bezier(0.16,1,0.3,1); box-shadow: 0 2px 8px var(--orange-glow); }
.nav-cta:hover { background: var(--orange-dark); transform: translateY(-1px); box-shadow: 0 4px 16px var(--orange-glow); }
.nav-cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* --- Home overrides --- */
.page-home { --max-w: 1120px; --orange-glow: rgba(252,88,31,0.25); }
.page-home .navbar { padding: 16px 0; }
.page-home .navbar.scrolled { padding: 10px 0; background: rgba(254,254,254,0.92); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border-bottom: 1px solid rgba(232,232,232,0.6); }
.page-home .nav-inner { padding: 0 24px; }
.page-home .nav-logo-img { height: 32px; }
.page-home .nav-cta { font-weight: 700; }

/* --- Hero (centered, home) --- */
.hero--centered { padding: 170px 24px 100px; text-align: center; position: relative; background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg-warm) 70%, var(--bg) 100%); overflow: hidden; }
.hero--centered::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(30,30,30,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(30,30,30,0.02) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black, transparent); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black, transparent); }
.hero-glow { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 800px; height: 500px; border-radius: 50%; background: radial-gradient(ellipse, rgba(252,88,31,0.05) 0%, transparent 70%); pointer-events: none; }
.hero-content { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.hero-pretitle { font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 24px; animation: fadeUp 0.6s ease both; }
.hero--centered h1 { font-size: clamp(30px, 4.8vw, 48px); font-weight: 800; line-height: 1.18; letter-spacing: -0.035em; color: var(--ink); margin-bottom: 20px; animation: fadeUp 0.6s ease 0.1s both; }
.hero-highlight { background: var(--orange); color: #fff; padding: 2px 14px; border-radius: 6px; display: inline-block; box-shadow: 0 4px 20px var(--orange-glow); }
.hero--centered .hero-sub { font-size: 16px; color: var(--text-body); line-height: 1.75; max-width: 520px; margin: 0 auto; animation: fadeUp 0.6s ease 0.2s both; }
.hero-since { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; font-size: 12px; font-weight: 600; color: var(--text-dim); animation: fadeUp 0.6s ease 0.3s both; }
.hero-since-line { width: 24px; height: 1px; background: var(--border); }
.hero-scroll-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 9px 20px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-card); transition: all 0.25s ease; animation: fadeUp 0.6s ease 0.4s both; box-shadow: var(--shadow-sm); }
.hero-scroll-cta:hover { color: var(--orange); border-color: var(--orange); box-shadow: var(--shadow); }
.hero-scroll-cta svg { transition: transform 0.2s; }
.hero-scroll-cta:hover svg { transform: translateY(2px); }

/* --- Hero (grid, service pages) --- */
.hero--grid { padding: 150px 24px 72px; background: var(--bg-warm); position: relative; overflow: hidden; }
.hero--grid::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
.hero-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: center; position: relative; z-index: 1; }
.hero-text { max-width: 580px; }
.hero--grid .hero-pretitle { font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 24px; animation: fadeUp 0.6s ease both; }
.hero-headline { font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; color: var(--text); letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 12px; animation: fadeUp 0.6s ease 0.1s both; }
.hero--grid h1 { font-size: clamp(17px, 2vw, 21px); font-weight: 600; color: var(--text-muted); letter-spacing: -0.01em; line-height: 1.4; margin-bottom: 18px; animation: fadeUp 0.6s ease 0.15s both; }
.hero-sub { font-size: 16px; color: var(--text-muted); line-height: 1.75; margin-bottom: 28px; animation: fadeUp 0.6s ease 0.2s both; }
.hero-proof { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; animation: fadeUp 0.6s ease 0.3s both; }
.hero-proof-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); font-weight: 500; }
.hero-proof-item svg { width: 16px; height: 16px; stroke: var(--green); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* --- Hero Form --- */
.hero-form-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow-lg); animation: fadeUp 0.6s ease 0.25s both; }
.hero-form-card h3 { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.hero-form-card .form-sub { font-size: 13px; color: var(--text-dim); margin-bottom: 20px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.06em; }
.form-group input,
.form-group select,
.form-group textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 7px; font-family: inherit; font-size: 14px; color: var(--text); background: var(--bg); transition: border-color 0.2s, box-shadow 0.2s; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(252,88,31,0.08); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-dim); }
.form-group textarea { resize: vertical; min-height: 70px; }
.form-group select { cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.btn-submit { width: 100%; padding: 13px; border: none; border-radius: 7px; background: var(--orange); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.25s; box-shadow: 0 2px 8px var(--orange-glow); margin-top: 4px; }
.btn-submit:hover { background: var(--orange-dark); transform: translateY(-1px); box-shadow: 0 4px 16px var(--orange-glow); }
.form-trust { font-size: 11.5px; color: var(--text-dim); text-align: center; margin-top: 12px; line-height: 1.5; }

/* --- Section Utilities --- */
.section-label { font-size: 11.5px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px; }
.section-title { font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: var(--text); letter-spacing: -0.03em; line-height: 1.2; }
.section-desc { font-size: 15.5px; color: var(--text-muted); line-height: 1.7; max-width: 540px; margin: 14px auto 0; }
.section-label, .section-title, .section-desc { text-align: center; }
.section-desc.center { text-align: center; margin: 12px auto 0; }

/* --- Trust Bar (home) --- */
.trust-bar { padding: 32px 24px; background: var(--bg); border-bottom: 1px solid var(--border-light); }
.trust-inner { max-width: var(--max-w); margin: 0 auto; text-align: center; }
.trust-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 24px; }
.trust-logos { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }
.trust-logo { height: 28px; width: auto; filter: grayscale(1) opacity(0.4); transition: filter 0.3s; }
.trust-logo:hover { filter: grayscale(0) opacity(1); }
.trust-logo.inverted { filter: grayscale(1) opacity(0.4) brightness(0); }
.trust-logo.inverted:hover { filter: grayscale(0) opacity(1) brightness(0); }
.trust-logo.tall { height: 36px; }
.trust-logo-text { font-size: 15px; font-weight: 800; color: var(--text-dim); letter-spacing: -0.01em; opacity: 0.4; transition: opacity 0.3s; }
.trust-logo-text:hover { opacity: 1; }

/* --- Pillars (home) --- */
.pillars { padding: 80px 24px 100px; background: var(--bg); }
.pillars-inner { max-width: var(--max-w); margin: 0 auto; }
.pillars-header { text-align: center; margin-bottom: 56px; }
.pillars-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pillar { border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 40px 36px; background: var(--bg-card); box-shadow: var(--shadow-sm); transition: all 0.4s cubic-bezier(0.16,1,0.3,1); }
.pillar:hover { box-shadow: var(--shadow); }
.pillar-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.pillar-icon svg { width: 22px; height: 22px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pillar-icon.dev { background: var(--orange-soft); }
.pillar-icon.dev svg { stroke: var(--orange); }
.pillar-icon.vis { background: var(--green-bg); }
.pillar-icon.vis svg { stroke: var(--green); }
.pillar h3 { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; margin-bottom: 10px; }
.pillar > p { font-size: 14.5px; color: var(--text-muted); line-height: 1.7; margin-bottom: 24px; }
.pillar-items { list-style: none; margin-bottom: 28px; }
.pillar-items li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--text-body); line-height: 1.5; }
.pillar-items li svg { width: 16px; height: 16px; stroke: var(--text-dim); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-top: 2px; }
.pillar-links { border-top: 1px solid var(--border-light); padding-top: 24px; }
.pillar-link { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border-light); transition: all 0.2s; }
.pillar-link:last-child { border-bottom: none; }
.pillar-link:hover { padding-left: 8px; }
.pillar-link-text { font-size: 14px; font-weight: 600; color: var(--text); }
.pillar-link-arrow { width: 16px; height: 16px; stroke: var(--text-dim); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: all 0.2s; }
.pillar-link:hover .pillar-link-arrow { stroke: var(--orange); transform: translateX(4px); }
.pillar-cta { display: inline-flex; align-items: center; gap: 6px; padding: 12px 24px; border-radius: 7px; font-size: 13.5px; font-weight: 700; transition: all 0.25s; margin-top: 4px; }
.pillar-cta.primary { background: var(--orange); color: #fff; box-shadow: 0 2px 8px var(--orange-glow); }
.pillar-cta.primary:hover { background: var(--orange-dark); transform: translateY(-1px); }
.pillar-cta.secondary { background: var(--bg-warm); color: var(--text); border: 1px solid var(--border); }
.pillar-cta.secondary:hover { border-color: var(--orange); color: var(--orange); }
.pillar-cta svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* --- Products (home) --- */
.products { padding: 80px 24px 100px; background: var(--bg-warm); }
.products-inner { max-width: var(--max-w); margin: 0 auto; }
.products-header { text-align: center; margin-bottom: 56px; }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 28px 24px; box-shadow: var(--shadow-sm); transition: all 0.4s cubic-bezier(0.16,1,0.3,1); display: flex; flex-direction: column; }
.product-card:hover { border-color: var(--border); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.product-logo { height: 28px; width: auto; margin-bottom: 16px; }
.product-logo-text { font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 16px; letter-spacing: -0.02em; }
.product-logo-text span { color: var(--orange); }
.product-icon-fallback { width: 40px; height: 40px; border-radius: 8px; background: var(--orange-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.product-icon-fallback svg { width: 18px; height: 18px; stroke: var(--orange); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.product-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.product-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 4px; background: var(--green-bg); color: var(--green); }
.product-desc { font-size: 14px; color: var(--text-muted); line-height: 1.7; flex: 1; }
.product-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--orange); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-light); transition: gap 0.25s; }
.product-card:hover .product-link { gap: 10px; }
.product-link svg { stroke: var(--orange); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* --- About (home) --- */
.about { padding: 80px 24px; background: var(--bg); }
.about-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.about-text h2 { font-size: clamp(22px, 2.8vw, 30px); font-weight: 800; color: var(--text); letter-spacing: -0.025em; line-height: 1.25; margin-bottom: 16px; }
.about-text p { font-size: 15px; color: var(--text-muted); line-height: 1.75; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.about-stat { text-align: center; padding: 24px 16px; background: var(--bg-warm); border: 1px solid var(--border-light); border-radius: var(--radius-lg); }
.about-stat-num { font-size: 32px; font-weight: 800; color: var(--orange); letter-spacing: -0.03em; }
.about-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-weight: 500; }

/* --- Services / Service Cards --- */
.services { padding: 80px 24px 100px; }
.services-inner { max-width: var(--max-w); margin: 0 auto; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.service-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow-sm); transition: all 0.4s cubic-bezier(0.16,1,0.3,1); }
.service-card:hover { border-color: var(--border); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.service-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.service-icon svg { width: 20px; height: 20px; stroke: var(--orange); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.service-card > p { font-size: 14.5px; color: var(--text-muted); line-height: 1.7; }
.service-benefits { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-light); }
.benefit-item { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
.benefit-check { width: 18px; height: 18px; border-radius: 50%; background: var(--green-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.benefit-check svg { width: 10px; height: 10px; stroke: var(--green); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.benefit-item span { font-size: 13.5px; color: var(--text-body); line-height: 1.5; }

/* Service icon variants */
.service-icon--orange { background: var(--orange-soft); border: 1px solid rgba(252,88,31,0.08); }
.service-icon--neutral { background: var(--bg-warm); border: 1px solid var(--border-light); }

/* --- Stack Tags (WordPress) --- */
.stack { padding: 64px 24px; background: var(--bg-warm); }
.stack-inner { max-width: var(--max-w); margin: 0 auto; text-align: center; }
.stack-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.stack-tag { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 100px; background: var(--bg-card); border: 1px solid var(--border-light); font-size: 14px; font-weight: 600; color: var(--text-body); transition: all 0.25s; }
.stack-tag:hover { border-color: var(--orange); color: var(--orange); }

/* --- Process / Steps --- */
.process { padding: 80px 24px 100px; }
.process-inner { max-width: var(--max-w); margin: 0 auto; }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; position: relative; }
.process-steps::before { content: ''; position: absolute; top: 32px; left: 12%; right: 12%; height: 1px; background: linear-gradient(to right, var(--border-light), var(--border), var(--border-light)); }
.step { text-align: center; position: relative; }
.step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: var(--text-dim); margin-bottom: 18px; position: relative; z-index: 1; transition: all 0.3s; }
.step:hover .step-num { border-color: var(--orange); color: var(--orange); box-shadow: 0 0 0 4px rgba(252,88,31,0.08); }
.step h4 { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.step p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* step-num background matches section bg */
.process--warm .step-num { background: var(--bg-warm); }
.process--warm .step:hover .step-num { border-color: var(--orange); color: var(--orange); }

/* Purple variant (IA page) */
.step--purple:hover .step-num { border-color: var(--purple); color: var(--purple); box-shadow: 0 0 0 4px rgba(124,58,237,0.08); }

/* --- Cases --- */
.cases { padding: 72px 24px; background: var(--bg-dark); color: #fff; }
.cases-inner { max-width: var(--max-w); margin: 0 auto; }
.cases-inner .section-label { color: var(--orange); }
.cases-inner .section-title { color: #fff; }
.cases-inner .section-desc { color: rgba(255,255,255,0.55); }
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.case-card { padding: 28px 24px; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); background: rgba(255,255,255,0.03); }
.case-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--orange); margin-bottom: 12px; }
.case-card h3 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.4; }
.case-card p { font-size: 13.5px; color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: 16px; }
.case-metrics { display: flex; gap: 20px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); }
.case-metric { text-align: center; flex: 1; }
.case-metric-num { font-size: 22px; font-weight: 800; color: var(--orange); letter-spacing: -0.02em; }
.case-metric-label { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }

/* --- Differentiators --- */
.diff { padding: 80px 24px; background: var(--bg-warm); }
.diff-inner { max-width: var(--max-w); margin: 0 auto; }
.diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.diff-card { padding: 28px 24px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); }
.diff-card h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.diff-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }

/* Differentiators variant (SEO page - centered with icons) */
.differentiators { padding: 80px 24px; background: var(--bg-warm); }
.diff-item { text-align: center; padding: 32px 24px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--bg-card); transition: all 0.3s; }
.diff-item:hover { border-color: var(--border); box-shadow: var(--shadow); }
.diff-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--bg-warm); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.diff-icon svg { width: 20px; height: 20px; stroke: var(--orange); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.diff-item h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.diff-item p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }

/* --- FAQ --- */
.faq { padding: 80px 24px; background: var(--bg); }
.faq-inner { max-width: 680px; margin: 0 auto; }
.faq-list { margin-top: 48px; }
.faq-item { border-bottom: 1px solid var(--border-light); padding: 20px 0; }
.faq-item:first-child { border-top: 1px solid var(--border-light); }
.faq-q { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text); padding: 4px 0; transition: color 0.2s; }
.faq-q:hover { color: var(--orange); }
.faq-q svg { width: 18px; height: 18px; stroke: var(--text-dim); fill: none; stroke-width: 2; stroke-linecap: round; transition: transform 0.3s; flex-shrink: 0; margin-left: 12px; }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; }
.faq-item.open .faq-a { max-height: 300px; padding-top: 12px; }
.faq-a p { font-size: 14.5px; color: var(--text-muted); line-height: 1.75; }

/* --- Buttons --- */
.btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 7px; background: var(--orange); color: #fff; font-size: 15px; font-weight: 700; transition: all 0.25s; box-shadow: 0 2px 8px var(--orange-glow); }
.btn-primary:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 4px 16px var(--orange-glow); }
.btn-primary svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.btn-tel { display: inline-flex; align-items: center; gap: 6px; padding: 14px 28px; border-radius: 7px; background: var(--bg-card); color: var(--text-body); border: 1px solid var(--border); font-size: 15px; font-weight: 600; transition: all 0.25s; }
.btn-tel:hover { border-color: var(--text-dim); box-shadow: var(--shadow); }
.btn-tel svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- CTA Final --- */
.cta-final { padding: 80px 24px; text-align: center; border-top: 1px solid var(--border-light); }
.cta-final-inner { max-width: 520px; margin: 0 auto; }
.cta-final h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: var(--text); letter-spacing: -0.03em; margin-bottom: 14px; }
.cta-final p { font-size: 15.5px; color: var(--text-muted); line-height: 1.7; margin-bottom: 28px; }
.cta-final-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 7px; background: var(--orange); color: #fff; font-size: 15px; font-weight: 700; transition: all 0.25s; box-shadow: 0 2px 8px var(--orange-glow); }
.cta-final-btn:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 4px 16px var(--orange-glow); }
.cta-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* --- Crosslinks --- */
.crosslinks { padding: 48px 24px; background: var(--bg-warm); }
.crosslinks-inner { max-width: var(--max-w); margin: 0 auto; text-align: center; }
.crosslinks-inner p { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; }
.crosslinks-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.crosslink { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 100px; background: var(--bg-card); border: 1px solid var(--border-light); font-size: 13.5px; font-weight: 600; color: var(--text-body); transition: all 0.25s; }
.crosslink:hover { border-color: var(--orange); color: var(--orange); }
.crosslink svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- SEO Prose --- */
.seo-prose { padding: 56px 24px; background: var(--bg); border-top: 1px solid var(--border-light); }
.seo-prose-inner { max-width: 720px; margin: 0 auto; }
.seo-prose h2 { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; margin-bottom: 16px; line-height: 1.35; }
.seo-prose p { font-size: 14.5px; color: var(--text-muted); line-height: 1.8; margin-bottom: 14px; }
.seo-prose p:last-child { margin-bottom: 0; }
.seo-prose a { color: var(--orange); font-weight: 500; transition: color 0.2s; }
.seo-prose a:hover { color: var(--orange-dark); }

/* --- Zones (SEO) --- */
.zones { padding: 64px 24px; background: var(--bg); }
.zones-inner { max-width: var(--max-w); margin: 0 auto; }
.zones-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 36px; }
.zone-tag { display: inline-flex; padding: 10px 20px; border-radius: 100px; background: var(--bg-warm); border: 1px solid var(--border-light); font-size: 14px; font-weight: 600; color: var(--text-body); transition: all 0.25s; }
.zone-tag:hover { border-color: var(--orange); color: var(--orange); background: rgba(252,88,31,0.04); transform: translateY(-1px); }
.zones-note { font-size: 13px; color: var(--text-dim); text-align: center; margin-top: 20px; }

/* --- Audience (SEO) --- */
.audience { padding: 80px 24px; background: var(--bg); }
.audience-inner { max-width: var(--max-w); margin: 0 auto; }
.audience-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.audience-card { background: var(--bg-warm); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 28px 22px; text-align: center; transition: all 0.3s; }
.audience-card:hover { border-color: var(--border); box-shadow: var(--shadow); transform: translateY(-2px); }
.audience-emoji { font-size: 32px; margin-bottom: 12px; display: block; }
.audience-card h3 { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.audience-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* --- Situations (SEO) --- */
.situations { padding: 80px 24px; background: var(--bg); }
.situations-inner { max-width: var(--max-w); margin: 0 auto; }
.situations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; }
.situation-card { background: var(--bg-warm); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 28px 24px; transition: all 0.3s; }
.situation-card:hover { border-color: var(--border); box-shadow: var(--shadow); transform: translateY(-2px); }
.situation-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.situation-icon svg { width: 18px; height: 18px; stroke: var(--orange); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.situation-card h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.situation-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }

/* --- What GBP --- */
.whatgbp { padding: 80px 24px; background: var(--bg); }
.whatgbp-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.whatgbp-text h2 { font-size: clamp(22px, 2.5vw, 30px); font-weight: 800; color: var(--text); letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 18px; }
.whatgbp-text p { font-size: 15.5px; color: var(--text-muted); line-height: 1.8; margin-bottom: 14px; }
.whatgbp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat-card { background: var(--bg-warm); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 24px; text-align: center; }
.stat-num { font-size: 32px; font-weight: 800; color: var(--orange); letter-spacing: -0.03em; }
.stat-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }

/* --- Problems (GBP) --- */
.problems { padding: 80px 24px; background: var(--bg-warm); }
.problems-inner { max-width: var(--max-w); margin: 0 auto; }
.problems-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; }
.problem-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 28px 24px; transition: all 0.3s; }
.problem-card:hover { border-color: var(--border); box-shadow: var(--shadow); transform: translateY(-2px); }
.problem-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(220,38,38,0.06); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.problem-icon svg { width: 18px; height: 18px; stroke: #DC2626; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.problem-card h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.problem-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }

/* --- Demo (IA) --- */
.demo { padding: 80px 24px; background: var(--bg); }
.demo-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.demo-box { background: var(--bg-dark); border-radius: 12px; padding: 40px 32px; margin-top: 40px; text-align: left; }
.demo-prompt { font-family: 'Courier New', monospace; font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.8; padding: 20px; background: rgba(255,255,255,0.05); border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); }
.demo-prompt .prompt-label { font-size: 11px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; display: block; font-family: var(--font); }
.demo-arrow { text-align: center; padding: 16px 0; color: rgba(255,255,255,0.3); font-size: 20px; }
.demo-result { padding: 20px; background: rgba(255,255,255,0.03); border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); }
.demo-result .result-label { font-size: 11px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; display: block; font-family: var(--font); }
.demo-result p { font-family: 'Courier New', monospace; font-size: 13.5px; color: rgba(255,255,255,0.6); line-height: 1.8; }
.demo-result strong { color: rgba(255,255,255,0.9); font-weight: 600; }
.demo-note { font-size: 14px; color: var(--text-muted); margin-top: 24px; line-height: 1.6; }
.demo-note strong { color: var(--text); }
body.font-sora .demo-prompt .prompt-label,
body.font-sora .demo-result .result-label { font-family: 'Sora', sans-serif; }

/* --- Shift (IA) --- */
.shift { padding: 80px 24px; background: var(--bg-warm); }
.shift-inner { max-width: var(--max-w); margin: 0 auto; }
.shift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.shift-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 28px 24px; transition: all 0.3s; }
.shift-card:hover { border-color: var(--border); box-shadow: var(--shadow); transform: translateY(-2px); }
.shift-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.shift-icon.google { background: var(--blue-bg); }
.shift-icon.google svg { stroke: var(--blue); }
.shift-icon.ai { background: var(--purple-bg); }
.shift-icon.ai svg { stroke: var(--purple); }
.shift-icon svg { width: 18px; height: 18px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shift-card h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.shift-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }

/* --- Factors (IA) --- */
.factors { padding: 80px 24px 100px; background: var(--bg); }
.factors-inner { max-width: var(--max-w); margin: 0 auto; }
.factors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.factor-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow-sm); transition: all 0.4s cubic-bezier(0.16,1,0.3,1); }
.factor-card:hover { border-color: var(--border); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.factor-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--purple-bg); border: 1px solid rgba(124,58,237,0.08); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.factor-icon svg { width: 20px; height: 20px; stroke: var(--purple); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.factor-card h3 { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.factor-card > p { font-size: 14.5px; color: var(--text-muted); line-height: 1.7; }
.factor-benefits { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-light); }

/* --- Comparison (IA) --- */
.comparison { padding: 72px 24px; background: var(--bg-dark); color: #fff; }
.comparison-inner { max-width: var(--max-w); margin: 0 auto; }
.comparison-inner .section-label { color: var(--orange); }
.comparison-inner .section-title { color: #fff; }
.comparison-inner .section-desc { color: rgba(255,255,255,0.55); }
.comparison-table { margin-top: 48px; max-width: 680px; margin-left: auto; margin-right: auto; }
.comp-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.04); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 2px; }
.comp-row.header { background: rgba(255,255,255,0.08); }
.comp-cell { padding: 16px 20px; background: rgba(255,255,255,0.02); font-size: 13.5px; color: rgba(255,255,255,0.6); }
.comp-row.header .comp-cell { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04); }
.comp-cell:first-child { font-weight: 600; color: rgba(255,255,255,0.85); }
.comp-cell .check { color: var(--green); font-weight: 700; }
.comp-cell .cross { color: #DC2626; font-weight: 700; }
.comp-cell .partial { color: var(--orange); font-weight: 600; }

/* --- Modals (home) --- */
.modal-overlay, .legal-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); align-items: center; justify-content: center; animation: fadeIn 0.2s ease; }
.modal-overlay.active, .legal-overlay.active { display: flex; }
.modal { background: var(--bg-card); border-radius: 12px; padding: 36px 32px; max-width: 400px; width: 90%; position: relative; box-shadow: var(--shadow-lg); }
.modal-close, .legal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: background 0.2s; }
.modal-close:hover, .legal-close:hover { background: var(--border-light); }
.modal-close svg, .legal-close svg { width: 18px; height: 18px; stroke: var(--text-dim); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.modal h3 { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.modal-desc { font-size: 13.5px; color: var(--text-muted); margin-bottom: 24px; }
.contact-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border-light); border-radius: var(--radius); margin-bottom: 10px; transition: all 0.2s; }
.contact-item:hover { border-color: var(--border); background: var(--bg-warm); }
.contact-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--orange-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-icon svg { width: 16px; height: 16px; stroke: var(--orange); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-label { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.contact-value { font-size: 14px; font-weight: 600; color: var(--text); }
.legal-panel { background: var(--bg-card); border-radius: 12px; padding: 40px 36px; max-width: 560px; width: 90%; max-height: 80vh; overflow-y: auto; position: relative; box-shadow: var(--shadow-lg); }
.legal-panel h3 { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 24px; }
.legal-panel h4 { font-size: 14px; font-weight: 700; color: var(--text); margin: 20px 0 6px; }
.legal-panel p { font-size: 13.5px; color: var(--text-muted); line-height: 1.7; }
.legal-panel a { color: var(--orange); }

/* --- Footer --- */
.footer { padding: 28px 32px; border-top: 1px solid var(--border-light); }
.footer-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-dim); }
.footer-brand { display: flex; align-items: center; gap: 8px; }
.footer-brand img { width: 22px; height: 22px; }
.footer-links { display: flex; gap: 20px; }
.footer-links a, .footer a { color: var(--text-muted); transition: color 0.2s; }
.footer-links a:hover, .footer a:hover { color: var(--text); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
  .pillars-grid { grid-template-columns: 1fr; }
  .about-inner { grid-template-columns: 1fr; }
  .hero-inner { grid-template-columns: 1fr; max-width: 520px; text-align: center; }
  .hero-text { max-width: 100%; }
  .hero-proof { justify-content: center; }
  .hero-form-card { max-width: 420px; margin: 0 auto; }
  .services-grid, .cases-grid, .diff-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
  .services-grid { max-width: 100%; }
  .whatgbp-inner { grid-template-columns: 1fr; gap: 40px; }
  .problems-grid, .situations-grid, .shift-grid { grid-template-columns: 1fr; }
  .factors-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 768px) {
  .navbar { padding: 16px 20px; }
  .navbar.scrolled { padding: 12px 20px; }
  .page-home .navbar { padding: 16px 20px; }
  .page-home .navbar.scrolled { padding: 10px 20px; }
  .page-home .nav-logo-img { height: 26px; }
  .page-home .nav-cta { padding: 11px 10px; }
  .hero--centered { padding: 140px 20px 80px; }
  .hero--centered h1 { font-size: 28px; }
  .hero--centered .hero-sub { font-size: 15px; }
  .hero--grid { padding: 120px 20px 56px; }
  .nav-links { display: none; }
  .products-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
  .about-stats { grid-template-columns: repeat(3, 1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .process-steps::before { display: none; }
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-row, .crosslinks-row { flex-direction: column; align-items: center; }
  .footer-inner { flex-direction: column; text-align: center; gap: 12px; }
  .trust-logos { gap: 24px; }
  .trust-logo { height: 22px; }
  .trust-logo.tall { height: 28px; }
  .stack-grid { gap: 8px; }
  .comp-cell { padding: 12px 10px; font-size: 12px; }
  .page-header { padding: 120px 20px 40px; }
  .legal-content { padding: 40px 20px 60px; }
  .legal-card { padding: 20px; }
}

/* ═══════════ MENTIONS LÉGALES ═══════════ */
.page-header { padding: 140px 24px 48px; background: var(--bg-warm); text-align: center; }
.page-header-inner { max-width: 720px; margin: 0 auto; }
.breadcrumb { font-size: 12px; color: var(--text-dim); font-weight: 500; margin-bottom: 16px; }
.breadcrumb a { color: var(--text-muted); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb span { margin: 0 8px; }
.page-header h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; color: var(--text); letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 12px; }
.page-header p { font-size: 15.5px; color: var(--text-muted); line-height: 1.7; }
.page-meta { font-size: 12px; color: var(--text-dim); margin-top: 16px; }
.legal-content { padding: 56px 24px 80px; }
.legal-content-inner { max-width: 720px; margin: 0 auto; }
.legal-section { margin-bottom: 40px; }
.legal-section h2 { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border-light); }
.legal-section p { font-size: 15px; color: var(--text-body); line-height: 1.8; margin-bottom: 12px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-card { background: var(--bg-warm); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 24px 28px; margin: 16px 0; }
.legal-card p { margin-bottom: 6px; }
.legal-card strong { color: var(--text); font-weight: 600; }
.legal-section a { color: var(--orange); font-weight: 500; transition: color 0.2s; }
.legal-section a:hover { color: var(--orange-dark); }
.cta-band { padding: 56px 24px; text-align: center; border-top: 1px solid var(--border-light); }
.cta-band p { font-size: 15.5px; color: var(--text-muted); margin-bottom: 20px; }
.cta-band a { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 7px; background: var(--orange); color: #fff; font-size: 14px; font-weight: 600; transition: all 0.25s; box-shadow: 0 2px 8px rgba(252,88,31,0.25); }
.cta-band a:hover { background: var(--orange-dark); transform: translateY(-1px); }
.cta-band a svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }