.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   ADS.system — brand.css
   SINGLE SOURCE OF TRUTH for the whole site.
   Load this ONCE site-wide. Change a value here -> every page
   that uses these classes updates automatically.

   WordPress wiring (pick one):
   - Elementor Pro: Site Settings > Custom Code (or Custom CSS), paste this.
   - Or theme: Appearance > Customize > Additional CSS.
   - Or upload brand.css and enqueue it from the theme/child theme.
   ============================================================ */

:root {
  /* Color */
  --bg:       #0a0a0a;   /* page background (Space Black) */
  --bg2:      #141414;   /* surface: cards, sections */
  --bg3:      #1c1c1c;   /* nested surface */
  --border:   #262626;   /* lines, dividers */
  --text:     #f5f5f5;   /* headings & body */
  --muted:    #8a8a8a;   /* secondary text */
  --blue:     #4285F4;   /* primary action */
  --red:      #EA4335;   /* errors, alerts */
  --yellow:   #FBBC05;   /* pro, highlights */
  --green:    #34A853;   /* free, success */

  /* Radius */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Layout */
  --content:   1080px;
  --gutter:    32px;
}

/* Base ------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Geist', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: 'Geist Mono', monospace; }
a { color: inherit; text-decoration: none; }

/* Layout helpers -------------------------------------------- */
.container { max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter); }
.section   { padding: 72px 0; }

/* Signature four-color rule --------------------------------- */
.rule-bar { display: flex; height: 4px; width: 100%; }
.rule-bar .b1 { flex: 1; background: var(--blue); }
.rule-bar .b2 { flex: 1; background: var(--red); }
.rule-bar .b3 { flex: 1; background: var(--yellow); }
.rule-bar .b4 { flex: 1; background: var(--green); }

/* Eyebrow / label ------------------------------------------- */
.eyebrow {
  font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--blue);
  text-transform: uppercase; letter-spacing: .12em;
}

/* Logo ------------------------------------------------------- */
.logo { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.logo .dot { color: var(--blue); }
.logo .suffix { font-weight: 500; color: var(--muted); }

/* Buttons ---------------------------------------------------- */
.btn-primary {
  display: inline-block; background: var(--blue); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 12px 22px; font-family: inherit;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: .15s;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary {
  display: inline-block; background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 22px; font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: .15s;
}
.btn-secondary:hover { border-color: var(--muted); }
.btn-ghost {
  display: inline-block; background: transparent; color: var(--muted);
  border: none; padding: 12px 14px; font-size: 14px; font-weight: 500; cursor: pointer;
}

/* Badges ----------------------------------------------------- */
.badge-free { font-size: 10px; font-weight: 700; color: var(--green); border: 1px solid var(--green); border-radius: 999px; padding: 2px 8px; }
.badge-pro  { font-size: 10px; font-weight: 700; color: var(--yellow); border: 1px solid var(--yellow); border-radius: 999px; padding: 2px 8px; }

/* Tool card -------------------------------------------------- */
.tool-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; transition: .15s; display: block;
}
.tool-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.tool-card .ic { width: 38px; height: 38px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 18px; margin-bottom: 14px; }
.tool-card .t  { font-size: 16px; font-weight: 700; }
.tool-card .d  { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* MacBook bezel frame --------------------------------------- */
.bezel {
  background: #000; border: 1px solid #2a2a2a; border-radius: 18px; padding: 14px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
}
.bezel .screen { background: var(--bg2); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.bezel .tb { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.bezel .tb i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.bezel .body { padding: 28px; }

/* Headings --------------------------------------------------- */
h1 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
h3 { font-size: 18px; font-weight: 700; }

@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .section { padding: 48px 0; }
  h1 { font-size: 26px; }
}/* End custom CSS */