:root{
    --bg:        #f5f5f4;
    --surface:   #ffffff;
    --border:    #e7e7e5;
    --ink:       #16181d;
    --muted:     #6b7280;
    --faint:     #9aa0ab;

    --blue:      #3f6fd1;
    --blue-bg:   #dde9fb;
    --green:     #1f9d5a;
    --green-bg:  #dcf5e6;
    --tan-bg:    #f3eee4;
    --tan-text:  #8a7a5c;

    --font-display:'Plus Jakarta Sans', sans-serif;
    --font-body:   'Inter', sans-serif;

    --container: 1140px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }

  body{
    background:var(--surface);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  a{ color:inherit; }
  img,svg{ display:block; }

  .wrap{
    max-width:var(--container);
    margin:0 auto;
    padding:0 28px;
  }

  :focus-visible{
    outline:2px solid var(--blue);
    outline-offset:3px;
    border-radius:4px;
  }

  /* ================= NAV ================= */
  .nav{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);
  }
  .nav .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:72px;
  }
  .logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-display);
    font-weight:800;
    font-size:1.15rem;
    text-decoration:none;
    letter-spacing:-0.01em;
  }
  .nav-links{
    display:flex;
    align-items:center;
    gap:32px;
    font-size:0.92rem;
    font-weight:500;
    color:var(--muted);
  }
  .nav-links a{ text-decoration:none; transition:color .15s ease; }
  .nav-links a:hover{ color:var(--ink); }
  .nav-cta{
    display:inline-flex;
    align-items:center;
    background:var(--blue);
    color:#fff;
    font-weight:600;
    font-size:0.92rem;
    text-decoration:none;
    padding:11px 20px;
    border-radius:8px;
    transition:background .15s ease, transform .15s ease;
  }
  .nav-cta:hover{ background:#3461bd; transform:translateY(-1px); }

  @media (max-width:760px){ .nav-links{ display:none; } }

  /* ================= TYPE HELPERS ================= */
  .eyebrow{
    display:inline-block;
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--blue);
    margin-bottom:14px;
  }
  .eyebrow--green{ color:var(--green); }

  h1, h2, h3{ font-family:var(--font-display); letter-spacing:-0.01em; }

  /* ================= HERO ================= */
  .hero{ padding:84px 0 110px; background:var(--bg); }
  .hero .wrap{
    display:grid;
    grid-template-columns:0.95fr 1.15fr;
    gap:60px;
    align-items:center;
  }
  .hero h1{
    font-weight:800;
    font-size:clamp(2.4rem, 4.4vw, 3.5rem);
    line-height:1.1;
    margin-bottom:20px;
  }
  .hero h1 span{ color:var(--blue); }
  .hero p.lede{
    color:var(--muted);
    font-size:1.08rem;
    max-width:46ch;
    margin-bottom:32px;
  }
  .cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    font-size:0.95rem;
    text-decoration:none;
    padding:13px 24px;
    border-radius:8px;
    transition:background .15s ease, transform .15s ease, border-color .15s ease, color .15s ease;
  }
  .btn--primary{ background:var(--blue); color:#fff; }
  .btn--primary:hover{ background:#3461bd; transform:translateY(-1px); }
  .btn--ghost{ background:#fff; border:1px solid var(--border); color:var(--ink); }
  .btn--ghost:hover{ border-color:var(--blue); color:var(--blue); }

  @media (max-width:920px){
    .hero .wrap{ grid-template-columns:1fr; gap:48px; }
  }

  /* ================= APP MOCKUP ================= */
  .mockup{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:16px;
    padding:18px;
    box-shadow:0 30px 70px -36px rgba(22,24,29,0.28);
  }
  .mockup--inline{
    box-shadow:0 18px 40px -24px rgba(22,24,29,0.22);
  }

  .m-toggle{
    display:inline-flex;
    background:#ebebe9;
    border-radius:10px;
    padding:3px;
    margin-bottom:14px;
    font-size:0.82rem;
    font-weight:600;
  }
  .m-toggle span{
    padding:7px 14px;
    border-radius:8px;
    color:var(--muted);
  }
  .m-toggle span.active{
    background:#fff;
    color:var(--ink);
    box-shadow:0 1px 2px rgba(0,0,0,0.06);
  }

  .m-search{
    display:flex;
    gap:8px;
    margin-bottom:12px;
    flex-wrap:wrap;
  }
  .m-search-box{
    flex:1 1 180px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:9px;
    padding:9px 14px;
    font-size:0.82rem;
    color:var(--faint);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .m-pill{
    background:#fff;
    border:1px solid var(--border);
    border-radius:999px;
    padding:9px 14px;
    font-size:0.78rem;
    font-weight:600;
    color:var(--muted);
    white-space:nowrap;
  }
  .m-pill.active{ background:var(--ink); border-color:var(--ink); color:#fff; }

  .m-section-label{
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--faint);
    margin:16px 0 10px;
  }

  .m-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:16px;
    margin-bottom:12px;
  }
  .m-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
  }
  .m-card-id{ display:flex; gap:12px; align-items:center; }
  .m-avatar{
    width:38px; height:38px;
    border-radius:999px;
    background:var(--blue-bg);
    color:var(--blue);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:0.82rem;
    flex:none;
  }
  .m-name{ font-weight:700; font-size:0.94rem; line-height:1.3; }
  .m-role{ color:var(--muted); font-size:0.82rem; }
  .m-org{ color:var(--faint); font-size:0.78rem; }
  .m-actions{ display:flex; gap:6px; flex:none; }
  .m-btn{
    font-size:0.74rem;
    font-weight:600;
    color:var(--muted);
    background:#fff;
    border:1px solid var(--border);
    border-radius:7px;
    padding:5px 10px;
  }
  .m-divider{ border-top:1px solid var(--border); margin:12px 0; }
  .m-field{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:0.82rem;
    color:var(--ink);
    margin-bottom:8px;
  }
  .m-field-copy{
    font-size:0.7rem;
    font-weight:600;
    color:var(--faint);
    background:#fff;
    border:1px solid var(--border);
    border-radius:999px;
    padding:4px 10px;
  }
  .m-chips{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
  .m-chip{
    font-size:0.74rem;
    font-weight:600;
    border-radius:999px;
    padding:5px 12px;
  }
  .m-chip--green{ background:var(--green-bg); color:var(--green); }
  .m-chip--tan{ background:var(--tan-bg); color:var(--tan-text); }
  .m-footer{
    font-size:0.72rem;
    color:var(--faint);
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid var(--border);
  }

  @media (max-width:480px){
    .m-search{ flex-direction:column; }
  }

  /* ================= PROBLEM ================= */
  .problem{ padding:96px 0; }
  .problem .wrap{ max-width:760px; }
  .problem h2{
    font-weight:800;
    font-size:clamp(1.8rem, 3.2vw, 2.5rem);
    line-height:1.2;
    margin-bottom:18px;
  }
  .problem p.lede{ color:var(--muted); font-size:1.05rem; max-width:62ch; }

  /* ================= FEATURE ROWS ================= */
  .feature-row{
    padding:88px 0;
    border-top:1px solid var(--border);
  }
  .feature-row .wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center;
  }
  .feature-row.reverse .wrap{ direction:rtl; }
  .feature-row.reverse .wrap > *{ direction:ltr; }
  .feature-row h2{
    font-weight:800;
    font-size:clamp(1.6rem, 2.8vw, 2.1rem);
    line-height:1.2;
    margin-bottom:16px;
  }
  .feature-row p{ color:var(--muted); font-size:1rem; max-width:46ch; }

  @media (max-width:920px){
    .feature-row .wrap{ grid-template-columns:1fr; gap:40px; }
    .feature-row.reverse .wrap{ direction:ltr; }
    .feature-row.reverse .wrap > .feature-visual{ order:-1; }
  }

  /* --- Org chart mockup --- */
  .m-orgchart{ padding:8px 4px 4px; }
  .m-country{
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px 16px;
    font-weight:700;
    font-size:0.92rem;
    margin-bottom:34px;
    text-align:center;
  }
  .m-cities{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    position:relative;
  }
  .m-cities::before{
    content:"";
    position:absolute;
    top:-18px;
    left:16.66%;
    right:16.66%;
    height:1px;
    background:var(--border);
  }
  .m-city{
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px;
    text-align:center;
    position:relative;
  }
  .m-city::before{
    content:"";
    position:absolute;
    top:-18px;
    left:50%;
    width:1px;
    height:18px;
    background:var(--border);
  }
  .m-city-name{ font-weight:700; font-size:0.84rem; margin-bottom:6px; }
  .m-city-meta{ font-size:0.7rem; color:var(--faint); }

  /* --- Audit log mockup --- */
  .m-audit-row{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:13px 0;
    border-bottom:1px solid var(--border);
    font-size:0.82rem;
  }
  .m-audit-row:last-child{ border-bottom:none; }
  .m-audit-chip{
    font-size:0.68rem;
    font-weight:700;
    letter-spacing:0.04em;
    background:var(--blue-bg);
    color:var(--blue);
    border-radius:6px;
    padding:4px 8px;
    flex:none;
    white-space:nowrap;
  }
  .m-audit-body{ flex:1; }
  .m-audit-actor{ font-weight:600; }
  .m-audit-summary{ color:var(--muted); margin-top:2px; }
  .m-audit-time{
    font-size:0.74rem;
    color:var(--faint);
    flex:none;
    white-space:nowrap;
  }

  /* --- Access / SSO mockup --- */
  .m-sso-banner{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--green-bg);
    color:var(--green);
    font-size:0.8rem;
    font-weight:600;
    border-radius:9px;
    padding:10px 14px;
    margin-bottom:16px;
  }
  .m-user-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 0;
    border-bottom:1px solid var(--border);
  }
  .m-user-row:last-child{ border-bottom:none; }
  .m-user-info{ flex:1; }
  .m-user-name{ font-weight:700; font-size:0.86rem; }
  .m-user-email{ font-size:0.74rem; color:var(--faint); }
  .m-role-badge{
    font-size:0.7rem;
    font-weight:700;
    border-radius:999px;
    padding:5px 12px;
    flex:none;
  }
  .m-role-badge--admin{ background:var(--blue-bg); color:var(--blue); }
  .m-role-badge--editor{ background:var(--green-bg); color:var(--green); }
  .m-role-badge--viewer{ background:#ececea; color:var(--muted); }

  /* ================= HOW IT WORKS ================= */
  .how{ padding:96px 0; background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .how h2{
    font-weight:800;
    font-size:clamp(1.8rem, 3.2vw, 2.5rem);
    line-height:1.2;
    margin-bottom:14px;
  }
  .how p.lede{ color:var(--muted); font-size:1.05rem; max-width:60ch; margin-bottom:52px; }
  .steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .step{
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:26px;
  }
  .step-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px; height:32px;
    border-radius:999px;
    background:var(--ink);
    color:#fff;
    font-weight:700;
    font-size:0.86rem;
    margin-bottom:16px;
  }
  .step h3{ font-weight:700; font-size:1.05rem; margin-bottom:8px; }
  .step p{ color:var(--muted); font-size:0.92rem; }

  @media (max-width:860px){ .steps{ grid-template-columns:1fr; } }

  /* ================= CTA ================= */
  .cta-band{ padding:100px 0; text-align:center; }
  .cta-band .wrap{ max-width:620px; }
  .cta-band h2{
    font-weight:800;
    font-size:clamp(1.8rem, 3.4vw, 2.6rem);
    line-height:1.2;
    margin-bottom:14px;
  }
  .cta-band p.lede{ color:var(--muted); font-size:1.05rem; margin-bottom:32px; }
  .cta-band .cta-row{ justify-content:center; }

  /* ================= FOOTER ================= */
  footer{ border-top:1px solid var(--border); padding:44px 0; }
  footer .wrap{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    flex-wrap:wrap;
  }
  .foot-brand{ font-family:var(--font-display); font-weight:800; font-size:1.05rem; }
  .foot-tag{ font-size:0.86rem; color:var(--muted); margin-top:6px; max-width:32ch; }
  .foot-links{ display:flex; gap:26px; font-size:0.86rem; color:var(--muted); }
  .foot-links a{ text-decoration:none; }
  .foot-links a:hover{ color:var(--ink); }
  .foot-meta{
    width:100%;
    margin-top:28px;
    padding-top:20px;
    border-top:1px solid var(--border);
    font-size:0.78rem;
    color:var(--faint);
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }

  /* ================= PAGE HEADER (sub-pages) ================= */
  .page-header{ padding:72px 0 56px; background:var(--bg); border-bottom:1px solid var(--border); }
  .page-header h1{
    font-weight:800;
    font-size:clamp(2.1rem, 4vw, 3rem);
    line-height:1.15;
    margin-bottom:14px;
  }
  .page-header p.lede{ color:var(--muted); font-size:1.05rem; max-width:54ch; }

  /* ================= FORMS ================= */
  .form-section{ padding:80px 0 110px; }
  .form-layout{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:56px;
    align-items:flex-start;
  }
  @media (max-width:900px){
    .form-layout{ grid-template-columns:1fr; gap:40px; }
  }

  .form-side h2{
    font-weight:800;
    font-size:1.3rem;
    margin-bottom:12px;
  }
  .form-side p{ color:var(--muted); font-size:0.96rem; max-width:34ch; }

  .contact-list{ margin-top:24px; padding:0; list-style:none; }
  .contact-list li{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:0.94rem;
    padding:12px 0;
    border-top:1px solid var(--border);
  }
  .contact-list li:first-child{ border-top:none; }
  .contact-list a{ font-weight:600; text-decoration:none; color:var(--blue); }
  .contact-list a:hover{ text-decoration:underline; }
  .contact-list .clabel{ color:var(--faint); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; width:84px; flex:none; }

  .form-card{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:14px;
    padding:32px;
  }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  @media (max-width:540px){ .field-row{ grid-template-columns:1fr; } }

  .field{ margin-bottom:18px; }
  .field label{
    display:block;
    font-size:0.84rem;
    font-weight:600;
    margin-bottom:6px;
  }
  .field input,
  .field select,
  .field textarea{
    width:100%;
    background:#fff;
    border:1px solid var(--border);
    border-radius:8px;
    padding:11px 13px;
    font-family:var(--font-body);
    font-size:0.92rem;
    color:var(--ink);
  }
  .field input:focus,
  .field select:focus,
  .field textarea:focus{
    outline:2px solid var(--blue);
    outline-offset:1px;
    border-color:var(--blue);
  }
  .field textarea{ resize:vertical; min-height:110px; }
  .field-hint{ font-size:0.78rem; color:var(--faint); margin-top:5px; }

  .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

  .form-submit{
    width:100%;
    justify-content:center;
    border:none;
    cursor:pointer;
    font-size:0.96rem;
  }

  .form-note{
    margin-top:16px;
    font-size:0.82rem;
    color:var(--faint);
  }