:root {
        color-scheme: light;
        --navy: #08172f;
        --navy-2: #112a52;
        --blue: #365de8;
        --blue-2: #2448c9;
        --sky: #dfe8ff;
        --ink: #17233a;
        --muted: #5e6c82;
        --canvas: #f5f7fb;
        --surface: #ffffff;
        --surface-2: #edf2ff;
        --line: #d8dfeb;
        --header: rgba(255, 255, 255, 0.9);
        --navy-panel: #08172f;
        --navy-panel-2: #15386d;
        --navy-copy: #d7e1f4;
        --success: #0a7658;
        --danger: #a32626;
        --shadow: 0 24px 70px rgba(8, 23, 47, 0.12);
        --radius: 24px;
      }
      html[data-theme="evening"] {
        color-scheme: dark;
        --ink: #eef3ff;
        --muted: #afbdd4;
        --canvas: #071225;
        --surface: #0e1e38;
        --surface-2: #142a4c;
        --line: #2a3d5d;
        --header: rgba(7, 18, 37, 0.9);
        --navy-panel: #132e59;
        --navy-panel-2: #234c91;
        --navy-copy: #e1e9f7;
        --sky: #233f72;
        --shadow: 0 26px 80px rgba(0, 0, 0, 0.34);
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; scroll-padding-top: 92px; }
      body {
        margin: 0;
        background: var(--canvas);
        color: var(--ink);
        font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
        transition: background 0.28s ease, color 0.28s ease;
      }
      body.menu-open { overflow: hidden; }
      a { color: inherit; text-decoration: none; }
      button, input, select, textarea { font: inherit; }
      button { cursor: pointer; }
      img { max-width: 100%; }
      .wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
      .eyebrow {
        margin-bottom: 16px;
        color: var(--blue);
        font-size: 0.76rem;
        font-weight: 850;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
      h1, h2, h3, p { margin-top: 0; }
      h1, h2, h3 { color: var(--ink); }
      h1 {
        margin-bottom: 24px;
        font-size: clamp(3.1rem, 7vw, 6.4rem);
        line-height: 0.94;
        letter-spacing: -0.07em;
      }
      h2 {
        margin-bottom: 18px;
        font-size: clamp(2.2rem, 4.5vw, 4.35rem);
        line-height: 1.02;
        letter-spacing: -0.055em;
      }
      h3 { line-height: 1.2; letter-spacing: -0.025em; }
      .btn {
        display: inline-flex;
        min-height: 50px;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 12px 22px;
        border: 1px solid var(--blue);
        border-radius: 999px;
        background: var(--blue);
        color: #fff;
        font-weight: 820;
        box-shadow: 0 12px 30px rgba(54, 93, 232, 0.22);
        transition: 0.2s ease;
      }
      .btn:hover {
        border-color: var(--blue-2);
        background: var(--blue-2);
        transform: translateY(-2px);
      }
      .btn:active { transform: translateY(0) scale(0.98); }
      .btn.secondary {
        border-color: var(--line);
        background: var(--surface);
        color: var(--ink);
        box-shadow: none;
      }
      .btn.secondary:hover { border-color: var(--blue); color: var(--blue); }
      :focus-visible {
        outline: 3px solid rgba(90, 124, 255, 0.55);
        outline-offset: 3px;
      }
      .topline { background: var(--navy); color: #dce6f8; font-size: 0.79rem; }
      .topline .wrap {
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
      }
      .topline a { color: #fff; font-weight: 750; }
      .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        border-bottom: 1px solid var(--line);
        background: var(--header);
        backdrop-filter: blur(18px);
      }
      .nav {
        min-height: 78px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 26px;
      }
      .brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        color: var(--ink);
        font-size: 0.8rem;
        font-weight: 900;
        letter-spacing: 0.13em;
        white-space: nowrap;
      }
      .brand-mark {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        background: var(--navy);
        color: #fff;
        font-size: 1.05rem;
        letter-spacing: -0.06em;
        box-shadow: inset -8px -8px 18px rgba(54, 93, 232, 0.38);
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 22px;
        color: var(--muted);
        font-size: 0.88rem;
        font-weight: 760;
      }
      .nav-links > a:hover { color: var(--blue); }
      .theme-switch {
        display: inline-flex;
        padding: 4px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
      }
      .theme-switch button {
        min-height: 34px;
        padding: 6px 11px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 780;
      }
      .theme-switch button[aria-pressed="true"] { background: var(--navy); color: #fff; }
      html[data-theme="evening"] .theme-switch button[aria-pressed="true"] { background: var(--blue); }
      .nav .btn { min-height: 42px; padding: 9px 17px; font-size: 0.83rem; }
      .menu-button {
        width: 44px;
        height: 44px;
        display: none;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        color: var(--ink);
        font-size: 1.25rem;
      }
      .mobile-menu { display: none; border-top: 1px solid var(--line); background: var(--surface); }
      .mobile-menu.open { display: block; }
      .mobile-menu .wrap { display: grid; gap: 4px; padding-block: 14px 22px; }
      .mobile-menu a { padding: 12px 4px; color: var(--ink); font-weight: 760; }
      .hero { position: relative; overflow: hidden; padding: 92px 0 36px; }
      .hero::before {
        content: "";
        position: absolute;
        width: 540px;
        height: 540px;
        border: 104px solid rgba(54, 93, 232, 0.09);
        border-radius: 50%;
        top: -260px;
        right: -170px;
        pointer-events: none;
      }
      .hero-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 74px;
        align-items: center;
      }
      .hero-copy p {
        max-width: 670px;
        margin-bottom: 0;
        color: var(--muted);
        font-size: 1.17rem;
      }
      .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
      .hero-note {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 22px;
        margin-top: 28px;
        color: var(--muted);
        font-size: 0.84rem;
        font-weight: 700;
      }
      .hero-note span::before {
        content: "";
        width: 7px;
        height: 7px;
        display: inline-block;
        margin-right: 8px;
        border-radius: 50%;
        background: var(--blue);
      }
      .signal-card {
        position: relative;
        min-height: 480px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        padding: 32px;
        border-radius: 32px;
        background: linear-gradient(145deg, var(--navy-panel), var(--navy-panel-2));
        color: #fff;
        box-shadow: var(--shadow);
      }
      .signal-card::after {
        content: "";
        position: absolute;
        width: 290px;
        height: 290px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 50%;
        right: -90px;
        bottom: -110px;
      }
      .signal-label {
        color: #a9bcff;
        font-size: 0.74rem;
        font-weight: 850;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }
      .signal-card h2 {
        max-width: 460px;
        margin: 20px 0 10px;
        color: #fff;
        font-size: clamp(2rem, 4vw, 3.35rem);
      }
      .signal-card > div > p { max-width: 500px; color: var(--navy-copy); }
      .signal-flow { position: relative; z-index: 1; display: grid; gap: 9px; }
      .signal-flow div {
        display: grid;
        grid-template-columns: 34px 1fr;
        gap: 12px;
        align-items: center;
        padding: 12px 14px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.07);
        color: #edf2ff;
        font-size: 0.91rem;
        font-weight: 720;
      }
      .signal-flow b {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: rgba(126, 157, 255, 0.22);
        color: #c5d2ff;
        font-size: 0.75rem;
      }
      .proof-strip {
        position: relative;
        z-index: 2;
        margin-top: 68px;
        padding: 29px 0 10px;
        border-top: 1px solid var(--line);
      }
      .proof-strip .eyebrow { margin-bottom: 20px; color: var(--muted); text-align: center; }
      .logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
      .logo-tile {
        min-height: 88px;
        display: grid;
        place-items: center;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--surface);
        color: var(--ink);
        text-align: center;
        transition: 0.2s ease;
      }
      .logo-tile:hover {
        border-color: var(--blue);
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(8, 23, 47, 0.08);
      }
      .logo-tile strong { display: block; font-size: 1.02rem; letter-spacing: -0.015em; }
      .logo-tile small {
        display: block;
        margin-top: 2px;
        color: var(--muted);
        font-size: 0.68rem;
        font-weight: 720;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .logo-tile.medh strong { color: #198477; font-size: 1.28rem; letter-spacing: 0.08em; }
      .logo-tile.magnetic strong { color: var(--blue); }
      .logo-tile.pp strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.18rem; }
      .logo-tile.dan strong { font-weight: 650; letter-spacing: 0.04em; }
      .point-view { padding: 104px 0; }
      .section-head {
        display: grid;
        grid-template-columns: 1fr 0.58fr;
        gap: 64px;
        align-items: end;
        margin-bottom: 44px;
      }
      .section-head p { margin-bottom: 6px; color: var(--muted); }
      .view-shell {
        display: grid;
        grid-template-columns: 0.78fr 1.22fr;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow);
      }
      .view-tabs {
        display: grid;
        gap: 8px;
        align-content: center;
        padding: 24px;
        border-right: 1px solid var(--line);
        background: var(--surface-2);
      }
      .view-tab {
        display: grid;
        grid-template-columns: 38px 1fr auto;
        gap: 12px;
        align-items: center;
        width: 100%;
        padding: 15px;
        border: 1px solid transparent;
        border-radius: 15px;
        background: transparent;
        color: var(--muted);
        text-align: left;
        font-weight: 790;
        transition: 0.18s ease;
      }
      .view-tab:hover { color: var(--ink); }
      .view-tab[aria-selected="true"] {
        border-color: rgba(54, 93, 232, 0.22);
        background: var(--surface);
        color: var(--ink);
        box-shadow: 0 10px 24px rgba(8, 23, 47, 0.08);
      }
      .view-number {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        background: var(--sky);
        color: var(--blue);
        font-size: 0.75rem;
        font-weight: 900;
      }
      .selected-mark {
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: transparent;
        color: transparent;
        font-size: 0.7rem;
      }
      .view-tab[aria-selected="true"] .selected-mark { background: var(--blue); color: #fff; }
      .view-panel { min-height: 420px; padding: 50px; }
      .view-panel[hidden] { display: none; }
      .view-panel .panel-kicker {
        color: var(--blue);
        font-size: 0.78rem;
        font-weight: 850;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .view-panel h3 {
        max-width: 720px;
        margin: 18px 0 16px;
        font-size: clamp(2rem, 4vw, 3.3rem);
      }
      .view-panel > p { max-width: 720px; color: var(--muted); font-size: 1.05rem; }
      .view-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 30px; }
      .view-points div {
        padding: 15px;
        border: 1px solid var(--line);
        border-radius: 13px;
        color: var(--ink);
        font-size: 0.88rem;
        font-weight: 720;
      }
      .services { padding: 104px 0 0; background: var(--surface); }
      .service-tabs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: none;
      }
      .service-tabs::-webkit-scrollbar { display: none; }
      .service-tab {
        flex: 0 0 auto;
        min-height: 48px;
        padding: 10px 18px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
        color: var(--muted);
        font-weight: 790;
      }
      .service-tab:hover { border-color: var(--blue); color: var(--blue); }
      .service-tab[aria-selected="true"] {
        border-color: var(--blue);
        background: var(--blue);
        color: #fff;
        box-shadow: 0 10px 24px rgba(54, 93, 232, 0.2);
      }
      .service-panels { margin-top: 22px; }
      .service-panel {
        display: grid;
        grid-template-columns: 0.76fr 1.24fr;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--canvas);
      }
      .service-panel[hidden] { display: none; }
      .service-intro {
        padding: 42px;
        background: linear-gradient(145deg, var(--navy-panel), var(--navy-panel-2));
        color: #fff;
      }
      .service-intro .tag {
        color: #adbdff;
        font-size: 0.75rem;
        font-weight: 850;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .service-intro h3 {
        margin: 24px 0 12px;
        color: #fff;
        font-size: clamp(2rem, 4vw, 3.25rem);
      }
      .service-intro p { color: var(--navy-copy); }
      .service-intro .btn {
        margin-top: 18px;
        border-color: #fff;
        background: #fff;
        color: var(--navy);
        box-shadow: none;
      }
      .service-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        align-content: center;
        padding: 34px;
      }
      .service-card {
        min-height: 128px;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 15px;
        background: var(--surface);
      }
      .service-card strong { display: block; margin-bottom: 7px; color: var(--ink); }
      .service-card span { color: var(--muted); font-size: 0.87rem; }
      .consultation {
        display: grid;
        grid-template-columns: 0.78fr 1.22fr;
        gap: 62px;
        align-items: start;
        margin-top: 84px;
        padding: 72px 0 86px;
        border-top: 1px solid var(--line);
      }
      .contact-copy { position: sticky; top: 112px; }
      .contact-copy p { color: var(--muted); }
      .contact-list { display: grid; gap: 10px; margin-top: 27px; }
      .contact-list a, .contact-list span {
        display: flex;
        gap: 11px;
        align-items: center;
        color: var(--ink);
        font-weight: 730;
      }
      .contact-list i {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        border-radius: 10px;
        background: var(--sky);
        color: var(--blue);
        font-style: normal;
        font-size: 0.78rem;
      }
      .lead-form {
        padding: 34px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--canvas);
        box-shadow: var(--shadow);
      }
      .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
      .field { display: grid; gap: 7px; }
      .field.full { grid-column: 1 / -1; }
      .field label { color: var(--ink); font-size: 0.79rem; font-weight: 800; }
      .field input, .field select, .field textarea {
        width: 100%;
        min-height: 48px;
        padding: 11px 13px;
        border: 1px solid var(--line);
        border-radius: 11px;
        background: var(--surface);
        color: var(--ink);
      }
      .field textarea { min-height: 118px; resize: vertical; }
      .field input:focus, .field select:focus, .field textarea:focus {
        border-color: var(--blue);
        outline: 0;
        box-shadow: 0 0 0 3px rgba(54, 93, 232, 0.13);
      }
      .field small, .form-note { color: var(--muted); font-size: 0.74rem; }
      .selected-service {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 20px;
        padding: 12px 14px;
        border: 1px solid rgba(54, 93, 232, 0.24);
        border-radius: 12px;
        background: var(--surface-2);
        color: var(--ink);
        font-size: 0.88rem;
        font-weight: 760;
      }
      .selected-service::before {
        content: "✓";
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        border-radius: 50%;
        background: var(--blue);
        color: #fff;
        font-size: 0.68rem;
      }
      .form-status {
        display: none;
        margin-top: 14px;
        padding: 14px;
        border-radius: 11px;
        font-size: 0.88rem;
        font-weight: 700;
      }
      .form-status.show { display: block; }
      .footer { padding: 36px 0; background: var(--navy); color: #b8c4d8; }
      .footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
      .footer .brand { color: #fff; }
      .footer-links { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.82rem; }
      .float-actions {
        position: fixed;
        z-index: 40;
        right: 18px;
        bottom: 18px;
        display: grid;
        gap: 9px;
      }
      .float-actions a {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        border-radius: 15px;
        color: #fff;
        font-size: 0.78rem;
        font-weight: 900;
        box-shadow: 0 12px 30px rgba(8, 23, 47, 0.24);
      }
      .float-actions .whatsapp { background: #169b55; }
      .float-actions .phone { background: var(--blue); }
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
      }
      @media (max-width: 980px) {
        .nav-links { display: none; }
        .menu-button { display: grid; }
        .hero-grid, .section-head, .view-shell, .service-panel, .consultation { grid-template-columns: 1fr; }
        .hero-grid { gap: 42px; }
        .signal-card { min-height: 400px; }
        .view-tabs {
          grid-template-columns: repeat(3, 1fr);
          border-right: 0;
          border-bottom: 1px solid var(--line);
        }
        .view-tab { grid-template-columns: 34px 1fr; }
        .view-tab .selected-mark { display: none; }
        .contact-copy { position: static; }
      }
      @media (max-width: 720px) {
        .wrap { width: min(100% - 28px, 1180px); }
        .topline .wrap { justify-content: center; text-align: center; }
        .topline .contact-top { display: none; }
        .nav { min-height: 70px; }
        .brand { font-size: 0.7rem; letter-spacing: 0.1em; }
        .brand-mark { width: 34px; height: 34px; }
        .nav > .theme-switch { display: none; }
        .mobile-menu .theme-switch { width: max-content; margin-top: 8px; }
        .hero { padding-top: 64px; }
        h1 { font-size: clamp(3rem, 15vw, 4.55rem); }
        h2 { font-size: clamp(2.15rem, 11vw, 3.3rem); }
        .hero-copy p { font-size: 1.03rem; }
        .hero-actions .btn { width: 100%; }
        .signal-card { min-height: 0; padding: 25px; border-radius: 24px; }
        .signal-flow { margin-top: 28px; }
        .proof-strip { margin-top: 50px; }
        .logo-grid { grid-template-columns: 1fr 1fr; }
        .point-view, .services { padding-top: 76px; }
        .section-head { gap: 12px; margin-bottom: 30px; }
        .view-tabs { grid-template-columns: 1fr; padding: 14px; }
        .view-tab { grid-template-columns: 34px 1fr auto; padding: 11px; }
        .view-tab .selected-mark { display: grid; }
        .view-panel { min-height: 0; padding: 30px 23px 34px; }
        .view-points, .service-body, .form-grid { grid-template-columns: 1fr; }
        .service-intro, .service-body { padding: 26px; }
        .service-card { min-height: 0; }
        .consultation { gap: 34px; margin-top: 62px; padding: 58px 0 72px; }
        .lead-form { padding: 24px; }
        .footer .wrap { align-items: flex-start; flex-direction: column; }
        .float-actions { right: 12px; bottom: 12px; }
      }
      @media (min-width: 721px) { .mobile-menu .theme-switch { display: none; } }