/* ==========================================================================
   Elite Tech Global — Logo-gradient theme layer (home-v2.html)
   Loads after main.css. Active when <body class="tg">; palette chosen by data-theme.
   Logo colors: deep blue #2B55A3 → azure #0A9BE0 → teal #18B3A0 → green #3DB54A
   ========================================================================== */

/* ---------- Palette: Logo Gradient (default) ---------- */
body.tg[data-theme="logo"] {
  --g1: #2B55A3; --g2: #0A9BE0; --g3: #18B3A0; --g4: #3DB54A;
  /* bright stops for dark backgrounds */
  --b1: #4B86E8; --b2: #19B6F0; --b3: #22C3AE; --b4: #5CCB5F;
  /* deep stops for light backgrounds & white-text bands (≥3.7:1 on paper) */
  --d1: #1E4A9A; --d2: #0A7FC0; --d3: #0B8A7B; --d4: #2A8F3A;
  --red: #DB4027; --red-600: #C2351E; --red-100: #FFE3DC; --cta-fg: #fff;
  --brass: #FFC22E; --brass-200: #FFE29A;
  --navy-950: #071029; --navy-900: #0B1A3A; --navy-800: #13285A; --navy-700: #1D3B7A;
  --blue: #0A7FC0; --green: #2A8F3A;
  --paper: #F7F4EC; --paper-2: #EEF3F1; --paper-3: #DDE7E4; --white: #FFFEFA;
  --tint-sky: #E4F1FB; --tint-mint: #E3F5EE; --tint-sun: #FFF4D6;
}

/* ---------- Palette: Ocean & Sun ---------- */
body.tg[data-theme="ocean"] {
  --g1: #1D3F8F; --g2: #00A3D9; --g3: #00B2A9; --g4: #7BD389;
  --b1: #5A8CF0; --b2: #2EC4F5; --b3: #2ED3C6; --b4: #9BE3A6;
  --d1: #1A3A86; --d2: #0A6FA8; --d3: #08776F; --d4: #2E7D3A;
  --red: #FFB81C; --red-600: #F0A400; --red-100: #FFF1CC; --cta-fg: #0B1A3A;
  --brass: #FF7A59; --brass-200: #FFC9B8;
  --navy-950: #04121F; --navy-900: #082238; --navy-800: #0E3350; --navy-700: #16476B;
  --blue: #0A6FA8; --green: #2E7D3A;
  --paper: #F3F7F9; --paper-2: #E6F1F4; --paper-3: #D3E4EA; --white: #FFFFFF;
  --tint-sky: #DFF1FA; --tint-mint: #DDF4EF; --tint-sun: #FFF3D1;
}

body.tg {
  --grad:      linear-gradient(100deg, var(--g1) 0%, var(--g2) 36%, var(--g3) 68%, var(--g4) 100%);
  --grad-b:    linear-gradient(100deg, var(--b1) 0%, var(--b2) 36%, var(--b3) 68%, var(--b4) 100%);
  --grad-d:    linear-gradient(100deg, var(--d1) 0%, var(--d2) 36%, var(--d3) 68%, var(--d4) 100%);
  --grad-v:    linear-gradient(180deg, var(--g1), var(--g3));
}

/* ---------- Gradient text helpers ---------- */
.tg .hl-red, .tg .sec-title .serif-i, .tg .pcard__title .serif-i, .tg .grad-text {
  background: var(--grad-d); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-right: .06em;
}
.tg .hero .hl-red, .tg .fasttrack .hl-red, .tg .coverage .sec-title .serif-i, .tg .cta .hl-red,
.tg .fasttrack .sec-title .serif-i, .tg .cta .serif-i {
  background-image: var(--grad-b);
}
.tg .hero__title .serif-i { color: var(--brass-200); background: none; -webkit-background-clip: initial; }
.tg .cta__title .serif-i { background: none; color: var(--brass-200); -webkit-background-clip: initial; }

/* Eyebrows: teal on light, bright cyan on dark */
.tg .eyebrow { color: var(--d3); }
.tg .eyebrow::before { background: var(--grad); height: 3px; border-radius: 2px; }
.tg .eyebrow--on-dark { color: var(--b2); }
.tg .hero .eyebrow--on-dark { color: var(--brass); }
.tg .manifesto .mono-label { color: var(--d2); }
.tg .rule { background: var(--grad); height: 3px; }

/* Buttons */
.tg .btn--red { --fg: var(--cta-fg); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--red) 80%, transparent); }
.tg .btn--grad { --bg: transparent; --fg: #fff; border: 0; background: var(--grad-d); background-size: 140% 100%; transition: background-position 400ms var(--ease), transform var(--t) var(--ease); }
.tg .btn--grad:hover { background-position: 100% 0; }
.tg .tag--red { background: var(--tint-sky); color: var(--d1); border-color: color-mix(in srgb, var(--g2) 35%, transparent); }
.tg .link-arrow { color: var(--d2); }
.tg :focus-visible { outline-color: var(--g2); }
.tg ::selection { background: var(--g2); color: #fff; }

/* ---------- Header ---------- */
.tg .hdr.is-solid { background: color-mix(in srgb, var(--paper) 90%, transparent); box-shadow: 0 1px 0 var(--line), 0 6px 0 -5px var(--g2); }
.tg .nav__new { margin-left: 6px; padding: 3px 6px; border-radius: 4px; font: 700 9.5px/1 var(--f-mono); letter-spacing: .08em; background: var(--grad); color: #fff; }
.tg .drop__card--feat { background-color: var(--navy-900); background-image: radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--g2) 55%, transparent), transparent 55%), radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--g4) 40%, transparent), transparent 55%); }
.tg .utility { background: var(--navy-950); box-shadow: inset 0 -2px 0 0 transparent; position: relative; }
.tg .utility::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); }
.tg .utility .ico { color: var(--b3); }

/* ---------- Hero: aurora in logo colors ---------- */
.tg .hero__sky {
  background:
    radial-gradient(900px 520px at 88% 4%, color-mix(in srgb, var(--g2) 55%, transparent), transparent 62%),
    radial-gradient(760px 480px at 62% 70%, color-mix(in srgb, var(--g3) 34%, transparent), transparent 60%),
    radial-gradient(700px 460px at 4% 96%, color-mix(in srgb, var(--g4) 30%, transparent), transparent 60%),
    radial-gradient(800px 520px at 20% 0%, color-mix(in srgb, var(--g1) 60%, transparent), transparent 65%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 60%, var(--navy-800) 100%);
}
.tg .hero__num { -webkit-text-stroke: 0; color: transparent; background: linear-gradient(160deg, color-mix(in srgb, var(--b2) 22%, transparent), color-mix(in srgb, var(--b4) 10%, transparent) 70%); -webkit-background-clip: text; background-clip: text; }
.tg .hero__glow { background: radial-gradient(circle, color-mix(in srgb, var(--g3) 30%, transparent), transparent 65%); }
.tg .hero__stripes { display: block; height: 8px; background: var(--grad); }
.tg .hero__stripes i { display: none; }
.tg .cu__bar span { background: var(--grad-b); }
.tg .cu__steps .is-now .ico { background: var(--grad); }
.tg .bars i.is-red { background: var(--b2); }
.tg .bars i { background: color-mix(in srgb, var(--b3) 30%, transparent); }
.tg .card-ui--paper .cu__stat { color: var(--d4); }
.tg .spark path { stroke: var(--d3); }
.tg .hero__contact .ico { background: color-mix(in srgb, var(--b2) 16%, transparent); color: var(--b2); }
.tg .hero__contact a:nth-child(2) .ico { color: var(--b4); background: color-mix(in srgb, var(--b4) 16%, transparent); }
.tg .hero__contact a:nth-child(3) .ico { color: var(--b3); background: color-mix(in srgb, var(--b3) 16%, transparent); }
.tg .hero__contact a:nth-child(4) .ico { color: var(--brass); background: color-mix(in srgb, var(--brass) 16%, transparent); }

/* ---------- Logos ---------- */
.tg .badges li:nth-child(1) { border-color: var(--g1); color: var(--d1); }
.tg .badges li:nth-child(2) { border-color: var(--g2); color: var(--d2); }
.tg .badges li:nth-child(3) { border-color: var(--g3); color: var(--d3); }
.tg .badges li:nth-child(4) { border-color: var(--g4); color: var(--d4); }

/* ---------- Manifesto ---------- */
.tg .manifesto { background: linear-gradient(180deg, var(--paper) 0%, var(--tint-sky) 100%); }
.tg .manifesto .w.is-key { background: var(--grad-d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tg .sig-star { color: var(--g3); }

/* ---------- Platforms: one color story per platform ---------- */
.tg .platforms { background: linear-gradient(180deg, var(--tint-sky) 0%, var(--paper) 30%); }
.tg .pcard { border-top: 0; }
.tg .pcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--accent, var(--grad)); z-index: 2; }
.tg .pcard--zoho { --accent: var(--grad); }
.tg .pcard--aws  { --accent: linear-gradient(90deg, #FF9900, #FFC22E); }
.tg .pcard--shopify { --accent: linear-gradient(90deg, #5E8E3E, #95BF47); }
.tg .pcard--wp   { --accent: linear-gradient(90deg, #21759B, #3EA7D8); }
.tg .pcard--zoho .pcard__art { background: linear-gradient(150deg, var(--g1) 0%, #12357A 45%, var(--navy-950) 100%); }
.tg .pcard--zoho .pcard__art::after { background: radial-gradient(circle, color-mix(in srgb, var(--g4) 55%, transparent), transparent 65%); }
.tg .pcard--aws .pcard__art { background: linear-gradient(150deg, #232F3E, #131A22); }
.tg .pcard--aws .pcard__kpis strong { color: #FFB13B; }
.tg .pcard--shopify .pcard__art { background: linear-gradient(150deg, #1F5132, #0E2A1A); }
.tg .pcard--shopify .pcard__kpis strong { color: #A8D26A; }
.tg .pcard--wp .pcard__art { background: linear-gradient(150deg, #1B5E85, #0C2C44); }
.tg .pcard--wp .pcard__kpis strong { color: #7CC8EE; }
.tg .pcard--zoho .pcard__kpis strong { background: var(--grad-b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tg .pcard--aws .tag { background: #FFF2DB; color: #8A5300; border-color: #F5D49A; }
.tg .pcard--shopify .tag { background: #EAF4DD; color: #3D6626; border-color: #C7DFA6; }
.tg .pcard--wp .tag { background: #E1F0F8; color: #1B5E85; border-color: #B6D9EC; }
.tg .ticks .ico { color: var(--d3); }

/* ---------- FastTrack: shields step through the logo gradient; go-live = green ---------- */
.tg .fasttrack { background: linear-gradient(160deg, var(--navy-950) 0%, #0A2150 60%, #0B2A4A 100%); }
.tg .fasttrack::before { background: radial-gradient(800px 480px at 8% 0%, color-mix(in srgb, var(--g2) 35%, transparent), transparent 60%), radial-gradient(700px 420px at 100% 100%, color-mix(in srgb, var(--g4) 22%, transparent), transparent 60%); }
.tg .ft-road__fill { background: var(--grad-b); }
.tg .ft-stop:nth-child(1) .route svg { fill: var(--g1); }
.tg .ft-stop:nth-child(2) .route svg { fill: var(--d2); }
.tg .ft-stop:nth-child(3) .route svg { fill: var(--d3); }
.tg .ft-stop:nth-child(4) .route svg { fill: #0F7F63; }
.tg .ft-stop--goal .route svg { fill: var(--d4); }
.tg .route__lbl { color: #fff; opacity: .85; }
.tg .ft-stop--goal { border-color: color-mix(in srgb, var(--b4) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--g4) 20%, transparent), rgba(10,26,51,.5)); }
.tg .ft-stop:hover { border-color: color-mix(in srgb, var(--b2) 50%, transparent); }

/* ---------- Scoreboard ---------- */
.tg .cmp thead .is-us { background: var(--grad-d); }
.tg .cmp .is-us { background: var(--navy-900); }
.tg .cmp tbody .is-us::before { background: var(--b4); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b4) 25%, transparent); }
.tg .cmp tbody tr:hover { background: color-mix(in srgb, var(--g2) 7%, transparent); }

/* ---------- Results: deep logo gradient band ---------- */
.tg .results { background: var(--grad-d); }
.tg .results .eyebrow--on-dark { color: #fff; }
.tg .results .eyebrow::before { background: #fff; }
.tg .results .sec-title .serif-i { background: none; color: var(--brass-200); -webkit-background-clip: initial; }
.tg .stat strong { text-shadow: 0 6px 30px rgba(0,0,0,.18); }

/* ---------- Industries: color cycles through the gradient ---------- */
.tg .ind:nth-child(4n+1) { --c: var(--d1); --cb: var(--g1); }
.tg .ind:nth-child(4n+2) { --c: var(--d2); --cb: var(--d2); }
.tg .ind:nth-child(4n+3) { --c: var(--d3); --cb: var(--d3); }
.tg .ind:nth-child(4n+4) { --c: var(--d4); --cb: var(--d4); }
.tg .ind .ico { color: var(--c); }
.tg .ind::before { background: var(--cb); }
.tg .ind:hover .ico { color: #fff; }
.tg .ind:hover p { color: rgba(255,255,255,.85); }
.tg .ind:hover .ind__no { color: rgba(255,255,255,.75); }

/* ---------- Featured bundle (new section) ---------- */
.bundles { padding: var(--sec-y) 0; background: var(--navy-900); color: var(--on-dark); position: relative; overflow: hidden; }
.tg .bundles { background: radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--brass) 18%, transparent), transparent 60%), radial-gradient(900px 500px at 0% 100%, color-mix(in srgb, var(--g3) 22%, transparent), transparent 60%), var(--navy-900); }
.bundles .sec-title .serif-i { background: none !important; color: var(--brass) !important; -webkit-background-clip: initial !important; }
.bundles__tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.tier { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 18px; padding: 30px; border-radius: var(--r-lg); background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); }
.tier--pop { background: var(--white); color: var(--ink); border: 0; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); transform: translateY(-12px); }
.tier__flag { position: absolute; top: -13px; left: 30px; padding: 7px 12px; border-radius: 999px; font: 700 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; background: var(--brass); color: var(--navy-900); }
.tier__kind { font: 600 11.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--b3, var(--brass)); }
.tier--pop .tier__kind { color: var(--d3, var(--red)); }
.tier h3 { font: 800 28px/1 var(--f-display); font-stretch: 115%; text-transform: uppercase; }
.tier__sub { font-size: 15px; color: var(--on-dark-2); margin-top: -8px; }
.tier--pop .tier__sub { color: var(--muted); }
.tier__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tier__price strong { font: 900 54px/1 var(--f-display); font-stretch: 112%; letter-spacing: -.02em; }
.tier__price span { font: 500 12px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-2); }
.tier--pop .tier__price span { color: var(--muted); }
.tier__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: var(--r-md); overflow: hidden; background: var(--line-dark); border: 1px solid var(--line-dark); }
.tier--pop .tier__meta { background: var(--line); border-color: var(--line); }
.tier__meta div { padding: 12px 14px; background: var(--navy-900); display: grid; gap: 2px; }
.tier--pop .tier__meta div { background: var(--paper); }
.tier__meta b { font: 800 20px/1 var(--f-display); font-stretch: 110%; }
.tier__meta small { font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); }
.tier--pop .tier__meta small { color: var(--muted); }
.tier ul { display: grid; gap: 9px; align-content: start; }
.tier li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--on-dark-2); }
.tier--pop li { color: var(--ink-2); }
.tier li .ico { width: 16px; height: 16px; margin-top: 3px; color: var(--b4, var(--brass)); stroke-width: 2.6; }
.tier--pop li .ico { color: var(--d4, var(--green)); }
.tier .btn { width: 100%; }
.tier .btn--ghost-light { justify-content: center; }
.bundles__note { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; color: var(--on-dark-2); font-size: 14px; }
.bundles__note a { color: var(--brass); font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 1000px) { .bundles__tiers { grid-template-columns: 1fr; } .tier--pop { transform: none; margin-top: 12px; } }

/* ---------- Stack ---------- */
.tg .stack { background: linear-gradient(135deg, var(--tint-sky) 0%, var(--tint-mint) 55%, var(--tint-sun) 100%); }
.tg .tile:hover { border-color: color-mix(in srgb, var(--g2) 45%, transparent); }
.tg .tile--feat { background: var(--grad-d); border: 0; }
.tg .tile--feat span { color: #fff; opacity: .85; }

/* ---------- Coverage ---------- */
.tg .coverage { background: linear-gradient(180deg, var(--navy-900), var(--navy-950)); }
.tg .map { background: radial-gradient(ellipse at 30% 40%, color-mix(in srgb, var(--g2) 22%, transparent), transparent 60%), radial-gradient(ellipse at 80% 60%, color-mix(in srgb, var(--g4) 14%, transparent), transparent 60%), rgba(4,12,28,.55); }
.tg .map__svg .city--us { color: var(--b2); }
.tg .map__svg .city--ca { color: #FF5A3C; }
.tg .map__svg .city--hq { color: var(--brass); }
.tg .map__svg .border { stroke: var(--b4); }
.tg .map__svg .border-lbl { fill: var(--b4); }
.tg .lg--us { background: var(--b2); } .tg .lg--ca { background: #FF5A3C; } .tg .lg--hq { background: var(--brass); }
.tg .metros__list li::before { background: var(--b2); }
.tg .metros__list li.is-ca::before { background: #FF5A3C; }
.tg .perks li:nth-child(3n+1) .ico { color: var(--b2); }
.tg .perks li:nth-child(3n+2) .ico { color: var(--b3); }
.tg .perks li:nth-child(3n+3) .ico { color: var(--b4); }

/* ---------- FAQ ---------- */
.tg .faq__list { border-top: 3px solid transparent; border-image: var(--grad) 1; }
.tg .qa summary:hover { color: var(--d2); }
.tg .qa[open] summary .ico { background: var(--grad-d); border-color: transparent; color: #fff; }

/* ---------- Final CTA ---------- */
.tg .cta { background: var(--navy-950); }
.tg .cta__stripes { opacity: .22; }
.tg .cta__stripes i:nth-child(1) { background: var(--g1); }
.tg .cta__stripes i:nth-child(3) { background: var(--g2); }
.tg .cta__stripes i:nth-child(5) { background: var(--g3); }
.tg .cta__stripes i:nth-child(7) { background: var(--g4); }
.tg .cta__canton { background-color: color-mix(in srgb, var(--g1) 60%, var(--navy-950)); }
.tg .cta__fine li::before { color: var(--b3); }

/* ---------- Footer ---------- */
.tg .ftr { border-top: 0; }
.tg .ftr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--grad); }
.tg .ftr__col h4 { color: var(--d2); }
.tg .ftr__col a:hover, .tg .ftr__base a:hover { color: var(--d3); }
.tg .ftr__addr .ico { color: var(--d3); }
.tg .ftr__mega { background: linear-gradient(100deg, color-mix(in srgb, var(--g1) 18%, var(--paper)), color-mix(in srgb, var(--g4) 18%, var(--paper))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tg .social a:hover { background: var(--grad-d); border-color: transparent; }

/* ---------- Palette switcher ---------- */
.palette {
  position: fixed; left: 16px; bottom: 16px; z-index: 95; display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 14px; border-radius: 999px; background: rgba(7,16,41,.88); color: #fff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.5);
  font: 600 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
}
.palette > span { margin-right: 4px; opacity: .75; }
.palette button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform var(--t) var(--ease), border-color var(--t); }
.palette button:hover { transform: scale(1.1); }
.palette button[aria-pressed="true"] { border-color: #fff; }
.palette [data-pal="logo"] { background: linear-gradient(135deg, #2B55A3, #0A9BE0 40%, #18B3A0 70%, #3DB54A); }
.palette [data-pal="ocean"] { background: conic-gradient(from 200deg, #00A3D9, #00B2A9, #FFB81C, #00A3D9); }
.palette [data-pal="americana"] { background: linear-gradient(135deg, #0A1A33 0 45%, #D0312D 45% 70%, #F6F1E7 70%); }
@media (max-width: 760px) { .palette { bottom: auto; top: 50%; left: auto; right: 8px; flex-direction: column; padding: 6px; transform: translateY(-50%); } .palette > span { display: none; } .palette button { width: 24px; height: 24px; } }