/* Clean rebuild of the parallaxtec.com homepage, matched to the original theme (webteck + Elementor):
     Barlow headings / Roboto body, title #141D38, body #737887, brand navy #252161, purple #684DF4,
     dark sections #080E1C, section backgrounds sampled from the live page. */
  :host {
    --title-color: #141D38;   /* headings */
    --body-color: #737887;    /* paragraph text */
    --body-dark: #A1A6B0;     /* paragraph text on dark sections */
    --navy: #252161;          /* buttons, eyebrows, icon circles (Parallax navy) */
    --navy-2: #001161;        /* deep blue button variant */
    --theme: #684DF4;         /* purple accent: bottom bar edges, highlight words */
    --blue: #3E66F3;          /* secondary blue: eyebrow variant, icons */
    --dark: #080E1C;          /* stats, testimonial, footer */
    --hero: #24215E;          /* hero indigo */
    --card-dark: #1C1C25;     /* project cards */
    --bg: #ffffff;
    --bg-welcome-a: #EEEFF1;
    --bg-welcome-b: #E0E1F1;
    --bg-services: #F4F4F4;
    --bg-choose: #F8FAFF;
    --bg-product: #EFEDFA;
    --bg-projects: #EFF1F9;
    --bg-smoke: #F5F5F5;      /* team, appointment */
    --line: #E2E8FA;
    --focus: #ffb800;
    --signal: #ffdd1f;        /* the yellow in the Parallax mark (shared with the Germany page) */

    --display: "Barlow", "Segoe UI", Arial, sans-serif;
    --body: "Roboto", "Segoe UI", Arial, sans-serif;

    --gl: max(16px, env(safe-area-inset-left, 0px));
    --gr: max(16px, env(safe-area-inset-right, 0px));
    --max: 1200px;
    --space: 120px;           /* theme --section-space */
    color-scheme: light;
  }
  @media (max-width: 991px) { :host { --space: 80px; } }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { margin: 0; background: var(--bg); color: var(--body-color); font: 400 16px/26px var(--body); -webkit-font-smoothing: antialiased; }
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  figure { margin: 0; }
  [hidden] { display: none !important; }
  p { margin: 0; }

  /* Theme heading scale */
  h1, h2, h3, h4, h5, h6 { font-family: var(--display); font-weight: 700; color: var(--title-color); margin: 0; }
  h1 { font-size: 48px; line-height: 1.208; }
  h2 { font-size: 40px; line-height: 1.25; }
  h3 { font-size: 36px; line-height: 1.278; }
  h4 { font-size: 30px; line-height: 1.333; }
  h5 { font-size: 24px; line-height: 1.417; }
  h6 { font-size: 20px; line-height: 1.5; }
  @media (max-width: 1199px) { h1 { font-size: 44px; } h2 { font-size: 36px; } h3 { font-size: 30px; } h4 { font-size: 24px; } }
  @media (max-width: 767px) { h1 { font-size: 40px; } h2 { font-size: 34px; } h3 { font-size: 26px; } h4 { font-size: 22px; } h5 { font-size: 20px; } h6 { font-size: 18px; } }

  .wrap { max-width: var(--max); margin-inline: auto; padding-left: var(--gl); padding-right: var(--gr); }
  section { padding-block: var(--space); }
  [id] { scroll-margin-top: 96px; }

  /* Eyebrow (.sub-title): Barlow 16px / 600, uppercase, navy, with the small spiral mark */
  .eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 16px/24px var(--display); text-transform: uppercase; color: var(--navy); margin: 0; }
  .eyebrow::before {
    content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
    background: repeating-conic-gradient(var(--blue) 0 14deg, transparent 14deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 0 4px, #000 4.5px 11px, transparent 11.5px);
            mask: radial-gradient(circle, transparent 0 4px, #000 4.5px 11px, transparent 11.5px);
  }
  .eyebrow.blue { color: var(--blue); }
  .eyebrow.light { color: #ffffff; }
  .sec-head { display: grid; gap: 15px; justify-items: center; text-align: center; max-width: 1000px; margin: 0 auto 55px; }
  .sec-head h2 .hl { color: var(--navy); }
  .services .sec-head h2 { max-width: 620px; }
  .sec-head p { color: var(--body-color); }

  /* Buttons (.th-btn): Roboto 14px / 500, uppercase, 4px radius, navy fill */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-width: 144px; padding: 20.5px 24px; border: 0; border-radius: 4px; cursor: pointer;
    font: 500 14px/1 var(--body); text-transform: uppercase; text-decoration: none;
    background: var(--navy); color: #fff; transition: background-color .2s, color .2s, box-shadow .2s;
  }
  .btn:hover { background: var(--theme); }
  .btn.deep { background: var(--navy-2); }
  .btn.pill { border-radius: 30px; }
  .btn.small { min-width: 0; padding: 14px 18px; font-size: 13px; }
  .btn.outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); }
  .btn.outline:hover { background: #fff; color: var(--title-color); }
  .btn .ar { font-size: 1em; }

  /* ===== Top bar + header (white) ===== */
  .site-header { position: sticky; top: 0; z-index: 30; background: #fff; box-shadow: 0 4px 20px rgba(20,29,56,.06); }
  .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 16px; }
  .logo img { width: 150px; height: auto; }
  .nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
  /* Main menu (parallaxtec.com style): pill highlight on hover, "+" turns to "−", white dropdowns with spiral bullets */
  .menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
  .menu > li { position: relative; }
  .menu > li > a, .menu-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border: 0; border-radius: 100px; background: transparent; cursor: pointer;
    color: var(--title-color); text-decoration: none; font: 600 15px/1.2 var(--display); text-transform: uppercase; white-space: nowrap; transition: background-color .4s ease-in-out, color .2s; }
  .menu > li > a:hover, .menu > li:hover > .menu-toggle, .menu > li.open > .menu-toggle, .menu-toggle:focus-visible { background: rgba(64,102,242,.1); color: var(--navy); }
  .menu > li > a[aria-current="page"] { color: var(--navy); }
  .menu-toggle::after { content: "+"; display: inline-block; width: .7em; font-size: 1.1em; font-weight: 500; transition: transform .3s ease-in-out; }
  .menu > li:hover > .menu-toggle::after, .menu > li.open > .menu-toggle::after { content: "−"; transform: rotate(180deg); }
  .sub-menu { position: absolute; top: calc(100% + 15px); left: -13px; z-index: 40; list-style: none; margin: 0; min-width: 190px; width: max-content;
    padding: 18px 20px 18px 18px; background: #fff; box-shadow: 0 4px 15px rgba(1,15,28,.06);
    visibility: hidden; opacity: 0; transform: scaleY(0); transform-origin: top center; transition: all .4s ease; }
  .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 15px; }   /* hover bridge across the gap */
  .menu > li:hover > .sub-menu, .menu > li:focus-within > .sub-menu, .menu > li.open > .sub-menu { visibility: visible; opacity: 1; transform: scaleY(1); }
  .sub-menu li { padding: 0 9px; }
  .sub-menu a { position: relative; display: block; padding-left: 23px; color: var(--title-color); text-decoration: none; font: 600 16px/30px var(--display); }
  .sub-menu a::before { content: ""; position: absolute; left: 0; top: 9px; width: 13px; height: 13px; background: var(--navy);
    -webkit-mask: var(--spiral) center/contain no-repeat; mask: var(--spiral) center/contain no-repeat; }
  .sub-menu a:hover { color: var(--navy); }
  .site-header { --spiral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 8.2a.9.9 0 1 1 1 .9 1.9 1.9 0 0 1-2-1.9 2.9 2.9 0 0 1 3-2.9 3.9 3.9 0 0 1 3.9 3.9A4.9 4.9 0 0 1 9 13.1 5.9 5.9 0 0 1 2.1 7.2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
  @media (prefers-reduced-motion: reduce) { .sub-menu, .menu-toggle::after { transition: none; } }
  .nav .btn { min-width: 0; padding: 17px 26px; }
  /* Mobile side menu: below 1200px the menu moves into a panel that slides in from the right, opened by the burger button.
     On wider screens the panel wrapper is display: contents, so the menu sits in the header row as before. */
  .nav-drawer { display: contents; }
  .drawer-head, .drawer-cta, .nav-burger, .nav-scrim { display: none; }
  @media (max-width: 1199px) {
    .nav-burger { display: inline-grid; place-content: center; gap: 5px; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
      background: rgba(64,102,242,.1); cursor: pointer; transition: background-color .3s; }
    .nav-burger:hover { background: rgba(64,102,242,.18); }
    .nav-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--navy); }
    .nav-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(8,14,28,.55);
      opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
    .nav-drawer { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(360px, 88vw);
      overflow-y: auto; overscroll-behavior: contain; padding: 14px 24px max(28px, env(safe-area-inset-bottom, 0px)); background: #fff;
      box-shadow: -12px 0 40px rgba(8,14,28,.2); visibility: hidden; transform: translateX(100%); transition: transform .35s ease, visibility 0s linear .35s; }
    .site-header.menu-open .nav-scrim { opacity: 1; visibility: visible; transition: opacity .35s ease; }
    .site-header.menu-open .nav-drawer { visibility: visible; transform: none; transition: transform .35s ease; }
    .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
    .drawer-head img { width: 130px; height: auto; }
    .nav-close { display: inline-grid; place-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
      background: rgba(64,102,242,.1); color: var(--navy); cursor: pointer; }
    .nav-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
    .menu { display: block; }
    .menu > li { border-bottom: 1px solid var(--line); }
    .menu > li > a, .menu-toggle { display: flex; justify-content: space-between; width: 100%; padding: 16px 2px; border-radius: 0; font-size: 16px; text-align: left; }
    .menu > li > a:hover, .menu > li:hover > .menu-toggle, .menu > li.open > .menu-toggle { background: transparent; color: var(--navy); }
    .menu-toggle::after { width: 1em; text-align: center; }
    .menu > li:hover:not(.open) > .menu-toggle::after { content: "+"; transform: none; }
    /* Sub-menus open in place, one at a time, on a tap */
    .sub-menu { display: none; position: static; min-width: 0; width: auto; padding: 0 0 14px 4px; box-shadow: none;
      visibility: visible; opacity: 1; transform: none; transition: none; }
    .sub-menu::before { content: none; }
    .menu > li.open > .sub-menu { display: block; }
    .sub-menu li { padding: 0; }
    .sub-menu a { line-height: 40px; }
    .sub-menu a::before { top: 14px; }
    .drawer-cta { display: flex; margin-top: 28px; width: 100%; }
  }
  @media (max-width: 575px) { .nav > .btn { display: none; } .site-header .wrap { padding-block: 12px; } }

  /* ===== Hero (parallaxtec.com "hero 2"): night-lights world map under a navy-to-clear gradient,
     white curved lines top right, a skewed navy band bottom right and pulsing rings on Sri Lanka ===== */
  .hero { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: #fff; padding-block: 0; }
  /* The map is laid out like background-size: cover (2:1 image), so the rings can be pinned to Sri Lanka at any size */
  .hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; container-type: size; }
  .hero-map { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max(100cqw, 200cqh); aspect-ratio: 2 / 1; }
  .hero-map img { width: 100%; height: 100%; display: block; }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, var(--navy), transparent); opacity: .9; }
  .hero-ripples { position: absolute; left: 72.3%; top: 46%; width: 0; height: 0; }
  .hero-ripples span { position: absolute; left: -50px; top: -50px; width: 100px; height: 100px; border: 1px solid #fff; border-radius: 50%; opacity: 0; animation: heroripple 8s linear infinite; }
  .hero-ripples span:nth-child(2) { animation-delay: 1s; } .hero-ripples span:nth-child(3) { animation-delay: 2s; }
  .hero-ripples span:nth-child(4) { animation-delay: 3s; } .hero-ripples span:nth-child(5) { animation-delay: 4s; }
  .hero-ripples span:nth-child(6) { animation-delay: 5s; }
  @keyframes heroripple { 0% { transform: scale(.6); opacity: .2; } 100% { transform: scale(4); opacity: 0; } }
  /* Reduced motion: still rings at set sizes instead of pulsing */
  @media (prefers-reduced-motion: reduce) {
    .hero-ripples span { animation: none; opacity: .14; }
    .hero-ripples span:nth-child(1) { transform: scale(.8); } .hero-ripples span:nth-child(2) { transform: scale(1.2); }
    .hero-ripples span:nth-child(3) { transform: scale(1.9); } .hero-ripples span:nth-child(4) { transform: scale(2.6); }
    .hero-ripples span:nth-child(5) { transform: scale(3.3); } .hero-ripples span:nth-child(6) { display: none; }
  }
  .hero-shape1, .hero-shape2, .hero-shape3 { position: absolute; right: 0; z-index: 0; pointer-events: none; }
  .hero-shape1 { bottom: 0; width: 215px; height: 430px; background: var(--navy); transform: skewX(-45deg); transform-origin: bottom; opacity: .65; }
  .hero-shape2, .hero-shape3 { top: 0; }
  .hero-inner { position: relative; z-index: 1; width: 100%; max-width: var(--max); margin-inline: auto; padding: clamp(110px, 12.5vw, 240px) var(--gr) clamp(110px, 12.5vw, 240px) var(--gl); }
  .hero-copy { max-width: 680px; display: grid; justify-items: start; }
  .hero .kicker { font: 600 20px/1.4 var(--display); text-transform: uppercase; color: #fff; margin-bottom: 17px; }
  .hero h1 { color: #fff; font-size: 74px; line-height: 1.135; margin-bottom: 21px; }
  .hero .lede { max-width: 62ch; font-size: 18px; line-height: 28px; font-weight: 500; color: #fff; margin-bottom: 43px; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 20px; }
  .hero-actions .btn { padding: 20px 28px; }
  .hero-actions .btn.outline { padding-inline: 40px; }
  @media (max-width: 1400px) { .hero h1 { font-size: 68px; } }
  @media (max-width: 1199px) { .hero h1 { font-size: 60px; } }
  @media (max-width: 991px) {
    .hero h1 { font-size: 54px; line-height: 1.2; }
    .hero-shape1 { width: 180px; height: 360px; } .hero-shape2 { width: 110px; } .hero-shape3 { width: 150px; }
  }
  @media (max-width: 767px) {
    .hero::before { background: var(--navy); opacity: .6; }
    .hero-shape1 { display: none; }
    .hero-copy { margin-inline: auto; justify-items: center; text-align: center; }
    .hero-actions { justify-content: center; }
    .hero .kicker { font-size: 18px; }
    .hero h1 { font-size: 48px; }
  }
  @media (max-width: 575px) {
    .hero .kicker { font-size: 16px; margin-bottom: 12px; }
    .hero h1 { font-size: 38px; line-height: 1.24; margin-bottom: 16px; }
    .hero .lede { margin-bottom: 28px; }
  }
  @media (max-width: 390px) { .hero h1 { font-size: 34px; line-height: 1.3; } }
  /* Yellow and ghost buttons for the hero */
  .btn.signal { background: var(--signal); color: var(--title-color); }
  .btn.signal:hover { background: #ffe866; }

  /* ===== Germany schedule: flat navy band under the hero's V, with the photo city cards, video-call card and November calendar ===== */
  .meet { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); padding-block: clamp(40px, 5vw, 56px) clamp(72px, 9vw, 120px); }
  .meet-head { display: grid; gap: 14px; margin-bottom: clamp(40px, 5vw, 56px); }
  .meet-head .eyebrow { color: var(--signal); font: 700 14px/1.3 var(--body); letter-spacing: .14em; }
  .meet-head .eyebrow::before { display: none; }
  .meet-head .eyebrow svg { flex: none; width: 1.45em; height: 1.45em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .meet-head h2 { color: #fff; font-size: clamp(36px, 20px + 2.6vw, 56px); line-height: 1.08; letter-spacing: -0.01em; }
  .meet-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.95fr); grid-template-rows: auto auto; gap: 22px; }

  .status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #dfe3f3; color: var(--title-color); font: 700 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; }
  .status-pill i { width: 7px; height: 7px; border-radius: 50%; background: #0b6cf0; }
  .cc[data-state="now"] .status-pill { background: #FFD21E; }
  .cc[data-state="now"] .status-pill i { background: var(--title-color); animation: blink 1.2s steps(2, jump-none) infinite; }
  .cc[data-state="gone"] { opacity: .6; }
  .cc[data-state="gone"] .cc-btn { display: none; }
  @keyframes blink { to { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .cc[data-state="now"] .status-pill i { animation: none; } }

  .cc { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #f8f9ff; }
  .cc-photo { position: relative; min-height: 200px; padding: 18px 22px 46px; display: grid; align-content: start; gap: 10px; justify-items: start; color: #fff;
    background: linear-gradient(180deg, rgba(8,12,40,.55) 0%, rgba(8,12,40,.15) 60%, rgba(8,12,40,.3) 100%), var(--img) center/cover no-repeat; }
  /* Soft blur + slight darkening behind the label, city and date, fading out to a sharp photo on the right */
  .cc-photo { isolation: isolate; }
  .cc-photo::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(8,12,40,.35) 0%, rgba(8,12,40,.12) 45%, rgba(8,12,40,0) 70%);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 35%, transparent 72%); mask-image: linear-gradient(90deg, #000 0%, #000 35%, transparent 72%);
  }
  .cc-photo > * { position: relative; z-index: 1; }
  .cc-photo > .wave { position: absolute; z-index: 2; }
  .cc-city { display: flex; align-items: center; gap: 10px; color: #fff; font: 700 36px/1.05 var(--display); margin-top: 6px; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
  .cc-city svg { width: 24px; height: 24px; flex: none; fill: #FFD21E; }
  .cc-date { display: flex; align-items: center; gap: 10px; font: 700 18px/1 var(--display); text-shadow: 0 2px 10px rgba(0,0,0,.45); }
  .cc-date svg, .vc-date svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
  .wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 38px; display: block; }
  .cc-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 22px 22px; }
  .cc-body h3 { font-size: 20px; line-height: 1.35; color: var(--title-color); }
  .cc-body p { font-size: 14px; line-height: 22px; color: #5d6278; }
  .cc-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 18px; border-radius: 10px; text-decoration: none;
    background: linear-gradient(180deg, #ffe45c 0%, #ffc61a 100%); color: var(--title-color); font: 700 15px/1 var(--body);
    transition: transform .15s, filter .15s; }
  .cc-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }

  /* Video-call card: copy on the left, photo fading in from the right */
  .vc { grid-column: 1 / span 2; position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; background: #f8f9ff; padding: 22px 24px; min-height: 200px; display: grid; align-content: start; gap: 10px; justify-items: start; }
  .vc-photo { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 64%; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%); mask-image: linear-gradient(to right, transparent 0%, #000 45%); }
  /* Soft focus so the photo sets the scene without competing with the copy; scaled up to hide the blurred edges */
  .vc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: blur(3px) saturate(1.05); transform: scale(1.08); }
  .vc-title { display: flex; align-items: center; gap: 12px; font: 700 34px/1.05 var(--display); color: var(--title-color); margin-top: 4px; }
  .vc-title svg { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--title-color); stroke-width: 2; }
  .vc-date { display: flex; align-items: center; gap: 10px; font: 700 17px/1 var(--display); color: var(--title-color); }
  .vc p { max-width: 34ch; font-size: 14px; line-height: 22px; color: #5d6278; }
  .vc .cc-btn { position: absolute; right: 20px; bottom: 20px; min-width: 210px; }

  /* Calendar card */
  .cal-card { grid-column: 3; grid-row: 1 / span 2; position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; background: #f8f9ff; padding: 24px 22px 0; display: flex; flex-direction: column; }
  .cal-card .flag { position: absolute; top: 0; right: 0; width: 92px; height: 92px; pointer-events: none;
    background: linear-gradient(to bottom left, transparent 0 22%, #111 22% 33%, #dd0000 33% 44%, #ffce00 44% 55%, transparent 55%); }
  .cal-top { display: flex; align-items: center; gap: 12px; }
  .cal-top .ic { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--navy); }
  .cal-top .ic svg { width: 20px; height: 20px; fill: none; stroke: #FFD21E; stroke-width: 2; }
  .cal-top strong { font: 700 24px/1.1 var(--display); color: var(--title-color); }
  .cal-top strong { padding-right: 40px; }
  .cal-nav { display: flex; justify-content: flex-end; gap: 14px; margin: 18px 4px 4px; color: #9aa0b8; font-size: 16px; }
  .cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px 4px; font-variant-numeric: tabular-nums; }
  .cal-days .dow { text-align: center; font: 700 12px/1 var(--body); color: #6b7088; padding-bottom: 6px; }
  .cal-days .d { aspect-ratio: 1; display: grid; place-items: center; border-radius: 9px; font: 600 14px/1 var(--body); color: var(--title-color); }
  .cal-days .we { color: #9aa0b8; }
  .cal-days .fra { background: #0b6cf0; color: #fff; }
  .cal-days .ber { background: #FFD21E; color: var(--title-color); }
  .cal-days .d.today { box-shadow: inset 0 0 0 2px var(--navy); }
  .cal-days .fra.today, .cal-days .ber.today { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--navy); }
  .cal-legend { display: grid; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #e3e6f3; font-size: 13px; color: #5d6278; }
  .cal-legend span { display: flex; align-items: center; gap: 10px; }
  .cal-legend i { width: 12px; height: 12px; flex: none; border-radius: 3px; }
  .cal-skyline { margin: auto -22px 0; padding-top: 22px; }
  .cal-skyline svg { display: block; width: 100%; height: auto; }


  @media (max-width: 1099px) {
    .meet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vc { grid-column: 1 / -1; order: 1; }
    .cal-card { grid-column: 1 / -1; grid-row: auto; order: 2; }
    .cal-card .cal-days { max-width: 440px; }
  }
  @media (max-width: 640px) {
    .meet { padding-bottom: 64px; }
    .meet-grid { grid-template-columns: minmax(0, 1fr); }
    .cc-city { font-size: 32px; }
    .vc { padding-top: 180px; }
    .vc-photo { left: 0; width: 100%; bottom: auto; height: 190px; }
    .vc-photo { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
    .vc .cc-btn { position: static; width: 100%; margin-top: 8px; }
    .vc-title { font-size: 30px; }
  }

  /* ===== Welcome (soft grey → lavender gradient) ===== */
  .welcome { background: var(--bg-welcome-a) url("images/ptec/welcome-bg.jpg") center/cover no-repeat; }
  .welcome .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
  .welcome-text { display: grid; gap: 18px; justify-items: start; }
  .welcome-text strong { color: var(--title-color); }
  .welcome-photo { position: relative; display: grid; gap: 16px; }
  .welcome-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 24px; }
  /* Top photo a little taller than the bottom one; together they keep the height of two 16:10 photos */
  @media (max-width: 991px) {
    .welcome-photo img:first-child { aspect-ratio: 4 / 3; }
    .welcome-photo img:last-child { aspect-ratio: 2 / 1; }
  }
  /* Green star tucked behind the top photo, drifting gently left and right */
  .welcome-photo { isolation: isolate; }
  .welcome-photo img { position: relative; z-index: 1; }
  .welcome-photo::before { content: ""; position: absolute; left: -26px; top: -2px; width: 56px; height: 56px; z-index: 0; background: #27d07a; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: star-sway 3s ease-in-out infinite alternate; }
  @keyframes star-sway { from { transform: translateX(-8px); } to { transform: translateX(8px); } }
  @media (prefers-reduced-motion: reduce) { .welcome-photo::before { animation: none; } }
  /* Desktop: the photo column takes exactly the text column's height (contain: size stops the photos from setting it),
     so the top photo lines up with the eyebrow and the bottom photo with the button */
  @media (min-width: 992px) {
    .welcome .wrap { align-items: stretch; }
    .welcome-photo { contain: size; grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); }
    .welcome-photo img { height: 100%; aspect-ratio: auto; }
    .welcome-photo img:first-child { object-position: 50% 35%; }
  }
  @media (max-width: 991px) { .welcome .wrap { grid-template-columns: minmax(0, 1fr); } }

  /* ===== Stats (#080E1C) ===== */
  .stats { position: relative; isolation: isolate; background: var(--dark); color: #fff; padding-block: 80px; }
  /* The site's fine blue wave lines, laid over the dark band */
  .stats::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("images/ptec/stats-bg.png") center/cover no-repeat; }
  .stats .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  @media (max-width: 1199px) { .stats .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; } }
  .stat { display: flex; align-items: center; gap: 18px; }
  .stat .ic { flex: none; position: relative; width: 74px; height: 74px; display: grid; place-items: center; color: var(--navy); }
  .stat .ic::before { content: ""; position: absolute; inset: 0; background: #fff; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; box-shadow: -6px -4px 0 #3E66F3; }
  .stat .ic svg { position: relative; width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .stat b { display: block; font: 700 36px/1 var(--display); color: #fff; }
  .stat span { display: block; margin-top: 6px; font: 500 16px/1.3 var(--body); color: #fff; }
  @media (max-width: 991px) { .stats .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; } }
  @media (max-width: 575px) { .stats .wrap { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 420px) { .stat b { font-size: 30px; } .stat .ic { width: 60px; height: 60px; } }

  /* ===== Services (#F4F4F4, white cards with a navy icon circle in a halo) ===== */
  .services { background: var(--bg-services); }
  .services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 50px; }
  .svc { position: relative; background: #fff; border-radius: 10px; padding: 70px 26px 34px; display: grid; gap: 14px; justify-items: center; text-align: center; box-shadow: 0 6px 30px rgba(20,29,56,.08); }
  .svc .ic { position: absolute; top: -50px; left: 50%; translate: -50% 0; width: 100px; height: 100px; border-radius: 50%; display: grid; place-items: center; background: #e9e9ef; }
  .svc .ic i { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; box-shadow: 0 0 0 4px #fff inset; }
  .svc .ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .svc h3 { font-size: 22px; line-height: 1.35; }
  .svc p { color: var(--body-color); font-size: 16px; line-height: 26px; }
  .svc .btn { margin-top: 6px; }
  @media (max-width: 1199px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 80px; } }
  @media (max-width: 575px) { .services-grid { grid-template-columns: minmax(0, 1fr); } }

  /* ===== Choose (#F8FAFF) ===== */
  .why { background: var(--bg-choose); }
  .why .eyebrow::before { display: none; }
  .feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 40px; }
  .feat { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 4px 16px; }
  .feat .ic { grid-row: 1 / span 2; width: 54px; height: 54px; display: grid; place-items: center; color: var(--blue); }
  .feat .ic svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.4; }
  .feat h6 { font-size: 20px; line-height: 1.4; }
  .feat p { color: var(--body-color); font-size: 16px; line-height: 26px; }
  @media (max-width: 991px) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 575px) { .feat-grid { grid-template-columns: minmax(0, 1fr); } }

  /* ===== Products: Curfox in a lavender rounded panel (#EFEDFA), StoreMate on white ===== */
  .products { padding-top: 40px; }
  .product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
  .product.panel { background: var(--bg-product); border-radius: 30px; padding: clamp(36px, 5vw, 70px) clamp(24px, 5vw, 70px); }
  .product + .product { margin-top: clamp(60px, 8vw, 100px); }
  .product .copy { display: grid; gap: 16px; justify-items: start; min-width: 0; }
  .product .label { font: 600 16px/24px var(--display); text-transform: uppercase; color: var(--title-color); }
  .product h3 { font-size: 40px; line-height: 1.25; }
  .product p { color: var(--body-color); }
  .plist { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 30px; }
  .plist li { display: flex; align-items: center; gap: 10px; font: 500 16px/1.4 var(--body); color: var(--title-color); }
  .plist li::before { content: "✓"; flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 11px; }
  .product .visual { text-align: center; }
  /* Product mockups (desktop, laptop, phone) on transparent backgrounds */
  .product .visual img.main { width: 100%; height: auto; }
  /* Three figures under each product's logo: white tiles on the lavender Curfox panel, tinted tiles on white */
  .pstats { margin: 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .pstats div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: 12px; background: #fff; border: 1px solid #e3e1f6; }
  .product:not(.panel) .pstats div { background: #F4F3FC; border-color: #e7e5f6; }
  .pstats dd { order: -1; margin: 0; font: 700 28px/1 var(--display); color: var(--navy); }
  .pstats dt { font: 500 13px/1.35 var(--body); color: var(--body-color); text-align: center; }
  mark.tbc { background: #fff1a8; color: #5c4700; padding: 0 6px; border-radius: 4px; font-size: .8em; }
  @media (max-width: 420px) { .pstats { gap: 8px; } .pstats div { padding: 12px 6px; } .pstats dd { font-size: 22px; } .pstats dt { font-size: 12px; } }
  .product .visual .brand { margin: 18px auto 0; max-width: 260px; }
  @media (min-width: 992px) { .product.flip .visual { order: 1; } }
  @media (max-width: 991px) { .product { grid-template-columns: minmax(0, 1fr); } .product h3 { font-size: 32px; } }
  @media (max-width: 575px) { .plist { grid-template-columns: minmax(0, 1fr); } }

  /* ===== Projects (#EFF1F9, dark cards) ===== */
  .projects { position: relative; isolation: isolate; overflow: hidden; background: var(--bg-projects); }
  .projects::before, .projects::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; border: 60px solid rgba(62,102,243,.07); }
  .projects::before { width: 520px; height: 520px; left: -220px; top: 30%; }
  .projects::after { width: 640px; height: 640px; right: -260px; bottom: -260px; background: rgba(62,102,243,.12); border: 0; }
  .proj-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 50px; }
  .proj-head .titles { display: grid; gap: 15px; }
  .proj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .proj { background: var(--card-dark); border-radius: 16px; padding: 12px 12px 26px; color: #fff; }
  .proj img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
  .proj .pb { padding: 22px 12px 0; display: grid; gap: 12px; justify-items: start; }
  .proj h3 { color: #fff; font-size: 22px; line-height: 1.35; }
  .proj p { font-size: 15px; line-height: 24px; color: #8D929C; }
  @media (max-width: 991px) { .proj-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }

  /* ===== Awards (white) ===== */
  /* Picture-in-picture: the APICTA stage photo large, the awards wall as an inset over its bottom-right corner */
  .awards-pip { position: relative; margin-bottom: 40px; }
  .awards-pip .big { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 45%; border-radius: 16px; }
  .awards-pip .inset { position: absolute; right: -24px; bottom: -40px; width: 40%; border-radius: 12px; overflow: hidden; background: #fff; border: 6px solid #fff; box-shadow: 0 24px 50px rgba(20,29,56,.28); }
  .awards-pip .inset img { width: 100%; border-radius: 6px; }
  .awards-pip figcaption { position: absolute; left: 24px; top: 24px; background: rgba(8,14,28,.75); color: #fff; font: 600 14px/1.3 var(--display); text-transform: uppercase; letter-spacing: .04em; padding: 10px 16px; border-radius: 6px; }
  @media (max-width: 1260px) { .awards-pip .inset { right: 12px; } }
  @media (max-width: 767px) {
    .awards-pip { margin-bottom: 0; }
    .awards-pip .inset { position: relative; right: auto; bottom: auto; width: 80%; margin: -22px 0 0 auto; }
    .awards-pip figcaption { left: 12px; top: 12px; font-size: 12px; }
  }
  .awards .mid { display: grid; justify-items: center; margin-top: 30px; }

  /* ===== Exhibitions gallery (#F0F4FD): one large photo with four beside it, then rows of wide and single tiles ===== */
  .expo { background: #F0F4FD; }
  .gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(160px, 18vw, 260px); gap: 14px; }
  .gallery li.big { grid-column: span 2; grid-row: span 2; }
  .gallery li.wide { grid-column: span 2; }
  .gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
  @media (max-width: 767px) {
    .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; }
    .gallery li.big { grid-column: 1 / -1; grid-row: span 2; }
    .gallery li.wide { grid-column: 1 / -1; grid-row: span 1; }
  }

  /* ===== Client logos strip (white) ===== */
  .clients-strip { padding-block: 70px; }
  /* Auto carousel: 5 logos in view (3 on tablets, 2 on phones), moving one step at a time and looping */
  .logo-carousel { --per: 5; overflow: hidden; }
  .logo-track { list-style: none; margin: 0; padding: 0; display: flex; transition: transform .6s ease; }
  .logo-track li { flex: 0 0 calc(100% / var(--per)); display: flex; align-items: center; justify-content: center; padding-inline: 20px; height: 110px; }
  .logo-track img { max-height: 80px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
  @media (max-width: 991px) { .logo-carousel { --per: 3; } }
  @media (max-width: 575px) { .logo-carousel { --per: 2; } .logo-track li { height: 80px; padding-inline: 14px; } .logo-track img { max-height: 56px; } }
  @media (prefers-reduced-motion: reduce) { .logo-track { transition: none; } }

  /* ===== Blog (white): small eyebrow with a rule, title + button row, three white post cards ===== */
  .blog-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 50px; }
  .blog-head .titles { display: grid; gap: 12px; }
  .eyebrow.rule::before { display: none; }
  .eyebrow.rule::after { content: ""; width: 50px; height: 2px; background: var(--navy); }
  .eyebrow.rule { font-size: 14px; }
  .blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .post { background: #fff; border-radius: 16px; padding: 14px 14px 30px; box-shadow: 0 10px 40px rgba(20,29,56,.08); }
  .post:nth-child(2), .post:nth-child(3) { margin-top: 30px; }
  .post .thumb { position: relative; margin-bottom: 26px; }
  .post .thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
  .post .tag { position: absolute; left: 50%; bottom: -13px; translate: -50% 0; background: var(--navy); color: #fff; font: 500 12px/1 var(--body); text-transform: uppercase; padding: 7px 26px; border-radius: 30px; }
  .post .meta { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-inline: 10px; font-size: 14px; color: var(--body-color); }
  .post .meta span { display: inline-flex; align-items: center; gap: 6px; }
  .post .meta svg { width: 14px; height: 14px; fill: none; stroke: var(--navy); stroke-width: 2; }
  .post h3 { padding-inline: 10px; margin-top: 10px; font-size: 22px; line-height: 1.35; }
  .post h3 a { text-decoration: none; }
  .post h3 a:hover { color: var(--theme); }
  .post .bar { display: block; width: 90px; height: 1px; margin: 26px 10px 0; background: var(--title-color); }
  @media (max-width: 991px) { .blog-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; } .post:nth-child(n) { margin-top: 0; } }

  /* ===== Testimonials (#080E1C over a photo) ===== */
  .testi { position: relative; isolation: isolate; background: var(--dark); color: #fff; overflow: hidden; }
  .testi::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("images/dubai-conversation.jpg") center/cover no-repeat; opacity: .14; }
  .testi .wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
  .testi .lead { display: grid; gap: 18px; justify-items: start; }
  .testi h2 { color: #fff; }
  .testi h2 .hl { color: var(--theme); }
  .testi .lead p { color: #fff; }
  .testi-card { background: #fff; color: var(--title-color); border-radius: 10px; padding: 34px 34px 30px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
  .testi-card .stars { color: var(--navy); letter-spacing: 4px; font-size: 18px; }
  .testi-card blockquote { margin: 14px 0 22px; font-size: 16px; line-height: 26px; color: var(--body-color); }
  .testi-by { display: flex; align-items: center; gap: 14px; }
  .testi-by img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
  .testi-by strong { display: block; font: 700 22px/1.3 var(--display); color: var(--title-color); }
  .testi-by span { font-size: 14px; color: var(--navy); }
  .testi-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; }
  .testi-dots { position: relative; display: grid; gap: 60px; }
  .testi-dots::before { content: ""; position: absolute; left: 50%; top: 20px; bottom: 20px; width: 2px; translate: -50% 0; background: var(--navy); }
  .testi-dots button { position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .2s; }
  .testi-dots button:hover { transform: scale(1.08); }
  .testi-dots img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255,255,255,.85); opacity: .6; transition: opacity .2s, box-shadow .2s; }
  .testi-dots .on img { opacity: 1; box-shadow: 0 0 0 3px var(--theme); }
  /* Slides share one grid cell, so the card keeps the height of the longest quote and never jumps */
  .testi-card { display: grid; }
  .testi-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
  .testi-slide.is-active { opacity: 1; visibility: visible; }
  @media (prefers-reduced-motion: reduce) { .testi-slide { transition: none; } }
  @media (max-width: 575px) {
    .testi-side { grid-template-columns: minmax(0, 1fr); }
    .testi-dots { display: flex; justify-content: center; gap: 40px; }
    .testi-dots::before { left: 20%; right: 20%; top: 50%; bottom: auto; width: auto; height: 2px; translate: 0 -50%; }
  }
  @media (max-width: 991px) { .testi .wrap { grid-template-columns: minmax(0, 1fr); } }

  /* ===== Appointment (#F5F5F5) ===== */
  .appt { background: var(--bg-smoke); }
  .appt .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
  .appt .intro { display: grid; gap: 18px; justify-items: start; }
  .appt-contacts { display: flex; flex-wrap: wrap; gap: 24px 40px; margin-top: 10px; padding-block: 26px; border-top: 1px solid #dfe1e8; border-bottom: 1px solid #dfe1e8; width: 100%; }
  .appt-contacts a { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--body-color); font-size: 15px; }
  .appt-contacts .ic { flex: none; width: 50px; height: 50px; border-radius: 6px; background: var(--navy); color: #fff; display: grid; place-items: center; }
  .appt-contacts .ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
  .appt form { display: grid; gap: 20px; }
  .appt form h4 { text-align: center; margin-bottom: 6px; }
  .frow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  input, select, textarea { width: 100%; font: 400 15px/1.4 var(--body); color: var(--title-color); background: transparent; border: 1px solid #cfd2db; border-radius: 4px; padding: 0 18px; height: 56px; }
  input::placeholder, textarea::placeholder { color: var(--body-color); }
  textarea { height: 150px; padding-top: 16px; resize: vertical; }
  input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--navy); }
  .appt form .btn { width: 100%; }
  /* Required meeting choice: Frankfurt, Berlin or Online */
  .when { border: 0; margin: 0; padding: 0; min-width: 0; }
  .when legend { padding: 0; margin-bottom: 10px; font: 600 16px/1.3 var(--display); color: var(--title-color); }
  .when legend span { color: #c62828; }
  .when .opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .when label { position: relative; cursor: pointer; }
  .when input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; margin: 0; }
  .when label > span { display: grid; gap: 2px; height: 100%; padding: 12px 14px; border: 1px solid #cfd2db; border-radius: 6px; background: #fff; font: 600 16px/1.3 var(--display); color: var(--title-color); transition: background-color .15s, border-color .15s, color .15s; }
  .when small { font: 400 13px/1.35 var(--body); color: var(--body-color); }
  .when label:hover > span { border-color: var(--navy); }
  .when input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
  .when input:checked + span small { color: #c6c4e8; }
  .when input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
  .when label.past { cursor: default; opacity: .5; }
  @media (max-width: 575px) { .when .opts { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 991px) { .appt .wrap { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 575px) { .frow { grid-template-columns: minmax(0, 1fr); } }

  /* ===== Subscribe + footer (#080E1C), bottom bar navy with purple edges ===== */
  .subscribe { background: var(--dark); color: #fff; padding-block: 0; }
  .subscribe .wrap { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 24px 40px; padding-block: 60px; border-bottom: 1px solid rgba(255,255,255,.12); }
  .subscribe .logo img { width: 160px; height: auto; }
  .subscribe .sep { width: 1px; height: 70px; background: rgba(255,255,255,.2); }
  .subscribe h3 { color: #fff; font-size: 30px; line-height: 1.2; }
  .subscribe h3 + p { margin-top: 6px; font-size: 15px; color: #fff; }
  .sub-form { display: flex; gap: 10px; }
  .sub-form input { width: 300px; color: #fff; border-color: rgba(255,255,255,.25); }
  .sub-form input::placeholder { color: #fff; }
  @media (max-width: 1100px) { .subscribe .wrap { grid-template-columns: auto minmax(0, 1fr); } .subscribe .sep { display: none; } .sub-form { grid-column: 1 / -1; } }
  @media (max-width: 575px) { .subscribe .wrap { grid-template-columns: minmax(0, 1fr); } .sub-form input { width: 100%; } }

  .site-footer { background: var(--dark); color: var(--body-dark); font-size: 16px; }
  .ft-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr) minmax(0, 0.95fr) minmax(0, 1.2fr); gap: 40px clamp(24px, 4vw, 50px); padding-block: 80px 70px; }
  .ft-cols h4 { position: relative; margin-bottom: 40px; padding-bottom: 14px; font-size: 24px; line-height: 1.2; color: #fff; text-transform: uppercase; }
  .ft-cols h4::before { content: ""; position: absolute; left: 0; bottom: 0; width: 70px; height: 1px; background: #3E66F3; }
  .ft-cols h4::after { content: ""; position: absolute; left: 70px; bottom: -3px; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
  .ft-about p { line-height: 26px; }
  .ft-social { list-style: none; margin: 30px 0 0; padding: 0; display: flex; gap: 10px; }
  .ft-social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; color: #fff; }
  .ft-social a:hover { background: var(--theme); border-color: var(--theme); }
  .ft-social svg { width: 16px; height: 16px; fill: currentColor; }
  .ft-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
  .ft-links a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
  .ft-links a::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 2px 2px 0 0; rotate: 45deg; }
  .ft-links a:hover { color: var(--theme); }
  .ft-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
  .ft-post { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; align-items: center; }
  .ft-post img { width: 80px; height: 80px; border-radius: 6px; object-fit: cover; }
  .ft-post strong { display: block; color: #fff; font: 600 18px/1.35 var(--display); }
  .ft-post span { display: block; margin-top: 6px; font-size: 14px; color: var(--body-dark); }
  .ft-bottom { background: var(--theme); }
  .ft-bottom .wrap { background: var(--navy); color: #fff; text-align: center; padding-block: 22px; font-size: 16px; }
  .ft-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  @media (max-width: 991px) { .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 575px) { .ft-cols { grid-template-columns: minmax(0, 1fr); } }

  /* Kit hosts: each part is its own element; the header host stays at the top while scrolling */
  :host { display: block; font: 400 16px/26px var(--body); color: var(--body-color); text-align: left; -webkit-font-smoothing: antialiased; }
  :host(ge-header) { position: sticky; top: 0; z-index: 9990; }