/* Taj-Tech design system — dark technology / digital transformation theme
   (TOR section 10, 53) matched to the official Taj-Tech 2026 key visual. */

:root {
  --tt-bg: #060b0d;
  --tt-bg-soft: #0a1614;
  --tt-panel: #0d1c1a;
  --tt-border: rgba(45, 212, 191, 0.16);
  --tt-teal: #2dd4bf;
  --tt-teal-soft: #5eead4;
  --tt-green: #22c55e;
  --tt-text: #e6f4f1;
  --tt-text-dim: #9fd9d1;
  --tt-text-muted: #5c7f79;

  /* Final Polish task, section 26: hero-only semantic tokens, matched
     to the Taj-Tech 2026 key visual (dark navy / teal / green / gold).
     Additive — the shared tokens above (used by admin too) are
     untouched, per "don't change admin colors globally". */
  --tt-hero-bg: #071022;
  --tt-hero-bg-secondary: #0c2036;
  --tt-hero-teal: #2dd4bf;
  --tt-hero-green: #22c55e;
  --tt-hero-gold: #d4af37;
  --tt-hero-text: #f4f1e6;
  --tt-hero-muted: #9fb0c9;

  /* Branding task, section 4: the official TAJ-TECH 2026 identity
     palette, centralized here (and mirrored into Tailwind's own theme
     in layouts/tajtech.blade.php) — the single source of truth for it.
     Additive: none of the tokens above are removed or repointed, so
     nothing that already renders correctly changes as a side effect of
     defining these. Used so far on the Header/Hero/Footer brand-mark
     areas and the CTA gradient; a full site-wide repaint of every
     existing navy/teal surface to this palette is a much larger,
     separate visual-redesign pass — see the final report. */
  --tt-dark: #155653;
  --tt-deep-green: #27644B;
  --tt-brand-green: #3C7541;
  --tt-mid-green: #5B8E32;
  --tt-lime: #87B01F;
  --tt-brand-gray: #D3D3D3;
  --tt-brand-gradient: linear-gradient(180deg, #155653 0%, #3C7541 45%, #87B01F 100%);
  --tt-font-display: 'Tektur', 'Segoe UI', system-ui, sans-serif;
  --tt-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Logo/Chrome fix task, section 5: the Agency's own 2 brand colours —
     secondary accents only (About icons, B2B markers, separators,
     small decorative details), never a replacement for the TAJ-TECH
     palette above and never a whole-section/whole-card fill. */
  --agency-green: #5EB681;
  --agency-dark: #01505A;
}

/* Branding task, section 5: Tektur for large headings/Hero/big
   numbers, Inter for interface/body text — applied where the existing
   design system's own heading elements/utility classes already render,
   not a parallel type-scale. */
body.tt-public {
  font-family: var(--tt-font-body);
}
body.tt-public h1,
body.tt-public h2,
body.tt-public h3,
body.tt-public .tt-hero-h1 {
  font-family: var(--tt-font-display);
}

body.tt-body {
  background-color: var(--tt-bg);
  background-image:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(45, 212, 191, 0.12), transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 40%, rgba(34, 197, 94, 0.08), transparent 60%);
  color: var(--tt-text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.tt-gradient-text {
  background: linear-gradient(90deg, var(--tt-teal) 0%, var(--tt-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tt-panel {
  background: linear-gradient(180deg, var(--tt-panel) 0%, rgba(13, 28, 26, 0.4) 100%);
  border: 1px solid var(--tt-border);
}

.tt-btn-primary {
  background: linear-gradient(90deg, var(--tt-teal) 0%, var(--tt-green) 100%);
  color: #051210;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 0 0 rgba(45,212,191,0);
}
.tt-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(45, 212, 191, 0.25);
}

.tt-nav-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tt-text-dim, #4f716b);
  padding: 0 10px;
}
.tt-nav-group {
  margin-top: 22px;
}
.tt-nav-group:first-child {
  margin-top: 0;
}
.tt-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  color: var(--tt-text-dim);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.tt-nav-item svg {
  flex-shrink: 0;
}
.tt-nav-item span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.tt-nav-item.active {
  background: rgba(45, 212, 191, 0.08);
  border-left-color: var(--tt-teal);
  color: var(--tt-teal);
}

.tt-btn-danger {
  background: #ef4444;
  color: #fff;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tt-btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3);
}

.tt-btn-ghost {
  border: 1px solid var(--tt-border);
  color: var(--tt-text-dim);
  transition: border-color .15s ease, color .15s ease;
}
.tt-btn-ghost:hover {
  border-color: var(--tt-teal);
  color: var(--tt-teal-soft);
}

.tt-badge-pill {
  border: 1px solid var(--tt-border);
  color: var(--tt-teal);
  letter-spacing: .08em;
}

.tt-nav-link {
  color: var(--tt-text-dim);
  transition: color .15s ease;
}
.tt-nav-link:hover, .tt-nav-link.active {
  color: var(--tt-teal);
}

.tt-card {
  background: var(--tt-panel);
  border: 1px solid var(--tt-border);
  transition: border-color .2s ease, transform .2s ease;
}
.tt-card:hover {
  border-color: rgba(45, 212, 191, 0.5);
  transform: translateY(-3px);
}

.tt-network-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(45, 212, 191, 0.35) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 60% at 75% 30%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 75% 30%, black 10%, transparent 70%);
  pointer-events: none;
}

.tt-skyline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  background-repeat: repeat-x;
  background-position: bottom;
  opacity: .5;
  pointer-events: none;
}

.tt-countdown-box {
  background: var(--tt-panel);
  border: 1px solid var(--tt-border);
  /* min-width:0 (not a fixed px floor) is what lets a grid cell shrink
     below its content's natural width — the actual mechanism that
     keeps all 4 boxes on one row down to 320px, see .tt-countdown-grid
     below for the rest of the fix. */
  min-width: 0;
}

.tt-timeline-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--tt-teal), var(--tt-green));
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.15);
}

.tt-accordion-item[open] summary .tt-chevron {
  transform: rotate(180deg);
}

::selection {
  background: rgba(45, 212, 191, 0.35);
}

/* ===== Hero redesign additions (banner-matching) ===== */

.tt-org-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
@media (min-width: 640px) {
  .tt-org-line { gap: 14px; margin-bottom: 34px; }
}
.tt-org-badge {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1.5px solid var(--tt-teal);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: radial-gradient(circle at 30% 30%, rgba(45,212,191,.25), transparent 70%);
}
.tt-org-text {
  font-size: 12px;
  line-height: 1.4;
  color: #8fa9a5;
  max-width: 320px;
}

.tt-tagline {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #cfe9e4;
  margin-bottom: 16px;
}
@media (min-width: 640px) {
  .tt-tagline { font-size: 13px; letter-spacing: .12em; margin-bottom: 40px; }
}
.tt-tagline strong {
  color: var(--tt-teal);
  font-weight: 700;
}

.tt-globe-wrap {
  position: absolute;
  top: -10%;
  right: -12%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  pointer-events: none;
  overflow: hidden;
  opacity: .85;
}
.tt-globe-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: radial-gradient(rgba(45, 212, 191, 0.55) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 55%, transparent 75%);
  mask-image: radial-gradient(circle at 50% 50%, black 55%, transparent 75%);
}
.tt-globe-wrap::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px solid rgba(45, 212, 191, 0.25);
  box-shadow: 0 0 120px 40px rgba(34, 197, 94, 0.08) inset;
}

.tt-strip {
  border-top: 1px solid var(--tt-border);
  padding-top: 18px;
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 420px) {
  .tt-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 640px) {
  .tt-strip { padding-top: 28px; margin-top: 40px; gap: 22px; }
}
@media (min-width: 768px) {
  .tt-strip { grid-template-columns: repeat(5, 1fr); }
}
.tt-strip-item span {
  word-break: break-word;
}
.tt-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.tt-strip-item svg {
  width: 26px; height: 26px;
  stroke: var(--tt-teal);
}
.tt-strip-item span {
  font-size: 10px;
  letter-spacing: .1em;
  color: #7fa39c;
  text-transform: uppercase;
}

.tt-skyline-svg {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 70px;
  opacity: .55;
  pointer-events: none;
}
@media (min-width: 768px) {
  .tt-skyline-svg { height: 90px; }
}
.tt-glow-line {
  position: absolute;
  left: 0; right: 0; bottom: 78px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tt-teal) 30%, var(--tt-green) 55%, transparent 90%);
  filter: blur(0.5px);
  box-shadow: 0 0 24px 4px rgba(45, 212, 191, 0.35);
  pointer-events: none;
}

/* ===== Locale select with flags ===== */
.tt-locale-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--tt-panel);
  border: 1px solid var(--tt-border);
  color: var(--tt-text-dim);
  border-radius: 999px;
  padding: 7px 30px 7px 14px;
  font-size: 13px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%232dd4bf' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color .15s ease;
}
.tt-locale-select:hover,
.tt-locale-select:focus {
  border-color: var(--tt-teal);
  outline: none;
}
.tt-locale-select option {
  background: var(--tt-bg-soft);
  color: var(--tt-text);
}

/* ===== Admin: locale tabs + rich editor ===== */
.tt-locale-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--tt-border);
}
.tt-locale-tab {
  padding: 8px 4px 12px;
  font-size: 13px;
  letter-spacing: .06em;
  color: #5c7f79;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: none;
  border-top: none; border-left: none; border-right: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tt-locale-tab.is-active {
  color: var(--tt-teal);
  border-bottom-color: var(--tt-teal);
}
.tt-quill-toolbar {
  border-bottom: 1px solid var(--tt-border) !important;
  background: #0a1614;
}
.tt-quill-toolbar .ql-stroke { stroke: #9fd9d1; }
.tt-quill-toolbar .ql-fill { fill: #9fd9d1; }
.tt-quill-toolbar .ql-picker-label { color: #9fd9d1; }
.tt-html-toggle {
  border: 1px solid var(--tt-border);
  color: #9fd9d1;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 6px;
  margin-left: 6px;
}
.tt-rich-editor .ql-editor {
  min-height: 180px;
  color: #e6f4f1;
  font-size: 14px;
}
.tt-rich-editor .ql-editor.ql-blank::before {
  color: #5c7f79;
}

/* ===== Public: rendered rich-text content (from admin rich editor) =====
   Unify Rich Content Editing task, section 8: `.tt-rich-content` is the
   one shared class every sanitized admin-authored field renders
   through (see <x-public.rich-content>/App\Support\HtmlContentSanitizer).
   `.tt-prose` (page.blade.php's original, pre-unification name) is kept
   as an alias on every rule below — same styling, not a second system —
   so nothing that already depended on it breaks. */
.tt-prose h1, .tt-prose h2, .tt-prose h3, .tt-prose h4,
.tt-rich-content h1, .tt-rich-content h2, .tt-rich-content h3, .tt-rich-content h4 {
  color: #e6f4f1;
  font-weight: 700;
  margin: 1.4em 0 .6em;
  line-height: 1.3;
}
.tt-prose h2, .tt-rich-content h2 { font-size: 1.5em; }
.tt-prose h3, .tt-rich-content h3 { font-size: 1.2em; }
.tt-prose h4, .tt-rich-content h4 { font-size: 1.05em; }
.tt-prose p, .tt-rich-content p { margin: 0 0 1em; }
.tt-prose ul, .tt-prose ol,
.tt-rich-content ul, .tt-rich-content ol {
  margin: 0 0 1em 1.4em;
  max-width: 100%;
}
.tt-prose ul, .tt-rich-content ul { list-style: disc; }
.tt-prose ol, .tt-rich-content ol { list-style: decimal; }
.tt-prose li, .tt-rich-content li { margin-bottom: .3em; }
.tt-prose strong, .tt-prose b, .tt-rich-content strong, .tt-rich-content b { font-weight: 700; color: #e6f4f1; }
.tt-prose a, .tt-rich-content a {
  color: var(--tt-teal);
  text-decoration: underline;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.tt-prose blockquote, .tt-rich-content blockquote {
  border-left: 3px solid var(--tt-teal);
  padding-left: 14px;
  color: #7fa39c;
  margin: 0 0 1em;
}
.tt-prose hr, .tt-rich-content hr {
  border: none;
  border-top: 1px solid var(--tt-border);
  margin: 1.6em 0;
}
/* Defensive only — the editor's toolbar has no table button, but HTML
   mode could still paste one in; never let it blow out the layout
   width (task section 9). */
.tt-prose table, .tt-rich-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.tt-prose .ql-indent-1, .tt-rich-content .ql-indent-1 { padding-left: 2em; }
.tt-prose .ql-indent-2, .tt-rich-content .ql-indent-2 { padding-left: 4em; }

/* Public colour-system pass: navy/cyan tokens instead of the old
   hardcoded hex, matching every other body.tt-public component. */
body.tt-public .tt-rich-content h1,
body.tt-public .tt-rich-content h2,
body.tt-public .tt-rich-content h3,
body.tt-public .tt-rich-content h4,
body.tt-public .tt-rich-content strong,
body.tt-public .tt-rich-content b {
  color: var(--tt-public-text, #e6f4f1);
}
body.tt-public .tt-rich-content a { color: var(--tt-public-cyan, var(--tt-teal)); }
body.tt-public .tt-rich-content blockquote {
  border-left-color: var(--tt-public-teal, var(--tt-teal));
  color: var(--tt-public-muted, #7fa39c);
}
body.tt-public .tt-rich-content hr { border-top-color: var(--tt-public-border, var(--tt-border)); }

/* Featured Speakers premium cards (Phase 2 section 5) */
.tt-speaker-card {
  background: var(--tt-panel);
  border: 1px solid var(--tt-border);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.tt-speaker-card:hover {
  border-color: rgba(45, 212, 191, 0.55);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -12px rgba(45, 212, 191, 0.25);
}

/* Partners task (card rework): the two logical areas of a partner
   card. Logo-area is flex-centered so any aspect ratio (square,
   horizontal wordmark, vertical mark) sits centered within the same
   tier-controlled height (set per-tier via PartnerCategory::logoAreaClass(),
   applied alongside this class in the Blade markup) without ever being
   stretched — object-fit:contain on the <img> itself handles that.
   Name row width matches the card so its 2-line clamp centers correctly. */
.partner-logo-area {
  display: flex;
  align-items: center;
  justify-content: center;
}
.partner-name {
  width: 100%;
}
/* Brandbook Compliance task: the partner card itself is now a dark
   brand surface (body.tt-public .tt-card, below) — the logo-area gets
   a light background ONLY when it actually holds an uploaded logo
   image, so a real company logo (often designed assuming a white
   background, sometimes with transparency) always renders correctly.
   The name-only fallback (no logo yet) has nothing to protect, so it
   stays on the dark card like the rest of the site. */
body.tt-public .partner-logo-area:has(img) {
  background: var(--tt-public-light-surface, #ffffff);
  border-radius: 10px;
}
.tt-speaker-photo {
  background: #0a1614;
}
.tt-speaker-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 11, 13, 0.85) 0%, transparent 45%);
  pointer-events: none;
}
.tt-prose .ql-indent-3, .tt-rich-content .ql-indent-3 { padding-left: 6em; }

/* Admin Dashboard redesign — small, scoped additions only. */
.tt-kpi-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(45, 212, 191, 0.08);
  border: 1px solid var(--tt-border);
  color: var(--tt-teal);
  flex-shrink: 0;
}
.tt-progress-track {
  height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.tt-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--tt-teal) 0%, var(--tt-green) 100%);
  transition: width .4s ease;
}
.tt-progress-track-thin { height: 6px; }
.tt-readiness-dot {
  width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0;
}
.tt-dash-card {
  background: var(--tt-panel);
  border: 1px solid var(--tt-border);
  border-radius: 16px;
}
.tt-status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid currentColor;
}

/* ===== Hero — afisha-composition pass (Final Polish task) =====
   The building photo is a full-bleed scene layer, not a boxed card:
   no border-radius/overflow-hidden frame, object-fit:contain so the
   whole facade + dome stay visible, directional edge-fade overlays
   instead of a mask "window", and a decorative arcs/trails SVG layer
   sitting behind it. */
/* Hero height is controlled here, never by the (now purely decorative,
   absolutely-positioned) building photo — see .tt-hero-building below.
   Mobile/tablet get an explicit clamp/fixed floor precisely so the
   photo can be taken out of normal flow without the section collapsing
   to whatever height the text alone needs. */
.tt-hero-section {
  min-height: clamp(680px, 82vh, 780px);
}
/* svh (small viewport height) excludes mobile browser chrome that can
   show/hide on scroll — safer than vh for "does the first screen show
   the CTA" on phones. Declared as a progressive-enhancement override,
   never the only rule, since older engines don't support it. */
@supports (min-height: 1svh) {
  .tt-hero-section { min-height: clamp(680px, 82svh, 780px); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .tt-hero-section { min-height: 700px; }
}
@media (min-width: 1024px) {
  /* Compact official event-banner proportions (brief section 16) —
     trimmed down from an earlier, taller 820px pass. */
  .tt-hero-section { min-height: 740px; }
}

.tt-hero-inner {
  z-index: 10;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 640px) {
  .tt-hero-inner { padding-top: 3rem; padding-bottom: 3rem; }
}
@media (min-width: 1024px) {
  .tt-hero-inner {
    min-height: 740px;
    display: flex;
    align-items: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.tt-hero-content {
  position: relative;
  z-index: 10;
}
@media (min-width: 1024px) {
  .tt-hero-content { max-width: 600px; }
}

.tt-hero-h1 {
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 0.92;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  font-size: clamp(2.75rem, 9vw, 5rem);
}
@media (min-width: 1024px) {
  .tt-hero-h1 { font-size: clamp(4.5rem, 6vw, 6.5rem); }
}

.tt-hero-subh1 {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.75rem;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  max-width: 34ch;
}

.tt-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 14px 0 18px;
}
.tt-hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--tt-hero-text);
  background: rgba(45, 212, 191, 0.08);
  border: 1px solid var(--tt-border);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}

.tt-hero-desc {
  max-width: 46ch;
  color: var(--tt-hero-muted);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}
@media (min-width: 640px) {
  .tt-hero-desc { font-size: 16px; }
}

.tt-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
@media (min-width: 1024px) {
  .tt-hero-cta-row { flex-wrap: nowrap; }
}
.tt-hero-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 10px 15px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
}
/* Mobile keeps comfortable tap targets (desktop's compact 3-in-a-row
   sizing is a desktop-only constraint) — the row already wraps
   (flex-wrap on .tt-hero-cta-row, no nowrap below 1024px), so this
   naturally lands as 2+1 or a single column depending on label width. */
@media (max-width: 767px) {
  .tt-hero-btn {
    font-size: 13px;
    padding: 13px 18px;
  }
}

/* SIMPLIFIED EDGE-FADE FIX. The previous pass used one 5-layer
   compound mask (`mask-composite: intersect`) per element. Dropped —
   too easy for the composite mode to be ignored by some engine and
   silently collapse to "only the last layer counts", which is exactly
   what a still-visible rectangular edge looks like. Replaced with the
   simplest thing that is GUARANTEED to combine correctly everywhere,
   no compositing keyword at all: two elements, two single-layer masks,
   multiplied for free by normal nested rendering —
     .tt-hero-building  (parent) → ONE linear-gradient, LEFT/RIGHT only
     .tt-hero-building-img (child) → ONE linear-gradient, TOP/BOTTOM only
   A pixel only stays visible where BOTH agree, because the child is
   masked first and the parent's mask is then applied to that already-
   masked result — this is how nested elements always render, no
   `mask-composite` needed, so there is nothing for any engine to get
   wrong. Corners fade faster than either edge alone (both masks are
   partial there), which is what removes the "rectangle" look — no
   separate radial "keep" layer required either.

   Four tiers, same two-mask structure throughout, only the numbers
   change: MOBILE (default, <768px) → TABLET (768-1023px) → DESKTOP
   (1024-1919px) → WIDE DESKTOP (1920px+, position/size frozen in px).
   No border/radius/shadow/background-color anywhere — never a visible
   panel. Always position:absolute, out of document flow, never
   affecting the Hero's own height. */
.tt-hero-building {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  right: -14%;
  bottom: -6%;
  left: auto;
  top: auto;
  width: 96%;
  height: auto;
  /* LEFT strong (fully gone by 34% of box width) / RIGHT long (starts
     fading at 52%, gone by 100%) — mobile's strongest fade set. */
  mask-image: linear-gradient(to right, transparent 0%, black 34%, black 52%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 34%, black 52%, transparent 100%);
}
.tt-hero-building-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: saturate(1.05) contrast(1.12) brightness(1);
  /* TOP/BOTTOM only — LEFT/RIGHT is handled by the parent above. */
  mask-image: linear-gradient(to bottom, transparent 0%, black 24%, black 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 24%, black 78%, transparent 100%);
}
.tt-hero-building-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Colour/tone integration only — the mask above (not this) is what
       makes the edges actually disappear now. This just ties the
       remaining visible photo into the navy/teal palette. */
    linear-gradient(125deg, var(--tt-hero-bg) 0%, var(--tt-hero-bg) 20%, rgba(7, 16, 34, 0.6) 40%, transparent 64%),
    linear-gradient(to bottom, transparent 0%, rgba(4, 11, 22, 0.4) 55%, rgba(4, 11, 22, 0.55) 100%),
    radial-gradient(ellipse 90% 70% at 66% 90%, rgba(45, 212, 191, 0.2) 0%, rgba(7, 16, 34, 0.5) 55%, transparent 85%);
}

/* TABLET (768-1023px): intermediate fade strength, building whole
   (object-fit:contain) rather than mobile's more aggressive crop. */
@media (min-width: 768px) and (max-width: 1023px) {
  .tt-hero-building {
    right: -8%;
    bottom: 0;
    top: auto;
    width: clamp(440px, 60vw, 620px);
    height: 90%;
    /* LEFT gone by 30%, RIGHT starts at 62%, gone by 100%. */
    mask-image: linear-gradient(to right, transparent 0%, black 30%, black 62%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%, black 62%, transparent 100%);
  }
  .tt-hero-building-img {
    height: 100%;
    object-fit: contain;
    object-position: right top;
    filter: saturate(1.06) contrast(1.15) brightness(0.95);
    mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 82%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 82%, transparent 100%);
  }
  .tt-hero-building-overlay {
    background:
      linear-gradient(to right, var(--tt-hero-bg) 0%, rgba(7, 16, 34, 0.4) 20%, transparent 42%),
      radial-gradient(ellipse 75% 46% at 60% 100%, rgba(45, 212, 191, 0.28) 0%, rgba(7, 16, 34, 0.5) 55%, transparent 85%),
      radial-gradient(ellipse 140% 120% at 58% 34%, transparent 55%, rgba(7, 16, 34, 0.16) 100%);
  }
}

/* DESKTOP (1024-1919px): the large visual anchor. Positioned from
   `left` as a PERCENT of the Hero section (full viewport width, no
   capped "stage") so the dome tracks roughly the same relative spot
   through this whole range — worked out from the actual photo's own
   geometry (dome sits ~50% across, ~13% down the source frame) and
   this box's aspect ratio: at left:52% + this width clamp, worked-out
   arithmetic (not a browser measurement — see the final report) puts
   the dome centre at approximately:
     1024px → ~83% of Hero width (the min-width floor on the box
              dominates at this narrow an edge — the one point outside
              the target band)
     1280px → ~77%
     1366px → ~75%
     1440px → ~75%
     1600px → ~75%
     1823px → ~75%
   i.e. inside the requested 72-78% band across the actual
   1280-1920 desktop range. top+bottom (not height:100%) raise the
   building so the dome sits in the upper third rather than hugging
   the floor. */
@media (min-width: 1024px) {
  .tt-hero-building {
    position: absolute;
    top: 6%;
    bottom: 9%;
    left: 52%;
    right: auto;
    width: clamp(640px, 46vw, 880px);
    height: auto;
    /* LEFT strong: gone by 32% of box width (text stays clean).
       RIGHT long: starts fading at 58%, fully gone by 100% — a real
       42%-of-width dissolve on the image's own alpha, replacing the
       old thin overlay tint that left the JPEG's edge visible. */
    mask-image: linear-gradient(to right, transparent 0%, black 32%, black 58%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 32%, black 58%, transparent 100%);
  }
  .tt-hero-building-img {
    height: 100%;
    object-fit: contain;
    object-position: right top;
    /* Cinematic treatment: more contrast than a plain daylight photo,
       dome kept saturated, without losing facade detail. */
    filter: saturate(1.06) contrast(1.16) brightness(0.95);
    /* TOP soft (gone by 18%), BOTTOM medium (gone by 84% down, i.e.
       fades over the last 16%) — LEFT/RIGHT is the parent's job now. */
    mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 84%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 84%, transparent 100%);
  }
  .tt-hero-building-overlay {
    background:
      /* Colour integration only — edges are handled by the mask now. */
      linear-gradient(to right, var(--tt-hero-bg) 0%, rgba(7, 16, 34, 0.35) 16%, transparent 34%),
      radial-gradient(ellipse 72% 44% at 60% 100%, rgba(45, 212, 191, 0.26) 0%, rgba(7, 16, 34, 0.42) 55%, transparent 85%),
      radial-gradient(ellipse 135% 115% at 60% 34%, transparent 58%, rgba(7, 16, 34, 0.14) 100%);
  }
}

/* WIDE DESKTOP (1920px+): position AND size both freeze in absolute
   pixels at their 1920px value (52% × 1920 = 998px; the width clamp is
   already pinned at its 880px ceiling by this width) — not a new
   system, just turning the same left/width rule from percent/vw into
   fixed px once the "normal desktop" range ends, so the building
   provably cannot drift a single pixel further right no matter how
   wide the monitor gets. Everything past 998+880=1878px of viewport
   width is plain Hero background — at 2560px that is nearly 700px of
   open navy/digital space to the right of the building, and the dome
   sits at the same fixed pixel position at 2560 as it does at 1920
   (its *percentage* of Hero width drops from the ~76% at 1920 to
   roughly the mid-50s at 2560 — a deliberate trade the brief itself
   calls for: the building keeps the same visual weight rather than
   the composition trying to keep chasing a fixed percentage forever). */
@media (min-width: 1920px) {
  .tt-hero-building {
    left: 998px;
    width: 880px;
  }
}

/* Single scene layer, entirely above the photo (z-index 1) and its
   overlay/haze (painted as part of the same building block). Internal
   SVG group order in hero-scene.blade.php handles the finer hex →
   arcs → nodes → trails stacking within this one layer. */
.tt-hero-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* The dot-grid network background is shared with other sections of the
   page (Expo/CTA panels); only inside the Hero does it need to extend
   across the whole scene — including over the building photo — instead
   of staying confined to a small top-right corner. Scoped to
   .tt-hero-section so no other use of .tt-network-bg is affected. */
.tt-hero-section .tt-network-bg {
  z-index: 3;
  mask-image: radial-gradient(ellipse 115% 100% at 55% 35%, black 20%, transparent 96%);
  -webkit-mask-image: radial-gradient(ellipse 115% 100% at 55% 35%, black 20%, transparent 96%);
}

/* Scene-density control per breakpoint — one shared SVG, no
   duplication (see hero-scene.blade.php for what each group is).
   Desktop: everything, full opacity. Tablet: hex pattern dropped,
   secondary trails/nodes toned down a notch. Mobile: only the
   .tt-trail-core allow-list inside the two trail containers survives
   (3 main + 2 secondary lines), nodes are dimmed rather than removed,
   connectors and the hex pattern are dropped entirely — arcs around
   the dome stay everywhere, per spec. */
@media (min-width: 768px) and (max-width: 1023px) {
  .tt-hero-scene .tt-scene-gold { display: none; }
  .tt-hero-scene .tt-scene-trails-secondary { opacity: 0.7; }
  .tt-hero-scene .tt-scene-nodes { opacity: 0.85; }
}
@media (max-width: 767px) {
  .tt-hero-scene .tt-scene-gold,
  .tt-hero-scene .tt-scene-network,
  .tt-hero-scene .tt-scene-trails-secondary {
    display: none;
  }
  .tt-hero-scene .tt-scene-nodes {
    opacity: 0.5;
  }
  /* Keep just the dome halo + one ring ("1-2 dome arcs"); the gold
     ring/partial-arc and the wrap-around arcs are dropped. */
  .tt-hero-scene .tt-scene-arcs {
    opacity: 0.85;
  }
  .tt-hero-scene .tt-scene-arcs > :not(.tt-arc-core) {
    display: none;
  }
  /* Trail containers: only the .tt-trail-core allow-list survives —
     2 main continuous trails + 1 gold accent, per spec. */
  .tt-hero-scene .tt-scene-trails-main > g:not(.tt-trail-core) {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .tt-hero-trail-flow {
    stroke-dasharray: 16 12;
    animation: tt-trail-flow 7s linear infinite;
  }
  .tt-hero-glow-pulse {
    animation: tt-glow-pulse 5s ease-in-out infinite;
    transform-origin: center;
  }
}
@keyframes tt-trail-flow {
  to { stroke-dashoffset: -280; }
}
@keyframes tt-glow-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

.tt-countdown-box {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(13, 28, 26, 0.55);
}

/* Countdown — mandatory 4-in-one-row from 320px up. A CSS grid with 4
   equal, shrinkable columns (not the previous flex-wrap, which could
   fall back to 3+1) is the actual mechanism: grid-template-columns
   guarantees exactly 4 columns regardless of width, and min-width:0 on
   the boxes (above) lets each cell shrink instead of overflowing.
   Gap/padding/font-size scale down via clamp() so the row keeps
   fitting without ever wrapping or causing horizontal scroll. */
.tt-countdown {
  width: 100%;
}
.tt-countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 2.2vw, 12px);
  width: 100%;
  max-width: 420px;
}
@media (min-width: 640px) {
  .tt-countdown-grid { max-width: 460px; }
}
.tt-countdown-box {
  padding: clamp(8px, 2.8vw, 16px) clamp(4px, 1.6vw, 12px);
}
.tt-countdown-num {
  font-weight: 800;
  font-size: clamp(1.05rem, 5.2vw, 1.875rem);
  line-height: 1.15;
}
.tt-countdown-label {
  font-size: clamp(0.55rem, 2.1vw, 0.75rem);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* About's 5 feature highlights (Global/Innovation/Technology/
   Collaboration/Growth) — a light icon-over-label row, deliberately
   NOT built from .tt-card: no panel background, no border, no rounded
   box around each item. */
.tt-about-icons > .tt-about-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 4px 12px;
}
.tt-about-icon-item svg {
  transition: filter 0.2s ease;
}
.tt-about-icon-item span {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tt-public-muted, #7fa39c);
}
.tt-about-icon-item:hover svg {
  filter: drop-shadow(0 0 6px rgba(56, 225, 208, 0.55));
}
/* Desktop: thin hairline separators between columns instead of boxes. */
@media (min-width: 1024px) {
  .tt-about-icons > .tt-about-icon-item:not(:first-child) {
    border-left: 1px solid var(--tt-public-border, var(--tt-border));
  }
}
/* Mobile 2+2+1: the 5th (last) item spans both columns and its content
   is centered within that full-width row, instead of sitting stuck in
   the left column. */
@media (max-width: 767px) {
  .tt-about-icons > .tt-about-icon-item:last-child {
    grid-column: 1 / -1;
  }
}

/* =====================================================================
   PUBLIC DESIGN SYSTEM — TAJ-TECH 2026 brand identity (--tt-dark/
   --tt-deep-green/--tt-green/--tt-mid-green/--tt-lime/--tt-gray/
   --tt-white/--tt-black, defined earlier in this file by the Branding
   task) applied to the public frontend as a DARK brand environment,
   continuing the Hero/Header/Footer poster identity rather than a
   light "dashboard" pass (Brandbook Compliance task — supersedes the
   earlier light-theme redesign pass; values below are replaced in
   place, not layered under it). Everything here stays scoped to
   `body.tt-public` (added only on the public layout's <body> tag) so
   /admin is untouched. Light surfaces are now the exception, reserved
   only where functionally necessary — partner logo-area (its own rules
   elsewhere), form inputs (near the end of this block), images. Hero
   keeps its own separate --tt-hero-* tokens throughout (untouched by
   this task), and the Registration CTA panel stays the most saturated
   brand-gradient zone after Hero — see .tt-cta-panel below.

   Header Normalization task, section 3: --agency-dark/--agency-green
   are now the site's primary institutional colours — --tt-public-link/
   --accent/--border below all point to agency-green instead of lime,
   so every ordinary interactive element (nav-link hover, card border,
   focus ring, ghost-button) shares ONE consistent accent instead of
   several competing green shades. --tt-lime keeps exactly one job on
   the public site: .tt-badge-pill (a "small label" — the task's own
   example of where lime still belongs) — nowhere else in this block. */
:root {
  --tt-public-bg: #0a1e1a;
  --tt-public-bg-alt: #102822;
  --tt-public-bg-deep: var(--agency-dark, #01505A);
  --tt-public-panel: #11302a;
  --tt-public-panel-soft: rgba(255, 255, 255, 0.04);
  --tt-public-border: rgba(94, 182, 129, 0.18);
  --tt-public-border-strong: rgba(94, 182, 129, 0.38);
  --tt-public-text: #FFFFFF;
  --tt-public-muted: var(--tt-brand-gray, #D3D3D3);
  --tt-public-link: var(--agency-green, #5EB681);
  --tt-public-accent: var(--agency-green, #5EB681);
  /* The functionally-light-surface exception (form inputs, etc.) —
     never a whole-section fill. */
  --tt-public-light-surface: #FFFFFF;
  --tt-public-light-text: #142420;
}

body.tt-public {
  /* Retunes every var(--tt-teal)/var(--tt-green)/var(--tt-border) usage
     across the many existing public templates (border-[--tt-teal],
     text-[--tt-teal], hover:border-[--tt-teal], .tt-timeline-dot, the
     shared .ql-* rules, ...) to the agency accent pair in one place via
     CSS custom-property cascade, instead of hand-editing every one of
     the ~20 templates that reference them by variable name. Agency
     green is the one consistent interactive accent (not lime — see the
     block comment above for why); Hero is unaffected, it uses its own
     separate --tt-hero-* tokens throughout, never the generic ones. */
  --tt-teal: var(--agency-green, #5EB681);
  --tt-green: var(--agency-dark, #01505A);
  --tt-border: var(--tt-public-border);
  background-color: var(--tt-public-bg);
  background-image:
    radial-gradient(ellipse 900px 500px at 85% -8%, rgba(94, 182, 129, 0.07), transparent 60%),
    radial-gradient(ellipse 700px 500px at -8% 45%, rgba(1, 80, 90, 0.18), transparent 60%);
  color: var(--tt-public-text);
}
body.tt-public ::selection { background: rgba(94, 182, 129, 0.35); }
body.tt-public .tt-btn-primary {
  /* Header Normalization task, section 3/11: rebuilt as the 2-colour
     agency pair (was the old 3-stop tt-dark/tt-brand-green/lime mix,
     which put a large lime surface across a third of every primary
     button) — same button used site-wide (Register/Login/Hero CTA/
     Registration CTA link), so this one change is what actually stops
     lime from reading as a "large surface" colour across the site. */
  background: linear-gradient(90deg, #01505A 0%, #5EB681 100%);
  color: #ffffff;
}
body.tt-public .tt-btn-primary:hover {
  box-shadow: 0 8px 24px rgba(94, 182, 129, 0.35);
}

/* Visible keyboard-focus ring. :focus-visible (not :focus) keeps this
   from showing on a plain mouse click. Scoped to body.tt-public only —
   /admin's own focus handling is untouched. */
body.tt-public a:focus-visible,
body.tt-public button:focus-visible,
body.tt-public input:focus-visible,
body.tt-public textarea:focus-visible,
body.tt-public select:focus-visible,
body.tt-public summary:focus-visible,
body.tt-public [tabindex]:focus-visible {
  outline: 2px solid var(--agency-green, #5EB681);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Cards/panels: dark elevated surface, thin agency-green-tinted
   border, no heavy shadow — reused as-is across About/Key Topics/
   Speakers/Programme/Expo/B2B/Partners/Venue/FAQ (one card system, not
   a redesign per module). */
body.tt-public .tt-card {
  background: var(--tt-public-panel);
  border-color: var(--tt-public-border);
}
body.tt-public .tt-card:hover {
  border-color: var(--agency-green, #5EB681);
  box-shadow: 0 10px 24px -16px rgba(94, 182, 129, 0.35);
}
body.tt-public .tt-panel {
  background: var(--tt-public-panel);
  border-color: var(--tt-public-border);
}
/* .tt-badge-pill is lime's one remaining job on the public site
   (Header Normalization task, section 3) — a small label, exactly the
   category the brief names as still appropriate for lime — so it does
   NOT inherit --tt-public-link (agency-green) like every other
   interactive element below. */
body.tt-public .tt-badge-pill {
  border-color: rgba(135, 176, 31, 0.38);
  color: var(--tt-lime, #87B01F);
  background: rgba(135, 176, 31, 0.1);
}
body.tt-public .tt-btn-ghost {
  border-color: var(--agency-green, #5EB681);
  color: var(--tt-public-link);
}
body.tt-public .tt-btn-ghost:hover {
  border-color: var(--agency-green, #5EB681);
  color: #ffffff;
  background: rgba(94, 182, 129, 0.14);
}
body.tt-public .tt-nav-link { color: var(--tt-public-muted); }
body.tt-public .tt-nav-link:hover,
body.tt-public .tt-nav-link.active { color: var(--tt-public-link); }

/* Speaker cards: dark elevated surface, thin accent border — photo
   stays the dominant element, green is never a background fill. */
body.tt-public .tt-speaker-card {
  background: var(--tt-public-panel);
  border-color: var(--tt-public-border);
}
body.tt-public .tt-speaker-card:hover {
  border-color: var(--agency-green, #5EB681);
  box-shadow: 0 14px 30px -18px rgba(94, 182, 129, 0.4);
}
body.tt-public .tt-speaker-photo { background: var(--tt-public-bg-alt); }
body.tt-public .tt-speaker-photo-overlay {
  background: linear-gradient(to top, rgba(20, 36, 32, 0.82) 0%, transparent 48%);
}

/* Countdown box / organizer badge: Hero-only, already brand green/lime
   toned — untouched by this pass. */
body.tt-public .tt-countdown-box {
  background: rgba(21, 86, 83, 0.45);
  border-color: rgba(135, 176, 31, 0.3);
}
body.tt-public .tt-org-badge {
  border-color: var(--tt-lime, #87B01F);
  background: radial-gradient(circle at 30% 30%, rgba(135, 176, 31, 0.28), transparent 70%);
}

/* Locale selector — lives only inside <header> on the public site
   (desktop nav row + mobile dropdown), which is a dark brand-green
   surface per the TAJ-TECH 2026 poster identity. Scoped to header so
   nothing outside it is affected. */
body.tt-public > header .tt-locale-select {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
body.tt-public > header .tt-locale-select:hover,
body.tt-public > header .tt-locale-select:focus { border-color: var(--agency-green, #5EB681); }
body.tt-public > header .tt-locale-select option {
  background: #0e332f;
  color: #ffffff;
}
body.tt-public > header .tt-locale-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
body.tt-public > header .tt-locale-btn:hover,
body.tt-public > header .tt-locale-btn:focus { border-color: var(--agency-green, #5EB681); }
body.tt-public > header .tt-locale-dropdown {
  background: #0e332f;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.45);
}

/* Header Normalization task, section 4: Header and Footer now share
   ONE base colour — agency-dark (#01505A), not the old tt-dark
   (#155653) that made Footer read as "a separate random teal" from
   the rest of the site's new agency-colour identity. Header stays
   translucent (opacity, not a different colour) so the sticky blur
   still reads correctly over content scrolling underneath; Footer
   stays solid, since nothing scrolls behind it. */
body.tt-public > header {
  background-color: rgba(1, 80, 90, 0.95) !important;
  border-bottom-color: rgba(94, 182, 129, 0.3) !important;
}
body.tt-public > header .border-white\/5 { border-color: rgba(255, 255, 255, 0.12) !important; }
/* Navigation: white text, agency-green on hover — high contrast
   against the dark header (overrides the site-wide light-surface
   .tt-nav-link rule for this one region only). */
body.tt-public > header .tt-nav-link { color: #ffffff; }
body.tt-public > header .tt-nav-link:hover,
body.tt-public > header .tt-nav-link.active { color: var(--agency-green, #5EB681); }
/* Hamburger icon + any other .text-[#9fd9d1]-styled element inside
   Header (the class was designed for a dark surface originally; the
   site-wide light-surface override would otherwise darken it here). */
body.tt-public > header .text-\[\#9fd9d1\] { color: #ffffff !important; }

body.tt-public > footer {
  background: var(--agency-dark, #01505A) !important;
  border-top-color: rgba(94, 182, 129, 0.35) !important;
  color: #eaf3ee;
}
body.tt-public > footer .tt-nav-link { color: #bcd6c9; }
body.tt-public > footer .tt-nav-link:hover { color: #ffffff; }
body.tt-public > footer .text-\[\#9fd9d1\],
body.tt-public > footer .text-\[\#5c7f79\] { color: #bcd6c9 !important; }
body.tt-public > footer .text-\[\#4f716b\] { color: #8fac9f !important; }
body.tt-public > footer .border-white\/5 { border-color: rgba(255, 255, 255, 0.14) !important; }

/* Header / Footer logo sizing: container-controlled, never the
   uploaded raster's native pixel size. Header correction task: mobile
   32-36px / tablet 38-42px / desktop 42-46px. Footer unchanged
   (48-64px desktop / 42-56px tablet / 36-48px mobile, its own
   max-width cap) — more prominent than Header, but Header must not
   look like a banner either. width:auto + object-fit:contain — height
   is the only controlled dimension, so aspect ratio can never distort. */
/* <x-brand-logo> (Branding System, unmodified) sets its own inline
   style="width:auto;height:auto;max-width:100%;object-fit:contain" so
   the raster is never distorted by default. Inline style outranks any
   external stylesheet, so the height these classes actually need to
   control must carry !important here — that's the only way to size the
   slot from outside without touching the shared component. */
/* Logo/Chrome fix task, section 3: root cause of the oversized Header
   logo was a missing max-width ceiling (see the SvgSanitizer fix in
   App\Support\SvgSanitizer for the actual invisible-in-Chrome +
   grey-background-layer causes — this block is sizing only). Real
   logo_header_white is 1736.75×181.11 (9.59:1, an extremely wide
   horizontal wordmark). max-width + max-height + width/height:auto +
   object-fit:contain — the browser's normal replaced-element sizing
   shrinks whichever dimension the aspect ratio would otherwise blow
   out, safe for any future logo. */
.tt-header-logo {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 135px !important;
  max-height: 28px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
@media (min-width: 768px) {
  .tt-header-logo { max-width: 160px !important; max-height: 32px !important; }
}
@media (min-width: 1024px) {
  .tt-header-logo { max-width: 180px !important; max-height: 34px !important; }
}

/* Logo/Chrome fix task, section 4: Footer's own uploaded logo is
   1087.09×400.52 (2.71:1) — one flat size at every breakpoint per this
   task's own spec (no tiers given), not reused from Header. Wrapper
   stays transparent, no padding/border of its own (confirmed in the
   Blade markup — sizing-only fix). */
.tt-footer-logo {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 155px !important;
  max-height: 46px !important;
  object-fit: contain !important;
}

/* Section colour rotation (Brandbook Compliance task): three dark
   tones create visual hierarchy without every section becoming the
   same flat rectangle — "a" is the deepest near-black-green base, "b"
   a half-step lighter, "c" adds a subtle lime glow (Expo/CTA-adjacent
   sections). The fully-saturated brand green (--tt-dark) stays
   reserved for Header/Footer/CTA, which keeps their own visual weight
   distinct from ordinary content sections. */
body.tt-public .tt-section-a { background: var(--tt-public-bg); }
body.tt-public .tt-section-b { background: var(--tt-public-bg-alt); }
body.tt-public .tt-section-c {
  background:
    radial-gradient(ellipse 900px 500px at 80% 0%, rgba(135, 176, 31, 0.1), transparent 60%),
    var(--tt-public-bg-alt);
}

/* .tt-gradient-text (H1/H2/inline emphasis, and the Header's own "TAJ
   TECH" wordmark fallback) — one light-on-dark treatment for the whole
   dark public site now, so the separate Header-only override this
   needed during the light-theme era is gone (it was a duplicate of
   this exact pair of colours, not a different one — removed rather
   than left stacked underneath). Hero keeps its own distinct teal→
   green version immediately below, using Hero's own pre-existing
   --tt-hero-* palette, deliberately untouched by this task. */
body.tt-public .tt-gradient-text {
  background: linear-gradient(90deg, #eaf3ee 0%, var(--tt-lime, #87B01F) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.tt-public .tt-hero-section .tt-gradient-text {
  background: linear-gradient(90deg, var(--tt-hero-teal) 0%, var(--tt-hero-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Homepage polish task, section 11/12: Registration CTA — the most
   saturated brand-gradient zone after Hero. Direction changed to
   diagonal (135deg). Header Normalization task, section 11: rebuilt
   again as the 2-colour agency pair (was tt-dark/tt-brand-green/lime,
   whose 100% stop put a large bright-lime surface across a third of
   the panel — exactly the "огромная поверхность из лайма" this task
   calls out). The old markup's <div class="tt-network-bg"> is gone, so
   the display:none override that used to suppress it here is gone too
   — not left as dead CSS. */
body.tt-public .tt-cta-panel {
  background: linear-gradient(135deg, #01505A 0%, #5EB681 100%);
  border-color: transparent;
  color: #ffffff;
}
body.tt-public .tt-cta-panel .text-\[\#9fd9d1\] { color: rgba(255, 255, 255, 0.85) !important; }

/* CTA button must contrast against .tt-cta-panel's own gradient, never
   reuse .tt-btn-primary here (same 2 agency colours, just turned 90° —
   would blend into the background exactly like the old lime version
   did). White surface + agency-dark text, scoped to .tt-cta-panel only
   — no other button on the site is affected. */
body.tt-public .tt-cta-panel .tt-cta-btn {
  background: #FFFFFF;
  color: #01505A;
  transition: background-color .15s ease;
}
body.tt-public .tt-cta-panel .tt-cta-btn:hover {
  background: #D3D3D3;
}

/* Brandbook Compliance task: every public template was originally
   written against the pre-brand dark navy/cyan theme using these
   literal Tailwind arbitrary-hex utility classes for body/muted text —
   already light-toned, correct on a dark surface. The intervening
   light-theme redesign pass had overridden them to dark-on-white
   tones; that override is now replaced in place (not stacked) with
   brand-derived light-on-dark tones — --tt-brand-gray at decreasing
   opacity for the hierarchy, not a reversion to the old hardcoded
   navy/cyan hex. Footer and CTA-panel rules above stay MORE specific
   (3-part selector vs this 2-part one) so they continue to win inside
   those two zones regardless of source order. */
body.tt-public .text-\[\#9fd9d1\] { color: var(--tt-public-muted) !important; }
body.tt-public .text-\[\#5c7f79\] { color: rgba(211, 211, 211, 0.75) !important; }
body.tt-public .text-\[\#4f716b\] { color: rgba(211, 211, 211, 0.55) !important; }

/* Brandbook Compliance task, section 0/19: form controls are one of
   the few functionally-light exceptions — a light input surface is far
   more usable/native than a dark one (native <select>/date-picker
   chrome, autofill highlighting, cursor visibility). Targets only
   actual form controls that carry .tt-panel
   (input.tt-panel/select.tt-panel/textarea.tt-panel) — never the many
   non-form uses of .tt-panel (B2B panel, Venue card, Registration CTA
   panel), which stay dark like every other panel. */
body.tt-public input.tt-panel,
body.tt-public select.tt-panel,
body.tt-public textarea.tt-panel {
  background: var(--tt-public-light-surface, #ffffff);
  color: var(--tt-public-light-text, #142420);
  border-color: rgba(21, 86, 83, 0.25);
}
body.tt-public input.tt-panel::placeholder,
body.tt-public textarea.tt-panel::placeholder {
  color: #7c8a84;
}
body.tt-public input.tt-panel:hover,
body.tt-public select.tt-panel:hover,
body.tt-public textarea.tt-panel:hover,
body.tt-public input.tt-panel:focus,
body.tt-public select.tt-panel:focus,
body.tt-public textarea.tt-panel:focus {
  border-color: var(--tt-lime, #87B01F);
}
body.tt-public select.tt-panel option {
  background: #ffffff;
  color: var(--tt-public-light-text, #142420);
}