/* ============================================================
   common.css — sitewide bundle (theme tokens + nav + base tokens)
   Included on every page. Do not put page-specific rules here.
   ============================================================ */

/* ---- .font-figtree class (used by footer-10 + download-5 Tailwind markup) ----
   Repointed to the site's own self-hosted body font — no external request. */
.font-figtree{font-family:'Plus Jakarta Sans',sans-serif}

/* ---- accent override + body reset (present on every page) ---- */
.theme-light,.theme-dark{--accent:#00ccdf;}
body{margin:0;}

/* ---- css/theme.css ---- */
/* ============================================================
   GLOBAL DESIGN TOKENS — the shared color layer for ALL components.
   Components never hardcode colors; they reference these var()s.
   Flip a section between themes by putting class="theme-light" or
   class="theme-dark" on its wrapper. One picker can recolor a whole
   site by overriding --accent (and friends) here.
   ============================================================ */

.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 */
  --accent:      #2f7cdb;
  --accent-2:    #3f8ae0;
  --accent-3:    #235fa8;
  --accent-soft: rgba(47, 124, 219, 0.10);
  --accent-glow: rgba(47, 124, 219, 0.14);
  --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 */
  --accent:      #4A9EFF;
  --accent-2:    #79B6FF;
  --accent-3:    #2F7CDB;
  --accent-soft: rgba(74, 158, 255, 0.10);
  --accent-glow: rgba(74, 158, 255, 0.22);
  --accent-text: #ffffff;
  --accent-grad-top: #ffffff;              /* top stop of gradient-text (white on dark) */

  /* status */
  --success:     #27C93F;
  --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;
}

/* ============================================================
   DESIGN-SYSTEM TOKENS (theme-agnostic: shape, type, space, fonts).
   Colors live in the theme blocks above; these define the shared
   VISUAL LANGUAGE so mixed components read as one designed site.
   Fonts default to Inter and are overridden by the builder's
   "Design system" font picker. New/retrofit components should
   consume these instead of hardcoding px values.
   ============================================================ */
:root {
  /* fonts (builder overrides --font-heading/--font-body per pairing) */
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* type scale (~1.2 modular) — named --fs-* to not clash with the --text color ramp */
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 20px;
  --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 38px; --fs-5xl: 48px; --fs-6xl: 60px;

  /* spacing scale (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 64px; --space-10: 80px;
  --space-12: 96px; --space-16: 128px;

  /* corner radius */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px;

  /* elevation */
  --shadow-sm: 0 1px 2px rgba(10,15,30,.06), 0 1px 3px rgba(10,15,30,.08);
  --shadow-md: 0 4px 12px -2px rgba(10,15,30,.10), 0 2px 6px -2px rgba(10,15,30,.08);
  --shadow-lg: 0 12px 32px -8px rgba(10,15,30,.16), 0 6px 12px -6px rgba(10,15,30,.10);
}

/* ---- components/nav/nav-13.css ---- */
/* ============================================================
   nav-13  — site header + primary nav (logo, links, CTA, burger)
   Structure harvested from cricket/index.html (CapCut APK), repainted
   onto the global token layer in theme.css.
     • Every selector is scoped under .cmp-nav-13 → cannot leak/collide.
     • Every color references a token → works in light OR dark.
   ============================================================ */

/* scoped reset */
.cmp-nav-13 *{margin:0;padding:0;box-sizing:border-box;}
.cmp-nav-13 img{max-width:100%;display:block;}
.cmp-nav-13 svg{display:block;max-width:100%;}
.cmp-nav-13 a{color:inherit;text-decoration:none;}
.cmp-nav-13 ul,.cmp-nav-13 ol,.cmp-nav-13 li{list-style:none;}

.cmp-nav-13{
  --page-x: clamp(28px, 5.35vw, 92px);
  --hero-font: 'Plus Jakarta Sans', Arial, sans-serif;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    radial-gradient(circle at 21% 84%, var(--accent-soft), transparent 26%),
    var(--bg);
  color: var(--text);
}

.cmp-nav-13 .site-header{
  width:100%;height:86px;display:flex;align-items:center;position:relative;z-index:10;
}
.cmp-nav-13 .header-inner{
  width:100%;padding:0 var(--page-x);display:flex;align-items:center;justify-content:space-between;gap:30px;
}
.cmp-nav-13 .header-left{display:flex;align-items:center;gap:56px;min-width:0;}
.cmp-nav-13 .brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0;}
.cmp-nav-13 .brand img{height:120px;width:auto;display:block;margin:-32px 0;}

.cmp-nav-13 .nav{display:flex;align-items:center;gap:35px;color:var(--text-2);font-size:16px;white-space:nowrap;}
.cmp-nav-13 .nav-link{display:inline-flex;align-items:center;gap:10px;line-height:1;transition:color .2s ease;}
.cmp-nav-13 .nav-link.active,
.cmp-nav-13 .nav-link:hover{color:var(--accent);}

.cmp-nav-13 .header-actions{display:flex;align-items:center;gap:21px;flex-shrink:0;font-size:16px;}
.cmp-nav-13 .get-started{
  min-width:122px;height:48px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  color:var(--accent-text);background:linear-gradient(135deg,var(--accent) 0%,var(--accent-3) 100%);
  border-radius:24px;font-weight:500;box-shadow:0 4px 10px var(--accent-glow);
}
.cmp-nav-13 .get-started svg{width:17px;height:17px;}

.cmp-nav-13 .nav-toggle-btn{
  display:none;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;background:var(--surface);border:1px solid var(--hair);
  cursor:pointer;flex-shrink:0;margin-left:12px;
}
.cmp-nav-13 .nav-toggle-btn svg{width:18px;height:18px;color:var(--text);}

@media (max-width:980px){
  .cmp-nav-13 .nav{display:none;}
  .cmp-nav-13 .header-actions .get-started{display:none;}
  .cmp-nav-13 .nav-toggle-btn{display:flex;}
  .cmp-nav-13 .nav.mobile-menu{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;background:var(--surface);
    border-bottom:1px solid var(--hair);box-shadow:0 16px 24px -16px var(--hair-hi);
  }
  .cmp-nav-13 .nav.mobile-menu .nav-link{padding:16px var(--page-x);border-top:1px solid var(--hair);}
  /* menu starts CLOSED; opens only when the wrapper carries .is-menu-open */
  .cmp-nav-13.is-menu-open .nav.mobile-menu{display:flex;}
}

@media (max-width:1200px){
  .cmp-nav-13 .nav{gap:22px;}
  .cmp-nav-13 .header-left{gap:34px;}
}
@media (max-width:640px){
  .cmp-nav-13{--page-x:20px;}
  .cmp-nav-13 .site-header{height:74px;}
  .cmp-nav-13 .brand img{height:100px;margin:-26px 0;}
  .cmp-nav-13 .get-started{min-width:108px;height:43px;font-size:14px;}
}

/* ---- css/sources/blox-tokens.css ---- */
/* ============================================================
   blox-tokens.css — maps bloxstrp.com's baked-in Tailwind colors
   onto our global tokens so the kit theme-flips + accent-recolors
   like the rest of the library. Applied to any element under
   .blox (each bloxstrap component wrapper carries `blox theme-*`).
   Tokens themselves come from theme.css (.theme-light/.theme-dark).
   ============================================================ */

/* surfaces / bg */
.blox.bg-black,           /* when bg-black sits on the .blox wrapper itself */
.blox .bg-black { background-color: var(--bg) !important; }
.blox .bg-white\/10,
.blox .bg-\[rgba\(255\,255\,255\,0\.10\)\],
.blox .bg-\[rgba\(255\,255\,255\,0\.15\)\],
.blox .bg-\[\#ffffff19\] { background-color: var(--panel) !important; }
.blox .bg-white { background-color: var(--surface) !important; }

/* text */
.blox .text-white { color: var(--text) !important; }
.blox .text-\[\#BB45FF\],
.blox .text-\[\#CE28FC\] { color: var(--accent) !important; }
.blox .text-\[\#535FF8\] { color: var(--accent-3) !important; }
.blox .text-\[\#E53834\] { color: var(--danger) !important; }
.blox .text-purple-600 { color: var(--accent) !important; }

/* borders */
.blox .border-white { border-color: var(--hair-hi) !important; }
.blox .border-white\/80 { border-color: var(--hair-hi) !important; }
.blox .border-white\/30 { border-color: var(--hair) !important; }
.blox .border-\[\#8E28FC\] { border-color: var(--accent) !important; }
.blox .border-\[\#414042\] { border-color: var(--hair) !important; }

/* accent gradients (buttons, badges, footer band) */
.blox .bg-\[linear-gradient\(180deg\,_\#8E28FC_0\%\,_\#5460F9_100\%\)\],
.blox .bg-\[linear-gradient\(180deg\,_rgba\(142\,_40\,_252\,_0\.5\)_0\%\,_rgba\(84\,_96\,_249\,_0\.5\)_100\%\)\],
.blox .bg-\[linear-gradient\(270deg\,_\#6E46FA_0\%\,_\#941BFC_100\%\)\] {
  background-image: linear-gradient(180deg, var(--accent), var(--accent-3)) !important;
}
.blox .my-gradient { background: var(--accent) !important; }
/* Tailwind from-/to- gradient stops used on version-table buttons + hero button */
.blox .from-\[rgba\(142\,40\,252\,0\.5\)\],
.blox .from-\[\#8E28FC80\] { --tw-gradient-from: var(--accent) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.blox .to-\[rgba\(84\,96\,249\,0\.5\)\],
.blox .to-\[\#5460F980\] { --tw-gradient-to: var(--accent-3) !important; }

/* the decorative radial-glow blobs (inline styles) get a class hook added in the HTML */
.blox .blox-glow { background: radial-gradient(50% 50% at 50% 50%, var(--accent-glow) 0%, transparent 100%) !important; }

/* tokenized card surface for the inline-styled feature/service cards (class hook added in HTML) */
.blox .blox-card { border: 1px solid var(--hair) !important; background: var(--panel) !important; }

/* footer band is an accent fill in BOTH themes -> keep its text/icons light */
.cmp-footer-10 .text-white { color: var(--accent-text) !important; }
.cmp-footer-10 .bg-white { background-color: #ffffff !important; }  /* the round social chip stays white */
.cmp-footer-10 .text-purple-600 { color: var(--accent) !important; }

/* ============================================================
   Below: merged from content-common.css — shared bundle for the
   3 hero-style pages (index.html, ios.html, pc.html). Components:
   hero-10, table-8, paragraph-9, features-16, steps-8, paragraph-6.
   Harmless on other pages since these class selectors are scoped.
   ============================================================ */


/* ---- components/hero/hero-10.css ---- */
/* ============================================================
   hero-10  (from cricket / CapCut-APK source) — TOKENIZED
   Wrapper: .cmp-hero-10 .theme-light|theme-dark
   Every selector scoped under .cmp-hero-10; source hex/vars
   remapped to global tokens (see cricket-map color table).
   ============================================================ */

/* scoped reset */
.cmp-hero-10 *{margin:0;padding:0;box-sizing:border-box;}
.cmp-hero-10 img,
.cmp-hero-10 svg{display:block;max-width:100%;}
.cmp-hero-10 a{color:inherit;text-decoration:none;}
.cmp-hero-10 ul,
.cmp-hero-10 ol,
.cmp-hero-10 li{list-style:none;}

.cmp-hero-10{
  /* local, non-color values kept from source */
  --radius: 20px;
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --hero-font: 'Plus Jakarta Sans', Arial, sans-serif;
  --page-x: clamp(28px, 5.35vw, 92px);

  font-family:var(--sans);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- top band (hero background) ---------- */
.cmp-hero-10 .top-band{
  position:relative;
  font-family:var(--hero-font);
  color:var(--text);
  background:
    radial-gradient(circle at 21% 84%, var(--accent-soft), transparent 26%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 25%, var(--bg) 100%);
  overflow-x:hidden;
}
.cmp-hero-10 .hero-wave{
  position:absolute;left:0;right:0;bottom:-1px;width:100%;height:70px;
  line-height:0;pointer-events:none;z-index:5;
}
.cmp-hero-10 .hero-wave svg{display:block;width:100%;height:100%;}
.cmp-hero-10 .hero-wave svg path{fill:var(--bg);}
@media (max-width:650px){
  .cmp-hero-10 .hero-wave{height:40px;}
}

/* ---------- hero ---------- */
.cmp-hero-10 .hero{
  display:flex;align-items:center;padding:56px 0 62px calc(var(--page-x) + 40px);position:relative;
}
.cmp-hero-10 .hero-grid{
  width:100%;display:grid;grid-template-columns:minmax(420px,56%) minmax(320px,44%);
  align-items:center;gap:48px;position:relative;z-index:6;
}
.cmp-hero-10 .hero-copy{max-width:680px;padding-bottom:14px;margin-left:32px;}
.cmp-hero-10 .eyebrow{
  display:inline-flex;align-items:center;margin-bottom:30px;
  font-family:var(--sans);text-transform:none;letter-spacing:0;
  font-size:0.9rem;font-weight:600;color:var(--accent);
  background:var(--glass);border:1px solid var(--hair);
  padding:8px 20px;border-radius:999px;
  box-shadow:0 10px 30px var(--accent-glow),0 0 0 7px var(--accent-soft);
}
.cmp-hero-10 h1{
  max-width:660px;font-size:clamp(2.4rem,4.55vw,3.4rem);line-height:1.12;
  letter-spacing:-0.03em;font-weight:600;color:var(--text);
}
.cmp-hero-10 .gradient-text{
  background:linear-gradient(100deg,var(--accent) 10%,var(--accent-2) 48%,var(--accent-grad-top) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cmp-hero-10 .hero-description{
  max-width:680px;margin-top:22px;color:var(--text-3);
  font-size:clamp(17px,1.3vw,20px);line-height:1.58;letter-spacing:-0.3px;
}
.cmp-hero-10 .hero-actions{display:flex;align-items:center;gap:18px;margin-top:34px;}
.cmp-hero-10 .primary-btn{
  min-width:159px;height:58px;padding:0 26px;border:0;border-radius:24px;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;
  font-size:17px;font-weight:500;white-space:nowrap;color:var(--accent-text);
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-3) 100%);
  box-shadow:0 4px 12px var(--accent-glow);
}
.cmp-hero-10 .primary-btn svg{width:19px;height:19px;}

.cmp-hero-10 .visual-wrap{
  width:100%;min-width:0;position:relative;
  display:flex;align-items:center;overflow:hidden;
}
.cmp-hero-10 .visual-placeholder{
  width:100%;max-width:220px;height:460px;flex:0 0 auto;position:relative;overflow:hidden;
  margin-left:36px;
  border-radius:27px;
  background:linear-gradient(180deg,var(--glass),var(--surface)),var(--surface);
  border:1px solid var(--hair);
  box-shadow:none;
}
.cmp-hero-10 .hero-image{width:100%;height:100%;object-fit:contain;display:block;}

@media (max-width:1200px){
  .cmp-hero-10 .hero-grid{grid-template-columns:minmax(380px,48%) minmax(380px,52%);gap:32px;}
}
@media (max-width:980px){
  .cmp-hero-10 .hero{padding:56px var(--page-x) 56px;}
  .cmp-hero-10 .hero-grid{grid-template-columns:1fr;gap:44px;}
  .cmp-hero-10 .hero-copy{max-width:760px;}
  .cmp-hero-10 .visual-wrap{overflow:visible;}
  .cmp-hero-10 .visual-placeholder{width:100%;max-width:420px;height:320px;border-radius:24px;}
}
@media (max-width:640px){
  .cmp-hero-10{--page-x:20px;}
  .cmp-hero-10 .hero{padding-top:40px;}
  .cmp-hero-10 .eyebrow{margin-bottom:22px;}
  .cmp-hero-10 h1{font-size:clamp(2.1rem,10vw,2.6rem);letter-spacing:-0.02em;}
  .cmp-hero-10 .hero-description{font-size:16px;line-height:1.55;}
  .cmp-hero-10 .hero-actions{align-items:stretch;flex-direction:column;}
  .cmp-hero-10 .primary-btn{width:100%;}
  .cmp-hero-10 .visual-placeholder{height:240px;}
}

/* ---- components/table/table-8.css ---- */
/* ============================================================
   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:row;align-items:stretch;gap:8px;}
  .cmp-table-8 .spec-label{min-width:0;flex:0 0 42%;text-align:center;padding:12px 10px;font-size:13px;}
  .cmp-table-8 .spec-value{text-align:center;padding:12px 10px;font-size:13px;}
  .cmp-table-8 .specs-title{font-size:24px;}
}
@media (max-width:420px){
  .cmp-table-8 .spec-label{flex:0 0 38%;font-size:12px;padding:10px 6px;}
  .cmp-table-8 .spec-value{font-size:12px;padding:10px 6px;}
}

/* ---- components/paragraph/paragraph-9.css ---- */
/* ============================================================
   COMPONENT: paragraph-9  (section.why-capcut "Why CapCut APK?"
   harvested from cricket/index.html, repainted onto global tokens)
   Every selector is namespaced under .cmp-paragraph-9 and every
   color references a token from theme.css so it works light OR dark.
   ============================================================ */

/* scoped reset */
.cmp-paragraph-9 *{margin:0;padding:0;box-sizing:border-box;}
.cmp-paragraph-9 img{max-width:100%;display:block;}
.cmp-paragraph-9 ul,
.cmp-paragraph-9 ol,
.cmp-paragraph-9 li{list-style:none;}
.cmp-paragraph-9 a{color:inherit;text-decoration:none;}

.cmp-paragraph-9{
  font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.cmp-paragraph-9 .wrap{max-width:1160px;margin:0 auto;padding:0 32px;}
.cmp-paragraph-9 section{position:relative;}

/* ---------- why capcut ---------- */
.cmp-paragraph-9 .why-capcut{background:var(--surface);padding:64px 0 80px;}
.cmp-paragraph-9 .why-capcut .section-head{text-align:center;margin-bottom:56px;}
.cmp-paragraph-9 .why-capcut .eyebrow{
  display:inline-flex;align-items:center;margin:0 auto 20px;
  font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:0.9rem;font-weight:600;color:var(--accent);background:var(--glass);
  border:1px solid var(--accent-soft);padding:8px 20px;border-radius:999px;
  box-shadow:0 10px 30px var(--accent-glow),0 0 0 7px var(--accent-soft);
}
.cmp-paragraph-9 .why-capcut .section-head h2{font-size:clamp(2.1rem,4.2vw,3rem);font-weight:600;letter-spacing:-0.02em;color:var(--text);}
.cmp-paragraph-9 .why-row{display:flex;align-items:center;gap:56px;margin-bottom:64px;}
.cmp-paragraph-9 .why-row:last-child{margin-bottom:0;}
.cmp-paragraph-9 .why-row.rev{flex-direction:row-reverse;}
.cmp-paragraph-9 .why-ring{
  position:relative;flex:0 0 190px;width:190px;height:190px;border-radius:50%;
  border:2px dashed var(--accent-glow);display:flex;align-items:center;justify-content:center;
}
.cmp-paragraph-9 .why-ring .core{
  width:130px;height:130px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:52px;background:linear-gradient(135deg,var(--accent-soft),var(--accent-glow));
  box-shadow:0 14px 30px var(--accent-glow);
}
.cmp-paragraph-9 .why-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--accent);}
.cmp-paragraph-9 .why-dot.d1{top:6px;right:20px;}
.cmp-paragraph-9 .why-dot.d2{bottom:14px;left:0;background:var(--accent-2);}
.cmp-paragraph-9 .why-copy{flex:1 1 auto;min-width:0;}
.cmp-paragraph-9 .why-tag{
  display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;letter-spacing:0.05em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:6px 14px;
  border-radius:999px;margin-bottom:14px;
}
.cmp-paragraph-9 .why-copy h3{font-size:21px;font-weight:700;margin-bottom:10px;color:var(--text);letter-spacing:-0.2px;}
.cmp-paragraph-9 .why-copy p{color:var(--text-3);font-size:16px;line-height:1.72;max-width:460px;}
.cmp-paragraph-9 .why-row.rev .why-copy{text-align:right;}
.cmp-paragraph-9 .why-row.rev .why-copy p{margin-left:auto;}
@media (max-width:700px){
  .cmp-paragraph-9 .why-row,
  .cmp-paragraph-9 .why-row.rev{flex-direction:column;text-align:center;gap:26px;}
  .cmp-paragraph-9 .why-row.rev .why-copy{text-align:center;}
  .cmp-paragraph-9 .why-copy p{margin:0 auto;}
}

/* ---- components/features/features-16.css ---- */
/* ============================================================
   features-16  (from cricket / CapCut-APK source) — TOKENIZED
   Wrapper: .cmp-features-16 .theme-light|theme-dark
   section.features-section ("Everything You Need…") — feature card grid.
   Every selector scoped under .cmp-features-16; source hex/vars
   remapped to global tokens (see cricket-map color table).
   ============================================================ */

/* scoped reset */
.cmp-features-16 *{margin:0;padding:0;box-sizing:border-box;}
.cmp-features-16 img,
.cmp-features-16 svg{display:block;max-width:100%;}
.cmp-features-16 a{color:inherit;text-decoration:none;}
.cmp-features-16 ul,
.cmp-features-16 ol,
.cmp-features-16 li{list-style:none;}

.cmp-features-16{
  /* local, non-color values kept from source */
  --radius: 20px;
  --mono: 'Poppins', sans-serif;
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --hero-font: 'Plus Jakarta Sans', Arial, sans-serif;
  --page-x: clamp(28px, 5.35vw, 92px);

  font-family:var(--sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- shared section-head (base rules from source) ---------- */
.cmp-features-16 .section-head{max-width:720px;margin:0 auto 30px;text-align:center;padding:0 24px;}
.cmp-features-16 .section-head .kicker{
  font-family:var(--mono);font-size:0.78rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--accent-2);font-weight:700;margin-bottom:14px;justify-content:center;display:flex;
}
.cmp-features-16 .section-head h2{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;letter-spacing:-0.025em;line-height:1.2;margin-bottom:16px;}
.cmp-features-16 .section-head h2 .grad{
  background:linear-gradient(135deg,var(--accent-2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.cmp-features-16 .section-head .sub{color:var(--text-2);font-size:1.02rem;max-width:560px;margin:0 auto;}

/* ---------- features ----------
   exact port of the supplied features-section reference, scoped so its
   class names (section-head, eyebrow, etc.) can't collide with the rest. */
.cmp-features-16 .features-section{
  --f-ink: var(--text);
  --f-copy: var(--text-2);
  --f-blue: var(--accent);
  --f-violet: var(--accent-2);
  --f-pale-number: var(--accent-soft);
  --f-pill: var(--accent-soft);

  position:relative;width:100%;padding:18px 0 58px;
  isolation:isolate;font-family:'Poppins',sans-serif;color:var(--f-ink);
  background:
    radial-gradient(circle at 15% 10%, var(--accent-soft), transparent 25%),
    radial-gradient(circle at 88% 32%, var(--accent-soft), transparent 24%),
    radial-gradient(circle at 14% 72%, var(--accent-soft), transparent 22%),
    linear-gradient(90deg, var(--bg-2) 0%, var(--bg) 45%, var(--bg) 55%, var(--bg-2) 100%);
  overflow-x:hidden;
}

/* background above bleeds full width; this inner wrapper caps and centers the actual content */
.cmp-features-16 .features-inner{position:relative;width:100%;max-width:682px;margin:0 auto;padding:0 34px;}

.cmp-features-16 .features-section .section-head{width:min(100%, 520px);margin:0 auto 20px;text-align:center;}

.cmp-features-16 .features-section .eyebrow{
  display:inline-flex;align-items:center;margin:0 auto 22px;
  font-family:var(--sans);text-transform:none;letter-spacing:0;
  font-size:0.9rem;font-weight:600;color:var(--accent);
  background:var(--glass);border:1px solid var(--hair);
  padding:8px 20px;border-radius:999px;white-space:nowrap;
  box-shadow:0 10px 30px var(--accent-glow),0 0 0 7px var(--accent-soft);
}

.cmp-features-16 .features-section .section-head h2{
  margin:10px 0 12px;font-size:clamp(31px, 5.1vw, 36px);line-height:1.32;
  letter-spacing:-1.55px;font-weight:600;
}
.cmp-features-16 .features-section .section-head h2 span{
  display:block;background:linear-gradient(90deg, var(--accent-2) 0%, var(--accent) 52%, var(--accent-3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cmp-features-16 .features-section .section-head p{
  width:min(100%, 370px);margin:0 auto;color:var(--text-2);font-size:12px;line-height:1.45;
}

.cmp-features-16 .features-section .feature-list{position:relative;width:100%;display:flex;flex-direction:column;gap:76px;}

.cmp-features-16 .features-section .feature-row{
  position:relative;display:grid;grid-template-columns:1.04fr .96fr;
  align-items:center;gap:38px;min-height:310px;
}
.cmp-features-16 .features-section .feature-row:nth-child(even){grid-template-columns:.96fr 1.04fr;}

.cmp-features-16 .features-section .feature-copy{position:relative;z-index:3;width:100%;padding-top:36px;}

.cmp-features-16 .features-section .feature-number{
  position:absolute;top:-30px;left:-1px;color:var(--f-pale-number);
  font-size:92px;line-height:1;letter-spacing:-5px;font-weight:700;
  user-select:none;z-index:-1;
}

.cmp-features-16 .features-section .feature-pill{
  display:inline-flex;align-items:center;gap:9px;height:auto;padding:6px 14px;border-radius:999px;
  color:var(--text);background:linear-gradient(180deg, var(--accent-soft), var(--accent-glow));
  box-shadow:0 5px 16px var(--accent-glow);font-size:20px;line-height:1.12;letter-spacing:-.45px;
  font-weight:600;white-space:nowrap;margin:10px 0 9px;
}
.cmp-features-16 .features-section .feature-pill svg{width:0.8em;height:0.8em;color:var(--text);flex:0 0 auto;}
.cmp-features-16 .features-section .feature-pill strong{color:var(--text);}

.cmp-features-16 .features-section .feature-copy p{margin:0;color:var(--f-copy);font-size:14px;line-height:1.6;font-weight:400;}

.cmp-features-16 .features-section .feature-visual{
  position:relative;z-index:1;display:grid;place-items:center;width:100%;min-height:285px;
}
.cmp-features-16 .features-section .feature-visual::before{
  content:"";position:absolute;width:240px;height:240px;
  background:url('assets/pattern-feature-bg.webp') center/contain no-repeat;
  opacity:30%;z-index:-1;
}
.cmp-features-16 .features-section .feature-visual img{
  position:relative;z-index:2;display:block;width:188px;
  border-radius:16px;object-fit:cover;object-position:top center;
  filter:drop-shadow(0 18px 26px var(--accent-glow));
}

.cmp-features-16 .features-section .feature-row:nth-child(1) .feature-visual img{width:194px;height:286px;transform:rotate(-3.5deg);}
.cmp-features-16 .features-section .feature-row:nth-child(2) .feature-visual img{width:176px;height:336px;transform:rotate(2.6deg);}
.cmp-features-16 .features-section .feature-row:nth-child(3) .feature-visual img{width:177px;height:335px;transform:rotate(-1.3deg);}
.cmp-features-16 .features-section .feature-row:nth-child(4) .feature-visual img{width:178px;height:344px;transform:rotate(2deg);}
.cmp-features-16 .features-section .feature-row:nth-child(5) .feature-visual img{width:178px;height:338px;transform:rotate(-2.2deg);}
.cmp-features-16 .features-section .feature-row:nth-child(6) .feature-visual img{width:183px;height:350px;transform:rotate(2deg);}

.cmp-features-16 .features-section .feature-row:nth-child(2) .feature-visual::before,
.cmp-features-16 .features-section .feature-row:nth-child(4) .feature-visual::before,
.cmp-features-16 .features-section .feature-row:nth-child(6) .feature-visual::before{transform:rotate(12deg);}

.cmp-features-16 .features-section .feature-row:nth-child(3) .feature-visual::before,
.cmp-features-16 .features-section .feature-row:nth-child(5) .feature-visual::before{transform:rotate(-9deg);}

.cmp-features-16 .features-section .dot-grid{
  position:absolute;z-index:0;width:67px;height:47px;opacity:.48;
  background-image:radial-gradient(circle, var(--accent-glow) 1.4px, transparent 1.5px);
  background-size:9px 9px;pointer-events:none;
}
.cmp-features-16 .features-section .dots-top{right:-11px;top:206px;}
.cmp-features-16 .features-section .dots-mid{right:-12px;top:1397px;}

.cmp-features-16 .features-section .feature-row:nth-child(1){min-height:317px;}
.cmp-features-16 .features-section .feature-row:nth-child(2){min-height:303px;}
.cmp-features-16 .features-section .feature-row:nth-child(3){min-height:303px;}
.cmp-features-16 .features-section .feature-row:nth-child(4){min-height:299px;}
.cmp-features-16 .features-section .feature-row:nth-child(5){min-height:300px;}
.cmp-features-16 .features-section .feature-row:nth-child(6){min-height:326px;}

@media (max-width:620px){
  .cmp-features-16 .features-section{padding:20px 0 46px;}
  .cmp-features-16 .features-inner{padding:0 22px;}
  .cmp-features-16 .features-section .section-head{margin-bottom:34px;}
  .cmp-features-16 .features-section .section-head h2{font-size:34px;}
  .cmp-features-16 .features-section .section-head p{font-size:12px;}

  .cmp-features-16 .features-section .feature-row,
  .cmp-features-16 .features-section .feature-row:nth-child(even){
    grid-template-columns:1fr;gap:64px;min-height:auto;
  }
  .cmp-features-16 .features-section .feature-row .feature-visual{order:1;min-height:275px;}
  .cmp-features-16 .features-section .feature-row .feature-copy{order:2;max-width:420px;margin:0 auto;padding-top:34px;}
  .cmp-features-16 .features-section .feature-pill{font-size:22px;}
  .cmp-features-16 .features-section .feature-copy p{font-size:15px;}
  .cmp-features-16 .features-section .feature-number{font-size:94px;top:-30px;}
  .cmp-features-16 .features-section .dot-grid{display:none;}
}

/* wider stage for tablet/desktop — the reference above was pixel-tuned to a 682px mock,
   which reads as a narrow stripe on a real desktop viewport. Go full width (matching the
   site's standard 1160px content width) and scale everything up proportionally. */
@media (min-width:621px){
  .cmp-features-16 .features-section{padding:40px 0 90px;}
  .cmp-features-16 .features-inner{max-width:1160px;padding:0 40px;}
  .cmp-features-16 .features-section .section-head{width:min(100%,660px);margin-bottom:28px;}
  .cmp-features-16 .features-section .section-head h2{font-size:clamp(38px,3.8vw,50px);letter-spacing:-2px;margin:14px 0 16px;}
  .cmp-features-16 .features-section .section-head p{font-size:15.5px;width:min(100%,500px);line-height:1.6;}

  .cmp-features-16 .features-section .feature-list{gap:128px;}
  .cmp-features-16 .features-section .feature-row{gap:64px;}
  .cmp-features-16 .features-section .feature-row:nth-child(1),
  .cmp-features-16 .features-section .feature-row:nth-child(2),
  .cmp-features-16 .features-section .feature-row:nth-child(3),
  .cmp-features-16 .features-section .feature-row:nth-child(4),
  .cmp-features-16 .features-section .feature-row:nth-child(5),
  .cmp-features-16 .features-section .feature-row:nth-child(6){min-height:400px;}

  .cmp-features-16 .features-section .feature-copy{padding-top:48px;}
  .cmp-features-16 .features-section .feature-number{font-size:112px;letter-spacing:-6.5px;top:-36px;}
  .cmp-features-16 .features-section .feature-pill{padding:8px 18px;gap:10px;font-size:27px;margin:13px 0 12px;}
  .cmp-features-16 .features-section .feature-copy p{font-size:16.5px;line-height:1.7;max-width:460px;}

  .cmp-features-16 .features-section .feature-visual{min-height:460px;}
  .cmp-features-16 .features-section .feature-visual::before{width:420px;height:420px;}
  .cmp-features-16 .features-section .feature-visual img{border-radius:22px;}

  .cmp-features-16 .features-section .feature-row:nth-child(1) .feature-visual img{width:252px;height:372px;}
  .cmp-features-16 .features-section .feature-row:nth-child(2) .feature-visual img{width:229px;height:437px;}
  .cmp-features-16 .features-section .feature-row:nth-child(3) .feature-visual img{width:230px;height:435px;}
  .cmp-features-16 .features-section .feature-row:nth-child(4) .feature-visual img{width:231px;height:446px;}
  .cmp-features-16 .features-section .feature-row:nth-child(5) .feature-visual img{width:231px;height:439px;}
  .cmp-features-16 .features-section .feature-row:nth-child(6) .feature-visual img{width:238px;height:456px;}

  .cmp-features-16 .features-section .dot-grid{width:84px;height:59px;background-size:11px 11px;}
  .cmp-features-16 .features-section .dots-top{top:255px;}
  .cmp-features-16 .features-section .dots-mid{top:1855px;}
}

/* ---- components/steps/steps-8.css ---- */
/* ============================================================
   COMPONENT: steps-8  (structure harvested from scarlet-ios.com
   ".ipa-installation" — IPA install process cards — repainted
   onto global tokens)
   SYSTEM: namespaced structure + global tokens.
     • Every element lives under .cmp-steps-8 → its CSS can't
       override any other component.
     • Every color is a token from theme.css → works in light OR
       dark, recolorable from one place.
   Source is dark-by-design; mapped so it also works in light.
   ============================================================ */

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

/* ---- container ---- */
.cmp-steps-8 .container{max-width:1200px;margin:0 auto;padding:0 2rem;}

/* ---- section ---- */
.cmp-steps-8 .ipa-installation{padding:6rem 0;background:var(--bg);}
.cmp-steps-8 .ipa-installation h2{text-align:center;margin-bottom:1rem;color:var(--text);font-size:2.5rem;}
.cmp-steps-8 .section-subtitle{text-align:center;color:var(--text-2);max-width:800px;margin:0 auto 3rem;line-height:1.6;}

/* ---- process steps ---- */
.cmp-steps-8 .process-steps{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:2rem;}
.cmp-steps-8 .process-card{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:2rem;display:flex;align-items:center;gap:2rem;transition:transform .3s ease,background-color .3s ease;}
.cmp-steps-8 .process-card:hover{transform:translateX(10px);background:var(--surface-2);}
.cmp-steps-8 .process-icon{background:var(--accent);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cmp-steps-8 .process-icon svg{color:var(--accent-text);width:24px;height:24px;}
.cmp-steps-8 .process-card p{color:var(--text-2);line-height:1.6;margin:0;font-size:1.1rem;}

@media (max-width:768px){
  .cmp-steps-8 .ipa-installation h2{font-size:2rem;}
  .cmp-steps-8 .process-card{padding:1.5rem;gap:1rem;}
  .cmp-steps-8 .process-icon{width:40px;height:40px;}
}

/* ---- components/paragraph/paragraph-6.css ---- */
/* ============================================================
   COMPONENT: paragraph-6  (conclusion band with CTA button)
   Structure harvested from scarlet-ios.com <section class="conclusion">,
   repainted onto the global design tokens in ../../css/theme.css.
     • Every element lives under .cmp-paragraph-6 → scoped, can't leak.
     • Every color is a token → works in light OR dark, recolorable.
   Set the theme with the wrapper class:
     .cmp-paragraph-6.theme-dark  or  .cmp-paragraph-6.theme-light
   ============================================================ */

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

/* ---- layout container ---- */
.cmp-paragraph-6 .container{max-width:1200px;margin:0 auto;padding:0 2rem;}

/* ---- conclusion band ---- */
.cmp-paragraph-6 .conclusion{padding:2rem 0;background:var(--bg);}
.cmp-paragraph-6 .conclusion-wrapper{max-width:900px;margin:0 auto;background:var(--surface);border:1px solid var(--hair);border-radius:24px;padding:3rem;position:relative;overflow:hidden;}
.cmp-paragraph-6 .conclusion-wrapper::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent-2));}
.cmp-paragraph-6 .conclusion-content{display:flex;flex-direction:column;align-items:center;gap:2rem;text-align:center;}

/* ---- text ---- */
.cmp-paragraph-6 .conclusion-text{display:flex;flex-direction:column;gap:1.5rem;}
.cmp-paragraph-6 .conclusion-text p{color:var(--text-2);line-height:1.8;font-size:1.1rem;}
.cmp-paragraph-6 .conclusion-text a{color:var(--accent);}
.cmp-paragraph-6 .highlight-text{color:var(--text)!important;font-size:1.3rem!important;font-weight:500;line-height:1.6!important;}

/* ---- CTA (accent FILL → text uses --accent-text) ---- */
.cmp-paragraph-6 .conclusion-cta{margin-top:2rem;}
.cmp-paragraph-6 .cta-button{display:inline-block;padding:1rem 2rem;background:var(--accent);color:var(--accent-text);text-decoration:none;border-radius:8px;font-weight:500;transition:all .3s ease;}
.cmp-paragraph-6 .cta-button:hover{transform:translateY(-2px);background:var(--accent-3);box-shadow:0 5px 15px var(--accent-glow);}

@media (max-width:768px){
  .cmp-paragraph-6 .conclusion-wrapper{padding:2rem;margin:0 1rem;}
  .cmp-paragraph-6 .highlight-text{font-size:1.2rem!important;}
  .cmp-paragraph-6 .conclusion-text p{font-size:1rem;}
}

/* ============================================================
   Below: merged from fonts.css — self-hosted site fonts
   ============================================================ */

/* ============================================================
   fonts.css — self-hosted site fonts (2 families, no external requests)
   Body/UI: Plus Jakarta Sans (variable, weights 400-800)
   Headings: Poppins (static weights 400/500/600/700/800)
   ============================================================ */

@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(../assets/fonts/plus-jakarta-sans-var.woff2) format('woff2');
}

@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(../assets/fonts/poppins-400.woff2) format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(../assets/fonts/poppins-500.woff2) format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(../assets/fonts/poppins-600.woff2) format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(../assets/fonts/poppins-700.woff2) format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url(../assets/fonts/poppins-800.woff2) format('woff2');
}

/* ============================================================
   Below: merged from tailwind.css — self-hosted Tailwind build
   ============================================================ */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-8{height:2rem}.w-8{width:2rem}.w-full{width:100%}.max-w-\[820px\]{max-width:820px}.max-w-xs{max-width:20rem}.border-separate{border-collapse:separate}.border-spacing-y-3{--tw-border-spacing-y:0.75rem;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-8{gap:2rem}.gap-\[26px\]{gap:26px}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-\[10px\]{border-radius:10px}.rounded-\[12px\]{border-radius:12px}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-t{border-top-width:1px}.border-white\/30{border-color:hsla(0,0%,100%,.3)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-\[linear-gradient\(270deg\2c _\#6E46FA_0\%\2c _\#941BFC_100\%\)\]{background-image:linear-gradient(270deg,#6e46fa,#941bfc)}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.px-\[25px\]{padding-left:25px;padding-right:25px}.px-\[48px\]{padding-left:48px;padding-right:48px}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-\[10px\]{padding-top:10px;padding-bottom:10px}.py-\[60px\]{padding-top:60px;padding-bottom:60px}.pt-2{padding-top:.5rem}.pt-\[10px\]{padding-top:10px}.pt-\[15px\]{padding-top:15px}.pt-\[16px\]{padding-top:16px}.pt-\[24px\]{padding-top:24px}.text-left{text-align:left}.text-center{text-align:center}.text-\[15px\]{font-size:15px}.text-\[18px\]{font-size:18px}.text-\[26px\]{font-size:26px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.leading-\[22px\]{line-height:22px}.leading-\[30px\]{line-height:30px}.leading-\[32\.604px\]{line-height:32.604px}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.invert{--tw-invert:invert(100%)}.filter,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@media (min-width:768px){.md\:container{width:100%}@media (min-width:640px){.md\:container{max-width:640px}}@media (min-width:768px){.md\:container{max-width:768px}}@media (min-width:1024px){.md\:container{max-width:1024px}}@media (min-width:1280px){.md\:container{max-width:1280px}}@media (min-width:1536px){.md\:container{max-width:1536px}}}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}@media (min-width:768px){.md\:mx-auto{margin-left:auto;margin-right:auto}.md\:mt-0{margin-top:0}.md\:block{display:block}.md\:hidden{display:none}.md\:max-w-7xl{max-width:80rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-start{align-items:flex-start}.md\:justify-start{justify-content:flex-start}.md\:justify-between{justify-content:space-between}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:text-left{text-align:left}.md\:text-\[20px\]{font-size:20px}}@media (min-width:1024px){.lg\:mb-\[60px\]{margin-bottom:60px}.lg\:mt-\[20px\]{margin-top:20px}.lg\:max-w-\[200px\]{max-width:200px}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.lg\:px-\[150px\]{padding-left:150px;padding-right:150px}.lg\:px-\[70px\]{padding-left:70px;padding-right:70px}.lg\:text-\[18px\]{font-size:18px}.lg\:text-\[22px\]{font-size:22px}.lg\:text-\[52px\]{font-size:52px}.lg\:text-base{font-size:1rem;line-height:1.5rem}.lg\:leading-\[30px\]{line-height:30px}.lg\:leading-\[62px\]{line-height:62px}}

/* Footer grid: 3-column variant (Social Links column removed) */
@media (min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}