/*
Theme Name: Pabau Trust Center
Theme URI: https://pabau.com
Author: Pabau
Description: Single-page Trust Center — security & compliance landing page with a gated document-request form that emails support@pabau.com via wp_mail (works with any SMTP plugin).
Version: 1.0
Requires at least: 5.5
Requires PHP: 7.4
*/

  /* Satoshi — variable font covers all weights (300–900) used on this page */
  @font-face{
    font-family:'Satoshi';
    src:url('fonts/Satoshi-Variable.woff2') format('woff2'),
        url('fonts/Satoshi-Variable.woff') format('woff');
    font-weight:300 900;
    font-style:normal;
    font-display:swap;
  }
  :root{
    /* ====== PABAU BRAND — edit these to match your exact palette ====== */
    --brand:#2BADD4;          /* primary brand — Pabau cyan-blue */
    --brand-bright:#54C7E6;   /* lighter blue (gradients/accents) */
    --brand-deep:#15768F;     /* darker blue (depth + text on tint) */
    --brand-soft:#E7F6FB;     /* pale blue tint (icon/chip backgrounds) */
    /* ================================================================== */
    --bg:#F4FAFC;
    --surface:#FFFFFF;
    --ink:#0E2A33;
    --ink-soft:#3D5A63;
    --muted:#6F8B94;
    --line:#DEEDF2;
    --line-strong:#C4DFE8;
    --shadow:0 1px 2px rgba(14,42,51,.04), 0 8px 24px -12px rgba(14,42,51,.14);
    --shadow-lg:0 30px 60px -24px rgba(21,118,143,.26);
    --radius:16px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Satoshi',sans-serif;
    background:var(--bg);color:var(--ink);line-height:1.55;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px}

  /* ---------- Header ---------- */
  header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(150%) blur(12px);
    background:rgba(244,250,252,.82);border-bottom:1px solid var(--line)}
  .bar{display:flex;align-items:center;justify-content:space-between;height:68px}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
  .logo-mark{width:34px;height:34px;border-radius:9px;
    background:linear-gradient(135deg,var(--brand),var(--brand-bright));
    display:grid;place-items:center;color:#fff;font-family:'Satoshi',sans-serif;font-weight:600;font-size:19px;
    box-shadow:0 4px 12px -4px rgba(43,173,212,.6)}
  .brand b{font-weight:700;font-size:18px;letter-spacing:-.01em}
  .brand span{color:var(--muted);font-weight:500;font-size:18px;letter-spacing:-.01em}
  .nav{display:flex;align-items:center;gap:30px}
  .nav a{color:var(--ink-soft);text-decoration:none;font-size:14.5px;font-weight:500;transition:color .2s}
  .nav a:hover{color:var(--brand)}
  .btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font-family:inherit;
    font-weight:600;font-size:14.5px;border-radius:10px;padding:10px 18px;text-decoration:none;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
  .btn-primary{background:var(--ink);color:#fff}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(14,42,51,.5)}
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
  .btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
  @media(max-width:820px){.nav a:not(.btn){display:none}}

  /* ---------- Hero ---------- */
  .hero{position:relative;padding:84px 0 64px;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:-200px -200px auto -200px;height:560px;z-index:0;
    background:
      radial-gradient(60% 80% at 78% 12%,rgba(84,199,230,.22),transparent 60%),
      radial-gradient(50% 70% at 12% 0%,rgba(43,173,212,.16),transparent 60%);
    filter:blur(8px)}
  .hero::after{content:"";position:absolute;inset:0;z-index:0;opacity:.55;
    background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:42px 42px;
    -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);
    mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%)}
  .hero .wrap{position:relative;z-index:1}
  .eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);
    border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;color:var(--brand-deep);
    box-shadow:var(--shadow);margin-bottom:22px}
  .pulse{width:8px;height:8px;border-radius:50%;background:var(--brand-bright);animation:pulse 2.4s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(84,199,230,.5)}70%{box-shadow:0 0 0 9px rgba(84,199,230,0)}100%{box-shadow:0 0 0 0 rgba(84,199,230,0)}}
  h1{font-family:'Satoshi',sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.04;
    font-size:clamp(42px,6.4vw,72px);max-width:760px}
  h1 em{font-style:italic;color:var(--brand)}
  .lede{margin-top:22px;max-width:560px;font-size:18.5px;color:var(--ink-soft);line-height:1.6}
  .hero-cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
  .btn-lg{padding:14px 26px;font-size:15.5px;border-radius:12px}
  .btn-brand{background:var(--brand);color:#fff}
  .btn-brand:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(43,173,212,.7)}

  .reveal{opacity:0;transform:translateY(16px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes rise{to{opacity:1;transform:none}}
  .d1{animation-delay:.05s}.d2{animation-delay:.14s}.d3{animation-delay:.23s}.d4{animation-delay:.32s}

  /* ---------- Section frame ---------- */
  section{position:relative;z-index:1}
  .section{padding:58px 0}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px}
  .sec-head h2{font-family:'Satoshi',sans-serif;font-weight:600;font-size:clamp(28px,3.4vw,38px);letter-spacing:-.015em}
  .sec-head p{color:var(--muted);font-size:15px;max-width:440px;margin-top:6px}
  .kicker{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);
    display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .kicker::before{content:"";width:26px;height:2px;background:var(--brand-bright);border-radius:2px}

  /* ---------- Compliance badges ---------- */
  .group-label{display:flex;align-items:center;gap:14px;margin:8px 0 18px;font-size:14px;font-weight:700;color:var(--ink)}
  .group-label .tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
    background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 11px}
  .group-label .hint{font-weight:500;color:var(--muted);font-size:13px}
  .grid{display:grid;gap:16px}
  .badges{grid-template-columns:repeat(4,1fr)}
  @media(max-width:900px){.badges{grid-template-columns:repeat(2,1fr)};.group-label{flex-direction:column;}}
  @media(max-width:520px){.badges{grid-template-columns:1fr}}

  .badge{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:22px 20px 18px;box-shadow:var(--shadow);overflow:hidden;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
  .badge:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
  .badge .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
    background:var(--brand-soft);color:var(--brand-deep)}
  .badge .ico svg{width:24px;height:24px}
  .badge h3{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
  .badge .desc{font-size:13px;color:var(--ink-soft);margin-top:6px;line-height:1.5}
  .badge .src{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);
    display:flex;align-items:center;justify-content:space-between;gap:8px}
  .verified{display:inline-flex;align-items:center;gap:5px;color:var(--brand);font-weight:600}
  .verified svg{width:14px;height:14px}
  .badge .ribbon{position:absolute;top:14px;right:-30px;transform:rotate(45deg);background:var(--brand-bright);
    color:#fff;font-size:10px;font-weight:700;letter-spacing:.05em;padding:3px 36px;text-transform:uppercase}

  /* ----- image logo slot (for GDPR / ISO etc.) ----- */
  .logo-slot{height:48px;display:flex;align-items:center;margin-bottom:14px}
  .logo-slot img{max-height:48px;max-width:120px;object-fit:contain;display:block}
  .logo-ph{display:none;align-items:center;gap:7px;height:46px;padding:0 12px;border:1.5px dashed var(--line-strong);
    border-radius:10px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
  .logo-ph svg{width:15px;height:15px}

  /* ---------- Documents ---------- */
  .docs-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px}
  .chip{font-family:inherit;cursor:pointer;border:1px solid var(--line-strong);background:var(--surface);
    color:var(--ink-soft);font-size:13.5px;font-weight:600;border-radius:999px;padding:8px 16px;transition:.18s}
  .chip:hover{border-color:var(--brand);color:var(--brand)}
  .chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
  .doc-list{display:flex;flex-direction:column;gap:10px}
  .doc{display:flex;align-items:center;gap:18px;background:var(--surface);border:1px solid var(--line);
    border-radius:13px;padding:16px 20px;text-decoration:none;color:inherit;box-shadow:var(--shadow);
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
  .doc:hover{transform:translateX(4px);border-color:var(--brand);box-shadow:var(--shadow-lg)}
  .doc .file{width:42px;height:42px;flex:none;border-radius:10px;background:var(--brand-soft);color:var(--brand-deep);
    display:grid;place-items:center}
  .doc .file svg{width:20px;height:20px}
  .doc .meta{flex:1;min-width:0;display:flex;flex-direction:column;}
  .doc .cat{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .doc .name{font-size:15.5px;font-weight:600;letter-spacing:-.01em;margin-top:2px}
  .doc .sub{font-size:12.5px;color:var(--muted);margin-top:1px}
  .doc .arrow{flex:none;color:var(--line-strong);transition:.16s}
  .doc:hover .arrow{color:var(--brand);transform:translateX(2px)}
  .doc .arrow svg{width:20px;height:20px;display:block}

  /* ---------- Trust note ---------- */
  .note{margin-top:30px;background:linear-gradient(180deg,#fff,#fcfbfe);border:1px solid var(--line);
    border-left:3px solid var(--brand-bright);border-radius:14px;padding:22px 24px;display:flex;gap:16px;box-shadow:var(--shadow)}
  .note svg{width:22px;height:22px;flex:none;color:var(--brand)}
  .note p{font-size:14px;color:var(--ink-soft);line-height:1.6}
  .note b{color:var(--ink)}

  /* ---------- FAQ ---------- */
  .faq{display:flex;flex-direction:column;gap:12px;max-width:840px}
  .qa{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;transition:border-color .2s}
  .qa.open{border-color:var(--line-strong)}
  .qa .q{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;
    display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;
    font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
  .qa .q .plus{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
    display:grid;place-items:center;transition:transform .25s ease,background .2s}
  .qa.open .q .plus{transform:rotate(45deg);background:var(--brand);color:#fff}
  .qa .q .plus svg{width:15px;height:15px}
  .qa .a{max-height:0;overflow:hidden;transition:max-height .3s ease}
  .qa .a p{padding:0 22px 22px;font-size:14.5px;color:var(--ink-soft);line-height:1.65}
  .qa .a a{color:var(--brand);font-weight:600;text-decoration:none}
  .qa .a a:hover{text-decoration:underline}

  /* ---------- Footer ---------- */
  footer{padding:46px 0 60px;border-top:1px solid var(--line);margin-top:60px}
  .foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
  .foot .brand b{font-size:16px}
  .foot small{color:var(--muted);font-size:13px}
  .foot-links{display:flex;gap:22px;flex-wrap:wrap}
  .foot-links a{color:var(--ink-soft);text-decoration:none;font-size:13.5px;font-weight:500}
  .foot-links a:hover{color:var(--brand)}

  /* ---------- Access-request modal ---------- */
  .modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
  .modal.open{display:flex}
  .modal-backdrop{position:absolute;inset:0;background:rgba(14,42,51,.45);backdrop-filter:blur(4px)}
  .modal-card{position:relative;width:100%;max-width:460px;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:28px;max-height:calc(100vh - 40px);overflow:auto;
    animation:rise .35s cubic-bezier(.2,.7,.2,1)}
  .modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
    background:var(--surface);color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:.16s}
  .modal-close:hover{border-color:var(--brand);color:var(--brand)}
  .modal-close svg{width:16px;height:16px}
  .modal h3{font-size:20px;font-weight:600;letter-spacing:-.01em;padding-right:30px}
  .modal .sub-text{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.55}
  .modal .doc-pill{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:var(--brand-soft);
    color:var(--brand-deep);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;max-width:100%}
  .modal .doc-pill svg{width:14px;height:14px;flex:none}
  .modal .doc-pill span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .field{margin-top:16px}
  .field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
  .field label .req{color:var(--brand)}
  .field input,.field textarea{width:100%;font-family:inherit;font-size:14.5px;color:var(--ink);background:var(--bg);
    border:1px solid var(--line-strong);border-radius:10px;padding:11px 14px;transition:border-color .16s,box-shadow .16s}
  .field textarea{resize:vertical;min-height:78px}
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(43,173,212,.15)}
  .field input.invalid,.field textarea.invalid{border-color:#e05656;box-shadow:0 0 0 3px rgba(224,86,86,.13)}
  .modal .btn-brand{background:var(--brand);color:#fff}
  .modal .submit-row{margin-top:22px}
  .modal .submit-row .btn{width:100%;justify-content:center}
  .modal .btn[disabled]{opacity:.6;cursor:default}
  .form-msg{font-size:13px;margin-top:12px;color:#c0392b;display:none}
  .form-msg.show{display:block}
  .modal-success{text-align:center;padding:8px 0}
  .modal-success .ok-mark{width:56px;height:56px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
    display:grid;place-items:center;margin:0 auto 16px}
  .modal-success .ok-mark svg{width:28px;height:28px}
  .modal-success h3{padding:0}
  .modal-success p{font-size:14px;color:var(--ink-soft);margin-top:8px;line-height:1.6}
  .modal-success .btn{margin-top:20px}