:root {
      --bg: #0b1220;
      --bg-soft: #101a2e;
      --card: #ffffff;
      --text: #0f172a;
      --muted: #475569;
      --line: #dbe4f0;
      --brand: #0f766e;
      --brand-2: #14b8a6;
      --brand-dark: #115e59;
      --accent: #effcf9;
      --white: #ffffff;
      --shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
      --radius: 18px;
      --container: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background: #f8fafc;
      line-height: 1.55;
    }

    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }

    .container {
      width: min(var(--container), calc(100% - 32px));
      margin: 0 auto;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 0 22px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-weight: 700;
      font-size: 15px;
      transition: .25s ease;
      cursor: pointer;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      color: var(--white);
      box-shadow: 0 12px 30px rgba(20, 184, 166, 0.25);
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      filter: brightness(1.03);
    }

    .btn-secondary {
      background: rgba(255,255,255,.08);
      color: var(--white);
      border-color: rgba(255,255,255,.16);
    }

    .btn-secondary:hover {
      background: rgba(255,255,255,.12);
    }

    .btn-light {
      background: var(--white);
      color: var(--brand-dark);
      border-color: var(--line);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(20, 184, 166, .10);
      color: var(--brand-dark);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .2px;
    }

    .section {
      padding: 88px 0;
    }

    .section-title {
      font-size: clamp(30px, 4vw, 46px);
      line-height: 1.08;
      margin: 16px 0 14px;
      letter-spacing: -0.03em;
    }

    .section-lead {
      font-size: 18px;
      color: var(--muted);
      max-width: 760px;
      margin: 0;
    }

    .header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(14px);
      background: rgba(11, 18, 32, .78);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 76px;
      gap: 20px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--white);
      font-weight: 800;
      letter-spacing: .2px;
    }

    .logo-mark {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      color: var(--white);
      font-size: 15px;
      box-shadow: 0 10px 24px rgba(20,184,166,.30);
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 22px;
      color: rgba(255,255,255,.88);
      font-size: 15px;
    }

    .nav a:hover { color: var(--white); }

    .hero {
      position: relative;
      overflow: hidden;
      color: var(--white);
      background:
        radial-gradient(circle at top left, rgba(20,184,166,.16), transparent 35%),
        radial-gradient(circle at bottom right, rgba(15,118,110,.18), transparent 35%),
        linear-gradient(180deg, #09111f 0%, #0b1220 100%);
      padding: 72px 0 80px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 42px;
      align-items: center;
    }

    .hero h1 {
      font-size: clamp(38px, 6vw, 66px);
      line-height: .98;
      letter-spacing: -0.04em;
      margin: 18px 0 18px;
    }

    .hero p {
      font-size: 19px;
      color: rgba(255,255,255,.84);
      margin: 0 0 28px;
      max-width: 640px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 28px;
    }

    .hero-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 12px 18px;
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .hero-list li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      color: rgba(255,255,255,.92);
      font-size: 15px;
    }

    .hero-list li::before {
      content: "✓";
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      color: #7ef0df;
      font-weight: 900;
    }

    .hero-card {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 24px;
      padding: 24px;
      box-shadow: 0 22px 60px rgba(0,0,0,.24);
    }

    .app-window {
      border-radius: 18px;
      overflow: hidden;
      background: #f8fafc;
      box-shadow: 0 16px 40px rgba(15,23,42,.22);
    }

    .app-topbar {
      background: #e2e8f0;
      padding: 12px 14px;
      display: flex;
      gap: 8px;
    }

    .app-topbar span {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #94a3b8;
    }

    .app-content {
      padding: 18px;
      color: var(--text);
      background: var(--white);
    }

    .metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 12px;
      margin-bottom: 14px;
    }

    .metric {
      border: 1px solid var(--line);
      background: #f8fafc;
      border-radius: 16px;
      padding: 14px;
    }

    .metric strong {
      display: block;
      font-size: 22px;
      margin-top: 4px;
    }

    .metric small { color: var(--muted); font-size: 13px; }

    .mini-table {
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
    }

    .mini-row {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 12px;
      padding: 12px 14px;
      font-size: 13px;
      border-bottom: 1px solid var(--line);
    }

    .mini-row:last-child { border-bottom: 0; }
    .mini-row.header-row {
      background: #f1f5f9;
      font-weight: 700;
    }

    .problem-grid,
    .benefits-grid,
    .features-grid,
    .audience-grid,
    .trust-grid,
    .proof-grid,
    .plans-grid,
    .footer-grid {
      display: grid;
      gap: 22px;
    }

    .problem-grid,
    .benefits-grid,
    .features-grid,
    .audience-grid,
    .proof-grid,
    .plans-grid {
      grid-template-columns: repeat(3, minmax(0,1fr));
      margin-top: 42px;
    }

    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 26px;
      box-shadow: var(--shadow);
    }

    .card h3 {
      margin: 0 0 10px;
      font-size: 21px;
      letter-spacing: -.02em;
    }

    .card p,
    .card li {
      color: var(--muted);
      font-size: 15px;
      margin: 0;
    }

    .icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      margin-bottom: 16px;
      background: linear-gradient(135deg, rgba(15,118,110,.14), rgba(20,184,166,.12));
      color: var(--brand-dark);
      font-weight: 900;
      font-size: 20px;
    }

    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      align-items: center;
    }

    .checklist {
      list-style: none;
      padding: 0;
      margin: 22px 0 0;
      display: grid;
      gap: 12px;
    }

    .checklist li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      color: var(--muted);
    }

    .checklist li::before {
      content: "✓";
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: var(--accent);
      color: var(--brand-dark);
      font-weight: 900;
    }

    .alt {
      background: linear-gradient(180deg, #f8fbfd 0%, #eef8f6 100%);
    }

    .dark-band {
      background: linear-gradient(180deg, #0b1220 0%, #111a2d 100%);
      color: var(--white);
    }

    .dark-band .section-lead,
    .dark-band .card p,
    .dark-band .card li {
      color: rgba(255,255,255,.76);
    }

    .dark-band .card {
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.08);
      box-shadow: none;
    }

    .dark-band .icon {
      background: rgba(255,255,255,.08);
      color: #7ef0df;
    }

    .plans-grid .card.featured {
      border: 2px solid rgba(20,184,166,.35);
      transform: translateY(-4px);
    }

    .price {
      font-size: 38px;
      line-height: 1;
      margin: 18px 0 10px;
      font-weight: 800;
      letter-spacing: -.04em;
    }

    .price small {
      font-size: 15px;
      color: var(--muted);
      font-weight: 600;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      background: var(--accent);
      color: var(--brand-dark);
      margin-bottom: 6px;
    }

    .cta-box {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 24px;
      align-items: center;
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      color: var(--white);
      border-radius: 28px;
      padding: 34px;
      box-shadow: 0 24px 60px rgba(15,118,110,.28);
    }

    .cta-box p {
      margin: 0;
      color: rgba(255,255,255,.90);
    }

    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 14px;
    }

    .faq {
      display: grid;
      gap: 16px;
      margin-top: 36px;
    }

    details {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 18px 20px;
      box-shadow: var(--shadow);
    }

    summary {
      cursor: pointer;
      font-weight: 700;
      list-style: none;
    }

    summary::-webkit-details-marker { display: none; }
    details p { margin: 12px 0 0; color: var(--muted); }

    .footer {
      background: #08111e;
      color: rgba(255,255,255,.82);
      padding: 38px 0;
      border-top: 1px solid rgba(255,255,255,.08);
    }

    .footer-grid {
      grid-template-columns: 1.3fr .7fr;
      align-items: center;
    }

    .footer small {
      color: rgba(255,255,255,.58);
      display: block;
      margin-top: 8px;
    }

    @media (max-width: 1024px) {
      .hero-grid,
      .two-col,
      .cta-box,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .problem-grid,
      .benefits-grid,
      .features-grid,
      .audience-grid,
      .proof-grid,
      .plans-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }

      .cta-actions { justify-content: flex-start; }
    }

    @media (max-width: 760px) {
      .header-inner {
        min-height: 70px;
      }

      .nav {
        display: none;
      }

      .hero {
        padding-top: 52px;
      }

      .hero-list,
      .metrics,
      .problem-grid,
      .benefits-grid,
      .features-grid,
      .audience-grid,
      .proof-grid,
      .plans-grid,
      .mini-row {
        grid-template-columns: 1fr;
      }

      .section { padding: 68px 0; }
      .card { padding: 22px; }
      .cta-box { padding: 26px; }
      .mini-row { gap: 6px; }
    }
  .logo1 {      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--white);
      font-weight: 800;
      letter-spacing: .2px;
}
  
:focus-visible{outline:3px solid #0f766e;outline-offset:4px} .skip{position:absolute;left:12px;top:-100px;background:#fff;padding:12px;z-index:100}.skip:focus{top:10px}
.seo-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}.seo-card{display:block;padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff}.seo-card:hover{border-color:var(--brand)}.seo-card h3{font-size:21px;line-height:1.25;margin:0 0 12px}.seo-card p{color:var(--muted);margin:0}.seo-card span{display:block;color:var(--brand-dark);font-weight:700;margin-top:18px}.article-wrap{max-width:860px}.article-hero{padding:54px 0 40px;background:#effcf9}.article-hero h1{font-size:clamp(32px,5vw,52px);line-height:1.1;letter-spacing:-.03em}.article-intro{font-size:20px;color:#334155}.breadcrumbs{font-size:14px;display:flex;gap:8px;flex-wrap:wrap}.breadcrumbs a{text-decoration:underline}.article-body{padding:36px 0 60px}.article-body section{margin-bottom:38px}.article-body h2{font-size:28px;line-height:1.2}.article-body p,.article-body li{font-size:18px;line-height:1.75}.article-body li{margin:8px 0}.article-body a{color:#0f766e;text-decoration:underline}.article-meta{font-size:14px;color:#475569}.article-cta{background:#101a2e;color:white;padding:28px;border-radius:18px;margin-top:32px}.article-cta h2{color:white}.article-cta .btn{color:white;text-decoration:none}.section-nav{display:flex;gap:18px;flex-wrap:wrap;margin:22px 0}.section-nav a{color:#115e59;text-decoration:underline}.footer-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px}.footer-links a{text-decoration:underline}.mobile-nav{display:none}.mobile-nav summary{color:white}.mobile-nav nav{display:grid;gap:14px;padding-top:18px}.mobile-nav{background:#101a2e;box-shadow:none;border-color:#334155;position:relative}.mobile-nav[open] nav{position:absolute;right:0;top:48px;width:230px;background:#101a2e;padding:20px;border-radius:12px;color:white}.nav{gap:18px}.demo-note{font-size:12px;color:#475569;margin-top:8px}
@media(max-width:900px){.seo-links{grid-template-columns:repeat(2,minmax(0,1fr))}.nav{display:none}.mobile-nav{display:block}}@media(max-width:600px){.seo-links{grid-template-columns:1fr}.article-hero{padding:32px 0}.article-body p,.article-body li{font-size:17px}.article-hero h1{font-size:34px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.hero .eyebrow{color:#99f6e4;background:rgba(20,184,166,.14)}

/* Topic links in feature and sector cards */
.features-grid>.card,.audience-grid>.card{display:flex;flex-direction:column;align-items:flex-start}
.learn-more{display:inline-flex;align-items:center;gap:.5rem;color:#115e59;font-weight:700;padding-top:22px;margin-top:auto;min-height:44px;text-decoration:none}
.learn-more:hover{text-decoration:underline}.learn-more:focus-visible{outline:3px solid #0f766e;outline-offset:5px;border-radius:4px}
.article-body h3{font-size:21px;line-height:1.35;margin-top:24px}.seo-card>span>span{display:inline;margin:0}

/* Dropdown navigation shared by the home page and topic pages. */
.nav-dropdown{position:relative;padding:0;border:0;background:transparent;box-shadow:none;margin:0;color:inherit}
.nav-dropdown summary{display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none;padding:12px 0;color:inherit;font-size:15px;font-weight:500}
.nav-dropdown summary::-webkit-details-marker,.mobile-nav>summary::-webkit-details-marker{display:none}
.nav-chevron{display:inline-block;transition:transform .15s}.nav-dropdown[open] .nav-chevron{transform:rotate(180deg)}
.nav-dropdown-panel{position:absolute;top:100%;right:0;display:grid;gap:2px;width:350px;max-width:calc(100vw - 32px);max-height:calc(100vh - 110px);overflow:auto;padding:10px;background:#fff;color:#152033;border:1px solid #dce5ec;border-radius:14px;box-shadow:0 18px 45px #09111f33;z-index:60}
.nav-dropdown-panel a{display:block;padding:10px 12px;border-radius:8px;font-size:14px;line-height:1.4;color:#152033;text-decoration:none;min-height:44px}
.nav .nav-dropdown-panel a:hover,.nav-dropdown-panel a:focus-visible{background:#e9f7f4;color:#115e59}
.nav-dropdown-panel .nav-overview{border-top:1px solid #e2e8f0;margin-top:6px;padding-top:14px;font-weight:700;color:#115e59;border-radius:0}
.header summary:focus-visible,.header a:focus-visible{outline:3px solid #5eead4;outline-offset:3px}
.mobile-nav>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
@media(max-width:900px){.header-inner{min-height:76px;flex-wrap:nowrap}.mobile-nav[open]>nav{width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 100px);overflow-y:auto;gap:8px;z-index:60}.mobile-nav .nav-dropdown summary{padding:12px 0;font-size:16px}.mobile-nav .nav-dropdown-panel{position:static;width:100%;max-width:none;max-height:none;box-shadow:none;background:#fff;margin:0 0 8px}.mobile-nav .nav-dropdown-panel a:hover{background:#e9f7f4;color:#115e59}}

button.skip{font:inherit;cursor:pointer;border:0}.skip:focus{z-index:100}[tabindex="-1"]:focus{outline:none}

/* Promotional visual and relocated operational example. */
.hero-promo{margin:0;border:1px solid rgba(255,255,255,.16);border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.24);background:#09111f}
.hero-promo img{display:block;width:100%;height:auto;object-fit:contain}
.operation-preview .two-col{align-items:center;gap:40px}
.operation-preview .hero-card{color:#152033;background:linear-gradient(145deg,#101a2e,#19333c);padding:22px}
.preview-note{color:#64748b;font-size:14px;margin-top:16px}
@media(max-width:900px){.hero-promo{max-width:740px;justify-self:center;width:100%}.operation-preview .two-col{gap:28px}}
@media(max-width:600px){.hero-promo{border-radius:18px}.operation-preview .hero-card{padding:12px}.operation-preview .app-content{padding:12px}.operation-preview .metric{padding:12px}.operation-preview .metric small{font-size:12px}.operation-preview .mini-row{font-size:12px;gap:8px;padding:12px 8px}}

/* Align promotional image with the headline and blend its edges. */
.hero-promo{border:0;box-shadow:none;background:transparent}
.hero-promo img{mask-image:linear-gradient(to right,transparent,#000 8px,#000 calc(100% - 8px),transparent),linear-gradient(to bottom,transparent,#000 8px,#000 calc(100% - 8px),transparent);mask-composite:intersect;-webkit-mask-composite:source-in}
@media(min-width:901px){.hero-promo{align-self:start;margin-top:55px}}