/*
 * Copyright (c) 2026 Galiel 3.14 Ltd.
 * All rights reserved.
 * Usage of this file is subject to the terms of the license agreement.
 */

/* ==========================================================================
   ai314 Cool Style: Theme #1 "Harbor Night Signal", Palette #1 "Harbor Classic"
   Layers over legacy CSS. All rules scoped to body#modern-ai-root.
   ========================================================================== */
:root {
  /* Palette #1: Harbor Classic */
  --ai-314-bg: #FAF6EE;
  --ai-314-surface: #FFFFFF;
  --ai-314-surface-alt: #FCFAF6;
  --ai-314-text: #0E2230;
  --ai-314-text-muted: #3E4A55;
  --ai-314-action: #F2760A;
  --ai-314-action-hover: #FF8A2A;
  --ai-314-action-glow: #FFB066;
  --ai-314-on-action: #0E2230;
  --ai-314-accent: #2E6F8E;
  --ai-314-link: #04577F;
  --ai-314-link-hover: #C25A05;
  --ai-314-line: #ECE3D3;
  --ai-314-line-strong: #DCCFB8;

  /* Navy scale (header, nav, dark cards, footer) */
  --ai-314-navy-950: #0B1F2E;
  --ai-314-navy-900: #0E2230;
  --ai-314-navy-800: #062F45;
  --ai-314-on-dark: #FFFFFF;
  --ai-314-on-dark-muted: #DCE7EE;
  --ai-314-on-dark-soft: #F3EEE4;
  --ai-314-hero-scrim-center: rgba(11, 31, 46, 0.62);
  --ai-314-hero-scrim-top: rgba(11, 31, 46, 0.50);
  --ai-314-hero-scrim-bottom: rgba(11, 31, 46, 0.62);
  --ai-314-spot-radius: 92px;
  --ai-314-spot-duration: 18s;
  --ai-314-spot-glow: rgba(255, 255, 255, 0);
  --ai-314-spot-x: 15%;
  --ai-314-spot-y: 30%;
  --ai-314-frame-width: 4px;
  --ai-314-frame-base: rgba(242, 118, 10, 0.25);
  --ai-314-frame-duration: 4s;
  --ai-314-frame-color-1: #F2760A;
  --ai-314-frame-color-2: #FFD3A6;
  --ai-314-frame-angle: 0deg;
  --ai-314-heading-shadow: -2px 2px 0 rgba(242, 118, 10, 0.30), 0 6px 14px rgba(14, 34, 48, 0.16);
  --ai-314-lamp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5a7.5 7.5 0 0 0-4.5 13.5c.6.5 1 1.2 1 2V18a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-1c0-.8.4-1.5 1-2A7.5 7.5 0 0 0 12 1.5z'/%3E%3Crect x='9' y='19.8' width='6' height='1.6' rx='.8'/%3E%3Crect x='10' y='22' width='4' height='1.5' rx='.75'/%3E%3C/svg%3E");
  --ai-314-lamp-size: 26px;
  --ai-314-lamp-white: #FFFFFF;
  --ai-314-lamp-white-glow: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 9px rgba(255, 255, 255, 0.7));
  --ai-314-lamp-orange: #FF8A2A;
  --ai-314-lamp-orange-glow: drop-shadow(0 0 3px rgba(255, 138, 42, 0.95)) drop-shadow(0 0 10px rgba(242, 118, 10, 0.75));
  --ai-314-badge-pad-x: 26px;
  --ai-314-badge-pad-bottom: 26px;
  --ai-314-badge-radius: 20px;
  --ai-314-badge-notch: 20px;
  --ai-314-badge-notch-bg: #FFFFFF;
  --ai-314-badge-slot-bg: #EDE4D4;
  --ai-314-badge-stub-bg: rgba(242, 118, 10, 0.08);
  --ai-314-badge-tear: rgba(242, 118, 10, 0.55);
  --ai-314-crumb-text: #6B6352;
  --ai-314-block-gap: 32px;
  --ai-314-cta-photo-position: center center;
  --ai-314-cta-scrim-top: rgba(11, 31, 46, 0.58);
  --ai-314-cta-scrim-bottom: rgba(11, 31, 46, 0.78);
  --ai-314-cta-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 2px 12px rgba(0, 0, 0, 0.45);
  --ai-314-card-title-lh: 26px;
  --ai-314-score-radius: 18px;
  --ai-314-score-bar-h: 47px;
  --ai-314-score-dots-space: 130px;
  --ai-314-score-hover: #FFF8F1;
  --ai-314-score-foot-bg: rgba(255, 236, 214, 0.32);
  --ai-314-score-sign-line: #CBBFA8;
  --ai-314-score-stamp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76' viewBox='0 0 76 76'%3E%3Cg transform='rotate(-14 38 38)' fill='none' stroke='rgba(242,118,10,0.55)' stroke-width='3'%3E%3Ccircle cx='38' cy='38' r='34'/%3E%3Ccircle cx='38' cy='38' r='28' stroke-width='1'/%3E%3C/g%3E%3Cg transform='rotate(-14 38 38)' fill='rgba(242,118,10,0.85)' font-family='Arial, sans-serif' font-weight='800' text-anchor='middle'%3E%3Ctext x='38' y='36' font-size='9' textLength='46' lengthAdjust='spacingAndGlyphs'%3EVICKATHON%3C/text%3E%3Ctext x='38' y='49' font-size='10'%3E%D7%9E%D7%90%D7%95%D7%A9%D7%A8 %E2%9C%93%3C/text%3E%3C/g%3E%3C/svg%3E");
  --ai-314-ink-color: 242, 118, 10;
  --ai-314-ink-duration: 2s;
  --ai-314-ink-max: 150px;
  --ai-314-score-label: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='44' viewBox='0 0 60 44'%3E%3Ctext x='0' y='27' font-family='Heebo, Assistant, Arial, sans-serif' font-size='13' font-weight='800' letter-spacing='1' fill='%23DCE7EE'%3E%D7%A6%D7%99%D7%95%D7%9F%3C/text%3E%3C/svg%3E");
  --ai-314-hero-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 16px rgba(0, 0, 0, 0.35);
  --ai-314-on-dark-warm: #F0C9A0;
  --ai-314-on-dark-cream: #F0E4D5;
  --ai-314-footer-text: #A9B7C0;
  --ai-314-hairline-dark: rgba(255, 255, 255, 0.10);
  --ai-314-header-grad-1: #0B1F2E;
  --ai-314-header-grad-2: #1F5F82;
  --ai-314-header-grad-3: #123A52;
  --ai-314-header-grad-glow: rgba(242, 118, 10, 0.32);
  --ai-314-header-gradient:
    radial-gradient(35% 160% at 0% 50%, var(--ai-314-header-grad-glow), rgba(242, 118, 10, 0) 70%),
    linear-gradient(110deg, var(--ai-314-header-grad-1) 0%, var(--ai-314-header-grad-2) 25%, var(--ai-314-header-grad-3) 50%, var(--ai-314-header-grad-2) 75%, var(--ai-314-header-grad-1) 100%);
  --ai-314-header-anim-duration: 6s;
  /* Idea network for the top header bar and the footer (static) */
  --ai-314-network-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='90' viewBox='0 0 180 90'%3E%3Cg stroke='rgb(242,118,10)' stroke-opacity='0.24' stroke-width='1' fill='none'%3E%3Cline x1='0' y1='50' x2='30' y2='18'/%3E%3Cline x1='30' y1='18' x2='78' y2='8'/%3E%3Cline x1='78' y1='8' x2='118' y2='40'/%3E%3Cline x1='118' y1='40' x2='150' y2='14'/%3E%3Cline x1='150' y1='14' x2='180' y2='50'/%3E%3Cline x1='0' y1='50' x2='58' y2='62'/%3E%3Cline x1='58' y1='62' x2='118' y2='40'/%3E%3Cline x1='58' y1='62' x2='100' y2='82'/%3E%3Cline x1='100' y1='82' x2='140' y2='72'/%3E%3Cline x1='140' y1='72' x2='180' y2='50'/%3E%3Cline x1='118' y1='40' x2='140' y2='72'/%3E%3Cline x1='30' y1='18' x2='58' y2='62'/%3E%3Cline x1='58' y1='62' x2='30' y2='90'/%3E%3Cline x1='30' y1='0' x2='30' y2='18'/%3E%3C/g%3E%3Cg fill='rgb(242,118,10)' fill-opacity='0.5'%3E%3Ccircle cx='0' cy='50' r='2.8'/%3E%3Ccircle cx='30' cy='18' r='2.2'/%3E%3Ccircle cx='78' cy='8' r='2.2'/%3E%3Ccircle cx='118' cy='40' r='2.8'/%3E%3Ccircle cx='150' cy='14' r='2.2'/%3E%3Ccircle cx='180' cy='50' r='2.2'/%3E%3Ccircle cx='58' cy='62' r='2.8'/%3E%3Ccircle cx='100' cy='82' r='2.2'/%3E%3Ccircle cx='140' cy='72' r='2.2'/%3E%3Ccircle cx='30' cy='90' r='2.8'/%3E%3Ccircle cx='30' cy='0' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  --ai-314-network-size: 180px 90px;
  --ai-314-footer-link-glow: 0 0 6px rgba(242, 118, 10, 0.55), 0 0 14px rgba(242, 118, 10, 0.3);
  --ai-314-footer-link-glow-hover: 0 0 6px rgba(255, 170, 90, 0.9), 0 0 18px rgba(242, 118, 10, 0.6);
  /* Sunrise glow (previous option, kept for easy switching) */
  --ai-314-sunrise-base: linear-gradient(180deg, #0D2536 0%, var(--ai-314-navy-950) 100%);
  --ai-314-sunrise-glow-strong: rgba(242, 118, 10, 0.5);
  --ai-314-sunrise-glow-soft: rgba(255, 176, 102, 0.10);
  --ai-314-sunrise-header: radial-gradient(55% 170% at 50% 135%, var(--ai-314-sunrise-glow-strong) 0%, var(--ai-314-sunrise-glow-soft) 45%, rgba(242, 118, 10, 0) 72%), var(--ai-314-sunrise-base);
  --ai-314-sunrise-footer: radial-gradient(55% 120% at 50% -25%, var(--ai-314-sunrise-glow-strong) 0%, var(--ai-314-sunrise-glow-soft) 45%, rgba(242, 118, 10, 0) 72%), var(--ai-314-sunrise-base);

  /* Typography */
  --ai-314-font-body: "Assistant", "Segoe UI", Arial, sans-serif;
  --ai-314-font-display: "Heebo", "Assistant", "Segoe UI", Arial, sans-serif;
  --ai-314-fs-body: 18px;
  --ai-314-fs-small: 14.4px;
  --ai-314-fs-h1: clamp(30px, 3.4vw, 46px);
  --ai-314-fs-h2: clamp(24px, 2.2vw, 32px);
  --ai-314-fs-h3: 20px;
  --ai-314-fs-num: clamp(36px, 3.4vw, 48px);
  --ai-314-lh-body: 1.7;
  --ai-314-lh-tight: 1.2;

  /* Layout */
  --ai-314-container: 1080px;
  --ai-314-hero-max: 1400px;
  --ai-314-gutter: 24px;
  --ai-314-section-pad: clamp(24px, 2.2vw, 40px);
  --ai-314-heading-gap: 20px;
  --ai-314-gap: 24px;
  --ai-314-header-pad-y: 8px;
  --ai-314-badge-pad: 7px 16px;

  /* Shape and depth */
  --ai-314-radius-sm: 10px;
  --ai-314-radius: 18px;
  --ai-314-radius-lg: 28px;
  --ai-314-radius-pill: 999px;
  --ai-314-shadow-sm: 0 1px 2px rgba(14, 34, 48, 0.06), 0 2px 8px rgba(14, 34, 48, 0.05);
  --ai-314-shadow: 0 2px 4px rgba(14, 34, 48, 0.05), 0 18px 40px -22px rgba(14, 34, 48, 0.35);
  --ai-314-shadow-lift: 0 4px 8px rgba(14, 34, 48, 0.06), 0 26px 50px -24px rgba(14, 34, 48, 0.45);
  --ai-314-shadow-action: 0 10px 24px -10px rgba(242, 118, 10, 0.65);
  --ai-314-focus: 0 0 0 3px #FFFFFF, 0 0 0 6px #F2760A;

  /* Motion */
  --ai-314-ease: cubic-bezier(0.23, 1, 0.32, 1); /* v6 2026-11-09: stronger ease-out (was 0.22, 0.61, 0.36, 1) */
  --ai-314-dur: 0.25s;
}

/* Animatable spotlight coordinates (smooth motion in browsers that support @property) */
@property --ai-314-spot-x {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 15%;
}
@property --ai-314-spot-y {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 30%;
}
@property --ai-314-ink-r {
  syntax: '<length>';
  inherits: false;
  initial-value: 34px;
}
@property --ai-314-ink-a {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --ai-314-frame-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

/* ---------- Base ---------- */
body#modern-ai-root {
  background-color: var(--ai-314-bg);
  color: var(--ai-314-text);
  font-family: var(--ai-314-font-body);
  font-size: var(--ai-314-fs-body);
  line-height: var(--ai-314-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
body#modern-ai-root h1,
body#modern-ai-root h2,
body#modern-ai-root h3 {
  font-family: var(--ai-314-font-display);
  line-height: var(--ai-314-lh-tight);
  text-wrap: balance;
  overflow-wrap: break-word;
}
body#modern-ai-root a:focus-visible,
body#modern-ai-root .btn:focus-visible,
body#modern-ai-root .phone-badge:focus-visible {
  outline: none;
  box-shadow: var(--ai-314-focus);
  border-radius: 6px;
}
body#modern-ai-root ::selection {
  background: rgba(242, 118, 10, 0.25);
  color: var(--ai-314-text);
}

/* ---------- Shared header (sticky wrapper) ---------- */
body#modern-ai-root .sticky-top {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition-property: box-shadow;
  transition-duration: var(--ai-314-dur);
}
body#modern-ai-root .sticky-top.ai-is-scrolled {
  box-shadow: 0 10px 30px -12px rgba(11, 31, 46, 0.55);
}
body#modern-ai-root .site-header {
  padding: 0;
  margin: 0;
  min-height: 0;
  height: auto;
  background-color: var(--ai-314-navy-950);
  /* Idea network: faint orange dots joined by thin lines over deep navy */
  background-image: var(--ai-314-network-tile), linear-gradient(180deg, #0D2536 0%, var(--ai-314-navy-950) 100%);
  background-repeat: repeat, no-repeat;
  background-size: var(--ai-314-network-size), 100% 100%;
  background-position: center top, center;
  animation: none;
  color: var(--ai-314-on-dark);
  border-bottom: 1px solid var(--ai-314-hairline-dark);
}
body#modern-ai-root .site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  max-width: var(--ai-314-container);
  margin-left: auto;
  margin-right: auto;
  padding: var(--ai-314-header-pad-y) var(--ai-314-gutter);
  min-height: 0;
  height: auto;
  box-sizing: border-box;
  background: transparent;
}
body#modern-ai-root .site-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ai-314-on-dark);
  font-family: var(--ai-314-font-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
body#modern-ai-root .site-header .brand img {
  display: block;
  flex-shrink: 0;
}
body#modern-ai-root .site-header .phone-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--ai-314-badge-pad);
  border-radius: var(--ai-314-radius-pill);
  background-color: var(--ai-314-action);
  color: var(--ai-314-on-action);
  font-family: var(--ai-314-font-display);
  font-size: 14.72px;
  font-weight: 800;
  line-height: 1.4;
  margin: 0;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--ai-314-shadow-action);
  transition-property: background-color, translate, box-shadow;
  transition-duration: var(--ai-314-dur);
  transition-timing-function: var(--ai-314-ease);
}
body#modern-ai-root .site-header .phone-badge:hover {
  background-color: var(--ai-314-action-hover);
  translate: 0 -1px;
}
body#modern-ai-root .site-header .phone-badge .wa-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
body#modern-ai-root .site-header .phone-badge .wa-icon path {
  fill: currentColor;
}

@keyframes ai-314-header-flow {
  0%   { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 100% 50%; }
}

/* ---------- Main nav ---------- */
body#modern-ai-root .main-nav {
  background-color: rgba(6, 47, 69, 0.97);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--ai-314-hairline-dark);
}
body#modern-ai-root .main-nav .nav-inner {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 2px;
  max-width: var(--ai-314-container);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--ai-314-gutter);
  box-sizing: border-box;
}
body#modern-ai-root .main-nav .nav-inner a {
  position: relative;
  display: block;
  padding: 14px 14px;
  color: var(--ai-314-on-dark-muted);
  font-family: var(--ai-314-font-body);
  font-size: 15.2px;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px 8px 0 0;
  transition-property: color, background-color;
  transition-duration: var(--ai-314-dur);
}
body#modern-ai-root .main-nav .nav-inner a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background-color: var(--ai-314-action);
  transform: scaleX(0);
  transition: transform var(--ai-314-dur) var(--ai-314-ease);
}
body#modern-ai-root .main-nav .nav-inner a:hover {
  color: var(--ai-314-on-dark);
  background-color: rgba(255, 255, 255, 0.06);
}
body#modern-ai-root .main-nav .nav-inner a:hover::after {
  transform: scaleX(0.5);
}
body#modern-ai-root .main-nav .nav-inner a.active {
  color: var(--ai-314-on-dark);
  font-weight: 700;
}
body#modern-ai-root .main-nav .nav-inner a.active::after {
  transform: scaleX(1);
}

/* ---------- Hero (background-image locked: overlay via ::after) ---------- */
body#modern-ai-root .hero.hero-photo {
  position: relative;
  isolation: isolate;
  max-width: var(--ai-314-hero-max);
  margin-left: auto;
  margin-right: auto;
  padding: clamp(72px, 8vw, 108px) var(--ai-314-gutter) clamp(64px, 7vw, 96px);
  box-sizing: border-box;
  color: var(--ai-314-on-dark);
  text-align: center;
  border-radius: 0 0 var(--ai-314-radius-lg) var(--ai-314-radius-lg);
  animation: ai-314-spot-orbit var(--ai-314-spot-duration) ease-in-out infinite;
  /* CSS judo: neutralize any legacy dark tint baked into the locked background-image stack
     (e.g. a navy gradient layered over the photo), plus legacy inset-shadow or filter tints.
     "lighten" keeps the brighter of each layer pair, so dark tint layers drop out and the
     photo shows at full brightness. Darkening is handled only by our own ::after scrim. */
  background-color: transparent;
  background-blend-mode: lighten;
  box-shadow: none;
  filter: none;
}
/* Spotlight layer: kept fully transparent so the photo shows at full clarity inside the circle */
body#modern-ai-root .hero.hero-photo::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    circle var(--ai-314-spot-radius) at var(--ai-314-spot-x) var(--ai-314-spot-y),
    var(--ai-314-spot-glow) 0%,
    var(--ai-314-spot-glow) 99%,
    rgba(255, 255, 255, 0) 100%
  );
  mix-blend-mode: screen;
}
body#modern-ai-root .hero.hero-photo::before,
body#modern-ai-root .hero.hero-photo::after {
  content: "";
}
body#modern-ai-root .hero.hero-photo::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(55% 60% at 50% 50%, var(--ai-314-hero-scrim-center), rgba(11, 31, 46, 0) 100%),
    linear-gradient(180deg, var(--ai-314-hero-scrim-top) 0%, var(--ai-314-hero-scrim-bottom) 100%);
  /* Spotlight hole: overlay fully removed across the whole circle (uniform brightness) */
  -webkit-mask-image: radial-gradient(
    circle var(--ai-314-spot-radius) at var(--ai-314-spot-x) var(--ai-314-spot-y),
    transparent 0%, transparent 99%, #000 100%
  );
  mask-image: radial-gradient(
    circle var(--ai-314-spot-radius) at var(--ai-314-spot-x) var(--ai-314-spot-y),
    transparent 0%, transparent 99%, #000 100%
  );
}
@keyframes ai-314-spot-orbit {
  0%   { --ai-314-spot-x: 15%; --ai-314-spot-y: 30%; }
  17%  { --ai-314-spot-x: 50%; --ai-314-spot-y: 14%; }
  33%  { --ai-314-spot-x: 86%; --ai-314-spot-y: 28%; }
  50%  { --ai-314-spot-x: 84%; --ai-314-spot-y: 78%; }
  67%  { --ai-314-spot-x: 50%; --ai-314-spot-y: 88%; }
  83%  { --ai-314-spot-x: 14%; --ai-314-spot-y: 74%; }
  100% { --ai-314-spot-x: 15%; --ai-314-spot-y: 30%; }
}
body#modern-ai-root .hero.hero-photo > * {
  position: relative;
  z-index: 1;
}
body#modern-ai-root .hero.hero-photo .eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 18px;
  border: 1px solid rgba(242, 118, 10, 0.55);
  border-radius: var(--ai-314-radius-pill);
  background-color: rgba(11, 31, 46, 0.55);
  color: var(--ai-314-action);
  font-family: var(--ai-314-font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
body#modern-ai-root .hero.hero-photo h1 {
  max-width: 820px;
  margin: 0 auto 18px;
  color: var(--ai-314-on-dark);
  font-size: var(--ai-314-fs-h1);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: var(--ai-314-hero-text-shadow);
}
body#modern-ai-root .hero.hero-photo .sub-target {
  max-width: 900px;
  margin: 0 auto 14px;
  color: var(--ai-314-on-dark);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.55;
  text-shadow: var(--ai-314-hero-text-shadow);
}
body#modern-ai-root .hero.hero-photo .tagline {
  max-width: 700px;
  margin: 0 auto 32px;
  color: var(--ai-314-on-dark-soft);
  font-size: 16.8px;
  font-weight: 600;
  line-height: 1.75;
  text-shadow: var(--ai-314-hero-text-shadow);
}

/* ---------- Buttons (hero + CTA) ---------- */
body#modern-ai-root .hero .btn,
body#modern-ai-root .cta-box .btn {
  display: inline-block;
  padding: 16px 34px;
  border: 0;
  border-radius: var(--ai-314-radius-pill);
  background-color: var(--ai-314-action);
  color: var(--ai-314-on-action);
  font-family: var(--ai-314-font-display);
  font-size: 16.32px;
  font-weight: 800;
  line-height: 1.6;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--ai-314-shadow-action);
  transition-property: background-color, translate, box-shadow;
  transition-duration: var(--ai-314-dur);
  transition-timing-function: var(--ai-314-ease);
}
body#modern-ai-root .hero .btn:hover,
body#modern-ai-root .cta-box .btn:hover {
  background-color: var(--ai-314-action-hover);
  translate: 0 -2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 16px 30px -12px rgba(242, 118, 10, 0.75);
}
body#modern-ai-root .hero .btn:active,
body#modern-ai-root .cta-box .btn:active {
  translate: 0 0;
}

/* ---------- Sections ---------- */
body#modern-ai-root .section {
  max-width: var(--ai-314-container);
  margin-left: auto;
  margin-right: auto;
  padding: var(--ai-314-section-pad) var(--ai-314-gutter);
  box-sizing: border-box;
}
body#modern-ai-root .section.alt {
  background-color: var(--ai-314-surface);
  border-radius: var(--ai-314-radius-lg);
  box-shadow: var(--ai-314-shadow-sm);
}
body#modern-ai-root .section h2 {
  position: relative;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: var(--ai-314-heading-gap);
  padding-bottom: 0;
  color: var(--ai-314-text);
  font-size: var(--ai-314-fs-h2);
  font-weight: 800;
  text-shadow: var(--ai-314-heading-shadow);
}
/* First heading in a section starts flush with the section padding
   (later headings keep their legacy margin-top, which is locked on some pages) */
body#modern-ai-root .section > h2:first-child {
  margin-top: 0;
}
/* No underline accent under section headings (also cancels any legacy underline) */
body#modern-ai-root .section h2::after {
  content: none;
  display: none;
}
body#modern-ai-root .section p {
  margin: 0 0 18px;
  color: var(--ai-314-text);
  line-height: var(--ai-314-lh-body);
}
body#modern-ai-root .section p:last-child {
  margin-bottom: 0;
}
body#modern-ai-root .section p a {
  color: var(--ai-314-link);
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-color: rgba(242, 118, 10, 0.55);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition-property: color, text-decoration-color;
  transition-duration: var(--ai-314-dur);
}
body#modern-ai-root .section p a:hover {
  color: var(--ai-314-link-hover);
  text-decoration-color: var(--ai-314-action);
}

/* ---------- Stats band (legacy background image preserved) ---------- */
body#modern-ai-root .stats {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  border-radius: var(--ai-314-radius-lg);
  box-shadow:
    inset 0 0 0 100vmax rgba(11, 31, 46, 0.30),
    var(--ai-314-shadow);
}
/* Animated frame: an orange light runs ONE lap around the stats band when it
   scrolls into view (class added by the light JS), then rests. v5 2026-11-09 */
body#modern-ai-root .section .stats {
  position: relative;
  animation: none;
}
body#modern-ai-root .section .stats.ai-is-framed {
  animation: ai-314-frame-spin 2.4s cubic-bezier(0.23, 1, 0.32, 1) 0.2s 1 both;
}
body#modern-ai-root .section .stats::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  padding: var(--ai-314-frame-width);
  background: conic-gradient(
    from var(--ai-314-frame-angle),
    var(--ai-314-frame-color-1) 0deg,
    var(--ai-314-frame-color-2) 40deg,
    var(--ai-314-frame-base) 100deg,
    var(--ai-314-frame-base) 140deg,
    var(--ai-314-frame-color-1) 180deg,
    var(--ai-314-frame-color-2) 220deg,
    var(--ai-314-frame-base) 280deg,
    var(--ai-314-frame-base) 320deg,
    var(--ai-314-frame-color-1) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@keyframes ai-314-frame-spin {
  to { --ai-314-frame-angle: 360deg; }
}
body#modern-ai-root .stats .stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 30px 24px;
  box-sizing: border-box;
  color: var(--ai-314-on-dark);
  text-align: center;
  overflow-wrap: break-word;
}
body#modern-ai-root .stats .stat + .stat {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.16);
}
body#modern-ai-root .stats .stat .num {
  color: var(--ai-314-on-dark);
  font-family: var(--ai-314-font-display);
  font-size: var(--ai-314-fs-num);
  font-weight: 800;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}
body#modern-ai-root .stats .stat .label {
  margin-top: 6px;
  color: var(--ai-314-on-dark-warm);
  font-size: var(--ai-314-fs-small);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

/* Feature image (max-width, radius and margin-top locked) */
body#modern-ai-root .section > img {
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  box-shadow: var(--ai-314-shadow-lift);
  filter: saturate(1.05) contrast(1.02);
}

/* ---------- Cards ---------- */
body#modern-ai-root .section .card {
  padding: 40px 28px;
  box-sizing: border-box;
  border: 1px solid var(--ai-314-line);
  border-radius: var(--ai-314-radius);
  background-color: var(--ai-314-surface-alt);
  box-shadow: var(--ai-314-shadow-sm);
  overflow-wrap: break-word;
  min-width: 0;
  transition-property: opacity, transform, translate, box-shadow, border-color;
  transition-duration: 0.6s, 0.6s, var(--ai-314-dur), var(--ai-314-dur), var(--ai-314-dur);
  transition-timing-function: var(--ai-314-ease);
}
body#modern-ai-root .section .card:hover {
  translate: 0 -3px;
  border-color: var(--ai-314-line-strong);
  box-shadow: var(--ai-314-shadow);
}
body#modern-ai-root .section .card h3 {
  margin: 0 0 14px;
  color: var(--ai-314-link);
  font-size: var(--ai-314-fs-h3);
  font-weight: 800;
}

/* Bold grid: dark and orange cards */
body#modern-ai-root .section .grid-bold .card {
  position: relative;
  border: 0;
  box-shadow: var(--ai-314-shadow);
}
body#modern-ai-root .section .grid-bold .card.color-dark {
  background-color: var(--ai-314-navy-900);
  background-image: radial-gradient(120% 90% at 100% 0%, rgba(46, 111, 142, 0.35), rgba(46, 111, 142, 0) 60%);
  color: var(--ai-314-on-dark);
}
body#modern-ai-root .section .grid-bold .card.color-dark p,
body#modern-ai-root .section .grid-bold .card.color-dark strong {
  color: var(--ai-314-on-dark);
}
body#modern-ai-root .section .grid-bold .card.color-orange {
  background-color: var(--ai-314-action);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%);
  color: var(--ai-314-on-action);
}
body#modern-ai-root .section .grid-bold .card.color-orange p,
body#modern-ai-root .section .grid-bold .card.color-orange strong {
  color: var(--ai-314-on-action);
}
body#modern-ai-root .section .grid-bold .card strong {
  font-weight: 800;
}
/* Lit lamp replaces the checkmark: the glyph is hidden, a bulb icon is drawn with a mask.
   Orange card (white badge) -> white lamp; dark card (orange badge) -> orange lamp. */
body#modern-ai-root .section .grid-bold .card .check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ai-314-lamp-size);
  height: var(--ai-314-lamp-size);
  margin-inline-end: 6px;
  vertical-align: middle;
  top: -2px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: visible;
  filter: var(--ai-314-lamp-white-glow);
}
body#modern-ai-root .section .grid-bold .card .check::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--ai-314-lamp-white);
  -webkit-mask: var(--ai-314-lamp-icon) center / contain no-repeat;
  mask: var(--ai-314-lamp-icon) center / contain no-repeat;
}
body#modern-ai-root .section .grid-bold .card.color-dark .check {
  background: transparent;
  filter: var(--ai-314-lamp-orange-glow);
}
body#modern-ai-root .section .grid-bold .card.color-dark .check::before {
  background-color: var(--ai-314-lamp-orange);
}

/* ---------- Grids ---------- */
body#modern-ai-root .section .grid.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ai-314-gap);
  align-items: stretch;
}
body#modern-ai-root .section .grid.cols-2 > * {
  min-width: 0;
  overflow-wrap: break-word;
}
body#modern-ai-root .section .grid.cols-2 > div:not(.card):not(.quote-card) h2 {
  margin-bottom: 22px;
}

/* ---------- Quote cards as hackathon event badges ----------
   Locks respected: height, transition-delay and ::before content are never set.
   Lanyard slot = ::after, tear-off line + side notches = .who and its pseudo-elements. */
body#modern-ai-root .section .quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 42px var(--ai-314-badge-pad-x) var(--ai-314-badge-pad-bottom);
  box-sizing: border-box;
  border: 1px solid var(--ai-314-line);
  border-radius: var(--ai-314-badge-radius);
  background-color: var(--ai-314-surface-alt);
  box-shadow: var(--ai-314-shadow-sm);
  min-width: 0;
  transform-origin: 50% 0;
  transition-property: opacity, transform, translate, rotate, box-shadow, border-color;
  transition-duration: 0.6s, 0.6s, var(--ai-314-dur), 0.45s, var(--ai-314-dur), var(--ai-314-dur);
  transition-timing-function: var(--ai-314-ease);
}
/* Hover: the badge swings slightly on its lanyard */
body#modern-ai-root .section .quote-card:hover {
  translate: 0 -3px;
  rotate: -1deg;
  border-color: var(--ai-314-line-strong);
  box-shadow: var(--ai-314-shadow);
}
body#modern-ai-root .section .grid > .quote-card:nth-child(even):hover {
  rotate: 1deg;
}
/* Lanyard slot at top center */
body#modern-ai-root .section .quote-card::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  width: 46px;
  height: 9px;
  translate: -50% 0;
  border-radius: var(--ai-314-radius-pill);
  background-color: var(--ai-314-badge-slot-bg);
  box-shadow: inset 0 1px 2px rgba(14, 34, 48, 0.28), 0 1px 0 rgba(255, 255, 255, 0.9);
  pointer-events: none;
}
/* Quote mark (content locked, only restyled) */
body#modern-ai-root .section .quote-card::before {
  position: absolute;
  top: 6px;
  inset-inline-start: 20px;
  color: rgba(242, 118, 10, 0.35);
  background: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
body#modern-ai-root .section .quote-card .txt {
  margin: 0 0 18px;
  color: var(--ai-314-text);
  font-size: 17.5px;
  line-height: 1.75;
  overflow-wrap: break-word;
}
/* Ticket stub: tinted area under a dashed tear-off line, reaching the card edges */
body#modern-ai-root .section .quote-card .who {
  position: relative;
  margin: auto calc(-1 * var(--ai-314-badge-pad-x)) calc(-1 * var(--ai-314-badge-pad-bottom));
  padding: 16px var(--ai-314-badge-pad-x) 20px;
  border-top: 2px dashed var(--ai-314-badge-tear);
  border-radius: 0 0 calc(var(--ai-314-badge-radius) - 1px) calc(var(--ai-314-badge-radius) - 1px);
  background-color: var(--ai-314-badge-stub-bg);
  color: var(--ai-314-text);
  font-family: var(--ai-314-font-display);
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.55;
  overflow-wrap: break-word;
}
/* Half-circle notches cut into both sides at the tear-off line */
body#modern-ai-root .section .quote-card .who::before,
body#modern-ai-root .section .quote-card .who::after {
  content: "";
  position: absolute;
  top: calc(var(--ai-314-badge-notch) / -2 - 1px);
  width: var(--ai-314-badge-notch);
  height: var(--ai-314-badge-notch);
  border-radius: 50%;
  background-color: var(--ai-314-badge-notch-bg);
  pointer-events: none;
}
body#modern-ai-root .section .quote-card .who::before {
  left: calc(var(--ai-314-badge-notch) / -2 - 1px);
  box-shadow: inset -2px 0 3px -1px rgba(14, 34, 48, 0.14);
}
body#modern-ai-root .section .quote-card .who::after {
  right: calc(var(--ai-314-badge-notch) / -2 - 1px);
  box-shadow: inset 2px 0 3px -1px rgba(14, 34, 48, 0.14);
}

/* ---------- CTA band (legacy background image preserved) ---------- */
body#modern-ai-root .cta-box {
  position: relative;
  isolation: isolate;
  margin-top: 64px;
  padding: clamp(48px, 6vw, 72px) max(var(--ai-314-gutter), env(safe-area-inset-right, 0px)) clamp(48px, 6vw, 72px) max(var(--ai-314-gutter), env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  color: var(--ai-314-on-dark);
  text-align: center;
}
/* Bottom CTA reuses the page's hero photo (URL handed over by the light JS),
   cropped to the photo's vertical centre stripe because the band is shorter */
body#modern-ai-root .cta-box.ai-has-hero-photo {
  background-color: var(--ai-314-navy-950);
  background-image: var(--ai-314-cta-photo);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--ai-314-cta-photo-position);
}
body#modern-ai-root .cta-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 80% at 50% 0%, rgba(242, 118, 10, 0.22), rgba(242, 118, 10, 0) 70%),
    linear-gradient(180deg, var(--ai-314-cta-scrim-top), var(--ai-314-cta-scrim-bottom));
}
body#modern-ai-root .cta-box > * {
  position: relative;
  z-index: 1;
}
body#modern-ai-root .cta-box h2 {
  max-width: 820px;
  margin: 0 auto 16px;
  color: var(--ai-314-on-dark);
  font-size: var(--ai-314-fs-h2);
  font-weight: 800;
}
body#modern-ai-root .cta-box > p:not(.small-note) {
  max-width: 760px;
  margin: 0 auto 28px;
  color: var(--ai-314-on-dark);
  font-size: 17.6px;
  font-weight: 600;
  line-height: 1.7;
  text-shadow: var(--ai-314-cta-text-shadow);
}
body#modern-ai-root .cta-box h2,
body#modern-ai-root .cta-box .small-note {
  text-shadow: var(--ai-314-cta-text-shadow);
}
body#modern-ai-root .cta-box .small-note {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.8;
}
body#modern-ai-root .cta-box .small-note a {
  display: inline;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-weight: 700;
  transition-property: opacity;
  transition-duration: var(--ai-314-dur);
}
body#modern-ai-root .cta-box .small-note a:hover {
  opacity: 0.8;
}

/* ---------- Shared footer ---------- */
body#modern-ai-root .site-footer {
  position: relative;
  padding: 36px max(20px, env(safe-area-inset-right, 0px)) 36px max(20px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  /* Idea network over deep navy, plus the orange top line */
  background-color: var(--ai-314-navy-950);
  background-image:
    linear-gradient(90deg, var(--ai-314-action), var(--ai-314-action-glow) 50%, var(--ai-314-action)),
    var(--ai-314-network-tile),
    linear-gradient(180deg, var(--ai-314-navy-950) 0%, #0D2536 100%);
  background-size: 100% 3px, var(--ai-314-network-size), 100% 100%;
  background-repeat: no-repeat, repeat, no-repeat;
  background-position: top center, center top, center;
  animation: none;
  color: var(--ai-314-footer-text);
  font-size: var(--ai-314-fs-small);
  line-height: 1.7;
  text-align: center;
}
@keyframes ai-314-footer-flow {
  0%   { background-position: top center, 0 0, 0% 50%; }
  100% { background-position: top center, 0 0, 100% 50%; }
}
body#modern-ai-root .site-footer > div {
  max-width: var(--ai-314-container);
  margin-left: auto;
  margin-right: auto;
  overflow-wrap: break-word;
}
body#modern-ai-root .site-footer > div:first-child {
  color: var(--ai-314-footer-text);
  font-weight: 600;
  letter-spacing: 0.02em;
}
body#modern-ai-root .site-footer > div + div {
  color: rgba(169, 183, 192, 0.6);
}
body#modern-ai-root .site-footer > div + div a {
  display: inline-block;
  padding: 2px 4px;
  color: var(--ai-314-action);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  text-shadow: var(--ai-314-footer-link-glow);
  transition-property: color, background-color, text-shadow;
  transition-duration: var(--ai-314-dur);
}
body#modern-ai-root .site-footer > div + div a:hover {
  color: var(--ai-314-action-hover);
  text-shadow: var(--ai-314-footer-link-glow-hover);
  background-color: rgba(242, 118, 10, 0.10);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ==========================================================================
   INNER PAGES (e.g. organizations / companies page)
   Every selector below targets classes or structures that do not exist on the
   home page, so the home page is unaffected.
   ========================================================================== */

/* ---------- Breadcrumb ---------- */
body#modern-ai-root .breadcrumb {
  max-width: var(--ai-314-container);
  margin-left: auto;
  margin-right: auto;
  padding: 14px var(--ai-314-gutter) 12px;
  box-sizing: border-box;
  color: var(--ai-314-crumb-text);
  font-size: 14.4px;
  font-weight: 600;
  line-height: 1.6;
  overflow-wrap: break-word;
}
body#modern-ai-root .breadcrumb a {
  color: var(--ai-314-link);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(4, 87, 127, 0.25);
  transition-property: color, border-color;
  transition-duration: var(--ai-314-dur);
}
body#modern-ai-root .breadcrumb a:hover {
  color: var(--ai-314-link-hover);
  border-bottom-color: var(--ai-314-action);
}

/* ---------- Hero extras (inner page variant) ---------- */
body#modern-ai-root .hero.hero-photo h1 span {
  text-shadow: var(--ai-314-hero-text-shadow);
}
body#modern-ai-root .hero.hero-photo .sub {
  max-width: 900px;
  margin: 0 auto;
  color: var(--ai-314-on-dark-soft);
  font-size: 19.2px;
  font-weight: 700;
  line-height: 1.6;
  text-shadow: var(--ai-314-hero-text-shadow);
}

/* ---------- Differentiator strip (legacy background image preserved) ---------- */
body#modern-ai-root .differentiator-strip {
  position: relative;
  margin-top: 0;
  padding: 18px max(var(--ai-314-gutter), env(safe-area-inset-right, 0px)) 18px max(var(--ai-314-gutter), env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  color: var(--ai-314-on-dark);
  font-family: var(--ai-314-font-display);
  font-size: 16.8px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 100vmax rgba(11, 31, 46, 0.18), inset 0 -3px 0 var(--ai-314-action);
  overflow-wrap: break-word;
}

/* ---------- Buttons inside section paragraphs and stand-alone cards (pill) ---------- */
body#modern-ai-root .section p a.btn,
body#modern-ai-root .section > .card > a.btn {
  display: inline-block;
  max-width: 100%;
  padding: 16px 34px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--ai-314-radius-pill);
  background-color: var(--ai-314-action);
  color: var(--ai-314-on-action);
  font-family: var(--ai-314-font-display);
  font-size: 16.32px;
  font-weight: 800;
  line-height: 1.6;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--ai-314-shadow-action);
  transition-property: background-color, translate, box-shadow;
  transition-duration: var(--ai-314-dur);
  transition-timing-function: var(--ai-314-ease);
}
body#modern-ai-root .section p a.btn:hover,
body#modern-ai-root .section > .card > a.btn:hover {
  background-color: var(--ai-314-action-hover);
  color: var(--ai-314-on-action);
  translate: 0 -2px;
}

/* ---------- Stand-alone card (e.g. guide download): no checkmark ---------- */
body#modern-ai-root .section > .card > p > .check {
  display: none;
}

/* ---------- Lamp icons for checkmarks outside the bold grid ---------- */
body#modern-ai-root .section > p > .check,
body#modern-ai-root .section .grid-premium .card .check,
body#modern-ai-root .section .grid-formats .card .check {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-inline-end: 6px;
  vertical-align: middle;
  top: -2px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: visible;
  filter: var(--ai-314-lamp-orange-glow);
}
body#modern-ai-root .section > p > .check::before,
body#modern-ai-root .section .grid-premium .card .check::before,
body#modern-ai-root .section .grid-formats .card .check::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--ai-314-lamp-orange);
  -webkit-mask: var(--ai-314-lamp-icon) center / contain no-repeat;
  mask: var(--ai-314-lamp-icon) center / contain no-repeat;
}

/* ---------- Card title / description structure (premium, formats, bold grids) ---------- */
/* Lamp aligns with the centre of the FIRST line when the title wraps */
body#modern-ai-root .section .card .card-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  font-family: var(--ai-314-font-display);
  font-size: 18px;
  line-height: var(--ai-314-card-title-lh);
}
body#modern-ai-root .section .card .card-title .check {
  top: 0;
  flex-shrink: 0;
  margin-inline-end: 0;
  margin-top: calc((var(--ai-314-card-title-lh) - 22px) / 2);
  vertical-align: top;
}
body#modern-ai-root .section .grid-bold .card .card-title .check {
  margin-top: calc((var(--ai-314-card-title-lh) - var(--ai-314-lamp-size)) / 2);
}
body#modern-ai-root .section .card .card-title strong {
  display: block;
  min-width: 0;
  line-height: var(--ai-314-card-title-lh);
  font-weight: 800;
  overflow-wrap: break-word;
}
body#modern-ai-root .section .card .card-desc {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.75;
}
body#modern-ai-root .section .grid-premium .card .card-desc,
body#modern-ai-root .section .grid-formats .card .card-desc {
  color: var(--ai-314-text-muted);
}

/* ---------- Premium and formats grids ---------- */
body#modern-ai-root .section .grid.grid-premium,
body#modern-ai-root .section .grid.grid-formats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ai-314-gap);
  align-items: stretch;
}
body#modern-ai-root .section .grid.grid-premium > *,
body#modern-ai-root .section .grid.grid-formats > * {
  min-width: 0;
  overflow-wrap: break-word;
}
body#modern-ai-root .section .grid-premium .card,
body#modern-ai-root .section .grid-formats .card {
  padding: 34px 26px 30px;
  border-top: 4px solid var(--ai-314-action);
  background-color: var(--ai-314-surface);
}
body#modern-ai-root .section.alt .grid-premium .card,
body#modern-ai-root .section.alt .grid-formats .card {
  background-color: var(--ai-314-surface-alt);
}
body#modern-ai-root .section .grid-formats .card {
  border-top-color: var(--ai-314-accent);
}

/* ---------- Case studies ---------- */
body#modern-ai-root .section .case {
  border: 1px solid var(--ai-314-line);
  border-radius: var(--ai-314-radius-lg);
  background-color: var(--ai-314-surface);
  box-shadow: var(--ai-314-shadow);
  overflow-wrap: break-word;
}
body#modern-ai-root .section .case .tag {
  display: inline-block;
  margin-inline-end: 6px;
  margin-bottom: 4px;
  padding: 5px 12px;
  border-radius: var(--ai-314-radius-pill);
  background-color: var(--ai-314-link);
  color: var(--ai-314-on-dark);
  font-family: var(--ai-314-font-display);
  font-size: 12.48px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
body#modern-ai-root .section .case .tag + .tag {
  background-color: var(--ai-314-action);
  color: var(--ai-314-on-action);
}
body#modern-ai-root .section .case h3 {
  color: var(--ai-314-text);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.35;
}
body#modern-ai-root .section .case p {
  line-height: 1.75;
}
body#modern-ai-root .section .case ul {
  margin: 0 0 18px;
  padding-inline-start: 22px;
}
body#modern-ai-root .section .case ul li {
  margin-bottom: 6px;
  line-height: 1.7;
  overflow-wrap: break-word;
}
body#modern-ai-root .section .case ul li::marker {
  color: var(--ai-314-action);
}
/* Wide testimonial badges inside cases do not swing (too wide) */
body#modern-ai-root .section .case .quote-card:hover {
  rotate: none;
}

/* ---------- Video thumbnails (background image + wrappers locked) ---------- */
body#modern-ai-root .section .case .vk-embed.vk-thumb {
  cursor: pointer;
  border: 0;
  isolation: isolate;
}
body#modern-ai-root .section .case .vk-embed.vk-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 31, 46, 0.10) 0%, rgba(11, 31, 46, 0.55) 100%);
  transition: opacity var(--ai-314-dur) var(--ai-314-ease);
}
body#modern-ai-root .section .case .vk-embed.vk-thumb:hover::before {
  opacity: 0.7;
}
body#modern-ai-root .section .case .vk-embed.vk-thumb > span {
  position: relative;
  z-index: 1;
}
body#modern-ai-root .section .case .vk-embed.vk-thumb .vk-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--ai-314-action);
  color: var(--ai-314-navy-900);
  box-shadow: 0 0 0 6px rgba(242, 118, 10, 0.25), 0 10px 24px -8px rgba(0, 0, 0, 0.5);
  transition-property: scale, box-shadow;
  transition-duration: var(--ai-314-dur);
  transition-timing-function: var(--ai-314-ease);
}
body#modern-ai-root .section .case .vk-embed.vk-thumb .vk-play svg path {
  fill: currentColor;
}
body#modern-ai-root .section .case .vk-embed.vk-thumb:hover .vk-play {
  scale: 1.08;
  box-shadow: 0 0 0 10px rgba(242, 118, 10, 0.3), 0 12px 28px -8px rgba(0, 0, 0, 0.55);
}
body#modern-ai-root .section .case .vk-embed.vk-thumb:focus-visible {
  outline: 3px solid var(--ai-314-action);
  outline-offset: -3px;
}
body#modern-ai-root .section .case .vk-embed.vk-thumb .vk-t {
  color: var(--ai-314-on-dark);
  font-family: var(--ai-314-font-display);
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  overflow-wrap: break-word;
}
body#modern-ai-root .section .case .vk-embed.vk-thumb .vk-n {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ---------- Breathing room for a paragraph that follows a block (inner pages) ----------
   Grids with .cols-2 are excluded so the home page spacing stays unchanged. */
body#modern-ai-root .section > .grid:not(.cols-2) + p,
body#modern-ai-root .section > .case + p,
body#modern-ai-root .section > figure + p {
  margin-top: var(--ai-314-block-gap);
}

/* ---------- Judge's scorecard (education page "why us" accordion) ----------
   Only .accordion markup is targeted, which exists on the education page alone.
   Panel open/close behavior (height, display, overflow) is left to the legacy code. */
body#modern-ai-root .section .accordion {
  position: relative;
  counter-reset: ai314-crit;
  margin: 0;
  border: 1px solid var(--ai-314-line);
  border-radius: var(--ai-314-score-radius);
  background-color: var(--ai-314-surface);
  /* Ink ring centred on the stamp (footer 84px tall, stamp 76px at left 20px) */
  background-image: radial-gradient(
    circle at 59px calc(100% - 43px),
    transparent calc(var(--ai-314-ink-r) - 5px),
    rgba(var(--ai-314-ink-color), var(--ai-314-ink-a)) var(--ai-314-ink-r),
    transparent calc(var(--ai-314-ink-r) + 7px)
  );
  background-repeat: no-repeat;
  box-shadow: var(--ai-314-shadow);
}
/* Ink pulse: repeats continuously once the scorecard has scrolled into view (class added by the light JS) */
/* v5 2026-11-09: two pulses only, then the stamp rests (was infinite) */
body#modern-ai-root .section .accordion.ai-is-inked {
  animation: ai-314-ink-pulse var(--ai-314-ink-duration) ease-out 0.3s 2 both;
}
@keyframes ai-314-ink-pulse {
  0%   { --ai-314-ink-r: 34px; --ai-314-ink-a: 0.5; }
  100% { --ai-314-ink-r: var(--ai-314-ink-max); --ai-314-ink-a: 0; }
}
/* Navy header bar: "criterion" label (right) */
body#modern-ai-root .section .accordion::before {
  content: "קריטריון";
  display: block;
  height: var(--ai-314-score-bar-h);
  padding: 0 24px;
  box-sizing: border-box;
  border-bottom: 3px solid var(--ai-314-action);
  border-radius: calc(var(--ai-314-score-radius) - 1px) calc(var(--ai-314-score-radius) - 1px) 0 0;
  background-color: var(--ai-314-navy-950);
  background-image: var(--ai-314-score-label);
  background-repeat: no-repeat;
  background-position: left 24px top 0;
  background-size: 60px 44px;
  color: var(--ai-314-on-dark-muted);
  font-family: var(--ai-314-font-display);
  font-size: 13px;
  font-weight: 800;
  line-height: calc(var(--ai-314-score-bar-h) - 3px);
  letter-spacing: 0.08em;
}
/* Footer: judge's signature line */
body#modern-ai-root .section .accordion::after {
  content: "חתימת השופט";
  display: block;
  min-height: 84px;
  padding: 0 24px;
  box-sizing: border-box;
  border-radius: 0 0 calc(var(--ai-314-score-radius) - 1px) calc(var(--ai-314-score-radius) - 1px);
  background-color: var(--ai-314-score-foot-bg);
  background-image: var(--ai-314-score-stamp), linear-gradient(var(--ai-314-score-sign-line), var(--ai-314-score-sign-line));
  background-repeat: no-repeat, no-repeat;
  background-size: 76px 76px, 220px 1px;
  background-position: left 20px center, right 130px top 52px;
  color: #6B6352;
  font-family: var(--ai-314-font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 84px;
  letter-spacing: 0.06em;
}
/* Rows */
body#modern-ai-root .section .accordion .accordion-item {
  position: relative;
  counter-increment: ai314-crit;
  margin: 0;
  border: 0;
  border-bottom: 2px dashed var(--ai-314-line);
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  transition: background-color var(--ai-314-dur) var(--ai-314-ease);
}
body#modern-ai-root .section .accordion .accordion-item:hover {
  background-color: var(--ai-314-score-hover);
}
/* Five filled score dots on the left of each row */
body#modern-ai-root .section .accordion .accordion-item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 24px;
  width: 84px;
  height: 18px;
  margin-top: -9px;
  background-image:
    radial-gradient(circle at 9px 9px, var(--ai-314-action) 0 6px, rgba(242, 118, 10, 0.18) 6.5px 9px, transparent 9.5px),
    radial-gradient(circle at 9px 9px, var(--ai-314-action) 0 6px, rgba(242, 118, 10, 0.18) 6.5px 9px, transparent 9.5px),
    radial-gradient(circle at 9px 9px, var(--ai-314-action) 0 6px, rgba(242, 118, 10, 0.18) 6.5px 9px, transparent 9.5px),
    radial-gradient(circle at 9px 9px, var(--ai-314-action) 0 6px, rgba(242, 118, 10, 0.18) 6.5px 9px, transparent 9.5px),
    radial-gradient(circle at 9px 9px, var(--ai-314-action) 0 6px, rgba(242, 118, 10, 0.18) 6.5px 9px, transparent 9.5px);
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: 0 0, 16.5px 0, 33px 0, 49.5px 0, 66px 0;
  pointer-events: none;
}
/* Approval stamp, carried by the last row and placed on the footer */
body#modern-ai-root .section .accordion .accordion-item:last-child {
  border-bottom: 2px dashed var(--ai-314-line);
}
/* Row header (legacy button) */
body#modern-ai-root .section .accordion .accordion-header {
  display: block;
  width: 100%;
  margin: 0;
  padding: 20px 24px 6px;
  padding-inline-end: var(--ai-314-score-dots-space);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ai-314-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
body#modern-ai-root .section .accordion .accordion-header:focus-visible {
  outline: 3px solid var(--ai-314-action);
  outline-offset: -3px;
}
body#modern-ai-root .section .accordion .accordion-title {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
body#modern-ai-root .section .accordion .accordion-title strong {
  min-width: 0;
  color: var(--ai-314-text);
  font-family: var(--ai-314-font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: break-word;
}
/* Checkmark becomes the row number circle */
body#modern-ai-root .section .accordion .accordion-title .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  border: 2px solid var(--ai-314-action);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
}
body#modern-ai-root .section .accordion .accordion-title .check::before {
  content: counter(ai314-crit);
  color: var(--ai-314-action);
  font-family: var(--ai-314-font-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
/* Row description */
body#modern-ai-root .section .accordion .accordion-panel-inner {
  padding: 0 var(--ai-314-score-dots-space) 20px 24px;
  padding-inline-start: 74px;
  padding-inline-end: var(--ai-314-score-dots-space);
}
body#modern-ai-root .section .accordion .accordion-desc {
  margin: 0;
  color: var(--ai-314-text-muted);
  font-size: 16.5px;
  line-height: 1.75;
  overflow-wrap: break-word;
}

/* Scorecard: mobile */
@media (max-width: 600px) {
  body#modern-ai-root .section .accordion::before,
  body#modern-ai-root .section .accordion::after {
    padding: 0 16px;
  }
  body#modern-ai-root .section .accordion::after {
    min-height: 60px;
    line-height: 60px;
    background-image: linear-gradient(var(--ai-314-score-sign-line), var(--ai-314-score-sign-line));
    background-position: right 110px top 38px;
    background-size: calc(100% - 140px) 1px;
  }
  body#modern-ai-root .section .accordion::before {
    background-position: left 16px top 0;
  }
  body#modern-ai-root .section .accordion.ai-is-inked {
    animation: none;
  }
  body#modern-ai-root .section .accordion .accordion-header {
    padding: 16px 16px 6px;
  }
  body#modern-ai-root .section .accordion .accordion-title {
    gap: 10px;
  }
  body#modern-ai-root .section .accordion .accordion-title strong {
    font-size: 16.5px;
  }
  body#modern-ai-root .section .accordion .accordion-title .check {
    width: 30px;
    height: 30px;
  }
  body#modern-ai-root .section .accordion .accordion-title .check::before {
    font-size: 13px;
  }
  /* Dots move under the description */
  body#modern-ai-root .section .accordion .accordion-panel-inner {
    padding: 0 16px 44px;
    padding-inline-start: 56px;
  }
  body#modern-ai-root .section .accordion .accordion-item::after {
    top: auto;
    bottom: 16px;
    left: 16px;
    margin-top: 0;
  }
}

/* ---------- Figure (logo strip) ---------- */
body#modern-ai-root .section figure {
  margin: 28px auto 0;
  text-align: center;
}

/* ---------- Footnote inside sections ---------- */
body#modern-ai-root .section > p.small-note {
  color: var(--ai-314-crumb-text);
  font-size: 13.6px;
}

/* ---------- FAQ accordion ---------- */
body#modern-ai-root .section.org-faq details {
  margin: 0 0 12px;
  padding: 0;
  border: 1px solid var(--ai-314-line);
  border-radius: var(--ai-314-radius);
  background-color: var(--ai-314-surface-alt);
  box-shadow: var(--ai-314-shadow-sm);
  transition-property: border-color, box-shadow;
  transition-duration: var(--ai-314-dur);
}
body#modern-ai-root .section.org-faq details:hover {
  border-color: var(--ai-314-line-strong);
}
body#modern-ai-root .section.org-faq details[open] {
  border-color: rgba(242, 118, 10, 0.55);
  box-shadow: var(--ai-314-shadow);
}
body#modern-ai-root .section.org-faq details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  color: var(--ai-314-text);
  font-family: var(--ai-314-font-display);
  font-size: 16.8px;
  font-weight: 800;
  line-height: 1.5;
  overflow-wrap: break-word;
}
body#modern-ai-root .section.org-faq details summary::-webkit-details-marker {
  display: none;
}
body#modern-ai-root .section.org-faq details summary::after {
  content: "+";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--ai-314-action);
  color: var(--ai-314-on-action);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  transition: rotate var(--ai-314-dur) var(--ai-314-ease);
}
body#modern-ai-root .section.org-faq details[open] summary::after {
  rotate: 45deg;
}
body#modern-ai-root .section.org-faq details summary:focus-visible {
  outline: 3px solid var(--ai-314-action);
  outline-offset: 2px;
  border-radius: var(--ai-314-radius);
}
body#modern-ai-root .section.org-faq details > p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--ai-314-text-muted);
  line-height: 1.75;
}

/* ---------- Inner pages: tablet ---------- */
@media (max-width: 1100px) {
  body#modern-ai-root .section .grid.grid-premium,
  body#modern-ai-root .section .grid.grid-formats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Inner pages: mobile ---------- */
@media (max-width: 600px) {
  body#modern-ai-root .breadcrumb {
    padding: 10px var(--ai-314-gutter);
    font-size: 13.6px;
  }
  body#modern-ai-root .hero.hero-photo .sub {
    font-size: 17px;
  }
  body#modern-ai-root .differentiator-strip {
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 14.72px;
  }
  body#modern-ai-root .section .grid.grid-premium,
  body#modern-ai-root .section .grid.grid-formats {
    grid-template-columns: minmax(0, 1fr);
  }
  body#modern-ai-root .section .grid-premium .card,
  body#modern-ai-root .section .grid-formats .card {
    padding: 26px 22px 24px;
  }
  body#modern-ai-root .section p a.btn,
  body#modern-ai-root .section > .card > a.btn {
    padding: 14px 24px;
  }
  body#modern-ai-root .section .case {
    border-radius: var(--ai-314-radius);
  }
  body#modern-ai-root .section .case h3 {
    font-size: 19px;
  }
  body#modern-ai-root .section .case .vk-embed.vk-thumb .vk-play {
    width: 48px;
    height: 48px;
  }
  body#modern-ai-root .section.org-faq details summary {
    padding: 14px 16px;
    font-size: 16px;
  }
  body#modern-ai-root .section.org-faq details > p {
    padding: 0 16px 16px;
  }
}

/* ---------- Inner pages: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body#modern-ai-root .section p a.btn:hover,
  body#modern-ai-root .section > .card > a.btn:hover {
    translate: none;
  }
  body#modern-ai-root .section .case .vk-embed.vk-thumb:hover .vk-play {
    scale: none;
  }
}

/* ---------- Tablet (601px to 1100px) ---------- */
@media (max-width: 1100px) {
  body#modern-ai-root .hero.hero-photo {
    border-radius: 0;
  }
  body#modern-ai-root .section.alt {
    border-radius: 0;
    box-shadow: none;
  }
  body#modern-ai-root .main-nav .nav-inner a {
    padding: 13px 11px;
  }
}
@media (max-width: 900px) {
  body#modern-ai-root .stats .stat {
    flex: 1 1 50%;
  }
  body#modern-ai-root .stats .stat:nth-child(odd) {
    border-inline-start: 0;
  }
  body#modern-ai-root .stats .stat:nth-child(n+3) {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
}

/* ---------- Mobile (up to 600px, baseline variant 400px) ---------- */
@media (max-width: 600px) {
  :root {
    --ai-314-gutter: 20px;
    --ai-314-fs-body: 16.5px;
    --ai-314-gap: 18px;
    --ai-314-spot-radius: 60px;
  }
  /* Header: brand and badge stay on two compact rows */
  body#modern-ai-root .site-header .header-inner {
    padding: 6px var(--ai-314-gutter);
    gap: 6px 12px;
    justify-content: center;
  }
  body#modern-ai-root .site-header .brand {
    font-size: 18px;
    justify-content: center;
  }
  body#modern-ai-root .site-header .phone-badge {
    padding: 6px 14px;
  }
  /* Nav: one swipeable row instead of three wrapped rows */
  body#modern-ai-root .main-nav .nav-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 12px;
    gap: 0;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  body#modern-ai-root .main-nav .nav-inner::-webkit-scrollbar {
    display: none;
  }
  body#modern-ai-root .main-nav .nav-inner a {
    flex: 0 0 auto;
    padding: 12px 12px;
    font-size: 15px;
    scroll-snap-align: center;
  }
  /* Hero */
  body#modern-ai-root .hero.hero-photo {
    padding: 56px var(--ai-314-gutter) 52px;
  }
  body#modern-ai-root .hero.hero-photo .eyebrow {
    font-size: 15px;
    padding: 5px 14px;
  }
  body#modern-ai-root .hero.hero-photo .sub-target {
    font-size: 17px;
  }
  body#modern-ai-root .hero.hero-photo .tagline {
    font-size: 16px;
    margin-bottom: 26px;
  }
  body#modern-ai-root .hero .btn,
  body#modern-ai-root .cta-box .btn {
    padding: 15px 28px;
  }
  /* Grids collapse to one column */
  body#modern-ai-root .section .grid.cols-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Stats 2 x 2 */
  body#modern-ai-root .stats .stat {
    padding: 22px 12px;
  }
  body#modern-ai-root .stats .stat .num {
    font-size: 34px;
  }
  body#modern-ai-root .stats .stat .label {
    font-size: 13.5px;
  }
  /* Cards */
  body#modern-ai-root .section .card {
    padding: 30px 22px;
  }
  body#modern-ai-root .section .quote-card {
    --ai-314-badge-pad-x: 22px;
    --ai-314-badge-pad-bottom: 22px;
    padding: 40px var(--ai-314-badge-pad-x) var(--ai-314-badge-pad-bottom);
  }
  body#modern-ai-root .section .quote-card .txt {
    font-size: 16.5px;
  }
  /* CTA and footer */
  body#modern-ai-root .cta-box {
    margin-top: 40px;
  }
  body#modern-ai-root .cta-box .small-note {
    font-size: 15px;
  }
  body#modern-ai-root .site-footer {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body#modern-ai-root .section .accordion.ai-is-inked {
    animation: none;
  }
  body#modern-ai-root .section .stats,
  body#modern-ai-root .section .stats.ai-is-framed {
    animation: none;
  }
  body#modern-ai-root .hero.hero-photo {
    animation: none;
  }
  body#modern-ai-root .site-footer,
  body#modern-ai-root .site-header {
    animation: none;
  }
  body#modern-ai-root .section .card,
  body#modern-ai-root .section .quote-card,
  body#modern-ai-root .hero .btn,
  body#modern-ai-root .cta-box .btn,
  body#modern-ai-root .site-header .phone-badge,
  body#modern-ai-root .main-nav .nav-inner a::after {
    transition-duration: 0.01ms;
  }
  body#modern-ai-root .section .card:hover,
  body#modern-ai-root .section .quote-card:hover,
  body#modern-ai-root .section .grid > .quote-card:nth-child(even):hover,
  body#modern-ai-root .hero .btn:hover,
  body#modern-ai-root .cta-box .btn:hover,
  body#modern-ai-root .site-header .phone-badge:hover {
    translate: none;
    rotate: none;
  }
}

/* ==========================================================================
   v2 (2026-10-27): organizations.html, "when" + "whom" sections
   1. Numbered timeline with client tags   (.ai-when-list, data-client)
   2. Three audience cards with own icons   (.ai-audience-grid, .ai-aud-*)
   3. Bottom-line callout with the single lamp (.ai-bottomline)
   ========================================================================== */
:root {
  --ai-314-icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.3C.9 8.4 2.9 4.5 6.6 4.5c2.2 0 3.6 1.2 4.4 2.5h2c.8-1.3 2.2-2.5 4.4-2.5 3.7 0 5.7 3.9 4.2 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
  --ai-314-icon-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6a2 2 0 0 1 2 2v1h3a2 2 0 0 1 2 2v4H2V8a2 2 0 0 1 2-2h3V5a2 2 0 0 1 2-2zm0 3h6V5H9v1zM2 13.5h8V15h4v-1.5h8V19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5.5z'/%3E%3C/svg%3E");
  --ai-314-icon-city: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V9l6-3v15H3zm7 0V3h7v18h-7zm8 0V10h3v11h-3zM5 11v2h2v-2H5zm0 4v2h2v-2H5zm7-9v2h3V6h-3zm0 4v2h3v-2h-3zm0 4v2h3v-2h-3z'/%3E%3C/svg%3E");
}

/* ---------- 1. Numbered timeline ---------- */
body#modern-ai-root .section .ai-when-list {
  position: relative;
  counter-reset: ai-when;
  margin: 8px 0 0;
}
body#modern-ai-root .section .ai-when-list::before {
  content: "";
  position: absolute;
  inset-inline-start: 23px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: linear-gradient(to bottom, var(--ai-314-action), var(--ai-314-line-strong));
  border-radius: 2px;
}
body#modern-ai-root .section .ai-when-list > p {
  position: relative;
  counter-increment: ai-when;
  margin: 0 0 18px;
  padding: 16px 20px 16px 20px;
  padding-inline-start: 74px;
  background: var(--ai-314-surface);
  border: 1px solid var(--ai-314-line);
  border-radius: var(--ai-314-radius);
  box-shadow: var(--ai-314-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body#modern-ai-root .section .ai-when-list > p:hover {
  transform: translateY(-2px);
  border-color: var(--ai-314-line-strong);
  box-shadow: var(--ai-314-shadow);
}
body#modern-ai-root .section .ai-when-list > p::before {
  content: counter(ai-when, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 14px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ai-314-navy-900);
  color: var(--ai-314-action-glow);
  font-family: var(--ai-314-font-display);
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 0 0 5px var(--ai-314-bg);
  transform: translateX(50%); /* RTL: pull circle onto the line */
}
html[dir="ltr"] body#modern-ai-root .section .ai-when-list > p::before { transform: translateX(-50%); }
body#modern-ai-root .section .ai-when-list > p { margin-inline-start: 24px; }
body#modern-ai-root .section .ai-when-list > p > .check,
body#modern-ai-root .section .ai-audience-grid > p > .check { display: none; }
body#modern-ai-root .section .ai-when-list > p > strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--ai-314-font-display);
  font-size: 18px;
  color: var(--ai-314-text);
}
/* client tag, text comes from data-client */
body#modern-ai-root .section .ai-when-list > p[data-client]::after {
  content: attr(data-client);
  display: inline-block;
  margin-top: 10px;
  padding: 3px 12px;
  border-radius: var(--ai-314-radius-pill);
  background: rgba(242, 118, 10, 0.10);
  border: 1px solid rgba(242, 118, 10, 0.35);
  color: #9A4504;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

/* ---------- 2. Audience cards ---------- */
body#modern-ai-root .section .ai-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ai-314-gap);
  margin: 12px 0 28px;
}
body#modern-ai-root .section .ai-audience-grid > p {
  position: relative;
  margin: 0;
  padding: 26px 22px 24px;
  background: var(--ai-314-surface);
  border: 1px solid var(--ai-314-line);
  border-top: 4px solid var(--ai-314-action);
  border-radius: var(--ai-314-radius);
  box-shadow: var(--ai-314-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
body#modern-ai-root .section .ai-audience-grid > p:hover {
  transform: translateY(-4px);
  box-shadow: var(--ai-314-shadow);
}
body#modern-ai-root .section .ai-audience-grid > p::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 16px;
  background-color: var(--ai-314-navy-900);
  background-image: radial-gradient(circle at 30% 25%, rgba(255,255,255,.12), transparent 60%);
}
body#modern-ai-root .section .ai-audience-grid > p::after {
  content: "";
  position: absolute;
  top: 40px;
  inset-inline-start: 36px;
  width: 28px;
  height: 28px;
  background-color: var(--ai-314-action-glow);
  -webkit-mask: var(--ai-314-icon-heart) center / contain no-repeat;
  mask: var(--ai-314-icon-heart) center / contain no-repeat;
}
body#modern-ai-root .section .ai-audience-grid > p.ai-aud-business::after {
  -webkit-mask-image: var(--ai-314-icon-briefcase);
  mask-image: var(--ai-314-icon-briefcase);
}
body#modern-ai-root .section .ai-audience-grid > p.ai-aud-city::after {
  -webkit-mask-image: var(--ai-314-icon-city);
  mask-image: var(--ai-314-icon-city);
}
body#modern-ai-root .section .ai-audience-grid > p > strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--ai-314-font-display);
  font-size: 19px;
  color: var(--ai-314-text);
}

/* ---------- 3. Bottom-line callout (the one lamp) ---------- */
body#modern-ai-root .section > p.ai-bottomline {
  position: relative;
  margin: 8px 0 28px;
  padding: 24px 28px;
  padding-inline-start: 80px;
  background: linear-gradient(135deg, var(--ai-314-navy-900), var(--ai-314-navy-800));
  color: var(--ai-314-on-dark-muted);
  border-radius: var(--ai-314-radius);
  border-inline-start: 5px solid var(--ai-314-action);
  box-shadow: var(--ai-314-shadow);
  font-size: 17px;
  line-height: 1.75;
}
body#modern-ai-root .section > p.ai-bottomline > strong {
  color: var(--ai-314-action-glow);
}
body#modern-ai-root .section > p.ai-bottomline::before {
  content: "";
  position: absolute;
  inset-inline-start: 26px;
  top: 26px;
  width: 34px;
  height: 34px;
  background-color: var(--ai-314-lamp-orange);
  -webkit-mask: var(--ai-314-lamp-icon) center / contain no-repeat;
  mask: var(--ai-314-lamp-icon) center / contain no-repeat;
  filter: var(--ai-314-lamp-orange-glow);
}

@media (max-width: 900px) {
  body#modern-ai-root .section .ai-audience-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 600px) {
  body#modern-ai-root .section .ai-when-list > p { padding-inline-start: 46px; margin-inline-start: 20px; }
  body#modern-ai-root .section .ai-when-list > p::before { width: 40px; height: 40px; font-size: 15px; }
  body#modern-ai-root .section .ai-when-list::before { inset-inline-start: 19px; }
  body#modern-ai-root .section > p.ai-bottomline { padding: 66px 20px 20px; }
  body#modern-ai-root .section > p.ai-bottomline::before { top: 20px; inset-inline-start: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  body#modern-ai-root .section .ai-when-list > p,
  body#modern-ai-root .section .ai-audience-grid > p { transition: none; }
  body#modern-ai-root .section .ai-when-list > p:hover,
  body#modern-ai-root .section .ai-audience-grid > p:hover { transform: none; }
}

/* ==========================================================================
   v4 (2026-11-04): readable footer (white, larger links)
   ========================================================================== */
body#modern-ai-root .site-footer {
  font-size: 1rem;
}
body#modern-ai-root .site-footer > div:first-child {
  color: #FFFFFF;
}
body#modern-ai-root .site-footer > div + div {
  color: rgba(255, 255, 255, 0.55);
  margin-top: 12px;
}
body#modern-ai-root .site-footer > div + div a {
  color: #FFFFFF;
  font-size: 1.05rem;
  padding: 4px 6px;
  text-shadow: none;
}
body#modern-ai-root .site-footer > div + div a:hover {
  color: var(--ai-314-action-hover);
  text-shadow: none;
}


/* ==========================================================================
   v6 (2026-11-09): stage 2, buttons and cards (motion review)
   1. Press feedback: buttons shrink slightly while pressed
   2. Touch screens: no "lift" effects on tap (they stick after the finger leaves)
   3. Case photo zoom: 300ms instead of 500ms
   ========================================================================== */

/* 1. Press feedback */
body#modern-ai-root .btn,
body#modern-ai-root .hero .btn,
body#modern-ai-root .cta-box .btn,
body#modern-ai-root .section p a.btn,
body#modern-ai-root .section > .card > a.btn,
body#modern-ai-root .site-header .phone-badge,
body#modern-ai-root .card-link {
  transition-property: background-color, color, translate, scale, transform, box-shadow;
  transition-duration: var(--ai-314-dur);
  transition-timing-function: var(--ai-314-ease);
}
body#modern-ai-root .btn:active,
body#modern-ai-root .hero .btn:active,
body#modern-ai-root .cta-box .btn:active,
body#modern-ai-root .section p a.btn:active,
body#modern-ai-root .section > .card > a.btn:active,
body#modern-ai-root .site-header .phone-badge:active,
body#modern-ai-root .card-link:active {
  scale: 0.97;
  transition-duration: 120ms;
}

/* 2. Touch screens: hover lifts are for mouse only.
   !important is used on purpose: these rules must win over every hover rule above, only on touch devices. */
@media (hover: none), (pointer: coarse) {
  body#modern-ai-root .card:hover,
  body#modern-ai-root .quote-card:hover,
  body#modern-ai-root .case:hover,
  body#modern-ai-root .btn:hover,
  body#modern-ai-root .card-link:hover,
  body#modern-ai-root .site-header .phone-badge:hover,
  body#modern-ai-root .ai-when-list > p:hover,
  body#modern-ai-root .ai-audience-grid > p:hover,
  body#modern-ai-root .case:hover > img:first-of-type {
    transform: none !important;
    translate: none !important;
    rotate: none !important;
  }
  body#modern-ai-root .vk-embed.vk-thumb:hover .vk-play {
    scale: none !important;
  }
}

/* 3. Case photo zoom on hover: faster */
body#modern-ai-root .case > img:first-of-type {
  transition: transform 300ms var(--ai-314-ease);
}

@media (prefers-reduced-motion: reduce) {
  body#modern-ai-root .btn:active,
  body#modern-ai-root .site-header .phone-badge:active,
  body#modern-ai-root .card-link:active {
    scale: none;
  }
}


/* ==========================================================================
   v7 (2026-11-09): stage 3, page entrance and scroll reveal (motion review)
   1. Hero: 500ms instead of 700ms, 12px instead of 18px, 60ms between lines
   2. Scroll reveal: 12px instead of 26px, 450ms instead of 600ms
   ========================================================================== */

/* 1. Hero entrance */
@keyframes ai-314-hero-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
body#modern-ai-root .hero-photo .eyebrow { animation: ai-314-hero-in 500ms var(--ai-314-ease) 0ms both; }
body#modern-ai-root .hero-photo h1       { animation: ai-314-hero-in 500ms var(--ai-314-ease) 60ms both; }
body#modern-ai-root .hero-photo .sub,
body#modern-ai-root .hero-photo img      { animation: ai-314-hero-in 500ms var(--ai-314-ease) 120ms both; }
body#modern-ai-root .hero-photo .tagline { animation: ai-314-hero-in 500ms var(--ai-314-ease) 180ms both; }
body#modern-ai-root .hero-photo .btn     { animation: ai-314-hero-in 500ms var(--ai-314-ease) 240ms both; }

/* 2. Scroll reveal (classes added by reveal.v10.js) */
body#modern-ai-root .reveal { transform: translateY(12px); }
body#modern-ai-root .reveal.is-visible { transform: translateY(0); }
body#modern-ai-root .section .card {
  transition-duration: 450ms, 450ms, var(--ai-314-dur), var(--ai-314-dur), var(--ai-314-dur);
}
body#modern-ai-root .section .quote-card {
  transition-duration: 450ms, 450ms, var(--ai-314-dur), 0.45s, var(--ai-314-dur), var(--ai-314-dur);
}

@media (prefers-reduced-motion: reduce) {
  body#modern-ai-root .hero-photo .eyebrow,
  body#modern-ai-root .hero-photo h1,
  body#modern-ai-root .hero-photo .sub,
  body#modern-ai-root .hero-photo img,
  body#modern-ai-root .hero-photo .tagline,
  body#modern-ai-root .hero-photo .btn {
    animation: none;
  }
  body#modern-ai-root .reveal,
  body#modern-ai-root .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   v8 (2026-11-09): accessibility fixes (WCAG 2.1 AA / IS 5568)
   1. Orange buttons: navy text instead of white (contrast 5.7:1 instead of 2.85:1)
   2. Landing page contact links: white on the dark box (were dark blue on dark)
   3. Comparison table highlight: darker orange (contrast above 4.5:1)
   4. "Skip to main content" link + screen-reader-only headings
   ========================================================================== */

/* 1. Orange buttons */
body#modern-ai-root a.btn,
body#modern-ai-root button.btn,
body#modern-ai-root .section a.btn,
body#modern-ai-root .section p a.btn,
body#modern-ai-root .section button.btn {
  color: var(--ai-314-on-action);
}
body#modern-ai-root a.btn:hover,
body#modern-ai-root button.btn:hover,
body#modern-ai-root .section a.btn:hover,
body#modern-ai-root .section p a.btn:hover,
body#modern-ai-root .section button.btn:hover {
  background-color: var(--ai-314-action-hover);
  color: var(--ai-314-on-action);
}
body#modern-ai-root .principle-card .principle-num {
  color: var(--ai-314-on-action);
}

/* 2. Landing page contact box */
body#modern-ai-root .lp-side a:not(.btn),
body#modern-ai-root .section .lp-side p a:not(.btn),
body#modern-ai-root .lp-side p a:not(.btn):hover {
  color: #FFFFFF;
}

/* 3. Comparison table highlight */
body#modern-ai-root .compare-table tbody tr.row-highlight td:first-child {
  color: #A84B00;
}

/* 4. Skip link and screen-reader-only text */
.ai-skip-link {
  position: absolute;
  top: -200px;
  right: 16px;
  z-index: 3000;
  padding: 10px 18px;
  border-radius: 8px;
  background: #F2760A;
  color: #0E2230;
  font-weight: 800;
  text-decoration: none;
}
.ai-skip-link:focus {
  top: 12px;
  outline: 3px solid #FFFFFF;
  box-shadow: 0 0 0 6px #0E2230;
}
.ai-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#main-content:focus {
  outline: none;
}
body#modern-ai-root .btn-wa svg {
  fill: currentColor;
}