/* =====================================================================
   AdGeeks brand stylesheet v1.0
   Tokens and components measured from the "AdGeeks Intelligence" deck.
   Paste into a <style> tag (deliverables stay self-contained).

   Fonts - put these in <head> first (two links on purpose: if one
   family fails, the other still loads):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@300..700&display=swap">

   Quick map
   themes ........ .ag-light  .ag-dark   (+ .ag-grid  .ag-glow)
   slide canvas .. .ag-slide  (1920x1080, switches type to deck sizes)
   type .......... .ag-mega .ag-statement .ag-display .ag-section-title
                   .ag-card-title .ag-title .ag-lead .ag-body .ag-small .ag-eyebrow
   brand ......... .ag-lockup .ag-gradient-text .ag-glow-text .ag-pill .ag-tag
   surfaces ...... .ag-card--night|white|mist|blush|pink|glass  .ag-bubble .ag-reply
   ui ............ .ag-feature .ag-icon-tile .ag-chip .ag-kpi .ag-btn .ag-device .ag-chat
   ===================================================================== */

:root {
  /* ---- Brand pink ---------------------------------------------------- */
  --ag-pink: #F52560;          /* master brand (AdGeeks.agency): mark, accents, large type */
  --ag-pink-ink: #D6104A;      /* small pink text on white; fill behind small white labels (5.2:1) */
  --ag-blush: #FFF2F4;         /* palest pink tint */

  /* ---- AdGeeks Intelligence gradient ---------------------------------- */
  --ag-grad-a: #FF0074;
  --ag-grad-b: #F500E9;
  --ag-grad-c: #5E88FE;
  --ag-gradient: linear-gradient(90deg, var(--ag-grad-a) 0%, var(--ag-grad-b) 45%, var(--ag-grad-c) 100%);

  /* ---- Dark neutrals -------------------------------------------------- */
  --ag-night: #121212;         /* dark canvas */
  --ag-night-card: #1A1A1A;    /* dark card */
  --ag-night-deep: #0C0C0C;    /* glass card base */
  --ag-on-night: #FFFFFF;
  --ag-on-night-soft: #E6E6E6; /* titles in glass cards */
  --ag-on-night-muted: #A0A0A0;/* secondary text on dark (7.2:1) */

  /* ---- Light neutrals ------------------------------------------------- */
  --ag-paper: #FFFFFF;
  --ag-paper-card: #F0F0F0;
  --ag-paper-line: #EBEBEB;
  --ag-ink: #252525;           /* text and headlines on light */
  --ag-ink-strong: #000000;    /* card titles on white */
  --ag-ink-logo: #303030;      /* wordmark and lockup on light */
  --ag-ink-muted: #656565;     /* secondary text on light (5.8:1) */

  /* ---- Jelly pills (vertical gradients sampled from the deck) --------- */
  --ag-pill-pink: linear-gradient(180deg, #FF8EBC 0%, #FA508B 50%, #F63A74 100%);
  --ag-pill-purple: linear-gradient(180deg, #CE80FB 0%, #B146EF 50%, #A335E3 100%);
  --ag-pill-coral: linear-gradient(180deg, #FB9279 0%, #EE5946 50%, #E44339 100%);
  --ag-pill-sky: linear-gradient(180deg, #A3E6FF 0%, #5CC6F7 50%, #35AEF0 100%);

  /* ---- Data and status ------------------------------------------------ */
  --ag-data-1: #F52560; --ag-data-2: #5E88FE; --ag-data-3: #A335E3; --ag-data-4: #FB9279; --ag-data-5: #A0A0A0;
  --ag-up: #16804A; --ag-down: #C8323F;   /* light surfaces; dark versions set in .ag-dark */

  /* ---- Type ------------------------------------------------------------ */
  --ag-font: "Google Sans", "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ag-font-display: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* web scale (fluid). .ag-slide switches to the exact deck sizes */
  --ag-fs-mega: clamp(56px, 9vw, 128px);
  --ag-fs-statement: clamp(36px, 5.4vw, 80px);
  --ag-fs-hero: clamp(34px, 4.6vw, 64px);
  --ag-fs-section: clamp(28px, 3.4vw, 48px);
  --ag-fs-card-lg: clamp(24px, 2.6vw, 40px);
  --ag-fs-title: clamp(19px, 1.8vw, 26px);
  --ag-fs-lead: clamp(18px, 1.6vw, 22px);
  --ag-fs-body: 17px;
  --ag-fs-small: 14px;
  --ag-fs-eyebrow: 13px;
  --ag-fs-eyebrow-lg: clamp(14px, 1.4vw, 20px);
  --ag-fs-lockup: 20px;

  /* ---- Shape, space, grid --------------------------------------------- */
  --ag-radius-card: 28px;
  --ag-radius-bubble: 18px;
  --ag-radius-tile: 12px;
  --ag-radius-btn: 14px;
  --ag-pad: 28px;
  --ag-gap: 20px;
  --ag-grid-size: 40px;
}


/* ---- Slide canvas: exact deck sizes at 1920x1080 ---------------------- */
.ag-slide {
  --ag-fs-mega: 128px; --ag-fs-statement: 80px; --ag-fs-hero: 64px; --ag-fs-section: 48px;
  --ag-fs-card-lg: 40px; --ag-fs-title: 32px; --ag-fs-lead: 28px; --ag-fs-body: 24px;
  --ag-fs-small: 16px; --ag-fs-eyebrow: 20px; --ag-fs-eyebrow-lg: 32px; --ag-fs-lockup: 28px;
  --ag-radius-card: 40px; --ag-radius-bubble: 24px; --ag-pad: 44px; --ag-gap: 24px;
  --ag-grid-size: 44px;
  position: relative; width: 1920px; height: 1080px; overflow: hidden; box-sizing: border-box;
}
.ag-slide *, .ag-slide *::before, .ag-slide *::after { box-sizing: border-box; }

/* ---- Themes ------------------------------------------------------------ */
.ag-light, .ag-dark, .ag-grid, .ag-glow { position: relative; isolation: isolate; }
.ag-light, .ag-dark {
  font-family: var(--ag-font); font-size: var(--ag-fs-body); line-height: 1.3;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
.ag-light {
  background-color: var(--ag-paper); color: var(--ag-ink);
  --ag-muted: var(--ag-ink-muted); --ag-line: var(--ag-paper-line); --ag-logo: var(--ag-ink-logo);
  --ag-eyebrow: var(--ag-ink); --ag-link: var(--ag-pink-ink);
  --ag-grid-line: rgba(0, 0, 0, .045); --ag-grid-fade: 100%;
  --ag-tile-bg: #F3F3F3; --ag-tile-border: #E9E9E9; --ag-tile-fg: var(--ag-ink);
  --ag-up: #16804A; --ag-down: #C8323F;
}
.ag-dark {
  background-color: var(--ag-night); color: var(--ag-on-night);
  --ag-muted: var(--ag-on-night-muted); --ag-line: rgba(255, 255, 255, .1); --ag-logo: #FFFFFF;
  --ag-eyebrow: var(--ag-pink); --ag-link: var(--ag-pink);
  --ag-grid-line: rgba(255, 255, 255, .03); --ag-grid-fade: 70%;
  --ag-tile-bg: rgba(255, 255, 255, .07); --ag-tile-border: rgba(255, 255, 255, .06); --ag-tile-fg: #FFFFFF;
  --ag-up: #34C77B; --ag-down: #FF6B6B;
}
.ag-light a:not([class]), .ag-dark a:not([class]) { color: var(--ag-link); text-underline-offset: .16em; }

/* Grid: 1px lines, fading out toward the bottom */
.ag-grid::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--ag-grid-line) 1px, transparent 1px),
    linear-gradient(180deg, var(--ag-grid-line) 1px, transparent 1px);
  background-size: var(--ag-grid-size) var(--ag-grid-size);
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent var(--ag-grid-fade, 100%));
          mask-image: linear-gradient(180deg, #000 0%, transparent var(--ag-grid-fade, 100%));
}
/* Aurora: purple top-left, pink top-right, gone by ~40% of a slide's height */
.ag-glow::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1100px 520px at 6% -80px, rgba(160, 24, 190, .2), transparent 70%),
    radial-gradient(1000px 520px at 94% -80px, rgba(245, 37, 96, .17), transparent 70%);
}

/* ---- Type ---------------------------------------------------------------- */
.ag-mega { margin: 0; font-size: var(--ag-fs-mega); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.ag-statement { margin: 0; font-size: var(--ag-fs-statement); font-weight: 500; line-height: 1.42; letter-spacing: -.012em; }
.ag-display { margin: 0; font-family: var(--ag-font-display); font-size: var(--ag-fs-hero); font-weight: 300; line-height: 1.1; letter-spacing: -.01em; }
.ag-section-title { margin: 0; font-family: var(--ag-font-display); font-size: var(--ag-fs-section); font-weight: 300; line-height: 1.15; letter-spacing: -.005em; }
.ag-section-title--regular { font-weight: 400; }
.ag-display b, .ag-display strong, .ag-section-title b, .ag-section-title strong { font-weight: 500; }
.ag-display em, .ag-section-title em, .ag-statement em, .ag-accent { font-family: var(--ag-font); font-style: italic; font-weight: 500; }
.ag-card-title { margin: 0; font-size: var(--ag-fs-card-lg); font-weight: 400; line-height: 1.25; }
.ag-title { margin: 0; font-size: var(--ag-fs-title); font-weight: 400; line-height: 1.22; }
.ag-title--strong { font-weight: 500; }
.ag-lead { margin: 0; font-size: var(--ag-fs-lead); line-height: 1.35; color: var(--ag-muted); }
.ag-body { margin: 0; font-size: var(--ag-fs-body); line-height: 1.3; color: var(--ag-muted); }
.ag-small { margin: 0; font-size: var(--ag-fs-small); line-height: 1.4; color: var(--ag-muted); }
.ag-muted { color: var(--ag-muted); }
.ag-eyebrow {
  margin: 0 0 .7em; font-size: var(--ag-fs-eyebrow); font-weight: 400; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .02em; color: var(--ag-eyebrow);
}
.ag-eyebrow--lg { font-size: var(--ag-fs-eyebrow-lg); }
.ag-eyebrow--pink { color: var(--ag-pink-ink); }
.ag-dark .ag-eyebrow--pink { color: var(--ag-pink); }
:lang(ka) .ag-eyebrow, .ag-eyebrow:lang(ka) { text-transform: none; letter-spacing: 0; } /* keep Mkhedruli, avoid Mtavruli */

.ag-gradient-text {
  background-image: var(--ag-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Soft glow that follows the gradient. Needs data-text="same text" on the element. */
.ag-glow-text { position: relative; }
.ag-glow-text::after {
  content: attr(data-text); position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--ag-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: blur(.2em); opacity: .7;
}

/* ---- Logo lockup (logo + product name) ---------------------------------- */
.ag-lockup {
  display: inline-flex; align-items: center; gap: .5em; font-size: var(--ag-fs-lockup);
  line-height: 1; color: var(--ag-logo, var(--ag-ink-logo)); text-decoration: none; white-space: nowrap;
}
.ag-lockup > svg, .ag-lockup > img { display: block; flex: none; height: 1.15em; width: auto; }
.ag-lockup-name { font-weight: 400; letter-spacing: -.005em; }
.ag-slide > .ag-lockup { position: absolute; left: 78px; top: 58px; z-index: 5; }

/* ---- Cards --------------------------------------------------------------- */
.ag-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  border-radius: var(--ag-radius-card); padding: var(--ag-pad); overflow: hidden; box-sizing: border-box;
}
.ag-card--night {
  background: linear-gradient(180deg, #1D1D1D 0%, #141414 100%); color: #FFFFFF;
  --ag-muted: #BEBEBE; --ag-eyebrow: var(--ag-pink); --ag-logo: #FFFFFF;
  --ag-tile-bg: rgba(255, 255, 255, .08); --ag-tile-border: rgba(255, 255, 255, .06); --ag-tile-fg: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.ag-card--white {
  background: #FFFFFF; border: 1px solid var(--ag-paper-line); color: var(--ag-ink-strong); --ag-muted: #6A6A6A;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 14px 32px -18px rgba(0, 0, 0, .12);
}
.ag-card--mist { background: linear-gradient(180deg, #F1F1F1 0%, #F8F8F8 100%); border: 1px solid #ECECEC; color: var(--ag-ink-strong); --ag-muted: #6A6A6A; }
.ag-card--blush { background: linear-gradient(165deg, #FFE6EC 0%, #FFF5F7 45%, #FFFFFF 100%); border: 1px solid #F9DDE4; color: var(--ag-ink-strong); --ag-muted: #6A6767; --ag-tile-bg: #FFFFFF; --ag-tile-border: #F6D9E0; }
.ag-card--pink {
  background: radial-gradient(140% 120% at 0% 0%, #F8A9CB 0%, #EE5C9A 30%, #E0187A 62%, #C8005A 100%);
  color: #FFFFFF; --ag-muted: rgba(255, 255, 255, .85); --ag-eyebrow: #FFFFFF;
  --ag-tile-bg: rgba(255, 255, 255, .18); --ag-tile-border: rgba(255, 255, 255, .25); --ag-tile-fg: #FFFFFF;
}
.ag-card--glass {
  background: linear-gradient(180deg, #171717 0%, #0C0C0C 100%); border: 1px solid rgba(255, 255, 255, .06);
  color: var(--ag-on-night-soft); --ag-muted: var(--ag-on-night-muted); --ag-eyebrow: var(--ag-pink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 40px 80px -24px rgba(0, 0, 0, .6);
}
/* Glyph rain texture for the pink card (fades in from the left) */
.ag-texture-glyphs::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='230'%3E%3Cg font-family='ui-monospace,Menlo,monospace' font-size='26' fill='%23ffffff'%3E%3Ctext x='6' y='34'%3Eh u 1 0 4 a x m z%3C/text%3E%3Ctext x='6' y='80'%3E4 y m 8 8 6 b q e%3C/text%3E%3Ctext x='6' y='126'%3Eq p 0 6 f 9 3 x v%3C/text%3E%3Ctext x='6' y='172'%3Ej 5 k 6 b 9 3 7 r%3C/text%3E%3Ctext x='6' y='218'%3E9 1 j 3 k c 5 d e%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size: 330px 230px;
  -webkit-mask-image: linear-gradient(100deg, transparent 15%, #000 70%);
          mask-image: linear-gradient(100deg, transparent 15%, #000 70%);
}

/* ---- Icon tile + feature row -------------------------------------------- */
.ag-icon-tile {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center; box-sizing: border-box;
  border-radius: var(--ag-radius-tile); background: var(--ag-tile-bg); border: 1px solid var(--ag-tile-border); color: var(--ag-tile-fg);
}
.ag-icon-tile > svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ag-icon-tile--sm { width: 40px; height: 40px; border-radius: 10px; }
.ag-icon-tile--sm > svg { width: 20px; height: 20px; }
.ag-feature { display: flex; gap: 18px; align-items: flex-start; }
.ag-feature > .ag-icon-tile { margin-top: -5px; }

/* ---- Jelly pills (1-3 key words in a statement) and tilted tags ---------- */
.ag-pill {
  display: inline-block; margin: 0 .03em; padding: .01em .3em .07em; border-radius: .22em;
  font-weight: 400; line-height: 1.22; color: #FFFFFF; background: var(--ag-pill-pink);
  box-shadow: inset 0 .06em .05em rgba(255, 255, 255, .5), inset 0 -.07em .12em rgba(255, 255, 255, .2),
              0 .14em .4em -.06em var(--ag-pill-glow, rgba(246, 58, 116, .5));
  text-shadow: 0 .03em .06em rgba(0, 0, 0, .08);
}
.ag-pill--purple { background: var(--ag-pill-purple); --ag-pill-glow: rgba(163, 53, 227, .45); }
.ag-pill--coral { background: var(--ag-pill-coral); --ag-pill-glow: rgba(228, 67, 57, .45); }
.ag-pill--sky { background: var(--ag-pill-sky); --ag-pill-glow: rgba(53, 174, 240, .45); }
.ag-tag {
  display: inline-block; padding: .08em .5em .16em; border-radius: .38em; font-size: var(--ag-fs-lead); font-weight: 400;
  line-height: 1.2; color: #FFFFFF; background: linear-gradient(180deg, #FF8A98 0%, #F2405F 100%);
  box-shadow: inset 0 .06em .05em rgba(255, 255, 255, .45), 0 .2em .5em -.1em rgba(242, 64, 95, .5);
  transform: rotate(-8deg);
}
.ag-tag--sky { background: var(--ag-pill-sky); box-shadow: inset 0 .06em .05em rgba(255, 255, 255, .5), 0 .2em .5em -.1em rgba(53, 174, 240, .5); transform: rotate(-6deg); }

/* ---- Glass chat bubble + fading reply (dark surfaces) -------------------- */
.ag-bubble {
  position: relative; border-radius: var(--ag-radius-bubble); padding: 22px 26px; color: #FFFFFF;
  font-size: var(--ag-fs-body); line-height: 1.25;
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .17);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 48px -12px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.ag-bubble b, .ag-bubble strong { font-weight: 500; }
.ag-reply {
  margin: -1px 14px 0; padding: 18px 22px 22px; border: 1px solid rgba(255, 255, 255, .07); border-top: 0;
  border-radius: 0 0 18px 18px; background: rgba(255, 255, 255, .025); color: #FFFFFF;
  font-size: calc(var(--ag-fs-body) * .9); line-height: 1.3;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
}
.ag-reply p { margin: 0; }
.ag-blur { filter: blur(3px); }

/* ---- Product UI mockups ---------------------------------------------------- */
.ag-device {
  position: relative; box-sizing: border-box; padding: 14px; border-radius: 38px;
  background: linear-gradient(180deg, #202020, #141414); border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .7);
}
.ag-device::before { content: ""; position: absolute; top: 14px; left: 50%; z-index: 2; width: 150px; height: 24px; transform: translateX(-50%); border-radius: 0 0 14px 14px; background: #161616; }
.ag-screen { height: 100%; border-radius: 24px; overflow: hidden; background: #FFFFFF; color: #1D1C1D; }
.ag-chat { font-family: var(--ag-font); font-size: 17px; line-height: 1.45; color: #1D1C1D; text-align: left; }
.ag-chat-head { display: flex; align-items: center; gap: 8px; padding: 18px 26px; border-bottom: 1px solid #ECECEC; font-size: 19px; font-weight: 500; }
.ag-msg { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 12px 26px; }
.ag-msg p { margin: 2px 0 0; }
.ag-msg-name { font-weight: 500; }
.ag-msg-time { margin-left: 8px; font-size: .78em; color: #8A8A8A; }
.ag-avatar { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--ag-data-2); color: #FFFFFF; font-size: 15px; font-weight: 500; }
.ag-avatar--mark { background: var(--ag-pink); }
.ag-avatar > svg { display: block; width: 100%; height: 100%; }
.ag-mention { padding: 0 3px; border-radius: 4px; background: rgba(245, 37, 96, .1); color: var(--ag-pink-ink); }
.ag-chat a { color: var(--ag-pink-ink); text-decoration: underline; text-underline-offset: .15em; }

/* Frosted app icon with the mark (one per slide) */
.ag-app-icon {
  --size: 320px; position: relative; display: grid; place-items: center; width: var(--size); height: var(--size); border-radius: 27%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .75) 0%, rgba(255, 232, 242, .68) 48%, rgba(215, 120, 225, .85) 100%);
  border: 1px solid rgba(245, 37, 96, .22);
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .95), inset 0 0 calc(var(--size) * .14) rgba(255, 40, 150, .28),
              0 calc(var(--size) * .14) calc(var(--size) * .3) calc(var(--size) * -.08) rgba(190, 70, 210, .45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ag-app-icon > svg { width: 50%; height: 50%; }

/* ---- Chips, KPIs, buttons ------------------------------------------------- */
.ag-chip {
  display: inline-flex; align-items: center; gap: .5em; padding: .55em 1em; border-radius: 12px; white-space: nowrap;
  background: #FFFFFF; border: 1px solid var(--ag-paper-line); color: var(--ag-ink); font-size: var(--ag-fs-small);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .18);
}
.ag-chip--dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: #FFFFFF; box-shadow: none; }
.ag-kpi { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--ag-paper-line); color: var(--ag-ink); }
.ag-kpi-label { font-size: var(--ag-fs-small); color: var(--ag-ink-muted); }
.ag-kpi-value { font-size: clamp(28px, 3vw, 40px); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ag-delta { font-size: var(--ag-fs-small); font-weight: 500; font-variant-numeric: tabular-nums; }
.ag-delta--up { color: var(--ag-up); }      /* good change (color = good/bad, arrow = direction) */
.ag-delta--down { color: var(--ag-down); }  /* bad change */
.ag-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .85em 1.35em; box-sizing: border-box;
  border-radius: var(--ag-radius-btn); border: 1px solid transparent; font: 500 16px/1 var(--ag-font);
  text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .15s ease;
}
.ag-btn:hover { transform: translateY(-1px); }
.ag-btn--pink { background: var(--ag-pink-ink); color: #FFFFFF; box-shadow: 0 10px 24px -10px rgba(214, 16, 74, .6); }
.ag-btn--ink { background: var(--ag-ink); color: #FFFFFF; }
.ag-dark .ag-btn--ink { background: #FFFFFF; color: var(--ag-night); }
.ag-btn--ghost { background: transparent; color: inherit; border-color: var(--ag-line); }
.ag-btn:focus-visible, .ag-lockup:focus-visible { outline: 2px solid var(--ag-pink); outline-offset: 3px; }

/* ---- Fades and gradient edge -------------------------------------------- */
.ag-fade-bottom { -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%); mask-image: linear-gradient(180deg, #000 50%, transparent 100%); }
.ag-fade-right { -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent 100%); mask-image: linear-gradient(90deg, #000 60%, transparent 100%); }
/* Gradient hairline around one hero screenshot. Put overflow:hidden on a child, not on this element. */
.ag-gradient-frame { position: relative; border-radius: 20px; }
.ag-gradient-frame::before {
  content: ""; position: absolute; inset: -2px; z-index: 1; pointer-events: none; border-radius: inherit; padding: 2px;
  background: var(--ag-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 10px rgba(245, 0, 233, .55));
}
.ag-hairline { height: 1px; border: 0; background: var(--ag-gradient); }

@media print { .ag-light, .ag-dark, .ag-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }