:root {
      --bg: #000000;
      --surface: rgba(255, 255, 255, 0.025);
      --surface-2: rgba(255, 255, 255, 0.05);
      --line: rgba(255, 255, 255, 0.10);
      --line-strong: rgba(255, 255, 255, 0.22);
      --text: #fafafa;
      --muted: rgba(255, 255, 255, 0.50);
      --faint: rgba(255, 255, 255, 0.32);
      --ok: #22c55e;
      --display: 'Space Grotesk', 'Noto Sans Arabic', 'Cairo', sans-serif;
      --sans: 'Inter', 'Noto Sans Arabic', 'Cairo', sans-serif;
      --mono: 'JetBrains Mono', 'Noto Sans Arabic', 'Cairo', monospace;
      /* ── Loader logo animation tokens ── */
      --ll-color: #ffffff;
      --ll-glow: rgba(255, 255, 255, 0.28);
      --ll-size: clamp(84px, 18vw, 120px);
      --ll-split: 430px; /* inward shift so the two "H" parts cleanly meet at center (form an "H") */
      --ll-min-splash: 1500ms; /* guaranteed on-screen time so the full intro plays */
    }

    [dir="rtl"] {
      --display: 'Noto Sans Arabic', 'Cairo', sans-serif;
      --sans: 'Noto Sans Arabic', 'Cairo', sans-serif;
      --mono: 'Noto Sans Arabic', 'Cairo', sans-serif;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: var(--sans);
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* ── Cosmic canvas: twinkling parallax starfield + faint cyan nebula ── */
    .cosmos {
      position: fixed;
      inset: 0;
      z-index: 0;
      display: block;
      pointer-events: none;
      background: #000000;
    }

    /* -- Comet layer: transparent canvas ABOVE everything (z 99999) -- */
    .comets-layer {
      position: fixed;
      inset: 0;
      z-index: 99999;
      display: block;
      pointer-events: none;
    }

    /* ── Clean black background: hairline grid + faint grain, NO gradients ── */
    .grid-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: .6;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath d='M52 0H0V52' fill='none' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/%3E%3C/svg%3E");
      background-size: 52px 52px;
    }

    .grain {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: .045;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }


    /* ════════════ LAYOUT ════════════ */
    .wrap {
      position: relative;
      z-index: 1;
      max-width: 880px;
      margin: 0 auto;
      padding: 0 28px 70px;
    }

    /* ── TOP BAR ── */
    .topbar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 28px 0;
    }

    .brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .mark {
      width: 64px;
      height: 64px;
      flex-shrink: 0;
      overflow: hidden;
      border: 1px solid var(--line-strong);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text);
    }

    .logo-svg {
      width: 100%;
      height: 100%;
      padding: 7px;
      fill: currentColor;
    }

    .brand-meta {
      font-family: var(--mono);
      font-size: .62rem;
      letter-spacing: .24em;
      color: var(--faint);
      text-transform: uppercase;
    }

    /* ════════════ HERO ════════════ */
    .hero {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 48px;
      align-items: center;
      padding: 34px 0 18px;
    }

    .hero-main {
      min-width: 0;
    }

    .kicker {
      display: block;
      width: 56px;
      height: 4px;
      background: var(--text);
      border-radius: 2px;
      margin-bottom: 28px;
    }

    .name {
      font-family: var(--display);
      font-weight: 700;
      font-size: clamp(2.9rem, 8.5vw, 5.4rem);
      line-height: .95;
      letter-spacing: -.03em;
      color: var(--text);
      text-wrap: balance;
    }

    .hero-handle {
      margin-top: 18px;
      font-family: var(--mono);
      font-size: .9rem;
      letter-spacing: .06em;
      color: var(--muted);
    }

    .roles {
      margin-top: 32px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .roles-label {
      font-family: var(--mono);
      font-size: .62rem;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--faint);
    }

    .roles-now {
      display: flex;
      align-items: center;
      min-height: 1.2em;
      font-family: var(--display);
      font-weight: 600;
      font-size: clamp(1rem, 5vw, 1.4rem);
      line-height: 1.1;
    }

    #typed-role {
      color: var(--text);
    }

    .cursor {
      display: inline-block;
      width: .10ch;
      height: 1.05em;
      margin-left: .14em;
      background: var(--text);
      transform: translateY(.08em);
      animation: blink 1s steps(1) infinite;
    }

    @keyframes blink {
      50% {
        opacity: 0;
      }
    }

    .hero-slogan {
      margin-top: 30px;
      max-width: 44ch;
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.75;
    }

    /* Share This Page, hero CTA pill */
    .hero-share-btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-top: 22px;
      padding: 11px 22px;
      font-family: var(--display);
      font-weight: 600;
      font-size: .92rem;
      letter-spacing: .01em;
      color: #22d3ee;
      text-decoration: none;
      background: rgba(34, 211, 238, .07);
      border: 1px solid rgba(34, 211, 238, .38);
      border-radius: 999px;
      transition: background .22s ease, color .22s ease, box-shadow .22s ease, border-color .22s ease, transform .22s ease;
    }
    .hero-share-btn i { font-size: .88em; transition: transform .22s ease; }
    .hero-share-btn:hover,
    .hero-share-btn:focus-visible {
      background: #22d3ee;
      color: #04161a;
      border-color: #22d3ee;
      box-shadow: 0 0 28px -4px rgba(34, 211, 238, .55);
      transform: translateY(-1px);
      outline: none;
    }
    .hero-share-btn:hover i,
    .hero-share-btn:focus-visible i { transform: scale(1.12) rotate(-8deg); }

    .hero-aside {
      display: flex;
      justify-content: center;
    }

    /*  PHOTO  */
    .photo {
      position: relative;
      width: 300px;
      max-width: 100%;
      border: 1px solid var(--line-strong);
      border-radius: 16px;
      overflow: hidden;
      background: #0a0a0a;
      transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, border-color .45s ease;
    }

    .photo:hover {
      transform: translateY(-5px);
      box-shadow: 0 22px 55px rgba(0, 0, 0, .55);
    }

    .photo-inner {
      position: relative;
      aspect-ratio: 4/5;
      overflow: hidden;
    }

    .photo img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: grayscale(1) contrast(1.07) brightness(.93);
      transition: filter .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
      will-change: filter, transform;
    }

    .photo:hover img {
      filter: grayscale(0) contrast(1.03) brightness(1);
      transform: scale(1.05);
    }

    .photo-fb {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 62px;
      color: var(--faint);
      z-index: 1;
    }

    /*  shared overlay base: nothing here ever blocks the pointer  */
    .photo-inner [class^="ph-"],
    .photo-inner [class*=" ph-"] {
      pointer-events: none;
    }

    /*  fine scanlines (instrument texture)  */
    .ph-lines {
      position: absolute;
      inset: 0;
      z-index: 2;
      opacity: .2;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Crect width='3' height='1' fill='%23000' fill-opacity='0.5'/%3E%3C/svg%3E");
      transition: opacity .6s ease;
    }

    .photo:hover .ph-lines {
      opacity: .11;
    }

    /* ════════════ SECTIONS (editorial index) ════════════ */
    .block {
      border-top: 1px solid var(--line);
      padding: 46px 0 8px;
    }

    .block-head {
      display: flex;
      gap: 22px;
      align-items: baseline;
      margin-bottom: 30px;
    }

    .block-titles {
      min-width: 0;
      text-align: start;
    }

    .block-title {
      font-family: var(--display);
      font-weight: 700;
      font-size: clamp(1.5rem, 4vw, 2.1rem);
      line-height: 1;
      letter-spacing: -.01em;
    }

    .block-sub {
      display: block;
      margin-top: 9px;
      color: var(--muted);
      font-size: .9rem;
    }

    /* Small accent kicker above a section title (e.g. before "ASK HALINA") */
    .block-eyebrow {
      display: block;
      margin-bottom: 11px;
      font-family: var(--mono);
      font-size: .72rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--accent);
    }

    .bio-text {
      font-size: 1.05rem;
      line-height: 1.9;
      color: rgba(255, 255, 255, .72);
      max-width: 64ch;
    }

    /* ── Socials (adaptive pills, look great with 1 link or many) ── */
    .socials {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .soc {
      display: inline-flex;
      align-items: center;
      gap: 13px;
      padding: 11px 18px 11px 11px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--surface);
      color: var(--text);
      text-decoration: none;
      transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, background .25s;
    }

    .soc-ico {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .05);
      transition: background .25s;
    }

    .soc-ico i {
      font-size: 18px;
      color: #fff;
      transition: color .25s;
    }

    .soc-label {
      font-family: var(--display);
      font-weight: 600;
      font-size: .96rem;
    }

    .soc-arr {
      font-size: 12px;
      color: var(--faint);
      transition: transform .25s, color .25s;
    }

    .soc:hover {
      transform: translateY(-3px);
    }

    .soc:hover .soc-arr {
      color: var(--text);
      transform: translate(2px, -2px);
    }

    /* ── Link rows ── */
    .links {
      display: flex;
      flex-direction: column;
    }

    .lnk {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 18px 14px;
      border: 1px solid transparent;
      border-bottom: 1px solid var(--line);
      border-radius: 12px;
      color: var(--text);
      text-decoration: none;
      transition: all .25s;
    }

    .lnk:last-child {
      border-bottom-color: transparent;
    }

    .lnk:hover {
      background: var(--surface);
      transform: translateX(6px);
    }

    .lnk-ico {
      width: 42px;
      height: 42px;
      border-radius: 11px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    .lnk-txt {
      flex: 1;
      font-family: var(--display);
      font-weight: 600;
      font-size: 1rem;
      letter-spacing: .01em;
      text-align: start;
    }

    .lnk-host {
      font-family: var(--mono);
      font-size: .66rem;
      letter-spacing: .05em;
      color: var(--faint);
    }

    .lnk-arr {
      color: var(--muted);
      font-size: 13px;
      transition: transform .25s, color .25s;
    }

    .lnk:hover .lnk-arr {
      color: var(--text);
      transform: translate(3px, -3px);
    }

    .lnk.disabled {
      pointer-events: none;
      opacity: .35;
      cursor: not-allowed;
      filter: grayscale(1);
    }

    .lnk.disabled .lnk-host::after {
      content: ' · soon';
      color: var(--faint);
      font-style: italic;
    }

    /* "or Chat with Halina on Telegram", alternate channel under the chat panel */
    .halina-tg {
      display: flex; flex-direction: column; align-items: center; gap: 12px;
      margin-top: 18px;
    }
    .halina-tg-or {
      display: flex; align-items: center; gap: 12px; width: 100%;
      font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
      text-transform: uppercase; color: var(--faint);
    }
    .halina-tg-or::before, .halina-tg-or::after {
      content: ""; flex: 1; height: 1px; background: var(--line);
    }
    .halina-tg-btn {
      display: inline-flex; align-items: center; gap: 9px;
      padding: 11px 22px; border-radius: 12px;
      background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.32);
      color: var(--cy); text-decoration: none;
      font-family: var(--sans); font-size: .92rem; font-weight: 600; letter-spacing: .01em;
      box-shadow: 0 0 28px -14px rgba(34,211,238,.55);
      transition: background .25s, border-color .25s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
    }
    .halina-tg-btn:hover {
      background: rgba(34,211,238,.18); border-color: rgba(34,211,238,.6);
      transform: translateY(-2px); box-shadow: 0 10px 28px -10px rgba(34,211,238,.55);
    }
    .halina-tg-btn i { font-size: 1.2em; }
    .halina-tg-btn:focus-visible { outline: 2px solid var(--cy); outline-offset: 3px; border-radius: 12px; }

    /* phone section: one primary number + secondary numbers, styled like a .lnk row */
    .biz-phones {
      display: flex; align-items: center; gap: 16px;
      padding: 18px 14px; border-bottom: 1px solid var(--line); border-radius: 12px;
    }
    .biz-phones-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
    .biz-phone-primary {
      width: fit-content;
      font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: .01em;
      color: var(--text); text-decoration: none; transition: color .2s;
    }
    .biz-phone-primary:hover { color: var(--cy); }
    .biz-phone-more {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
      font-family: var(--mono); font-size: .74rem;
    }
    .biz-phone-more a { color: var(--muted); text-decoration: none; transition: color .2s; }
    .biz-phone-more a:hover { color: var(--text); }
    .biz-phone-sep { color: var(--faint); }

    /* ════════════ EXPERIENCE, DARK BOLD HIGHLIGHT CARD ════════════ */
    /* An elevated near-black panel with a bold cyan edge + restrained glow. */
    .xp-card {
      --xp-accent: #22d3ee;
      margin-top: 15px;
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: clamp(22px, 5vw, 50px);
      background: #0a0b0d;
      /* lifted near-black panel */
      color: var(--text);
      border: 1px solid var(--line-strong);
      border-radius: 24px;
      padding: clamp(30px, 5vw, 52px) clamp(26px, 5vw, 54px);
      overflow: hidden;
      isolation: isolate;
      box-shadow:
        0 40px 90px -50px rgba(0, 0, 0, .9),
        0 0 64px -22px rgba(34, 211, 238, .20);
      /* faint cyan highlight glow */
    }

    /* bold cyan accent bar down the left edge */
    .xp-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 7px;
      background: var(--xp-accent);
      box-shadow: 0 0 22px 0 rgba(34, 211, 238, .55);
    }

    /* faint oversized ghost "15" in the corner for depth (clipped by overflow) */
    .xp-card::after {
      content: "15";
      position: absolute;
      right: -.06em;
      bottom: -.30em;
      z-index: -1;
      font-family: var(--display);
      font-weight: 700;
      line-height: 1;
      font-size: clamp(11rem, 28vw, 21rem);
      letter-spacing: -.05em;
      color: rgba(255, 255, 255, .035);
      pointer-events: none;
    }

    /* ── the big number ── */
    .xp-card-num {
      display: flex;
      align-items: flex-start;
      font-family: var(--display);
      font-weight: 700;
      font-size: clamp(4.6rem, 17vw, 9.5rem);
      line-height: .8;
      letter-spacing: -.05em;
      color: var(--text);
      font-feature-settings: "tnum" 1;
      -webkit-user-select: none;
      user-select: none;
    }

    .xp-card-plus {
      font-size: .42em;
      line-height: 1;
      vertical-align: top;
      margin-top: .12em;
      margin-left: .06em;
      color: var(--xp-accent);
      text-shadow: 0 0 20px rgba(34, 211, 238, .5);
      /* glowing cyan "+" */
    }

    /* ── label column ── */
    .xp-card-body {
      min-width: 0;
    }

    .xp-card-tag {
      display: inline-block;
      font-family: var(--mono);
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: #04161a;
      background: var(--xp-accent);
      padding: 6px 11px;
      border-radius: 7px;
    }

    .xp-card-title {
      margin: 15px 0 0;
      font-family: var(--display);
      font-weight: 700;
      font-size: clamp(1.5rem, 4vw, 2.3rem);
      line-height: 1.04;
      letter-spacing: -.015em;
      color: var(--text);
      text-wrap: balance;
    }

    .xp-card-desc {
      margin: 12px 0 0;
      max-width: 40ch;
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.65;
      text-wrap: balance;
    }

    /* End-of-page "Ask Halina" CTA, centered band above the footer */
    .end-cta {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      margin-top: 90px;
      text-align: center;
    }
    .end-cta-line {
      font-family: var(--display);
      font-weight: 600;
      font-size: clamp(1.3rem, 3.4vw, 1.9rem);
      letter-spacing: -.02em;
      color: var(--text);
    }
    /* outlined cyan pill that fills on hover/focus */
    .ask-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 24px;
      font-family: var(--display);
      font-weight: 600;
      font-size: 1rem;
      letter-spacing: -.01em;
      color: #22d3ee;
      text-decoration: none;
      background: rgba(34, 211, 238, .06);
      border: 1px solid rgba(34, 211, 238, .45);
      border-radius: 999px;
      box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
      transition: background .22s ease, color .22s ease, box-shadow .22s ease, border-color .22s ease, transform .22s ease;
    }
    .ask-cta i {
      font-size: .92em;
      transition: transform .22s ease;
    }
    .ask-cta:hover,
    .ask-cta:focus-visible {
      background: #22d3ee;
      color: #04161a;
      border-color: #22d3ee;
      box-shadow: 0 0 30px -4px rgba(34, 211, 238, .6);
      transform: translateY(-1px);
      outline: none;
    }
    .ask-cta:hover i,
    .ask-cta:focus-visible i {
      transform: scale(1.12);
    }

    /* ── reveal (resting state always visible) ── */
    @media (prefers-reduced-motion: no-preference) {
      .xp-card {
        animation: xp-rise .8s cubic-bezier(.2, .8, .2, 1) both;
      }
    }

    @keyframes xp-rise {
      from {
        opacity: 0;
        transform: translateY(18px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    /* ── responsive ── */
    @media (max-width: 760px) {
      .xp-card {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .xp-card-num {
        font-size: clamp(4.5rem, 26vw, 7rem);
      }

      .xp-card-desc {
        max-width: none;
      }
    }

    @media (max-width: 460px) {
      .xp-card {
        border-radius: 20px;
        padding: 28px 22px;
      }

      .xp-card-desc {
        font-size: 1rem;
      }
    }

    /* ════════════ SHARE THIS PAGE ════════════ */
    .share-copy {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 12px 12px 18px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--surface);
      margin-bottom: 16px;
    }

    .share-copy-ico {
      flex-shrink: 0;
      color: #22d3ee;
      font-size: 15px;
    }

    .share-copy-url {
      flex: 1;
      min-width: 0;
      font-family: var(--mono);
      font-size: .85rem;
      letter-spacing: .02em;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .share-copy-btn {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: 10px;
      border: 1px solid rgba(34, 211, 238, .30);
      background: rgba(34, 211, 238, .08);
      color: #22d3ee;
      font-family: var(--display);
      font-weight: 600;
      font-size: .85rem;
      cursor: pointer;
      transition: background .2s, border-color .2s, color .2s, transform .2s;
    }

    .share-copy-btn:hover {
      background: rgba(34, 211, 238, .16);
      border-color: rgba(34, 211, 238, .55);
      transform: translateY(-1px);
    }

    .share-copy-btn.copied {
      background: #22d3ee;
      color: #04141a;
      border-color: #22d3ee;
    }

    .share-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
      gap: 10px;
    }

    .share-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: var(--surface);
      color: var(--text);
      text-decoration: none;
      font-family: var(--display);
      font-weight: 600;
      font-size: .92rem;
      cursor: pointer;
      transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, background .25s, box-shadow .25s;
    }

    .share-btn[hidden] {
      display: none;
    }

    .share-btn i {
      width: 22px;
      flex-shrink: 0;
      font-size: 18px;
      text-align: center;
      color: var(--c, #fff);
      transition: transform .25s;
    }

    .share-btn:hover {
      transform: translateY(-3px);
      border-color: color-mix(in srgb, var(--c, #fff) 50%, transparent);
      background: color-mix(in srgb, var(--c, #fff) 9%, var(--surface));
      box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--c, #fff) 80%, transparent);
    }

    .share-btn:hover i {
      transform: scale(1.12);
    }

    .share-btn:active {
      transform: translateY(-1px);
    }

    .share-thanks {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-top: 26px;
      padding: 0;
      text-align: center;
    }

    .share-thanks-txt {
      flex: 0 1 auto;
      font-family: var(--display);
      font-weight: 500;
      font-size: .72rem;
      text-transform: uppercase;
      letter-spacing: .18em;
      color: rgba(232, 232, 232, .62);
      white-space: nowrap;
    }

    .share-thanks-rule {
      flex: 1 1 auto;
      max-width: 64px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .35));
    }

    .share-thanks-rule:last-child {
      background: linear-gradient(90deg, rgba(34, 211, 238, .35), transparent);
    }

    @media (max-width: 460px) {
      .share-thanks { gap: 11px; }
      .share-thanks-txt {
        font-size: .62rem;
        letter-spacing: .13em;
        white-space: normal;
      }
    }

    @media (max-width: 460px) {
      .share-copy {
        flex-wrap: wrap;
      }

      .share-copy-url {
        order: 3;
        flex-basis: 100%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .share-btn,
      .share-btn i,
      .share-copy-btn {
        transition: none;
      }
    }

    /* ── Footer ── */
    .footer {
      border-top: 1px solid var(--line);
      margin-top: 64px;
      padding: 34px 0 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }

    .footer-txt {
      color: var(--muted);
      font-size: .85rem;
      text-decoration: none;
      transition: color .2s;
    }

    .footer-txt:hover {
      color: var(--text);
    }

    .footer-meta {
      font-family: var(--mono);
      font-size: .64rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--faint);
    }

    /* ── Scroll reveal ── */
    .sv {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s ease, transform .7s ease;
    }

    .sv.in {
      opacity: 1;
      transform: none;
    }

    /* ════════════ PRELOADER (intro splash) ════════════ */
    body.loading {
      overflow: hidden;
    }

    .loader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 26px;
      background: var(--bg);
      opacity: 1;
      transform: scale(1);
      transition: transform 1s cubic-bezier(.7, 0, .3, 1), opacity .95s ease, filter 1s ease;
      will-change: transform, opacity;
    }

    /* faint hairline grid, same motif as the site, keeps the splash on-brand */
    .loader::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .5;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath d='M52 0H0V52' fill='none' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/%3E%3C/svg%3E");
      background-size: 52px 52px;
    }

    /* zoom + fade reveal of the website content */
    .loader.is-done {
      opacity: 0;
      transform: scale(1.7);
      filter: blur(6px);
      pointer-events: none;
    }

    .loader.is-hidden {
      display: none;
    }

    /* NOTE: The loader is an intentional brand intro and plays for everyone.
       It is deliberately NOT suppressed under prefers-reduced-motion, the
       earlier media query that did so was removing the exit zoom and the logo
       draw, which is exactly the "only fades, no zoom/animation" symptom. */

    /* ════════════ LOADER LOGO ANIMATION ════════════
       Sequence (pure CSS, staggered by animation-delay):
         1. The two "H" parts start joined in the center.
         2. They separate, left slides left, right slides right.
         3. The center "I" punches forward (zoom-in focus), then settles between them.
         4. A soft glow blooms across the whole mark. */

    .loader-logo {
      position: relative;
      width: var(--ll-size);
      height: var(--ll-size);
      opacity: 0;
      transform: scale(0.94);
      animation: ll-enter 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
    }

    @keyframes ll-enter {
      to { opacity: 1; transform: scale(1); }
    }

    /* Override the header's .logo-svg padding/fill; host the glow finale */
    .loader-logo .logo-svg {
      width: 100%;
      height: 100%;
      padding: 0;
      fill: none;
      overflow: visible;
      /* Step 4, glow blooms after the "I" has settled (delay ≈ end of step 3) */
      animation: ll-glow 0.55s ease-out 0.9s both;
    }

    /* Solid shapes from the start, this animation MOVES filled pieces (no outline draw).
       fill-box origin keeps each piece's translate/scale relative to its own center. */
    .loader-logo .lp {
      fill: var(--ll-color);
      transform-box: fill-box;
      transform-origin: center;
      will-change: transform, opacity;
    }

    /* Steps 1→2, left "H": starts shifted toward center, slides out to final spot */
    .loader-logo .lp-left {
      animation: ll-h-left 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* Steps 1→2, right "H": starts shifted toward center, slides out to final spot */
    .loader-logo .lp-right {
      animation: ll-h-right 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* Step 3, center "I": hidden until the H's part, fades in fast, punches forward, settles */
    .loader-logo .lp-i {
      opacity: 0;
      animation: ll-i-reveal 0.55s cubic-bezier(0.34, 1.2, 0.5, 1) 0.5s both;
    }

    @keyframes ll-h-left {
      0%, 20% { transform: translateX(var(--ll-split)); }   /* joined in center (forms an "H") */
      100%    { transform: translateX(0); }                  /* final left position */
    }

    @keyframes ll-h-right {
      0%, 20% { transform: translateX(calc(-1 * var(--ll-split))); }
      100%    { transform: translateX(0); }
    }

    @keyframes ll-i-reveal {
      0%   { opacity: 0; transform: scale(0.45); }
      30%  { opacity: 1; }                            /* fade in quickly so it's never missed */
      55%  { opacity: 1; transform: scale(1.4); }     /* coming forward, main focus */
      100% { opacity: 1; transform: scale(1); }       /* settle into place */
    }

    @keyframes ll-glow {
      0%   { filter: drop-shadow(0 0 0 transparent); }
      45%  { filter: drop-shadow(0 0 24px var(--ll-glow)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.16)); }
      100% { filter: drop-shadow(0 0 11px var(--ll-glow)); }
    }

    /* ════════════ MOBILE ════════════ */
    @media (max-width: 760px) {
      .hero {
        grid-template-columns: 1fr;
        gap: 34px;
        text-align: center;
        padding-top: 24px;
      }

      .hero-aside {
        order: -1;
      }

      .kicker {
        margin-left: auto;
        margin-right: auto;
      }

      .roles {
        align-items: center;
      }

      .hero-slogan {
        margin-left: auto;
        margin-right: auto;
      }

      .block-head {
        gap: 16px;
      }

      .lnk-host {
        display: none;
      }

      .brand-meta {
        display: none;
      }
    }

    @media (max-width: 460px) {
      .wrap {
        padding: 0 18px 60px;
      }

      .photo {
        width: 240px;
      }
    }

    /* ════════════ PROFESSIONAL SERVICES, austintek.io BRAND CTA (midnightBlue) ════════════ */

    /* intro caption above the CTA, gradient-hairline mono eyebrow, sets it up, not the hero */
    .biz-intro{
      display:flex; align-items:center; gap:12px;
      margin-top:30px; margin-bottom:14px;
      font-family:var(--mono); font-size:.72rem; line-height:1.6;
      letter-spacing:.04em; color:var(--muted);
    }
    .biz-intro::before{
      content:""; flex:0 0 auto; width:22px; height:1px;
      background:linear-gradient(90deg, #3b82f6, #06b6d4);
    }

    /* A sibling of .xp-card: lifted near-black slab, hairline border, 24px radius, the exact
       xp-card shadow recipe, a 7px gradient accent bar + glow down the left edge, a faint
       oversized ghost glyph in the corner (::after at rgba(255,255,255,.035)), a FILLED mono
       BUSINESS chip, a Space Grotesk wordmark and a muted tagline. The single accent is the
       austintek blue→cyan gradient (bar, chip, .io wordmark, pill, glow) so it reads as the
       BUSINESS brand, distinct from the page's personal cyan, while obeying "one accent +
       subtle glow". The WOW is LIGHT, not chrome: a low, heavily-blurred blue→cyan aurora blooms
       like a brand horizon and drifts slowly. ZERO browser/window literalism. */

    /* austintek brand tokens, scoped to this component only */
    .atk-cta{ --atk-blue:#3b82f6; --atk-cyan:#06b6d4; --atk-navy:#0a0f1c; }

    /* the whole clickable CTA, mirrors .xp-card's panel, border, radius, shadow and rise-in */
    .atk-cta{
      position:relative;
      display:grid;
      grid-template-columns:1fr auto;          /* wordmark block | Enter Site pill */
      align-items:center;
      gap:clamp(22px,5vw,50px);
      margin-top:15px;
      text-decoration:none;
      color:var(--text);
      background:#0a0b0d;                       /* same lifted near-black as .xp-card */
      border:1px solid var(--line-strong);
      border-radius:24px;
      padding:clamp(30px,5vw,52px) clamp(26px,5vw,54px);
      overflow:hidden;                          /* clips the bloom + ghost, no horizontal scroll */
      isolation:isolate;                        /* bloom/ghost stay behind, never over the focus ring */
      box-shadow:
        0 40px 90px -50px rgba(0,0,0,.9),
        0 0 64px -22px rgba(59,130,246,.20);    /* restrained BLUE brand glow (vs cyan elsewhere) */
      transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s;
    }

    /* ── blue→cyan accent bar down the left edge, with glow, the strongest xp-card DNA cue ── */
    .atk-cta-bar{
      position:absolute; left:0; top:0; bottom:0; width:7px; z-index:2;
      background:linear-gradient(180deg, var(--atk-blue), var(--atk-cyan));
      box-shadow:0 0 22px 0 rgba(59,130,246,.45);
      transition:box-shadow .4s ease;
    }

    /* ── the AURORA: a soft, low blue→cyan bloom like a brand horizon (a whisper, not neon) ── */
    .atk-cta::before{
      content:""; position:absolute; z-index:-1; pointer-events:none;
      left:-15%; right:-15%; bottom:-55%; height:90%;
      background:
        radial-gradient(60% 100% at 30% 100%, rgba(59,130,246,.30), transparent 70%),
        radial-gradient(55% 100% at 72% 100%, rgba(6,182,212,.26), transparent 72%);
      filter:blur(34px);
      opacity:.85;
      transition:opacity .45s ease, transform .45s ease;
    }

    /* ── faint oversized ghost glyph in the corner for depth, exactly like .xp-card::after ── */
    .atk-cta::after{
      content:"\2197";                          /* north-east arrow, "go" without any chrome */
      position:absolute; right:-.04em; bottom:-.30em; z-index:-1;
      font-family:var(--display); font-weight:700; line-height:1;
      font-size:clamp(8rem,22vw,16rem); letter-spacing:-.05em;
      color:rgba(255,255,255,.035);
      pointer-events:none; -webkit-user-select:none; user-select:none;
    }

    /* ── left column: chip · wordmark · tagline ── */
    .atk-cta-body{ position:relative; z-index:1; min-width:0; }   /* min-width:0 → never overflows the grid */

    /* small mono uppercase BUSINESS chip, FILLED gradient, dark ink (true .xp-card-tag DNA) */
    .atk-cta-tag{
      display:inline-flex; align-items:center; gap:7px;
      font-family:var(--mono); font-size:.6rem; font-weight:700;
      letter-spacing:.26em; text-transform:uppercase;
      color:#04121a;
      background:linear-gradient(92deg, var(--atk-blue), var(--atk-cyan));
      padding:6px 11px; border-radius:7px;
      box-shadow:0 0 22px -6px rgba(59,130,246,.6);
    }
    .atk-cta-tag i{ font-size:.62rem; }

    /* the wordmark, large in Space Grotesk, FULL brightness, ".io" gradient-clipped (matches <b>) */
    .atk-cta-name{
      display:block; margin:16px 0 0;
      font-family:var(--display); font-weight:700;
      font-size:clamp(2rem,6vw,3.1rem);
      line-height:1; letter-spacing:-.03em;
      color:var(--text); text-wrap:balance;
    }
    .atk-cta-name b{
      font-weight:700;
      background:linear-gradient(92deg, var(--atk-blue), var(--atk-cyan));
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }

    /* tagline, muted, generous measure, same restraint as .xp-card-desc */
    .atk-cta-tagline{
      margin:12px 0 0; max-width:38ch;
      font-family:var(--sans); font-size:1.02rem; line-height:1.6;
      color:var(--muted); text-wrap:balance;
    }

    /* ── Enter Site pill, outlined, with a left-origin gradient WIPE that fills it on hover/focus ── */
    .atk-cta-go{
      position:relative; z-index:1; overflow:hidden;
      flex:0 0 auto;
      display:inline-flex; align-items:center; gap:10px;
      padding:13px 24px; border-radius:999px;
      font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:-.01em;
      color:#bfdbfe; white-space:nowrap;
      background:rgba(59,130,246,.06);
      border:1px solid rgba(59,130,246,.45);
      box-shadow:0 0 0 0 rgba(6,182,212,0);
      transition:color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
    }
    /* the brand-gradient fill lives behind the label and wipes in from the left on hover/focus */
    .atk-cta-go::before{
      content:""; position:absolute; inset:0; z-index:0;
      background:linear-gradient(92deg, var(--atk-blue), var(--atk-cyan));
      transform:scaleX(0); transform-origin:left;
      transition:transform .35s cubic-bezier(.2,.8,.2,1);
    }
    .atk-cta-go > span,
    .atk-cta-go > i{ position:relative; z-index:1; }
    .atk-cta-go i{ font-size:.92em; transition:transform .3s cubic-bezier(.2,.8,.2,1); }

    /* ── HOVER: slab lifts, left bar blooms, aurora swells, pill fills + arrow slides ── */
    .atk-cta:hover{
      transform:translateY(-4px);
      border-color:rgba(59,130,246,.40);
      box-shadow:
        0 50px 100px -48px rgba(0,0,0,.92),
        0 14px 50px -10px rgba(37,99,235,.30),
        0 0 0 1px rgba(59,130,246,.12);
    }
    .atk-cta:hover .atk-cta-bar{ box-shadow:0 0 30px 2px rgba(6,182,212,.6); }
    .atk-cta:hover::before{ opacity:1; transform:translateY(-8px) scale(1.04); }
    .atk-cta:hover .atk-cta-go{
      color:#04101f; border-color:transparent;
      box-shadow:0 12px 34px -8px rgba(37,99,235,.55);
      transform:translateY(-1px);
    }
    .atk-cta:hover .atk-cta-go::before{ transform:scaleX(1); }
    .atk-cta:hover .atk-cta-go i{ transform:translate(3px,-3px); }

    /* ── keyboard focus, mirrors hover, plus a real 3px brand ring on the anchor ── */
    .atk-cta:focus-visible{
      outline:none;
      border-color:rgba(59,130,246,.6);
      box-shadow:
        0 0 0 3px rgba(59,130,246,.35),
        0 40px 90px -50px rgba(0,0,0,.9);
    }
    .atk-cta:focus-visible .atk-cta-bar{ box-shadow:0 0 30px 2px rgba(6,182,212,.6); }
    .atk-cta:focus-visible::before{ opacity:1; transform:translateY(-8px) scale(1.04); }
    .atk-cta:focus-visible .atk-cta-go{
      color:#04101f; border-color:transparent;
      box-shadow:0 12px 34px -8px rgba(37,99,235,.55);
    }
    .atk-cta:focus-visible .atk-cta-go::before{ transform:scaleX(1); }
    .atk-cta:focus-visible .atk-cta-go i{ transform:translate(3px,-3px); }

    /* ── motion: rise-in on load (mirrors xp-rise) + a slow, gentle aurora drift ── */
    @media (prefers-reduced-motion: no-preference){
      .atk-cta{ animation:atk-rise .8s cubic-bezier(.2,.8,.2,1) both; }
      .atk-cta::before{ animation:atk-aurora 11s ease-in-out infinite alternate; }
    }
    @keyframes atk-rise{
      from{ opacity:0; transform:translateY(18px); }
      to{ opacity:1; transform:none; }
    }
    @keyframes atk-aurora{
      from{ transform:translateX(-3%) translateY(0) scale(1); opacity:.78; }
      to{ transform:translateX(3%) translateY(-6px) scale(1.05); opacity:.92; }
    }

    /* ── tablet step: let the pill drop to its own full-row before the hard mobile stack ── */
    @media (max-width:680px){
      .atk-cta{
        grid-template-columns:1fr;
        gap:24px;
        padding:clamp(28px,5vw,40px) clamp(24px,5vw,34px);
      }
      .atk-cta-tagline{ max-width:none; }
      .atk-cta-go{ width:100%; justify-content:center; }
    }

    /* ── mobile: tighter radius/padding, full-width centered CTA, shrink ghost, no overflow ── */
    @media (max-width:480px){
      .atk-cta{ border-radius:20px; padding:30px 22px; }
      .atk-cta-name{ font-size:clamp(1.8rem,9vw,2.4rem); }
      .atk-cta::after{ font-size:clamp(6rem,40vw,9rem); bottom:-.26em; }
    }

    /* ── reduced motion: kill ALL transforms + animations, keep every state legible/static ── */
    @media (prefers-reduced-motion: reduce){
      .atk-cta,
      .atk-cta::before,
      .atk-cta-bar,
      .atk-cta-go,
      .atk-cta-go::before,
      .atk-cta-go i{ transition:none; animation:none; }
      .atk-cta:hover,
      .atk-cta:focus-visible{ transform:none; }
      .atk-cta:hover::before,
      .atk-cta:focus-visible::before{ transform:none; }
      .atk-cta:hover .atk-cta-go,
      .atk-cta:focus-visible .atk-cta-go{ transform:none; }
      .atk-cta:hover .atk-cta-go::before,
      .atk-cta:focus-visible .atk-cta-go::before{ transform:scaleX(1); }   /* fill instantly, no slide */
      .atk-cta:hover .atk-cta-go i,
      .atk-cta:focus-visible .atk-cta-go i{ transform:none; }
    }

    /* ════════════ CONTACT FORM, split editorial card ════════════ */
    .cf-card {
      display: grid;
      grid-template-columns: 260px 1fr;
      background: #0a0b0d;
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 40px 90px -50px rgba(0,0,0,.9);
    }

    /* ── Left info sidebar ── */
    .cf-side {
      background: #070809;
      border-right: 1px solid rgba(255,255,255,0.07);
      padding: 40px 32px;
      display: flex;
      flex-direction: column;
    }

    .cf-side-tag {
      font-family: var(--mono);
      font-size: .58rem;
      font-weight: 700;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: #22d3ee;
      margin: 0 0 22px;
    }

    .cf-side-heading {
      font-family: var(--display);
      font-weight: 700;
      font-size: clamp(1.55rem, 3vw, 2.1rem);
      line-height: 1.05;
      letter-spacing: -.025em;
      color: var(--text);
      margin: 0 0 18px;
    }

    .cf-side-text {
      font-size: .9rem;
      line-height: 1.8;
      color: var(--muted);
      margin: 0;
      flex: 1;
    }

    .cf-side-footer {
      margin-top: 36px;
      padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,.07);
    }

    .cf-side-resp-label {
      display: block;
      font-family: var(--mono);
      font-size: .56rem;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--faint);
      margin-bottom: 5px;
    }

    .cf-side-resp-val {
      font-family: var(--display);
      font-weight: 700;
      font-size: 1.05rem;
      color: #22d3ee;
    }

    /* ════════ AVAILABILITY, bold two-tone color block (no glow) ════════ */
    .av {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      border: 1.5px solid var(--line-strong);
      border-radius: 8px;
      overflow: hidden;
    }
    .av[hidden] { display: none; }

    /* LEFT, solid status block (the bold hit) */
    .av-hero {
      padding: 28px 30px 26px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: #16181d;                  /* offline: solid dark slab */
      transition: background .45s ease;
    }
    .av[data-state="on"] .av-hero { background: var(--accent); }   /* online: solid cyan */

    .av-hero-label {
      font-family: var(--mono);
      font-size: .58rem;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: var(--faint);
    }
    .av[data-state="on"] .av-hero-label { color: rgba(4,20,26,.62); }

    .av-word {
      margin-top: auto;                     /* poster feel: word sits at the bottom */
      font-family: var(--display);
      font-weight: 700;
      font-size: clamp(2.3rem, 7vw, 3.4rem);
      line-height: .92;
      letter-spacing: -.03em;
      text-transform: uppercase;
      color: var(--text);
    }
    .av[data-state="on"] .av-word { color: #04141a; }

    .av-sub {
      font-family: var(--mono);
      font-size: .62rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      min-height: .8em;
    }
    .av[data-state="on"] .av-sub { color: rgba(4,20,26,.72); }

    /* RIGHT, data column (dark) */
    .av-data {
      padding: 26px 28px;
      background: var(--surface);
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .av-clock-label {
      display: block;
      margin-bottom: 9px;
      font-family: var(--mono);
      font-size: .56rem;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--faint);
    }
    .av-now { display: flex; align-items: baseline; gap: 11px; }
    .av-time {
      font-family: var(--display);
      font-weight: 700;
      font-size: clamp(2rem, 6vw, 2.8rem);
      line-height: 1;
      letter-spacing: -.03em;
      color: var(--text);
      font-variant-numeric: tabular-nums;
    }
    .av-gmt {
      font-family: var(--mono);
      font-size: .64rem;
      letter-spacing: .08em;
      color: var(--faint);
    }
    .av-loc {
      margin-top: 7px;
      font-family: var(--mono);
      font-size: .62rem;
      letter-spacing: .04em;
      color: var(--muted);
    }

    /* schedule rows */
    .av-sched { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
    .av-srow {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 18px;
      padding: 12px 0;
      border-bottom: 1px solid var(--line);
    }
    .av-srow:last-child { border-bottom: 0; }
    .av-sday {
      font-family: var(--mono);
      font-size: .58rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--faint);
    }
    .av-sval {
      font-family: var(--display);
      font-weight: 600;
      font-size: 1.02rem;
      letter-spacing: -.01em;
      color: var(--text);
    }
    .av-foot {
      font-family: var(--mono);
      font-size: .58rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--faint);
      min-height: .8em;
    }

    @media (max-width: 600px) {
      .av { grid-template-columns: 1fr; }
      .av-hero { min-height: 150px; }
    }

    /* ── Rate-limited state (form hidden) ── */
    .cf-card.cf-blocked {
      display: block;
      background:
        radial-gradient(120% 100% at 50% 0%, rgba(34,211,238,.06), transparent 60%),
        #0a0b0d;
    }
    .cf-blocked-inner {
      max-width: 460px;
      margin: 0 auto;
      padding: 56px 40px 52px;
      text-align: center;
    }
    .cf-blocked-ico {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      margin-bottom: 22px;
      border-radius: 16px;
      font-size: 1.4rem;
      color: #22d3ee;
      background: rgba(34,211,238,.08);
      border: 1px solid rgba(34,211,238,.22);
      box-shadow: 0 0 36px -6px rgba(34,211,238,.28);
    }
    .cf-blocked-tag { margin-bottom: 14px; }
    .cf-blocked-title {
      font-family: var(--display);
      font-weight: 700;
      font-size: clamp(1.4rem, 3vw, 1.85rem);
      letter-spacing: -.025em;
      color: var(--text);
      margin: 0 0 14px;
    }
    .cf-blocked-text {
      font-size: .92rem;
      line-height: 1.85;
      color: var(--muted);
      margin: 0 0 26px;
    }
    .cf-blocked-text strong { color: #22d3ee; font-weight: 600; }
    .cf-blocked-alt {
      font-family: var(--mono);
      font-size: .6rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--faint);
      margin: 0 0 16px;
    }
    .cf-blocked-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }
    .cf-blocked-links a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 10px;
      font-size: .85rem;
      font-weight: 500;
      color: var(--text);
      text-decoration: none;
      background: var(--surface-2);
      border: 1px solid var(--line);
      transition: border-color .2s ease, color .2s ease, background .2s ease;
    }
    .cf-blocked-links a:hover {
      color: #22d3ee;
      border-color: rgba(34,211,238,.45);
      background: rgba(34,211,238,.07);
    }

    /* ── Right form area ── */
    .cf-main {
      padding: 40px 44px 38px;
      display: flex;
      flex-direction: column;
    }

    .cf-form {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .cf-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 32px;
    }

    .cf-field {
      display: flex;
      flex-direction: column;
      padding-bottom: 22px;
      margin-bottom: 22px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      transition: border-bottom-color .2s;
      min-width: 0;
      position: relative;
    }

    .cf-field:last-of-type {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .cf-field:focus-within { border-bottom-color: rgba(34,211,238,.35); }
    .cf-field.has-error    { border-bottom-color: rgba(239,68,68,.5); }

    .cf-label {
      font-family: var(--mono);
      font-size: .58rem;
      font-weight: 700;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: rgba(255,255,255,.3);
      margin-bottom: 10px;
      transition: color .2s;
      display: block;
    }

    .cf-field:focus-within .cf-label { color: #22d3ee; }
    .cf-field.has-error .cf-label    { color: #f87171; }

    .cf-input {
      background: transparent;
      border: none;
      outline: none;
      width: 100%;
      padding: 0;
      font-family: var(--sans);
      font-size: .97rem;
      color: var(--text);
      line-height: 1.5;
      -webkit-appearance: none;
      appearance: none;
    }

    .cf-input::placeholder { color: rgba(255,255,255,.2); }

    .cf-textarea {
      resize: none;
      min-height: 88px;
      line-height: 1.7;
    }

    .cf-field.has-error .cf-input { color: #f87171; }

    .cf-count {
      font-family: var(--mono);
      font-size: .58rem;
      letter-spacing: .1em;
      color: var(--faint);
      align-self: flex-end;
      margin-top: 7px;
      transition: color .2s;
    }

    .cf-count.is-near { color: #fbbf24; }
    .cf-count.is-max  { color: #f87171; }

    /* "Refine with AI" pill, top-right of the Subject / Message field */
    .cf-refine {
      position: absolute;
      top: -2px;
      right: 0;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 11px;
      background: rgba(34,211,238,.08);
      border: 1px solid rgba(34,211,238,.28);
      border-radius: 999px;
      color: #22d3ee;
      font-family: var(--mono);
      font-size: .56rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background .2s, border-color .2s, box-shadow .2s, opacity .2s, transform .2s;
    }

    .cf-refine:hover {
      background: rgba(34,211,238,.16);
      border-color: rgba(34,211,238,.55);
      box-shadow: 0 6px 20px -8px rgba(34,211,238,.6);
    }

    .cf-refine:active { transform: translateY(1px); }

    .cf-refine:focus-visible {
      outline: 2px solid #22d3ee;
      outline-offset: 2px;
    }

    .cf-refine i { font-size: .64rem; }
    .cf-refine-spin { display: none; animation: cf-spin .7s linear infinite; }

    .cf-refine.is-busy {
      opacity: .65;
      cursor: progress;
      pointer-events: none;
    }
    .cf-refine.is-busy .cf-refine-ico  { display: none; }
    .cf-refine.is-busy .cf-refine-spin { display: inline-block; }

    /* Brief cyan flash when refined text lands in a field */
    .cf-refined {
      animation: cf-refined-flash 1.2s ease;
    }
    @keyframes cf-refined-flash {
      0%   { color: #22d3ee; }
      100% { color: var(--text); }
    }

    .cf-footer {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      margin-top: 28px;
      padding-top: 24px;
      border-top: 1px solid rgba(255,255,255,.07);
    }

    /* Button: white on dark → cyan on hover */
    .cf-btn {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      padding: 14px 28px;
      background: #fff;
      color: #000;
      border: none;
      border-radius: 10px;
      font-family: var(--display);
      font-weight: 700;
      font-size: .95rem;
      letter-spacing: .01em;
      cursor: pointer;
      flex-shrink: 0;
      transition: background .25s, color .25s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
    }

    .cf-btn:hover {
      background: #22d3ee;
      color: #02181d;
      transform: translateY(-2px);
      box-shadow: 0 14px 36px -10px rgba(34,211,238,.7);
    }

    .cf-btn:active { transform: translateY(0); }

    .cf-btn:focus-visible {
      outline: 2px solid #22d3ee;
      outline-offset: 3px;
    }

    .cf-btn:disabled {
      opacity: .45;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .cf-btn i { font-size: .82rem; transition: transform .3s ease; }
    .cf-btn:hover .cf-btn-ico { transform: translateX(4px); }

    .cf-btn-spin { display: none; animation: cf-spin .7s linear infinite; }
    .cf-btn.is-sending .cf-btn-ico  { display: none; }
    .cf-btn.is-sending .cf-btn-spin { display: inline-block; }

    @keyframes cf-spin { to { transform: rotate(360deg); } }

    .cf-status {
      font-size: .88rem;
      line-height: 1.5;
      flex: 1;
    }

    .cf-status.ok  { color: #34d399; }
    .cf-status.err { color: #f87171; }

    /* ── responsive ── */
    @media (max-width: 760px) {
      .cf-card { grid-template-columns: 1fr; }
      .cf-side {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        padding: 30px 28px;
      }
      .cf-main { padding: 30px 28px; }
    }

    @media (max-width: 540px) {
      .cf-row { grid-template-columns: 1fr; gap: 0; }
      .cf-btn { width: 100%; justify-content: center; }
      .cf-status { text-align: center; }
    }

    @media (prefers-reduced-motion: reduce) {
      .cf-btn, .cf-btn i, .cf-btn-spin { transition: none; animation: none; }
    }

    /* ════════════ REQUEST CV, centered single-column panel ════════════
       Deliberately different from the contact card: no sidebar, content
       stacked & centered above an inline email + button input group. */
    .cv-panel {
      position: relative;
      width: 100%;
      margin: 0 auto;
      text-align: center;
      background:
        radial-gradient(130% 150% at 50% 0%, rgba(34,211,238,.09), transparent 58%),
        #0a0b0d;
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 22px;
      padding: 50px 44px 44px;
      overflow: hidden;
      box-shadow: 0 40px 90px -50px rgba(0,0,0,.9);
    }
    /* glowing accent hairline along the very top */
    .cv-panel::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, #22d3ee, transparent);
      opacity: .75;
    }

    .cv-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--mono);
      font-size: .58rem;
      font-weight: 700;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: #22d3ee;
      background: rgba(34,211,238,.08);
      border: 1px solid rgba(34,211,238,.22);
      border-radius: 999px;
      padding: 7px 14px;
      margin-bottom: 22px;
    }
    .cv-eyebrow i { font-size: .7rem; }

    .cv-heading {
      font-family: var(--display);
      font-weight: 700;
      font-size: clamp(1.85rem, 4vw, 2.6rem);
      line-height: 1.04;
      letter-spacing: -.03em;
      color: var(--text);
      margin: 0 0 14px;
    }

    .cv-text {
      font-size: .95rem;
      line-height: 1.8;
      color: var(--muted);
      max-width: 460px;
      margin: 0 auto 32px;
    }

    /* Inline email + button, a single bordered "pill" group */
    .cv-form { max-width: 500px; margin: 0 auto; }

    .cv-srlabel {
      position: absolute;
      width: 1px; height: 1px;
      overflow: hidden; clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .cv-inputrow {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #060708;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 13px;
      padding: 7px 7px 7px 16px;
      transition: border-color .2s, box-shadow .2s;
    }
    .cv-inputrow:focus-within {
      border-color: rgba(34,211,238,.5);
      box-shadow: 0 0 0 3px rgba(34,211,238,.12);
    }
    .cv-inputrow.is-error {
      border-color: rgba(239,68,68,.6);
      box-shadow: 0 0 0 3px rgba(239,68,68,.12);
    }

    .cv-input-ico {
      color: rgba(255,255,255,.32);
      font-size: .9rem;
      flex-shrink: 0;
      transition: color .2s;
    }
    .cv-inputrow:focus-within .cv-input-ico { color: #22d3ee; }
    .cv-inputrow.is-error   .cv-input-ico   { color: #f87171; }

    .cv-input {
      flex: 1;
      min-width: 0;
      background: transparent;
      border: none;
      outline: none;
      font-family: var(--sans);
      font-size: .97rem;
      color: var(--text);
      -webkit-appearance: none;
      appearance: none;
    }
    .cv-input::placeholder { color: rgba(255,255,255,.28); }

    /* Button: cyan by default → white on hover (inverse of the contact button) */
    .cv-btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      flex-shrink: 0;
      padding: 12px 22px;
      background: #22d3ee;
      color: #02181d;
      border: none;
      border-radius: 9px;
      font-family: var(--display);
      font-weight: 700;
      font-size: .9rem;
      cursor: pointer;
      transition: background .25s, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
    }
    .cv-btn:hover {
      background: #fff;
      transform: translateY(-1px);
      box-shadow: 0 12px 30px -10px rgba(34,211,238,.6);
    }
    .cv-btn:active { transform: translateY(0); }
    .cv-btn:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; }
    .cv-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
    .cv-btn i { font-size: .82rem; transition: transform .3s ease; }
    .cv-btn:hover .cv-btn-ico { transform: translateY(2px); }
    .cv-btn-spin { display: none; animation: cf-spin .7s linear infinite; }
    .cv-btn.is-sending .cv-btn-ico  { display: none; }
    .cv-btn.is-sending .cv-btn-spin { display: inline-block; }

    .cv-status {
      font-size: .86rem;
      line-height: 1.5;
      margin: 16px 0 0;
      min-height: 1.1em;
    }
    .cv-status.ok  { color: #34d399; }
    .cv-status.err { color: #f87171; }

    @media (max-width: 540px) {
      .cv-panel { padding: 38px 22px 32px; border-radius: 18px; }
      .cv-inputrow { flex-direction: column; align-items: stretch; padding: 12px; gap: 12px; }
      .cv-input-ico { display: none; }
      .cv-input { padding: 4px 4px; text-align: center; }
      .cv-btn { width: 100%; justify-content: center; padding: 13px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .cv-btn, .cv-btn i, .cv-btn-spin { transition: none; animation: none; }
    }

    /* ════════════ CUSTOM FLOATING SCROLLBAR (absolute / overlay) ════════════
       Once JS runs, <html> gets .cscroll-on and the native bar is hidden. A thin
       cyan-glow thumb floats OVER the content on the right edge, tracks scroll
       position and is draggable. Pure overlay, it never reserves layout width. */
    html.cscroll-on { scrollbar-width: none; }                                  /* Firefox */
    html.cscroll-on::-webkit-scrollbar { width: 0; height: 0; display: none; }   /* WebKit  */

    .cscroll {
      position: fixed;
      top: 0; right: 2px; bottom: 0;
      width: 14px;
      z-index: 9990;
      pointer-events: none;        /* track is click-through; thumb opts back in */
      opacity: 0;
      transition: opacity .4s ease;
    }
    .cscroll.show { opacity: 1; }

    .cscroll-thumb {
      position: absolute;
      top: 0; right: 4px;
      width: 6px;
      min-height: 40px;
      border-radius: 999px;
      background: #232325;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), 0 2px 8px rgba(0, 0, 0, .6);
      pointer-events: auto;
      cursor: grab;
      transition: width .18s ease, box-shadow .18s ease;
      will-change: transform;
    }
    .cscroll-thumb:hover,
    .cscroll-thumb.is-drag {
      width: 10px;
      background: #34343a;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 2px 10px rgba(0, 0, 0, .7);
    }
    .cscroll-thumb.is-drag { cursor: grabbing; }

    @media (prefers-reduced-motion: reduce) {
      .cscroll, .cscroll-thumb { transition: none; }
    }

    /* ════════════ ASK HALINA, on-site Chatbot & AI Agent (chat panel) ════════════ */
    .halina-card {
      --cy: #22d3ee;
      position: relative;
      background:
        radial-gradient(120% 130% at 50% 0%, rgba(34,211,238,.07), transparent 60%),
        #0a0b0d;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 22px;
      overflow: hidden;
      box-shadow: 0 40px 90px -50px rgba(0,0,0,.9), 0 0 64px -30px rgba(34,211,238,.25);
    }
    /* glowing accent hairline along the very top */
    .halina-card::before {
      content: "";
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, var(--cy), transparent);
      opacity: .8;
    }

    /* ── header strip ── */
    .halina-top {
      display: flex; align-items: center; gap: 14px;
      padding: 18px 22px;
      border-bottom: 1px solid rgba(255,255,255,.07);
      background: rgba(255,255,255,.015);
    }
    .halina-avatar {
      width: 44px; height: 44px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      border-radius: 13px;
      font-family: var(--display); font-weight: 700; font-size: 1.25rem;
      color: #04141a; background: var(--cy);
      box-shadow: 0 0 26px -4px rgba(34,211,238,.6);
    }
    .halina-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .halina-name {
      font-family: var(--display); font-weight: 700; font-size: 1.05rem;
      letter-spacing: -.01em; color: var(--text); line-height: 1;
    }
    .halina-role {
      font-family: var(--mono); font-size: .58rem; letter-spacing: .18em;
      text-transform: uppercase; color: var(--faint);
    }
    .halina-status {
      margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
      font-family: var(--mono); font-size: .56rem; letter-spacing: .2em;
      text-transform: uppercase; color: var(--muted);
    }
    .halina-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--ok); box-shadow: 0 0 10px 0 rgba(34,197,94,.7);
    }

    /* ── conversation log ── */
    .halina-log {
      display: flex; flex-direction: column; gap: 14px;
      padding: 24px 22px;
      max-height: min(70vh, 580px); overflow-y: auto;
      scroll-behavior: smooth;
      transition: height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .halina-msg {
      display: flex; gap: 11px; max-width: 88%;
      animation: halina-pop .35s cubic-bezier(.2,.8,.2,1) both;
    }
    @keyframes halina-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .halina-msg-ico {
      width: 30px; height: 30px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      border-radius: 9px;
      font-family: var(--display); font-weight: 700; font-size: .85rem;
      color: #04141a; background: var(--cy);
    }
    .halina-bubble {
      padding: 12px 16px; border-radius: 14px;
      font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.86);
      white-space: pre-wrap; overflow-wrap: anywhere;
    }
    .halina-msg.bot .halina-bubble {
      background: var(--surface-2);
      border: 1px solid var(--line);
      border-top-left-radius: 5px;
    }
    .halina-ico-col {
      display: flex; flex-direction: column; align-items: center;
      gap: 5px; flex-shrink: 0;
    }
    .halina-ai-badge {
      font-size: .62rem;
      color: rgba(34,211,238,.28);
      line-height: 1;
      pointer-events: none;
      transition: color .25s;
    }
    .halina-ico-col:hover .halina-ai-badge { color: rgba(34,211,238,.65); }
    .halina-msg.user { align-self: flex-end; flex-direction: row-reverse; }
    .halina-msg.user .halina-msg-ico { background: rgba(255,255,255,.1); color: var(--text); font-size: .8rem; }
    .halina-msg.user .halina-bubble {
      background: rgba(34,211,238,.1);
      border: 1px solid rgba(34,211,238,.28);
      border-top-right-radius: 5px;
      color: var(--text);
    }

    /* ── AI avatar photo (header + bot message bubbles) ── */
    .halina-avatar, .halina-msg.bot .halina-msg-ico { overflow: hidden; }
    .halina-avatar img,
    .halina-msg-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* ── chat log: custom overlay scrollbar (hidden, fades in while scrolling) ── */
    .halina-scroll { position: relative; }
    .halina-log { scrollbar-width: none; }                                    /* Firefox */
    .halina-log::-webkit-scrollbar { width: 0; height: 0; display: none; }     /* WebKit  */
    .halina-sb-thumb {
      position: absolute;
      top: 0; right: 5px;
      width: 6px; min-height: 28px;
      border-radius: 999px;
      background: #232325;
      box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 2px 8px rgba(0,0,0,.6);
      opacity: 0;
      pointer-events: auto;
      cursor: grab;
      transition: opacity .4s ease, width .18s ease, background .18s ease;
      will-change: transform;
    }
    .halina-scroll.sb-show .halina-sb-thumb { opacity: 1; }
    .halina-sb-thumb:hover, .halina-sb-thumb.is-drag { width: 10px; background: #34343a; }
    .halina-sb-thumb.is-drag { cursor: grabbing; }
    @media (prefers-reduced-motion: reduce) { .halina-sb-thumb { transition: none; } }

    /* ── Per-message direction + font ───────────────────────────────────
       Each bubble follows the language of ITS OWN text (set by JS from the
       reply language, or auto-detected), independent of the UI chrome which
       keeps following the preferred language on the card. */
    .halina-bubble:not([dir]) { unicode-bidi: plaintext; }   /* fallback: auto-detect per message */
    .halina-bubble[dir]       { unicode-bidi: isolate; }     /* explicit dir from JS wins */
    .halina-bubble[dir="rtl"] { text-align: right; font-family: 'Noto Sans Arabic', 'Cairo', sans-serif; }
    .halina-bubble[dir="ltr"] { text-align: left;  font-family: 'Inter', 'Noto Sans Arabic', 'Cairo', sans-serif; }
    .halina-actions-wrap { position: relative; flex-shrink: 0; }
    .halina-actions-btn {
      width: 40px; height: 40px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      border: 1px solid var(--line); border-radius: 11px;
      background: var(--surface); color: var(--cy); font-size: .95rem; cursor: pointer;
      transition: border-color .2s, background .2s, transform .2s;
    }
    .halina-actions-btn[hidden] { display: none; }
    .halina-actions-btn:hover { border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.07); }
    .halina-actions-btn.is-open { background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.5); }
    /* full-width command panel above the input, opened by "/" or the ⚡ button */
    .halina-cmd-panel {
      position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); z-index: 30;
      background: #0c0d10; border: 1px solid var(--line-strong); border-radius: 14px;
      padding: 8px; max-height: 280px; overflow-y: auto;
      box-shadow: 0 22px 55px -18px rgba(0,0,0,.9);
      animation: halina-pop .16s ease both;
    }
    .halina-cmd-panel[hidden] { display: none; }
    .halina-cmd-head {
      font-family: var(--mono); font-size: .56rem; letter-spacing: .2em;
      text-transform: uppercase; color: var(--faint); padding: 6px 10px 9px;
    }
    .halina-cmd-list { display: flex; flex-direction: column; gap: 2px; }
    .halina-cmd-item {
      display: flex; align-items: center; gap: 12px; width: 100%;
      padding: 10px 12px; border: none; border-radius: 9px; background: transparent;
      color: var(--text); font-family: var(--sans); font-size: .92rem; text-align: start;
      cursor: pointer; transition: background .15s;
    }
    .halina-cmd-item:hover, .halina-cmd-item.is-active { background: var(--surface-2); }
    .halina-cmd-ico   { font-size: 1.15rem; flex-shrink: 0; line-height: 1; }
    .halina-cmd-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .halina-cmd-panel.is-min .halina-cmd-label { flex-direction: row; gap: 0; }
    .halina-cmd-key {
      font-family: var(--mono); font-size: .68rem; color: var(--cy);
      background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.25);
      padding: 2px 8px; border-radius: 6px; white-space: nowrap;
    }
    .halina-cmd-empty { padding: 12px; color: var(--muted); font-size: .85rem; text-align: center; }
    /* minimized (⚡ button): compact horizontal chips */
    .halina-cmd-panel.is-min .halina-cmd-head { display: none; }
    .halina-cmd-panel.is-min .halina-cmd-list { flex-direction: row; flex-wrap: wrap; gap: 7px; }
    .halina-cmd-panel.is-min .halina-cmd-item { width: auto; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; }
    .halina-cmd-panel.is-min .halina-cmd-label { flex: 0 1 auto; }
    .halina-cmd-panel.is-min .halina-cmd-key { display: none; }

    /* polished HTML notice card (unsupported language / unavailable) */
    .halina-notice {
      display: flex; gap: 12px; align-items: flex-start;
      padding: 14px 16px; border-radius: 12px;
      background: rgba(34,211,238,.06); border: 1px solid rgba(34,211,238,.22);
    }
    .halina-notice-ico   { font-size: 1.25rem; line-height: 1.3; flex-shrink: 0; }
    .halina-notice-title { font-weight: 600; color: var(--text); line-height: 1.5; }
    .halina-notice-sub   { margin-top: 6px; color: var(--muted); font-size: .92em; line-height: 1.6; }

    /* ── BIG AVATAR HERO, photo-led, frameless ─────────────────────────
       A LARGE circular Halina photo is the centerpiece (glowing conic ring +
       soft breathing halo); the gradient-sheen "Halina" wordmark sits beneath,
       then a centered green-dot "Online" pill. NO tagline, NO box/border/panel,
       content floats free on the dark card, one centered vertical axis.
       Compositor-only motion. FRESH keyframes: ac-*. RESERVED (NOT redefined):
       .halina-card.is-welcome, .halina-intro.is-leaving,
       .halina-intro-dot.is-off (+::before), .halina-lang*. */
    .halina-intro {
      display: flex; flex-direction: column; align-items: center;
      gap: 0; padding: 0 0 24px; margin: 0 0 12px;
      min-height: 120px;
      border-bottom: 1px solid var(--line);
      background: transparent;
      transition: opacity .35s ease, transform .35s ease;  /* reserved .is-leaving */
    }

    /* THE STAGE, frameless centered column */
    .halina-intro-stage {
      position: relative; isolation: isolate;
      align-self: stretch; width: 100%;
      display: flex; flex-direction: column; align-items: center;
      text-align: center; gap: 16px;
      padding: 32px 18px 22px;
    }

    /* AVATAR CLUSTER, the BIG photo + glowing ring + soft halo */
    .halina-intro-orb {
      position: relative; z-index: 3;
      width: 134px; height: 134px; flex: 0 0 auto;
      display: flex; align-items: center; justify-content: center;
    }
    /* breathing energy halo behind the photo */
    .halina-intro-orb::before {
      content: ""; position: absolute; inset: -22px; border-radius: 50%;
      background: radial-gradient(circle, rgba(34,211,238,.32), rgba(59,130,246,.14) 48%, transparent 72%);
      filter: blur(11px); z-index: 0; pointer-events: none;
    }
    /* rotating CONIC energy ring (own layer; transform-only spin) */
    .halina-intro-ring {
      position: absolute; inset: -4px; border-radius: 50%; z-index: 1;
      padding: 3px;
      background: conic-gradient(from 0deg, var(--cy), #38bdf8, #3b82f6, #6366f1, #38bdf8, var(--cy));
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
              mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
      filter: drop-shadow(0 0 9px rgba(34,211,238,.5));
      will-change: transform;
    }
    /* clean fallback when mask unsupported, solid cyan ring, no conic bleed */
    @supports not ((-webkit-mask: radial-gradient(#000, #000)) or (mask: radial-gradient(#000, #000))) {
      .halina-intro-ring {
        background: none; padding: 0;
        border: 2px solid rgba(34,211,238,.85);
        box-shadow: 0 0 9px rgba(34,211,238,.45);
      }
    }
    /* the BIG photo / "H" disc */
    .halina-intro-avatar {
      position: relative; z-index: 2;
      width: 120px; height: 120px; flex: 0 0 auto;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%; overflow: hidden;
      border: 1px solid rgba(255,255,255,.14);
      background: radial-gradient(120% 120% at 30% 20%, #14181f, #07090c);
      color: var(--cy); font-family: var(--display); font-weight: 700;
      font-size: 3rem; line-height: 1;                  /* "H" fallback */
      box-shadow: inset 0 0 20px rgba(0,0,0,.6), 0 14px 36px -16px rgba(0,0,0,.9);
      transition: transform .5s cubic-bezier(.2,.8,.2,1);
    }
    .halina-intro-avatar img {
      width: 100%; height: 100%; object-fit: cover;
      object-position: 50% 16%; display: block;
      transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .6s ease;
    }
    .halina-intro-orb:hover .halina-intro-avatar { transform: scale(1.03); }
    .halina-intro-orb:hover .halina-intro-avatar img { transform: scale(1.05); filter: brightness(1.05) contrast(1.02); }

    /* NAME, gradient-sheen wordmark beneath the photo */
    .halina-intro-name {
      position: relative;
      font-family: var(--display); font-weight: 700;
      font-size: clamp(2rem, 11vw, 2.6rem); line-height: .94; letter-spacing: -.03em;
      background-image: linear-gradient(100deg,
        #fafafa 0%, #fafafa 34%, #bff3ff 46%, #ffffff 52%, #bff3ff 58%, #fafafa 70%, #fafafa 100%);
      background-size: 220% 100%; background-position: 0% 0%;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      filter: drop-shadow(0 2px 16px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(56,189,248,.18));
    }

    /* role/tagline under the Halina wordmark */
    .halina-intro-role {
      position: relative; z-index: 3; margin-top: 14px;
      font-family: var(--mono); font-size: .62rem; letter-spacing: .22em;
      text-transform: uppercase; color: var(--muted);
    }

    /* STATUS PILL, centered, closes the stack */
    .halina-intro-status {
      position: relative; z-index: 3;
      display: inline-flex; align-items: center; gap: 8px;
      padding: 5px 12px 5px 10px; border-radius: 999px;
      border: 1px solid rgba(34,197,94,.22);
      background: rgba(34,197,94,.06);
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
      font-family: var(--mono); font-size: .54rem; letter-spacing: .18em;
      text-transform: uppercase; color: var(--muted); line-height: 1;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }
    .halina-intro-dot {
      position: relative; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
      background: var(--ok); box-shadow: 0 0 0 3px rgba(34,197,94,.16), 0 0 8px rgba(34,197,94,.6);
    }
    .halina-intro-dot::before {
      content: ""; position: absolute; inset: -3px; border-radius: 50%;
      border: 1px solid rgba(34,197,94,.5); pointer-events: none;
      animation: ac-dot-pulse 2.4s ease-out infinite;
    }

    /* ENTRANCE keyframe (shared) */
    @keyframes ac-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

    /* MOTION, compositor-only (transform / background-position / opacity), gated */
    @media (prefers-reduced-motion: no-preference) {
      .halina-intro-ring { animation: ac-ring-spin 9s linear infinite; }
      .halina-intro-name { animation: ac-rise .55s cubic-bezier(.2,.8,.2,1) both .16s, ac-sheen 7s ease-in-out 1.3s infinite; will-change: background-position; }
      .halina-intro-orb { animation: ac-rise .55s cubic-bezier(.2,.8,.2,1) both .05s; }
      .halina-intro-status { animation: ac-rise .55s cubic-bezier(.2,.8,.2,1) both .26s; }

      @keyframes ac-ring-spin { to { transform: rotate(360deg); } }
      @keyframes ac-sheen {
        0%, 18% { background-position: 0% 0%; }
        62%, 100% { background-position: 100% 0%; }
      }
      @keyframes ac-dot-pulse {
        0%   { opacity: .7; transform: scale(.6); }
        70%  { opacity: 0;  transform: scale(1.9); }
        100% { opacity: 0;  transform: scale(1.9); }
      }
    }

    @media (max-width: 460px) {
      .halina-intro { padding: 0 0 18px; }
      .halina-intro-stage { padding: 26px 14px 18px; gap: 14px; }
      .halina-intro-orb { width: 120px; height: 120px; }
      .halina-intro-avatar { width: 108px; height: 108px; font-size: 2.7rem; }
      .halina-intro-name { font-size: clamp(1.9rem, 12vw, 2.3rem); }
    }

    /* REDUCED MOTION, calm, still, premium */
    @media (prefers-reduced-motion: reduce) {
      .halina-intro { transition: none; }
      .halina-intro-ring { animation: none; }
      .halina-intro-name {
        animation: none; background-position: 50% 0%;
        background-image: linear-gradient(100deg, #fafafa, #d6f6ff 52%, #fafafa);
      }
      .halina-intro-dot::before { animation: none; opacity: 0; }
      .halina-intro-orb, .halina-intro-name, .halina-intro-status { animation: none; opacity: 1; transform: none; }
    }

    /* ── Welcome state: ONLY the profile hero shows until "Start chat" ── */
    .halina-card.is-welcome .halina-chips,
    .halina-card.is-welcome .halina-form,
    .halina-card.is-welcome .halina-foot { display: none; }
    .halina-card.is-welcome .halina-intro { border-bottom: none; padding-bottom: 28px; }
    /* let the hero grow freely in welcome state, reset JS-driven height */
    .halina-card.is-welcome .halina-log { height: auto; max-height: none; overflow: visible; transition: none; }

    /* the hero fades up and out when the chat begins (JS removes it after) */
    .halina-intro { transition: opacity .35s ease, transform .35s ease; }
    .halina-intro.is-leaving { opacity: 0; transform: translateY(-8px); pointer-events: none; }

    /* ── START BUTTON, "BLACK COSMIC" (flat starfield) ───────────────────
       NO glow, NO gradients, flat solid near-black PILL with a real starfield
       made of crisp solid dots (zero-blur box-shadows on ::before) that gently
       twinkle, a solid thin cyan rim, and a SOLID comet dash (::after) that
       streaks across on hover. Light text. Reduced-motion-safe. FRESH
       keyframes (ac-btn-*). */
    .halina-intro-start {
      position: relative; z-index: 3;
      margin-top: 6px;
      display: inline-flex; align-items: center; gap: 11px;
      padding: 15px 34px; border-radius: 999px;
      border: 1px solid rgba(34,211,238,.38);
      background: #04060d;                 /* flat solid near-black, no gradient */
      color: #eafdff;
      font-family: var(--mono); font-weight: 700; font-size: .78rem;
      letter-spacing: .18em; text-transform: uppercase;
      cursor: pointer; overflow: hidden; isolation: isolate;
      transition: transform .2s ease, border-color .25s ease, color .2s ease, background .25s ease;
    }
    .halina-intro-start .fa-solid {
      position: relative; z-index: 2;
      font-size: .84rem; color: var(--cy);   /* solid color, no drop-shadow glow */
    }
    /* STARFIELD, one seed dot + crisp copies via ZERO-blur box-shadows (no glow) */
    .halina-intro-start::before {
      content: ""; position: absolute; z-index: -1; pointer-events: none;
      top: 9px; left: 14px; width: 1.5px; height: 1.5px; border-radius: 50%;
      background: rgba(255,255,255,.85);
      box-shadow:
        20px -3px 0 0 rgba(255,255,255,.85),
        44px  9px 0 0 rgba(190,225,255,.8),
        66px  1px 0 0 rgba(255,255,255,.7),
        90px 15px 0 0 rgba(255,255,255,.6),
        112px 4px 0 .3px rgba(255,255,255,.9),
        134px 12px 0 0 rgba(170,215,255,.75),
        158px 6px 0 0 rgba(255,255,255,.7),
        180px 15px 0 0 rgba(255,255,255,.6),
        36px 20px 0 0 rgba(255,255,255,.55),
        78px 22px 0 0 rgba(200,235,255,.6),
        122px 21px 0 .3px rgba(255,255,255,.8),
        168px -1px 0 0 rgba(255,255,255,.65),
        100px 26px 0 0 rgba(255,255,255,.5);
    }
    /* COMET, a SOLID dash (no gradient/glow) that streaks across on hover */
    .halina-intro-start::after {
      content: ""; position: absolute; top: 42%; left: 0; z-index: 2;
      width: 22px; height: 2px; border-radius: 2px; pointer-events: none; opacity: 0;
      background: rgba(214,246,255,.92);
      transform: translateX(-160%) rotate(-16deg);
      will-change: transform;
    }
    .halina-intro-start:hover {
      transform: translateY(-2px);
      border-color: rgba(34,211,238,.75);
      background: #060a14;
      color: #ffffff;
    }
    .halina-intro-start:active { transform: translateY(0); }
    .halina-intro-start:focus-visible {
      outline: 2px solid rgba(34,211,238,.75);
      outline-offset: 2px;
    }
    /* MOTION, gated: starfield twinkle (opacity) + solid comet on hover (transform) */
    @media (prefers-reduced-motion: no-preference) {
      .halina-intro-start::before { animation: ac-btn-twinkle 3.8s ease-in-out infinite; }
      .halina-intro-start:hover::after {
        opacity: 1; animation: ac-btn-comet 1s ease;
      }
      @keyframes ac-btn-twinkle {
        0%, 100% { opacity: .5; }
        50%      { opacity: .95; }
      }
      @keyframes ac-btn-comet {
        from { transform: translateX(-160%) rotate(-16deg); opacity: 1; }
        to   { transform: translateX(900%)  rotate(-16deg); opacity: 0; }
      }
    }
    /* REDUCED MOTION, static starfield, no twinkle/comet */
    @media (prefers-reduced-motion: reduce) {
      .halina-intro-start { transition: none; }
      .halina-intro-start::before { animation: none; opacity: .8; }
      .halina-intro-start::after { display: none; }
    }

    /* Language picker, shown inside the hero when the visitor clicks "Start chat". */
    .halina-lang { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px;
                   animation: halina-lang-in .3s ease both; }
    @keyframes halina-lang-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    .halina-lang-label { font-family: var(--sans); font-size: .76rem; letter-spacing: .04em; color: var(--muted); }
    .halina-lang-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
    .halina-lang-btn {
      padding: 10px 18px; border-radius: 11px;
      border: 1px solid rgba(34,211,238,.35);
      background: rgba(34,211,238,.10); color: var(--cy);
      font-family: var(--sans); font-weight: 600; font-size: .92rem;
      cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
    }
    .halina-lang-btn:hover {
      background: var(--cy); color: #04141a; border-color: var(--cy);
      transform: translateY(-1px);
    }
    .halina-lang-btn.is-current { border-color: var(--cy); box-shadow: inset 0 0 0 2px rgba(34,211,238,.25); }

    /* Persistent inline language switcher in the chat footer. */
    .halina-foot-left { display: inline-flex; align-items: center; gap: 8px; }
    .halina-foot-left[hidden] { display: none; }
    .halina-lang-sw { display: inline-flex; align-items: center; gap: 2px; }
    .halina-lang-sw-btn {
      padding: 2px 7px; border-radius: 6px;
      border: 1px solid transparent;
      background: transparent; color: var(--faint);
      font-family: var(--mono); font-size: .58rem;
      letter-spacing: .06em; text-transform: uppercase;
      cursor: pointer; transition: color .15s, border-color .15s;
    }
    .halina-lang-sw-btn:hover { color: var(--cy); }
    .halina-lang-sw-btn.is-active { color: var(--cy); border-color: rgba(34,211,238,.3); }

    /* offline reflection on the hero (set once the availability status loads) */
    .halina-intro-dot.is-off { background: var(--muted); box-shadow: none; }
    .halina-intro-dot.is-off::before { animation: none; }

    /* make the whole input row feel clickable (click anywhere → focus input) */
    .halina-form { position: relative; cursor: text; }
    .halina-form.is-disabled { opacity: .65; cursor: not-allowed; }
    .halina-form:focus-within { background: #090a0d; }

    /* rich (html) + file responses inside a bot bubble */
    .halina-rich { line-height: 1.65; }
    .halina-rich strong, .halina-rich b { color: var(--text); }
    /* inline links inside a bot reply bubble (auto-linked URLs/domains) */
    .halina-link {
      color: var(--cy); text-decoration: underline;
      text-underline-offset: 2px; text-decoration-color: rgba(34,211,238,.5);
      word-break: break-word; transition: text-decoration-color .2s;
    }
    .halina-link:hover { text-decoration-color: var(--cy); }
    .halina-file {
      display: inline-flex; align-items: center; gap: 9px; margin-top: 4px;
      padding: 10px 15px; border-radius: 11px; text-decoration: none;
      background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.32);
      color: var(--cy); font-weight: 600; font-size: .9rem;
      transition: background .2s, border-color .2s, transform .2s;
    }
    .halina-file:hover { background: rgba(34,211,238,.18); border-color: rgba(34,211,238,.5); transform: translateY(-1px); }

    /* "Get a better answer" retry link shown below each bot bubble */
    .halina-bad-answer-wrap { display: flex; justify-content: flex-start; margin-top: 7px; }
    .halina-bad-answer {
      background: none; border: none; padding: 2px 0; cursor: pointer; font: inherit;
      font-size: .76rem; font-weight: 500; color: rgba(255,255,255,.34);
      display: inline-flex; align-items: center; gap: 5px; line-height: 1;
      transition: color .2s;
    }
    .halina-bad-answer::before { content: "\21bb"; font-size: .95em; }   /* rotate cue */
    .halina-bad-answer:hover { color: rgba(34,211,238,.8); }
    .halina-bad-answer:focus-visible { outline: 1px solid rgba(34,211,238,.4); outline-offset: 3px; border-radius: 3px; }

    /* A rejected answer: kept visible above the new reply, struck through with a red line. */
    .halina-answer-body.is-rejected,
    .halina-answer-body.is-rejected .halina-link {
      text-decoration: line-through;
      text-decoration-color: rgba(248,113,113,.9);
      color: rgba(248,113,113,.5);
    }

    /* ════════════════════════════════════════════════════════════════
       PER-MESSAGE UX SETTINGS  (driven by halina_config.php 'settings'
       → server attaches data.ux → main.js applyUx()). Each bot bubble
       carries a --ux-accent custom property (cyan by default); a theme,
       an inline accent colour, or a glow tweak it per message.
       ════════════════════════════════════════════════════════════════ */
    .halina-msg.bot .halina-bubble {
      --ux-accent: var(--cy);
      position: relative;                       /* anchor the corner badge */
      transition: box-shadow .3s ease, border-color .3s ease, background .3s ease;
    }

    /* lens: a refractive light that travels around the bubble's border rim, like a
       highlight catching the edge of a glass lens (replaces the old soft glow).
       Built as a masked conic-gradient ring on ::after, scoped under .halina-msg.bot
       so it outranks the base bot-bubble border. true = subtle, 'strong' = brighter. */
    @property --ux-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

    .halina-msg.bot .halina-bubble.halina-lens { border-color: transparent; }
    .halina-msg.bot .halina-bubble.halina-lens::after {
      content: "";
      position: absolute; inset: 0;
      border-radius: inherit;
      padding: 0.5px;                                   /* ring thickness (very thin hairline) */
      background: conic-gradient(from var(--ux-ang, 0deg),
                    transparent 0deg,
                    var(--ux-accent) 68deg,
                    #ffffff 90deg,
                    var(--ux-accent) 112deg,
                    transparent 180deg,
                    transparent 360deg);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events: none;
      animation: halina-lens-spin 3.2s linear infinite;
    }
    .halina-msg.bot .halina-bubble.halina-lens--strong::after {
      padding: 1px;
      animation-duration: 2.2s;
      filter: drop-shadow(0 0 6px var(--ux-accent));    /* a touch of bloom on the strong lens */
    }
    @keyframes halina-lens-spin { to { --ux-ang: 360deg; } }
    @media (prefers-reduced-motion: reduce) {
      .halina-msg.bot .halina-bubble.halina-lens::after { animation: none; }
    }

    /* theme presets: set the accent + a subtle tinted border/background.
       Scoped under .halina-msg.bot so they beat the base bot-bubble styling. */
    .halina-msg.bot .halina-bubble--info    { --ux-accent: #22d3ee; border-color: rgba(34,211,238,.34);  background: rgba(34,211,238,.06); }
    .halina-msg.bot .halina-bubble--brand   { --ux-accent: #a78bfa; border-color: rgba(167,139,250,.34); background: rgba(167,139,250,.06); }
    .halina-msg.bot .halina-bubble--success { --ux-accent: #34d399; border-color: rgba(52,211,153,.34);  background: rgba(52,211,153,.06); }
    .halina-msg.bot .halina-bubble--warning { --ux-accent: #fbbf24; border-color: rgba(251,191,36,.34);  background: rgba(251,191,36,.06); }
    .halina-msg.bot .halina-bubble--danger  { --ux-accent: #f87171; border-color: rgba(248,113,113,.34); background: rgba(248,113,113,.06); }
    .halina-msg.bot .halina-bubble--neutral { --ux-accent: rgba(255,255,255,.5); }

    /* text-selection highlight inside a reply (data.ux.select; falls back to cyan) */
    .halina-answer-body::selection,
    .halina-answer-body *::selection {
      background: var(--ux-select, rgba(34,211,238,.28));
      color: #04141a;
    }

    /* corner emoji badge (data.ux.icon) */
    .halina-bubble.has-ux-badge { padding-right: 32px; }
    .halina-ux-badge {
      position: absolute; top: 8px; right: 10px;
      font-size: .95rem; line-height: 1; opacity: .92; pointer-events: none;
      filter: drop-shadow(0 0 6px var(--ux-accent));                                  /* fallback */
      filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ux-accent) 60%, transparent));
    }
    /* The corner badge follows the BUBBLE's OWN direction (set per message), not
       the card, so an Arabic answer in an English UI (and vice versa) mirrors right. */
    .halina-bubble[dir="rtl"].has-ux-badge { padding-right: 16px; padding-left: 32px; }
    .halina-bubble[dir="rtl"] .halina-ux-badge { right: auto; left: 10px; }
    .halina-bubble[dir="ltr"].has-ux-badge { padding-right: 32px; padding-left: 16px; }
    .halina-bubble[dir="ltr"] .halina-ux-badge { right: 10px; left: auto; }

    /* "Copy" button under a reply (data.ux.copy), mirrors the retry link styling */
    .halina-copy-wrap { display: flex; justify-content: flex-start; margin-top: 7px; }
    .halina-copy {
      background: none; border: none; padding: 2px 0; cursor: pointer; font: inherit;
      font-size: .76rem; font-weight: 500; color: rgba(255,255,255,.34);
      display: inline-flex; align-items: center; gap: 6px; line-height: 1;
      transition: color .2s;
    }
    .halina-copy i { font-size: .9em; }
    .halina-copy:hover { color: rgba(34,211,238,.8); }
    .halina-copy.is-done { color: #34d399; }
    .halina-copy:focus-visible { outline: 1px solid rgba(34,211,238,.4); outline-offset: 3px; border-radius: 3px; }

    @media (prefers-reduced-motion: reduce) {
      .halina-msg.bot .halina-bubble { transition: none; }
    }

    /* option buttons (link / rule / action) shown under a reply */
    .halina-opts {
      display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px;
    }
    .halina-opt {
      display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
      padding: 8px 14px; border-radius: 999px; font: inherit; font-size: .86rem;
      font-weight: 600; line-height: 1; color: var(--cy);
      background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.32);
      transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
    }
    .halina-opt:hover {
      background: rgba(34,211,238,.16); border-color: rgba(34,211,238,.55);
      transform: translateY(-1px); box-shadow: 0 4px 14px rgba(34,211,238,.18);
    }
    .halina-opt:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
    .halina-opt.is-primary {
      color: #04181d; background: var(--cy); border-color: var(--cy);
    }
    .halina-opt.is-primary:hover { background: #38dcf0; border-color: #38dcf0; }
    .halina-opt-ico { font-size: .95em; line-height: 1; }
    /* retired buttons on older replies, visible but not actionable */
    .halina-opts.is-spent { opacity: .4; }
    .halina-opt:disabled { cursor: default; transform: none; box-shadow: none; pointer-events: none; }

    /* typing indicator */
    .halina-typing { display: inline-flex; gap: 5px; align-items: center; padding: 3px 2px; }
    .halina-typing span {
      width: 7px; height: 7px; border-radius: 50%; background: var(--cy);
      animation: halina-blink 1.2s infinite ease-in-out;
    }
    .halina-typing span:nth-child(2) { animation-delay: .18s; }
    .halina-typing span:nth-child(3) { animation-delay: .36s; }
    @keyframes halina-blink { 0%,80%,100% { transform: scale(.7); opacity: .35; } 40% { transform: scale(1); opacity: 1; } }

    /* ── suggestion chips ── */
    .halina-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 18px; }
    .halina-chip {
      font-family: var(--sans); font-size: .82rem; color: var(--muted);
      padding: 8px 14px; border-radius: 999px; cursor: pointer;
      background: var(--surface); border: 1px solid var(--line);
      transition: border-color .2s, color .2s, background .2s, transform .2s;
    }
    .halina-chip:hover {
      color: var(--cy); border-color: rgba(34,211,238,.4);
      background: rgba(34,211,238,.06); transform: translateY(-2px);
    }
    /* ── purple-highlighted chip ── */
    .halina-chip--purple {
      color: #c4a8ff; border-color: rgba(168,85,247,.45);
      background: rgba(168,85,247,.10);
      box-shadow: 0 0 14px rgba(168,85,247,.20);
    }
    .halina-chip--purple:hover {
      color: #e0d0ff; border-color: rgba(168,85,247,.7);
      background: rgba(168,85,247,.18);
      box-shadow: 0 0 20px rgba(168,85,247,.35);
    }
    /* ── blue-highlighted chip (Austina) ── */
    .halina-chip--blue {
      color: #93c5fd; border-color: rgba(59,130,246,.45);
      background: rgba(59,130,246,.10);
      box-shadow: 0 0 14px rgba(59,130,246,.20);
    }
    .halina-chip--blue:hover {
      color: #dbeafe; border-color: rgba(59,130,246,.7);
      background: rgba(59,130,246,.18);
      box-shadow: 0 0 20px rgba(59,130,246,.35);
    }
    /* ── glowing cyan chip ── */
    .halina-chip--glow {
      color: var(--cy); border-color: rgba(34,211,238,.5);
      background: rgba(34,211,238,.08);
      box-shadow: 0 0 18px rgba(34,211,238,.4);
    }
    .halina-chip--glow:hover {
      color: #fff; border-color: var(--cy);
      background: rgba(34,211,238,.16);
      box-shadow: 0 0 26px rgba(34,211,238,.6);
    }
    /* Add your own: define .halina-chip--<name> here, then set style:'<name>' on a
       chip in the CHIPS array (JS). Or pass css:'…' on a chip for one-off styling. */

    /* ── footer under the input: "/" command hint + lang switcher + usage block ── */
    .halina-foot {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; flex-wrap: wrap;
      padding: 0 22px;                 /* collapsed until the hint or quota shows */
    }
    .halina-foot:has(> :not([hidden])) { padding: 10px 22px 16px; }
    .halina-hint {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--mono); font-size: .58rem;
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--faint);
    }
    .halina-hint[hidden] { display: none; }

    /* Twitter-style remaining-characters counter, sits beside the hint in the
       foot. Mono, dim by default; amber as it nears the cap, red at zero. */
    .halina-count {
      font-family: var(--mono); font-size: .58rem;
      letter-spacing: .1em; color: var(--faint);
      font-variant-numeric: tabular-nums;
      transition: color .2s;
    }
    .halina-count.is-near { color: #fbbf24; }
    .halina-count.is-max  { color: #f87171; }
    .halina-kbd {
      font-family: var(--mono); font-size: .62rem; line-height: 1;
      padding: 3px 6px; border-radius: 6px;
      background: rgba(255,255,255,.06); color: var(--cy);
      border: 1px solid rgba(255,255,255,.12);
    }

    /* Live usage block (chatbot + AI limits), its OWN full-width row below the
       hint + language switcher. Updates after every reply; a maxed counter turns red. */
    .halina-limits {
      display: flex; flex-direction: row; align-items: center; gap: 12px;
    }
    .halina-limits[hidden] { display: none; }
    @media (max-width: 480px) {
      .halina-limits { flex-basis: 100%; justify-content: center; }
      .halina-foot   { justify-content: center; }
    }
    .halina-sr-only {   /* visible to screen readers only */
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .halina-limit-row {
      display: flex; align-items: center; gap: 7px;
      font-family: var(--mono); font-size: .6rem; letter-spacing: .04em;
      color: var(--muted);
    }
    .halina-limit-ico { font-size: .78rem; line-height: 1; color: rgba(255,255,255,.42); width: 1.05em; text-align: center; }
    .halina-limit-ico.fa-brain { color: rgba(34,211,238,.28); }
    .halina-limit-count { font-weight: 600; color: var(--cy); font-variant-numeric: tabular-nums; }
    .halina-limit-reset { color: var(--faint); }   /* sits right beside the count */
    .halina-limit-row.is-out .halina-limit-ico,
    .halina-limit-row.is-out .halina-limit-count,
    .halina-limit-row.is-out .halina-limit-reset { color: #f87171; }

    /* ── Locked state: rate limit hit ── */
    .halina-card.is-locked .halina-chips { opacity: .18; pointer-events: none; user-select: none; }
    .halina-card.is-locked .halina-form  { opacity: .20; pointer-events: none; }
    .halina-card.is-locked .halina-foot  { opacity: 0;   pointer-events: none; }

    .halina-lock-notice {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 22px 28px 24px;
      display: flex; flex-direction: column; align-items: center; gap: 7px;
      background: rgba(6, 8, 14, .90);
      backdrop-filter: blur(10px) saturate(.55);
      -webkit-backdrop-filter: blur(10px) saturate(.55);
      border-top: 1px solid rgba(248, 113, 113, .22);
      border-radius: 0 0 20px 20px;
      z-index: 20;
      animation: halina-pop .35s cubic-bezier(.2,.8,.2,1) both;
    }
    .halina-lock-ico {
      font-size: 1.25rem; color: rgba(248,113,113,.55);
    }
    .halina-lock-msg {
      font-family: var(--sans); font-size: .84rem; font-weight: 600;
      color: #f87171; letter-spacing: .01em; text-align: center;
    }
    .halina-lock-timer {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--mono); font-size: .7rem; letter-spacing: .10em;
      color: var(--muted); text-align: center; min-height: 1em;
    }
    .halina-lock-timer-ico { font-size: .8em; color: rgba(248,113,113,.65); }

    /* ── CHATTING PROCEDURE reactions: lock colour variants, FAQ banner, restart, celebrate.
       The block/cooldown lock reuses .halina-lock-notice; these only retint it. ── */
    .halina-lock-notice.halina-lock--warn { border-top-color: rgba(245,158,11,.30); }
    .halina-lock-notice.halina-lock--warn .halina-lock-ico,
    .halina-lock-notice.halina-lock--warn .halina-lock-timer-ico { color: rgba(245,158,11,.70); }
    .halina-lock-notice.halina-lock--warn .halina-lock-msg { color: #f59e0b; }

    .halina-lock-notice.halina-lock--info { border-top-color: rgba(34,211,238,.30); }
    .halina-lock-notice.halina-lock--info .halina-lock-ico,
    .halina-lock-notice.halina-lock--info .halina-lock-timer-ico { color: rgba(34,211,238,.75); }
    .halina-lock-notice.halina-lock--info .halina-lock-msg { color: var(--accent); }

    /* FAQ-only mode: a slim, NON-blocking strip pinned to the bottom of the card
       (chat stays usable, unlike the full lock overlay above). */
    .halina-faq-banner {
      position: absolute; left: 12px; right: 12px; bottom: 8px;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      padding: 7px 12px; z-index: 18;
      font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .01em;
      color: var(--accent);
      background: rgba(34,211,238,.08);
      border: 1px solid rgba(34,211,238,.22); border-radius: 10px;
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      animation: halina-pop .35s cubic-bezier(.2,.8,.2,1) both;
    }
    .halina-faq-banner i { font-size: .9em; opacity: .85; }

    /* Soft close (end_chat / farewell): a centered "start a new chat" button. */
    .halina-restart { display: flex; justify-content: center; padding: 10px 0 4px; }
    .halina-restart-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 9px 16px; cursor: pointer;
      font-family: var(--sans); font-size: .82rem; font-weight: 600;
      color: var(--accent); background: rgba(34,211,238,.07);
      border: 1px solid rgba(34,211,238,.30); border-radius: 999px;
      transition: background .15s ease, transform .15s ease;
    }
    .halina-restart-btn:hover { background: rgba(34,211,238,.14); transform: translateY(-1px); }

    /* Celebrate: a brief sparkle burst that floats up and fades, then self-removes. */
    .halina-celebrate { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 30; }
    .halina-celebrate span {
      position: absolute; bottom: -10%; will-change: transform, opacity;
      animation: halina-celebrate-rise 2s ease-out forwards;
    }
    @keyframes halina-celebrate-rise {
      0%   { transform: translateY(0) rotate(0); opacity: 0; }
      15%  { opacity: 1; }
      100% { transform: translateY(-115%) rotate(40deg); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) { .halina-celebrate { display: none; } }

    /* ── "Powered by Austina" credit, persistent at the bottom of the chat panel.
       Shown in both the welcome and the active-chat states. ── */
    .halina-credit {
      display: flex; align-items: center; justify-content: center;
      padding: 0 22px 14px;
      direction: ltr;                 /* "Powered by Austina" stays LTR even in an RTL chat */
    }
    .halina-credit a {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--mono); font-size: .58rem;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--faint); text-decoration: none;
      transition: color .25s;
    }
    .halina-credit-bolt { font-size: .9em; color: rgba(34,211,238,.4); transition: color .25s; }
    .halina-credit b { font-weight: 600; letter-spacing: .08em; color: rgba(34,211,238,.7); transition: color .25s; }
    .halina-credit-ver { font-size: .75em; font-weight: 500; color: rgba(34,211,238,.45); letter-spacing: .04em; transition: color .25s; }
    .halina-credit a:hover .halina-credit-ver { color: var(--cy); }
    .halina-credit a:hover { color: var(--muted); }
    .halina-credit a:hover .halina-credit-bolt,
    .halina-credit a:hover b { color: var(--cy); }
    .halina-credit a:focus-visible { outline: 2px solid var(--cy); outline-offset: 3px; border-radius: 4px; }

    /* ── input row ── */
    .halina-form {
      display: flex; gap: 10px; align-items: center;
      padding: 16px 18px;
      border-top: 1px solid rgba(255,255,255,.07);
      background: #070809;
    }
    .halina-input {
      flex: 1; min-width: 0;
      background: transparent; border: none; outline: none;
      font-family: var(--sans); font-size: .97rem; color: var(--text);
    }
    .halina-input::placeholder { color: rgba(255,255,255,.25); }
    .halina-send {
      width: 44px; height: 44px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      border: none; border-radius: 12px; cursor: pointer;
      background: #fff; color: #000; font-size: .95rem;
      transition: background .25s, color .25s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
    }
    .halina-send:hover {
      background: var(--cy); color: #02181d;
      transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(34,211,238,.7);
    }
    .halina-send:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
    .halina-send-spin { display: none; animation: cf-spin .7s linear infinite; }
    .halina-send.is-busy .halina-send-ico { display: none; }
    .halina-send.is-busy .halina-send-spin { display: inline-block; }

    /* AI Priority toggle, sits in halina-foot-left beside the lang switcher */
    .halina-ai-toggle {
      display: inline-flex; align-items: center; gap: 5px;
      cursor: pointer; user-select: none;
      font-family: var(--mono); font-size: .58rem;
      letter-spacing: .06em; text-transform: uppercase;
      color: var(--faint);
      border-left: 1px solid rgba(255,255,255,.1);
      padding-left: 8px;
      transition: color .15s;
    }
    .halina-ai-toggle:hover { color: rgba(255,255,255,.55); }
    .halina-ai-chk { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
    .halina-ai-track {
      width: 24px; height: 13px; flex-shrink: 0;
      border-radius: 7px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.13);
      position: relative;
      transition: background .2s, border-color .2s;
    }
    .halina-ai-track::after {
      content: ''; position: absolute; top: 2px; left: 2px;
      width: 7px; height: 7px; border-radius: 50%;
      background: rgba(255,255,255,.3);
      transition: transform .2s cubic-bezier(.4,0,.2,1), background .2s;
    }
    .halina-ai-chk:checked ~ .halina-ai-track {
      background: rgba(34,211,238,.2); border-color: #22d3ee;
    }
    .halina-ai-chk:checked ~ .halina-ai-track::after {
      transform: translateX(11px); background: #22d3ee;
    }
    .halina-ai-toggle:has(.halina-ai-chk:checked) { color: var(--cy); }
    .halina-ai-ico { font-size: .6rem; }
    .halina-ai-toggle:has(.halina-ai-chk:checked) .halina-ai-ico {
      filter: drop-shadow(0 0 4px rgba(34,211,238,.7));
    }
    .halina-ai-chk:disabled ~ .halina-ai-track { opacity: .3; }
    .halina-ai-toggle:has(.halina-ai-chk:disabled) { cursor: not-allowed; pointer-events: none; opacity: .5; }

    @media (max-width: 460px) {
      .halina-bubble { font-size: .9rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      .halina-msg, .halina-chip, .halina-send { animation: none; transition: none; }
      .halina-typing span { animation: none; }
    }