/* Seguin AI Solutions: Maine coast meets tech.
   Every color comes from the variables in the :root block below, so changing a color there changes it everywhere. */
:root {   /* Palette from logo C: ivory background, navy text, antique gold accents */
  --bg: #faf7f0;            /* page background (ivory) */
  --surface: #f2ecdf;       /* alternate sections */
  --paper: #fffdf8;         /* cards that sit on the ivory background */
  --text: #10243a;          /* navy: headings, body text, primary buttons */
  --muted: #4a5866;         /* secondary text */
  --border: #ddd5c3;        /* thin decorative lines */
  --button-hover: #1c3a5a;  /* primary button when hovered */
  --gold: #7d6229;          /* gold accent on ivory: small labels, links, focus rings */
  --dark: #0d1e31;          /* dark bands and footer */
  --on-dark: #f4efe3;       /* text on dark bands */
  --on-dark-muted: #a9b6c3; /* secondary text on dark bands */
  --gold-on-dark: #d2b575;  /* gold accent on dark bands */
  --shade: 16 36 58;        /* navy as numbers, for see-through shadows */

  --serif: "Cormorant Garamond", Georgia, serif;                            /* headlines and the name */
  --sans: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif; /* everything else */

  --radius: 8px;            /* cards and panels */
  --radius-btn: 6px;        /* buttons */
  --gutter: clamp(20px, 5vw, 64px);          /* space at the sides of the page */
  --section-pad: clamp(72px, 10vw, 128px);   /* space above and below each section */
  --header-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 1.125rem; line-height: 1.6; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2 { font-family: var(--serif); font-weight: 500; color: var(--text); margin: 0 0 0.45em; }
/* Even out line lengths so no word sits alone on a line (older browsers simply ignore these) */
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
h1 { font-size: clamp(2.5rem, 1.5rem + 3vw, 4.125rem); line-height: 1.02; letter-spacing: -0.01em; }
h1 em { font-style: italic; font-weight: 500; }
h2 { font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem); line-height: 1.08; letter-spacing: -0.005em; }
h3 { font-family: var(--sans); font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; margin: 0 0 0.5em; color: var(--text); }
p { margin: 0 0 1em; }
a { color: var(--gold); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.container { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { width: min(760px, 100% - 2 * var(--gutter)); }
.center { text-align: center; }
.eyebrow { font-size: 0.8125rem; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); margin: 0 0 16px; }
.lead { font-size: 1.125rem; color: var(--muted); max-width: 34rem; }
.center .lead, .center.lead { margin-inline: auto; }
.fine-print { font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }

/* Keyboard focus: a gold ring on anything you can tab to */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.strip :focus-visible, .section-navy :focus-visible, .site-footer :focus-visible { outline-color: var(--gold-on-dark); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: var(--radius-btn);
  background: var(--text); color: var(--bg); border: 1px solid var(--text); font: 600 1rem/1.2 var(--sans); letter-spacing: 0.01em;
  text-decoration: none; text-align: center; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.btn:hover { background: var(--button-hover); border-color: var(--button-hover); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--text); }
.btn-ghost:hover { background: var(--text); color: var(--bg); }
.btn-small { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.btn-light { background: var(--on-dark); color: var(--text); border-color: var(--on-dark); }
.btn-light:hover { background: #ffffff; border-color: #ffffff; }
/* A quieter link with an arrow that nudges on hover */
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 600; font-size: 1rem; color: var(--text); text-decoration: none; }
.text-link .arrow { color: var(--gold); transition: transform 0.15s; }
.text-link:hover { color: var(--button-hover); text-decoration: underline; }
.text-link:hover .arrow { transform: translateX(3px); }

/* Header: ivory, with a thin line under it once you scroll */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.site-header.scrolled { border-bottom-color: var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
/* The name: SEGUIN with the lighthouse as its I, AI SOLUTIONS underneath (matches logo C) */
.logo { display: inline-flex; flex-direction: column; align-items: center; font-family: var(--serif); font-weight: 600; line-height: 1; text-decoration: none; color: var(--text); }
.logo-name { font-size: 2.125rem; letter-spacing: 0.08em; white-space: nowrap; }
.logo-i { height: 1.22em; width: auto; vertical-align: baseline; margin: 0 0.02em 0 -0.02em; }
.logo-sub { font-size: 0.78rem; letter-spacing: 0.34em; margin: 4px -0.34em 0 0; color: var(--gold); white-space: nowrap; }
.main-nav { display: flex; align-items: center; gap: 32px; }
.main-nav a:not(.btn) { text-decoration: none; font-weight: 500; font-size: 0.9375rem; color: var(--text); padding: 6px 0; border-bottom: 1px solid transparent; }
.main-nav a:not(.btn):hover { border-bottom-color: var(--gold); }
.main-nav .btn { margin-left: 4px; }
.menu-toggle { display: none; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; border-radius: var(--radius-btn); font-size: 1.5rem; line-height: 1; color: var(--text); cursor: pointer; }

/* ---------- Hero: photo that moves ---------- */
/* --hh is the photo's height. On a laptop it leaves a strip of the next section showing at the bottom. */
.hero { --hh: clamp(560px, 100vh - var(--header-h) - 112px, 820px); position: relative; height: var(--hh); overflow: hidden; background: var(--text);
  display: flex; align-items: flex-end; padding-bottom: clamp(40px, 6vh, 64px); }
@supports (height: 1svh) { .hero { --hh: clamp(560px, 100svh - var(--header-h) - 112px, 820px); } }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
/* The stage is the photo's frame. It always covers the hero (like object-fit: cover) so the beam and brackets stay glued to the lighthouse. */
/* --fx and --fy pick which part of the photo shows (bigger --fy moves the photo up). */
.stage { --fx: 50%; --fy: 50%; position: absolute; top: 50%; left: 50%; width: max(100%, calc(var(--hh) * 1.8326)); aspect-ratio: 1774 / 968;
  transform: translate3d(calc(-1 * var(--fx) + var(--mx, 0px)), calc(-1 * var(--fy) + var(--py, 0px) + var(--my, 0px)), 0) scale(1.1); will-change: transform; }
/* Laptop: the photo is shown larger and slid right, so the lighthouse sits up and to the right of the words */
@media (min-width: 901px) { .stage { top: 0; left: 0; --fx: calc(24px - 5%); --fy: 2%; width: max(132%, calc(var(--hh) * 1.8326)); } }
.stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The lighthouse lamp is at about 47.6% across and 20.4% down this photo */
.beam-wrap { position: absolute; left: 47.6%; top: 20.4%; width: 0; height: 0; }
/* Soft white sweep, like a real lens turning: narrow, low opacity, slow */
.beam { position: absolute; left: 0; top: 0; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; mix-blend-mode: soft-light; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(255, 252, 242, 0) 0deg, rgba(255, 252, 242, 0.5) 2.5deg, rgba(255, 252, 242, 0) 9deg, rgba(255, 252, 242, 0) 180deg, rgba(255, 252, 242, 0.5) 182.5deg, rgba(255, 252, 242, 0) 189deg, rgba(255, 252, 242, 0) 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, #000 8%, transparent 42%); mask-image: radial-gradient(circle, #000 0%, #000 8%, transparent 42%);
  animation: sweep 24s linear infinite; }
/* A faint white glow at the lamp that gently breathes */
.beacon { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 253, 244, 0.95) 0 22%, rgba(255, 250, 232, 0.45) 42%, rgba(255, 250, 232, 0) 70%); animation: glow 5s ease-in-out infinite; }
/* Tech-style target brackets around the lighthouse */
.marker { position: absolute; left: 46.05%; top: 23.1%; width: 8%; aspect-ratio: 1.2; /* centered on the keeper's house and tower, which span about 42.6–49.4% across and 18.1–28.2% down */ transform: translate(-50%, -50%); --b: rgba(255, 255, 255, 0.8);
  background:
    linear-gradient(var(--b), var(--b)) top left / 12px 1.5px no-repeat, linear-gradient(var(--b), var(--b)) top left / 1.5px 12px no-repeat,
    linear-gradient(var(--b), var(--b)) top right / 12px 1.5px no-repeat, linear-gradient(var(--b), var(--b)) top right / 1.5px 12px no-repeat,
    linear-gradient(var(--b), var(--b)) bottom left / 12px 1.5px no-repeat, linear-gradient(var(--b), var(--b)) bottom left / 1.5px 12px no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / 12px 1.5px no-repeat, linear-gradient(var(--b), var(--b)) bottom right / 1.5px 12px no-repeat; }
.hud-grid { position: absolute; inset: -90px; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%);
  transform: translate3d(calc(var(--mx, 0px) * -0.7), calc(var(--py, 0px) * -0.6), 0); z-index: 1; }
/* Only a light shading at the bottom, so the photo keeps its real colors */
.hero-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgb(var(--shade) / 0.32), rgb(var(--shade) / 0) 34%); }
.hero > .container { position: relative; z-index: 3; }
/* Ivory panel behind the hero words: wide and short, at the bottom left, so the lighthouse stays clear */
.hero-copy { max-width: 740px; padding: 28px 40px 28px; border-radius: var(--radius); background: rgb(250 247 240 / 0.96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgb(255 255 255 / 0.5);
  box-shadow: 0 1px 2px rgb(var(--shade) / 0.06), 0 18px 40px -16px rgb(var(--shade) / 0.35);
  animation: rise 0.7s var(--ease) 0.1s both; }
.hero-copy h1 { margin-bottom: 12px; font-size: clamp(2.5rem, 1.5rem + 2.9vw, 4rem); line-height: 0.98; text-wrap: wrap; }
.hero-copy h1 em { display: block; }
.hero-copy .lead { margin: 0; color: var(--muted); line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; margin-top: 22px; }
.hero-caption { position: absolute; right: max(var(--gutter), (100% - 1200px) / 2); bottom: 16px; z-index: 3; margin: 0; padding: 3px 10px; border-radius: 4px; background: rgb(13 30 49 / 0.66); font-size: 0.8125rem; letter-spacing: 0.02em; color: #ffffff; } /* dark tag so the small words stay readable over any part of the photo */
.hero.paused .beam, .hero.paused .beacon { animation-play-state: paused; }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes glow { 0%, 100% { opacity: 0.8; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Sections */
.section { padding: var(--section-pad) 0; }
.section h2.center { max-width: 22ch; margin-inline: auto; }
.section-tint { background: var(--surface); }
.section-navy { background: var(--dark); color: var(--on-dark); }
.section-navy h2 { color: var(--on-dark); }
.section-navy .lead { color: var(--on-dark-muted); margin-bottom: 36px; }
.contact-line { margin: 28px 0 0; font-size: 0.9375rem; color: var(--on-dark-muted); }

/* The dark band under the hero: three everyday problems */
.strip { background: var(--dark); color: var(--on-dark); padding: clamp(56px, 7vw, 88px) 0; }
.strip h3 { color: var(--on-dark); font-size: 1.1875rem; }
.strip p { color: var(--on-dark-muted); margin: 0; font-size: 1rem; }
.strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.strip-grid > div { padding-top: 22px; border-top: 1px solid rgb(210 181 117 / 0.45); }
/* Three narrow columns (tablets): give each title two lines so the paragraphs start level */
@media (min-width: 801px) and (max-width: 1100px) { .strip h3 { min-height: 2.6em; } }

/* Cards: thin border, no shadow until you point at them */
.cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; margin-top: 56px; }
.cards > .card { grid-column: span 2; }
.cards > .card:nth-child(4), .cards > .card:nth-child(5) { grid-column: span 3; }
.cards.cards-3 > .card { grid-column: span 2; }
.card { display: flex; flex-direction: column; align-items: flex-start; background: var(--paper); padding: 32px; border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease); }
.card:hover { border-color: #c9b88f; box-shadow: 0 12px 28px -18px rgb(var(--shade) / 0.35); }
.section-tint .card { background: var(--bg); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); margin: 0; font-size: 1.0625rem; max-width: 34em; }
/* Service cards: "See an example" button sits at the bottom */
.card:has(.card-btn) p { margin-bottom: 28px; }
.card-btn { margin-top: auto; }

/* How it works: four steps in a row with a gold number */
.steps { list-style: none; padding: 0; margin: 56px 0 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: none; }
.steps li { display: flex; flex-direction: column; gap: 18px; padding-top: 22px; border-top: 1px solid var(--text); }
.steps h3 { margin-bottom: 8px; }
.steps p { margin: 0; color: var(--muted); font-size: 1.0625rem; }
/* Four across: every step title gets room for two lines, so the four paragraphs start level */
@media (min-width: 1001px) { .steps h3 { min-height: 2.6em; } }
.step-num { font-variant-numeric: lining-nums; font-family: var(--serif); font-size: 2.5rem; line-height: 1; font-weight: 500; color: var(--gold); }

/* Text-message demo */
.demo-intro { color: var(--muted); max-width: 34rem; margin-inline: auto; }
.phone { width: 320px; max-width: 100%; margin: 40px auto 20px; background: var(--dark); border-radius: 40px; padding: 14px; box-shadow: 0 30px 60px -30px rgb(var(--shade) / 0.55); }
.phone-header { color: var(--on-dark); text-align: center; font-size: 0.875rem; font-weight: 600; padding: 8px 0 12px; }
.phone-screen { background: #ffffff; border-radius: 28px; height: 400px; overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.sms-bubble { max-width: 85%; padding: 10px 14px; border-radius: 18px; font-size: 0.9375rem; line-height: 1.4; animation: bubble-pop 0.3s ease; }
.sms-bubble.business { background: #ececee; color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; }
.sms-bubble.customer { background: var(--text); color: #ffffff; align-self: flex-end; border-bottom-right-radius: 4px; }
.sms-time { text-align: center; font-size: 0.75rem; color: var(--muted); margin-top: 6px; }
.preview-actions { justify-content: center; }
#sms-note:empty { display: none; }
.preview-actions + .fine-print { margin-top: 20px; }
@keyframes bubble-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.site-footer { background: var(--dark); color: var(--on-dark-muted); padding: 32px 0; font-size: 0.9375rem; border-top: 1px solid rgb(244 239 227 / 0.12); }
.site-footer p { margin: 0; }
.site-footer a { color: var(--on-dark); }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* "See an example" pop-up */
#service-dialog { width: min(820px, calc(100% - 28px)); max-height: 90vh; padding: 0; border: 0; border-radius: var(--radius); background: var(--bg); color: var(--text); box-shadow: 0 30px 80px rgb(0 0 0 / 0.4); overflow: auto; }
#service-dialog::backdrop { background: rgb(var(--shade) / 0.7); backdrop-filter: blur(3px); }
#sd-body { padding: 40px 44px 40px; }
.sd-close { position: sticky; top: 12px; float: right; margin: 12px 12px 0 0; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--text); color: var(--bg); font-size: 1.5rem; line-height: 1; cursor: pointer; z-index: 2; }
.sd-close:hover { background: var(--button-hover); }
.sd-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.1; margin-bottom: 0.3em; }
.sd-summary { font-size: 1.125rem; color: var(--muted); max-width: 36rem; }
.sd-images { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0 24px; }
.sd-images img, .sd-ph { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); object-fit: cover; border: 1px solid var(--border); }
.sd-pic { position: relative; display: block; padding: 0; border: 0; background: none; border-radius: var(--radius); cursor: zoom-in; }
.sd-pic img { display: block; object-position: top; transition: box-shadow 0.2s; }
.sd-pic:hover img { box-shadow: 0 14px 30px -12px rgb(var(--shade) / 0.35); }
.sd-tag { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 4px; font: 600 0.75rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.sd-tag.is-before { background: rgb(255 255 255 / 0.94); color: var(--text); }
.sd-tag.is-after { background: var(--text); color: var(--gold-on-dark); }
.sd-demo-row { margin: -4px 0 8px; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.sd-demo-row .fine-print { margin: 0; }
.sd-phone { margin: 6px 0 10px; }
.sd-phone .phone { margin-top: 16px; }
.img-zoom { padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 92vh; overflow: visible; }
.img-zoom::backdrop { background: rgb(12 28 43 / 0.88); }
.img-zoom img { display: block; max-width: 94vw; max-height: 92vh; border-radius: var(--radius); box-shadow: 0 30px 80px rgb(0 0 0 / 0.5); cursor: zoom-out; }
.img-zoom .sd-close { position: absolute; top: 10px; right: 10px; float: none; margin: 0; }
.sd-ph { padding: 14px; }
.sd-sub { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); margin: 32px 0 12px; }
.sd-points { margin: 0 0 14px; padding-left: 1.2em; }
.sd-points li { margin-bottom: 6px; }
.sd-points li::marker { color: var(--gold); }
.sd-example { background: var(--surface); border-radius: var(--radius); padding: 14px 16px; font-size: 0.9375rem; color: var(--text); }
.video-box { aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--dark); display: grid; place-items: center; overflow: hidden; color: var(--on-dark-muted); font-size: 0.9375rem; }
.video-box.has-video { background: #000; }
.video-box video, .video-box iframe { width: 100%; height: 100%; border: 0; }
.sd-cta { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border); text-align: center; }
body:has(dialog[open]) { overflow: hidden; }

/* Fade-up as sections scroll into view (only when JavaScript is running, so nothing stays hidden) */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; }
  .hero-copy, .sms-bubble { animation: none; }
  .card, .text-link .arrow { transition: none; }
  .beam { animation: none; transform: rotate(40deg); } .beacon { animation: none; }
}

/* ---------- Tablets and phones ---------- */
@media (max-width: 1000px) {
  .cards > .card, .cards > .card:nth-child(4), .cards.cards-3 > .card { grid-column: span 3; }
  .cards > .card:nth-child(5), .cards.cards-3 > .card:nth-child(3) { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
}

/* Hero below 900px wide: photo on top, ivory panel underneath, pulled up a little over the photo */
@media (max-width: 900px) {
  .hero { --hh: clamp(300px, 46vh, 520px); height: auto; display: block; padding: 0 0 clamp(24px, 5vw, 48px); background: var(--bg); overflow: visible; }
  @supports (height: 1svh) { .hero { --hh: clamp(300px, 46svh, 520px); } }
  .hero-media { position: relative; inset: auto; height: var(--hh); }
  .stage { --fx: 47.6%; --fy: 0%; top: 0; width: max(100%, calc(var(--hh) * 2.1)); } /* zoom in a little and center the lighthouse */
  .hero > .container { margin-top: -48px; }
  .hero-copy { max-width: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); border-color: var(--border); }
  .hero-caption { right: var(--gutter); left: auto; bottom: auto; top: calc(var(--hh) - 48px - 38px); }
}

@media (max-width: 800px) {
  :root { --header-h: 64px; }
  .menu-toggle { display: block; }
  .main-nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); padding: 8px var(--gutter) 24px; border-bottom: 1px solid var(--border); box-shadow: 0 16px 24px -16px rgb(var(--shade) / 0.25); }
  .main-nav.open { display: flex; }
  .main-nav a:not(.btn) { font-size: 1.0625rem; padding: 14px 0; border-bottom: 1px solid var(--border); }
  .main-nav a:not(.btn):hover { border-bottom-color: var(--border); color: var(--gold); }
  .main-nav .btn { margin: 20px 0 0; min-height: 52px; }
  .logo-name { font-size: 1.875rem; }
  .strip-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 600px) {
  body { font-size: 1.0625rem; }
  .hero > .container { width: calc(100% - 32px); }
  .hero-copy { padding: 28px 24px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 4px; }
  .hero-actions .text-link { justify-content: center; }
  .btn { min-height: 52px; }
  .btn-small { min-height: 48px; }
  .cards { grid-template-columns: 1fr; margin-top: 40px; }
  .cards > .card, .cards > .card:nth-child(n), .cards.cards-3 > .card { grid-column: auto; }
  .card { padding: 24px; }
  .steps { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
  .preview-actions { align-items: stretch; gap: 12px; }
  #sd-body { padding: 28px 20px 28px; }
  .sd-images { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; }
}