:root{
      /* Light theme (page default) */
      --bg: #f7fafc;
      --bg2:#ffffff;
      --muted:#5b6777;
      --text:#0b1220;
      --line:#e6edf5;

      /* Brand */
      --brand:#22c55e;
      --brand2:#16a34a;

      /* Dark hero */
      --dark:#0b0f14;
      --dark2:#0f1620;
      --darkText:#eaf1fb;
      --darkMuted:#a6b2c2;
      --darkLine:#1f2a38;

      /* Accent section (Salesforce) */
      --sfBg1:#e8f0ff;
      --sfBg2:#ffffff;
      --sfLine:#cfe0ff;
      --sfBlue:#00A1E0;

      --shadow: 0 14px 40px rgba(15, 23, 42, .08);
      --shadow2: 0 10px 22px rgba(15, 23, 42, .06);
      --radius: 18px;
      --max: 1440px;
      --pad: 24px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      line-height:1.5;
      background:
        radial-gradient(1100px 520px at 18% -10%, rgba(34,197,94,.16), transparent 60%),
        radial-gradient(900px 520px at 88% 0%, rgba(22,163,74,.12), transparent 58%),
        linear-gradient(180deg, var(--bg), var(--bg2));
    }

    a{color:inherit; text-decoration:none}
    .container{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}

    /* NAV */
    .nav{
      position:sticky; top:0;
      background: #ffffff;
      border-bottom: 1px solid #e6edf5;
      z-index:50;
      box-shadow: 0 2px 12px rgba(15,23,42,.06);
    }
    .nav-inner{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 0;
      gap:14px;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      font-weight:900;
      letter-spacing:.2px;
      color:#0b1220;
      font-size:18px;
    }
    .nav-right{
      display:flex; align-items:center; gap:6px;
    }
    .nav-links{
      display:flex; gap:2px; align-items:center;
      color: #0b1220;
      font-size:13px;
    }
    .nav-links a{
      padding: 7px 11px;
      border-radius: 6px;
      font-weight:500;
      color: #0b1220;
      transition: background .15s;
      white-space: nowrap;
      font-size: 18px;
    }
    .nav-links a:hover{ background: #f4f7fb; color:#0b1220; }
    .nav-divider{
      width:1px; height:22px;
      background: #e6edf5;
      margin: 0 8px;
      flex-shrink:0;
    }
    .btn.primary.primary-dark{
      background: radial-gradient(900px 600px at 8% 60%, rgba(20,80,40,.55), transparent 65%),
        radial-gradient(700px 500px at 92% 10%, rgba(10,60,30,.45), transparent 60%),
        #0d2b1a; color: #fff;
    }
    .actions{display:flex; gap:10px; align-items:center}

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:10px 22px;
      border-radius:999px;
      border:1px solid #d1dae6;
      background: transparent;
      color:#0b1220;
      font-weight:600;
      font-size:14px;
      cursor:pointer;
      transition: background .15s ease, border-color .15s ease;
      white-space:nowrap;
    }
    .btn:hover{
      background: #f4f7fb;
      border-color: #a0aec0;
    }
    .btn.primary{
      background: var(--brand);
      border-color: transparent;
      color:#062312;
      font-weight:700;
    }
    .btn.primary:hover{
      background: var(--brand2);
      filter: none;
    }

    /* MsgFlowX Logo */
    .logo-wrap{
      width:38px; height:38px;
      border-radius:10px;
      overflow:hidden;
      box-shadow: 0 0 0 2px rgba(34,197,94,.35);
      flex:0 0 auto;
    }
    .logo-wrap svg{display:block; width:100%; height:100%}

    /* HERO (DARK THEME) */
    .hero{
      padding:100px 0 80px;
      min-height: 70vh;
      display:flex;
      flex-direction:column;
      justify-content:center;
      color: var(--darkText);
      background:
        radial-gradient(900px 600px at 8% 60%, rgba(20,80,40,.55), transparent 65%),
        radial-gradient(700px 500px at 92% 10%, rgba(10,60,30,.45), transparent 60%),
        #0d2b1a;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .hero .pill{
      display:inline-flex; gap:8px; align-items:center;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.20);
      padding:8px 12px;
      border-radius:999px;
      color: rgba(255,255,255,.65);
      font-size:13px;
    }
    .hero .pill b{color: #ffffff}
    .hero-grid{
      display:grid; grid-template-columns: 1.25fr .75fr;
      gap:26px;
      align-items:center;
      margin-top:24px;
    }
    .hero h1{
      margin:12px 0 10px;
      font-size: clamp(30px, 4vw, 46px);
      line-height:1.08;
      letter-spacing:-.7px;
    }
    .hero .lead{
      margin:0;
      color: var(--darkMuted);
      font-size: clamp(15px, 2vw, 18px);
      max-width: 74ch;
    }
    .hero-ctas{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
    .hero .note{margin-top:10px; color: var(--darkMuted); font-size:13px}

    .mock{
      border-radius: 22px;
      overflow: hidden;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.10),
        0 32px 80px rgba(0,0,0,.45),
        0 8px 24px rgba(0,0,0,.30);
      position: relative;
      background: rgba(0,0,0,.25);
      align-self: center;
    }
    .hero-img{
      display: block;
      width: 100%;
      height: auto;
      max-height: 520px;
      object-fit: cover;
      object-position: center top;
      border-radius: 22px;
    }
    .mock-caption{
      padding: 12px 16px;
      color: rgba(255,255,255,.50);
      font-size: 12px;
      text-align: center;
      background: rgba(0,0,0,.20);
    }

    /* SECTIONS */
    .section{
      padding:34px 0;
      border-top:1px solid var(--line);
    }
    .section h2{
      margin:0 0 8px;
      font-size: clamp(22px, 3vw, 30px);
      letter-spacing:-.3px;
    }
    .section p{
      margin:0 0 18px;
      color:var(--muted);
      max-width: 92ch;
    }

    .tag{
      display:inline-flex;
      font-size:12px;
      font-weight:900;
      color:#064e3b;
      background: rgba(34,197,94,.16);
      border:1px solid rgba(34,197,94,.26);
      padding:6px 10px;
      border-radius: 999px;
      margin-bottom:10px;
    }

    /* Salesforce section standout */
    .section.sf{
      border-top:1px solid var(--sfLine);
      background:
        radial-gradient(1100px 420px at 18% 10%, rgba(61, 132, 255, .16), transparent 55%),
        radial-gradient(900px 420px at 86% 0%, rgba(34,197,94,.10), transparent 58%),
        linear-gradient(180deg, var(--sfBg1), var(--sfBg2));
    }
    .sf-shell{
      border:1px solid var(--sfLine);
      background: rgba(255,255,255,.90);
      border-radius: calc(var(--radius) + 4px);
      padding:18px;
      box-shadow: var(--shadow2);
    }
    .sf-head{
      display:flex;
      gap:16px;
      align-items:center;
      flex-wrap:wrap;
      margin-bottom:12px;
    }
    .sf-big{
      width:92px; height:92px;
      border-radius:24px;
      border:1px solid var(--sfLine);
      background: rgba(255,255,255,.90);
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      box-shadow: var(--shadow2);
      flex:0 0 auto;
    }
    .sf-big img{
      width:72px;
      height:auto;
      display:block;
    }
    .sf-subtitle{
      color:var(--muted);
      font-size:13px;
      margin-top:4px;
    }

    .sf-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
      margin-top:14px;
    }
    .sf-item{
      border:1px solid var(--sfLine);
      background: rgba(255,255,255,.92);
      border-radius: var(--radius);
      padding:16px;
      box-shadow: var(--shadow2);
    }
    .sf-item h3{
      margin:0 0 6px;
      font-size:16px;
      letter-spacing:-.2px;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .sf-ico{
      width:28px; height:28px;
      border-radius:10px;
      border:1px solid var(--sfLine);
      background: rgba(0,161,224,.10);
      display:flex;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
    }
    .sf-ico svg{width:18px; height:18px; display:block}

    .bullets{margin:0; padding-left:18px; color:var(--muted)}
    .bullets li{margin:6px 0}

    /* Keep the tile but remove long code text */
    .mini-tile{
      margin-top:10px;
      border:1px dashed rgba(0,161,224,.28);
      background: rgba(0,161,224,.04);
      border-radius: 14px;
      padding:12px;
      min-height: 62px;
    }
    .mini-tile .mini-title{
      font-weight:900;
      font-size:12px;
      color: rgba(11,18,32,.8);
      margin-bottom:6px;
      display:flex; gap:8px; align-items:center;
    }
    .mini-dot{
      width:8px; height:8px; border-radius:999px;
      background: rgba(0,161,224,.55);
      display:inline-block;
    }
    .mini-muted{
      color: rgba(91,103,119,.92);
      font-size:12px;
      line-height:1.45;
    }

    /* Use-case alternating layout */
    .uc-wrap{display:grid; gap:22px; margin-top:18px}
    .uc-row{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap:18px;
      align-items:center;
      border:1px solid var(--line);
      background: rgba(255,255,255,.88);
      border-radius: calc(var(--radius) + 2px);
      padding:18px;
      box-shadow: var(--shadow2);
    }
    .uc-row.reverse .uc-media{order:1}
    .uc-row.reverse .uc-text{order:2}
    .uc-text h3{margin:0 0 8px; font-size:20px}
    .uc-text .bullets{margin:0; padding-left:18px; color:var(--muted)}
    .uc-text .bullets li{margin:6px 0}

    .uc-media{
      border:1px solid rgba(34,197,94,.22);
      background:
        radial-gradient(220px 220px at 18% 14%, rgba(255,255,255,.36), transparent 58%),
        radial-gradient(260px 260px at 84% 88%, rgba(255,255,255,.24), transparent 62%),
        linear-gradient(180deg, #e6f7d9 0%, #d8f1ca 100%);
      border-radius: calc(var(--radius) + 4px);
      overflow:hidden;
      box-shadow: 0 16px 34px rgba(34,197,94,.10), var(--shadow2);
      padding:22px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:12px;padding: 40px 22px;max-width: 380px;margin: 0 auto;
    }
    .uc-media video, .uc-media iframe{
      width:min(280px, 100%);
      aspect-ratio:393 / 852;
      height:auto;
      display:block;
      margin:0 auto;
      border:0;
      border-radius:28px;
      background:#000;
      object-fit:cover;
      box-shadow: 0 20px 42px rgba(15, 23, 42, .18);
    }
    .uc-media .media-caption{
      width:100%;
      padding:0;
      color:var(--muted);
      font-size:12px;
      text-align:center;
      border-top:0;
      background: transparent;
    }

    /* Ebook section (FIXED HEIGHT + IMAGE CROP so right side doesn't look small) */
    .ebook{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:18px;
      align-items:stretch;
    }
    .ebook-cover,
    .form{
      height: 622px;            /* same height on both sides */
      display:flex;
      flex-direction:column;
    }
    .ebook-cover{
      border:1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255,255,255,.92);
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .ebook-img{
      width:100%;
      height:100%;
      object-fit:cover;         /* crop tall poster nicely */
      object-position:center top; /* keep title visible */
      display:block;
    }
    .form{
      border:1px solid var(--line);
      background: rgba(255,255,255,.92);
      border-radius: var(--radius);
      box-shadow: var(--shadow2);
      padding:18px;
      overflow:auto;            /* scroll if needed */
    }

    .fields{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
    .fields .full{grid-column: 1 / -1}
    label{display:block; font-size:12px; font-weight:900; color:rgba(11,18,32,.8); margin:8px 0 6px}
    input{
      width:100%;
      padding:12px 12px;
      border-radius:12px;
      border:1px solid var(--line);
      outline:none;
      font-size:14px;
      background:#fff;
    }
    input:focus{border-color: rgba(34,197,94,.45); box-shadow: 0 0 0 4px rgba(34,197,94,.10)}
    .form-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
    .fineprint{margin-top:10px; color:rgba(91,103,119,.9); font-size:12px}

    .form-msg{
      margin-top:12px;
      padding:12px 14px;
      border-radius:10px;
      font-size:14px;
      font-weight:500;
    }
    .form-msg.success{
      background: rgba(34,197,94,.12);
      border:1px solid rgba(34,197,94,.30);
      color:#064e3b;
    }
    .form-msg.error{
      background: rgba(239,68,68,.08);
      border:1px solid rgba(239,68,68,.25);
      color:#991b1b;
    }

    .cta-band{
      margin-top:18px;
      border:1px solid rgba(34,197,94,.24);
      background:
        radial-gradient(900px 300px at 20% 20%, rgba(34,197,94,.16), transparent 60%),
        rgba(255,255,255,.88);
      border-radius: calc(var(--radius) + 6px);
      padding:22px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
      box-shadow: var(--shadow);
    }
    .cta-band h3{margin:0; font-size:18px}
    .cta-band p{margin:6px 0 0; color:var(--muted)}

    /* FOOTER */
    footer{
      padding:20px 0;
      border-top:1px solid var(--line);
      color:var(--muted);
      font-size:13px;
    }
    .foot-copy{
      text-align:center;
      color: var(--muted);
      font-size:13px;
    }

    /* HAMBURGER BUTTON */
    .hamburger{
      display:none;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap:5px;
      width:40px; height:40px;
      background:transparent;
      border:1px solid #d1dae6;
      border-radius:10px;
      cursor:pointer;
      padding:0;
      flex-shrink:0;
    }
    .hamburger span{
      display:block;
      width:20px; height:2px;
      background:#0b1220;
      border-radius:2px;
      transition: transform .25s ease, opacity .25s ease;
    }
    .hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg) }
    .hamburger.open span:nth-child(2){ opacity:0 }
    .hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg) }

    /* MOBILE DRAWER */
    .mobile-menu{
      display:none;
      position:fixed;
      top:0; left:0; right:0; bottom:0;
      z-index:49;
      background: #0d2b1a;
      padding:90px 28px 40px;
      flex-direction:column;
      gap:0;
      overflow-y:auto;
    }
    .mobile-menu.open{ display:flex }
    .mobile-close{
      position:absolute;
      top:18px; right:20px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.18);
      color: #fff;
      font-size:18px;
      width:40px; height:40px;
      border-radius:10px;
      cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      transition: background .15s;
    }
    .mobile-close:hover{ background: rgba(255,255,255,.20); }
    .mobile-menu a{
      display:block;
      color:rgba(255,255,255,.85);
      font-size:22px;
      font-weight:700;
      padding:18px 0;
      border-bottom:1px solid rgba(255,255,255,.08);
      text-decoration:none;
      transition: color .15s;
    }
    .mobile-menu a:hover{ color:#22c55e }
    .mobile-menu .mobile-actions{
      display:flex; flex-direction:column; gap:12px;
      margin-top:32px;
    }
    .mobile-menu .btn{
      width:100%; justify-content:center;
      font-size:16px; padding:14px 22px;
      color:#ffffff;
      border-color: rgba(255,255,255,.25);
    }
    .mobile-menu .btn.primary{
      color:#062312;
    }

    @media (max-width: 900px){
      .hero{ padding:72px 0 56px; min-height:auto }
      .hero-grid{grid-template-columns:1fr}
      .hero-img{ max-height: 300px; }
      .nav-links{display:none}
      .nav-divider{display:none}
      .actions{display:none}
      .hamburger{display:flex}
      .mock .screen{height:220px}

      .sf-grid{grid-template-columns:1fr}

      .uc-row{grid-template-columns:1fr}
      .uc-media{padding:14px}
      .uc-media video, .uc-media iframe{width:min(260px, 100%)}
      .uc-row.reverse .uc-media{order:2}
      .uc-row.reverse .uc-text{order:1}

      .ebook{grid-template-columns:1fr}
      .ebook-cover,.form{height:auto;}
      .ebook-img{height:auto; object-fit:contain;}
      .fields{grid-template-columns:1fr}

      .foot-grid{grid-template-columns:1fr}
    }