:root{
    --brand:#2C2B54;
    --brand-dark:#1f1e3d;
    --accent:#F2A949;
    --accent-dark:#c98a35;
    --warm:#FFF8EE;
    --ink:#1a1a1a;
    --muted:#6b6b78;
    --line:#e5e3dc;
    --white:#ffffff;
    --shadow:0 1px 3px rgba(44,43,84,.06),0 4px 12px rgba(44,43,84,.04);
    --radius:10px;
    --maxw:1200px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
    color:var(--ink);
    line-height:1.55;
    background:#fff;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block}
  a{color:var(--brand);text-decoration:none}
  a:hover{text-decoration:underline}
  h1,h2,h3,h4{color:var(--brand);line-height:1.2;margin:0 0 .5em;font-weight:700}
  h1{font-size:clamp(2rem,4.5vw,3.25rem);letter-spacing:-.02em}
  h2{font-size:clamp(1.5rem,3vw,2.25rem);letter-spacing:-.01em;margin-bottom:.6em}
  h3{font-size:1.15rem}
  p{margin:0 0 1em}
  .container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  section{padding:72px 0}
  .section-warm{background:var(--warm)}
  .section-tint{background:#fbf3e3}
  .eyebrow{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
  .stars{color:var(--accent);letter-spacing:1px;font-size:.95rem}

  /* CTA buttons */
  .btn{
    display:inline-block;
    padding:16px 28px;
    background:var(--brand);
    color:#fff;
    border-radius:var(--radius);
    font-weight:700;
    font-size:1.05rem;
    border:2px solid var(--brand);
    cursor:pointer;
    box-shadow:2px 3px 0 rgba(0,0,0,.22);
    transition:background .15s ease,transform .08s ease,box-shadow .08s ease;
  }
  .btn:hover{background:var(--brand-dark);color:#fff;text-decoration:none}
  .btn:active{transform:translate(2px,3px);box-shadow:0 0 0 rgba(0,0,0,0)}
  .btn-ghost{
    background:transparent;
    color:var(--brand);
    border:2px solid var(--brand);
    font-weight:600;
    padding:14px 26px;
    box-shadow:2px 3px 0 rgba(44,43,84,.22);
  }
  .btn-ghost:hover{background:var(--brand);color:#fff}
  .microcopy{display:block;margin-top:10px;color:var(--muted);font-size:.9rem}
  .cta-testimonial{margin-top:18px;font-size:.95rem;color:var(--muted)}
  .cta-testimonial em{color:var(--ink);font-style:italic}
  .hobson{margin-top:14px;font-style:italic;color:var(--muted)}
  .hobson a{color:var(--brand);font-weight:600;text-decoration:underline}

  /* SECTION 01: Header */
  .site-header{
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:6px 0;
  }
  .skip-link{
    position:absolute;
    left:-9999px;
    top:0;
    background:var(--brand);
    color:#fff;
    padding:10px 16px;
    border-radius:0 0 8px 0;
    font-weight:600;
    z-index:200;
  }
  .skip-link:focus{left:0;outline:2px solid var(--accent);outline-offset:2px}
  .header-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
  .nav-right{display:flex;align-items:center;gap:20px;justify-content:flex-end}
  .nav-utility{font-size:.85rem;color:var(--muted);font-weight:500;margin-left:4px}
  .nav-utility:hover{color:var(--brand);text-decoration:underline}
  .nav-trust{
    flex:0 1 auto;
    text-align:center;
    font-size:.82rem;
    font-style:italic;
    color:var(--muted);
    padding:0 12px;
    white-space:nowrap;
  }
  .nav-trust .stars{color:var(--accent);margin-right:6px;font-style:normal;letter-spacing:1px}
  .nav-trust .quote-text{display:inline}
  @media (max-width:1119px){.nav-trust .quote-text{display:none}}
  @media (max-width:767px){.nav-trust{display:none}}
  .logo img{height:72px;width:auto;display:block}
  .footer-logo{height:90px;width:auto;display:block;margin-bottom:18px;opacity:.95}
  .main-nav{display:flex;gap:20px;align-items:center}
  .main-nav a{
    color:var(--brand);
    font-weight:600;
    font-size:1rem;
    padding:6px 2px;
    border-bottom:2px solid transparent;
    transition:border-color .15s;
  }
  .main-nav a:hover{border-bottom-color:var(--accent);text-decoration:none}
  .main-nav a.nav-cta{
    background:var(--brand);
    color:#fff;
    padding:10px 18px;
    border-radius:8px;
    border-bottom:none;
    margin-left:8px;
    box-shadow:2px 3px 0 rgba(0,0,0,.22);
    transition:background .15s ease,transform .08s ease,box-shadow .08s ease;
  }
  .main-nav a.nav-cta:hover{background:var(--brand-dark);border-bottom:none}
  .main-nav a.nav-cta:active{transform:translate(2px,3px);box-shadow:0 0 0 rgba(0,0,0,0)}
  .nav-toggle{
    display:none;
    background:none;
    border:1px solid var(--line);
    padding:8px 12px;
    border-radius:8px;
    cursor:pointer;
    color:var(--brand);
    font-weight:600;
  }
  @media (max-width:900px){
    .header-row{grid-template-columns:auto auto}
    .nav-trust{display:none}
    .logo img{height:60px}
    .nav-toggle{display:block}
    .nav-right{position:relative}
    .main-nav{
      display:none;
      position:absolute;
      right:0;
      top:calc(100% + 8px);
      min-width:240px;
      background:#fff;
      flex-direction:column;
      align-items:flex-start;
      gap:0;
      padding:8px 0;
      border:1px solid var(--line);
      border-radius:8px;
      box-shadow:var(--shadow);
      z-index:50;
    }
    .main-nav.open{display:flex}
    .main-nav a{width:100%;padding:12px 16px;border-bottom:1px solid var(--line)}
    .main-nav a:last-child{border-bottom:none}
    .main-nav a.nav-cta{margin:6px 12px;width:auto}
  }
  @media (max-width:600px){
    .logo img{height:48px}
    .footer-logo{height:64px}
  }
  .header-proof{
    font-size:.9rem;
    color:var(--muted);
    font-style:italic;
  }
  .header-proof .stars{margin-right:6px}

  /* SECTION 02: Hero */
  .hero{padding:12px 0 56px;background:#fff}
  .hero-grid{display:grid;grid-template-columns:55% 45%;gap:48px;align-items:center}
  .hero h1{margin-bottom:.4em}
  .hero .sub{font-size:1.2rem;color:#3a3a48;margin-bottom:.7em}
  .hero .support{color:var(--muted);margin-bottom:1.4em}
  .reasons-why{list-style:none;padding:0;margin:0 0 28px}
  .reasons-why li{
    padding:8px 0;
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-size:1.02rem;
  }
  .reasons-why li::before{
    content:"✓";
    color:var(--accent-dark);
    font-weight:800;
    flex-shrink:0;
  }
  .hero-video{
    position:relative;
    background:var(--brand);
    border-radius:14px;
    aspect-ratio:16/10;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .hero-video::before{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(242,169,73,.15),rgba(44,43,84,.4));
  }
  .play-btn{
    position:relative;
    z-index:1;
    background:rgba(255,255,255,.18);
    border:2px solid #fff;
    color:#fff;
    padding:14px 24px;
    border-radius:50px;
    font-weight:600;
    cursor:pointer;
    backdrop-filter:blur(4px);
  }
  .play-btn::before{content:"▶  "}

  /* SECTION 03: Logo strip */
  .logo-strip{padding:40px 0}
  .logo-strip .caption{text-align:center;color:var(--muted);font-size:.95rem;margin-bottom:24px}
  .logos{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:32px;
    align-items:center;
  }
  .logo-item{
    text-align:center;
    color:#999;
    font-weight:600;
    font-size:1rem;
    padding:12px;
    filter:grayscale(1);
    opacity:.7;
    transition:all .2s;
  }
  .logo-item:hover{filter:grayscale(0);opacity:1;color:var(--brand)}
  .logo-item img{height:40px;width:auto;max-width:160px;object-fit:contain;vertical-align:middle;}
  .logo-item img.logo-lg{height:54px;}

  /* Cards generic */
  .grid{display:grid;gap:20px}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-5{grid-template-columns:repeat(5,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .card{
    background:#fff;
    padding:28px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    border:1px solid var(--line);
  }
  .card .icon{
    width:42px;height:42px;
    border-radius:8px;
    background:rgba(242,169,73,.15);
    color:var(--accent-dark);
    display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;
    margin-bottom:14px;
    font-weight:700;
  }
  .card h3{margin-bottom:8px}
  .card p{margin:0;color:#3a3a48}

  /* SECTION 04: Pain points */
  .pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .pain-grid .card:nth-child(4),
  .pain-grid .card:nth-child(5){grid-column:span 1}
  .pain-row-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:66%;margin:20px auto 0}

  /* SECTION 05: Before/After */
  .ba-card{padding:0;overflow:hidden}
  .ba-half{padding:24px 28px}
  .ba-before{background:#f4f4f0;color:var(--muted)}
  .ba-before .label{font-weight:700;color:#888;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
  .ba-after{background:#fff}
  .ba-after .label{font-weight:700;color:var(--brand);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
  .ba-card p{margin:0;font-size:1rem}

  /* SECTION 06: Benefits */
  .benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .benefit-grid .card{padding:24px}
  .benefit-grid h3{color:var(--brand);font-size:1.1rem}
  .cta-cluster{text-align:center;margin-top:40px}

  /* SECTION 07: Testimonials short */
  .tm-card{padding:24px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line)}
  .tm-card .stars{margin-bottom:10px;display:block}
  .tm-card blockquote{margin:0 0 12px;font-style:italic;color:#2a2a35;font-size:1.02rem;line-height:1.5}
  .tm-card .who{font-size:.9rem;color:var(--muted);font-weight:600}

  /* SECTION 09: How it works steps */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
  .step{text-align:center;padding:0 12px}
  .step-num{
    width:54px;height:54px;
    border-radius:50%;
    background:var(--brand);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-weight:800;
    font-size:1.4rem;
    margin:0 auto 16px;
  }
  .step h3{color:var(--brand);margin-bottom:6px}
  .step p{color:#3a3a48;font-size:.98rem}
  .pull-quote{
    text-align:center;
    font-style:italic;
    color:var(--muted);
    margin:36px auto 0;
    max-width:680px;
    font-size:1.05rem;
  }

  /* SECTION 09b: Results / proof (behaviour-change data) */
  .results-section{ background:var(--brand); color:var(--white); padding:64px 0; }
  .results-section h2{ color:var(--white); }
  .results-sub{ text-align:center; color:rgba(255,255,255,.8); margin:12px auto 0; max-width:640px; }
  .results-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:44px; }
  .result{ text-align:center; }
  .result-num{ font-size:32px; font-weight:900; color:var(--accent); letter-spacing:-0.02em; line-height:1.1; }
  .result p{ margin:10px 0 0; font-size:14px; color:rgba(255,255,255,.85); line-height:1.45; }
  @media (max-width:760px){ .results-grid{ grid-template-columns:repeat(2,1fr); gap:26px 20px; } }

  /* SECTION 10: Consequences */
  .consequence-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .consequence-grid .card{
    background:rgba(242,169,73,.06);
    border:1px solid rgba(242,169,73,.25);
  }
  .consequence-grid .card:nth-child(4),
  .consequence-grid .card:nth-child(5){
    grid-column:span 1;
  }
  .cons-row-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:66%;margin:20px auto 0}

  /* SECTION 11: Demo */
  .demo-section{background:var(--warm);padding:64px 0}
  .demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .demo-card{padding:24px;background:#fff;border-radius:var(--radius);border:1px solid var(--line)}
  .demo-card h3{font-size:1.05rem;margin-bottom:8px}

  /* SECTION 12: Comparison */
  .table-wrap{overflow-x:auto;margin-top:24px;border-radius:var(--radius);box-shadow:var(--shadow);background:#fff}
  table.compare{width:100%;border-collapse:collapse;min-width:680px;font-size:.97rem}
  table.compare th,table.compare td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
  table.compare th{background:#f7f5ef;font-weight:700;color:var(--brand);font-size:.95rem}
  table.compare td:first-child,table.compare th:first-child{position:sticky;left:0;background:inherit;font-weight:500}
  table.compare th.psy-col{background:rgba(44,43,84,.06);color:var(--brand)}
  table.compare td.psy-cell{background:rgba(44,43,84,.04);font-weight:600;color:var(--brand);text-align:center}
  table.compare td.tick{color:#2a8a3e;font-weight:800;text-align:center}
  table.compare td.cross{color:#b85454;font-weight:700;text-align:center}
  table.compare td.muted{color:var(--muted);text-align:center;font-style:italic}

  /* SECTION 14: About */
  .about-grid{display:grid;grid-template-columns:40% 60%;gap:40px;align-items:start;background:var(--warm);padding:48px;border-radius:var(--radius)}
  .about-photo{
    background:linear-gradient(135deg,var(--brand),#4a4878);
    aspect-ratio:1/1;
    border-radius:var(--radius);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:600;
    font-size:1.1rem;
    box-shadow:var(--shadow);
  }
  .authority{margin-top:20px;padding-left:0;list-style:none}
  .authority li{padding:8px 0;display:flex;gap:10px;align-items:flex-start;font-size:.97rem}
  .authority li::before{content:"●";color:var(--accent);flex-shrink:0;font-size:.7rem;padding-top:6px}

  /* SECTION 15: FAQ */
  .faq-wrap{max-width:820px;margin:0 auto}
  details.faq{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    margin-bottom:10px;
    padding:0;
  }
  details.faq[open]{box-shadow:var(--shadow)}
  details.faq summary{
    padding:18px 22px;
    font-weight:600;
    cursor:pointer;
    color:var(--brand);
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
  }
  details.faq summary::-webkit-details-marker{display:none}
  details.faq summary::after{
    content:"+";
    color:var(--brand);
    font-size:1.4rem;
    font-weight:400;
    flex-shrink:0;
  }
  details.faq[open] summary::after{content:"−"}
  details.faq .faq-body{padding:0 22px 20px;color:#3a3a48}
  details.faq .faq-body p{margin:0}

  /* SECTION 16: Badges */
  .badges{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:center;text-align:center}
  .badge img{height:54px;width:auto;max-width:100%;object-fit:contain;}
  .badge{
    padding:18px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    color:var(--brand);
    font-weight:600;
    font-size:.95rem;
    background:#fff;
  }
  .badges-caption{text-align:center;color:var(--muted);margin-top:24px;font-size:.95rem}

  /* SECTION 17: Footer */
  footer{background:var(--brand);color:#cbcad8;padding:56px 0 32px;font-size:.95rem}
  footer h4{color:#fff;margin-bottom:16px;font-size:1rem;text-transform:uppercase;letter-spacing:.08em}
  .footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px}
  footer ul{list-style:none;padding:0;margin:0}
  footer li{padding:6px 0}
  footer a{color:#cbcad8}
  footer a:hover{color:#fff}
  .newsletter{margin-top:8px;max-width:300px}
  .newsletter input{
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:10px 12px;
    border:1px solid #4a4878;
    background:#1f1e3d;
    color:#fff;
    border-radius:6px;
    font:inherit;
    margin-bottom:8px;
  }
  .newsletter input::placeholder{color:#8887a8}
  .newsletter button{
    display:block;
    width:100%;
    padding:10px 16px;
    background:var(--accent);
    color:var(--brand);
    border:none;
    border-radius:6px;
    font-weight:700;
    cursor:pointer;
    box-shadow:2px 3px 0 rgba(0,0,0,.38);
    transition:background .15s ease,transform .08s ease,box-shadow .08s ease;
  }
  .newsletter button:hover{background:var(--accent-dark)}
  .newsletter button:active{transform:translate(2px,3px);box-shadow:0 0 0 rgba(0,0,0,0)}
  .cf-turnstile{margin:0 0 8px}
  .newsletter-success{max-width:300px;padding:14px 16px;background:var(--accent);border-radius:6px;color:var(--brand);font-weight:700;font-size:1rem;line-height:1.45}
  .newsletter-success .tick{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--brand);color:var(--accent);font-size:.8rem;margin-right:8px;vertical-align:-4px}
  .newsletter-error{max-width:300px;margin-top:8px;padding:12px 14px;background:rgba(255,255,255,.08);border:1px solid #6b6982;border-radius:6px;color:#e6e5f0;font-size:.9rem;line-height:1.45}
  .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
  .footer-bottom{
    border-top:1px solid #4a4878;
    margin-top:32px;
    padding-top:20px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    font-size:.85rem;
  }
  .lang{color:#cbcad8}
  .lang a{margin:0 4px}

  /* Sticky CTA bar */
  .sticky-cta{
    position:fixed;
    top:0;left:0;right:0;
    background:var(--brand);
    color:#fff;
    padding:12px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    z-index:100;
    transform:translateY(-100%);
    transition:transform .3s ease;
    box-shadow:0 2px 12px rgba(0,0,0,.15);
  }
  .sticky-cta.visible{transform:translateY(0)}
  .sticky-cta .label{font-weight:500;font-size:.95rem}
  .sticky-cta a{
    background:var(--accent);
    color:var(--brand);
    padding:10px 22px;
    border-radius:8px;
    font-weight:700;
    white-space:nowrap;
    box-shadow:2px 3px 0 rgba(0,0,0,.38);
    transition:background .15s ease,transform .08s ease,box-shadow .08s ease;
  }
  .sticky-cta a:hover{background:var(--accent-dark);text-decoration:none}
  .sticky-cta a:active{transform:translate(2px,3px);box-shadow:0 0 0 rgba(0,0,0,0)}

  /* Responsive */
  @media (max-width:900px){
    section{padding:56px 0}
    .hero{padding:48px 0}
    .hero-grid{grid-template-columns:1fr;gap:32px}
    .grid-3,.pain-grid,.benefit-grid,.consequence-grid,.demo-grid,.steps{grid-template-columns:1fr 1fr;gap:16px}
    .pain-row-2,.cons-row-2{max-width:100%;grid-template-columns:1fr 1fr}
    .logos{grid-template-columns:repeat(3,1fr)}
    .footer-grid{grid-template-columns:1fr}
    .about-grid{grid-template-columns:1fr;padding:28px}
    .badges{grid-template-columns:repeat(2,1fr)}
    .header-proof{display:none}
  }
  @media (max-width:600px){
    section{padding:48px 0}
    .container{padding:0 18px}
    .grid-3,.grid-2,.pain-grid,.benefit-grid,.consequence-grid,.demo-grid,.steps,.pain-row-2,.cons-row-2{grid-template-columns:1fr}
    .logos{grid-template-columns:repeat(2,1fr)}
    .sticky-cta{flex-direction:column;align-items:stretch;padding:10px 16px}
    .sticky-cta .label{display:none}
    .sticky-cta a{text-align:center}
    h1{font-size:1.9rem}
    h2{font-size:1.5rem}
  }


  .about-sec .container{max-width:820px}
  .about-hero{padding:64px 0 36px}
  .about-hero .lede{font-size:1.18rem;color:var(--muted);margin-top:.4em}
  .values{padding:0;margin:0;list-style:none}
  .values li{margin:0 0 18px}
  .values strong{display:block;color:var(--brand);font-size:1.05rem;margin-bottom:3px}
  .proof{background:var(--brand)}
  .proof .container{max-width:820px}
  .proof h2,.proof p{color:#fff}
  .proof .stat{color:var(--accent);font-weight:700}
  .about-cta{margin-top:8px}
  .about-cred{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
  .about-cred .face{width:92px;height:92px;border-radius:50%;object-fit:cover;border:3px solid var(--accent);flex:0 0 auto}
  .cred-logos{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
  .cred-logos img{height:40px;width:auto;opacity:.85}