/* SDA 2027 teaser. Tokens follow the Figma file "SDA Styleguide 1.0" (SDA Design System 0.1). */

/* =========================================================
   0. FONTS (self-hosted, SIL OFL 1.1)
   ========================================================= */
@font-face { font-family:'Roboto Condensed'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/roboto-condensed-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Roboto Condensed'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/roboto-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Roboto Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/roboto-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Roboto Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/roboto-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2'); }

/* =========================================================
   1. TOKENS
   ========================================================= */
:root {
  --sda-plum-950:#0D0014; --sda-plum-900:#1A0026; --sda-plum-800:#2E003F; --sda-plum-700:#4A0067; --sda-plum-600:#6E00A3; --sda-plum-500:#8F00C9;
  --sda-magenta-400:#F04FD8; --sda-magenta-500:#E61CC8; --sda-magenta-600:#B8009F;
  --sda-indigo-500:#4F6CFF; --sda-teal-400:#33D1E6;
  --sda-neutral-200:#E1D7E8; --sda-neutral-400:#9E8EAA;
  --sda-base-white:#FFFFFF; --sda-base-black:#000000;

  --sda-bg-canvas:var(--sda-plum-950);
  --sda-bg-surface:var(--sda-plum-900);
  --sda-bg-surface-raised:var(--sda-plum-800);
  --sda-text-primary:var(--sda-base-white);
  --sda-text-secondary:var(--sda-neutral-200);
  --sda-text-muted:var(--sda-neutral-400);
  --sda-text-accent:var(--sda-magenta-400);
  --sda-text-on-accent:var(--sda-base-white);
  --sda-border-subtle:var(--sda-plum-800);
  --sda-border-strong:var(--sda-plum-600);
  --sda-border-focus:var(--sda-magenta-400);
  --sda-border-glass:var(--sda-plum-700);
  --sda-accent-magenta:var(--sda-magenta-500);
  --sda-accent-magenta-hover:var(--sda-magenta-400);
  --sda-status-success:var(--sda-teal-400);

  --sda-opacity-10:0.1; --sda-opacity-20:0.2; --sda-opacity-40:0.4; --sda-opacity-60:0.6; --sda-opacity-80:0.8; --sda-opacity-100:1;

  --sda-spacing-4:4px; --sda-spacing-8:8px; --sda-spacing-12:12px; --sda-spacing-16:16px; --sda-spacing-20:20px; --sda-spacing-24:24px;
  --sda-spacing-32:32px; --sda-spacing-40:40px; --sda-spacing-48:48px; --sda-spacing-64:64px;
  --sda-radius-sm:4px; --sda-radius-md:8px; --sda-radius-lg:12px; --sda-radius-xl:20px; --sda-radius-full:9999px;
  --sda-layout-content-max:1200px;

  --sda-icon-sm:16px; --sda-icon-md:20px; --sda-icon-lg:24px; --sda-icon-xl:32px;

  --sda-glow-magenta:0 0 32px rgb(230 28 200 / 0.55);
  --sda-glow-magenta-strong:0 0 48px rgb(230 28 200 / 0.85);
  --sda-glow-plum:0 0 48px rgb(143 0 201 / 0.45);
  --sda-blur-glass:24px;

  --sda-motion-duration-instant:100ms; --sda-motion-duration-fast:200ms; --sda-motion-duration-base:400ms;
  --sda-motion-duration-dramatic:1200ms; --sda-motion-duration-ambient:20000ms;
  --sda-motion-ease-standard:cubic-bezier(0.2, 0, 0, 1);
  --sda-motion-ease-enter:cubic-bezier(0.05, 0.7, 0.1, 1);
  --sda-motion-ease-exit:cubic-bezier(0.3, 0, 0.8, 0.15);
  --sda-motion-ease-dramatic:cubic-bezier(0.7, 0, 0.2, 1);
  --sda-motion-ease-ambient:cubic-bezier(0.37, 0, 0.63, 1);

  --sda-type-family-display:'Roboto Condensed', 'Arial Narrow', sans-serif;
  --sda-type-family-body:'DM Sans', system-ui, sans-serif;

  /* Mobile (base) */
  --sda-type-display-xl-size:44px; --sda-type-display-xl-line-height:46px;
  --sda-type-heading-3-size:20px; --sda-type-heading-3-line-height:24px;
  --sda-type-eyebrow-size:16px; --sda-type-eyebrow-line-height:20px;
  --sda-type-lead-size:22px; --sda-type-lead-line-height:30px;
  --sda-type-numeral-size:28px; --sda-type-numeral-line-height:32px;
  --sda-type-body-lg-size:17px; --sda-type-body-lg-line-height:26px;
  --sda-type-label-md-size:13px; --sda-type-label-md-line-height:16px;
  --sda-type-label-sm-size:12px; --sda-type-label-sm-line-height:16px;
  --sda-type-caption-size:12px; --sda-type-caption-line-height:16px;

  --page-margin:20px;
  --page-margin-edge:20px;

  --sda-fill-surface-60:color-mix(in srgb, var(--sda-bg-surface) 60%, transparent);
  --sda-fill-surface-80:color-mix(in srgb, var(--sda-bg-surface) 80%, transparent);
  --sda-fill-surface-50:color-mix(in srgb, var(--sda-bg-surface) 50%, transparent);
  --sda-fill-canvas-50:color-mix(in srgb, var(--sda-bg-canvas) 50%, transparent);
  --sda-fill-primary-20:color-mix(in srgb, var(--sda-text-primary) 20%, transparent);
  --sda-fill-primary-40:color-mix(in srgb, var(--sda-text-primary) 40%, transparent);
}
@media (min-width:768px) {
  :root {
    --sda-type-display-xl-size:96px; --sda-type-display-xl-line-height:98px;
    --sda-type-heading-3-size:24px; --sda-type-heading-3-line-height:30px;
    --sda-type-eyebrow-size:26px; --sda-type-eyebrow-line-height:32px;
    --sda-type-lead-size:40px; --sda-type-lead-line-height:50px;
    --sda-type-numeral-size:48px; --sda-type-numeral-line-height:56px;
    --sda-type-body-lg-size:18px; --sda-type-body-lg-line-height:28px;
    --sda-type-label-md-size:14px; --sda-type-label-md-line-height:18px;
    --page-margin:32px; --page-margin-edge:32px;
  }
}
@media (min-width:1440px) {
  :root {
    --sda-type-display-xl-size:120px; --sda-type-display-xl-line-height:130px;
    --sda-type-heading-3-size:28px; --sda-type-heading-3-line-height:32px;
    --sda-type-eyebrow-size:32px; --sda-type-eyebrow-line-height:38px;
    --sda-type-lead-size:52px; --sda-type-lead-line-height:62px;
    --sda-type-numeral-size:56px; --sda-type-numeral-line-height:64px;
    --sda-type-body-lg-size:20px; --sda-type-body-lg-line-height:30px;
    --sda-type-label-md-size:16px; --sda-type-label-md-line-height:20px;
    --sda-type-label-sm-size:14px; --sda-type-label-sm-line-height:18px;
    --page-margin:120px;
  }
}

/* =========================================================
   2. TEXT STYLES
   ========================================================= */
.t-display-xl { font:700 var(--sda-type-display-xl-size)/var(--sda-type-display-xl-line-height) var(--sda-type-family-display); letter-spacing:-0.01em; }
.t-h3 { font:600 var(--sda-type-heading-3-size)/var(--sda-type-heading-3-line-height) var(--sda-type-family-display); }
.t-eyebrow { font:500 var(--sda-type-eyebrow-size)/var(--sda-type-eyebrow-line-height) var(--sda-type-family-display); letter-spacing:0.02em; text-transform:uppercase; }
.t-lead { font:400 var(--sda-type-lead-size)/var(--sda-type-lead-line-height) var(--sda-type-family-body); }
.t-numeral { font:700 var(--sda-type-numeral-size)/var(--sda-type-numeral-line-height) var(--sda-type-family-display); font-variant-numeric:tabular-nums; }
.t-body-lg { font:400 var(--sda-type-body-lg-size)/var(--sda-type-body-lg-line-height) var(--sda-type-family-body); }
.t-label-md { font:400 var(--sda-type-label-md-size)/var(--sda-type-label-md-line-height) var(--sda-type-family-display); letter-spacing:0.04em; text-transform:uppercase; }
.t-label-sm { font:400 var(--sda-type-label-sm-size)/var(--sda-type-label-sm-line-height) var(--sda-type-family-display); letter-spacing:0.04em; text-transform:uppercase; }
.t-caption { font:400 var(--sda-type-caption-size)/var(--sda-type-caption-line-height) var(--sda-type-family-body); }

/* =========================================================
   3. BASE + LAYOUT
   ========================================================= */
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; }
body {
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  background:var(--sda-bg-canvas); color:var(--sda-text-primary);
  font-family:var(--sda-type-family-body); overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
p { margin:0; }
ul[role="list"] { list-style:none; margin:0; padding:0; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a { color:inherit; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--sda-border-focus); outline-offset:2px; border-radius:var(--sda-radius-sm); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link { position:absolute; left:8px; top:-100px; z-index:100; padding:8px 12px; background:var(--sda-bg-surface-raised); border-radius:var(--sda-radius-md); }
.skip-link:focus { top:8px; }
.container { width:100%; max-width:calc(var(--sda-layout-content-max) + 2 * var(--page-margin)); margin:0 auto; padding:0 var(--page-margin); }

svg { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
svg.icon-fill { fill:currentColor; stroke:none; }

/* =========================================================
   4. AURORA BACKGROUND
   ========================================================= */
.aurora { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.aurora-shift { position:absolute; inset:-10%; transition:transform var(--sda-motion-duration-dramatic) var(--sda-motion-ease-dramatic);
  animation:aurora-hue var(--sda-motion-duration-ambient) var(--sda-motion-ease-ambient) infinite alternate; }
.blob { position:absolute; border-radius:50%; background:radial-gradient(closest-side, var(--c), transparent);
  animation:drift var(--sda-motion-duration-ambient) var(--sda-motion-ease-ambient) infinite alternate; animation-delay:var(--delay, 0s); will-change:transform; }
.blob.amber   { --c:rgb(255 106 0 / 0.55);  left:-2%; top:18%; width:50%; height:60%; --dx:5vw;  --dy:3vh;  --delay:-4s; }
.blob.crimson { --c:rgb(227 57 106 / 0.55); left:62%; top:12%; width:52%; height:66%; --dx:-4vw; --dy:4vh;  --delay:-9s; }
.blob.plum    { --c:rgb(143 0 201 / 0.85);  left:27%; top:15%; width:52%; height:58%; --dx:3vw;  --dy:-3vh; --delay:-2s; }
.blob.indigo  { --c:rgb(79 108 255 / 0.8);  left:10%; top:46%; width:60%; height:50%; --dx:-3vw; --dy:-4vh; --delay:-12s; }
.blob.teal    { --c:rgb(0 180 204 / 0.55);  left:38%; top:55%; width:42%; height:36%; --dx:4vw;  --dy:-2vh; --delay:-6s; }
.blob.magenta { --c:rgb(230 28 200 / 0.45); left:50%; top:27%; width:40%; height:48%; --dx:-5vw; --dy:2vh;  --delay:-15s; }
@keyframes drift { to { transform:translate(var(--dx), var(--dy)) scale(1.08); } }
@keyframes aurora-hue { to { filter:hue-rotate(18deg); } }

/* =========================================================
   5. HEADER
   ========================================================= */
.site-header { position:relative; z-index:2; }
.topbar { background:var(--sda-base-black); display:flex; justify-content:flex-end; padding:0 var(--page-margin-edge); }
.lang { display:flex; align-items:center; gap:var(--sda-spacing-8); padding:var(--sda-spacing-8) 0; }
.lang a, .lang-current { min-height:28px; min-width:28px; display:inline-grid; place-items:center; text-decoration:none; }
.lang a { color:var(--sda-text-secondary); transition:color var(--sda-motion-duration-instant) var(--sda-motion-ease-standard); }
.lang a:hover { color:var(--sda-text-primary); }
.lang-current { color:var(--sda-text-accent); }
.lang .divider { color:var(--sda-text-muted); }

.header-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sda-spacing-16);
  padding:var(--sda-spacing-16) var(--page-margin-edge);
  background:var(--sda-fill-surface-50); backdrop-filter:blur(var(--sda-blur-glass)); -webkit-backdrop-filter:blur(var(--sda-blur-glass)); }
@media (min-width:768px) { .header-row { padding-block:var(--sda-spacing-24); } }
.host-logos { display:flex; align-items:center; gap:var(--sda-spacing-32); }
.host-logo { height:44px; width:auto; display:block; }
.host-logo.only-tablet-up { display:none; }
@media (min-width:768px) { .host-logo.only-tablet-up { display:inline-flex; } }

/* Logo links: default and hover SVG stacked, swapped on hover/focus */
.logo-link { position:relative; display:inline-flex; align-items:center; border-radius:var(--sda-radius-md); text-decoration:none; color:inherit; }
.logo-link:focus-visible { outline:2px solid var(--sda-accent-magenta); outline-offset:4px; }
.logo-link .logo-hover { position:absolute; inset:0; opacity:0; transition:opacity var(--sda-motion-duration-fast) var(--sda-motion-ease-standard); }
.logo-link .logo-default { transition:opacity var(--sda-motion-duration-fast) var(--sda-motion-ease-standard); }
.logo-link:hover .logo-hover, .logo-link:focus-visible .logo-hover { opacity:1; }
.logo-link:hover .logo-default.has-hover, .logo-link:focus-visible .logo-default.has-hover { opacity:0; }
.logo-link:hover .logo-text, .logo-link:focus-visible .logo-text { color:var(--sda-text-primary); }
.host-logos .logo-link.only-tablet-up { display:none; }
@media (min-width:768px) { .host-logos .logo-link.only-tablet-up { display:inline-flex; } }

/* Text wordmark used until the real logo file is delivered */
.logo-text { display:inline-flex; align-items:center; height:44px; font:500 26px/1 var(--sda-type-family-body); letter-spacing:-0.02em; color:var(--sda-text-primary); white-space:nowrap; }

.badge { display:flex; align-items:center; gap:var(--sda-spacing-16); text-align:right; }
.badge-text { display:flex; flex-direction:column; align-items:flex-end; gap:var(--sda-spacing-4); }
.badge-tagline { display:none; }
@media (min-width:768px) { .badge-tagline { display:block; } }
.orb { position:relative; width:56px; height:56px; border-radius:50%; overflow:hidden; flex:none;
  background:radial-gradient(circle at 50% 50%, #F6E8FF 0, var(--sda-magenta-500) 35%, var(--sda-plum-500) 70%, var(--sda-indigo-500) 100%);
  box-shadow:var(--sda-glow-plum); animation:breathe calc(var(--sda-motion-duration-ambient) / 5) var(--sda-motion-ease-ambient) infinite alternate; }
.orb::before { content:""; position:absolute; inset:0; border-radius:50%; mix-blend-mode:soft-light;
  background:conic-gradient(from 0deg, rgb(255 255 255 / 0.5), transparent 30%, rgb(79 108 255 / 0.6) 55%, transparent 80%, rgb(255 255 255 / 0.5));
  animation:spin var(--sda-motion-duration-ambient) linear infinite; }
.orb::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 0 2px rgb(79 108 255 / 0.9); }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes breathe { to { box-shadow:0 0 72px rgb(143 0 201 / 0.75); } }

/* =========================================================
   6. HERO + SLIDER
   ========================================================= */
.stage { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; }
.hero { padding-top:56px; }
@media (min-width:768px) { .hero { padding-top:96px; } }
@media (min-width:1440px) { .hero { padding-top:114px; } }
.hero-inner, .slide { display:flex; flex-direction:column; gap:var(--sda-spacing-24); }
@media (min-width:768px) { .hero-inner, .slide { gap:var(--sda-spacing-32); } }
@media (min-width:1440px) { .hero-inner, .slide { gap:var(--sda-spacing-40); } }
.eyebrow { color:var(--sda-text-accent); }
.headline { margin:0; max-width:1200px; text-wrap:balance; }
.lead { max-width:1060px; text-wrap:pretty; }

/* Slide change (Motion spec: out = base/exit, rise 16px; in = dramatic/enter, rise 24px + de-blur 8px; stagger 80ms) */
.anim { will-change:opacity, transform, filter; }
.anim.is-out { opacity:0; transform:translateY(-16px);
  transition:opacity var(--sda-motion-duration-base) var(--sda-motion-ease-exit), transform var(--sda-motion-duration-base) var(--sda-motion-ease-exit);
  transition-delay:var(--out-delay, 0ms); }
.anim.is-prep { opacity:0; transform:translateY(24px); filter:blur(8px); transition:none; }
.anim.is-in { transition:opacity var(--sda-motion-duration-dramatic) var(--sda-motion-ease-enter), transform var(--sda-motion-duration-dramatic) var(--sda-motion-ease-enter), filter var(--sda-motion-duration-dramatic) var(--sda-motion-ease-enter);
  transition-delay:var(--in-delay, 0ms); }
.lead.anim { --out-delay:80ms; --in-delay:80ms; }

/* Event + countdown (fixed on all slides) */
.event { align-self:flex-start; display:inline-flex; align-items:center; gap:var(--sda-spacing-32);
  padding:var(--sda-spacing-16) var(--sda-spacing-20); border-radius:var(--sda-radius-md);
  background:var(--sda-fill-surface-80); border:1px solid var(--sda-border-subtle);
  backdrop-filter:blur(var(--sda-blur-glass)); -webkit-backdrop-filter:blur(var(--sda-blur-glass)); }
.event-info { color:var(--sda-text-accent); text-transform:uppercase; }
.event-info .line { display:block; }
.event-info-inline { display:none; }
.tiles { display:flex; gap:var(--sda-spacing-12); }
.tile { width:108px; display:flex; flex-direction:column; align-items:center; gap:var(--sda-spacing-4);
  padding:var(--sda-spacing-12) var(--sda-spacing-4); border-radius:var(--sda-radius-lg);
  background:var(--sda-fill-surface-60); border:1px solid var(--sda-border-glass); }
.tile-value { display:block; overflow:hidden; }
.tile-value span { display:inline-block; }
.tile-value span.tick { animation:tick var(--sda-motion-duration-base) var(--sda-motion-ease-standard); }
.tile-unit { color:var(--sda-text-secondary); }
@keyframes tick { from { transform:translateY(60%); opacity:0; } to { transform:none; opacity:1; } }
@media (max-width:1439.98px) {
  .event { align-self:stretch; display:flex; flex-direction:column; align-items:stretch; gap:var(--sda-spacing-20); }
  .tiles { gap:var(--sda-spacing-8); }
  .tile { width:auto; flex:1 1 0; min-width:0; }
}
@media (min-width:768px) and (max-width:1439.98px) {
  .event-info-lines { display:none; }
  .event-info-inline { display:block; }
}

/* Carousel navigation */
.carousel-nav { margin-top:auto; padding:48px 0 64px; display:flex; justify-content:center; }
@media (min-width:768px) { .carousel-nav { padding:72px 0 96px; } }
@media (min-width:1440px) { .carousel-nav { padding:72px 0 80px; } }
.nav-inner { display:flex; align-items:center; gap:var(--sda-spacing-20); }
.nav-balance { width:32px; height:32px; }
.dots { display:flex; align-items:center; }
.dot { width:32px; height:44px; display:grid; place-items:center; border-radius:var(--sda-radius-sm); }
.dot::before { content:""; width:12px; height:12px; border-radius:50%; background:var(--sda-text-primary); opacity:var(--sda-opacity-10);
  transition:background var(--sda-motion-duration-fast) var(--sda-motion-ease-standard), opacity var(--sda-motion-duration-fast) var(--sda-motion-ease-standard), box-shadow var(--sda-motion-duration-fast) var(--sda-motion-ease-standard); }
.dot:hover::before { opacity:var(--sda-opacity-40); }
.dot[aria-current="true"]::before { background:var(--sda-accent-magenta); opacity:var(--sda-opacity-100); box-shadow:var(--sda-glow-magenta); }
.playback { width:32px; height:32px; border-radius:var(--sda-radius-full); display:grid; place-items:center;
  background:var(--sda-fill-primary-20); color:var(--sda-text-primary); font-size:var(--sda-icon-sm);
  opacity:0; transition:opacity var(--sda-motion-duration-fast) var(--sda-motion-ease-standard), background var(--sda-motion-duration-instant) var(--sda-motion-ease-standard); }
.playback > span { display:grid; place-items:center; }
.carousel-nav:hover .playback, .carousel-nav:focus-within .playback, .playback.is-paused { opacity:var(--sda-opacity-100); }
.playback:hover { background:var(--sda-fill-primary-40); }
@media (hover:none) { .playback { opacity:var(--sda-opacity-100); } }

/* =========================================================
   7. PARTNER STRIP + LEGAL
   ========================================================= */
.partners { position:relative; z-index:1; background:var(--sda-fill-canvas-50); border-top:1px solid var(--sda-border-subtle);
  display:flex; flex-direction:column; gap:var(--sda-spacing-24); padding:var(--sda-spacing-24) var(--page-margin-edge); }
.partner-group { display:flex; flex-direction:column; gap:var(--sda-spacing-24); }
.partner-label { color:var(--sda-text-accent); }
.partner-logos { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sda-spacing-16) var(--sda-spacing-32); }
.partner-logos li { display:flex; align-items:center; }
.partner-logo { height:44px; width:auto; display:block; }
.partner-logo.logo-text { display:inline-flex; }
.partner-logo.logo-text { font:600 22px/1 var(--sda-type-family-display); letter-spacing:0.04em; color:var(--sda-text-secondary); }
.partner-tba { color:var(--sda-text-muted); }
.legal { display:flex; flex-direction:column; gap:var(--sda-spacing-4); color:var(--sda-text-muted); }
.legal a { text-decoration:none; color:var(--sda-text-secondary); }
.legal a:hover { color:var(--sda-text-primary); text-decoration:underline; text-underline-offset:3px; }
@media (min-width:1440px) {
  /* Right padding keeps the fixed contact button clear of the legal links */
  .partners { flex-direction:row; align-items:center; gap:var(--sda-spacing-64); padding-right:calc(48px + 76px + var(--sda-spacing-32)); }
  .partner-group { flex-direction:row; align-items:center; }
  .partner-logos { flex-wrap:nowrap; }
  .legal { margin-left:auto; text-align:right; }
}
/* Below desktop the button floats over the hero; keep the last strip line clear of it */
@media (max-width:767.98px) { .partners { padding-bottom:calc(16px + 56px + var(--sda-spacing-16)); } }
@media (min-width:768px) and (max-width:1439.98px) { .partners { padding-bottom:calc(32px + 76px + var(--sda-spacing-16)); } }

/* =========================================================
   8. CONTACT
   ========================================================= */
.contact { position:fixed; z-index:10; right:16px; bottom:16px; --btn:56px; --pop:300px; }
@media (min-width:768px) { .contact { right:32px; bottom:32px; --btn:76px; --pop:320px; } }
@media (min-width:1440px) { .contact { right:48px; bottom:34px; } }
.contact-btn { width:var(--btn); height:var(--btn); border-radius:var(--sda-radius-full); display:grid; place-items:center;
  background:var(--sda-accent-magenta); color:var(--sda-text-on-accent); box-shadow:var(--sda-glow-magenta);
  font-size:var(--sda-icon-lg);
  transition:transform var(--sda-motion-duration-fast) var(--sda-motion-ease-standard), background var(--sda-motion-duration-instant) var(--sda-motion-ease-standard);
  animation:cta-pulse 4s var(--sda-motion-ease-standard) infinite; }
.contact-btn > span { display:grid; place-items:center; }
@media (min-width:768px) { .contact-btn { font-size:var(--sda-icon-xl); } }
.contact-btn:hover { background:var(--sda-accent-magenta-hover); transform:scale(1.04); animation:none; }
.contact-btn:active { transform:scale(0.98); }
.contact.is-open .contact-btn { animation:none; }
.contact-btn:focus-visible { outline-offset:3px; border-radius:var(--sda-radius-full); }
@keyframes cta-pulse { 0%, 70%, 100% { box-shadow:var(--sda-glow-magenta); } 30% { box-shadow:var(--sda-glow-magenta-strong); } }

.popover { position:absolute; right:0; bottom:calc(100% + 4px); width:var(--pop); max-width:calc(100vw - 32px);
  display:flex; flex-direction:column; gap:var(--sda-spacing-12); padding:var(--sda-spacing-20);
  background:var(--sda-bg-surface-raised); border:1px solid var(--sda-border-glass); border-radius:var(--sda-radius-xl); box-shadow:var(--sda-glow-plum);
  opacity:0; transform:translateY(8px); visibility:hidden;
  transition:opacity var(--sda-motion-duration-fast) var(--sda-motion-ease-enter), transform var(--sda-motion-duration-fast) var(--sda-motion-ease-enter), visibility 0s linear var(--sda-motion-duration-fast); }
.contact.is-open .popover { opacity:1; transform:none; visibility:visible; transition-delay:0s; }
.popover-label { color:var(--sda-text-muted); }
.popover-email { color:var(--sda-text-primary); text-decoration:none; word-break:break-all; }
.popover-email:hover { text-decoration:underline; text-underline-offset:4px; }
.copy-btn { align-self:flex-start; display:inline-flex; align-items:center; gap:var(--sda-spacing-8);
  padding:var(--sda-spacing-8) var(--sda-spacing-16); border:1px solid var(--sda-border-strong); border-radius:var(--sda-radius-full);
  color:var(--sda-text-primary); transition:border-color var(--sda-motion-duration-fast) var(--sda-motion-ease-standard), color var(--sda-motion-duration-fast) var(--sda-motion-ease-standard), background var(--sda-motion-duration-instant); }
.copy-btn:hover { background:var(--sda-fill-primary-20); }
.copy-btn .ico { font-size:var(--sda-icon-md); display:inline-grid; place-items:center; }
.copy-btn.is-copied { border-color:var(--sda-status-success); color:var(--sda-status-success); }

/* Without JS the popover is unreachable, so show the address directly */
.no-js .contact .popover { opacity:1; visibility:visible; transform:none; position:static; margin-bottom:8px; }

/* =========================================================
   9. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .blob, .aurora-shift, .orb, .orb::before, .contact-btn { animation:none !important; }
  .aurora-shift { transition:none; }
  .anim.is-out { transform:none; transition:opacity var(--sda-motion-duration-fast) linear; transition-delay:0ms; }
  .anim.is-prep { transform:none; filter:none; }
  .anim.is-in { transition:opacity var(--sda-motion-duration-fast) linear; transition-delay:0ms; }
  .tile-value span.tick { animation:none; }
  .contact-btn:hover { transform:none; }
}