/*
Theme Name: Sixteen Digital
Theme URI: https://sixteen.solutions
Author: Sixteen Digital Solutions
Author URI: https://sixteen.solutions
Description: Custom theme for Sixteen Digital Solutions — WhatsApp AI assistants for South African small businesses.
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sixteen-digital
*/


:root{
    --sds-accent:#14C9A0;
    --sds-accent2:#7B5CFA;
    --sds-accent3:#FF6B5E;
    --sds-grad: linear-gradient(135deg,#7B5CFA 0%, #14C9A0 100%);
    --sds-dark:#12142B;
    --sds-dark2:#1B1E42;
    --sds-grey:#666B85;
    --sds-light:#F0EFFB;
    --sds-bg:#FAFAFE;
    --sds-white:#FFFFFF;
  }
  *,*::before,*::after{box-sizing:border-box;}
  *{margin:0;padding:0;}
  html{-webkit-font-smoothing:antialiased;}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--sds-dark);
    background:var(--sds-white);
    line-height:1.55;
  }
  a{text-decoration:none;color:inherit;}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
  .eyebrow{
    display:inline-block;font-size:13px;font-weight:800;letter-spacing:2px;
    color:var(--sds-accent2);text-transform:uppercase;margin-bottom:12px;
  }
  h1,h2,h3{font-weight:800;line-height:1.15;}
  h1{font-size:44px;}
  h2{font-size:32px;}
  h3{font-size:19px;}
  p{font-size:17px;color:#3a3a4a;}
  .grad-text{
    background:var(--sds-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .btn{
    display:inline-block;background:var(--sds-grad);color:var(--sds-white);font-weight:700;
    font-size:16px;padding:15px 30px;border-radius:50px;border:none;cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
    box-shadow:0 10px 24px -8px rgba(123,92,250,.5);
  }
  .btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -8px rgba(123,92,250,.6);}
  .btn-outline{
    display:inline-block;background:transparent;color:var(--sds-dark);font-weight:700;font-size:16px;
    padding:14px 28px;border-radius:50px;border:2px solid var(--sds-dark2);
  }
  .btn-outline:hover{background:var(--sds-dark2);color:var(--sds-white);}

  .site-header{
    position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);
    backdrop-filter:blur(8px);border-bottom:1px solid #ececf7;
  }
  .nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;}
  .logo{font-size:18px;font-weight:800;letter-spacing:.5px;}
  .logo span{color:var(--sds-accent2);}
  .logo-image{display:flex;align-items:center;}
  .logo-image .custom-logo-link{display:flex;align-items:center;}
  .logo-image img{max-height:40px;width:auto;display:block;}
  #sds-coming-soon .logo-image img{max-height:44px;width:auto;}
  .nav-links{display:flex;gap:28px;font-size:15px;font-weight:600;}
  .nav-links a{color:var(--sds-dark);opacity:.7;}
  .nav-links a:hover{opacity:1;color:var(--sds-accent2);}
  .nav-cta{display:flex;align-items:center;gap:16px;}
  .nav-cta .btn{padding:10px 22px;font-size:14px;}
  .menu-toggle{display:none;background:none;border:none;font-size:26px;cursor:pointer;}

  .hero{
    background:
      radial-gradient(circle at 85% 10%, rgba(20,201,160,.15), transparent 45%),
      radial-gradient(circle at 5% 30%, rgba(123,92,250,.14), transparent 45%),
      var(--sds-bg);
    padding:72px 0 64px;overflow:hidden;
  }
  .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
  .hero h1{margin-bottom:20px;}
  .hero p.lead{font-size:19px;color:var(--sds-grey);max-width:480px;margin-bottom:30px;}
  .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
  .hero-note{font-size:14px;color:var(--sds-grey);}

  .phone-stage{display:flex;justify-content:center;}
  .phone{
    width:280px;aspect-ratio:1080/2340;box-sizing:border-box;
    background:linear-gradient(160deg,#2b2e52,#14162b);border-radius:42px;padding:9px;
    position:relative;box-shadow:0 30px 60px -18px rgba(27,20,70,.45), inset 0 0 0 1.5px rgba(255,255,255,.06);
  }
  .phone .btn-power{position:absolute;right:-3px;top:26%;width:3px;height:56px;background:#0d0e1c;border-radius:2px;}
  .phone .btn-vol{position:absolute;right:-3px;top:15%;width:3px;height:40px;background:#0d0e1c;border-radius:2px;}
  .phone-screen{
    width:100%;height:100%;
    background:#ECEAF6;border-radius:32px;overflow:hidden;
    display:flex;flex-direction:column;position:relative;
  }
  .punch-hole{
    position:absolute;top:9px;left:50%;transform:translateX(-50%);width:11px;height:11px;border-radius:50%;
    background:#0a0a14;box-shadow:0 0 0 2px rgba(255,255,255,.05);z-index:5;
  }
  .status-bar{
    display:flex;justify-content:space-between;align-items:center;padding:16px 20px 6px;
    font-size:11.5px;font-weight:700;color:var(--sds-dark);
  }
  .status-icons{display:flex;align-items:center;gap:5px;}
  .status-icons svg{width:14px;height:14px;}
  .chat-header{
    display:flex;align-items:center;gap:10px;padding:8px 16px 12px;border-bottom:1px solid rgba(0,0,0,.06);
  }
  .chat-avatar{
    width:32px;height:32px;border-radius:50%;background:var(--sds-grad);
    display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;
  }
  .chat-name{font-size:13.5px;font-weight:700;color:var(--sds-dark);}
  .chat-status{font-size:10.5px;color:var(--sds-accent);font-weight:600;}
  .chat-body{
    flex:1;padding:14px 12px 16px;display:flex;flex-direction:column;gap:8px;
    justify-content:flex-end;overflow-y:hidden;
  }
  .bubble{
    max-width:82%;padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.4;
    opacity:0;transform:translateY(8px);animation:sds-pop .35s ease forwards;
  }
  @keyframes sds-pop{to{opacity:1;transform:translateY(0);}}
  .bubble.in{background:var(--sds-white);align-self:flex-start;border-bottom-left-radius:4px;box-shadow:0 1px 2px rgba(20,20,40,.06);}
  .bubble.out{background:linear-gradient(135deg,#DFFBF3,#E4F8E0);align-self:flex-end;border-bottom-right-radius:4px;}
  .bubble .time{display:flex;align-items:center;gap:3px;font-size:9.5px;color:#96998f;margin-top:4px;justify-content:flex-end;}
  .tick{display:inline-flex;align-items:center;color:#8d95a0;transition:color .25s ease;}
  .tick svg{display:block;}
  .tick.seen{color:#34B7F1;}
  .typing-bubble{
    align-self:flex-start;background:var(--sds-white);border-radius:14px;border-bottom-left-radius:4px;
    padding:11px 15px;display:flex;gap:4px;box-shadow:0 1px 2px rgba(20,20,40,.06);
    opacity:0;transform:translateY(8px);animation:sds-pop .3s ease forwards;
  }
  .typing-bubble span{width:6px;height:6px;border-radius:50%;background:#a9adc4;animation:sds-bounce 1s infinite;}
  .typing-bubble span:nth-child(2){animation-delay:.15s;}
  .typing-bubble span:nth-child(3){animation-delay:.3s;}
  @keyframes sds-bounce{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}

  section{padding:76px 0;}
  .section-head{max-width:640px;margin-bottom:44px;}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
  .bg-soft{background:var(--sds-light);}

  .stakes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;}
  .stakes .card{background:var(--sds-white);border:1px solid #ececf7;border-radius:14px;padding:26px;transition:transform .15s ease, box-shadow .15s ease;}
  .stakes .card:hover{transform:translateY(-3px);box-shadow:0 16px 32px -16px rgba(27,20,70,.2);}
  .stakes .card .num{font-size:13px;font-weight:800;color:var(--sds-accent2);letter-spacing:1px;margin-bottom:10px;display:block;}
  .stakes .card p{font-size:15.5px;color:var(--sds-dark);}

  .stack{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:16px;}
  .stack .card{padding:30px 24px;border-radius:16px;background:var(--sds-white);border:1px solid #ececf7;transition:transform .15s ease, box-shadow .15s ease;}
  .stack .card:hover{transform:translateY(-3px);box-shadow:0 20px 36px -18px rgba(27,20,70,.22);}
  .stack .icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
  .stack .icon.i1{background:linear-gradient(135deg,#14C9A0,#0FA582);}
  .stack .icon.i2{background:linear-gradient(135deg,#7B5CFA,#5B3FE0);}
  .stack .icon.i3{background:linear-gradient(135deg,#FF6B5E,#7B5CFA);}
  .stack .icon svg{width:24px;height:24px;stroke:var(--sds-white);}
  .stack h3{margin-bottom:10px;}
  .stack p{font-size:15.5px;}

  .plan-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;position:relative;}
  .plan-steps::before{content:"";position:absolute;top:26px;left:8%;right:8%;height:2px;background:var(--sds-light);z-index:0;}
  .plan-step{position:relative;z-index:1;text-align:center;padding:0 18px;}
  .plan-step .circle{
    width:54px;height:54px;border-radius:50%;background:var(--sds-grad);color:var(--sds-white);
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;
    margin:0 auto 18px;box-shadow:0 10px 20px -8px rgba(123,92,250,.45);
  }
  .plan-step h3{margin-bottom:8px;font-size:17px;}
  .plan-step p{font-size:14.5px;color:var(--sds-grey);}
  .price-line{margin-top:44px;text-align:center;background:var(--sds-light);border:1px solid #e8e6fa;border-radius:14px;padding:22px 24px;}
  .price-line strong{color:var(--sds-accent2);}
  .plan-cta{text-align:center;margin-top:32px;}

  .guide-strip{background:linear-gradient(120deg,var(--sds-dark) 0%, var(--sds-dark2) 100%);color:var(--sds-white);padding:40px 0;}
  .guide-strip .wrap{display:flex;gap:36px;flex-wrap:wrap;align-items:center;justify-content:space-between;}
  .guide-strip .item{flex:1;min-width:220px;}
  .guide-strip .item .label{color:var(--sds-accent);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;display:block;}
  .guide-strip .item p{color:#c7c9e0;font-size:14.5px;}

  .faq-list{margin-top:30px;border-top:1px solid #ececf7;}
  .faq-item{border-bottom:1px solid #ececf7;}
  .faq-q{
    width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:22px 4px;
    display:flex;justify-content:space-between;align-items:center;gap:16px;
    font-size:16.5px;font-weight:700;color:var(--sds-dark);
  }
  .faq-q .plus{font-size:22px;color:var(--sds-accent2);transition:transform .2s ease;flex-shrink:0;}
  .faq-item.open .faq-q .plus{transform:rotate(45deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
  .faq-a p{padding:0 4px 22px;font-size:15.5px;color:var(--sds-grey);max-width:680px;}

  .final-cta{background:var(--sds-grad);color:var(--sds-white);text-align:center;padding:80px 0;}
  .final-cta h2{color:var(--sds-white);margin-bottom:14px;}
  .final-cta p{color:rgba(255,255,255,.88);max-width:520px;margin:0 auto 30px;}
  .final-cta .btn{background:var(--sds-white);color:var(--sds-dark2);box-shadow:0 10px 24px -8px rgba(0,0,0,.25);}

  .site-footer{background:var(--sds-white);padding:32px 0;border-top:1px solid #ececf7;}
  .site-footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
  .site-footer p{font-size:13px;color:var(--sds-grey);}

  @media(max-width:860px){
    .hero-grid{grid-template-columns:1fr;}
    .phone-stage{margin-top:20px;}
    .nav-links{display:none;}
    .menu-toggle{display:block;}
    h1{font-size:32px;}
    h2{font-size:26px;}
    .stakes,.stack,.plan-steps{grid-template-columns:1fr;}
    .plan-steps::before{display:none;}
    .plan-step{margin-bottom:26px;}
  }

  /* Generic WordPress page/post content (Sample Page, Privacy Policy, blog posts, etc.) */
  .site-main{max-width:760px;margin:0 auto;padding:64px 24px 96px;}
  .site-main .page-title{font-size:38px;margin-bottom:28px;}
  .site-main .entry-content{font-size:17px;color:#3a3a4a;line-height:1.7;}
  .site-main .entry-content h2{font-size:26px;margin:36px 0 14px;}
  .site-main .entry-content h3{font-size:20px;margin:28px 0 12px;}
  .site-main .entry-content p{margin-bottom:18px;}
  .site-main .entry-content ul,.site-main .entry-content ol{margin:0 0 18px 24px;}
  .site-main .entry-content li{margin-bottom:8px;}
  .site-main .entry-content a{color:var(--sds-accent2);text-decoration:underline;}
  .site-main .entry-content img{max-width:100%;height:auto;border-radius:12px;margin:20px 0;}
  .site-main .entry-content blockquote{border-left:3px solid var(--sds-accent2);padding-left:18px;color:var(--sds-grey);margin:20px 0;}
  .post-meta{font-size:13px;color:var(--sds-grey);margin-bottom:28px;}