/* ==========================================================================
   DMsetting.com — Design System
   Extracted from the live site (dmsetting.com) on 2026-07-29.
   Every section of the Accelerator sales page pulls from these tokens.
   ========================================================================== */

/* --- Brand font (Adobe Fonts / museo-sans — same kit the live site uses) --- */
@import url("https://use.typekit.net/qie2yvx.css");

:root {
  /* ----- Color: core palette (verbatim from live site) ----- */
  --brand-green-deep:   #00674F;                     /* primary — buttons, links hover */
  --brand-green:        #2EA384;                     /* accent — eyebrows, links, hovers */
  --brand-green-bright: #34D4A9;                     /* glow color (used at 20% alpha) */
  --brand-mint:         #D3F4E9;                     /* pale mint — subtle highlights */
  --brand-yellow:       #ffd629;                     /* attention accent (sparingly) */
  --brand-yellow-soft:  rgba(255, 201, 51, 0.2);
  --brand-red:          #ff123b;                     /* alerts / strike-through pricing */
  --brand-red-soft:     rgba(255, 18, 57, 0.2);
  --brand-gray:         #767C7A;

  /* ----- Color: surfaces ----- */
  --bg-page:            #0a1411;                     /* page background (dark green-black) */
  --bg-surface:         #141716;                     /* cards, elevated blocks */
  --bg-surface-deep:    #0f1110;                     /* footer / deepest surfaces */
  --bg-card-green:      #101f1a;                     /* green-tinted stat/calculator cards */

  /* ----- Color: text ----- */
  --text-heading:       #FFFFFF;
  --text-body:          rgba(255, 255, 255, 0.6);
  --text-inverse:       #0f1110;                     /* text on light/green surfaces */

  /* ----- Color: lines & glows ----- */
  --border-subtle:      rgba(242, 243, 245, 0.1);    /* theme border color */
  --border-card:        rgba(255, 255, 255, 0.09);   /* 1px card borders */
  --glow-green:         rgba(52, 212, 169, 0.2);     /* radial section glows */

  /* ----- Gradients (used on accent bars / highlights) ----- */
  --grad-green:         linear-gradient(90deg, #4CD4B0 0%, #219174 100%);
  --grad-green-rev:     linear-gradient(90deg, #219174 0%, #4CD4B0 100%);
  --grad-green-dark:    linear-gradient(90deg, #2EA384 0%, #00674F 100%);  /* darker blend — text & buttons on light bg */
  --grad-glow-bottom:   radial-gradient(at 50% 100%, var(--glow-green) 0%, rgba(0,0,0,0) 80%);
  --grad-glow-right:    radial-gradient(at 100% 50%, var(--glow-green) 0%, rgba(0,0,0,0) 60%);
  --grad-glow-center:   radial-gradient(var(--glow-green) 0%, rgba(0,0,0,0) 60%);

  /* ----- Typography ----- */
  --font-brand:         "museo-sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                        Roboto, Helvetica, Arial, sans-serif;

  /* Scale (desktop values from live site; clamp() makes them responsive) */
  --fs-h1:              clamp(38px, 5vw, 68px);      /* 68px / 600 / -0.02em / lh 1.1 */
  --fs-h2:              clamp(32px, 4.6vw, 54px);    /* CANONICAL section heading — use for every section title */
  --fs-h3:              clamp(22px, 2.5vw, 28px);    /* 28px / 600 / lh 1.2 */
  --fs-h4:              20px;                        /* 600 */
  --fs-h5:              20px;                        /* 500 — section subheads */
  --fs-eyebrow:         12px;                        /* 500, uppercase, letter-spacing, green */
  --fs-body:            16px;
  --fs-small:           14px;
  --fs-button:          15px;

  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;

  --lh-tight:           1.1;
  --lh-heading:         1.2;
  --lh-body:            1.5;

  --ls-h1:              -0.02em;
  --ls-h2:              -0.01em;
  --ls-eyebrow:         0.12em;

  /* ----- Layout ----- */
  --container:          1140px;                      /* normal container */
  --container-narrow:   880px;                       /* narrow container */
  --section-pad-y:      clamp(60px, 9vw, 110px);
  --content-gap:        1.5em;

  /* ----- Shape & elevation ----- */
  --radius-card:        16px;
  --radius-card-sm:     14px;
  --radius-pill:        50px;                        /* buttons are pills */
  --shadow-card:        0 20px 60px rgba(0, 0, 0, 0.35);

  /* ----- Motion ----- */
  --transition:         all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

/* ==========================================================================
   Base
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--bg-page); }

body {
  min-height: 100svh;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-brand);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--text-heading); font-weight: var(--fw-semibold); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); }
h4 { font-size: var(--fs-h4); }

a { color: var(--brand-green); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--brand-green-deep); }

/* light-theme selection — mint highlight with dark text */
::selection      { background: rgba(52, 212, 169, 0.30); color: #0E1613; }
::-moz-selection { background: rgba(52, 212, 169, 0.30); color: #0E1613; }

img { max-width: 100%; height: auto; display: block; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container        { width: min(90vw, var(--container)); margin-inline: auto; }
.container-narrow { width: min(90vw, var(--container-narrow)); margin-inline: auto; }

.section { padding-block: var(--section-pad-y); position: relative; overflow: hidden; }

/* Radial green glow behind a section — the site's signature ambience */
.section--glow-bottom::before,
.section--glow-right::before,
.section--glow-center::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.section--glow-bottom::before { background: var(--grad-glow-bottom); }
.section--glow-right::before  { background: var(--grad-glow-right); }
.section--glow-center::before { background: var(--grad-glow-center); }
.section > * { position: relative; z-index: 1; }

/* ==========================================================================
   Section header pattern  (eyebrow → H2 → subhead)  — used on every section
   ========================================================================== */

.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand-green);
  margin-bottom: 14px;
}

.section-title { margin-bottom: 18px; }

.section-sub {
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  color: var(--text-body);
  max-width: 640px;
}

.section-header--center { text-align: center; }
.section-header--center .section-sub { margin-inline: auto; }

/* Green-highlighted word inside a heading (like "$65M+" on the live hero) */
.hl { color: var(--brand-green); }

/* ==========================================================================
   Buttons  (pill shape, exact live-site colors)
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px;
  padding: 16px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-brand);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  color: #fff;
  background: var(--grad-green-dark);   /* brand gradient, darker blend */
  background-origin: border-box;        /* gradient spans the border box too — otherwise it
                                           repeats into a bordered button's edge as a dark sliver */
  border: none;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}
.btn:hover { filter: brightness(1.07); color: #fff; }

.btn--ghost {
  background: transparent;
  border: 1.5px solid var(--brand-green-deep);
}
.btn--ghost:hover {
  background: var(--grad-green-dark);
  background-origin: border-box;   /* shorthand above resets it — must restate */
  border-color: transparent;
  /* the gradient fill appears instantly, so drop the outline instantly too —
     otherwise it lingers for the 0.12s `all` transition on top of the fill */
  transition: var(--transition), border-color 0s;
}

.btn--lg { padding: 14px 30px; }   /* size only — font stays 15px per locked type scale */

/* ==========================================================================
   Cards
   ========================================================================== */

/* Standard elevated card (like the founder card on the live site) */
.card {
  background: var(--bg-surface);
  border-radius: var(--radius-card);
  padding: 28px;
}

/* Green-tinted data/stat card (like the calculator cards) */
.card--stat {
  background: var(--bg-card-green);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card-sm);
  padding: 20px;
}

/* Accent top-bar card — gradient strip along the top edge */
.card--accent { position: relative; overflow: hidden; }
.card--accent::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-green);
}

/* ==========================================================================
   Decorative chat-bubble motif (hero background on live site)
   Usage: <div class="bubble-motif" aria-hidden="true"></div> inside a section
   ========================================================================== */

.bubble-motif {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cpath d='M60 80 q0 -40 40 -40 h140 q40 0 40 40 v100 q0 40 -40 40 h-140 l-40 40 z' fill='none' stroke='rgba(211,244,233,0.07)' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ==========================================================================
   Utility
   ========================================================================== */

.text-center { text-align: center; }
.mt-1 { margin-top: 8px; }  .mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; } .mt-5 { margin-top: 64px; }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}