:root {
      --green:    #3a7d44;
      --green-lt: #4e9a59;
      --green-dk: #2a5c32;
      --steel:    #1a2228;
      --steel-md: #253035;
      --steel-lt: #344048;
      --slate:    #4a5c65;
      --mist:     #c8d8de;
      --offwhite: #f4f6f4;
      --white:    #ffffff;
      --gold:     #c8960a;
      --text:     #1a2228;
      --text-lt:  #4a5c65;
    }

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

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Barlow', sans-serif;
      color: var(--text);
      background: var(--white);
      font-size: 16px;
      line-height: 1.6;
    }

    /* ── NAV ── */
    nav {
      background: var(--steel);
      position: sticky;
      top: 0;
      z-index: 100;
      border-bottom: 3px solid var(--green);
    }
    .nav-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 77px;
      gap: 3rem;
    }
    .nav-left {
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }
    .nav-logo {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800;
      font-size: 1.4rem;
      color: var(--white);
      text-decoration: none;
      letter-spacing: 0.04em;
      flex-shrink: 0;
    }
    .nav-logo span { color: var(--green-lt); }
    .nav-links {
      display: flex;
      gap: 2.5rem;
      list-style: none;
    }
    .nav-links a {
      color: var(--mist);
      text-decoration: none;
      font-size: 0.88rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      transition: color 0.2s;
    }
    .nav-links a:hover { color: var(--green-lt); }
    .nav-cta {
      background: var(--green);
      color: var(--white) !important;
      padding: 0.45rem 1.2rem;
      border-radius: 2px;
      font-weight: 600 !important;
      transition: background 0.2s !important;
    }
    .nav-cta:hover { background: var(--green-lt) !important; color: var(--white) !important; }

    .sonic-ai-bar {
      position: sticky;
      top: 80px;
      z-index: 99;
      background: var(--steel-md);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      padding: 0.28rem 0;
    }
    .sonic-ai-bar-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 2rem;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0;
    }
    .sonic-ai-btn + .sonic-ai-btn {
      border-left: 1px solid rgba(255,255,255,0.1);
      padding-left: 1.2rem;
      margin-left: 0.5rem;
    }
    .sonic-ai-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.75);
      text-decoration: none;
      padding: 0.2rem 0.75rem 0.2rem 0;
      transition: color 0.2s;
    }
    .sonic-ai-btn:hover { color: var(--white); }
    .sonic-intel-btn:hover { color: #7ab3e8; }
    .sonic-ai-btn-dot {
      width: 6px;
      height: 6px;
      background: var(--green-lt);
      border-radius: 50%;
      flex-shrink: 0;
      animation: pulse 2s ease infinite;
    }
    .sonic-ai-btn-tag {
      background: var(--green);
      color: white;
      font-size: 0.6rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      padding: 0.1rem 0.4rem;
      border-radius: 2px;
      line-height: 1.4;
    }

    /* ── HERO ── */
    .hero {
      background: var(--steel);
      position: relative;
      overflow: hidden;
      min-height: 88vh;
      display: flex;
      align-items: center;
    }
    .hero-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(58,125,68,0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(58,125,68,0.12) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    /* Second brighter grid layer — masked by moving light so only the lines glow */
    .hero-grid::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(120,220,130,0.30) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120,220,130,0.30) 1px, transparent 1px);
      background-size: 48px 48px;
      -webkit-mask-image: radial-gradient(ellipse 320px 320px at var(--lx, -20%) var(--ly, 40%), black 0%, transparent 80%);
      mask-image: radial-gradient(ellipse 320px 320px at var(--lx, -20%) var(--ly, 40%), black 0%, transparent 80%);
      animation: lightSweep 28s linear infinite;
      pointer-events: none;
    }
    @keyframes lightSweep {
      0%   { --lx: -15%; --ly: 45%; opacity: 0;   }
      10%  { --lx: 0%;   --ly: 47%; opacity: 1;   }
      85%  { --lx: 95%;  --ly: 55%; opacity: 1;   }
      100% { --lx: 115%; --ly: 45%; opacity: 0;   }
    }
    .hero-glow {
      position: absolute;
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(58,125,68,0.18) 0%, transparent 70%);
      top: -150px;
      right: -100px;
      pointer-events: none;
      animation: glowPulse 8s ease-in-out infinite alternate;
    }
    @keyframes glowPulse {
      0%   { opacity: 0.6; transform: scale(1);    }
      100% { opacity: 1.0; transform: scale(1.15); }
    }
    .hero-inner {
      position: relative;
      max-width: 1280px;
      margin: 0 auto;
      padding: 3.5rem 2rem 5rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }
    .hero-eyebrow {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--green-lt);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      margin-bottom: 1.2rem;
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }
    .hero-eyebrow::before {
      content: '';
      display: block;
      width: 32px;
      height: 2px;
      background: var(--green-lt);
    }
    h1 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(3rem, 5vw, 5rem);
      font-weight: 900;
      color: var(--white);
      line-height: 1.0;
      letter-spacing: -0.01em;
      margin-bottom: 1.5rem;
    }
    h1 em {
      font-style: normal;
      color: var(--green-lt);
    }
    .hero-body {
      color: var(--mist);
      font-size: 1.1rem;
      font-weight: 300;
      line-height: 1.7;
      margin-bottom: 2.5rem;
      max-width: 520px;
    }
    .hero-actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .btn-primary {
      background: var(--green);
      color: var(--white);
      padding: 0.85rem 2rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 2px;
      transition: background 0.2s, transform 0.15s;
      display: inline-block;
    }
    .btn-primary:hover { background: var(--green-lt); transform: translateY(-1px); }
    .btn-secondary {
      border: 1.5px solid rgba(200,216,222,0.35);
      color: var(--mist);
      padding: 0.85rem 2rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 2px;
      transition: border-color 0.2s, color 0.2s;
      display: inline-block;
    }
    .btn-secondary:hover { border-color: var(--green-lt); color: var(--green-lt); }

    .hero-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.07);
      margin-top: 3rem;
    }
    .hero-stat {
      padding: 1.5rem 1.2rem;
      background: rgba(255,255,255,0.03);
      text-align: center;
    }
    .hero-stat-val {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 2.4rem;
      font-weight: 900;
      color: var(--green-lt);
      line-height: 1;
      display: block;
    }
    .hero-stat-lbl {
      font-size: 0.78rem;
      color: var(--mist);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-top: 0.3rem;
      display: block;
    }

    /* Rig visual right column */
    .hero-visual {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .rig-card {
      background: #1e2a28;
      border: 1px solid rgba(58,125,68,0.4);
      width: 100%;
      max-width: 620px;
      position: relative;
      overflow: visible;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      min-height: 360px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    }
    .rig-card-img {
      width: 280px;
      flex-shrink: 0;
      position: relative;
      margin-left: -32px;
      margin-top: -16px;
      margin-bottom: -16px;
      z-index: 2;
      filter: drop-shadow(8px 0 24px rgba(0,0,0,0.6));
      display: flex;
      align-items: center;
    }
    .rig-card-img img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      display: block;
    }
    .rig-card-content {
      padding: 2rem 2rem 2rem 1.5rem;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      z-index: 1;
    }
    .rig-card::before { display: none; }
    .rig-card-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--green-lt);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin-bottom: 1rem;
    }
    .rig-card h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.9rem;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 0.6rem;
    }
    .rig-card p {
      color: var(--mist);
      font-size: 0.92rem;
      line-height: 1.65;
      margin-bottom: 1.5rem;
    }
    .rig-specs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
    }
    .rig-spec {
      background: rgba(255,255,255,0.04);
      padding: 0.7rem 0.85rem;
      border-left: 2px solid var(--green);
    }
    .rig-spec-key {
      font-size: 0.72rem;
      color: var(--slate);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      display: block;
    }
    .rig-spec-val {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--white);
      display: block;
    }

    /* ── TRUST CAROUSEL ── */
    .trust-bar {
      background: var(--green-dk);
      padding: 0;
      overflow: hidden;
      position: relative;
    }
    .trust-bar::before,
    .trust-bar::after {
      content: '';
      position: absolute;
      top: 0;
      width: 120px;
      height: 100%;
      z-index: 2;
      pointer-events: none;
    }
    .trust-bar::before {
      left: 0;
      background: linear-gradient(90deg, var(--green-dk), transparent);
    }
    .trust-bar::after {
      right: 0;
      background: linear-gradient(-90deg, var(--green-dk), transparent);
    }
    .trust-track {
      display: flex;
      width: max-content;
      animation: trustScroll 32s linear infinite;
    }
    .trust-track:hover { animation-play-state: paused; }
    @keyframes trustScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .trust-item {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      color: rgba(255,255,255,0.88);
      font-size: 0.86rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      white-space: nowrap;
      padding: 0.85rem 2.5rem;
      border-right: 1px solid rgba(255,255,255,0.12);
      flex-shrink: 0;
    }
    .trust-dot {
      width: 6px;
      height: 6px;
      background: var(--green-lt);
      border-radius: 50%;
      flex-shrink: 0;
    }
    .trust-icon {
      width: 16px;
      height: 16px;
      fill: rgba(255,255,255,0.65);
      flex-shrink: 0;
    }

    /* ── SECTION SHELL ── */
    section { padding: 6rem 2rem; }

    .section-inner { max-width: 1280px; margin: 0 auto; }
    .section-tag {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--green);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      margin-bottom: 0.8rem;
    }
    h2 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(2rem, 3.5vw, 2.8rem);
      font-weight: 800;
      color: var(--text);
      line-height: 1.1;
      margin-bottom: 1.2rem;
    }
    .section-lead {
      font-size: 1.08rem;
      color: var(--text-lt);
      max-width: 680px;
      line-height: 1.75;
    }

    /* ── VIDEO SECTION ── */
    #vid-block {
      display: block;
      position: relative;
      width: 100vw;
      height: min(80vh, 43.75vw);
      margin: 0;
      padding: 0;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      overflow: hidden;
    }
    #vid-sticky {
      position: sticky;
      top: 0;
      left: 0;
      width: 100vw;
      height: min(80vh, 43.75vw); /* 16:7 ratio */
      margin: 0;
      padding: 0;
    }
    #vid-sticky video {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      margin: 0;
      padding: 0;
      display: block;
    }
    #vid-overlay {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: linear-gradient(135deg,rgba(10,22,44,0.70) 0%,rgba(10,22,44,0.28) 55%,rgba(10,22,44,0.52) 100%);
      z-index: 1;
    }
    #vid-cards {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      z-index: 2;
      pointer-events: none;
      animation: cardsIn 1s ease 0.4s both;
    }
    @keyframes cardsIn {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .vcard {
      background: rgba(8,18,38,0.60);
      border: 1px solid rgba(58,125,68,0.50);
      border-top: 3px solid #3a7d44;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      padding: 2rem 2.2rem;
      min-width: 210px;
      max-width: 245px;
      pointer-events: none;
    }
    .vcard-tag {
      font-family: "Barlow Condensed", sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #4e9a59;
      margin-bottom: 0.75rem;
    }
    .vcard-title {
      font-family: "Barlow Condensed", sans-serif;
      font-size: 1.65rem;
      font-weight: 800;
      color: #fff;
      line-height: 1.15;
    }
    #vid-hint {
      position: absolute;
      bottom: 2.5rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      pointer-events: none;
    }
    #vid-hint span {
      font-family: "Barlow Condensed", sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
    }
    #vid-hint .arr {
      width: 20px; height: 20px;
      border-right: 2px solid rgba(255,255,255,0.45);
      border-bottom: 2px solid rgba(255,255,255,0.45);
      transform: rotate(45deg);
      animation: abounce 1.6s ease infinite;
    }
    @keyframes abounce {
      0%,100% { transform: rotate(45deg) translateY(0);   opacity: .4; }
      50%      { transform: rotate(45deg) translateY(5px); opacity: 1;  }
    }

    /* ── SONIC DRILLING ── */
    .sonic-section {
      background: var(--offwhite);
      border-top: 4px solid var(--green);
    }
    .sonic-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: start;
      margin-top: 3rem;
    }
    .sonic-body p {
      color: var(--text-lt);
      line-height: 1.8;
      margin-bottom: 1.2rem;
      font-size: 1rem;
    }
    .sonic-body p strong { color: var(--text); }
    .sonic-benefits {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2rem;
    }
    .benefit-card {
      background: var(--white);
      padding: 1.4rem 1.2rem;
      border-top: 3px solid var(--green);
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    .benefit-icon {
      width: 32px;
      height: 32px;
      background: var(--green);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0.8rem;
    }
    .benefit-icon svg { width: 18px; height: 18px; fill: white; }
    .benefit-card h4 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 0.4rem;
    }
    .benefit-card p {
      font-size: 0.88rem;
      color: var(--text-lt);
      line-height: 1.55;
    }

    /* ── PRODUCTS ── */
    .products-section { background: var(--steel); }
    .products-section h2,
    .products-section .section-tag { color: var(--white); }
    .products-section .section-tag { color: var(--green-lt); }
    .products-section .section-lead { color: var(--mist); }

    .products-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 3rem;
    }
    .product-card {
      background: var(--steel-md);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
      text-decoration: none;
      display: flex;
      flex-direction: column;
    }
    .product-card:hover {
      border-color: var(--green);
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(0,0,0,0.4);
    }
    .product-card-img {
      width: 100%;
      aspect-ratio: 16/10;
      background: #0d1820;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .product-card-img img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 0.75rem;
      transition: transform 0.4s ease;
    }
    .product-card:hover .product-card-img img { transform: scale(1.06); }
    .product-card-body { padding: 1.4rem 1.75rem 2rem; flex: 1; }
    .product-card::after {
      content: '→';
      position: absolute;
      bottom: 1.5rem;
      right: 1.5rem;
      color: var(--green-lt);
      font-size: 1.2rem;
      transition: transform 0.2s;
    }
    .product-card:hover::after { transform: translateX(4px); }
    .product-badge {
      display: inline-block;
      background: var(--green);
      color: white;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.2rem 0.6rem;
      margin-bottom: 1rem;
    }
    .product-card h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 0.5rem;
    }
    .product-card .product-sub {
      font-size: 0.82rem;
      color: var(--green-lt);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 0.8rem;
    }
    .product-card p {
      font-size: 0.9rem;
      color: var(--mist);
      line-height: 1.6;
      opacity: 0.85;
    }

    /* ── APPLICATIONS ── */
    .applications-section { background: var(--white); }
    .app-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      margin-top: 3rem;
    }
    .app-card {
      padding: 2rem 1.5rem;
      border: 1px solid #e0e8e0;
      border-top: 4px solid var(--green);
      transition: box-shadow 0.2s;
    }
    .app-card:hover { box-shadow: 0 6px 24px rgba(58,125,68,0.1); }
    .app-num {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 2.5rem;
      font-weight: 900;
      color: rgba(58,125,68,0.15);
      line-height: 1;
      margin-bottom: 0.5rem;
    }
    .app-card h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 0.6rem;
    }
    .app-card p {
      font-size: 0.88rem;
      color: var(--text-lt);
      line-height: 1.6;
    }

    /* ── WHY TSI ── */
    .why-section { background: var(--offwhite); }
    .why-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 5rem;
      align-items: start;
      margin-top: 3rem;
    }
    .why-copy p {
      color: var(--text-lt);
      line-height: 1.8;
      margin-bottom: 1.2rem;
      font-size: 1rem;
    }
    .why-copy p strong { color: var(--text); }
    .why-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .why-list li {
      display: flex;
      align-items: flex-start;
      gap: 0.8rem;
      font-size: 0.95rem;
      color: var(--text-lt);
      line-height: 1.55;
    }
    .why-list li::before {
      content: '';
      display: block;
      width: 6px;
      height: 6px;
      background: var(--green);
      border-radius: 50%;
      margin-top: 0.6rem;
      flex-shrink: 0;
    }
    .why-callout {
      background: var(--steel);
      padding: 2.5rem;
      color: var(--white);
      position: relative;
      overflow: hidden;
    }
    .why-callout::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--green), var(--green-lt));
    }
    .why-callout-quote {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.65rem;
      font-weight: 700;
      line-height: 1.3;
      color: var(--white);
      margin-bottom: 1.5rem;
    }
    .why-callout-quote em {
      font-style: normal;
      color: var(--green-lt);
    }
    .why-metrics {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: rgba(255,255,255,0.08);
    }
    .why-metric {
      background: rgba(255,255,255,0.03);
      padding: 1.2rem;
      text-align: center;
    }
    .why-metric-val {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 2rem;
      font-weight: 900;
      color: var(--green-lt);
      display: block;
      line-height: 1;
    }
    .why-metric-lbl {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.6);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-top: 0.3rem;
      display: block;
    }

    /* ── TRADITIONAL VS SONIC ── */
    .obsolete-section {
      background: var(--steel);
      padding: 6rem 2rem;
    }
    .obsolete-section h2,
    .obsolete-section .section-tag { color: var(--white); }
    .obsolete-section .section-tag { color: var(--green-lt); }
    .obsolete-section .section-lead { color: var(--mist); max-width: 760px; }

    .obsolete-grid {
      display: grid;
      grid-template-columns: 1fr 56px 1fr;
      gap: 0;
      margin-top: 3.5rem;
      align-items: start;
    }
    .obsolete-col { display: flex; flex-direction: column; }
    .obsolete-col-header {
      padding: 1.8rem 2rem;
      margin-bottom: 0;
    }
    .obsolete-old .obsolete-col-header {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-bottom: none;
    }
    .obsolete-new .obsolete-col-header {
      background: rgba(58,125,68,0.12);
      border: 1px solid rgba(58,125,68,0.3);
      border-bottom: none;
    }
    .obsolete-badge {
      display: inline-block;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 0.2rem 0.65rem;
      margin-bottom: 0.75rem;
      border-radius: 2px;
    }
    .obsolete-badge-old {
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.5);
    }
    .obsolete-badge-new {
      background: var(--green);
      color: var(--white);
    }
    .obsolete-col-header h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 0.3rem;
    }
    .obsolete-col-header p {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.45);
    }

    .obsolete-list {
      list-style: none;
      display: flex;
      flex-direction: column;
    }
    .obsolete-item {
      display: flex;
      gap: 1rem;
      padding: 1.4rem 2rem;
      border-left: 1px solid;
      border-right: 1px solid;
      border-bottom: 1px solid;
      align-items: flex-start;
    }
    .obsolete-item.bad {
      border-color: rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.015);
    }
    .obsolete-item.bad:nth-child(odd) {
      background: rgba(255,255,255,0.03);
    }
    .obsolete-item.good {
      border-color: rgba(58,125,68,0.2);
      background: rgba(58,125,68,0.04);
    }
    .obsolete-item.good:nth-child(odd) {
      background: rgba(58,125,68,0.08);
    }
    .obsolete-icon {
      font-size: 0.95rem;
      font-weight: 900;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 0.1rem;
      font-family: 'Barlow Condensed', sans-serif;
    }
    .obsolete-icon.bad {
      background: rgba(220,50,50,0.15);
      color: #e05555;
    }
    .obsolete-icon.good {
      background: rgba(58,125,68,0.25);
      color: var(--green-lt);
    }
    .obsolete-item strong {
      display: block;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      margin-bottom: 0.3rem;
    }
    .obsolete-item.bad strong { color: rgba(255,255,255,0.7); }
    .obsolete-item.good strong { color: var(--white); }
    .obsolete-item p {
      font-size: 0.87rem;
      line-height: 1.6;
      color: rgba(255,255,255,0.5);
    }
    .obsolete-item.good p { color: rgba(255,255,255,0.65); }

    /* VS divider */
    .obsolete-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 3.8rem;
    }
    .obsolete-vs {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.1rem;
      font-weight: 900;
      color: rgba(255,255,255,0.2);
      letter-spacing: 0.1em;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      border: 1px solid rgba(255,255,255,0.08);
      padding: 1.5rem 0.5rem;
      background: rgba(255,255,255,0.02);
    }

    /* Bottom stats */
    .obsolete-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: rgba(58,125,68,0.25);
      border: 1px solid rgba(58,125,68,0.25);
      margin-top: 3rem;
    }
    .obs-stat {
      background: rgba(58,125,68,0.08);
      padding: 1.8rem 1rem;
      text-align: center;
    }
    .obs-stat-val {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 2.4rem;
      font-weight: 900;
      color: var(--green-lt);
      display: block;
      line-height: 1;
    }
    .obs-stat-lbl {
      font-size: 0.8rem;
      color: var(--mist);
      display: block;
      margin-top: 0.4rem;
      letter-spacing: 0.04em;
    }

    @media (max-width: 1024px) {
      .obsolete-grid { grid-template-columns: 1fr; }
      .obsolete-divider { display: none; }
      .obsolete-stats { grid-template-columns: repeat(2, 1fr); }
    }

    /* ── SONIC AI ── */
    .sonicai-section {
      background: #1a2228 !important;
      padding: 6rem 2rem !important;
      overflow: visible;
      display: block;
      position: relative;
      z-index: 1;
      scroll-margin-top: 80px;
    }
    .sonicai-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 5rem;
      align-items: center;
      min-height: 400px;
    }
    .sonicai-lead {
      font-size: 1.08rem;
      color: var(--mist);
      line-height: 1.75;
      margin-bottom: 2rem;
      max-width: 560px;
    }
    .sonicai-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.4rem;
      margin-bottom: 2rem;
    }
    .sonicai-feature {
      display: flex;
      gap: 0.85rem;
      align-items: flex-start;
    }
    .sonicai-feature-icon {
      width: 36px;
      height: 36px;
      background: rgba(58,125,68,0.15);
      border: 1px solid rgba(58,125,68,0.3);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .sonicai-feature-icon svg {
      width: 16px;
      height: 16px;
      stroke: var(--green-lt);
    }
    .sonicai-feature h4 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 0.25rem;
    }
    .sonicai-feature p {
      font-size: 0.82rem;
      color: rgba(255,255,255,0.5);
      line-height: 1.55;
    }

    /* Visual side */
    .sonicai-visual {
      position: relative;
    }
    .sonicai-screen {
      background: #0d1821;
      border: 1px solid rgba(58,125,68,0.3);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(58,125,68,0.1);
    }
    .sonicai-screen-bar {
      background: #162030;
      padding: 0.6rem 1rem;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .sonicai-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
    }
    .sonicai-dot.red    { background: #ff5f57; }
    .sonicai-dot.yellow { background: #ffbd2e; }
    .sonicai-dot.grn    { background: #28c840; }
    .sonicai-screen-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.72rem;
      font-weight: 600;
      color: rgba(255,255,255,0.3);
      letter-spacing: 0.1em;
      margin-left: 0.5rem;
    }
    .sonicai-img {
      display: block;
      width: 100%;
      padding: 1.5rem;
      background: #0d1821;
    }
    .sonicai-badge {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.6rem 1rem;
      background: rgba(58,125,68,0.12);
      border-top: 1px solid rgba(58,125,68,0.2);
      font-size: 0.78rem;
      color: var(--green-lt);
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .sonicai-badge-dot {
      width: 7px;
      height: 7px;
      background: var(--green-lt);
      border-radius: 50%;
      animation: pulse 2s ease infinite;
    }

    /* Floating stat pills */
    .sonicai-pill {
      position: absolute;
      background: var(--steel-md);
      border: 1px solid rgba(58,125,68,0.4);
      border-left: 3px solid var(--green);
      padding: 0.5rem 0.85rem;
      border-radius: 4px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
      display: flex;
      flex-direction: column;
      animation: pillFloat 4s ease-in-out infinite alternate;
    }
    .sonicai-pill-1 { top: -18px;  right: -18px; animation-delay: 0s;    }
    .sonicai-pill-2 { top: 40%;    right: -24px; animation-delay: 1.3s;  }
    .sonicai-pill-3 { bottom: 40px; left: -24px; animation-delay: 0.7s;  }
    @keyframes pillFloat {
      from { transform: translateY(0px);  }
      to   { transform: translateY(-8px); }
    }
    .sonicai-pill-val {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--green-lt);
      line-height: 1;
    }
    .sonicai-pill-key {
      font-size: 0.68rem;
      color: rgba(255,255,255,0.4);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-top: 0.15rem;
    }

    @media (max-width: 1024px) {
      .sonicai-inner { grid-template-columns: 1fr; }
      .sonicai-visual { margin-top: 2rem; }
      .sonicai-pill-1, .sonicai-pill-2, .sonicai-pill-3 { display: none; }
    }
    @media (max-width: 640px) {
      .sonicai-features { grid-template-columns: 1fr; }
    }

    /* ── ASK PROFESSOR SONIC ── */
    .ask-section {
      background: #0f1a22;
      padding: 5rem 2rem;
      border-top: 1px solid rgba(58,125,68,0.2);
    }
    .ask-outer {
      max-width: 700px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      align-items: end;
    }
    .ask-driller {
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      height: 100%;
      min-height: 420px;
    }
    .ask-driller img {
      width: 100%;
      max-width: 320px;
      object-fit: contain;
      object-position: bottom;
      display: block;
      filter: drop-shadow(0 0 40px rgba(58,125,68,0.25));
    }
    .ask-inner {
      max-width: 100%;
      padding-bottom: 1rem;
    }
    .ask-header {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      margin-bottom: 1.5rem;
    }
    .ask-tsi-badge {
      width: 42px; height: 42px;
      border-radius: 50%;
      background: #3a7d44;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900; font-size: 0.8rem;
      color: white; letter-spacing: 1px; flex-shrink: 0;
    }
    .ask-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800; font-size: 1.2rem;
      color: white; letter-spacing: 0.04em;
    }
    .ask-subtitle {
      font-size: 0.75rem; color: #4e9a59;
      display: flex; align-items: center; gap: 0.4rem;
      margin-top: 0.15rem;
    }
    .ask-dot {
      width: 6px; height: 6px;
      background: #4e9a59; border-radius: 50%;
      display: inline-block;
      animation: pulse 2s ease infinite;
    }

    /* History */
    .ask-history {
      background: #1a2228;
      border: 1px solid rgba(58,125,68,0.2);
      border-radius: 12px;
      padding: 1.25rem;
      margin-bottom: 0.75rem;
      max-height: 380px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .ask-msg {
      display: flex;
      gap: 0.65rem;
      align-items: flex-start;
    }
    .ask-msg.user { justify-content: flex-end; }
    .ask-msg-avatar {
      width: 28px; height: 28px;
      border-radius: 50%; background: #3a7d44;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.58rem; font-weight: 900;
      color: white; flex-shrink: 0;
      font-family: 'Barlow Condensed', sans-serif;
      letter-spacing: 1px; margin-top: 2px;
    }
    .ask-msg-bubble {
      max-width: 80%;
      padding: 0.65rem 0.9rem;
      font-size: 0.875rem;
      line-height: 1.65;
    }
    .ask-msg.assistant .ask-msg-bubble {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(58,125,68,0.2);
      border-left: 2px solid #3a7d44;
      border-radius: 4px 14px 14px 14px;
      color: #c8d8e4;
    }
    .ask-msg.user .ask-msg-bubble {
      background: #1B5EA6;
      border-radius: 14px 14px 4px 14px;
      color: white;
    }
    .ask-typing {
      display: flex;
      gap: 5px;
      align-items: center;
      padding: 0.65rem 0.9rem;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(58,125,68,0.2);
      border-left: 2px solid #3a7d44;
      border-radius: 4px 14px 14px 14px;
      width: fit-content;
    }
    .ask-typing span {
      width: 6px; height: 6px;
      border-radius: 50%; background: #3a7d44;
      display: inline-block;
      animation: askBounce 1.2s ease infinite;
    }
    .ask-typing span:nth-child(2) { animation-delay: 0.2s; }
    .ask-typing span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes askBounce {
      0%,80%,100% { transform: translateY(0); }
      40% { transform: translateY(-5px); }
    }

    /* Input bar */
    .ask-bar {
      background: #1a2228;
      border: 1px solid rgba(58,125,68,0.35);
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.6rem 0.6rem 0.6rem 1.1rem;
      transition: border-color 0.2s;
    }
    .ask-bar:focus-within { border-color: #3a7d44; }
    .ask-input {
      flex: 1;
      background: none; border: none; outline: none;
      color: white;
      font-size: 0.95rem;
      font-family: 'Barlow', sans-serif;
      min-width: 0;
    }
    .ask-input::placeholder { color: rgba(255,255,255,0.25); }
    .ask-send {
      background: #3a7d44;
      border: none; border-radius: 8px;
      width: 38px; height: 38px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background 0.2s;
    }
    .ask-send:hover { background: #4e9a59; }
    .ask-send:disabled { background: rgba(58,125,68,0.2); cursor: default; }

    /* Pills */
    .ask-pills {
      margin-top: 0.85rem;
      display: flex; flex-wrap: wrap; gap: 0.5rem;
    }
    .ask-pill {
      background: rgba(58,125,68,0.1);
      border: 1px solid rgba(58,125,68,0.25);
      color: #7ec88a;
      padding: 0.35rem 0.85rem;
      border-radius: 20px;
      font-size: 0.78rem;
      cursor: pointer;
      font-family: 'Barlow', sans-serif;
      transition: background 0.15s;
    }
    .ask-pill:hover { background: rgba(58,125,68,0.22); }

    /* Footer */
    .ask-footer {
      margin-top: 1.1rem;
      font-size: 0.72rem;
      color: rgba(255,255,255,0.2);
      text-align: center;
    }
    .ask-footer a { color: rgba(58,125,68,0.6); text-decoration: none; }
    .ask-footer a:hover { color: #4e9a59; }

    /* ── FAQ ── */
    .faq-section { background: var(--white); }
    .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin-top: 3rem;
    }
    .faq-item {
      border: 1px solid #e0e8e0;
      padding: 1.8rem;
      border-left: 4px solid var(--green);
    }
    .faq-item h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 0.75rem;
      line-height: 1.3;
    }
    .faq-item p {
      font-size: 0.92rem;
      color: var(--text-lt);
      line-height: 1.7;
    }

    /* ── CTA SECTION ── */
    .cta-section {
      background: var(--green-dk);
      padding: 5rem 2rem;
      text-align: center;
    }
    .cta-section h2 {
      color: var(--white);
      font-size: clamp(2rem, 4vw, 3rem);
      margin-bottom: 1rem;
    }
    .cta-section p {
      color: rgba(255,255,255,0.75);
      font-size: 1.1rem;
      max-width: 580px;
      margin: 0 auto 2.5rem;
      line-height: 1.7;
    }
    .cta-actions {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }
    .btn-white {
      background: var(--white);
      color: var(--green-dk);
      padding: 0.9rem 2.2rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 2px;
      transition: background 0.2s;
    }
    .btn-white:hover { background: var(--offwhite); }
    .btn-outline-white {
      border: 2px solid rgba(255,255,255,0.5);
      color: var(--white);
      padding: 0.9rem 2.2rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 2px;
      transition: border-color 0.2s;
    }
    .btn-outline-white:hover { border-color: var(--white); }

    /* ── FOOTER ── */
    footer {
      background: var(--steel);
      padding: 4rem 2rem 2rem;
      border-top: 3px solid var(--green);
    }
    .footer-inner {
      max-width: 1280px;
      margin: 0 auto;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 3rem;
      margin-bottom: 3rem;
    }
    .footer-brand p {
      color: rgba(255,255,255,0.5);
      font-size: 0.9rem;
      line-height: 1.7;
      margin-top: 0.8rem;
      max-width: 280px;
    }
    .footer-col h4 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--green-lt);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin-bottom: 1rem;
    }
    .footer-col ul { list-style: none; }
    .footer-col ul li { margin-bottom: 0.5rem; }
    .footer-col ul a {
      color: rgba(255,255,255,0.55);
      text-decoration: none;
      font-size: 0.9rem;
      transition: color 0.2s;
    }
    .footer-col ul a:hover { color: var(--green-lt); }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.07);
      padding-top: 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .footer-bottom p {
      color: rgba(255,255,255,0.35);
      font-size: 0.82rem;
    }
    .footer-tagline {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--green-lt);
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    /* Animations */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .hero-inner > * {
      animation: fadeUp 0.7s ease both;
    }
    .hero-inner > *:nth-child(2) { animation-delay: 0.15s; }

    @media (max-width: 1024px) {
      .hero-inner { grid-template-columns: 1fr; }
      .hero-visual { display: none; }
      .sonic-grid, .why-grid { grid-template-columns: 1fr; }
      .products-grid { grid-template-columns: repeat(2, 1fr); }
      .app-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 640px) {
      .nav-links { display: none; }
      .products-grid, .app-grid, .faq-grid { grid-template-columns: 1fr; }
      .sonic-benefits { grid-template-columns: 1fr; }
      .hero-stats { grid-template-columns: 1fr; }
    }
  
</head>
  /* ── CHAT BAR ── */
  .chat-bar {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(100%);
    z-index: 999;
    display: flex;
    align-items: stretch;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .chat-bar.visible {
    transform: translateY(-50%) translateX(0%);
  }
  .chat-bar.open {
    transform: translateY(-50%) translateX(0%);
  }
  .chat-tab {
    background: #1B5EA6;
    color: white;
    border: none;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 0.75rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    border-radius: 6px 0 0 6px;
    box-shadow: -3px 0 16px rgba(0,0,0,0.25);
    transition: background 0.2s;
    min-height: 220px;
  }
  .chat-tab.do-pulse {
    animation: tabPulse 1s ease-out forwards;
  }
  @keyframes tabPulse {
    0%   { box-shadow: -3px 0 16px rgba(0,0,0,0.25); }
    40%  { box-shadow: -3px 0 28px rgba(27,94,166,0.85), 0 0 0 8px rgba(27,94,166,0.25); }
    100% { box-shadow: -3px 0 16px rgba(0,0,0,0.25); }
  }
  .chat-tab-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  /* Arrows sit outside writing-mode by using normal writing-mode on themselves */
  .chat-tab-arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    writing-mode: horizontal-tb;
    font-size: 1.1rem;
    font-weight: 300;
    opacity: 0.75;
    line-height: 1;
    transition: opacity 0.3s, transform 0.35s ease;
  }
  .chat-tab-arrow.top {
    top: 0.6rem;
    transform: translateX(-50%) rotate(0deg); /* points left ← */
  }
  .chat-tab-arrow.bot {
    bottom: 0.6rem;
    transform: translateX(-50%) rotate(0deg); /* points left ← */
  }
  /* When open — both arrows point right → */
  .chat-bar.open .chat-tab-arrow.top {
    transform: translateX(-50%) rotate(180deg);
    opacity: 1;
  }
  .chat-bar.open .chat-tab-arrow.bot {
    transform: translateX(-50%) rotate(180deg);
    opacity: 1;
  }
  .chat-tab:hover { background: #2470C2; }
  .chat-tab-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: rotate(180deg);
    white-space: nowrap;
  }
  

  /* Panel */
  .chat-panel {
    width: 0;
    overflow: hidden;
    transition: width 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    background: #1a2228;
    box-shadow: -6px 0 32px rgba(0,0,0,0.35);
    border-left: 3px solid #3a7d44;
  }
  .chat-bar.open .chat-panel {
    width: 320px;
  }
  .chat-panel-inner {
    width: 320px;
    padding: 1.5rem 1.4rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Header */
  .chat-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .chat-header-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: white;
  }
  .chat-header-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
  }
  .status-dot {
    width: 7px;
    height: 7px;
    background: #4e9a59;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 2s ease infinite;
  }
  @keyframes pulse {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.4; }
  }

  .chat-intro {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.55;
  }

  /* Option buttons */
  .chat-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .chat-option {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
    padding: 0.65rem 0.9rem;
    font-family: 'Barlow', sans-serif;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
  }
  .chat-option:hover,
  .chat-option.selected {
    background: rgba(58,125,68,0.2);
    border-color: #3a7d44;
    color: white;
  }

  /* Form */
  .chat-form { display: flex; flex-direction: column; gap: 0.65rem; }
  .chat-form-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #4e9a59;
  }
  .chat-textarea,
  .chat-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    color: white;
    padding: 0.65rem 0.8rem;
    font-family: 'Barlow', sans-serif;
    font-size: 0.86rem;
    border-radius: 3px;
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
    resize: vertical;
  }
  .chat-textarea:focus,
  .chat-input:focus { border-color: #3a7d44; }
  .chat-textarea::placeholder,
  .chat-input::placeholder { color: rgba(255,255,255,0.3); }
  .chat-send {
    background: #3a7d44;
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.2s;
    text-decoration: none;
  }
  .chat-send:hover { background: #4e9a59; }

  /* Success */
  .chat-success { text-align: center; padding: 1rem 0; }
  .chat-success-icon {
    width: 48px; height: 48px;
    background: #3a7d44;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    color: white;
    margin: 0 auto 0.8rem;
  }
  .chat-success p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.55;
  }

  /* Footer */
  .chat-footer {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.35);
  }
  .chat-footer a {
    color: #4e9a59;
    text-decoration: none;
    font-weight: 600;
  }
  .chat-footer a:hover { color: white; }

  @media (max-width: 640px) {
    .chat-bar { display: none !important; }
  }