/* ==========================================================================
   Dermora – customer landing page (index.html)
   Brand kit v1.1: teal palette, Montserrat, droplets & bubbles patterns.
   presentation.html keeps css/styles.css – do not share classes between them.
   ========================================================================== */

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url('../assets/fonts/Montserrat-Light.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/Montserrat-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/Montserrat-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/Montserrat-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/Montserrat-Bold.woff2') format('woff2'); }

:root {
  --teal: #0C9387;
  --mint: #DFF2F0;
  --skin: #F8FCFB;
  --charcoal: #1F1F1F;
  --gray: #E9ECEF;
  --deep-teal: #04776B;
  --teal-mid: #088579;
  --teal-soft: #3DA99F;
  --teal-light: #6DBEB7;
  --mint-deep: #B5DFDB;

  --ink: var(--charcoal);
  --ink-muted: #5A6462;
  --line: #DDE3E2;
  --primary: var(--deep-teal);
  --primary-hover: #035F56;

  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(31,31,31,.06), 0 4px 14px rgba(12,147,135,.08);
  --shadow-md: 0 10px 30px rgba(12,147,135,.14), 0 2px 6px rgba(31,31,31,.06);
  --shadow-lg: 0 30px 70px rgba(4,119,107,.28), 0 8px 20px rgba(31,31,31,.10);

  --container: 1140px;
  --gutter: 20px;
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--skin); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--deep-teal); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.12; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(2.5rem, 5.8vw, 4.3rem); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--primary); color: #fff; padding: 8px 14px; border-radius: 10px; z-index: 100; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 3px; border-radius: 6px; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container.narrow { max-width: 760px; }
.center { text-align: center; }
.section { padding: clamp(64px, 9vw, 112px) 0; position: relative; }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head.center { margin-inline: auto; }
.section-head .lead { margin-bottom: 0; }
.lead { font-size: 1.15rem; color: var(--ink-muted); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--deep-teal); margin-bottom: 14px; }
.eyebrow svg { width: 16px; height: 16px; }
.footnote { font-size: .85rem; color: var(--ink-muted); margin-top: 24px; }
svg.icon { width: 24px; height: 24px; flex: none; }

/* Brand patterns – arcs, cross-field, domes and monogram tiles from the brand kit (background removed), faded behind the content */
.pat-dots::before, .pat-arcs::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.pat-dots::before { background: url('../assets/patterns/cross-field-skin.svg') center / 64px repeat; opacity: .13; }
.pat-arcs::before { background: url('../assets/patterns/arcs-skin.svg') center / 480px repeat; opacity: .28; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%); mask-image: linear-gradient(90deg, transparent 35%, #000 100%); }
.pat-dots > *, .pat-arcs > * { position: relative; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-weight: 600; font-size: 1rem; border: 2px solid transparent; cursor: pointer; transition: background .15s, color .15s, transform .15s, box-shadow .15s, border-color .15s; text-decoration: none !important; font-family: inherit; line-height: 1.2; white-space: nowrap; }
.btn svg { width: 20px; height: 20px; }
.btn-sm { padding: 10px 18px; font-size: .92rem; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--deep-teal); border-color: var(--mint-deep); }
.btn-ghost:hover { background: var(--mint); border-color: var(--teal-light); }
.btn-light { background: #fff; color: var(--deep-teal); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.btn-light:hover { background: var(--mint); transform: translateY(-1px); }
.btn-outline-white { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.7); }
.btn-outline-white:hover { background: rgba(255,255,255,.18); border-color: #fff; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 24px; }
.brand img { height: 36px; width: auto; }
.nav-menu { display: flex; align-items: center; gap: 26px; }
.nav-menu a { color: var(--ink); font-weight: 500; font-size: .95rem; }
.nav-menu a:hover { color: var(--deep-teal); text-decoration: none; }
.nav-auth { display: flex; gap: 8px; margin-left: 8px; }
.nav-github { display: inline-flex; align-items: center; color: var(--ink-muted); padding: 6px; border-radius: 50%; }
.nav-github:hover { color: var(--deep-teal); background: var(--mint); text-decoration: none; }
.nav-auth .btn { font-size: .92rem; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; color: var(--ink); cursor: pointer; border-radius: 10px; }
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(160deg, var(--teal) 0%, var(--teal-mid) 55%, var(--deep-teal) 100%); padding: clamp(56px, 8vw, 104px) 0 clamp(120px, 14vw, 170px); }
.hero::before { /* bubbles pattern rising from the bottom, like the brand launch story */
  content: ''; position: absolute; inset: auto 0 0 0; height: 62%; pointer-events: none;
  background: url('../assets/patterns/arcs-teal.svg') center bottom / 420px repeat;
  opacity: .4; -webkit-mask-image: linear-gradient(to top, #000 30%, transparent); mask-image: linear-gradient(to top, #000 30%, transparent);
}
.hero::after { /* soft light circle top-left */
  content: ''; position: absolute; width: 640px; height: 640px; border-radius: 50%; left: -260px; top: -300px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.14), rgba(255,255,255,0));
}
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.hero .eyebrow { color: var(--mint); background: rgba(255,255,255,.12); padding: 8px 14px; border-radius: 999px; margin-bottom: 22px; }
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero h1 .accent { color: var(--mint-deep); }
.hero .lead { color: rgba(255,255,255,.88); max-width: 520px; font-size: 1.2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 30px; }
.hero-trust { display: grid; gap: 10px; }
.hero-trust li { display: flex; align-items: center; gap: 10px; font-size: .94rem; color: rgba(255,255,255,.9); }
.hero-trust svg { width: 22px; height: 22px; color: var(--mint-deep); }

.hero-visual { position: relative; display: flex; justify-content: center; min-height: 560px; }
.phone { position: relative; z-index: 2; width: 300px; aspect-ratio: 9 / 19.2; border-radius: 44px; background: var(--charcoal); padding: 11px; box-shadow: var(--shadow-lg); }
.phone-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 92px; height: 24px; background: var(--charcoal); border-radius: 20px; z-index: 3; }
.phone-screen { height: 100%; border-radius: 34px; overflow: hidden; background: #FAF7F0; padding-top: 40px; }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.float { position: absolute; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); color: var(--ink); z-index: 3; }
.float-photo { left: 0; top: 36px; width: 210px; padding: 10px; transform: rotate(-6deg); z-index: 1; }
.float-photo img { width: 100%; aspect-ratio: .9; object-fit: cover; object-position: 60% 30%; border-radius: 18px; }
.float-photo figcaption { display: none; }
.float-photo figcaption svg { width: 15px; height: 15px; }
.float-chat { right: -10px; bottom: 36px; width: 250px; display: flex; gap: 12px; align-items: center; padding: 12px 14px 12px 12px; }
.float-chat img { width: 54px; height: 54px; object-fit: cover; border-radius: 16px; background: var(--mint); }
.float-chat strong { display: block; font-size: .82rem; color: var(--deep-teal); }
.float-chat span { display: block; font-size: .8rem; color: var(--ink-muted); line-height: 1.35; }
.float-badge { right: 8px; top: 56px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.float-badge svg { width: 18px; height: 18px; color: var(--teal); }

/* ---------- Start (login / create account) – overlaps the hero ---------- */
.start { position: relative; z-index: 4; margin-top: calc(-1 * clamp(88px, 10vw, 120px)); padding-bottom: clamp(40px, 5vw, 64px); }
.start-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.start-card { background: #fff; border-radius: var(--r-lg); padding: 26px 24px 24px; box-shadow: var(--shadow-md); border: 1px solid rgba(221,227,226,.7); display: flex; flex-direction: column; gap: 10px; }
.start-card.is-brand { position: relative; overflow: hidden; background: var(--deep-teal); color: #fff; border-color: transparent; }
.start-card.is-brand::before { content: ''; position: absolute; inset: 0; background: url('../assets/patterns/cross-field-teal.svg') center / 84px repeat; opacity: .8; pointer-events: none; }
.start-card.is-brand > * { position: relative; }
.start-card.is-brand h3 { color: #fff; }
.start-card.is-brand p { color: rgba(255,255,255,.85); }
.start-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--mint); color: var(--deep-teal); display: grid; place-items: center; margin-bottom: 4px; }
.start-card.is-brand .start-icon { background: rgba(255,255,255,.16); color: #fff; }
.start-icon svg { width: 24px; height: 24px; }
.start-card h3 { margin: 0; font-size: 1.1rem; }
.start-card p { margin: 0; color: var(--ink-muted); font-size: .94rem; flex: 1; }
.start-card .btn { align-self: flex-start; margin-top: 8px; }
.start-note { text-align: center; color: var(--ink-muted); font-size: .9rem; margin: 22px 0 0; }

/* ---------- Problem (quotes) ---------- */
.section-problem { background-color: var(--skin); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote { position: relative; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 44px 24px 22px; box-shadow: var(--shadow-sm); }
.quote::before { content: '”'; position: absolute; top: 2px; left: 20px; font-size: 4rem; line-height: 1; color: var(--teal-light); font-weight: 700; }
.quote p { font-weight: 500; margin-bottom: 12px; }
.quote footer { font-size: .85rem; color: var(--ink-muted); display: flex; align-items: center; gap: 8px; }
.quote footer::before { content: ''; width: 22px; height: 2px; background: var(--teal); border-radius: 2px; }

/* ---------- Steps ---------- */
.section-how { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { position: relative; background: var(--skin); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 22px 22px; }
.step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.step-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--mint); color: var(--deep-teal); display: grid; place-items: center; }
.step-icon svg { width: 26px; height: 26px; }
.step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-size: .85rem; font-weight: 700; }
.step h3 { font-size: 1.08rem; }
.step p { margin: 0; color: var(--ink-muted); font-size: .94rem; }
.step-photos { display: flex; gap: 6px; margin-top: 16px; }
.step-photos img { width: 33.3%; aspect-ratio: 170 / 205; object-fit: cover; border-radius: 10px; }

/* ---------- App screens ---------- */
.section-screens { background-color: var(--mint); padding-bottom: clamp(48px, 7vw, 88px); }
.section-screens::before { content: ''; position: absolute; inset: 0; background: url('../assets/patterns/monogram-mint.svg') center / 360px 211px repeat; opacity: .09; pointer-events: none; }
.section-screens > * { position: relative; }
.screens { display: flex; gap: 26px; overflow-x: auto; padding: 8px max(20px, calc((100vw - var(--container)) / 2)) 24px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--teal-light) transparent; }
.screen { flex: 0 0 auto; margin: 0; scroll-snap-align: start; text-align: center; }
.screen-frame { width: 224px; aspect-ratio: 390 / 844; border-radius: 30px; background: var(--charcoal); padding: 8px; box-shadow: var(--shadow-md); }
.screen-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 23px; background: #FAF7F0; }
.screen figcaption { margin-top: 12px; font-size: .88rem; font-weight: 500; color: var(--ink-muted); }
.screens-cta { margin-top: 10px; }
.screens-cta .btn { margin-bottom: 10px; }

/* ---------- Features ---------- */
.section-features { background-color: #fff; }
.card { background: var(--skin); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 26px; transition: transform .15s, box-shadow .15s, background .15s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); background: #fff; }
.card-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--mint); color: var(--deep-teal); display: grid; place-items: center; margin-bottom: 18px; }
.card-icon svg { width: 26px; height: 26px; }
.card p { margin: 0; color: var(--ink-muted); font-size: .95rem; }

/* ---------- Safety ---------- */
.section-safety { background-color: var(--skin); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.checklist { display: grid; gap: 14px; margin-top: 24px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: .97rem; }
.checklist svg { width: 22px; height: 22px; color: var(--teal); flex: none; margin-top: 2px; }
.trust-card { position: relative; overflow: hidden; background: var(--deep-teal); color: #fff; border-radius: var(--r-xl); padding: 36px 32px; box-shadow: var(--shadow-lg); }
.trust-card::before { content: ''; position: absolute; inset: 0; background: url('../assets/patterns/domes-teal.svg') right top / 200px repeat; opacity: .45; pointer-events: none; -webkit-mask-image: linear-gradient(200deg, #000 15%, transparent 70%); mask-image: linear-gradient(200deg, #000 15%, transparent 70%); }
.trust-card > * { position: relative; }
.trust-card img { width: 56px; height: auto; margin-bottom: 18px; }
.trust-card h3 { color: #fff; font-size: 1.35rem; margin-bottom: 10px; }
.trust-card p { margin: 0; color: rgba(255,255,255,.88); }
.trust-sign { margin-top: 22px; display: flex; align-items: center; gap: 12px; font-size: .85rem; color: rgba(255,255,255,.8); }
.trust-sign img { width: 44px; height: 44px; margin: 0; border-radius: 50%; object-fit: cover; background: #fff; }

/* ---------- FAQ ---------- */
.section-faq { background-color: #fff; }
.faq { display: grid; gap: 12px; }
.faq details { background: var(--skin); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 22px; }
.faq details[open] { background: #fff; box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.4rem; color: var(--teal); font-weight: 300; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 18px; color: var(--ink-muted); }

/* ---------- Beta (subscribe) ---------- */
.section-beta { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--teal) 0%, var(--deep-teal) 100%); }
.section-beta::before { content: ''; position: absolute; inset: 0; background: url('../assets/patterns/monogram-teal.svg') center / 300px 176px repeat; opacity: .14; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent 80%); mask-image: linear-gradient(90deg, #000 35%, transparent 80%); }
.section-beta .container { position: relative; }
.beta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.beta-copy .eyebrow { color: var(--mint); }
.beta-copy h2 { color: #fff; }
.beta-copy .lead { color: rgba(255,255,255,.88); }
.beta-perks { display: grid; gap: 10px; margin-top: 20px; }
.beta-perks li { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: rgba(255,255,255,.92); }
.beta-perks svg { width: 20px; height: 20px; color: var(--mint-deep); }
.beta-card { position: relative; background: #fff; color: var(--ink); border-radius: var(--r-xl); padding: 34px 30px 28px; box-shadow: var(--shadow-lg); }
.beta-mascot { position: absolute; top: -58px; right: 22px; width: 118px; height: auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,.18)); }
.beta-card h3 { font-size: 1.3rem; margin-bottom: 6px; padding-right: 110px; }
.beta-card > p { color: var(--ink-muted); font-size: .95rem; padding-right: 110px; }
.beta-form { display: grid; gap: 10px; margin-top: 18px; }
.beta-form label { font-size: .85rem; font-weight: 600; color: var(--ink); }
.beta-form input { width: 100%; padding: 15px 18px; border-radius: 14px; border: 1.5px solid var(--line); font: inherit; font-size: 1rem; background: var(--skin); color: var(--ink); }
.beta-form input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(12,147,135,.15); background: #fff; }
.beta-form .btn { width: 100%; }
.beta-status { min-height: 1.5em; font-weight: 500; font-size: .92rem; color: var(--deep-teal); margin: 8px 0 0; }
.beta-fine { margin: 10px 0 0; font-size: .8rem; color: var(--ink-muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: #D7DEDC; padding: 60px 0 36px; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.6fr; gap: 32px; }
.site-footer h3 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #8FA09C; margin-bottom: 14px; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: #F1F5F4; }
.site-footer a:hover { color: var(--teal-light); }
.footer-note { color: #A7B3B0; }
.footer-note p { margin-bottom: 8px; }
.footer-logo { width: 150px; height: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .float-photo { width: 170px; }
  .float-chat { width: 220px; right: 0; }
}
@media (max-width: 860px) {
  .hero { padding-bottom: clamp(130px, 22vw, 170px); }
  .hero-grid, .split, .beta-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 0; margin-top: 8px; }
  .phone { width: 250px; }
  .float-photo { width: 150px; left: max(0px, calc(50% - 300px)); top: 10px; }
  .float-chat { width: 210px; right: max(0px, calc(50% - 300px)); bottom: 10px; }
  .float-badge { display: none; }
  .start-grid, .grid-3 { grid-template-columns: 1fr; }
  .nav-toggle { display: inline-flex; }
  .nav-menu { display: none; position: absolute; left: 0; right: 0; top: 74px; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 8px 20px 16px; box-shadow: var(--shadow-md); }
  .nav-menu.is-open { display: flex; }
  .nav-menu li a { display: block; padding: 12px 0; }
  .nav-auth { flex-direction: column; margin: 8px 0 0; }
  .nav-github { padding: 12px 0; border-radius: 0; }
  .nav-github::after { content: 'Källkod på GitHub'; margin-left: 10px; font-weight: 500; font-size: .95rem; color: var(--ink); }
  .nav-auth .btn { width: 100%; }
  .beta-card { margin-top: 48px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .screen-frame { width: 196px; }
  .screens { gap: 18px; }
  .hero-actions .btn { width: 100%; }
  .phone { width: 230px; }
  .float-photo { width: 124px; left: 0; top: 0; }
  .float-chat { width: 190px; right: 0; bottom: 0; }
  .beta-mascot { width: 96px; top: -48px; right: 14px; }
  .beta-card h3, .beta-card > p { padding-right: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card { transition: none; }
}