.theme-light {
  /* surfaces */
  --bg:          #ffffff;
  --bg-2:        #f5f7fb;
  --panel:       rgba(15, 20, 35, 0.03);
  --panel-2:     rgba(15, 20, 35, 0.05);

  /* hairlines / borders */
  --hair:        rgba(10, 15, 30, 0.08);
  --hair-hi:     rgba(10, 15, 30, 0.14);
  --border:      rgba(10, 15, 30, 0.08);   /* alias of --hair for older components */

  /* text ramp: 1 = strongest, 4 = faintest */
  --text:        #0d1424;
  --text-2:      #40485c;
  --text-3:      #667085;
  --text-4:      #98a1b3;
  --text-muted:  #667085;                  /* alias of --text-3 for older components */

  /* accent — TG Macro brand orange (sampled from the app's TGM badge) */
  --accent:      #C2440C;
  --accent-2:    #E8611A;
  --accent-3:    #96350A;
  --accent-soft: rgba(194, 68, 12, 0.10);
  --accent-glow: rgba(194, 68, 12, 0.16);
  --accent-text: #ffffff;                  /* text/icon sitting on an accent fill */
  --accent-grad-top: #0d1424;              /* top stop of gradient-text (dark on light) */

  /* status */
  --success:     #1c9e34;
  --danger:      #d92d20;
  --danger-soft: rgba(217, 45, 32, 0.10);

  /* button (light: solid dark-ish primary reads best on white) */
  --btn-bg:      #0d1424;
  --btn-text:    #ffffff;

  /* elevated surfaces: subtle hover tint, floating glass panels, full-screen overlay */
  --surface-hover: rgba(15, 20, 35, 0.05);
  --glass:         rgba(255, 255, 255, 0.88);
  --overlay:       rgba(244, 246, 250, 0.82);

  /* solid card surface (opaque, sits on --bg) */
  --surface:       #ffffff;
  --surface-2:     #f4f3f1;
}

.theme-dark {
  /* surfaces */
  --bg:          #07080d;
  --bg-2:        #0a0c14;
  --panel:       rgba(20, 24, 38, 0.45);
  --panel-2:     rgba(28, 36, 56, 0.55);

  /* hairlines / borders */
  --hair:        rgba(255, 255, 255, 0.06);
  --hair-hi:     rgba(255, 255, 255, 0.10);
  --border:      rgba(255, 255, 255, 0.06);

  /* text ramp */
  --text:        #F5F7FC;
  --text-2:      #C2CCDE;
  --text-3:      #8995AE;
  --text-4:      #525C7A;
  --text-muted:  #8995AE;

  /* accent — TG Macro brand orange, brightened for the near-black app chrome */
  --accent:      #FF7A29;
  --accent-2:    #FFA35C;
  --accent-3:    #E8611A;
  --accent-soft: rgba(255, 122, 41, 0.12);
  --accent-glow: rgba(255, 122, 41, 0.26);
  --accent-text: #07080d;                  /* dark text/icon on the bright orange fill (mirrors --btn-text flip below) */
  --accent-grad-top: #ffffff;              /* top stop of gradient-text (white on dark) */

  /* status — matches the app's green "enabled" indicator */
  --success:     #35C148;
  --danger:      #ff5449;
  --danger-soft: rgba(255, 84, 73, 0.14);

  /* button (dark: light primary reads best on near-black) */
  --btn-bg:      #ffffff;
  --btn-text:    #07080d;

  --surface-hover: rgba(255, 255, 255, 0.05);
  --glass:         rgba(14, 16, 26, 0.85);
  --overlay:       rgba(7, 8, 13, 0.80);
  --surface:       #14161f;
  --surface-2:     #1b1e2a;
}

/* ===== components/nav/nav-3.css  (stripped: 0 @import, 0 @font-face) ===== */
/* ================= NAVBAR ================= */
/* Same rules as your original. Only change: the 5 literal colors below
   are now variables (defined on .navbar with your exact original values),
   so a future site can override them without editing this file. */

.navbar{
  --navbar-bg: rgba(20,25,40,0.6);
  --navbar-bg-scrolled: rgba(20,25,40,0.92);
  --navbar-accent: #FF7A29;
  --navbar-text: #ccc;
  --navbar-btn-text: #07080d;

  position:absolute;
  width:70%;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:1000;
  border-radius: 50px;
  padding:15px 0;
  backdrop-filter:blur(12px);
  background: var(--navbar-bg);
  transition: background 0.3s, box-shadow 0.3s;
}

.navbar.scrolled {
  background: var(--navbar-bg-scrolled);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.nav-container{
  position:relative;
  width:90%;
  max-width:1200px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{
  font-weight:600;
  font-size:20px;
}

.logo span{
  color: var(--navbar-accent);
}

/* echoes the TGM app icon's own orange bezel around the logo mark */
.navbar .logo img{
  box-shadow: 0 0 0 1.5px rgba(255,122,41,.45), 0 3px 12px -3px rgba(255,122,41,.45);
}
.tgm-footer .brand img{
  box-shadow: 0 0 0 1.5px rgba(255,122,41,.35), 0 3px 12px -3px rgba(255,122,41,.35);
}

.nav-collapse{
  display:flex;
  align-items:center;
  gap:25px;
}

.nav-links{
  display:flex;
  gap:25px;
}

.nav-links a{
  text-decoration:none;
  color: var(--navbar-text);
  font-size:14px;
  transition:0.3s;
}

.nav-links a:hover{
  color: var(--navbar-accent);
}

.download-btn{
  padding:8px 16px;
  border-radius:20px;
  text-decoration:none;
  background-color: var(--navbar-accent);
  background-image: linear-gradient(180deg, #FFA35C 0%, var(--navbar-accent) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 14px -5px rgba(255,122,41,.55);
  color: var(--navbar-btn-text);
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition: background-color 0.3s;
}

.download-btn:hover{
  background-color: #E8611A;
  background-image: none;
}

.menu-toggle{
  display:none;
  font-size:22px;
  cursor:pointer;
  color: var(--navbar-text);
}

/* ADDED — your original paste had .menu-toggle{display:none} with no breakpoint
   to ever show it, and no CSS to hide/show .nav-links. Built to match the rest
   of your design (same colors, same pill/blur style) since you didn't have
   this part of the file. */
@media (max-width: 768px){
  .navbar{
    width:90%; /* was 70% — too narrow on mobile */
  }
  .menu-toggle{
    display:block;
  }
  .nav-collapse{
    display:none;
    position:absolute;
    top:calc(100% + 12px);
    left:0;
    right:0;
    flex-direction:column;
    align-items:center;
    gap:16px;
    padding:20px 0;
    border-radius:20px;
    background: var(--navbar-bg-scrolled);
    backdrop-filter:blur(12px);
  }
  .nav-collapse.active{
    display:flex;
  }
  .nav-links{
    flex-direction:column;
    align-items:center;
    gap:16px;
  }
}

/* ===== components/hero/hero-7.css  (stripped: 1 @import, 0 @font-face) ===== */
1,100..900&display=swap');
.cmp-hero-7{font-family:"Roboto Condensed",-apple-system,sans-serif;color:var(--text);background:var(--bg);line-height:1.6;}
.cmp-hero-7 *,.cmp-hero-7 *::before,.cmp-hero-7 *::after{box-sizing:border-box;margin:0;padding:0;}
.cmp-hero-7 img,.cmp-hero-7 svg{max-width:100%;display:block;}
.cmp-hero-7 a{text-decoration:none;color:inherit;}
.cmp-hero-7 ul,.cmp-hero-7 ol,.cmp-hero-7 li{list-style:none;}
/* --- bootstrap shim (only what this site uses) --- */
.cmp-hero-7 .container{width:100%;max-width:1140px;margin-inline:auto;padding-inline:16px;}
.cmp-hero-7 .row{display:flex;flex-wrap:wrap;margin-inline:-12px;}
.cmp-hero-7 [class*="col-"]{padding-inline:12px;}
.cmp-hero-7 .col-lg-6{flex:0 0 50%;max-width:50%;}
.cmp-hero-7 .col-lg-4{flex:0 0 33.333%;max-width:33.333%;}
.cmp-hero-7 .col-sm-12,.cmp-hero-7 .col-md-12{flex:0 0 100%;max-width:100%;}
@media(max-width:992px){.cmp-hero-7 .col-lg-6,.cmp-hero-7 .col-lg-4{flex:0 0 100%;max-width:100%;}}
.cmp-hero-7 .text-center{text-align:center;}.cmp-hero-7 .text-end{text-align:right;}
.cmp-hero-7 .text-white{color:var(--text);}
.cmp-hero-7 .fw-bold{font-weight:700;}.cmp-hero-7 .fw-semibold{font-weight:600;}.cmp-hero-7 .lead{font-size:1.15rem;}
.cmp-hero-7 .display-4{font-size:clamp(2rem,5vw,3.5rem);font-weight:300;line-height:1.12;}
.cmp-hero-7 .display-5{font-size:clamp(1.6rem,4vw,3rem);font-weight:300;line-height:1.12;}
.cmp-hero-7 .d-flex{display:flex;}.cmp-hero-7 .d-none{display:none;}@media(min-width:992px){.cmp-hero-7 .d-lg-block{display:block;}}
.cmp-hero-7 .align-items-center{align-items:center;}.cmp-hero-7 .justify-content-center{justify-content:center;}
.cmp-hero-7 .gap-3{gap:1rem;}.cmp-hero-7 .gap-5{gap:3rem;}.cmp-hero-7 .mx-auto{margin-inline:auto;}.cmp-hero-7 .w-100{width:100%;}
.cmp-hero-7 .mt-3{margin-top:1rem;}.cmp-hero-7 .mt-4{margin-top:1.5rem;}.cmp-hero-7 .mt-5{margin-top:3rem;}
.cmp-hero-7 .mb-3{margin-bottom:1rem;}.cmp-hero-7 .mb-4{margin-bottom:1.5rem;}.cmp-hero-7 .my-5{margin-block:3rem;}
.cmp-hero-7 .py-5{padding-block:3rem;}.cmp-hero-7 .p-5{padding:3rem;}
.cmp-hero-7 .flex-wrap{flex-wrap:wrap;}
.cmp-hero-7 .position-relative{position:relative;}
.cmp-hero-7 .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:.5rem;cursor:pointer;text-decoration:none;font-weight:700;}

/* --- section: .auto-section .main-title + content + image --- */
.cmp-hero-7 .auto-section{
  /* soft ambient glow rising from the bottom, like the warm vignette behind the app's own dark chrome */
  background:radial-gradient(60% 55% at 50% 100%, var(--accent-soft) 0%, transparent 70%), var(--bg);
  overflow:hidden;
  position:relative;
}

/* Title */
.cmp-hero-7 .main-title{
  font-size:10.2rem;
  font-weight:900;
  line-height:1;
  color:var(--text);
  text-transform:uppercase;
  padding-top:10px;
}
.cmp-hero-7 .main_section{
  position:relative;
}

@media (max-width:768px){
  .cmp-hero-7 .main-title{
    font-size:5rem;
  }
  .cmp-hero-7 .floating-icons{
    display:none;
  }
  .cmp-hero-7 .keyboard-img{
    display:none;
  }
}

/* Keyboard Image */
.cmp-hero-7 .keyboard-img{
  width:650px;
  max-width:100%;
  margin-top:-30px;
  transform:rotateX(-30deg);
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-40%);
  pointer-events:none;
}

/* Description */
.cmp-hero-7 .desc{
  max-width:650px;
  margin:auto;
  font-size:15px;
  color:var(--text);
}

/* Button — soft top-light / bottom-shade bevel, like the app's own pill buttons */
.cmp-hero-7 .download-btn{
  background:linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 26px -10px var(--accent-glow);
  color:var(--accent-text);
  padding:12px 28px;
  border-radius:30px;
  font-weight:600;
  transition:0.3s;
  text-decoration:none;
}
.cmp-hero-7 .download-btn:hover{
  background:var(--text);
  box-shadow:none;
  color:var(--bg);
}

/* Version text */
.cmp-hero-7 .version-text{
  font-size:13px;
  color:var(--text);
}

/* Floating Icons */
.cmp-hero-7 .floating-icons .icon-box{
  position:absolute;
  font-size:22px;
  color:var(--text);
}
.cmp-hero-7 .floating-icons .icon-box:nth-child(1){
  top:10%;
  left:20%;
}
.cmp-hero-7 .floating-icons .icon-box:nth-child(2){
  top:15%;
  right:17%;
}
.cmp-hero-7 .floating-icons .icon-box:nth-child(3){
  bottom:30%;
  left:10%;
}
.cmp-hero-7 .floating-icons .icon-box:nth-child(4){
  bottom:25%;
  right:10%;
}

/* ===== components/paragraph/paragraph-2.css  (stripped: 0 @import, 1 @font-face) ===== */
/* ============================================================
   paragraph-2 — STRUCTURE layer (namespaced under .cmp-paragraph-2)
   codex.us.com "About" section. Every selector prefixed so it can't
   collide; every color points at a global token from theme.css.
   ============================================================ */

/* ---- shared chrome ---- */
.cmp-paragraph-2 { font-family: 'Manrope', system-ui, -apple-system, sans-serif; color: var(--text); background: var(--bg); }
.cmp-paragraph-2 *, .cmp-paragraph-2 *::before, .cmp-paragraph-2 *::after { box-sizing: border-box; }
.cmp-paragraph-2 img, .cmp-paragraph-2 svg { max-width: 100%; height: auto; display: block; }
.cmp-paragraph-2 strong { color: var(--text); font-weight: 700; }
.cmp-paragraph-2 h1, .cmp-paragraph-2 h2, .cmp-paragraph-2 h3, .cmp-paragraph-2 h4, .cmp-paragraph-2 h5, .cmp-paragraph-2 h6 { margin: 0; color: var(--text); font-weight: 700; line-height: 1.08; letter-spacing: -0.022em; }
.cmp-paragraph-2 a { color: var(--text); text-decoration: none; transition: color .15s; }
.cmp-paragraph-2 a:hover { color: var(--accent-2); }

.cmp-paragraph-2 .app-shell { position: relative; z-index: 10; max-width: 1240px; margin: 0 auto; padding: 0 36px; }
.cmp-paragraph-2 .section { margin: 0; padding: 96px 0; position: relative; }

.cmp-paragraph-2 [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
.cmp-paragraph-2 [data-reveal].is-in { opacity: 1; transform: translateY(0); }

.cmp-paragraph-2 .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-2); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 18px; line-height: 1; }
.cmp-paragraph-2 .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }

/* ---- about (component-specific) ---- */
.cmp-paragraph-2 .about-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 80px;
  align-items: start;
}
.cmp-paragraph-2 .about-body p {
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 18px;
  max-width: 56ch;
}
.cmp-paragraph-2 .about-body p.lede {
  font-size: 22px; line-height: 1.5; color: var(--text);
  font-weight: 500; letter-spacing: -0.01em;
  margin-bottom: 26px;
  max-width: 30ch;
}
.cmp-paragraph-2 .about-body p strong { color: var(--text); font-weight: 700; }

.cmp-paragraph-2 .about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 28px;
  padding-top: 8px;
}
.cmp-paragraph-2 .about-stats > div { line-height: 1.3; }
.cmp-paragraph-2 .about-stats .n {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
  background: linear-gradient(180deg, var(--accent-grad-top) 0%, var(--accent-2) 110%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cmp-paragraph-2 .about-stats .l {
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.45;
  max-width: 24ch;
}

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .cmp-paragraph-2 .about-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 700px) {
  .cmp-paragraph-2 .app-shell { padding: 0 20px; }
  .cmp-paragraph-2 .section { padding: 64px 0; }
  .cmp-paragraph-2 .about-stats { grid-template-columns: 1fr 1fr; gap: 22px; }
}

/* ===== components/table/table-8.css  (stripped: 0 @import, 0 @font-face) ===== */
/* ============================================================
   table-8  (spec table, structure harvested from deltaexeutor.com)
   Namespaced under .cmp-table-8; every color repainted onto global
   tokens. Label chips = --accent (recolorable); value boxes =
   --surface-2 (theme-following). Flips light/dark from the wrapper.
   ============================================================ */
.cmp-table-8 *{box-sizing:border-box;margin:0;padding:0;}
.cmp-table-8 ul,.cmp-table-8 ol,.cmp-table-8 li{list-style:none;}
.cmp-table-8{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;}

.cmp-table-8 .specs-section{
  padding:80px 20px;
  background:linear-gradient(25deg, var(--bg) 78%, var(--accent-soft) 120%);
  color:var(--text);
}
.cmp-table-8 .container{max-width:1100px;margin:auto;}

.cmp-table-8 .specs-title{
  text-align:center;
  font-size:32px;
  font-weight:600;
  margin-bottom:50px;
  color:var(--text);
}
.cmp-table-8 .specs-title span{font-weight:700;color:var(--accent);}

.cmp-table-8 .specs-table{display:flex;flex-direction:column;gap:14px;}

.cmp-table-8 .spec-row{display:flex;align-items:center;gap:12px;}

/* Left accent label chip */
.cmp-table-8 .spec-label{
  min-width:240px;
  background:linear-gradient(180deg, var(--accent), var(--accent-3));
  padding:14px 18px;
  border-radius:8px;
  font-size:14px;
  font-weight:500;
  color:var(--accent-text);
}

/* Right value surface (theme-following) */
.cmp-table-8 .spec-value{
  flex:1;
  background:var(--surface-2);
  border:1px solid var(--hair);
  padding:14px 18px;
  border-radius:8px;
  font-size:14px;
  color:var(--text-2);
}

/* Hover */
.cmp-table-8 .spec-row:hover .spec-label{background:linear-gradient(180deg, var(--accent-2), var(--accent));}
.cmp-table-8 .spec-row:hover .spec-value{background:var(--surface-hover);}

/* ================= RESPONSIVE ================= */
@media (max-width:768px){
  .cmp-table-8 .spec-row{flex-direction:column;align-items:stretch;}
  .cmp-table-8 .spec-label{min-width:100%;text-align:center;}
  .cmp-table-8 .spec-value{text-align:center;}
  .cmp-table-8 .specs-title{font-size:24px;}
}

/* ===== components/features/features-17.css  (stripped: 0 @import, 0 @font-face) ===== */
/* ============================================================
   COMPONENT: features-17  (category: features)
   Source: cricket1/index.html  section#features ("Delta Features")
   SYSTEM: namespaced structure + global tokens.
     • Every selector is scoped under .cmp-features-17 → cannot leak.
     • Every color is a theme.css token → works in theme-light OR theme-dark.
   ============================================================ */

/* ---- scoped reset ---- */
.cmp-features-17{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.cmp-features-17 *{margin:0;padding:0;box-sizing:border-box}
.cmp-features-17 ul,.cmp-features-17 ol,.cmp-features-17 li{list-style:none}
.cmp-features-17 img{max-width:100%;display:block}
.cmp-features-17 h2,.cmp-features-17 h3,.cmp-features-17 h4{letter-spacing:-.02em;line-height:1.12;font-weight:600}

.cmp-features-17 .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.cmp-features-17 section{position:relative}

/* ---- section head ---- */
.cmp-features-17 .sec{padding:80px 0}
.cmp-features-17 .sec-head{max-width:740px}
.cmp-features-17 .sec-head.center{margin:0 auto;text-align:center}
.cmp-features-17 .sec-head h2{font-size:clamp(28px,4vw,40px);margin:18px 0 14px}
.cmp-features-17 .sec-head p{color:var(--text-2);font-size:15px;max-width:560px}
.cmp-features-17 .sec-head.center p{margin:0 auto}

/* ---- simple bullet list (server tools) ---- */
.cmp-features-17 .plain-list{list-style:none;margin-top:14px;display:grid;gap:9px}
.cmp-features-17 .plain-list li{font-size:14px;color:var(--text-2);display:flex;align-items:center;gap:10px}
.cmp-features-17 .plain-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--text);flex-shrink:0}

/* ---- info cards (Key System / PC Access) ---- */
.cmp-features-17 .info-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:60px}
.cmp-features-17 .info-cards .panel h3{font-size:20px;margin-bottom:10px}
.cmp-features-17 .info-cards .panel p{font-size:14px;color:var(--text-2);margin-bottom:12px}
.cmp-features-17 .info-cards .panel p:last-child{margin-bottom:0}

.cmp-features-17 .panel{
  background:var(--surface);
  border:1px solid var(--hair);border-radius:16px;
  box-shadow:inset 0 1px 0 var(--hair);
  padding:22px;position:relative;overflow:hidden;
}
.cmp-features-17 .panel h3{font-size:19px;margin-bottom:8px}
.cmp-features-17 .panel p{font-size:13.5px;color:var(--text-2)}

/* ---- alternating feature rows ---- */
.cmp-features-17 .feat-rows{display:flex;flex-direction:column;gap:24px;margin-top:60px}
.cmp-features-17 .feat-row{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;
  background:var(--surface-2);border:1px solid var(--hair);border-radius:24px;padding:30px}
.cmp-features-17 .feat-row:nth-child(even) .feat-media{order:2}
.cmp-features-17 .feat-row:nth-child(even) .feat-text{order:1}
.cmp-features-17 .feat-media{border-radius:16px;overflow:hidden;border:1px solid var(--border);
  box-shadow:0 0 0 1px var(--hair)}
.cmp-features-17 .feat-media img{width:100%;height:auto;display:block}
.cmp-features-17 .feat-media img.img-zoom{aspect-ratio:900/420;object-fit:cover;object-position:center 30%;transform:scale(1.15);transform-origin:center}
.cmp-features-17 .feat-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.cmp-features-17 .feat-ico{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;color:var(--accent-text);
  /* thin orange rim-light — this is the gunmetal chip's own brand accent, kept even where the fill above gets overridden to the brushed-metal gray */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px -8px rgba(0,0,0,.4),0 0 0 1px rgba(255,122,41,.35)}
.cmp-features-17 .feat-ico svg{width:21px;height:21px}
.cmp-features-17 .feat-text h3{font-size:22px;letter-spacing:-.01em}
.cmp-features-17 .feat-text p{font-size:15px;color:var(--text-2);line-height:1.65;max-width:440px}

/* ---- responsive ---- */
@media(max-width:920px){
  .cmp-features-17 .feat-row{grid-template-columns:1fr;gap:22px;padding:20px}
  .cmp-features-17 .feat-row:nth-child(even) .feat-media,
  .cmp-features-17 .feat-row:nth-child(even) .feat-text{order:0}
  .cmp-features-17 .feat-rows{gap:20px}
}
@media(max-width:620px){
  .cmp-features-17 .info-cards{grid-template-columns:1fr}
}

/* ===== components/cta/cta-5.css  (stripped: 1 @import, 0 @font-face) ===== */
1,100..900&display=swap');
.cmp-cta-5{font-family:"Roboto Condensed",-apple-system,sans-serif;color:var(--text);background:var(--bg);line-height:1.6;}
.cmp-cta-5 *,.cmp-cta-5 *::before,.cmp-cta-5 *::after{box-sizing:border-box;margin:0;padding:0;}
.cmp-cta-5 img,.cmp-cta-5 svg{max-width:100%;display:block;}
.cmp-cta-5 a{text-decoration:none;color:inherit;}
.cmp-cta-5 ul,.cmp-cta-5 ol,.cmp-cta-5 li{list-style:none;}
/* --- bootstrap shim (only what this site uses) --- */
.cmp-cta-5 .container{width:100%;max-width:1140px;margin-inline:auto;padding-inline:16px;}
.cmp-cta-5 .row{display:flex;flex-wrap:wrap;margin-inline:-12px;}
.cmp-cta-5 [class*="col-"]{padding-inline:12px;}
.cmp-cta-5 .col-lg-6{flex:0 0 50%;max-width:50%;}
.cmp-cta-5 .col-lg-4{flex:0 0 33.333%;max-width:33.333%;}
.cmp-cta-5 .col-sm-12,.cmp-cta-5 .col-md-12{flex:0 0 100%;max-width:100%;}
@media(max-width:992px){.cmp-cta-5 .col-lg-6,.cmp-cta-5 .col-lg-4{flex:0 0 100%;max-width:100%;}}
.cmp-cta-5 .text-center{text-align:center;}.cmp-cta-5 .text-end{text-align:right;}
.cmp-cta-5 .text-white{color:var(--text);}   /* token-aware: bands are theme-driven, so "white" text = --text (visible in BOTH themes). For text on an actual --accent FILL use var(--accent-text) explicitly. */
.cmp-cta-5 .fw-bold{font-weight:700;}.cmp-cta-5 .fw-semibold{font-weight:600;}.cmp-cta-5 .lead{font-size:1.15rem;}
.cmp-cta-5 .display-4{font-size:clamp(2rem,5vw,3.5rem);font-weight:300;line-height:1.12;}
.cmp-cta-5 .display-5{font-size:clamp(1.6rem,4vw,3rem);font-weight:300;line-height:1.12;}
.cmp-cta-5 .d-flex{display:flex;}.cmp-cta-5 .d-none{display:none;}@media(min-width:992px){.cmp-cta-5 .d-lg-block{display:block;}}
.cmp-cta-5 .align-items-center{align-items:center;}.cmp-cta-5 .justify-content-center{justify-content:center;}
.cmp-cta-5 .gap-3{gap:1rem;}.cmp-cta-5 .gap-5{gap:3rem;}.cmp-cta-5 .mx-auto{margin-inline:auto;}.cmp-cta-5 .w-100{width:100%;}
.cmp-cta-5 .mt-3{margin-top:1rem;}.cmp-cta-5 .mt-4{margin-top:1.5rem;}.cmp-cta-5 .mt-5{margin-top:3rem;}
.cmp-cta-5 .mb-3{margin-bottom:1rem;}.cmp-cta-5 .mb-4{margin-bottom:1.5rem;}.cmp-cta-5 .my-5{margin-block:3rem;}
.cmp-cta-5 .py-5{padding-block:3rem;}.cmp-cta-5 .p-5{padding:3rem;}
.cmp-cta-5 .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:.5rem;cursor:pointer;text-decoration:none;font-weight:700;}

/* --- cta-5 section-specific (namespaced) --- */
.cmp-cta-5 .section-5{
	/* same ambient glow treatment as the hero, for the same warm-dark-app backdrop feel */
	background:radial-gradient(55% 60% at 50% 0%, var(--accent-soft) 0%, transparent 70%), var(--bg);
	border-top-right-radius: 20%;
	border-top-left-radius: 20%;
}
.cmp-cta-5 .main_section{
	position: relative;
}
.cmp-cta-5 .main-title{
	font-size: 10.2rem;
	font-weight: 900;
	line-height: 1;
	color: var(--text);
	text-transform: uppercase;
	padding-top: 10px;
}
@media (max-width: 768px){
	.cmp-cta-5 .main-title{
		font-size: 5rem;
	}
}
.cmp-cta-5 .version-text{
	font-size: 13px;
	color: var(--text);
}
/* Button — soft top-light / bottom-shade bevel, like the app's own pill buttons */
.cmp-cta-5 .download-btn{
	display: inline-block;
	background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 26px -10px var(--accent-glow);
	color: var(--accent-text);
	padding: 12px 28px;
	border-radius: 30px;
	font-weight: 600;
	transition: 0.3s;
	text-decoration: none;
}
.cmp-cta-5 .download-btn:hover{
	background: var(--text);
	box-shadow: none;
	color: var(--bg);
}
/* Other-versions box: tan-on-brown → surface panels */
.cmp-cta-5 .version-box{
	background-color: var(--bg-2);
	border-radius: 20px;
	padding: 10px;
	position: absolute;
	top: 10px;
	right: 10%;
	transform: rotate(-20deg);
}
.cmp-cta-5 .version-content{
	background-color: var(--surface);
	border-radius: 20px;
	padding: 10px;
}
.cmp-cta-5 .version-content ul li{
	padding: 5px 0px;
	text-decoration: underline;
}
@media (max-width: 768px){
	.cmp-cta-5 .version-box{
		position: relative;
		padding-top: 20px;
		transform: translateX(-50%);
		left: 50%;
		right: auto;
	}
}
.cmp-cta-5 .version-box h5{color: var(--text);}
/* .brown-color → muted body text token */
.cmp-cta-5 .brown-color{color: var(--text-2);}
.cmp-cta-5 .list-unstyled{list-style:none;padding-left:0;}
.cmp-cta-5 .d-flex p{display:inline-flex;align-items:center;gap:.4rem;}
.cmp-cta-5 .d-flex img{width:18px;height:auto;display:inline-block;}

/* ===== components/requirements/requirements-1.css  (stripped: 1 @import, 0 @font-face) ===== */
1,100..900&display=swap');
.cmp-requirements-1{font-family:"Roboto Condensed",-apple-system,sans-serif;color:var(--text);background:var(--bg);line-height:1.6;}
.cmp-requirements-1 *,.cmp-requirements-1 *::before,.cmp-requirements-1 *::after{box-sizing:border-box;margin:0;padding:0;}
.cmp-requirements-1 img,.cmp-requirements-1 svg{max-width:100%;display:block;}
.cmp-requirements-1 a{text-decoration:none;color:inherit;}
.cmp-requirements-1 ul,.cmp-requirements-1 ol,.cmp-requirements-1 li{list-style:none;}
/* --- bootstrap shim (only what this site uses) --- */
.cmp-requirements-1 .container{width:100%;max-width:1140px;margin-inline:auto;padding-inline:16px;}
.cmp-requirements-1 .row{display:flex;flex-wrap:wrap;margin-inline:-12px;}
.cmp-requirements-1 [class*="col-"]{padding-inline:12px;}
.cmp-requirements-1 .col-lg-6{flex:0 0 50%;max-width:50%;}
.cmp-requirements-1 .col-lg-4{flex:0 0 33.333%;max-width:33.333%;}
.cmp-requirements-1 .col-sm-12,.cmp-requirements-1 .col-md-12{flex:0 0 100%;max-width:100%;}
@media(max-width:992px){.cmp-requirements-1 .col-lg-6,.cmp-requirements-1 .col-lg-4{flex:0 0 100%;max-width:100%;}}
.cmp-requirements-1 .text-center{text-align:center;}.cmp-requirements-1 .text-end{text-align:right;}
.cmp-requirements-1 .text-white{color:var(--text);}
.cmp-requirements-1 .fw-bold{font-weight:700;}.cmp-requirements-1 .fw-semibold{font-weight:600;}.cmp-requirements-1 .lead{font-size:1.15rem;}
.cmp-requirements-1 .display-4{font-size:clamp(2rem,5vw,3.5rem);font-weight:300;line-height:1.12;}
.cmp-requirements-1 .display-5{font-size:clamp(1.6rem,4vw,3rem);font-weight:300;line-height:1.12;}
.cmp-requirements-1 .d-flex{display:flex;}.cmp-requirements-1 .d-none{display:none;}@media(min-width:992px){.cmp-requirements-1 .d-lg-block{display:block;}}
.cmp-requirements-1 .align-items-center{align-items:center;}.cmp-requirements-1 .justify-content-center{justify-content:center;}
.cmp-requirements-1 .gap-3{gap:1rem;}.cmp-requirements-1 .gap-5{gap:3rem;}.cmp-requirements-1 .mx-auto{margin-inline:auto;}.cmp-requirements-1 .w-100{width:100%;}
.cmp-requirements-1 .mt-3{margin-top:1rem;}.cmp-requirements-1 .mt-4{margin-top:1.5rem;}.cmp-requirements-1 .mt-5{margin-top:3rem;}
.cmp-requirements-1 .mb-3{margin-bottom:1rem;}.cmp-requirements-1 .mb-4{margin-bottom:1.5rem;}.cmp-requirements-1 .my-5{margin-block:3rem;}
.cmp-requirements-1 .py-5{padding-block:3rem;}.cmp-requirements-1 .p-5{padding:3rem;}
.cmp-requirements-1 .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:.5rem;cursor:pointer;text-decoration:none;font-weight:700;}

/* --- features-11 (System Requirements) --- */
.cmp-requirements-1 .brown-color{color:var(--text);}
.cmp-requirements-1 .margin-100{margin-top:100px;}

.cmp-requirements-1 .req_box{
  background-color:var(--bg-2);   /* was #6A5E3F brown box */
  border-radius:20px;
  padding:20px;
  width:60%;
  max-width:100%;
  margin-top:60px;
  text-align:left;
}
.cmp-requirements-1 .req_box > .d-flex{
  gap:100px;
  padding:10px 10px 20px;
  font-weight:700;
}
.cmp-requirements-1 .req_content{
  background-color:var(--surface);   /* was #F1ECDF cream */
  border-radius:20px;
  overflow:hidden;
}
.cmp-requirements-1 .list-group{display:flex;}
.cmp-requirements-1 .list-group-horizontal{flex-direction:row;}
.cmp-requirements-1 .list-group li{
  flex:1;
  border:none;
  border-bottom:1px solid var(--hair);
  padding:15px 10px;
  text-align:left;
  background-color:var(--surface);   /* was #F1ECDF */
}
.cmp-requirements-1 .list-group li:nth-child(1){
  border-right:1px solid var(--hair);
  width:150px;
  flex:0 0 150px;
  max-width:150px;
}

@media (max-width:768px){
  .cmp-requirements-1 .req_box{width:100%;}
}

/* ===== components/steps/steps-11.css  (stripped: 0 @import, 5 @font-face) ===== */
/* ============================================================
   COMPONENT: steps-11  ("How to use Arceus X Neo")
   Structure harvested from arceusx.app (.lp-howuse), repainted
   onto the global design tokens in ../../css/theme.css.
   Every element is namespaced under .cmp-steps-11 so its CSS
   can't leak into other components. Every color is a token, so
   the block works in theme-light OR theme-dark.
   ============================================================ */

.cmp-steps-11{
  font-family:'Inter',-apple-system,system-ui,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
.cmp-steps-11 *,.cmp-steps-11 *::before,.cmp-steps-11 *::after{box-sizing:border-box;margin:0;padding:0;}
.cmp-steps-11 img,.cmp-steps-11 svg,.cmp-steps-11 video{max-width:100%;display:block;}
.cmp-steps-11 a{text-decoration:none;color:inherit;}
.cmp-steps-11 ul,.cmp-steps-11 ol,.cmp-steps-11 li{list-style:none;}

/* section shell */
.cmp-steps-11 .lp-section{
  position:relative;
  padding:100px 0;
}
.cmp-steps-11 .lp-section-inner{
  max-width:1240px;
  margin:0 auto;
  padding:0 40px;
}

/* section head */
.cmp-steps-11 .lp-section-head{
  text-align:center;
  margin-bottom:64px;
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}
.cmp-steps-11 .lp-eyebrow{
  display:inline-block;
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--accent);
  padding:6px 14px;
  border-radius:999px;
  background:var(--accent-soft);
  border:1px solid var(--hair-hi);
  margin-bottom:18px;
}
.cmp-steps-11 .lp-eyebrow.tone-pink{
  color:var(--accent);
  background:var(--accent-soft);
  border-color:var(--hair-hi);
}
.cmp-steps-11 .lp-section-head h2{
  font-family:'Sora',ui-sans-serif,system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(36px,4vw,52px);
  line-height:1.1;
  letter-spacing:-0.025em;
  margin-bottom:16px;
}
.cmp-steps-11 .lp-section-sub{
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--text-2);
  max-width:580px;
  margin:0 auto;
}

/* how-to-use card + steps */
.cmp-steps-11 .lp-howuse-card{
  max-width:760px;
  margin:0 auto;
  background:var(--surface);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--hair);
  border-radius:28px;
  padding:32px 36px;
  counter-reset:stepnum;
}
.cmp-steps-11 .lp-step{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:18px;
  align-items:start;
  padding:18px 0;
  border-bottom:1px solid var(--hair);
  counter-increment:stepnum;
}
.cmp-steps-11 .lp-step:first-child{padding-top:4px;}
.cmp-steps-11 .lp-step:last-child{padding-bottom:4px;border-bottom:none;}

.cmp-steps-11 .lp-step-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent-soft);
  border:1px solid var(--hair-hi);
  color:var(--accent);
  position:relative;
}
.cmp-steps-11 .lp-step-icon svg{width:20px;height:20px;}
.cmp-steps-11 .lp-step-icon::after{
  content:counter(stepnum,decimal-leading-zero);
  position:absolute;
  top:-8px;right:-8px;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--accent);
  border:1px solid var(--accent-3);
  color:var(--accent-text);
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  letter-spacing:0;
}
.cmp-steps-11 .lp-step p{
  margin:0;
  padding-top:12px;
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  font-size:15.5px;
  line-height:1.65;
  color:var(--text-2);
}
.cmp-steps-11 .lp-step p strong{color:var(--text);font-weight:600;}

@media (max-width: 1024px){
  .cmp-steps-11 .lp-section-inner{padding:0 32px;}
}
@media (max-width: 640px){
  .cmp-steps-11 .lp-section{padding:70px 0;}
  .cmp-steps-11 .lp-section-inner{padding:0 18px;}
  .cmp-steps-11 .lp-section-head{margin-bottom:44px;}
  .cmp-steps-11 .lp-howuse-card{padding:22px 22px;}
  .cmp-steps-11 .lp-step{grid-template-columns:40px 1fr;gap:14px;padding:14px 0;}
  .cmp-steps-11 .lp-step-icon{width:40px;height:40px;}
  .cmp-steps-11 .lp-step-icon svg{width:18px;height:18px;}
  .cmp-steps-11 .lp-step p{font-size:14.5px;padding-top:10px;}
}

/* ===== components/paragraph/paragraph-3.css  (stripped: 0 @import, 3 @font-face) ===== */
.cmp-paragraph-3 { font-family:'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif; color:var(--text); background:var(--bg); line-height:1.6; }
.cmp-paragraph-3 *, .cmp-paragraph-3 *::before, .cmp-paragraph-3 *::after { box-sizing:border-box; margin:0; padding:0; }
.cmp-paragraph-3 img, .cmp-paragraph-3 svg, .cmp-paragraph-3 video { max-width:100%; display:block; }
.cmp-paragraph-3 a { text-decoration:none; color:inherit; }

.cmp-paragraph-3 .conclusion-section {
    background-color: var(--bg);
    padding: 80px 40px;
}

.cmp-paragraph-3 .conclusion-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 24px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.cmp-paragraph-3 .conclusion-text {
    font-size: 15px;
    color: var(--text);
    line-height: 1.8;
    max-width: 1100px;
    margin: 0 auto;
}

.cmp-paragraph-3 .conclusion-text a {
    color: var(--text);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .cmp-paragraph-3 .conclusion-section {
        padding: 60px 20px;
    }

    .cmp-paragraph-3 .conclusion-title {
        font-size: 28px;
    }
}