/* =====================================================================
   Timmacy Growth Labs — brand layer (loaded after main.css)

   Direction (2026-09-15, user's reference: adexlabs.com):
     Light page, dark hero.  Body #FFFFFF / #F7F7F7 bands, pale-teal tint band
     for services, dark (#0D0D10) hero, projects band and footer.
     Accent teal #33CBBF (pressed #0B837F), gradient #00D2FF → #3AF0C8,
     mint #3ECF8E for "live" dots.  One family: Schibsted Grotesk.
     Motion: typed headline, word rise, spinning ring + drifting glow behind
     the hero cards, mouse parallax, continuous logo marquee, AOS reveals.

   Variable names from the earlier "Swiss" layer are kept (--tgl-klein = accent)
   so nothing else has to change. The kit page (brand-kit-v2) still shows Klein.
   ===================================================================== */

:root {
  /* light surfaces */
  --tgl-paper: #FFFFFF;
  --tgl-paper-2: #F7F7F7;
  --tgl-tint: #E0F5F3;
  --tgl-ink: #1C1C1C;
  --tgl-ink-2: #343434;
  --tgl-muted: #6E6E6E;
  --tgl-line: #E7E7E7;
  --tgl-line-2: #D9D9D9;

  /* dark surfaces (hero, projects band, footer, floating cards) */
  --tgl-carbon: #0D0D10;
  --tgl-panel: #16161D;
  --tgl-panel-2: #1C1C24;
  --tgl-dark-line: #2A2A33;
  --tgl-chalk: #F0EDE8;
  --tgl-ash: #9A9A9A;

  /* accent */
  --tgl-klein: #33CBBF;
  --tgl-klein-deep: #0B837F;
  --tgl-accent-2: #00D2FF;
  --tgl-accent-3: #3AF0C8;
  --tgl-mint: #3ECF8E;
  --tgl-gradient: linear-gradient(135deg, var(--tgl-accent-2), var(--tgl-accent-3));
  --tgl-gradient-btn: linear-gradient(135deg, var(--tgl-klein-deep) 0%, var(--tgl-klein) 100%);

  /* fonts: one family */
  --heading-font: "Schibsted Grotesk", Arial, sans-serif;
  --body-font: "Schibsted Grotesk", Arial, sans-serif;
  --playfair-font: "Schibsted Grotesk", Arial, sans-serif;
  --big-shoulders-font: "Schibsted Grotesk", Arial, sans-serif;

  /* template colour tokens (HSL parts): main = teal */
  --main-h: 175;  --main-s: 60%;  --main-l: 50%;
  --main-two-h: 175;  --main-two-s: 60%;  --main-two-l: 50%;
  --white: 0 0% 100%;
  --black: 240 10% 6%;
  --body: 0 0% 43%;
  --heading-color: 0 0% 11%;
  --body-color: var(--body);

  --neutral-50: #F7F7F7;
  --neutral-100: #F0F0F0;
  --neutral-200: #E7E7E7;
  --neutral-300: #D9D9D9;
  --neutral-400: #B0B0B0;
  --neutral-500: #8A8A8A;
  --neutral-600: #6E6E6E;
  --neutral-700: #4E4B4B;
  --neutral-800: #343434;
  --neutral-900: #1C1C1C;
  --neutral-950: #0D0D10;
  --neutral-1000: #0A0A0C;

  --bs-white: #FFFFFF;  --bs-white-rgb: 255, 255, 255;
  --bs-black: #0D0D10;  --bs-black-rgb: 13, 13, 16;
  --bs-body-bg: #FFFFFF;  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: #1C1C1C;  --bs-body-color-rgb: 28, 28, 28;
  --bs-primary: #33CBBF;  --bs-primary-rgb: 51, 203, 191;
  --bs-body-font-family: "Schibsted Grotesk", Arial, sans-serif;
  --bs-border-color: #E7E7E7;

  --bs-border-radius: 6px;
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 8px;
  --bs-border-radius-xl: 10px;
  --bs-border-radius-xxl: 12px;
  --bs-border-radius-pill: 6px;

  /* bigger display scale */
  --heading-one: clamp(3rem, 1.2rem + 5.4vw, 7rem);
  --heading-two: clamp(2.2rem, 1.2rem + 3vw, 4.25rem);

  color-scheme: light;
}

/* ---------------------------------------------------------------------
   Ground & sections
   --------------------------------------------------------------------- */
html { background: var(--tgl-paper); }
body {
  background: var(--tgl-paper) !important;
  color: var(--tgl-muted);
  font-family: var(--body-font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.loader-mask { background-color: var(--tgl-carbon) !important; }

/* Light bands */
section.bg-main-40, section.bg-main-50, section.bg-main-100 { background-color: var(--tgl-paper-2) !important; }
section.bg-main-600 { background-color: var(--tgl-tint) !important; }
/* Dark bands: hero, projects, footer */
section.bg-black, .footer.bg-black { background-color: var(--tgl-carbon) !important; }
.brand { background: var(--tgl-tint); }
.service { background: var(--tgl-paper-2); }
.marquee { background: var(--tgl-paper); }
.get-in-touch { background: var(--tgl-paper-2); }

/* ---------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--heading-font);
  color: var(--tgl-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-transform: none;
}
h1, .h1 { font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; }
h2, .h2 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; font-size: var(--heading-two); }
h3, .h3 { letter-spacing: -0.025em; }
p { color: inherit; }
.font-playfair, .fst-italic.font-playfair {
  font-family: var(--heading-font) !important;
  font-style: normal !important;
  font-weight: 400 !important;
}
.tgl-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }

/* Text colours on the light ground */
.text-heading, .hover-text-heading:hover { color: var(--tgl-ink); }
.text-neutral-300, .text-neutral-400, .text-neutral-500, .text-neutral-600 { color: var(--tgl-muted); }
.text-neutral-700, .text-neutral-800, .text-neutral-900, .text-neutral-950, .text-black { color: var(--tgl-ink); }
.text-main-600, .text-main-two-600, .text-main-500, .text-main-700, .text-main-800,
.hover-text-main-600:hover, .hover-text-main-two-600:hover { color: var(--tgl-klein-deep); }

/* Dark contexts flip to chalk */
.banner-one, section.bg-black, .footer, .tgl-card, div.bg-main-600 { color: var(--tgl-ash); }
.banner-one h1, .banner-one h2, .banner-one h3, .banner-one h4,
section.bg-black h2, section.bg-black h3.text-white, .footer h2, .footer h3, .footer h4, .footer h5,
.tgl-card, .tgl-card strong, div.bg-main-600 h2, div.bg-main-600 h3 { color: var(--tgl-chalk); }
.banner-one .text-neutral-500, section.bg-black .text-neutral-500, .footer .text-neutral-300, .footer .text-neutral-500,
.tgl-card .text-neutral-500 { color: var(--tgl-ash); }
.text-white { color: #FFFFFF !important; }
/* the contact form sits on a light band but the template labels it in white */
.get-in-touch form label.text-white, .get-in-touch .tw-p-74-px > div > h2.text-white { color: var(--tgl-ink) !important; }
.get-in-touch div.bg-main-600 h2, .get-in-touch div.bg-main-600 .text-white { color: var(--tgl-chalk) !important; }

/* Section label pills */
.section-heading > span:not(.tgl-label), .get-in-touch .max-w-680-px > span, .tgl-pill {
  display: inline-block;
  background: var(--tgl-tint) !important;
  color: var(--tgl-klein-deep) !important;
  border: 1px solid rgba(51, 203, 191, 0.35);
  border-radius: 999px !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}
section.bg-black .section-heading > span { background: rgba(51, 203, 191, 0.12) !important; color: var(--tgl-klein) !important; }

/* ---------------------------------------------------------------------
   Fills, rules, cards
   --------------------------------------------------------------------- */
.bg-white { background-color: var(--tgl-paper) !important; }
.bg-main-40, .bg-main-50, .bg-main-100 { background-color: var(--tgl-paper-2) !important; }
.bg-yellow-950, .bg-red-50 { background-color: var(--tgl-tint) !important; }
.hover-bg-red-100:hover { background-color: var(--tgl-paper-2) !important; }
.step-bg-shape::before, .step-bg-shape::after { display: none; }
.border-white-38, .border-white-22, .border-neutral-100, .border-neutral-200, .border-neutral-300 { border-color: var(--tgl-line) !important; }
.border-dashed { border-style: solid !important; }
hr { border-color: var(--tgl-line); opacity: 1; }

.tw-rounded, .tw-rounded-sm, .tw-rounded-md, .tw-rounded-lg, .tw-rounded-xl,
.tw-rounded-2xl, .tw-rounded-3xl, .tw-rounded-32-px { border-radius: 10px !important; }

.bg-white.tw-rounded-lg, .bg-white.tw-rounded-xl, .bg-white.tw-rounded-2xl {
  /* 1px hairline that turns into a gradient edge on hover (two-layer background, border-box clip) */
  border: 1px solid transparent;
  background-image: linear-gradient(var(--tgl-paper), var(--tgl-paper)), linear-gradient(var(--tgl-line), var(--tgl-line));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 10px 30px rgba(13, 13, 16, 0.06) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease;
}
.bg-white.tw-rounded-xl:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 54px rgba(13, 13, 16, 0.12), 0 0 0 4px rgba(51, 203, 191, 0.08) !important;
  background-image: linear-gradient(var(--tgl-paper), var(--tgl-paper)), var(--tgl-gradient);
}
section.bg-black .bg-white.tw-rounded-xl { background-image: linear-gradient(var(--tgl-paper), var(--tgl-paper)), linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12)); }
section.bg-black .bg-white.tw-rounded-xl:hover { background-image: linear-gradient(var(--tgl-paper), var(--tgl-paper)), var(--tgl-gradient); }

/* Progress bars */
.progress-container, .progress { background-color: var(--tgl-line); border-radius: 3px; }
.progress, .style-yellow .progress { background: var(--tgl-gradient) !important; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn { border-radius: 6px; font-weight: 700; letter-spacing: -0.01em; }
.btn-main, .btn-main-two {
  background: var(--tgl-gradient-btn) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 26px rgba(51, 203, 191, 0.28);
  transition: box-shadow 0.25s ease, transform 0.15s ease;
}
.btn-main:hover, .btn-main-two:hover { box-shadow: 0 14px 36px rgba(51, 203, 191, 0.42); transform: translateY(-2px); }
.btn.btn-main.button--stroke::after, .btn.btn-main-two.button--stroke::after { border-color: transparent; }
.hover-style-one .button__flair::before, .hover-style-two .button__flair::before { background-color: var(--tgl-accent-3); }
.hover-style-one:hover, .hover-style-one:active, .hover-style-two:hover, .hover-style-two:active { background-color: var(--tgl-accent-3); }
.button--stroke:hover, .hover-style-one:hover .button__label, .hover-style-two:hover .button__label { color: var(--tgl-carbon) !important; }
.hover-style-one:hover .arrow-right-img, .hover-style-two:hover .arrow-right-img { filter: invert(1); }
.btn-main .btn-icon, .btn-main-two .btn-icon { background-color: #FFFFFF; color: var(--tgl-klein-deep); }
.btn-main-outline { border-color: var(--tgl-klein) !important; color: var(--tgl-klein-deep) !important; }

.btn.tgl-btn-outline {
  background: transparent !important;
  color: var(--tgl-ink) !important;
  border: 1.5px solid var(--tgl-ink) !important;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
.btn.tgl-btn-outline:hover { border-color: var(--tgl-klein) !important; color: var(--tgl-klein-deep) !important; background: var(--tgl-tint) !important; }
.banner-one .btn.tgl-btn-outline { color: var(--tgl-chalk) !important; border-color: rgba(240, 237, 232, 0.5) !important; }
.banner-one .btn.tgl-btn-outline:hover { border-color: var(--tgl-klein) !important; color: var(--tgl-klein) !important; background: rgba(51, 203, 191, 0.08) !important; }
.btn:active { transform: scale(0.97); }

/* Solid accent panels */
div.bg-main-600, .bg-main-600.tw-rounded-xl {
  background: linear-gradient(160deg, #0F3F3C 0%, var(--tgl-panel) 60%) !important;
  border: 1px solid rgba(51, 203, 191, 0.35);
  box-shadow: 0 24px 60px rgba(13, 13, 16, 0.25);
}
.bg-main-600.rounded-circle, .bg-main-two-600 { background: var(--tgl-gradient) !important; color: var(--tgl-carbon) !important; }
div.bg-main-600 .bg-white.rounded-circle { background: rgba(255, 255, 255, 0.08) !important; }
div.bg-main-600 .bg-white.rounded-circle img { filter: brightness(0) invert(1); }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea, select, .form-control, .common-input {
  background-color: #FFFFFF !important;
  color: var(--tgl-ink) !important;
  border: 1px solid var(--tgl-line-2) !important;
  border-radius: 6px !important;
}
input:focus, textarea:focus, select:focus, .form-control:focus { outline: 0; border-color: var(--tgl-klein) !important; box-shadow: 0 0 0 4px rgba(51, 203, 191, 0.18) !important; }
::placeholder { color: #9A9A9A !important; opacity: 1; }
.footer input:not([type="checkbox"]) { background-color: var(--tgl-panel) !important; color: var(--tgl-chalk) !important; border-color: var(--tgl-dark-line) !important; }

/* ---------------------------------------------------------------------
   Header & navigation (dark bar over the dark hero)
   --------------------------------------------------------------------- */
.menuColorWhite .nav-menu__link { color: var(--tgl-ash); font-weight: 500; }
.menuColorWhite .nav-menu__link:hover, .menuColorWhite .nav-menu__item:hover > .nav-menu__link { color: #FFFFFF; }
.menuColorWhite .nav-menu__item.activePage > a { color: var(--tgl-klein) !important; font-weight: 700; }
.header.fixed-header { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.fixedHeaderBlack.fixed-header { background-color: rgba(13, 13, 16, 0.82); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
.tgl-btn-sm { padding: 12px 22px !important; font-size: 0.95rem !important; }
.tgl-btn-sm .button__label { font-size: 0.95rem; }
.nav-submenu { background-color: #FFFFFF !important; border-radius: 8px !important; border: 1px solid var(--tgl-line); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); }
.nav-submenu__link { color: var(--tgl-ink) !important; }
.nav-submenu__link:hover { color: var(--tgl-klein-deep) !important; background-color: var(--tgl-tint) !important; }
.mobile-menu { background-color: #FFFFFF !important; }
.mobile-menu .nav-menu__link { color: var(--tgl-ink); border-color: var(--tgl-line) !important; }
.mobile-menu .tgl-lockup { color: var(--tgl-ink); }
.search-popup { background-color: #FFFFFF !important; }

/* Logo lockup */
.tgl-lockup { display: block; height: 40px; width: auto; overflow: visible; color: #FFFFFF; }
.header .tgl-lockup { height: 42px; }
.footer .tgl-lockup { height: 50px; color: var(--tgl-chalk); }
.mobile-menu .tgl-lockup { height: 36px; }
@media (max-width: 575.98px) { .header .tgl-lockup { height: 34px; } }

/* Inner-page title band: dark, so the white header still reads */
.breadcrumb { background-color: var(--tgl-carbon) !important; background-image: none !important; border-bottom: 1px solid var(--tgl-dark-line); }
.breadcrumb::before { background-color: transparent; }
.breadcrumb h2 { color: var(--tgl-chalk); font-weight: 800; letter-spacing: -0.045em; }
.breadcrumb a, .breadcrumb span, .breadcrumb li { color: var(--tgl-ash); }

/* Footer */
.footer { border-top: 1px solid var(--tgl-dark-line); }
.footer .line-y-axies { background-color: var(--tgl-dark-line) !important; }
.footer a { color: var(--tgl-ash); }
.footer a:hover { color: var(--tgl-klein); }
.footer .text-white, .footer .text-heading { color: var(--tgl-chalk) !important; }

::selection { background: var(--tgl-klein); color: var(--tgl-carbon); }

/* ---------------------------------------------------------------------
   Hero: full viewport, dark, typed headline, floating cards, ring & glow
   --------------------------------------------------------------------- */
.banner-one {
  /* Photo hook: drop a dark office/studio photo at assets/images/thumbs/hero-bg.jpg and it shows
     under this overlay automatically; until then the overlay alone is the ground. */
  background:
    linear-gradient(rgba(13, 13, 16, 0.66), rgba(13, 13, 16, 0.86)),
    var(--tgl-carbon) url("../images/thumbs/hero-bg.jpg") center / cover no-repeat !important;
  min-height: min(100vh, 960px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.tgl-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.9; }
.tgl-wedge {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(60px, 8vw, 120px);
  background: var(--tgl-tint);
  clip-path: polygon(0 55%, 17% 100%, 100% 0, 100% 100%, 0 100%);
  z-index: 1;
  pointer-events: none;
}
.tgl-pos-tr { top: -4px; right: -10px; }
.banner-one .banner-one__inner { padding-block: clamp(8rem, 12vw, 11rem) clamp(6rem, 9vw, 8rem); width: 100%; }
.banner-one .banner-one__inner > .row { position: relative; z-index: 2; }
.tgl-btn-outline--caps { text-transform: uppercase; letter-spacing: 0.08em; border-width: 2px !important; }
.banner-one p { color: var(--tgl-ash) !important; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); }

.banner-one::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -8%;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(51, 203, 191, 0.26) 0%, rgba(0, 210, 255, 0.08) 45%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: tgl-drift 14s ease-in-out infinite alternate;
}
.banner-one::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -12%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58, 240, 200, 0.12) 0%, transparent 65%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
  animation: tgl-drift 18s ease-in-out infinite alternate-reverse;
}
@keyframes tgl-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-40px, 50px, 0) scale(1.12); }
}

.tgl-hello {
  margin: 0 0 12px;
  font-family: var(--heading-font);
  font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--tgl-chalk) !important;
}
.tgl-hello::after { content: ""; display: inline-block; width: 0.28em; height: 0.28em; margin-left: 0.15em; border-radius: 50%; background: var(--tgl-gradient); vertical-align: 0.02em; }

.tgl-hero-title { font-size: var(--heading-one); max-width: 15ch; min-height: 2.95em; color: var(--tgl-chalk); }
.tgl-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  animation: tgl-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: calc(0.25s + var(--i, 0) * 0.09s);
}
@keyframes tgl-rise { to { opacity: 1; transform: translateY(0); } }

.tgl-type {
  background: var(--tgl-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tgl-type::after {
  content: "";
  display: inline-block;
  width: 0.07em;
  height: 0.82em;
  margin-left: 0.08em;
  vertical-align: -0.06em;
  background: var(--tgl-accent-3);
  animation: tgl-blink 1s steps(1, end) infinite;
}
@keyframes tgl-blink { 50% { opacity: 0; } }

.tgl-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding: 9px 16px;
  border: 1px solid rgba(51, 203, 191, 0.4);
  border-radius: 999px;
  background: rgba(51, 203, 191, 0.08);
  color: var(--tgl-chalk);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tgl-chip__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--tgl-mint); animation: tgl-pulse 2.2s ease-out infinite; }
@keyframes tgl-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(62, 207, 142, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(62, 207, 142, 0); }
  100% { box-shadow: 0 0 0 0 rgba(62, 207, 142, 0); }
}

/* Cards column */
.tgl-hero-cards { min-height: 520px; padding: 84px 0 44px; perspective: 1200px; }
.tgl-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 58%, rgba(51, 203, 191, 0.9) 78%, rgba(0, 210, 255, 0.4) 88%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  opacity: 0.9;
  animation: tgl-spin 16s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.tgl-ring::after {
  content: "";
  position: absolute;
  inset: 40px;
  border-radius: 50%;
  border: 1px dashed rgba(51, 203, 191, 0.18);
  animation: tgl-spin 40s linear infinite reverse;
}
@keyframes tgl-spin { to { transform: rotate(360deg); } }

.tgl-parallax { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: transform; }
.tgl-pos-main { position: relative; z-index: 2; max-width: 460px; margin-inline: auto; }
.tgl-pos-tr { position: absolute; top: 0; right: 0; z-index: 3; }
.tgl-pos-bl { position: absolute; bottom: 0; left: 0; z-index: 3; }

.tgl-card {
  background: #191823;
  border: 1px solid rgba(51, 203, 191, 0.28);
  border-radius: 14px;
  padding: 24px 26px;
  color: var(--tgl-chalk);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(51, 203, 191, 0.06);
  backdrop-filter: blur(6px);
}
.tgl-card--chip { padding: 14px 18px; min-width: 200px; }
.tgl-card--chip strong { display: block; margin-top: 4px; font-weight: 700; letter-spacing: -0.01em; }
.tgl-live { display: inline-flex; align-items: center; gap: 8px; color: var(--tgl-mint); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.tgl-card__list { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--tgl-dark-line); }
.tgl-card__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--tgl-dark-line); font-weight: 600;
  opacity: 0; animation: tgl-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: calc(0.9s + var(--i, 0) * 0.14s);
}
.tgl-card__list li span:first-child::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--tgl-mint); vertical-align: 0.15em; }
.tgl-card__list li span:last-child { color: var(--tgl-ash); font-weight: 400; font-size: 0.875rem; white-space: nowrap; }
.tgl-card__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.tgl-tile { padding: 12px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--tgl-dark-line); text-align: center; }
.tgl-tile strong { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--tgl-klein); }
.tgl-tile span { display: block; margin-top: 2px; font-size: 0.72rem; color: var(--tgl-ash); }
.tgl-card__rows { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.tgl-card__rows li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--tgl-dark-line); font-size: 0.92rem; color: var(--tgl-ash); }
.tgl-card__rows li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tgl-mint); flex: 0 0 auto; }
.tgl-card__rows li b { color: var(--tgl-chalk); font-weight: 600; }
.tgl-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tgl-tag { padding: 4px 9px; border: 1px solid var(--tgl-dark-line); border-radius: 999px; color: var(--tgl-ash); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tgl-card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding-bottom: 2px; border-bottom: 1px solid rgba(51, 203, 191, 0.4); color: var(--tgl-klein); font-weight: 700; transition: gap 0.2s ease, border-color 0.2s ease; }
.tgl-card__link:hover { color: var(--tgl-accent-3); border-color: var(--tgl-accent-3); gap: 10px; }

@media (max-width: 1199.98px) {
  .banner-one { min-height: 0; }
  .tgl-hero-cards { min-height: 0; padding: 12px 0 0; }
  .tgl-ring { display: none; }
  .tgl-pos-main { max-width: none; }
  .tgl-pos-tr, .tgl-pos-bl { position: static; display: inline-block; margin: 12px 12px 0 0; }
  .tgl-card--chip.animation-upDown, .tgl-card--chip.left-right-animation { animation: none; }
}

/* ---------------------------------------------------------------------
   Partner marquee (light band, dark marks)
   --------------------------------------------------------------------- */
.tgl-partners { padding-block: 64px 96px; }
.tgl-partners__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.tgl-partners__track { display: flex; width: max-content; gap: 96px; animation: tgl-marquee 52s linear infinite; }
.tgl-partners__viewport:hover .tgl-partners__track { animation-play-state: paused; }
@keyframes tgl-marquee { to { transform: translateX(-50%); } }
.tgl-partners__item { display: flex; align-items: center; gap: 12px; height: 64px; opacity: 0.55; transition: opacity 0.25s ease; }
.tgl-partners__item:hover { opacity: 1; }
.tgl-partners__item img { height: 34px; width: auto; filter: brightness(0) invert(0.12); }
.tgl-partners__item span { color: var(--tgl-ink); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.03em; }

/* ---------------------------------------------------------------------
   Service cards
   --------------------------------------------------------------------- */
.tgl-service { position: relative; overflow: hidden; padding: 34px 32px !important; }
.tgl-service::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tgl-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tgl-service:hover::before { transform: scaleX(1); }
.tgl-service h3 { font-size: 1.35rem; }
.tgl-service p { font-size: 1.02rem; }
.tgl-service__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 12px;
  background: var(--tgl-gradient); color: var(--tgl-carbon); font-size: 1.6rem;
  box-shadow: 0 10px 24px rgba(51, 203, 191, 0.3);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tgl-service:hover .tgl-service__icon { transform: translateY(-4px) rotate(-6deg) scale(1.06); }

/* ---------------------------------------------------------------------
   Service boxes, workflow steps, footprint cards
   --------------------------------------------------------------------- */
.tgl-box { padding: 36px 36px 32px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.tgl-box::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tgl-gradient); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tgl-box:hover::before { transform: scaleX(1); }
.tgl-box__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.tgl-box__head h3 { margin: 0; font-size: 1.5rem; }
.tgl-box__head .tgl-service__icon { flex: 0 0 auto; }
.tgl-box p { font-size: 1.05rem; line-height: 1.65; }
.tgl-box__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.tgl-box__tags span { padding: 6px 12px; border-radius: 999px; background: var(--tgl-tint); border: 1px solid rgba(51, 203, 191, 0.35); color: var(--tgl-klein-deep); font-size: 0.8rem; font-weight: 600; }
.tgl-box__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--tgl-ink); font-weight: 700; transition: color 0.2s ease, gap 0.2s ease; }
.tgl-box__cta:hover { color: var(--tgl-klein-deep); gap: 12px; }

.tgl-workflow { background: var(--tgl-paper); }
.tgl-steps { position: relative; }
.tgl-step { position: relative; padding: 40px 34px 36px; }
.tgl-step__num { position: absolute; top: 22px; right: 26px; font-family: var(--heading-font); font-weight: 800; font-size: 3rem; letter-spacing: -0.04em; line-height: 1; background: var(--tgl-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.9; }
.tgl-step h3 { margin: 22px 0 10px; font-size: 1.5rem; }
.tgl-step p { font-size: 1.02rem; line-height: 1.65; }
@media (min-width: 992px) {
  .tgl-steps::before { content: ""; position: absolute; left: 14%; right: 14%; top: 68px; height: 2px; background: linear-gradient(90deg, transparent, rgba(51, 203, 191, 0.5), transparent); }
}

.tgl-footprint { background: var(--tgl-paper-2); }
.tgl-quote { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); font-style: italic; color: var(--tgl-ink-2); max-width: 900px; margin: 0 auto; }
.tgl-quote i { color: var(--tgl-klein); font-size: 1.3em; vertical-align: -0.15em; margin: 0 8px; }
.tgl-footprint h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); }
.tgl-fp { overflow: hidden; display: flex; flex-direction: column; }
.tgl-fp__art { aspect-ratio: 2 / 1; overflow: hidden; }
.tgl-fp__art svg { display: block; width: 100%; height: 100%; }
.tgl-fp__body { padding: 28px 32px 30px; text-align: center; }
.tgl-fp__body p { font-size: 1rem; line-height: 1.6; margin: 0 0 6px; }
.tgl-fp__body b { color: var(--tgl-ink); font-weight: 700; }
.tgl-fp__src { display: block; margin: 0 0 18px; color: var(--tgl-klein-deep); font-weight: 700; font-size: 0.95rem; }
.tgl-fp__src:hover { color: var(--tgl-klein); text-decoration: underline; }
.tgl-fp__note { font-size: 0.85rem !important; color: var(--tgl-muted); margin-top: 8px !important; }
.tgl-fp__body h3 { font-size: 1.35rem; text-align: left; }
.tgl-live-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--tgl-gradient); color: var(--tgl-carbon); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.tgl-fp__tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0 8px; }
.tgl-fp__tiles > div { padding: 18px 12px; border-radius: 12px; background: var(--tgl-paper-2); border: 1px solid var(--tgl-line); }
.tgl-fp__tiles strong { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--tgl-ink); }
.tgl-fp__tiles span { display: block; margin-top: 4px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tgl-klein-deep); }

/* Blog cards */
.tgl-blog { background: var(--tgl-paper); }
.tgl-post { display: flex; flex-direction: column; overflow: hidden; }
.tgl-post__cover {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  aspect-ratio: 16 / 10; color: #FFFFFF; overflow: hidden;
  background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.28), transparent 45%), var(--tgl-gradient);
}
.tgl-post__cover::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 14px); }
.tgl-post__cover i { font-size: 4.5rem; line-height: 1; position: relative; z-index: 1; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tgl-post:hover .tgl-post__cover i { transform: translateY(-6px) scale(1.06); }
.tgl-post__cover span { position: relative; z-index: 1; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.9; }
.tgl-post__cover--b { background-image: radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.25), transparent 45%), linear-gradient(135deg, #0B837F, #33CBBF); }
.tgl-post__cover--c { background-image: radial-gradient(circle at 50% 90%, rgba(255, 255, 255, 0.22), transparent 45%), linear-gradient(135deg, #123F3C, #1F8F7A); }
.tgl-post__body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.tgl-post__meta { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tgl-klein-deep); margin-bottom: 10px; }
.tgl-post h3 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 12px; }
.tgl-post h3 a { color: var(--tgl-ink); }
.tgl-post h3 a:hover { color: var(--tgl-klein-deep); }
.tgl-post p { font-size: 0.98rem; line-height: 1.6; }
.tgl-post__link { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 8px; color: var(--tgl-ink); font-weight: 700; transition: color 0.2s ease, gap 0.2s ease; }
.tgl-post__link:hover { color: var(--tgl-klein-deep); gap: 12px; }

/* ---------------------------------------------------------------------
   3D: tilt cards, perspective screenshot frames, bevelled icon tiles
   --------------------------------------------------------------------- */
.tgl-tilt { position: relative; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease; will-change: transform; }
.tgl-tilt.is-tilting { transition: transform 0.08s linear; }
.tgl-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; z-index: 5; }
.tgl-tilt.is-tilting .tgl-glare { opacity: 1; }

.tgl-3d-frame {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  transform: perspective(1200px) rotateY(-7deg) rotateX(3deg);
  transform-origin: 50% 50%;
  box-shadow: 18px 26px 50px rgba(13, 13, 16, 0.28), 0 0 0 1px rgba(13, 13, 16, 0.06);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease;
  background: #fff;
}
.tgl-3d-frame::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.28) 0%, transparent 38%, transparent 70%, rgba(13, 13, 16, 0.12) 100%); }
.tgl-3d-frame img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.tgl-work:hover .tgl-3d-frame, .tgl-tilt.is-tilting .tgl-3d-frame { transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateZ(20px); box-shadow: 0 30px 60px rgba(13, 13, 16, 0.3); }
.tgl-3d-frame--slide { flex: 0 0 auto; width: 100%; max-width: 560px; margin: 6px 10px 10px 4px; }
.project-slider .swiper-slide:hover .tgl-3d-frame--slide { transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateZ(20px); box-shadow: 0 30px 60px rgba(13, 13, 16, 0.3); }
@media (min-width: 992px) { .tgl-3d-frame--slide { width: 52%; } }
.tgl-work__tag { position: absolute; top: 14px; left: 14px; z-index: 3; padding: 6px 12px; border-radius: 999px; background: var(--tgl-gradient); color: var(--tgl-carbon); font-size: 0.78rem; font-weight: 700; }
.tgl-work { padding: 28px !important; }
.tgl-work .tgl-3d-frame { margin: 6px 10px 10px 4px; }

/* bevelled "3D" icon tiles */
.tgl-service__icon {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -4px 0 rgba(13, 13, 16, 0.18), 0 12px 24px rgba(51, 203, 191, 0.35);
  transform: perspective(600px) rotateX(8deg);
}
.tgl-service:hover .tgl-service__icon, .tgl-box:hover .tgl-service__icon, .tgl-step:hover .tgl-service__icon { transform: perspective(600px) rotateX(0deg) translateY(-4px) scale(1.06); }

/* blog covers: floating tile with depth */
.tgl-post__cover i { padding: 22px; border-radius: 22px; background: rgba(255, 255, 255, 0.16); box-shadow: 0 18px 30px rgba(13, 13, 16, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -6px 0 rgba(13, 13, 16, 0.18); transform: perspective(800px) rotateX(12deg) rotateY(-10deg); }
.tgl-post:hover .tgl-post__cover i { transform: perspective(800px) rotateX(0deg) rotateY(0deg) translateY(-6px) scale(1.06); }

/* footprint art gets a lifted frame too */
.tgl-fp__art { box-shadow: inset 0 -12px 24px rgba(13, 13, 16, 0.12); }

/* Portfolio filter + groups */
.tgl-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 44px; }
.tgl-filter button { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--tgl-line-2); background: #fff; color: var(--tgl-ink); font-weight: 600; font-size: 0.95rem; transition: all 0.2s ease; }
.tgl-filter button:hover { border-color: var(--tgl-klein); color: var(--tgl-klein-deep); }
.tgl-filter button.is-active { background: var(--tgl-gradient-btn); border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgba(51, 203, 191, 0.3); }
.tgl-group-title { margin-bottom: 8px; }
.tgl-group-note { margin-bottom: 24px; font-size: 1.05rem; }
.tgl-item.is-hidden, .tgl-group-title.is-hidden, .tgl-group-note.is-hidden { display: none; }
.project.py-120 { background: var(--tgl-paper-2); }

/* ---------------------------------------------------------------------
   About section (index.html)
   --------------------------------------------------------------------- */
.tgl-about { background: var(--tgl-paper); }
.tgl-about .col-lg-3 h2 { font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.8rem); }
.tgl-about .section-heading { margin-top: 96px; }
.tgl-about__lead { font-family: var(--heading-font); font-weight: 700; font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.25; color: var(--tgl-ink); }
.tgl-about__rule { display: block; width: 44px; height: 4px; margin: 14px 0 18px; background: var(--tgl-gradient); border-radius: 2px; }
.tgl-about__copy p { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.7; color: var(--tgl-ink-2); }
.tgl-about__copy p + p { margin-top: 18px; }
.tgl-about__photo { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgba(13, 13, 16, 0.22); transform: perspective(1200px) rotateY(-6deg); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tgl-about__photo:hover { transform: perspective(1200px) rotateY(0deg) translateZ(20px); }
.tgl-about__photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.tgl-about__badge { position: absolute; left: 18px; bottom: 18px; padding: 12px 16px; border-radius: 12px; background: rgba(13, 13, 16, 0.78); color: #fff; backdrop-filter: blur(6px); font-weight: 700; display: inline-flex; align-items: center; gap: 10px; }
.tgl-about__badge .tgl-chip__dot { width: 8px; height: 8px; }
.tgl-sign { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--tgl-line); }
.tgl-sign__mark { flex: 0 0 auto; width: 44px; height: 44px; color: var(--tgl-carbon); }
.tgl-sign__mark svg { width: 100%; height: 100%; display: block; }
.tgl-sign strong { display: block; font-family: var(--heading-font); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--tgl-ink); line-height: 1.1; }
.tgl-sign span { display: block; margin-top: 3px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tgl-klein-deep); }
.tgl-about__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.tgl-about__facts div { padding: 16px; border-radius: 12px; background: var(--tgl-paper-2); border: 1px solid var(--tgl-line); }
.tgl-about__facts strong { display: block; font-size: 1.1rem; color: var(--tgl-ink); letter-spacing: -0.01em; }
.tgl-about__facts span { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--tgl-muted); }
.tgl-ways .bg-white { padding: 36px 34px; }
.tgl-ways h3 { font-size: 1.5rem; margin: 18px 0 10px; }
.tgl-ways p { font-size: 1.08rem; line-height: 1.65; }
.tgl-ways ul { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 8px; }
.tgl-ways li { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; color: var(--tgl-ink-2); }
.tgl-ways li i { color: var(--tgl-klein-deep); font-size: 1.1rem; }
@media (max-width: 767.98px) { .tgl-about__facts { grid-template-columns: 1fr; } }

/* Marquee text on the light band */
.marquee h2 { color: var(--tgl-ink); }
.marquee .text-stroke { color: transparent; -webkit-text-stroke: 1.5px var(--tgl-ink); }
.marquee .text-stroke:hover { color: var(--tgl-klein); -webkit-text-stroke-color: var(--tgl-klein); }

/* Projects band cards (white on dark): card text stays ink */
section.bg-black .bg-white.tw-rounded-xl { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45) !important; }
section.bg-black .bg-white h2, section.bg-black .bg-white h3, section.bg-black .bg-white h4,
section.bg-black .bg-white .text-heading { color: var(--tgl-ink) !important; }
section.bg-black .bg-white p, section.bg-black .bg-white .text-neutral-500 { color: var(--tgl-muted) !important; }
.get-in-touch h2 { color: var(--tgl-ink); }
section.bg-black .border-main-two-600 { border-color: var(--tgl-klein) !important; color: var(--tgl-klein-deep) !important; }

/* Contact */
.get-in-touch a[href^="mailto:"] { word-break: break-all; }
.get-in-touch .tw-p-74-px { background: #FFFFFF; border: 1px solid var(--tgl-line); box-shadow: 0 10px 30px rgba(13, 13, 16, 0.06); }

/* =====================================================================
   Agency polish pass — depth, sharpness, new bands
   (preloader, header CTA, section décor, numbered services, highlight
   words, rotating card edge, scroll cue, why-us, FAQ, contact steps,
   footer clean-up). Everything here is additive; nothing above changes.
   ===================================================================== */

/* Branded preloader: the T tile pulsing over a sweeping gradient bar */
.loader {
  width: 72px; height: 72px; margin: -52px 0 0 -36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23F0EDE8' fill-rule='evenodd' d='M0 0H64V64H0Z M14 14H50V23H36.5V50H27.5V23H14Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: tgl-loader 1.4s ease-in-out infinite;
  text-indent: 0; overflow: visible;
}
.loader div { display: none; }
.loader::after { content: ""; position: absolute; left: 50%; top: 96px; width: 140px; height: 3px; margin-left: -70px; border-radius: 2px; background: rgba(240, 237, 232, 0.12); }
.loader::before { content: ""; position: absolute; left: 50%; top: 96px; width: 46px; height: 3px; margin-left: -70px; border-radius: 2px; background: var(--tgl-gradient); z-index: 1; animation: tgl-loader-bar 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes tgl-loader { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.9); opacity: 0.8; } }
@keyframes tgl-loader-bar { to { transform: translateX(94px); } }

/* Section décor: faint dot grid + one soft accent glow, behind the content */
.tgl-deco { position: relative; isolation: isolate; }
.tgl-deco::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(28, 28, 28, 0.13) 1px, transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 35%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 65% 60% at 50% 35%, #000 10%, transparent 72%);
  opacity: 0.6;
}
.tgl-deco::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 640px; height: 640px; border-radius: 50%;
  right: -260px; top: -220px;
  background: radial-gradient(circle, rgba(51, 203, 191, 0.22), rgba(0, 210, 255, 0.06) 45%, transparent 68%);
  filter: blur(30px);
}
.tgl-deco--left::after { right: auto; left: -280px; top: auto; bottom: -240px; }
.tgl-deco--both::before { -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 10%, transparent 75%); }

/* Big ghost word behind a section heading */
.tgl-bgword {
  position: absolute; left: 50%; top: 28px; transform: translateX(-50%);
  font-family: var(--heading-font); font-weight: 800; line-height: 1; white-space: nowrap;
  font-size: clamp(5rem, 19vw, 19rem); letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(28, 28, 28, 0.07);
  pointer-events: none; user-select: none; z-index: 0;
}
section.bg-black .tgl-bgword { -webkit-text-stroke-color: rgba(240, 237, 232, 0.07); }
section.bg-black > .section-heading, section.bg-black > .position-relative, .tgl-deco > .container { position: relative; z-index: 1; }

/* Highlighted word inside a heading: accent colour + hand-drawn underline */
.tgl-hl { position: relative; display: inline-block; color: var(--tgl-klein-deep); font-style: normal; white-space: nowrap; }
.tgl-hl::after {
  content: ""; position: absolute; left: -0.02em; right: -0.02em; bottom: -0.08em; height: 0.18em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 Q 50 4 100 11 T 197 8' fill='none' stroke='%2333CBBF' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: 0.9;
}
section.bg-black .tgl-hl { color: var(--tgl-klein); }

/* Label pills get a small accent dot */
.section-heading > span:not(.tgl-label)::before, .tgl-pill::before, .get-in-touch .max-w-680-px > span::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--tgl-gradient); vertical-align: 0.1em;
}

/* Hero: rotating gradient edge on the main card, scroll cue */
@property --tgl-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.tgl-card--main { position: relative; }
.tgl-card--main::before {
  content: ""; position: absolute; inset: -1px; border-radius: 15px; padding: 1.5px; z-index: 1; pointer-events: none;
  background: conic-gradient(from var(--tgl-a), transparent 0 60%, var(--tgl-klein) 78%, var(--tgl-accent-2) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: tgl-border-spin 7s linear infinite;
}
@keyframes tgl-border-spin { to { --tgl-a: 360deg; } }
.tgl-scroll {
  position: absolute; right: clamp(24px, 4vw, 72px); bottom: clamp(130px, 12vw, 160px); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--tgl-ash); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  transition: color 0.2s ease;
}
.tgl-scroll:hover { color: var(--tgl-chalk); }
.tgl-scroll span { position: relative; width: 22px; height: 34px; border: 2px solid rgba(240, 237, 232, 0.4); border-radius: 12px; }
.tgl-scroll span::after { content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--tgl-klein); animation: tgl-scroll-dot 1.8s ease-in-out infinite; }
@keyframes tgl-scroll-dot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(12px); opacity: 0; } }
@media (max-width: 1199.98px) { .tgl-scroll { display: none; } }

/* Partner strip: sharper marks */
.tgl-partners__item { opacity: 0.62; }
.tgl-partners__item img { filter: brightness(0) invert(0.08); }
.tgl-partners__item span { font-size: 1.5rem; }

/* Numbered service boxes */
.tgl-box__num {
  position: absolute; top: 24px; right: 28px; z-index: 1;
  font-family: var(--heading-font); font-weight: 800; font-size: 2.6rem; line-height: 1; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(51, 203, 191, 0.6);
  transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease, transform 0.3s ease;
}
.tgl-box:hover .tgl-box__num { color: var(--tgl-klein); -webkit-text-stroke-color: transparent; transform: translateY(-2px); }
.tgl-box__head { padding-right: 72px; }
@media (max-width: 575.98px) { .tgl-box__num { font-size: 1.9rem; top: 20px; right: 20px; } .tgl-box__head { padding-right: 52px; } }

/* Marquee: hairlines, gradient fill on the solid words */
.marquee { padding: 44px 0 !important; border-top: 1px solid var(--tgl-line); border-bottom: 1px solid var(--tgl-line); }
.marquee h2:not(.text-stroke) { background: var(--tgl-gradient-btn); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marquee .text-stroke { -webkit-text-stroke: 1.2px rgba(28, 28, 28, 0.85); }
.marquee .animation-item h2::after { content: ""; display: inline-block; width: 0.22em; height: 0.22em; margin-left: 0.6em; background: var(--tgl-klein); transform: rotate(45deg); vertical-align: middle; -webkit-text-stroke: 0; }

/* Work band (dark): heading, CTA row */
.tgl-work-band .section-heading p { color: var(--tgl-ash); }
.tgl-work-band .swiper-pagination { position: relative; margin-top: 44px; }
.tgl-work-band .swiper-pagination-bullet { background: rgba(240, 237, 232, 0.35); opacity: 1; }
.tgl-work-band .swiper-pagination-bullet-active { background: var(--tgl-gradient); }
.tgl-work-band .btn.tgl-btn-outline { color: var(--tgl-chalk) !important; border-color: rgba(240, 237, 232, 0.45) !important; }
.tgl-work-band .btn.tgl-btn-outline:hover { border-color: var(--tgl-klein) !important; color: var(--tgl-klein) !important; background: rgba(51, 203, 191, 0.08) !important; }

/* Why brands choose us */
.tgl-why { background: var(--tgl-tint); }
.tgl-why .tgl-deco::before, .tgl-why.tgl-deco::before { opacity: 0.35; }
.tgl-why h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); }
.tgl-why__card { padding: 32px 30px 30px; display: flex; flex-direction: column; }
.tgl-why__num { display: block; margin-bottom: 18px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tgl-klein-deep); }
.tgl-why__card .tgl-service__icon { width: 54px; height: 54px; font-size: 1.5rem; }
.tgl-why__card h3 { font-size: 1.28rem; margin: 20px 0 8px; }
.tgl-why__card p { font-size: 1rem; line-height: 1.6; margin: 0; }
.tgl-why__proof { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: 44px; padding: 20px 28px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(51, 203, 191, 0.35); }
.tgl-why__proof > span { font-weight: 700; color: var(--tgl-ink); }
.tgl-why__mark { display: inline-flex; align-items: center; gap: 8px; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; color: var(--tgl-ink); opacity: 0.7; transition: opacity 0.2s ease; }
.tgl-why__mark:hover { opacity: 1; }
.tgl-why__mark img { height: 22px; width: auto; filter: brightness(0) invert(0.08); }
.tgl-why__proof i { color: var(--tgl-mint); font-size: 1.2rem; }

/* FAQ */
.tgl-faq { background: var(--tgl-paper); }
.tgl-faq h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); }
.tgl-accordion .accordion-item { background: #FFFFFF; border: 1px solid var(--tgl-line); border-radius: 12px; padding: 20px 26px; box-shadow: 0 8px 24px rgba(13, 13, 16, 0.05); transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.tgl-accordion .accordion-item:not(:last-child) { margin-bottom: 0; }
.tgl-accordion .accordion-item:has(.accordion-button[aria-expanded="true"]) { border-color: rgba(51, 203, 191, 0.55); box-shadow: 0 16px 40px rgba(13, 13, 16, 0.08); }
.tgl-accordion .accordion-button { font-family: var(--heading-font); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.015em; color: var(--tgl-ink); background: transparent; box-shadow: none; padding: 0; padding-inline-end: 44px !important; line-height: 1.35; }
.tgl-accordion .accordion-button:not(.collapsed) { color: var(--tgl-klein-deep); }
.tgl-accordion .accordion-button::before { content: "\e136"; font-family: "Phosphor"; font-size: 1rem; color: var(--tgl-carbon); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tgl-paper-2); border: 1px solid var(--tgl-line); transition: transform 0.3s ease, background 0.3s ease; }
.tgl-accordion .accordion-button[aria-expanded="true"]::before { background: var(--tgl-gradient); border-color: transparent; }
.tgl-accordion .accordion-body { padding: 16px 0 4px; border-top: 1px solid var(--tgl-line); margin-top: 16px; }
.tgl-accordion .accordion-body p { font-size: 1.02rem; line-height: 1.65; color: var(--tgl-ink-2); margin: 0; }

/* Contact: "what happens next" steps in the dark info panel */
.tgl-next { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: tgl-step; }
.tgl-next li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.tgl-next li::before { counter-increment: tgl-step; content: counter(tgl-step, decimal-leading-zero); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tgl-gradient); color: var(--tgl-carbon); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; }
.tgl-next b { display: block; color: var(--tgl-chalk); font-weight: 700; align-self: center; }
.tgl-next span { grid-column: 2; display: block; margin-top: -8px; font-size: 0.92rem; color: var(--tgl-ash); }
.get-in-touch div.bg-main-600 a[href^="mailto:"] { font-size: 1rem; word-break: break-word; }

/* Footer clean-up */
.footer .bg-yellow-950 { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--tgl-dark-line); color: var(--tgl-chalk) !important; }
.footer .bg-yellow-950:hover { background: var(--tgl-gradient) !important; color: var(--tgl-carbon) !important; border-color: transparent; }
.footer .bg-yellow-950 i { color: inherit; }
.tgl-footer-tag { margin-top: 26px; font-size: 1.05rem; line-height: 1.6; color: var(--tgl-ash); max-width: 340px; }
.tgl-footer-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 24px; }
.tgl-footer-marks span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--tgl-dark-line); color: var(--tgl-chalk); font-size: 0.85rem; font-weight: 700; }
.tgl-footer-marks img { height: 14px; width: auto; filter: brightness(0) invert(0.92); }

/* =====================================================================
   Services page (services.html)
   ===================================================================== */

/* Dark page hero: same language as the home hero, a little shorter */
.tgl-page-hero {
  background:
    linear-gradient(rgba(13, 13, 16, 0.72), rgba(13, 13, 16, 0.9)),
    var(--tgl-carbon) url("../images/thumbs/hero-bg.jpg") center 30% / cover no-repeat !important;
  min-height: min(88vh, 860px);
  display: flex; align-items: center; overflow: hidden;
  color: var(--tgl-ash);
}
.tgl-page-hero::before, .tgl-page-hero::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
}
.tgl-page-hero::before { top: -12%; right: -6%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(51, 203, 191, 0.24) 0%, rgba(0, 210, 255, 0.07) 45%, transparent 70%); filter: blur(40px); animation: tgl-drift 14s ease-in-out infinite alternate; }
.tgl-page-hero::after { bottom: -32%; left: -12%; width: 560px; height: 560px; background: radial-gradient(circle, rgba(58, 240, 200, 0.12) 0%, transparent 65%); filter: blur(50px); animation: tgl-drift 18s ease-in-out infinite alternate-reverse; }
.tgl-page-hero__inner { padding-block: clamp(8rem, 11vw, 10rem) clamp(6rem, 9vw, 8rem); width: 100%; }
.tgl-page-hero__inner > .row { position: relative; z-index: 2; }
.tgl-page-hero h1 { color: var(--tgl-chalk); }
.tgl-page-hero p { color: var(--tgl-ash) !important; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); }
.tgl-page-hero .btn.tgl-btn-outline { color: var(--tgl-chalk) !important; border-color: rgba(240, 237, 232, 0.5) !important; }
.tgl-page-hero .btn.tgl-btn-outline:hover { border-color: var(--tgl-klein) !important; color: var(--tgl-klein) !important; background: rgba(51, 203, 191, 0.08) !important; }
.tgl-hero-title--page { font-size: clamp(2.6rem, 1.2rem + 4vw, 5.4rem); max-width: 16ch; min-height: 0; }
.tgl-crumbs { list-style: none; display: flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 0; font-size: 0.85rem; font-weight: 600; color: var(--tgl-ash); }
.tgl-crumbs a { color: var(--tgl-ash); }
.tgl-crumbs a:hover { color: var(--tgl-klein); }
.tgl-crumbs span { color: var(--tgl-chalk); }
.tgl-hero-cards--page { min-height: 500px; }
.tgl-page-hero .tgl-wedge { background: var(--tgl-paper-2); }

/* Growth-loop rows in the hero card: light up one after another */
.tgl-loop { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.tgl-loop li {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--tgl-dark-line);
  font-size: 0.92rem; color: var(--tgl-ash);
  animation: tgl-loop-glow 7.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.2s);
}
.tgl-loop li i { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(51, 203, 191, 0.12); color: var(--tgl-klein); font-size: 1.1rem; transition: background 0.3s ease, color 0.3s ease; }
.tgl-loop li span { color: var(--tgl-chalk); font-weight: 600; }
.tgl-loop li em { font-style: normal; font-size: 0.78rem; color: var(--tgl-ash); white-space: nowrap; }
@keyframes tgl-loop-glow {
  0%, 22%, 100% { border-color: var(--tgl-dark-line); background: rgba(255, 255, 255, 0.04); box-shadow: none; transform: translateX(0); }
  6%, 14% { border-color: rgba(51, 203, 191, 0.7); background: rgba(51, 203, 191, 0.12); box-shadow: 0 0 0 4px rgba(51, 203, 191, 0.1), 0 10px 26px rgba(51, 203, 191, 0.18); transform: translateX(4px); }
}
@media (max-width: 575.98px) { .tgl-loop li { grid-template-columns: 34px 1fr; } .tgl-loop li em { display: none; } }

/* Compact service cards (3 per row) */
.tgl-svc-band { background: var(--tgl-paper-2); }
.tgl-svc { padding: 30px 28px 28px; }
.tgl-svc h3 { font-size: 1.28rem; margin: 20px 0 10px; padding-right: 56px; }
.tgl-svc p { font-size: 0.98rem; line-height: 1.6; }
.tgl-svc .tgl-box__tags { margin: 14px 0 18px; }
.tgl-svc .tgl-box__tags span { font-size: 0.76rem; padding: 5px 10px; }
.tgl-svc .tgl-box__num { font-size: 2.2rem; top: 26px; right: 26px; }

/* Shopify Partner service categories: illustrated cards with gently animated SVG art */
.tgl-psvc { background: var(--tgl-paper); }
.tgl-pcard { display: flex; flex-direction: column; overflow: hidden; }
.tgl-pcard__art { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 1px solid var(--tgl-line); }
.tgl-pcard__art svg { display: block; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tgl-pcard:hover .tgl-pcard__art svg { transform: scale(1.04); }
.tgl-pcard__body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.tgl-pcard__body h3 { font-size: 1.3rem; margin-bottom: 10px; }
.tgl-pcard__body p { font-size: 1rem; line-height: 1.6; margin-bottom: 18px; }
.tgl-pcard__body .tgl-box__cta { margin-top: auto; }
.tgl-psv-glow { animation: tgl-psv-glow 2.6s ease-in-out infinite; transform-box: fill-box; }
@keyframes tgl-psv-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.tgl-psv-float { animation: tgl-psv-float 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.tgl-psv-float2 { animation: tgl-psv-float 5.5s ease-in-out infinite reverse; transform-box: fill-box; transform-origin: center; }
@keyframes tgl-psv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.tgl-psv-step { animation: tgl-psv-step 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.35s); transform-box: fill-box; transform-origin: center; }
@keyframes tgl-psv-step { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.tgl-psv-flag { animation: tgl-psv-flag 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; }
@keyframes tgl-psv-flag { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-4deg) scaleX(0.94); } }
.tgl-psv-dash { animation: tgl-psv-dash 1.6s linear infinite; }
@keyframes tgl-psv-dash { to { stroke-dashoffset: -22; } }
.tgl-psv-spin { animation: tgl-spin 18s linear infinite; transform-origin: center; transform-box: fill-box; }
.tgl-psv-spin-r { animation: tgl-spin 12s linear infinite reverse; transform-origin: center; transform-box: fill-box; }

/* Stats strip (real counts only; .counter is animated by main.js) */
.tgl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.tgl-stats > div { padding: 26px 22px; border-radius: 14px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(51, 203, 191, 0.35); text-align: center; backdrop-filter: blur(6px); }
.tgl-stats strong { display: block; font-family: var(--heading-font); font-size: clamp(2.2rem, 1.4rem + 2vw, 3.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; background: var(--tgl-gradient-btn); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tgl-stats > div > span { display: block; margin-top: 8px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tgl-ink-2); }
@media (max-width: 767.98px) { .tgl-stats { grid-template-columns: repeat(2, 1fr); } }

/* Plans */
.tgl-plans { background: var(--tgl-paper); }
.tgl-plan {
  position: relative; display: flex; flex-direction: column; padding: 34px 30px 30px; border-radius: 16px;
  background: #FFFFFF; border: 1px solid var(--tgl-line); box-shadow: 0 10px 30px rgba(13, 13, 16, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.tgl-plan:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(13, 13, 16, 0.12); border-color: rgba(51, 203, 191, 0.5); }
.tgl-plan--featured { background: linear-gradient(170deg, #12302E 0%, var(--tgl-panel) 55%, #191823 100%); border-color: rgba(51, 203, 191, 0.45); box-shadow: 0 30px 70px rgba(13, 13, 16, 0.3); color: var(--tgl-ash); }
.tgl-plan--featured::before { content: ""; position: absolute; inset: -1px; border-radius: 17px; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--tgl-a), transparent 0 55%, var(--tgl-klein) 75%, var(--tgl-accent-2) 88%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: tgl-border-spin 8s linear infinite; }
.tgl-plan__badge { position: absolute; top: -14px; left: 30px; padding: 6px 14px; border-radius: 999px; background: var(--tgl-gradient); color: var(--tgl-carbon); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 8px 20px rgba(51, 203, 191, 0.35); }
.tgl-plan__kicker { display: block; font-family: var(--heading-font); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; color: var(--tgl-ink); }
.tgl-plan--featured .tgl-plan__kicker { color: var(--tgl-chalk); }
.tgl-plan__for { margin: 6px 0 22px; font-size: 0.98rem; color: var(--tgl-muted); min-height: 3em; }
.tgl-plan--featured .tgl-plan__for { color: var(--tgl-ash); }
.tgl-plan__price { padding: 18px 0; border-top: 1px solid var(--tgl-line); border-bottom: 1px solid var(--tgl-line); }
.tgl-plan--featured .tgl-plan__price { border-color: rgba(255, 255, 255, 0.1); }
.tgl-plan__price b { display: block; font-family: var(--heading-font); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; color: var(--tgl-klein-deep); }
.tgl-plan--featured .tgl-plan__price b { background: var(--tgl-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tgl-plan__price small { display: block; margin-top: 2px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tgl-muted); }
.tgl-plan--featured .tgl-plan__price small { color: var(--tgl-ash); }
.tgl-plan__list { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 12px; flex: 1; }
.tgl-plan__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.98rem; line-height: 1.5; color: var(--tgl-ink-2); }
.tgl-plan--featured .tgl-plan__list li { color: var(--tgl-chalk); }
.tgl-plan__list i { flex: 0 0 auto; margin-top: 3px; color: var(--tgl-klein-deep); font-size: 1.1rem; }
.tgl-plan--featured .tgl-plan__list i { color: var(--tgl-klein); }
.tgl-inline-link { color: var(--tgl-klein-deep); font-weight: 700; border-bottom: 2px solid rgba(51, 203, 191, 0.4); transition: border-color 0.2s ease, color 0.2s ease; }
.tgl-inline-link:hover { color: var(--tgl-klein); border-color: var(--tgl-klein); }

/* Scattered vs system */
.tgl-diff-band { background: var(--tgl-paper-2); }
.tgl-diff { position: relative; padding: 36px 34px 32px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--tgl-line); box-shadow: 0 10px 30px rgba(13, 13, 16, 0.06); display: flex; flex-direction: column; }
.tgl-diff__kicker { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 14px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.tgl-diff--bad .tgl-diff__kicker { background: #FDECEC; color: #B42318; border: 1px solid rgba(180, 35, 24, 0.25); }
.tgl-diff--good .tgl-diff__kicker { background: var(--tgl-tint); color: var(--tgl-klein-deep); border: 1px solid rgba(51, 203, 191, 0.4); }
.tgl-diff h3 { font-size: 1.45rem; margin: 18px 0 20px; }
.tgl-diff ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tgl-diff li { display: flex; gap: 14px; align-items: flex-start; font-size: 1rem; line-height: 1.6; color: var(--tgl-ink-2); }
.tgl-diff li i { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; font-size: 0.9rem; }
.tgl-diff--bad li i { background: #FDECEC; color: #B42318; }
.tgl-diff--good li i { background: var(--tgl-gradient); color: var(--tgl-carbon); }
.tgl-diff--bad { background: #FFFFFF; }
.tgl-diff--good { border-color: rgba(51, 203, 191, 0.55); box-shadow: 0 24px 60px rgba(51, 203, 191, 0.14); }
.tgl-diff--good::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: 16px 16px 0 0; background: var(--tgl-gradient); }
.tgl-diff__result { margin: 24px 0 0; padding: 16px 18px; border-radius: 12px; font-size: 1.02rem; line-height: 1.55; }
.tgl-diff--bad .tgl-diff__result { background: #FFF6F6; color: #7A271A; }
.tgl-diff--good .tgl-diff__result { background: var(--tgl-tint); color: #0E4F4A; }
.tgl-diff__result b { font-weight: 800; }

/* The flow: six steps on a track, a pulse travels along it and lights each step in turn */
.tgl-flow-band { background: var(--tgl-carbon); color: var(--tgl-ash); }
.tgl-flow-band .section-heading p { color: var(--tgl-ash); }
.tgl-flow-band > .container > p { color: var(--tgl-ash); }
.tgl-flow { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; counter-reset: tgl-flow; }
.tgl-flow__track { position: absolute; left: 8%; right: 8%; top: 34px; height: 2px; background: linear-gradient(90deg, transparent, rgba(51, 203, 191, 0.45) 8%, rgba(51, 203, 191, 0.45) 92%, transparent); z-index: 0; }
.tgl-flow__pulse { position: absolute; top: -5px; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--tgl-accent-3); box-shadow: 0 0 0 6px rgba(58, 240, 200, 0.18), 0 0 24px 6px rgba(58, 240, 200, 0.55); animation: tgl-flow-run 7.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes tgl-flow-run { 0% { left: 0; opacity: 0; } 4% { opacity: 1; } 96% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.tgl-flow li { position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.tgl-flow li::after { counter-increment: tgl-flow; content: "0" counter(tgl-flow); position: absolute; top: -6px; left: 50%; margin-left: 22px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; color: var(--tgl-klein); opacity: 0.8; }
.tgl-flow__icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 18px; background: #191823; border: 1px solid var(--tgl-dark-line); color: var(--tgl-klein); font-size: 1.7rem; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); animation: tgl-flow-node 7.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.2s + 0.3s); }
.tgl-flow__icon--end { background: var(--tgl-gradient); color: var(--tgl-carbon); border-color: transparent; }
@keyframes tgl-flow-node {
  0%, 20%, 100% { transform: translateY(0) scale(1); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); border-color: var(--tgl-dark-line); }
  7%, 13% { transform: translateY(-8px) scale(1.08); box-shadow: 0 0 0 6px rgba(51, 203, 191, 0.14), 0 22px 44px rgba(51, 203, 191, 0.35); border-color: rgba(51, 203, 191, 0.8); }
}
.tgl-flow b { display: block; font-family: var(--heading-font); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; color: var(--tgl-chalk); }
.tgl-flow li > span:last-child { display: block; margin-top: 6px; font-size: 0.85rem; line-height: 1.5; color: var(--tgl-ash); }
@media (max-width: 1199.98px) {
  .tgl-flow { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .tgl-flow__track { display: none; }
}
@media (max-width: 575.98px) { .tgl-flow { grid-template-columns: repeat(2, 1fr); } }

/* Free store review */
.tgl-review { background: var(--tgl-paper); }
.tgl-review h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); }
.tgl-review__inside { margin-top: 32px; padding: 26px 28px; border-radius: 14px; background: var(--tgl-paper-2); border: 1px solid var(--tgl-line); }
.tgl-review__inside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.tgl-review__inside li { display: flex; gap: 14px; align-items: flex-start; }
.tgl-review__inside b { display: block; color: var(--tgl-ink); font-weight: 700; }
.tgl-review__inside li > div > span { display: block; margin-top: 2px; font-size: 0.92rem; color: var(--tgl-muted); }
.tgl-review__ico { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; background: var(--tgl-gradient); color: var(--tgl-carbon); font-size: 1.25rem; box-shadow: 0 8px 20px rgba(51, 203, 191, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -3px 0 rgba(13, 13, 16, 0.15); }
.tgl-review__form { padding: clamp(28px, 4vw, 48px); background: #FFFFFF; border: 1px solid var(--tgl-line); box-shadow: 0 24px 60px rgba(13, 13, 16, 0.08); }
.tgl-review__form label { color: var(--tgl-ink); font-weight: 600; }
.tgl-review__form textarea { min-height: 150px; }
.tgl-review__note { font-size: 0.9rem; color: var(--tgl-muted); }

/* =====================================================================
   Photography (owner-supplied Unsplash photos, 2026-09-16)
   ===================================================================== */

/* Workflow steps with a photo header */
.tgl-steps--photo::before { display: none; }
.tgl-step--photo { padding-top: 0; overflow: hidden; }
.tgl-step__media { position: relative; margin: 0 -34px 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tgl-carbon); }
.tgl-step__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tgl-step__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 16, 0.05) 45%, rgba(13, 13, 16, 0.55) 100%); }
.tgl-step--photo:hover .tgl-step__media img { transform: scale(1.06); }
.tgl-step--photo .tgl-step__num {
  top: 16px; right: 20px; font-size: 1rem; padding: 7px 13px; border-radius: 999px; opacity: 1;
  background: rgba(13, 13, 16, 0.72); color: var(--tgl-klein); -webkit-text-fill-color: var(--tgl-klein);
  border: 1px solid rgba(51, 203, 191, 0.35); backdrop-filter: blur(6px); z-index: 2;
}
.tgl-step--photo .tgl-service__icon { position: relative; z-index: 2; margin-top: -28px; }
.tgl-step--photo h3 { margin-top: 18px; }

/* Blog covers with photos */
.tgl-post__cover--photo { background: var(--tgl-carbon); }
.tgl-post__cover--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tgl-post:hover .tgl-post__cover--photo img { transform: scale(1.07); }
.tgl-post__cover--photo::after { background: linear-gradient(180deg, rgba(13, 13, 16, 0) 40%, rgba(13, 13, 16, 0.72) 100%); }
.tgl-post__cover--photo span {
  position: absolute; left: 16px; bottom: 16px; opacity: 1; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; background: var(--tgl-gradient); color: var(--tgl-carbon);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.tgl-post__cover--photo span i, .tgl-post:hover .tgl-post__cover--photo span i { font-size: 0.95rem; padding: 0; background: none; box-shadow: none; transform: none; border-radius: 0; }

/* FAQ visual under the CTA */
.tgl-faq__photo { margin-top: 44px; max-width: 460px; }
.tgl-faq__photo img { aspect-ratio: 4 / 3; }
.tgl-faq__photo .tgl-mv__caption { font-size: 0.9rem; }

/* Services hero uses the workshop photo */
.tgl-page-hero--services {
  background:
    linear-gradient(rgba(13, 13, 16, 0.74), rgba(13, 13, 16, 0.9)),
    var(--tgl-carbon) url("../images/thumbs/hero-services.jpg") center 40% / cover no-repeat !important;
}

/* =====================================================================
   Blog page (blog.html)
   ===================================================================== */
.tgl-page-hero--compact { min-height: 0; }
.tgl-page-hero--compact .tgl-page-hero__inner { padding-block: clamp(8rem, 11vw, 10rem) clamp(7rem, 10vw, 9rem); }
.tgl-page-hero--compact .tgl-hero-title--page { max-width: 20ch; }
.tgl-page-hero--compact .tgl-wedge { background: var(--tgl-paper); }
.tgl-blog-page { background: var(--tgl-paper); }
.tgl-blog-page .section-heading { margin-top: 96px !important; }
.tgl-featured { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: center; padding: 28px; }
.tgl-featured__media { display: block; }
.tgl-featured__media img { aspect-ratio: 4 / 3; }
.tgl-featured__body h2 { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.4rem); line-height: 1.15; margin: 10px 0 16px; }
.tgl-featured__body p { font-size: 1.05rem; line-height: 1.65; margin-bottom: 24px; }
.tgl-featured:hover .tgl-3d-frame { transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateZ(20px); box-shadow: 0 30px 60px rgba(13, 13, 16, 0.3); }
.tgl-soon { position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: rgba(13, 13, 16, 0.78); color: var(--tgl-chalk); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; backdrop-filter: blur(6px); border: 1px solid rgba(51, 203, 191, 0.35); }
.tgl-soon i { color: var(--tgl-accent-3); }
@media (max-width: 991.98px) { .tgl-featured { grid-template-columns: 1fr; gap: 24px; padding: 20px; } }

.tgl-subscribe { background: var(--tgl-carbon); padding-block: 110px; color: var(--tgl-ash); }
.tgl-subscribe h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem); }
.tgl-subscribe p { color: var(--tgl-ash); }
.tgl-subscribe .tgl-hl { color: var(--tgl-klein); }
.tgl-subscribe .tgl-world__map::before { opacity: 0.16; }
.tgl-subscribe__form { max-width: 620px; margin-inline: auto; }
.tgl-subscribe__form input { background: var(--tgl-panel) !important; color: var(--tgl-chalk) !important; border-color: var(--tgl-dark-line) !important; border-radius: 999px !important; }

/* =====================================================================
   Article pages (blog-*.html)
   ===================================================================== */
.tgl-article-hero .tgl-page-hero__inner { padding-block: clamp(8rem, 11vw, 10rem) clamp(9rem, 12vw, 12rem); }
.tgl-article-hero .tgl-wedge { background: var(--tgl-paper); }
.tgl-article-hero__title { font-size: clamp(2rem, 1.2rem + 2.8vw, 4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; max-width: 24ch; color: var(--tgl-chalk); }
.tgl-article-hero__lead { max-width: 720px; font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem) !important; color: var(--tgl-ash) !important; }
.tgl-article-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 28px; font-size: 0.85rem; font-weight: 600; color: var(--tgl-ash); }
.tgl-article-hero__meta i { color: var(--tgl-klein); margin-right: 6px; vertical-align: -0.1em; }

.tgl-article { background: var(--tgl-paper); padding-block: 0 110px; }
.tgl-article__cover { position: relative; max-width: 1000px; margin: clamp(-90px, -8vw, -60px) auto 64px; z-index: 2; transform: perspective(1400px) rotateX(4deg); }
.tgl-article__cover:hover { transform: perspective(1400px) rotateX(0deg) translateZ(10px); }
.tgl-article__cover img { aspect-ratio: 2 / 1; }

.tgl-prose { max-width: 70ch; font-size: 1.12rem; line-height: 1.75; color: var(--tgl-ink-2); }
.tgl-prose__intro { font-size: 1.28rem; line-height: 1.6; color: var(--tgl-ink); font-weight: 500; }
.tgl-prose p { margin: 0 0 1.35em; }
.tgl-prose h2 { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); margin: 2.4em 0 0.7em; scroll-margin-top: 110px; }
.tgl-prose h3 { font-size: 1.22rem; margin: 1.8em 0 0.5em; scroll-margin-top: 110px; }
.tgl-prose ul, .tgl-prose ol { margin: 0 0 1.5em; padding-left: 1.3em; }
.tgl-prose ul { list-style: disc; }
.tgl-prose ol { list-style: decimal; }
.tgl-toc ol { list-style: decimal; }
.tgl-prose li { margin-bottom: 0.55em; }
.tgl-prose li::marker { color: var(--tgl-klein-deep); font-weight: 700; }
.tgl-prose strong { color: var(--tgl-ink); font-weight: 700; }
.tgl-prose a { color: var(--tgl-klein-deep); font-weight: 600; border-bottom: 1.5px solid rgba(51, 203, 191, 0.4); transition: color 0.2s ease, border-color 0.2s ease; }
.tgl-prose a:hover { color: var(--tgl-klein); border-color: var(--tgl-klein); }
.tgl-prose code { font-family: Consolas, "SFMono-Regular", Menlo, monospace; font-size: 0.88em; padding: 2px 7px; border-radius: 6px; background: var(--tgl-tint); color: var(--tgl-klein-deep); border: 1px solid rgba(51, 203, 191, 0.3); }
.tgl-callout { display: flex; gap: 16px; align-items: flex-start; margin: 2em 0; padding: 22px 24px; border-radius: 14px; background: var(--tgl-tint); border: 1px solid rgba(51, 203, 191, 0.4); font-size: 1.02rem; line-height: 1.6; color: var(--tgl-ink-2); }
.tgl-callout > i { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--tgl-gradient); color: var(--tgl-carbon); font-size: 1.3rem; box-shadow: 0 8px 18px rgba(51, 203, 191, 0.3); }
.tgl-callout strong { color: var(--tgl-ink); }

.tgl-author { display: flex; gap: 20px; align-items: flex-start; margin-top: 56px; padding: 28px; border-radius: 16px; background: var(--tgl-paper-2); border: 1px solid var(--tgl-line); }
.tgl-author__mark { flex: 0 0 auto; width: 56px; height: 56px; color: var(--tgl-carbon); }
.tgl-author__mark svg { width: 100%; height: 100%; display: block; }
.tgl-author strong { display: block; font-size: 1.15rem; color: var(--tgl-ink); letter-spacing: -0.01em; }
.tgl-author__role { display: block; margin-top: 2px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tgl-klein-deep); }
.tgl-author p { margin: 10px 0 10px; font-size: 1rem; line-height: 1.6; }

.tgl-side { position: sticky; top: 110px; display: grid; gap: 22px; }
.tgl-toc { padding: 24px 26px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--tgl-line); box-shadow: 0 8px 24px rgba(13, 13, 16, 0.05); }
.tgl-toc ol { margin: 0; padding: 0 0 0 1.4em; counter-reset: toc; }
.tgl-toc li { margin-bottom: 8px; font-size: 0.95rem; line-height: 1.4; }
.tgl-toc li::marker { color: var(--tgl-klein-deep); font-weight: 700; }
.tgl-toc a { color: var(--tgl-ink-2); }
.tgl-toc a:hover { color: var(--tgl-klein-deep); }
.tgl-side-cta { padding: 26px; border-radius: 14px; background: linear-gradient(160deg, #12302E 0%, var(--tgl-panel) 60%, #191823 100%); border: 1px solid rgba(51, 203, 191, 0.35); color: var(--tgl-ash); box-shadow: 0 24px 60px rgba(13, 13, 16, 0.3); }
.tgl-side-cta strong { display: block; color: var(--tgl-chalk); font-size: 1.05rem; line-height: 1.4; }
.tgl-side-list { padding: 24px 26px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--tgl-line); }
.tgl-side-list a { display: block; padding: 12px 0; border-top: 1px solid var(--tgl-line); color: var(--tgl-ink); font-weight: 600; font-size: 0.95rem; line-height: 1.4; transition: color 0.2s ease; }
.tgl-side-list a:first-of-type { border-top: 0; padding-top: 0; }
.tgl-side-list a:hover { color: var(--tgl-klein-deep); }
.tgl-side-list__cat { display: block; margin-bottom: 3px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tgl-klein-deep); }
.tgl-next-notes { background: var(--tgl-paper-2); }
.tgl-next-notes .section-heading { margin-top: 0 !important; }
@media (max-width: 991.98px) { .tgl-side { position: static; } .tgl-article__cover { margin-top: -40px; } }

/* =====================================================================
   Store check (store-check.html) — PageSpeed Insights, read plainly
   ===================================================================== */
.tgl-check-hero .tgl-page-hero__inner { padding-block: clamp(8rem, 11vw, 10rem) clamp(9rem, 12vw, 11rem); }
.tgl-check-hero .tgl-wedge { background: var(--tgl-paper); }
.tgl-check-form { max-width: 760px; margin: 40px auto 0; }
.tgl-check-form__bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 20px; border-radius: 999px;
  background: rgba(25, 24, 35, 0.9); border: 1px solid rgba(51, 203, 191, 0.4);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(51, 203, 191, 0.08);
  backdrop-filter: blur(8px); transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.tgl-check-form__bar:focus-within { border-color: var(--tgl-klein); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(51, 203, 191, 0.2); }
.tgl-check-form__bar > i { color: var(--tgl-klein); font-size: 1.25rem; flex: 0 0 auto; }
#tgl-check-url { flex: 1; min-width: 0; background: transparent !important; background-color: transparent !important; border: 0 !important; color: var(--tgl-chalk) !important; font-size: 1.1rem; font-weight: 600; padding: 12px 8px; box-shadow: none !important; border-radius: 0 !important; }
#tgl-check-url::placeholder { color: var(--tgl-ash) !important; font-weight: 500; }
.tgl-check-form__go { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; border: 0; background: var(--tgl-gradient-btn); color: #fff; font-weight: 700; font-size: 1rem; box-shadow: 0 10px 26px rgba(51, 203, 191, 0.3); transition: transform 0.15s ease, box-shadow 0.25s ease; }
.tgl-check-form__go:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(51, 203, 191, 0.42); }
.tgl-check-form__go:disabled { opacity: 0.8; cursor: progress; }
.tgl-check-form__spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: tgl-spin 0.8s linear infinite; }
.tgl-check-form__go.is-busy .tgl-check-form__spinner { display: inline-block; }
.tgl-check-form__go.is-busy > i { display: none; }
.tgl-check-form__opts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin-top: 16px; }
.tgl-check-form__opts label { position: relative; cursor: pointer; }
.tgl-check-form__opts input { position: absolute; opacity: 0; pointer-events: none; }
.tgl-check-form__opts span { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(240, 237, 232, 0.25); color: var(--tgl-ash); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; transition: all 0.2s ease; }
.tgl-check-form__opts input:checked + span { background: rgba(51, 203, 191, 0.14); border-color: var(--tgl-klein); color: var(--tgl-chalk); }
.tgl-check-form__hint { font-size: 0.78rem; color: var(--tgl-ash) !important; border: 0 !important; padding: 0 !important; }
@media (max-width: 575.98px) { .tgl-check-form__bar { flex-wrap: wrap; border-radius: 20px; padding: 10px; } .tgl-check-form__bar > i { display: none; } .tgl-check-form__go { width: 100%; justify-content: center; } }

.tgl-check-progress { max-width: 560px; margin: 34px auto 0; padding: 26px 28px; border-radius: 16px; background: rgba(25, 24, 35, 0.9); border: 1px solid rgba(51, 203, 191, 0.3); text-align: left; color: var(--tgl-ash); }
.tgl-check-progress__flask { width: 52px; height: 52px; margin: -52px auto 14px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--tgl-gradient); color: var(--tgl-carbon); font-size: 1.5rem; box-shadow: 0 12px 30px rgba(51, 203, 191, 0.4); animation: tgl-loader 1.4s ease-in-out infinite; }
.tgl-check-progress ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tgl-check-progress__step { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; color: var(--tgl-ash); opacity: 0.55; transition: opacity 0.3s ease, color 0.3s ease; }
.tgl-check-progress__step i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--tgl-dark-line); font-size: 0.7rem; color: transparent; flex: 0 0 auto; transition: all 0.3s ease; }
.tgl-check-progress__step.is-active { opacity: 1; color: var(--tgl-chalk); }
.tgl-check-progress__step.is-active i { border-color: var(--tgl-klein); box-shadow: 0 0 0 4px rgba(51, 203, 191, 0.15); animation: tgl-pulse 1.6s ease-out infinite; }
.tgl-check-progress__step.is-done { opacity: 0.9; }
.tgl-check-progress__step.is-done i { background: var(--tgl-gradient); border-color: transparent; color: var(--tgl-carbon); }
.tgl-check-progress__bar { height: 4px; margin-top: 18px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.tgl-check-progress__bar > span { display: block; height: 100%; width: 2%; border-radius: 2px; background: var(--tgl-gradient); }
.tgl-check-progress small { display: block; margin-top: 12px; font-size: 0.78rem; color: var(--tgl-ash); }

.tgl-check-error { max-width: 640px; margin: 28px auto 0; display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 18px 20px; border-radius: 14px; background: rgba(229, 72, 77, 0.12); border: 1px solid rgba(229, 72, 77, 0.45); color: var(--tgl-chalk); font-size: 0.98rem; line-height: 1.55; }
.tgl-check-error > i { color: #FF8A8E; font-size: 1.4rem; flex: 0 0 auto; }
.tgl-check-error code { color: var(--tgl-klein); }

.tgl-check { background: transparent; padding-block: 0 110px; margin-top: clamp(-70px, -6vw, -40px); } /* the section itself overlaps the hero wedge (body is paper, so no seam); an inner negative margin would be clipped by overflow-hidden */
.tgl-check-results { position: relative; z-index: 2; }
.tgl-check-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; margin-bottom: 26px; }
.tgl-check-head__url { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); word-break: break-all; margin: 0; }
.tgl-check-head__meta { margin: 6px 0 0; font-size: 0.9rem; color: var(--tgl-muted); }
.tgl-check-shop { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; }
.tgl-check-shop.is-yes { background: var(--tgl-tint); color: var(--tgl-klein-deep); border: 1px solid rgba(51, 203, 191, 0.45); }
.tgl-check-shop.is-yes i { color: var(--tgl-mint); }
.tgl-check-shop.is-no { background: var(--tgl-paper-2); color: var(--tgl-muted); border: 1px solid var(--tgl-line); }

.tgl-check-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 20px; }
.tgl-check-grade { position: relative; padding: 30px 30px 26px; border-radius: 18px; color: var(--tgl-ash); background: linear-gradient(170deg, #12302E 0%, var(--tgl-panel) 55%, #191823 100%); border: 1px solid rgba(51, 203, 191, 0.45); box-shadow: 0 30px 70px rgba(13, 13, 16, 0.3); overflow: hidden; }
.tgl-check-grade::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(51, 203, 191, 0.35), transparent 70%); filter: blur(20px); }
.tgl-check-grade .tgl-label { color: var(--tgl-klein); }
.tgl-check-grade strong { display: block; font-family: var(--heading-font); font-size: clamp(4rem, 3rem + 3vw, 6rem); line-height: 1; font-weight: 800; letter-spacing: -0.05em; background: var(--tgl-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tgl-check-grade--mid strong { background: linear-gradient(135deg, #FFE49A, #F7A31C); -webkit-background-clip: text; background-clip: text; }
.tgl-check-grade--poor strong { background: linear-gradient(135deg, #FF8A8E, #E5484D); -webkit-background-clip: text; background-clip: text; }
.tgl-check-grade em { display: block; font-style: normal; font-weight: 700; color: var(--tgl-chalk); margin-top: 2px; }
.tgl-check-grade p { margin: 16px 0 12px; font-size: 1.05rem; line-height: 1.55; color: var(--tgl-chalk); }
.tgl-check-grade small { display: block; font-size: 0.75rem; color: var(--tgl-ash); }
.tgl-check-gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tgl-gauge { position: relative; padding: 22px 12px 18px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--tgl-line); box-shadow: 0 10px 30px rgba(13, 13, 16, 0.06); text-align: center; }
.tgl-gauge svg { width: 96px; height: 96px; display: block; margin: 0 auto; transform: rotate(-90deg); }
.tgl-gauge__track { fill: none; stroke: var(--tgl-paper-2); stroke-width: 9; }
.tgl-gauge__fill { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tgl-gauge--good .tgl-gauge__fill { stroke: #2AAE72; } .tgl-gauge--good strong { color: #1C8A57; }
.tgl-gauge--mid .tgl-gauge__fill { stroke: #F7A31C; } .tgl-gauge--mid strong { color: #B96E00; }
.tgl-gauge--poor .tgl-gauge__fill { stroke: #E5484D; } .tgl-gauge--poor strong { color: #C0272D; }
.tgl-gauge--na .tgl-gauge__fill { stroke: var(--tgl-line); }
.tgl-gauge strong { position: absolute; left: 0; right: 0; top: 52px; font-family: var(--heading-font); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.tgl-gauge span { display: block; margin-top: 12px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tgl-muted); }

.tgl-check-block { margin-top: 26px; padding: 28px 30px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--tgl-line); box-shadow: 0 10px 30px rgba(13, 13, 16, 0.06); }
.tgl-check-block h3 { font-size: 1.3rem; margin-bottom: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.tgl-check-block h3 span { font-size: 0.85rem; font-weight: 500; letter-spacing: 0; color: var(--tgl-muted); }
.tgl-cwv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tgl-cwv__item { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 12px; background: var(--tgl-paper-2); border: 1px solid var(--tgl-line); }
.tgl-cwv__dot { flex: 0 0 auto; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--tgl-line-2); }
.tgl-cwv__item.is-good .tgl-cwv__dot { background: #2AAE72; box-shadow: 0 0 0 4px rgba(42, 174, 114, 0.18); }
.tgl-cwv__item.is-mid .tgl-cwv__dot { background: #F7A31C; box-shadow: 0 0 0 4px rgba(247, 163, 28, 0.18); }
.tgl-cwv__item.is-poor .tgl-cwv__dot { background: #E5484D; box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.18); }
.tgl-cwv__item b { display: block; font-size: 0.82rem; color: var(--tgl-muted); font-weight: 600; }
.tgl-cwv__item strong { display: block; font-family: var(--heading-font); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; color: var(--tgl-ink); line-height: 1.15; }
.tgl-cwv__item small { display: block; margin-top: 2px; font-size: 0.72rem; color: var(--tgl-muted); }
.tgl-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tgl-fact { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 12px; background: var(--tgl-paper-2); border: 1px solid var(--tgl-line); border-left-width: 4px; }
.tgl-fact.is-good { border-left-color: #2AAE72; } .tgl-fact.is-mid { border-left-color: #F7A31C; } .tgl-fact.is-poor { border-left-color: #E5484D; }
.tgl-fact > i { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--tgl-gradient); color: var(--tgl-carbon); font-size: 1.25rem; }
.tgl-fact b { display: block; font-size: 0.82rem; color: var(--tgl-muted); font-weight: 600; }
.tgl-fact strong { display: block; font-family: var(--heading-font); font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; color: var(--tgl-ink); line-height: 1.15; }
.tgl-fact small { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--tgl-muted); line-height: 1.4; }
.tgl-checklist { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tgl-checklist li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; border: 1px solid var(--tgl-line); }
.tgl-checklist li.is-ok { background: #EAF8F1; color: #1C8A57; border-color: rgba(42, 174, 114, 0.35); }
.tgl-checklist li.is-bad { background: #FDECEC; color: #B42318; border-color: rgba(180, 35, 24, 0.3); }
.tgl-fixes { list-style: none; margin: 0; padding: 0; counter-reset: fix; display: grid; gap: 12px; }
.tgl-fixes li { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 18px 20px 18px 66px; border-radius: 14px; background: var(--tgl-paper-2); border: 1px solid var(--tgl-line); }
.tgl-fixes li::before { counter-increment: fix; content: counter(fix, decimal-leading-zero); position: absolute; left: 18px; top: 18px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--tgl-gradient); color: var(--tgl-carbon); font-size: 0.75rem; font-weight: 800; }
.tgl-fixes__body { flex: 1 1 340px; }
.tgl-fixes__body b { display: block; font-size: 1.05rem; color: var(--tgl-ink); }
.tgl-fixes__body b em { font-style: normal; font-weight: 600; color: var(--tgl-klein-deep); margin-left: 6px; font-size: 0.9rem; }
.tgl-fixes__body p { margin: 4px 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--tgl-muted); }
.tgl-fixes__svc { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #FFFFFF; border: 1px solid rgba(51, 203, 191, 0.45); color: var(--tgl-klein-deep); font-size: 0.85rem; font-weight: 700; transition: all 0.2s ease; }
.tgl-fixes__svc:hover { background: var(--tgl-gradient); color: var(--tgl-carbon); border-color: transparent; }
.tgl-fixes__none { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 1.02rem; color: var(--tgl-ink-2); }
.tgl-fixes__none i { color: var(--tgl-mint); font-size: 1.3rem; }
.tgl-check-note { margin: 22px 0 0; font-size: 0.85rem; line-height: 1.55; color: var(--tgl-muted); }
.tgl-check-review { margin-top: 90px; }
.tgl-check-review h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem); }
.tgl-check-review__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.tgl-check-review__list li { display: flex; gap: 10px; align-items: center; color: var(--tgl-ink-2); }
.tgl-check-review__list i { color: var(--tgl-klein-deep); font-size: 1.15rem; }
.tgl-check-explain { background: var(--tgl-paper-2); }
@media (max-width: 991.98px) { .tgl-check-grid { grid-template-columns: 1fr; } .tgl-check-gauges { grid-template-columns: repeat(2, 1fr); } .tgl-cwv, .tgl-facts { grid-template-columns: 1fr; } }

/* Results page (store-check-results.html) — PageSpeed-style report */
.tgl-results-hero .tgl-page-hero__inner { padding-block: clamp(7rem, 10vw, 9rem) clamp(9rem, 12vw, 11rem); }
.tgl-results-hero .tgl-wedge { background: var(--tgl-paper); }
.tgl-results-hero__title { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem); font-weight: 800; letter-spacing: -0.035em; color: var(--tgl-chalk); word-break: break-all; }
.tgl-results-hero__meta { margin: 10px 0 0; font-size: 0.92rem !important; color: var(--tgl-ash) !important; }
.tgl-check-form--rerun { margin-top: 28px; }
.tgl-psi-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--tgl-klein) !important; font-weight: 600; }
.tgl-psi-hint:hover { color: var(--tgl-accent-3) !important; }
.tgl-check-explain--first { padding-top: 40px !important; }
.tgl-check-progress--page, .tgl-check-error--page { position: relative; z-index: 2; margin-top: clamp(-60px, -5vw, -30px); }
.tgl-check-progress--page { background: #191823; }
.tgl-check-error--page { background: #FFF1F1; border-color: rgba(229, 72, 77, 0.35); color: var(--tgl-ink); }
.tgl-check-error--page code { color: var(--tgl-klein-deep); }
.tgl-stay { background: none; border: 0; padding: 0; margin-left: 6px; cursor: pointer; font: inherit; color: var(--tgl-klein-deep); font-weight: 700; border-bottom: 2px solid rgba(51, 203, 191, 0.4); }
#tgl-redirect-count { color: var(--tgl-klein-deep); }
.tgl-check-head { justify-content: flex-start; margin-bottom: 20px; }
.tgl-check-head--below { margin: 18px 0 6px; align-items: center; }
.tgl-psi-out { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 10px 16px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--tgl-line); color: var(--tgl-ink); font-weight: 700; font-size: 0.9rem; transition: all 0.2s ease; }
.tgl-psi-out:hover { border-color: var(--tgl-klein); color: var(--tgl-klein-deep); }
.tgl-psi-out--light { background: rgba(255, 255, 255, 0.9); }
.tgl-check-error--page .tgl-psi-out--light { background: #FFFFFF; }

.tgl-cwv-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 9px 16px; border-radius: 999px; font-weight: 800; font-size: 0.95rem; }
.tgl-cwv-badge.is-good { background: #EAF8F1; color: #1C8A57; border: 1px solid rgba(42, 174, 114, 0.35); }
.tgl-cwv-badge.is-poor { background: #FDECEC; color: #B42318; border: 1px solid rgba(180, 35, 24, 0.3); }
.tgl-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tgl-field { padding: 16px 18px; border-radius: 12px; background: var(--tgl-paper-2); border: 1px solid var(--tgl-line); }
.tgl-field:not(.is-core) { opacity: 0.85; }
.tgl-field__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tgl-field__head b { font-size: 0.85rem; color: var(--tgl-ink-2); font-weight: 600; flex: 1 1 auto; }
.tgl-field__head small { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tgl-muted); }
.tgl-field__head strong { width: 100%; font-family: var(--heading-font); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; color: var(--tgl-ink); line-height: 1.1; margin-top: 4px; }
.tgl-field.is-good .tgl-cwv__dot { background: #2AAE72; } .tgl-field.is-mid .tgl-cwv__dot { background: #F7A31C; } .tgl-field.is-poor .tgl-cwv__dot { background: #E5484D; }
.tgl-dist { display: flex; height: 8px; margin-top: 12px; border-radius: 4px; overflow: hidden; background: var(--tgl-line); }
.tgl-dist i { display: block; height: 100%; }
.tgl-dist i.is-good { background: #2AAE72; } .tgl-dist i.is-mid { background: #F7A31C; } .tgl-dist i.is-poor { background: #E5484D; }
.tgl-dist__legend { display: block; margin-top: 6px; font-size: 0.72rem; color: var(--tgl-muted); }

.tgl-lab { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 24px; align-items: start; }
.tgl-lab__shot { margin: 0; padding: 10px; border-radius: 22px; background: #191823; box-shadow: 0 20px 50px rgba(13, 13, 16, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.tgl-lab__shot img { display: block; width: 100%; border-radius: 14px; }
.tgl-lab__shot.is-desktop { max-width: 100%; border-radius: 12px; padding: 8px; }
.tgl-lab__shot figcaption { margin-top: 8px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tgl-ash); text-align: center; }
.tgl-lab__metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tgl-metric { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--tgl-paper-2); border: 1px solid var(--tgl-line); }
.tgl-metric .tgl-cwv__dot { margin-top: 4px; }
.tgl-metric.is-good .tgl-cwv__dot { background: #2AAE72; } .tgl-metric.is-mid .tgl-cwv__dot { background: #F7A31C; } .tgl-metric.is-poor .tgl-cwv__dot { background: #E5484D; }
.tgl-metric b { display: block; font-size: 0.8rem; color: var(--tgl-muted); font-weight: 600; }
.tgl-metric strong { display: block; font-family: var(--heading-font); font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; color: var(--tgl-ink); line-height: 1.15; }
.tgl-film { display: flex; gap: 8px; margin-top: 20px; overflow-x: auto; padding-bottom: 6px; }
.tgl-film figure { margin: 0; flex: 0 0 auto; width: 84px; }
.tgl-film img { display: block; width: 84px; border-radius: 8px; border: 1px solid var(--tgl-line); }
.tgl-film figcaption { margin-top: 4px; font-size: 0.7rem; color: var(--tgl-muted); text-align: center; }

.tgl-audits { display: grid; gap: 8px; }
.tgl-audit { border: 1px solid var(--tgl-line); border-radius: 12px; background: var(--tgl-paper-2); overflow: hidden; }
.tgl-audit summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; font-weight: 600; color: var(--tgl-ink); }
.tgl-audit summary::-webkit-details-marker { display: none; }
.tgl-audit summary > i { margin-left: auto; color: var(--tgl-muted); transition: transform 0.25s ease; flex: 0 0 auto; }
.tgl-audit[open] summary > i { transform: rotate(180deg); }
.tgl-audit__dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 2px; background: var(--tgl-line-2); }
.tgl-audit--poor .tgl-audit__dot { background: #E5484D; border-radius: 2px; }
.tgl-audit--mid .tgl-audit__dot { background: #F7A31C; border-radius: 50%; width: 12px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tgl-audit--good .tgl-audit__dot { background: #2AAE72; border-radius: 50%; }
.tgl-audit--info .tgl-audit__dot, .tgl-audit--na .tgl-audit__dot { background: #8A8A8A; border-radius: 50%; }
.tgl-audit__title { flex: 1 1 240px; }
.tgl-audit__bar { flex: 0 0 120px; height: 8px; border-radius: 4px; background: var(--tgl-line); overflow: hidden; }
.tgl-audit__bar i { display: block; height: 100%; background: linear-gradient(90deg, #F7A31C, #E5484D); border-radius: 4px; }
.tgl-audit__val { flex: 0 0 auto; font-style: normal; font-size: 0.85rem; font-weight: 700; color: var(--tgl-klein-deep); }
.tgl-audit__body { padding: 0 16px 16px 40px; font-size: 0.95rem; line-height: 1.55; color: var(--tgl-muted); }
.tgl-audit__body p { margin: 0 0 10px; }
.tgl-audit__body a { color: var(--tgl-klein-deep); font-weight: 600; }
.tgl-audit__body code { font-family: Consolas, Menlo, monospace; font-size: 0.85em; padding: 1px 6px; border-radius: 5px; background: var(--tgl-tint); color: var(--tgl-klein-deep); }
.tgl-audit__items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tgl-line); }
.tgl-audit__items li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--tgl-line); font-size: 0.85rem; }
.tgl-audit__items li span { min-width: 0; overflow-wrap: anywhere; color: var(--tgl-ink-2); }
.tgl-audit__items li b { flex: 0 0 auto; color: var(--tgl-ink); }
.tgl-audit__more { color: var(--tgl-muted) !important; font-style: italic; }
.tgl-passed { margin: 14px 0 0; font-size: 0.85rem; font-weight: 700; color: #1C8A57; }
.tgl-passed-list summary { list-style: none; cursor: pointer; font-weight: 700; color: var(--tgl-ink); display: flex; align-items: center; gap: 10px; }
.tgl-passed-list summary::-webkit-details-marker { display: none; }
.tgl-passed-list summary i { margin-left: auto; color: var(--tgl-muted); transition: transform 0.25s ease; }
.tgl-passed-list[open] summary i { transform: rotate(180deg); }
.tgl-passed-list ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 20px; }
.tgl-passed-list li { display: flex; gap: 8px; align-items: baseline; font-size: 0.9rem; color: var(--tgl-ink-2); }
.tgl-passed-list li i { color: #2AAE72; flex: 0 0 auto; }
.tgl-passed-list li em { font-style: normal; color: var(--tgl-muted); font-size: 0.8rem; }
.tgl-ours { position: relative; border-color: rgba(51, 203, 191, 0.45); background: linear-gradient(180deg, #FFFFFF, #F4FBFA); }
.tgl-ours__tag { position: absolute; top: -13px; left: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--tgl-gradient); color: var(--tgl-carbon); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.tgl-contact-big--light { justify-content: flex-start; margin-top: 26px; }
.tgl-contact-big--light a { background: #191823; }
@media (max-width: 991.98px) { .tgl-fields { grid-template-columns: 1fr; } .tgl-lab { grid-template-columns: 1fr; } .tgl-lab__shot { max-width: 220px; margin: 0 auto; } .tgl-passed-list ul { grid-template-columns: 1fr; } .tgl-audit__bar { display: none; } }

/* =====================================================================
   Video testimonials (assets/js/tgl-video.js)
   ===================================================================== */
.tgl-testimonials { background: var(--tgl-paper); }
.tgl-testimonials h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); }
.tgl-vids { position: relative; }
.tgl-vids__track { display: flex; gap: 18px; padding: 10px max(16px, calc((100% - 1290px) / 2)) 26px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tgl-vids__track::-webkit-scrollbar { display: none; }
.tgl-vcard { position: relative; flex: 0 0 auto; width: 250px; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #191823; scroll-snap-align: start; box-shadow: 0 18px 44px rgba(13, 13, 16, 0.22); border: 1px solid rgba(13, 13, 16, 0.06); cursor: pointer; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease; color: #fff; }
.tgl-vcard:hover, .tgl-vcard:focus-visible { transform: translateY(-8px) scale(1.02); box-shadow: 0 30px 70px rgba(13, 13, 16, 0.32), 0 0 0 4px rgba(51, 203, 191, 0.25); outline: 0; color: #fff; }
.tgl-vcard video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #191823; }
.tgl-vcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 16, 0.05) 45%, rgba(13, 13, 16, 0.75) 100%); pointer-events: none; transition: opacity 0.3s ease; }
.tgl-vcard__sound { position: absolute; right: 12px; bottom: 50px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: rgba(13, 13, 16, 0.72); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; backdrop-filter: blur(6px); transition: background 0.25s ease, transform 0.25s ease; }
.tgl-vcard__sound i { font-size: 1rem; color: var(--tgl-accent-3); }
.tgl-vcard__sound em { font-style: normal; }
.tgl-vcard:hover .tgl-vcard__sound { background: var(--tgl-gradient); color: var(--tgl-carbon); transform: translateY(-2px); }
.tgl-vcard:hover .tgl-vcard__sound i { color: var(--tgl-carbon); }
.tgl-vcard.is-playing::after { opacity: 0.85; }
.tgl-vcard__dur { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(13, 13, 16, 0.7); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; backdrop-filter: blur(6px); }
.tgl-vcard__dur i { color: var(--tgl-accent-3); }
.tgl-vcard__cap { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; font-family: var(--heading-font); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.tgl-vids__prev, .tgl-vids__next { position: absolute; top: -70px; right: 12px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--tgl-line-2); background: #FFFFFF; color: var(--tgl-ink); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 22px rgba(13, 13, 16, 0.08); transition: all 0.2s ease; z-index: 3; }
.tgl-vids__prev { right: 68px; }
.tgl-vids__prev:hover, .tgl-vids__next:hover { background: var(--tgl-gradient); border-color: transparent; color: var(--tgl-carbon); }
.tgl-vids__prev:disabled, .tgl-vids__next:disabled { opacity: 0.35; cursor: default; background: #FFFFFF; color: var(--tgl-ink); }
.tgl-testimonials__note { margin: 6px 0 0; font-size: 0.85rem; color: var(--tgl-muted); }
/* single wide video (results section) */
.tgl-results { background: var(--tgl-paper-2); }
.tgl-results h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); }
.tgl-vids--single .tgl-vids__track { display: block; padding: 0; overflow: visible; }
.tgl-vcard--wide { width: 100%; aspect-ratio: 16 / 9; }
.tgl-vcard--wide video { object-fit: cover; object-position: top; }
.tgl-proof { height: 100%; display: flex; flex-direction: column; gap: 14px; }
.tgl-proof__stat { padding: 22px 26px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--tgl-line); box-shadow: 0 10px 30px rgba(13, 13, 16, 0.06); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.tgl-proof__label { width: 100%; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tgl-klein-deep); }
.tgl-proof__stat strong { font-family: var(--heading-font); font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--tgl-ink); white-space: nowrap; }
.tgl-proof__stat strong small { font-size: 0.5em; font-weight: 700; color: var(--tgl-muted); }
.tgl-proof__delta { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: #EAF8F1; color: #1C8A57; font-size: 0.85rem; font-weight: 800; white-space: nowrap; }
.tgl-proof__note { margin: auto 0 0; display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; line-height: 1.5; color: var(--tgl-muted); }
.tgl-proof__note i { color: var(--tgl-mint); font-size: 1.1rem; flex: 0 0 auto; margin-top: 2px; }
@media (max-width: 991.98px) { .tgl-proof { margin-top: 6px; } }
/* full page: a grid instead of a scrolling row */
.tgl-vids--grid .tgl-vids__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 10px 0 0; overflow: visible; scroll-snap-type: none; }
.tgl-vids--grid .tgl-vcard { width: auto; }
.tgl-vids--grid .tgl-vcard__cap { font-size: 1.05rem; }
.tgl-testimonials--page { background: var(--tgl-paper); }
@media (max-width: 991.98px) { .tgl-vids--grid .tgl-vids__track { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) { .tgl-vids--grid .tgl-vids__track { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 767.98px) { .tgl-vcard { width: 200px; } .tgl-vids__track { padding-left: 16px; padding-right: 16px; } .tgl-vids__prev, .tgl-vids__next { display: none; } }

/* Results: more proof (phone recordings, screenshots, Partner dashboard) */
.tgl-proof-more { margin-top: 64px; }
.tgl-proof-more h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; margin: 0; }
.tgl-vids--proof .tgl-vids__track { padding-top: 26px; }
.tgl-vids--proof .tgl-vcard { cursor: zoom-in; }
.tgl-vids--proof .tgl-vcard video { object-position: top; }
.tgl-vids--proof .tgl-vcard__sound { top: 12px; right: 12px; bottom: auto; }
.tgl-vids--proof .tgl-vcard__cap { font-size: 0.86rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.tgl-vids--proof .tgl-vcard__cap b { display: block; font-family: var(--heading-font); font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 6px; }
.tgl-vcard--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.tgl-vcard--img .tgl-vcard__dur i { color: var(--tgl-accent-3); }
.tgl-access { margin-top: 28px; display: grid; grid-template-columns: minmax(250px, 0.85fr) 1.7fr; gap: 32px; align-items: center; padding: 30px; border-radius: 24px; background: var(--tgl-carbon); color: #fff; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 30px 70px rgba(13, 13, 16, 0.25); }
.tgl-access .tgl-label { color: var(--tgl-mint); }
.tgl-access strong { display: block; margin: 10px 0 4px; font-family: var(--heading-font); font-size: clamp(3.6rem, 2.6rem + 3.4vw, 6rem); font-weight: 800; letter-spacing: -0.06em; line-height: 0.95; color: #fff; }
.tgl-access strong sup { font-size: 0.45em; top: -0.9em; color: var(--tgl-mint); }
.tgl-access__lead { font-family: var(--heading-font); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; margin: 0 0 14px; }
.tgl-access__note { font-size: 0.9rem; line-height: 1.6; color: var(--tgl-ash); margin: 0 0 16px; }
.tgl-access .tgl-inline-link { color: var(--tgl-mint); font-weight: 700; }
.tgl-access__shot { position: relative; display: block; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); cursor: zoom-in; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tgl-access__shot:hover { transform: translateY(-4px); }
.tgl-access__shot img { width: 100%; display: block; }
.tgl-access__zoom { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: rgba(13, 13, 16, 0.75); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; backdrop-filter: blur(6px); }
.tgl-access__zoom i { color: var(--tgl-accent-3); }
.tgl-access__shot:hover .tgl-access__zoom { background: var(--tgl-gradient); color: var(--tgl-carbon); }
.tgl-access__shot:hover .tgl-access__zoom i { color: var(--tgl-carbon); }
@media (max-width: 991.98px) { .tgl-access { grid-template-columns: 1fr; gap: 22px; padding: 22px; } .tgl-proof-more { margin-top: 48px; } }
@media (max-width: 767.98px) { .tgl-vids--proof .tgl-vcard__sound { display: none; } .tgl-vids--proof .tgl-vcard__cap b { font-size: 1.35rem; } }
.tgl-vmodal__box.is-wide { width: min(1120px, 100%); }
.tgl-vmodal__img { display: block; width: 100%; max-height: calc(100vh - 100px); object-fit: contain; background: #000; }

.tgl-vmodal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tgl-vmodal__backdrop { position: absolute; inset: 0; background: rgba(13, 13, 16, 0.86); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.22s ease; }
.tgl-vmodal__box { position: relative; width: min(420px, 100%); max-height: calc(100vh - 40px); border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08); transform: translateY(20px) scale(0.96); opacity: 0; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease; }
.tgl-vmodal.is-open .tgl-vmodal__backdrop { opacity: 1; }
.tgl-vmodal.is-open .tgl-vmodal__box { transform: none; opacity: 1; }
.tgl-vmodal video { display: block; width: 100%; max-height: calc(100vh - 100px); background: #000; }
.tgl-vmodal__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(13, 13, 16, 0.7); color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(6px); }
.tgl-vmodal__close:hover { background: var(--tgl-gradient); color: var(--tgl-carbon); }
.tgl-vmodal__cap { margin: 0; padding: 12px 16px; background: #191823; color: var(--tgl-chalk); font-weight: 700; font-size: 0.95rem; }
.tgl-vmodal__cap:empty { display: none; }
.tgl-vmodal__help { margin: 0; padding: 10px 16px 14px; background: #191823; color: var(--tgl-ash); font-size: 0.85rem; }
.tgl-vmodal__help a { color: var(--tgl-klein); font-weight: 700; }
body.tgl-vmodal-open { overflow: hidden; }

/* =====================================================================
   Floating WhatsApp chat widget (assets/js/tgl-whatsapp.js)
   ===================================================================== */
.tgl-wa { position: fixed; left: 22px; bottom: 22px; z-index: 9990; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; font-family: var(--body-font); }
.tgl-wa__btn { position: relative; width: 84px; height: 84px; border-radius: 50%; border: 0; background: #25D366; color: #FFFFFF; font-size: 3rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 16px 40px rgba(37, 211, 102, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25); transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease, background 0.25s ease; }
.tgl-wa__btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 22px 50px rgba(37, 211, 102, 0.55), 0 6px 14px rgba(0, 0, 0, 0.3); }
.tgl-wa.is-open .tgl-wa__btn { background: #1C1C1C; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); }
.tgl-wa__ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(37, 211, 102, 0.7); animation: tgl-wa-ring 2.4s ease-out infinite; pointer-events: none; }
.tgl-wa.is-open .tgl-wa__ring { display: none; }
@keyframes tgl-wa-ring { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.55); opacity: 0; } }
.tgl-wa__badge { position: absolute; top: 0; right: 0; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: #E5484D; color: #fff; font-size: 0.75rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.tgl-wa__label { position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%) translateX(-8px); white-space: nowrap; padding: 9px 14px; border-radius: 999px; background: #1C1C1C; color: #fff; font-size: 0.85rem; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); }
.tgl-wa__btn:hover .tgl-wa__label { opacity: 1; transform: translateY(-50%) translateX(0); }
.tgl-wa.is-open .tgl-wa__label { display: none; }

.tgl-wa__panel { width: min(380px, calc(100vw - 32px)); border-radius: 20px; overflow: hidden; background: #ECE5DD; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.06); transform: translateY(16px) scale(0.96); opacity: 0; transform-origin: bottom left; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease; }
.tgl-wa__panel.is-open { transform: none; opacity: 1; }
.tgl-wa__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #075E54; color: #fff; }
.tgl-wa__avatar { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: #0D0D10; color: #F0EDE8; display: flex; align-items: center; justify-content: center; }
.tgl-wa__avatar svg { width: 26px; height: 26px; }
.tgl-wa__online { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #25D366; border: 2px solid #075E54; }
.tgl-wa__who { flex: 1; min-width: 0; line-height: 1.2; }
.tgl-wa__who strong { display: block; font-size: 1rem; font-weight: 700; }
.tgl-wa__who span { display: block; font-size: 0.75rem; opacity: 0.8; margin-top: 2px; }
.tgl-wa__close { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tgl-wa__close:hover { background: rgba(255, 255, 255, 0.22); }
.tgl-wa__body { padding: 16px; background: #ECE5DD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='1' fill='%23000' fill-opacity='0.05'/%3E%3C/svg%3E"); max-height: min(64vh, 520px); overflow-y: auto; }
.tgl-wa__bubble { position: relative; max-width: 88%; padding: 10px 12px 18px; border-radius: 0 12px 12px 12px; background: #fff; color: #1C1C1C; font-size: 0.95rem; line-height: 1.45; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }
.tgl-wa__bubble::before { content: ""; position: absolute; left: -7px; top: 0; border: 7px solid transparent; border-top-color: #fff; border-right-color: #fff; }
.tgl-wa__bubble time { position: absolute; right: 10px; bottom: 4px; font-size: 0.66rem; color: #8A8A8A; }
.tgl-wa__topics { display: grid; gap: 6px; margin-top: 12px; }
.tgl-wa__topic { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #fff; color: #1C1C1C; font-weight: 600; font-size: 0.92rem; border: 1px solid rgba(0, 0, 0, 0.06); transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; }
.tgl-wa__topic span { font-size: 1.1rem; }
.tgl-wa__topic:hover { background: #DCF8C6; color: #075E54; transform: translateX(3px); }
.tgl-wa__start { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 16px 10px; padding: 14px 18px; border-radius: 999px; background: #25D366; color: #fff !important; font-weight: 800; font-size: 1rem; box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35); transition: transform 0.2s ease, background 0.2s ease; }
.tgl-wa__start i { font-size: 1.4rem; }
.tgl-wa__start:hover { background: #1EBE5A; transform: translateY(-2px); }
.tgl-wa__foot { display: block; text-align: center; padding: 0 16px 14px; font-size: 0.72rem; color: #6E6E6E; }
@media (max-width: 575.98px) { .tgl-wa { left: 14px; bottom: 14px; } .tgl-wa__btn { width: 64px; height: 64px; font-size: 2.2rem; } .tgl-wa__label { display: none; } }
@media (prefers-reduced-motion: reduce) { .tgl-wa__ring { animation: none; } }

/* Home-page hero: mini store-check bar */
.tgl-hero-check { display: flex; align-items: center; gap: 6px; max-width: 560px; margin-top: 22px; padding: 6px 6px 6px 16px; border-radius: 999px; background: rgba(25, 24, 35, 0.85); border: 1px solid rgba(51, 203, 191, 0.35); backdrop-filter: blur(6px); }
.tgl-hero-check > i { color: var(--tgl-klein); font-size: 1.1rem; flex: 0 0 auto; }
#tgl-hero-url { flex: 1; min-width: 0; background: transparent !important; background-color: transparent !important; border: 0 !important; color: var(--tgl-chalk) !important; font-weight: 600; padding: 10px 6px; box-shadow: none !important; border-radius: 0 !important; }
#tgl-hero-url::placeholder { color: var(--tgl-ash) !important; font-weight: 500; }
.tgl-hero-check button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 0; background: var(--tgl-gradient-btn); color: #fff; font-weight: 700; font-size: 0.92rem; box-shadow: 0 8px 20px rgba(51, 203, 191, 0.3); transition: transform 0.15s ease; }
.tgl-hero-check button:hover { transform: translateY(-1px); }
.tgl-hero-check__hint { display: block; margin-top: 8px; font-size: 0.75rem !important; color: var(--tgl-ash) !important; letter-spacing: 0.04em; }
@media (max-width: 575.98px) { .tgl-hero-check { flex-wrap: wrap; border-radius: 18px; padding: 8px; } .tgl-hero-check > i { display: none; } .tgl-hero-check button { width: 100%; justify-content: center; } }

/* =====================================================================
   Contact page (contact.html)
   ===================================================================== */
.tgl-contact { background: var(--tgl-paper); }
.tgl-contact h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); }
.tgl-contact__ways { display: grid; gap: 12px; margin-top: 30px; }
.tgl-way { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--tgl-line); box-shadow: 0 8px 24px rgba(13, 13, 16, 0.05); color: var(--tgl-ink); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.tgl-way:hover { transform: translateY(-3px); border-color: rgba(51, 203, 191, 0.55); box-shadow: 0 18px 40px rgba(13, 13, 16, 0.1); color: var(--tgl-ink); }
.tgl-way__ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--c, var(--tgl-klein-deep)); color: #FFFFFF; font-size: 1.5rem; box-shadow: 0 10px 22px rgba(13, 13, 16, 0.15), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.tgl-way__body { min-width: 0; }
.tgl-way__body b { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tgl-klein-deep); }
.tgl-way__body span { display: block; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; word-break: break-all; }
.tgl-way > i { color: var(--tgl-muted); transition: transform 0.25s ease, color 0.25s ease; }
.tgl-way:hover > i { color: var(--tgl-klein-deep); transform: translate(2px, -2px); }
.tgl-socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tgl-socials a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tgl-paper-2); border: 1px solid var(--tgl-line); color: var(--tgl-ink); font-size: 1.25rem; transition: all 0.25s ease; }
.tgl-socials a:hover { background: var(--tgl-gradient); border-color: transparent; color: var(--tgl-carbon); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(51, 203, 191, 0.3); }
.tgl-contact__marks { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--tgl-line); }
.tgl-contact__next { margin-top: 80px; }
.tgl-contact select.form-select { border: 1px solid var(--tgl-line-2) !important; border-radius: 6px !important; }

/* Contact details: bold, clear, big — everywhere they appear */
.tgl-contact-big { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 22px; margin-top: 34px; }
.tgl-contact-big a { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: 999px; background: rgba(25, 24, 35, 0.9); border: 1px solid rgba(51, 203, 191, 0.4); color: var(--tgl-chalk); font-family: var(--heading-font); font-weight: 800; font-size: clamp(1.15rem, 1rem + 0.9vw, 1.7rem); letter-spacing: -0.02em; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.tgl-contact-big a:hover { transform: translateY(-3px); border-color: var(--tgl-klein); color: #FFFFFF; box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(51, 203, 191, 0.14); }
.tgl-contact-big i { font-size: 1.5em; color: var(--tgl-klein); }
.tgl-contact-big span { word-break: break-all; }
.tgl-way { grid-template-columns: 58px 1fr auto; padding: 18px 22px 18px 16px; }
.tgl-way__ico { width: 58px; height: 58px; font-size: 1.75rem; }
.tgl-way__body b { font-size: 0.8rem; }
.tgl-way__body span { font-family: var(--heading-font); font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem); font-weight: 800; letter-spacing: -0.02em; color: var(--tgl-ink); word-break: normal; overflow-wrap: anywhere; }
.tgl-way--email .tgl-way__body span { font-size: clamp(1.05rem, 0.9rem + 0.45vw, 1.25rem); letter-spacing: -0.01em; }
/* home-page contact panel */
.get-in-touch div.bg-main-600 a[href^="mailto:"], .get-in-touch div.bg-main-600 a[href*="wa.me"] { display: block; font-family: var(--heading-font); font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem) !important; font-weight: 800 !important; letter-spacing: -0.02em; line-height: 1.2; color: #FFFFFF !important; word-break: break-all; }
.get-in-touch div.bg-main-600 a[href*="t.me"] { font-weight: 800; font-size: 1.05rem; color: #FFFFFF !important; }
.get-in-touch div.bg-main-600 .tw-text-sm { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--tgl-klein) !important; }
.get-in-touch div.bg-main-600 p.h6 { font-size: 1.15rem; font-weight: 700; color: #FFFFFF !important; }
/* footer contact column */
.footer a[href^="mailto:"], .footer a[href*="wa.me"], .footer a[href^="tel:"] { font-family: var(--heading-font); font-size: 1.3rem !important; font-weight: 800; letter-spacing: -0.02em; color: #FFFFFF !important; word-break: break-all; }
.footer a[href^="mailto:"]:hover, .footer a[href*="wa.me"]:hover, .footer a[href^="tel:"]:hover { color: var(--tgl-klein) !important; }
.footer .animation-item h2.h5 { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tgl-klein) !important; margin-bottom: 4px; }
.footer .animation-item p.text-white { font-size: 1.05rem; font-weight: 600; }
.get-in-touch div.bg-main-600 .tgl-tg-line { font-size: 0.95rem; color: var(--tgl-ash) !important; }

/* =====================================================================
   About page (about.html)
   ===================================================================== */
.tgl-about__photo--hero { max-width: 460px; margin-inline: auto; border: 1px solid rgba(51, 203, 191, 0.35); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(51, 203, 191, 0.08); transform: perspective(1200px) rotateY(-8deg) rotateX(2deg); }
.tgl-about__photo--hero:hover { transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateZ(20px); }
.tgl-about__photo--hero img { aspect-ratio: 4 / 3.4; }
.tgl-about__photo--hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.18) 0%, transparent 40%, transparent 70%, rgba(13, 13, 16, 0.25) 100%); }
.tgl-about__photo--hero .tgl-about__badge { z-index: 1; }

/* Trust badges strip: slow marquee of badge cards (About page) */
.tgl-trust { background: var(--tgl-paper-2); padding-block: 56px 72px; border-bottom: 1px solid var(--tgl-line); }
.tgl-trust__track { gap: 18px; animation-duration: 48s; }
.tgl-badge {
  display: inline-flex; align-items: center; gap: 14px; flex: 0 0 auto;
  padding: 12px 20px 12px 12px; border-radius: 14px;
  background: #FFFFFF; border: 1px solid var(--tgl-line); box-shadow: 0 8px 22px rgba(13, 13, 16, 0.06);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.tgl-badge:hover { transform: translateY(-3px); border-color: rgba(51, 203, 191, 0.55); box-shadow: 0 16px 36px rgba(13, 13, 16, 0.1); }
.tgl-badge__mark { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 11px; background: var(--tgl-paper-2); border: 1px solid var(--tgl-line); flex: 0 0 auto; }
.tgl-badge__mark img { height: 22px; width: auto; max-width: 30px; filter: brightness(0) invert(0.1); opacity: 0.85; }
.tgl-badge__text { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.tgl-badge__text small { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tgl-klein-deep); }
.tgl-badge__text b { margin-top: 3px; font-family: var(--heading-font); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; color: var(--tgl-ink); }
.tgl-badge > i { margin-left: 4px; font-size: 1.35rem; color: var(--tgl-mint); }
.tgl-badge--verified { border: 1px solid transparent; background-image: linear-gradient(#FFFFFF, #FFFFFF), var(--tgl-gradient); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 14px 34px rgba(51, 203, 191, 0.22); }
.tgl-badge--verified .tgl-badge__mark { background: var(--tgl-gradient); border-color: transparent; }
.tgl-badge--verified .tgl-badge__mark img { filter: brightness(0) invert(0.06); opacity: 1; }
.tgl-trust__note { margin: 22px auto 0; max-width: 640px; font-size: 0.78rem; color: var(--tgl-muted); }

.tgl-about--page h2 { font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.7rem); }
.tgl-about--page .tgl-about__copy p { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.65; }
.tgl-about--page .tgl-about__copy p + p { margin-top: 22px; }
.tgl-about--page .tgl-about__copy em { font-style: italic; color: var(--tgl-ink); }
.tgl-about__facts--stack { grid-template-columns: 1fr; gap: 10px; margin-top: 26px; }
@media (min-width: 992px) { .tgl-sticky { position: sticky; top: 110px; } }

/* Photo beside the About copy: tilted frame + floating lab card */
.tgl-photo-stack { position: relative; padding: 0 28px 54px 0; }
.tgl-about__photo--big { transform: perspective(1200px) rotateY(6deg) rotateX(2deg); border: 1px solid var(--tgl-line); }
.tgl-about__photo--big:hover { transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateZ(20px); }
.tgl-about__photo--big img { aspect-ratio: 4 / 3.4; }
.tgl-photo-stack__card {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 14px; max-width: 320px;
  padding: 16px 20px; border-radius: 14px;
  background: #191823; border: 1px solid rgba(51, 203, 191, 0.35); color: var(--tgl-chalk);
  box-shadow: 0 24px 60px rgba(13, 13, 16, 0.4);
}
.tgl-photo-stack__card .tgl-service__icon { width: 46px; height: 46px; font-size: 1.35rem; flex: 0 0 auto; }
.tgl-photo-stack__card strong { display: block; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.tgl-photo-stack__card span { display: block; margin-top: 3px; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tgl-ash); }
.tgl-photo-stack__glow { position: absolute; left: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(51, 203, 191, 0.28), transparent 70%); filter: blur(30px); z-index: -1; }
.tgl-about--page .tgl-about__copy .tgl-about__lead { margin-bottom: 26px; }
.tgl-about--page .tgl-about__copy .tgl-about__facts { margin-top: 34px; }
@media (min-width: 992px) { .tgl-photo-stack { position: sticky; top: 120px; } .tgl-about--page .row.align-items-center { align-items: flex-start !important; } }
@media (max-width: 991.98px) { .tgl-photo-stack { padding: 0 0 54px; } .tgl-photo-stack__card { right: 12px; } }

/* Dark stats band with the dotted world map and pulsing store pins */
.tgl-world { background: var(--tgl-carbon); padding-block: 110px 120px; color: var(--tgl-ash); }
.tgl-world h2 { font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem); max-width: 760px; margin: 0 auto; }
.tgl-world__map {
  position: absolute; left: 50%; top: 50%; width: min(1500px, 120vw); aspect-ratio: 1920 / 860;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
}
.tgl-world__map::before {
  content: ""; position: absolute; inset: 0;
  background: url("../images/deco/world-dots.svg") center / contain no-repeat;
  opacity: 0.3;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 40%, transparent 100%);
}
.tgl-world__pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tgl-world__pin i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--tgl-accent-3); box-shadow: 0 0 0 4px rgba(58, 240, 200, 0.25), 0 0 20px rgba(58, 240, 200, 0.8); animation: tgl-pin 2.4s ease-out infinite; animation-delay: var(--d, 0s); }
.tgl-world__pin b { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tgl-chalk); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }
@keyframes tgl-pin { 0% { box-shadow: 0 0 0 0 rgba(58, 240, 200, 0.6), 0 0 20px rgba(58, 240, 200, 0.8); } 70% { box-shadow: 0 0 0 18px rgba(58, 240, 200, 0), 0 0 20px rgba(58, 240, 200, 0.8); } 100% { box-shadow: 0 0 0 0 rgba(58, 240, 200, 0), 0 0 20px rgba(58, 240, 200, 0.8); } }
.tgl-world .tgl-pill--dark, .tgl-subscribe .tgl-pill--dark { display: inline-block; background: rgba(51, 203, 191, 0.12) !important; color: var(--tgl-klein) !important; border: 1px solid rgba(51, 203, 191, 0.35); border-radius: 999px !important; font-weight: 600; letter-spacing: 0.04em; }
.tgl-stats--dark > div { background: rgba(25, 24, 35, 0.78); border-color: rgba(51, 203, 191, 0.3); backdrop-filter: blur(8px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); }
.tgl-stats--dark strong { background: var(--tgl-gradient); -webkit-background-clip: text; background-clip: text; }
.tgl-stats--dark > div > span { color: var(--tgl-ash); }
@media (max-width: 767.98px) { .tgl-world__pin b { display: none; } .tgl-world__map { opacity: 0.22; } }

/* Mission / vision photos */
.tgl-mv__photo { position: relative; height: 100%; min-height: 320px; border-radius: 16px; }
.tgl-mv__photo img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; aspect-ratio: auto; }
.tgl-3d-frame--flip { transform: perspective(1200px) rotateY(7deg) rotateX(3deg); }
.tgl-mv-row:hover .tgl-mv__photo { transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateZ(20px); box-shadow: 0 30px 60px rgba(13, 13, 16, 0.3); }
.tgl-mv__caption { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: rgba(13, 13, 16, 0.78); color: #fff; backdrop-filter: blur(6px); font-weight: 600; font-size: 0.95rem; }
.tgl-mv__caption i { color: var(--tgl-accent-3); font-size: 1.2rem; flex: 0 0 auto; }

.tgl-mission { background: var(--tgl-paper-2); }
.tgl-mv { position: relative; padding: 40px 38px 36px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--tgl-line); box-shadow: 0 10px 30px rgba(13, 13, 16, 0.06); display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.tgl-mv:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(13, 13, 16, 0.12); }
.tgl-mv__icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 14px; background: var(--tgl-gradient); color: var(--tgl-carbon); font-size: 1.7rem; box-shadow: 0 12px 26px rgba(51, 203, 191, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -4px 0 rgba(13, 13, 16, 0.18); transform: perspective(600px) rotateX(8deg); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tgl-mv:hover .tgl-mv__icon { transform: perspective(600px) rotateX(0deg) translateY(-4px) scale(1.06); }
.tgl-mv__kicker { display: block; margin: 24px 0 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tgl-klein-deep); }
.tgl-mv h3 { font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem); line-height: 1.2; margin-bottom: 18px; }
.tgl-mv p { font-size: 1.05rem; line-height: 1.65; color: var(--tgl-ink-2); margin: 0; }
.tgl-mv p + p { margin-top: 14px; }
.tgl-mv--dark { background: linear-gradient(170deg, #12302E 0%, var(--tgl-panel) 55%, #191823 100%); border-color: rgba(51, 203, 191, 0.45); box-shadow: 0 30px 70px rgba(13, 13, 16, 0.3); }
.tgl-mv--dark::before { content: ""; position: absolute; inset: -1px; border-radius: 17px; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--tgl-a), transparent 0 55%, var(--tgl-klein) 75%, var(--tgl-accent-2) 88%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: tgl-border-spin 8s linear infinite; }
.tgl-mv--dark h3 { color: var(--tgl-chalk); }
.tgl-mv--dark p { color: var(--tgl-ash); }
.tgl-mv--dark .tgl-mv__kicker { color: var(--tgl-klein); }

.tgl-belief { height: 100%; padding: 26px 24px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--tgl-line); box-shadow: 0 8px 24px rgba(13, 13, 16, 0.05); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.tgl-belief:hover { transform: translateY(-4px); border-color: rgba(51, 203, 191, 0.5); box-shadow: 0 18px 40px rgba(13, 13, 16, 0.1); }
.tgl-belief i { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; background: var(--tgl-tint); color: var(--tgl-klein-deep); font-size: 1.3rem; margin-bottom: 16px; transition: background 0.3s ease, color 0.3s ease; }
.tgl-belief:hover i { background: var(--tgl-gradient); color: var(--tgl-carbon); }
.tgl-belief b { display: block; font-family: var(--heading-font); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.015em; color: var(--tgl-ink); }
.tgl-belief span { display: block; margin-top: 6px; font-size: 0.95rem; line-height: 1.55; color: var(--tgl-muted); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tgl-mv--dark::before, .tgl-world__pin i, .tgl-photo-stack__card,
  .tgl-psv-glow, .tgl-psv-float, .tgl-psv-float2, .tgl-psv-step, .tgl-psv-flag, .tgl-psv-spin, .tgl-psv-spin-r, .tgl-psv-dash { animation: none; }
  .tgl-word, .tgl-card__list li { animation: none; opacity: 1; transform: none; }
  .tgl-ring, .tgl-ring::after, .banner-one::before, .banner-one::after, .tgl-partners__track, .tgl-chip__dot,
  .tgl-card--main::before, .tgl-scroll span::after, .loader, .loader::before,
  .tgl-page-hero::before, .tgl-page-hero::after, .tgl-loop li, .tgl-plan--featured::before, .tgl-flow__pulse, .tgl-flow__icon { animation: none; }
  .tgl-parallax { transition: none; }
}

/* =====================================================================
   Forms (assets/js/tgl-forms.js): inline status, validation, WhatsApp alternative
   ===================================================================== */
.tgl-form-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: 12px; font-size: 0.95rem; line-height: 1.5; }
.tgl-form-note > i { font-size: 1.4rem; flex: 0 0 auto; }
.tgl-form-note.is-ok { background: #EAF8F1; color: #14532D; border: 1px solid rgba(42, 174, 114, 0.4); }
.tgl-form-note.is-ok > i { color: #2AAE72; }
.tgl-form-note.is-err { background: #FDECEC; color: #7A271A; border: 1px solid rgba(180, 35, 24, 0.3); }
.tgl-form-note.is-err > i { color: #E5484D; }
.tgl-form-note a { color: inherit; font-weight: 700; text-decoration: underline; }
.footer .tgl-form-note { margin-top: 12px; }
.form-submit input.is-invalid, .form-submit textarea.is-invalid, .form-submit select.is-invalid { border-color: #E5484D !important; box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.18) !important; }
.form-submit button[type="submit"].is-busy { opacity: 0.85; cursor: progress; }
.tgl-form-wa { display: inline-flex; align-items: center; gap: 8px; margin-left: 14px; margin-top: 6px; padding: 12px 18px; border-radius: 999px; border: 1.5px solid #25D366; background: #FFFFFF; color: #128C4A; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: all 0.2s ease; vertical-align: middle; }
.tgl-form-wa i { font-size: 1.2rem; color: #25D366; }
.tgl-form-wa:hover { background: #25D366; color: #FFFFFF; }
.tgl-form-wa:hover i { color: #FFFFFF; }
@media (max-width: 575.98px) { .tgl-form-wa { margin-left: 0; margin-top: 12px; width: 100%; justify-content: center; } }
/* =====================================================================
   Languages: header switcher, Google translator housekeeping, auto-translate note
   ===================================================================== */
.tgl-lang { position: relative; display: flex; align-items: center; margin-left: 14px; }
.tgl-lang__btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.06); color: #fff; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; backdrop-filter: blur(6px); }
.tgl-lang__btn:hover, .tgl-lang.is-open .tgl-lang__btn { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.tgl-lang__btn > i:first-child { font-size: 1.15rem; color: var(--tgl-klein); }
.tgl-lang__caret { font-size: 0.75rem; opacity: 0.7; transition: transform 0.2s ease; }
.tgl-lang.is-open .tgl-lang__caret { transform: rotate(180deg); }
.tgl-lang__menu { position: absolute; top: calc(100% + 12px); right: 0; width: 330px; max-height: min(70vh, 520px); overflow: auto; padding: 10px; border-radius: 18px; background: #FFFFFF; color: var(--tgl-ink); border: 1px solid var(--tgl-line); box-shadow: 0 30px 70px rgba(13, 13, 16, 0.28); z-index: 1000; text-align: left; }
.tgl-lang__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.tgl-lang__opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 0; background: transparent; color: var(--tgl-ink); font-size: 0.92rem; font-weight: 600; text-align: left; cursor: pointer; line-height: 1.2; }
.tgl-lang__opt small { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; color: var(--tgl-muted); }
.tgl-lang__opt:hover { background: var(--tgl-paper-2); }
.tgl-lang__opt.is-active { background: var(--tgl-tint); color: var(--tgl-klein-deep); }
.tgl-lang__opt.is-active small { color: var(--tgl-klein-deep); }
.tgl-lang__note { margin: 8px 6px 4px; font-size: 0.74rem; line-height: 1.45; color: var(--tgl-muted); }
@media (max-width: 575.98px) { .tgl-lang { margin-left: 8px; } .tgl-lang__btn { height: 38px; padding: 0 11px; } .tgl-lang__caret { display: none; } .tgl-lang__menu { position: fixed; top: 74px; left: 12px; right: 12px; width: auto; } }
/* Google's translator: widget off-screen, banner off the layout, no hover highlights */
#google_translate_element { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
body { top: 0 !important; }
iframe.goog-te-banner-frame, .skiptranslate > iframe, #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
html.tgl-translating font { font: inherit; color: inherit; }
/* the note shown when a page was translated automatically */
.tgl-lang-toast { position: fixed; right: 18px; bottom: 18px; z-index: 9990; display: flex; align-items: flex-start; gap: 12px; max-width: min(430px, calc(100vw - 36px)); padding: 14px 14px 14px 16px; border-radius: 16px; background: var(--tgl-carbon); color: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.92rem; line-height: 1.5; transform: translateY(20px); opacity: 0; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease; }
.tgl-lang-toast.is-in { transform: none; opacity: 1; }
.tgl-lang-toast > i { color: var(--tgl-klein); font-size: 1.3rem; flex: 0 0 auto; margin-top: 2px; }
.tgl-lang-toast__orig { display: inline; padding: 0; border: 0; background: none; color: var(--tgl-klein); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tgl-lang-toast__x { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
/* =====================================================================
   Photo + copy band (store check, services, contact, work). Media column may carry a floating reel.
   ===================================================================== */
.tgl-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.tgl-feature--flip .tgl-feature__media { order: 2; }
.tgl-feature__media { position: relative; }
.tgl-feature__photo { position: relative; margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--tgl-line); box-shadow: 0 30px 70px rgba(13, 13, 16, 0.22); transform: perspective(1200px) rotateY(-5deg); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tgl-feature--flip .tgl-feature__photo { transform: perspective(1200px) rotateY(5deg); }
.tgl-feature__photo:hover { transform: perspective(1200px) rotateY(0deg) translateZ(16px); }
.tgl-feature__photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 4.3; }
.tgl-feature__photo figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 10px 14px; border-radius: 12px; background: rgba(13, 13, 16, 0.72); color: #fff; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; backdrop-filter: blur(6px); }
.tgl-feature__media--reel { padding: 0 0 46px 0; }
.tgl-feature__media--reel .tgl-feature__photo img { aspect-ratio: 4 / 3.6; }
.tgl-feature__media--reel .tgl-feature__photo figcaption { left: 44%; }
.tgl-feature__reel { position: absolute; right: -6px; bottom: 0; width: 38%; z-index: 3; }
.tgl-feature__reel .tgl-vids__track { display: block; padding: 0; overflow: visible; }
.tgl-feature__reel .tgl-vcard { width: 100%; border: 3px solid #191823; border-radius: 22px; box-shadow: 0 30px 60px rgba(13, 13, 16, 0.4); }
.tgl-feature__reel .tgl-vcard__cap { font-size: 0.82rem; }
.tgl-feature__reel .tgl-vcard__dur { font-size: 0.66rem; padding: 4px 8px; }
.tgl-feature__reel .tgl-vcard__sound { bottom: 40px; right: 10px; font-size: 0.66rem; padding: 5px 9px; }
.tgl-feature__copy .tgl-pill { margin-bottom: 18px; }
.tgl-feature__copy h3 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 16px; }
.tgl-feature__copy p { color: var(--tgl-muted); font-size: 1.05rem; }
.tgl-feature__points { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 12px; }
.tgl-feature__points li { display: flex; gap: 12px; align-items: flex-start; color: var(--tgl-ink); font-weight: 500; line-height: 1.45; }
.tgl-feature__points i { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--tgl-tint); color: var(--tgl-klein-deep); font-size: 0.8rem; margin-top: 1px; }
.tgl-feature__actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
@media (max-width: 991.98px) { .tgl-feature { grid-template-columns: 1fr; gap: 30px; } .tgl-feature--flip .tgl-feature__media { order: 0; } .tgl-feature__photo img { aspect-ratio: 16 / 11; } .tgl-feature__media--reel .tgl-feature__photo img { aspect-ratio: 16 / 12; } .tgl-feature__reel { width: 34%; right: 8px; } }
@media (max-width: 575.98px) { .tgl-feature__reel { width: 42%; } .tgl-feature__media--reel { padding-bottom: 60px; } .tgl-feature__media--reel .tgl-feature__photo figcaption { display: none; } }.tgl-feature__reel--left { right: auto; left: -6px; }
.tgl-feature__media--reel .tgl-feature__photo img { object-position: 60% 50%; }
/* =====================================================================
   Email marketing section: animated inbox, the seven flows, sample + results
   ===================================================================== */
.tgl-email { background: var(--tgl-paper-2); }
.tgl-inbox { position: relative; max-width: 430px; margin: 0 auto; padding: 18px 16px 20px; border-radius: 28px; background: #191823; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 40px 90px rgba(13, 13, 16, 0.35), 0 0 0 1px rgba(51, 203, 191, 0.12); color: var(--tgl-chalk); }
.tgl-inbox::before { content: ""; position: absolute; left: 50%; top: 8px; width: 90px; height: 5px; margin-left: -45px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.tgl-inbox__bar { display: flex; align-items: center; justify-content: space-between; margin: 14px 4px 14px; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tgl-ash); }
.tgl-inbox__bar b { color: #fff; font-size: 0.95rem; letter-spacing: -0.01em; text-transform: none; }
.tgl-inbox__bar em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; color: var(--tgl-klein); }
.tgl-inbox__bar em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tgl-klein); box-shadow: 0 0 0 0 rgba(51, 203, 191, 0.6); animation: tgl-pulse 1.8s ease-out infinite; }
.tgl-inbox__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-height: 480px; }
.tgl-inbox__item { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); opacity: 0; transform: translateY(14px) scale(0.98); transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s ease; }
.tgl-inbox__item.is-in { opacity: 1; transform: none; }
.tgl-inbox__item.is-new { background: rgba(51, 203, 191, 0.12); border-color: rgba(51, 203, 191, 0.35); }
.tgl-inbox__ico { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--tgl-gradient); color: var(--tgl-carbon); font-size: 1.2rem; }
.tgl-inbox__item > div > b { display: block; font-size: 0.9rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.tgl-inbox__item > div > span { display: block; font-size: 0.76rem; color: var(--tgl-ash); margin-top: 2px; }
.tgl-inbox__when { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; color: var(--tgl-klein); white-space: nowrap; text-transform: uppercase; }
.tgl-inbox__foot { margin: 14px 4px 0; font-size: 0.74rem; color: var(--tgl-ash); display: flex; justify-content: space-between; }
.tgl-inbox__foot i { color: var(--tgl-klein); }
html.tgl-reduced .tgl-inbox__item { opacity: 1; transform: none; transition: none; }
.tgl-flows { list-style: none; margin: 0; padding: 0; counter-reset: flow; display: grid; gap: 10px; }
.tgl-flows li { counter-increment: flow; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--tgl-line); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.tgl-flows li:hover { transform: translateX(4px); border-color: rgba(51, 203, 191, 0.5); box-shadow: 0 12px 30px rgba(13, 13, 16, 0.07); }
.tgl-flows li::before { content: counter(flow, decimal-leading-zero); font-family: var(--heading-font); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--tgl-tint); color: var(--tgl-klein-deep); }
.tgl-flows b { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--tgl-ink); }
.tgl-flows b small { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tgl-klein-deep); margin-left: 8px; }
.tgl-flows span { display: block; font-size: 0.92rem; line-height: 1.5; color: var(--tgl-muted); margin-top: 3px; }
.tgl-email__aside { margin-top: 22px; display: grid; gap: 12px; }
.tgl-email__note { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--tgl-line); font-size: 0.92rem; line-height: 1.55; color: var(--tgl-muted); }
.tgl-email__note i { flex: 0 0 auto; font-size: 1.3rem; color: var(--tgl-klein-deep); margin-top: 1px; }
.tgl-email__note b { color: var(--tgl-ink); }
.tgl-email__tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.82rem; color: var(--tgl-muted); }
.tgl-email__tools span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--tgl-line); color: var(--tgl-ink); font-weight: 700; font-size: 0.8rem; }
.tgl-email__tools img { height: 14px; width: auto; filter: brightness(0) invert(0.12); }
.tgl-email__gallery { margin-top: 64px; }
.tgl-email__gallery h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 6px; }
.tgl-shot { display: block; position: relative; border-radius: 16px; overflow: hidden; background: #FFFFFF; border: 1px solid var(--tgl-line); box-shadow: 0 14px 40px rgba(13, 13, 16, 0.08); cursor: zoom-in; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease; color: var(--tgl-ink); }
.tgl-shot:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(13, 13, 16, 0.16); color: var(--tgl-ink); }
.tgl-shot img { display: block; width: 100%; height: 220px; object-fit: cover; object-position: top left; }
.tgl-shot--tall img { object-position: top center; }
.tgl-shot__cap { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--tgl-line); }
.tgl-shot__cap strong { font-family: var(--heading-font); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; display: block; }
.tgl-shot__cap span { display: block; font-size: 0.78rem; color: var(--tgl-muted); margin-top: 4px; }
.tgl-shot__cap em { font-style: normal; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: #EAF8F1; color: #1C8A57; font-size: 0.78rem; font-weight: 800; white-space: nowrap; }
@media (max-width: 991.98px) { .tgl-inbox__list { min-height: 0; } }

/* =====================================================================
   Trust building: seven flip cards (question in front, our answer behind) + the trust kit
   ===================================================================== */
.tgl-trust-band { background: var(--tgl-carbon); color: var(--tgl-ash); }
.tgl-trust-band h2 { color: #fff; }
.tgl-flip { position: relative; display: block; width: 100%; min-height: 292px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; perspective: 1400px; color: inherit; }
.tgl-flip__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tgl-flip.is-flipped .tgl-flip__inner { transform: rotateY(180deg); }
@media (hover: hover) { .tgl-flip:hover .tgl-flip__inner { transform: rotateY(180deg); } }
.tgl-flip:focus-visible { outline: 0; }
.tgl-flip:focus-visible .tgl-flip__inner { box-shadow: 0 0 0 4px rgba(51, 203, 191, 0.5); border-radius: 18px; }
.tgl-flip__face { position: absolute; inset: 0; border-radius: 18px; padding: 24px 24px 20px; display: flex; flex-direction: column; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.tgl-flip__front { background: #FFFFFF; color: var(--tgl-ink); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.tgl-flip__back { background: linear-gradient(170deg, #12302E 0%, #191823 70%); color: var(--tgl-chalk); border: 1px solid rgba(51, 203, 191, 0.45); transform: rotateY(180deg); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.tgl-flip__num { font-family: var(--heading-font); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.14em; color: var(--tgl-klein-deep); }
.tgl-flip__front h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; margin: 14px 0 auto; color: var(--tgl-ink); }
.tgl-flip__front h3::before { content: "\201C"; color: var(--tgl-klein); }
.tgl-flip__front h3::after { content: "\201D"; color: var(--tgl-klein); }
.tgl-flip__hint { margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; color: var(--tgl-muted); }
.tgl-flip__hint i { color: var(--tgl-klein-deep); }
.tgl-flip__back b { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tgl-klein); margin-bottom: 10px; }
.tgl-flip__back p { font-size: 0.93rem; line-height: 1.5; color: var(--tgl-chalk); margin: 0 0 auto; }
.tgl-flip__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tgl-flip__tags span { font-size: 0.7rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: rgba(51, 203, 191, 0.14); color: var(--tgl-klein); }
.tgl-flip--cta { min-height: 292px; }
.tgl-flip--cta .tgl-flip__inner { position: absolute; inset: 0; border-radius: 18px; padding: 24px; background: var(--tgl-gradient); color: var(--tgl-carbon); display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(51, 203, 191, 0.25); }
.tgl-flip--cta h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; margin: 10px 0 auto; color: var(--tgl-carbon); }
.tgl-flip--cta p { color: rgba(13, 13, 16, 0.75); font-size: 0.9rem; margin: 10px 0 16px; }
.tgl-flip--cta .tgl-flip__go { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 11px 18px; border-radius: 999px; background: var(--tgl-carbon); color: #fff; font-weight: 700; font-size: 0.9rem; }
.tgl-flip--cta .tgl-flip__go:hover { background: #000; color: #fff; }
.tgl-trust-kit { margin-top: 56px; padding: 26px 28px; border-radius: 22px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.tgl-trust-kit__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 16px; }
.tgl-trust-kit__head h3 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 0; }
.tgl-trust-kit__head p { margin: 0; font-size: 0.9rem; color: var(--tgl-ash); }
.tgl-trust-kit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tgl-trust-kit li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--tgl-chalk); font-size: 0.86rem; font-weight: 600; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; }
.tgl-trust-kit li:hover { border-color: rgba(51, 203, 191, 0.55); background: rgba(51, 203, 191, 0.1); transform: translateY(-2px); }
.tgl-trust-kit li i { color: var(--tgl-klein); font-size: 1.05rem; }
@media (max-width: 575.98px) { .tgl-flip, .tgl-flip--cta { min-height: 260px; } .tgl-flip__face { padding: 20px; } }
/* Cookie note (only appears once a GA4 id is set in tgl-analytics.js) */
.tgl-consent { position: fixed; left: 50%; bottom: 18px; z-index: 9985; transform: translate(-50%, 20px); opacity: 0; display: flex; align-items: center; gap: 14px; width: min(640px, calc(100vw - 32px)); padding: 14px 16px 14px 18px; border-radius: 16px; background: var(--tgl-carbon); color: var(--tgl-chalk); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); font-size: 0.9rem; line-height: 1.45; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease; }
.tgl-consent.is-in { transform: translate(-50%, 0); opacity: 1; }
.tgl-consent > i { flex: 0 0 auto; font-size: 1.5rem; color: var(--tgl-klein); }
.tgl-consent p { margin: 0; flex: 1; }
.tgl-consent p a { color: var(--tgl-klein); font-weight: 700; }
.tgl-consent__btns { display: flex; gap: 8px; flex: 0 0 auto; }
.tgl-consent__btns button { border: 0; border-radius: 999px; padding: 9px 14px; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.tgl-consent__no { background: rgba(255, 255, 255, 0.1); color: #fff; }
.tgl-consent__yes { background: var(--tgl-gradient); color: var(--tgl-carbon); }
@media (max-width: 575.98px) { .tgl-consent { flex-wrap: wrap; bottom: 112px; } .tgl-consent__btns { width: 100%; justify-content: flex-end; } }
.tgl-footer-privacy { margin-left: 10px; color: var(--tgl-ash); text-decoration: underline; text-underline-offset: 3px; }
.tgl-footer-privacy:hover { color: var(--tgl-klein); }

.tgl-plan__price b .tgl-plan__from { display: inline-block; margin: 0 4px 0 0; font-size: 0.42em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tgl-muted); vertical-align: 0.5em; }
.tgl-plan__price b .tgl-plan__per { display: inline-block; margin: 0 0 0 2px; font-size: 0.42em; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--tgl-muted); }

.tgl-shot--proof { display: flex; flex-direction: column; }
.tgl-shot--proof img { height: auto; flex: 1 1 auto; object-fit: cover; object-position: top left; min-height: 260px; }

/* =====================================================================
   Polish pass 2026-09-18: phone fixes, smoother motion, texture, type
   ===================================================================== */
/* proof cards on phones: the wide dashboard card and grid cards take the full column */
@media (max-width: 767.98px) {
  .tgl-vcard--wide { width: 100%; }
  .tgl-vids--grid .tgl-vcard { width: auto; }
  .tgl-vcard--wide .tgl-vcard__sound { bottom: 44px; }
}
/* the Bugatti-style wide proof card fills its column */
.tgl-shot--proof { display: flex; flex-direction: column; }
.tgl-shot--proof img { height: auto; flex: 1 1 auto; object-fit: cover; object-position: top left; min-height: 240px; }
/* long emails and handles never break inside a word: smaller on phones, wrap at natural points only */
.tgl-contact-big span, .tgl-way__body span, footer a[href^="mailto:"], .tgl-contact__ways a { word-break: normal; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .tgl-contact-big a { font-size: 1.02rem; padding: 12px 18px; gap: 10px; }
  .tgl-way__body span { font-size: 0.95rem; }
  .tgl-way--email .tgl-way__body span { font-size: 0.88rem; }
  footer a[href^="mailto:"] { font-size: 1rem !important; }
}
/* the "Running" chip on the growth loop card stays on one line */
.tgl-live { white-space: nowrap; }
/* trust cards: on phones a tap opens the answer under the question instead of a 3D flip */
@media (max-width: 767.98px) {
  .tgl-flip { min-height: 0; perspective: none; }
  .tgl-flip__inner { position: static; transform: none !important; transition: none; }
  .tgl-flip__face { position: static; transform: none; -webkit-backface-visibility: visible; backface-visibility: visible; }
  .tgl-flip__front { padding: 20px 20px 16px; }
  .tgl-flip__front h3 { margin: 10px 0 12px; font-size: 1.12rem; }
  .tgl-flip__hint { margin-top: 0; }
  .tgl-flip__back { display: none; margin-top: 6px; border-radius: 0 0 18px 18px; padding: 18px 20px; }
  .tgl-flip.is-flipped .tgl-flip__front { border-radius: 18px 18px 0 0; }
  .tgl-flip.is-flipped .tgl-flip__back { display: flex; animation: tgl-drop 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .tgl-flip--cta { min-height: 0; }
  .tgl-flip--cta .tgl-flip__inner { position: static; }
  .tgl-trust-kit { padding: 20px 16px; }
  .tgl-trust-kit li { font-size: 0.8rem; padding: 8px 11px; }
}
@keyframes tgl-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* phone: service cards stack the icon above the title; big headings a touch tighter */
@media (max-width: 575.98px) {
  .tgl-box__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tgl-hero-title { letter-spacing: -0.035em; }
  h2 { letter-spacing: -0.03em; }
  .tgl-email__gallery .tgl-shot img { height: 190px; }
  .tgl-access strong { font-size: 3.4rem; }
  .tgl-proof__stat strong { font-size: 2.1rem; }
  .tgl-plan__price b { font-size: 1.55rem; }
}
/* type: comfortable reading sizes on every screen */
@media (max-width: 767.98px) { body { font-size: 1rem; line-height: 1.65; } .tw-text-lg { font-size: 1.02rem !important; } }
/* motion: one easing family, lift on hover for every card, respect reduced motion */
.tgl-box, .tgl-svc, .tgl-why__card, .tgl-belief, .tgl-way, .tgl-proof__stat, .tgl-flows li, .tgl-shot, .tgl-fp, .tgl-plan { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.25s ease; }
.tgl-proof__stat:hover, .tgl-belief:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(13, 13, 16, 0.1); }
@media (prefers-reduced-motion: reduce) {
  .tgl-partners__track, .tgl-flow__pulse, .tgl-chip__dot, .tgl-inbox__bar em::before { animation: none !important; }
  .tgl-flip__inner, .tgl-feature__photo, .tgl-shot, .tgl-vcard { transition: none !important; }
}
/* texture: a faint grain on the dark bands so large flat areas do not look plastic */
.tgl-trust-band::before, .tgl-access::before, .tgl-world::before, .tgl-flow-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.06; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}
.tgl-access { position: relative; overflow: hidden; }
.tgl-access > * { position: relative; z-index: 1; }
.tgl-trust-band { position: relative; }
/* smoother page: momentum scrolling on horizontal tracks, no tap highlight flashes */
.tgl-vids__track, .tgl-film { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
a, button { -webkit-tap-highlight-color: transparent; }@media (max-width: 575.98px) {
  .tgl-way { grid-template-columns: 46px 1fr 18px; gap: 12px; padding: 14px 14px; }
  .tgl-way__ico { width: 46px; height: 46px; }
  .tgl-way__body span { font-size: 0.98rem; }
  .tgl-way--email .tgl-way__body span { font-size: 0.82rem !important; letter-spacing: -0.01em; }
}