/*
Theme Name: AutoDropDS
Theme URI: https://autodropds.com
Author: AutoDropDS
Author URI: https://autodropds.com
Description: Official AutoDropDS website theme — AutoDS-inspired light design with the gold DS logo, pastel sections and pink call-to-actions. Includes front page, pricing template, blog and support chat widget.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: autodropds
*/

  :root{
    --ink:#101033; --navy:#0E0E33; --muted:#4A5570; --muted2:#8A94AC;
    --pink:#F9105A; --pink-d:#D90D4C; --blue:#2563EB; --gold:#C08A1E;
    --cream:#FDF8F2; --cream2:#FDF6EF; --beige:#FBF3E8; --mint:#EAF6F2; --mint2:#EDF7F4; --blush:#FBEDEA;
    --border:#ECE5D8; --tan:#E9D9BE;
    --grad:linear-gradient(92deg,#2563EB,#4F7DF9 60%,#7C3AED 120%);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Nunito',system-ui,-apple-system,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.55}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px}

  /* Buttons — AutoDS style: pink, rounded-rectangle */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:13px 28px;font-weight:800;font-size:15.5px;transition:.2s;border:1.5px solid transparent;cursor:pointer}
  .btn-p{background:var(--pink);color:#fff;box-shadow:0 10px 24px rgba(249,16,90,.32)}
  .btn-p:hover{background:var(--pink-d);transform:translateY(-2px)}
  .btn-lg{padding:16px 34px;font-size:17px}
  .btn-o{background:transparent;color:var(--ink);border-color:var(--ink);border-radius:999px;padding:9px 20px;font-size:14px}
  .btn-o:hover{border-color:var(--pink);color:var(--pink)}
  .micro{font-size:13.5px;color:var(--muted);font-weight:700}
  .micro i{font-style:normal;color:var(--pink);margin:0 5px}

  /* Header */
  header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #F0EAE0}
  .nav{display:flex;align-items:center;gap:30px;padding:15px 0}
  .logo{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:900;letter-spacing:-.3px}
  .logo .box{width:37px;height:37px;border-radius:10px;background:linear-gradient(135deg,#0E0E33,#24365E);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(14,14,51,.35)}
  .logo .ds{color:#DEB028}
  .nav nav{display:flex;gap:26px;margin-left:6px}
  .nav nav a{color:var(--ink);font-size:15px;font-weight:700}
  .nav nav a:hover{color:var(--pink)}
  .sp{flex:1}
  .login{font-weight:800;font-size:15px}
  .login:hover{color:var(--pink)}

  /* Hero */
  .hero{background:var(--cream);position:relative;overflow:hidden}
  .confetti{position:absolute;border-radius:99px;opacity:.85}
  .hero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:50px;padding:66px 0 74px;align-items:center;position:relative}
  .stars{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:800}
  .stars .st{background:#00B67A;color:#fff;border-radius:6px;padding:3px 9px;letter-spacing:2px;font-size:13px}
  .stars span{color:var(--muted)}
  h1{font-size:51px;line-height:1.09;letter-spacing:-1.2px;margin:18px 0 16px;font-weight:900;color:var(--navy)}
  h1 .hl{color:var(--blue)}
  .hero .sub{font-size:18.5px;color:var(--muted);max-width:520px;font-weight:600}
  .mailrow{display:flex;gap:10px;margin:26px 0 10px;max-width:520px}
  .mailrow input{flex:1;border:1.5px solid #E5DCCB;background:#fff;border-radius:10px;padding:14px 16px;font-size:15.5px;font-family:inherit;color:var(--ink)}
  .mailrow input:focus{outline:none;border-color:var(--pink)}
  .hero-note{margin-top:12px}
  .chip{display:inline-flex;align-items:center;gap:8px;margin-top:22px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700;color:var(--muted);box-shadow:0 4px 14px rgba(14,14,51,.06)}
  .chip b{color:var(--ink)}

  /* Hero visual */
  .visual{position:relative}
  .mock{background:#fff;border:1px solid var(--border);border-radius:22px;box-shadow:0 34px 80px rgba(14,14,51,.16);overflow:hidden}
  .mock-top{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--border);background:#FFFCF6}
  .mock-top i{width:11px;height:11px;border-radius:50%}
  .mock-top .u{margin-left:10px;font-size:12px;color:var(--muted2);background:var(--cream);padding:4px 12px;border-radius:7px;flex:1}
  .mock-main{padding:18px}
  .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
  .kpi{background:var(--cream);border:1px solid var(--border);border-radius:12px;padding:11px 12px}
  .kpi small{display:block;color:var(--muted2);font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;font-weight:800}
  .kpi b{font-size:17px}
  .kpi em{font-style:normal;color:#16A34A;font-size:11px;font-weight:800;margin-left:4px}
  .chart{background:var(--cream);border:1px solid var(--border);border-radius:12px;padding:14px;height:104px;display:flex;align-items:flex-end;gap:9px}
  .chart i{flex:1;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#4F7DF9,#2563EB)}
  .chart i:nth-child(3n){background:linear-gradient(180deg,#FB7CA6,var(--pink))}
  .float{position:absolute;background:#fff;border-radius:14px;box-shadow:0 18px 40px rgba(14,14,51,.18);padding:11px 15px;font-size:13px;font-weight:800;display:flex;align-items:center;gap:9px}
  .float small{display:block;color:var(--muted2);font-weight:700;font-size:11px}
  .float .ic{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px}
  .f1{top:-16px;right:22px}
  .f2{bottom:36px;left:-24px}
  .f3{bottom:-16px;right:36px}


  /* V7 fix: hero rebuild — big chart behind, arch photo front, ripple icon bubbles */
  .visual{position:relative;padding-bottom:30px;min-height:520px}
  .bigchart{position:absolute;left:0;top:16px;width:80%;background:#fff;border-radius:20px;box-shadow:0 26px 60px rgba(14,14,51,.16);padding:20px;transform:rotate(-2deg);z-index:1;border-top:3px solid #DEB028}
  .bc-top{display:flex;justify-content:space-between;align-items:center;font-weight:900;color:var(--navy);font-size:15px}
  .bc-pill{background:#E9F9EE;color:#16A34A;font-size:12px;padding:4px 11px;border-radius:99px;font-weight:800}
  .bc-bars{display:flex;align-items:flex-end;gap:8px;height:150px;margin:18px 0 14px}
  .bc-bars i{flex:1;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#4F7DF9,#2563EB)}
  .bc-bars i:nth-child(3n){background:linear-gradient(180deg,#FB7CA6,var(--pink))}
  .bc-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border-top:1px solid #F0EAE0;padding-top:13px}
  .bc-kpis small{display:block;color:var(--muted2);font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;font-weight:800}
  .bc-kpis b{font-size:17px;color:var(--navy)}
  .flight{position:absolute;top:-10px;left:0;width:100%;height:130px;z-index:1;pointer-events:none}
  .hero-photo{position:relative;z-index:2;width:55%;margin-left:auto;height:420px;object-fit:cover;object-position:top center;border-radius:210px 210px 18px 18px;border:2px solid rgba(222,176,40,.65);box-shadow:0 30px 70px rgba(14,14,51,.20)}
  .orb{position:absolute;z-index:4;border-radius:50%;background:#fff;border:1px solid #EBDCBE;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(14,14,51,.10);animation:floaty 6s ease-in-out infinite,ripple 3.2s linear infinite}
  .bub1{width:56px;height:56px;top:128px;left:4px}
  .bub2{width:50px;height:50px;top:2px;right:128px;animation-delay:.8s,0s}
  .bub3{width:48px;height:48px;bottom:128px;left:-10px;animation-delay:1.6s,.6s}
  .bub4{width:44px;height:44px;top:178px;right:-8px;animation-delay:2.2s,1.1s}
  .bub5{width:52px;height:52px;bottom:2px;left:190px;animation-delay:.4s,1.7s}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  @keyframes ripple{0%{box-shadow:0 0 0 0 rgba(222,176,40,.40)}100%{box-shadow:0 0 0 16px rgba(222,176,40,0)}}
  .f1{top:208px;left:-12px}
  .f2{bottom:70px;left:30px;right:auto}
  .f3{bottom:-14px;right:34px}
  @media(max-width:960px){
    .visual{min-height:0;padding-bottom:0}
    .bigchart{position:relative;width:100%;transform:none;margin-bottom:18px}
    .hero-photo{width:100%;height:310px}
    .orb,.flight{display:none}
    .float{position:static;margin-top:10px}
  }

  /* Stats */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:46px 0;text-align:center}
  .stat b{font-size:42px;letter-spacing:-1px;color:var(--navy);font-weight:900}
  .stat span{display:block;color:var(--muted);font-size:15.5px;font-weight:600;margin-top:2px}

  section{padding:80px 0}
  .sec-head{max-width:700px;margin:0 auto 46px;text-align:center}
  .sec-head h2{font-size:37px;letter-spacing:-.9px;line-height:1.16;font-weight:900;color:var(--navy)}
  .sec-head p{color:var(--muted);font-size:17px;margin-top:10px;font-weight:600}

  /* Steps */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .step{border-radius:26px;padding:30px}
  .step.s1{background:var(--beige)} .step.s2{background:var(--mint)} .step.s3{background:var(--blush)}
  .step .n{display:inline-block;background:#fff;font-weight:900;font-size:13px;padding:6px 14px;border-radius:999px;box-shadow:0 3px 8px rgba(14,14,51,.08)}
  .step.s1 .n{color:#B07D2B}.step.s2 .n{color:#0E7A5F}.step.s3 .n{color:#C2485A}
  .step h3{margin:16px 0 8px;font-size:21px;font-weight:900;color:var(--navy)}
  .step p{color:var(--muted);font-size:15.5px;font-weight:600}
  .shot{margin-top:20px;background:#fff;border-radius:16px;box-shadow:0 12px 28px rgba(14,14,51,.10);padding:14px}
  .shot .bar{height:9px;border-radius:99px;background:#EFEAE0;margin-bottom:9px}
  .shot .bar.b2{width:64%}.shot .bar.b3{width:82%;background:#E4EDFF}
  .callout{display:inline-block;margin-top:10px;font-size:12px;font-weight:800;color:#fff;padding:5px 12px;border-radius:999px}
  .s1 .callout{background:#D9A441}.s2 .callout{background:#2FA98A}.s3 .callout{background:#DB7185}
  .steps-cta{text-align:center;margin-top:38px}


  /* Annotated app screenshots (AutoDS step style) */
  .step{position:relative}
  .shot-real{margin-top:22px;background:#fff;border-radius:18px;box-shadow:0 16px 36px rgba(14,14,51,.13);overflow:hidden;position:relative;text-align:left}
  .ui{display:grid;grid-template-columns:86px 1fr;min-height:218px}
  .sb{background:#0B1526;padding:12px 9px;display:flex;flex-direction:column;gap:3px}
  .sb-logo{color:#fff;font-weight:900;font-size:10.5px;margin-bottom:9px}
  .sb-logo em{font-style:normal;color:#DEB028}
  .sb-i{font-size:9.5px;color:#93A4C3;padding:5px 7px;border-radius:6px;font-weight:700}
  .sb-i.on{background:rgba(37,99,235,.35);color:#fff}
  .mn{padding:13px 13px 15px}
  .mn-h{font-size:13.5px;font-weight:900;color:var(--navy);margin-bottom:9px}
  .search{display:flex;gap:6px;margin-bottom:11px}
  .search span{flex:1;background:#F4F1EA;border-radius:7px;font-size:9.5px;color:#9AA3B5;padding:6px 9px;font-weight:600}
  .search b{background:#D9A441;color:#fff;font-size:9.5px;border-radius:7px;padding:6px 11px}
  .s2 .search b{background:#2FA98A}.s3 .search b{background:#DB7185}
  .prow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .pc{border:1px solid #EFEAE0;border-radius:10px;padding:8px}
  .pc .th{height:44px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:6px}
  .pc h5{font-size:9px;line-height:1.3;color:var(--ink);font-weight:800;min-height:23px}
  .pc .pr{font-size:9.5px;font-weight:900;color:var(--navy)}
  .pc .imp{margin-top:5px;display:block;text-align:center;background:var(--pink);color:#fff;font-size:8.5px;font-weight:800;border-radius:6px;padding:4px 0}
  .spanel{position:absolute;top:44px;right:10px;width:118px;background:#fff;border-radius:12px;box-shadow:0 12px 26px rgba(14,14,51,.16);padding:10px 11px}
  .spanel .r{display:flex;justify-content:space-between;font-size:9px;font-weight:700;color:var(--muted);margin-bottom:6px}
  .spanel .r b{color:var(--ink);font-size:9.5px}
  .scorebar{height:6px;border-radius:99px;background:linear-gradient(90deg,#EF4444,#F5C15C,#22C55E);position:relative;margin-top:3px}
  .scorebar i{position:absolute;right:8px;top:-3px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid #22C55E}
  .gal{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:9px}
  .gal i{height:30px;border-radius:7px;display:block}
  .fld{background:#F4F1EA;border-radius:7px;font-size:9.5px;color:#7C8698;padding:7px 9px;font-weight:600;margin-bottom:7px}
  .fld b{color:var(--ink)}
  .orow{display:flex;align-items:center;gap:8px;border-bottom:1px solid #F1EDE3;padding:7px 2px;font-size:9.5px;font-weight:700}
  .orow .th{width:20px;height:20px;border-radius:6px;flex:0 0 20px;display:flex;align-items:center;justify-content:center;font-size:11px}
  .orow .pill{margin-left:auto;font-size:8.5px;font-weight:900;padding:3px 9px;border-radius:99px;color:#fff}
  .salescard{position:absolute;bottom:12px;right:10px;width:118px;background:#fff;border-radius:12px;box-shadow:0 12px 26px rgba(14,14,51,.16);padding:10px 11px}
  .salescard small{font-size:8.5px;color:var(--muted2);font-weight:800;text-transform:uppercase;letter-spacing:.5px}
  .salescard b{display:block;font-size:15px;color:var(--navy)}
  .bars{display:flex;align-items:flex-end;gap:3px;height:30px;margin-top:5px}
  .bars i{flex:1;background:#22C55E;border-radius:2px 2px 0 0}
  .co{position:absolute;z-index:5;font-size:12.5px;font-weight:900;color:#fff;padding:9px 15px;border-radius:12px;box-shadow:0 10px 22px rgba(14,14,51,.20);max-width:180px;line-height:1.3}
  .arr{position:absolute;z-index:4;pointer-events:none}
  @media(max-width:960px){.co,.arr{display:none}.spanel,.salescard{position:static;width:auto;margin:10px}.ui{grid-template-columns:70px 1fr}}


  /* V5: Google button, stacked showcases, testimonials carousel */
  .ordiv{display:flex;align-items:center;gap:12px;max-width:520px;margin:16px 0 12px;color:var(--muted2);font-size:13px;font-weight:800}
  .ordiv::before,.ordiv::after{content:"";flex:1;height:1px;background:#E7DFCE}
  .gbtn{display:flex;align-items:center;justify-content:center;gap:11px;max-width:520px;width:100%;background:#fff;border:1.5px solid #E5DCCB;border-radius:10px;padding:13px;font-weight:800;font-size:15.5px;color:var(--ink);box-shadow:0 4px 12px rgba(14,14,51,.06)}
  .gbtn:hover{border-color:var(--blue)}
  .gbtn .last{background:#E3EEFF;color:#1D4FD0;font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px}
  .showband{padding:64px 0}
  .showband.b1{background:var(--beige)} .showband.b2{background:var(--mint)} .showband.b3{background:var(--blush)}
  .show{display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center}
  .show.flip .txt{order:2}
  .show .txt .n{display:inline-block;background:#fff;font-weight:900;font-size:13px;padding:6px 14px;border-radius:999px;box-shadow:0 3px 8px rgba(14,14,51,.08)}
  .b1 .txt .n{color:#B07D2B}.b2 .txt .n{color:#0E7A5F}.b3 .txt .n{color:#C2485A}
  .show .txt h3{font-size:32px;font-weight:900;color:var(--navy);letter-spacing:-.6px;margin:16px 0 10px;line-height:1.15}
  .show .txt p{color:var(--muted);font-size:16.5px;font-weight:600}
  .show .txt ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px}
  .show .txt li{display:flex;gap:10px;font-weight:700;color:var(--ink);font-size:15.5px}
  .show .txt li::before{content:"✓";width:23px;height:23px;flex:0 0 23px;border-radius:50%;background:#fff;color:#16A34A;font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(14,14,51,.10)}
  .show .vis{position:relative}
  .shot-real.big .ui{grid-template-columns:104px 1fr;min-height:308px}
  .shot-real.big .sb{padding:15px 11px}
  .shot-real.big .sb-logo{font-size:12px}
  .shot-real.big .sb-i{font-size:11px;padding:7px 8px}
  .shot-real.big .mn{padding:17px}
  .shot-real.big .mn-h{font-size:16px}
  .shot-real.big .search span,.shot-real.big .search b{font-size:11px;padding:8px 11px}
  .shot-real.big .pc .th{height:58px;font-size:24px}
  .shot-real.big .pc h5{font-size:11px;min-height:29px}
  .shot-real.big .pc .pr{font-size:11.5px}
  .shot-real.big .pc .imp{font-size:10px;padding:6px 0}
  .shot-real.big .spanel{width:152px;top:52px;padding:13px}
  .shot-real.big .spanel .r{font-size:11px}.shot-real.big .spanel .r b{font-size:11.5px}
  .shot-real.big .fld{font-size:11px;padding:9px 11px}
  .shot-real.big .gal i{height:40px}
  .shot-real.big .orow{font-size:11.5px;padding:10px 2px}
  .shot-real.big .orow .th{width:26px;height:26px;flex-basis:26px;font-size:13px}
  .shot-real.big .orow .pill{font-size:10px;padding:4px 11px}
  .shot-real.big .salescard{width:150px;padding:13px}
  .shot-real.big .salescard b{font-size:19px}
  .shot-real.big .bars{height:38px}
  .show-cta{text-align:center;padding:52px 0 8px}
  /* Testimonials */
  .reviews{background:#fff}
  .car{position:relative;max-width:860px;margin:0 auto}
  .car-view{overflow:hidden;border-radius:26px}
  .car-track{display:flex;transition:transform .65s cubic-bezier(.22,.9,.3,1)}
  .tcard{min-width:100%;padding:6px}
  .tcard-in{background:var(--cream);border:1px solid var(--border);border-radius:24px;padding:42px 46px;text-align:center}
  .avatar{width:92px;height:92px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:900;color:#fff;box-shadow:0 12px 26px rgba(14,14,51,.18);border:4px solid #fff}
  .tcard h4{font-size:20px;font-weight:900;color:var(--navy)}
  .tcard h4 .vf{color:var(--blue);font-size:17px}
  .handle{display:inline-block;margin-top:7px;background:var(--blush);color:#C2485A;font-size:13px;font-weight:800;padding:5px 14px;border-radius:999px}
  .tstars{color:#F5A623;font-size:19px;letter-spacing:3px;margin:16px 0 12px}
  .tcard blockquote{font-size:19px;line-height:1.55;color:var(--ink);font-weight:600;max-width:620px;margin:0 auto}
  .car-btn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid var(--border);background:#fff;font-size:24px;font-weight:900;color:var(--navy);cursor:pointer;box-shadow:0 8px 20px rgba(14,14,51,.12);z-index:3}
  .car-btn:hover{color:var(--pink);border-color:var(--pink)}
  .car-btn.prev{left:-66px}.car-btn.next{right:-66px}
  .car-dots{display:flex;gap:8px;justify-content:center;margin-top:22px}
  .car-dots i{width:9px;height:9px;border-radius:99px;background:#E3DCCB;cursor:pointer;transition:.3s}
  .car-dots i.on{width:26px;background:var(--pink)}
  @media(max-width:1100px){.car-btn.prev{left:-8px}.car-btn.next{right:-8px}}
  @media(max-width:960px){.show{grid-template-columns:1fr}.show.flip .txt{order:0}.tcard-in{padding:32px 22px}.tcard blockquote{font-size:16.5px}}


  /* V6: real human photos */
  .hero-photo{width:86%;margin-left:auto;display:block;height:330px;object-fit:cover;border-radius:22px;box-shadow:0 30px 70px rgba(14,14,51,.20)}
  .visual{padding-bottom:86px}
  .visual .mock{position:absolute;left:0;bottom:0;width:76%}
  .avatar{overflow:hidden;padding:0;background:#E9E2D2}
  .avatar img{width:100%;height:100%;object-fit:cover;display:block}
  .chat-top img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 3px 8px rgba(14,14,51,.15)}
  @media(max-width:960px){.visual .mock{position:static;width:100%;margin-top:14px}.visual{padding-bottom:0}.hero-photo{width:100%;height:250px}}

  /* Growth */
  .growth{background:var(--cream2)}
  .grow-in{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
  .grow-in h2{font-size:35px;font-weight:900;color:var(--navy);letter-spacing:-.8px;line-height:1.18}
  .mini{display:flex;gap:15px;margin-top:24px}
  .mini .ic{width:46px;height:46px;flex:0 0 46px;border-radius:12px;background:var(--beige);border:1px solid var(--tan);display:flex;align-items:center;justify-content:center;font-size:20px}
  .mini h4{font-size:16.5px;font-weight:900}
  .mini p{color:var(--muted);font-size:14.5px;font-weight:600}
  .chat{background:#fff;border-radius:22px;box-shadow:0 26px 60px rgba(14,14,51,.13);overflow:hidden}
  .chat-top{background:var(--beige);padding:15px 20px;font-weight:900;display:flex;align-items:center;gap:10px}
  .chat-top i{width:10px;height:10px;border-radius:50%;background:#22C55E}
  .chat-body{padding:20px;display:flex;flex-direction:column;gap:11px}
  .bub{max-width:82%;padding:11px 15px;border-radius:16px;font-size:14px;font-weight:600}
  .bub.a{background:var(--cream);border:1px solid var(--border);border-bottom-left-radius:4px}
  .bub.u{background:var(--beige);align-self:flex-end;border-bottom-right-radius:4px}

  /* Suppliers */
  .hub{text-align:center;margin-bottom:30px}
  .hub .core{display:inline-flex;width:86px;height:86px;border-radius:22px;background:var(--navy);align-items:center;justify-content:center;box-shadow:0 18px 38px rgba(14,14,51,.3)}
  .sup-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .sup{background:#fff;border-radius:14px;padding:17px;text-align:center;font-weight:800;font-size:15.5px;box-shadow:0 6px 18px rgba(14,14,51,.07)}
  .sup small{display:block;font-weight:700;color:var(--muted2);font-size:12.5px;margin-top:3px}
  .sup .live{color:#16A34A}.sup .soon{color:#B45309}
  .more{display:block;text-align:center;margin-top:22px;color:var(--gold);font-weight:800;text-decoration:underline;font-size:15px}

  /* Navy banner */
  .banner{background:var(--navy);border-radius:28px;padding:60px 40px;text-align:center;color:#fff;position:relative;overflow:hidden}
  .banner h2{font-size:36px;font-weight:900;letter-spacing:-.7px;max-width:720px;margin:0 auto 14px;line-height:1.2}
  .banner p{color:#B9C2DE;font-size:16.5px;margin-bottom:26px;font-weight:600}
  .banner .micro{color:#8E99BC}

  /* Feature / support cards */
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .card{border-radius:24px;padding:30px}
  .card.c1{background:var(--cream)} .card.c2{background:var(--mint)} .card.c3{background:var(--blush)}
  .card.c4{background:var(--beige)} .card.c5{background:var(--mint2)} .card.c6{background:var(--cream2)}
  .card .ic{width:52px;height:52px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px;box-shadow:0 5px 12px rgba(14,14,51,.08)}
  .card h3{font-size:19px;font-weight:900;color:var(--navy);margin-bottom:8px}
  .card p{color:var(--muted);font-size:15.5px;font-weight:600;margin-bottom:16px}

  /* Pricing */
  .pricing-sec{background:var(--cream)}
  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
  .plan{background:#fff;border:1px solid var(--border);border-radius:22px;padding:34px 30px;display:flex;flex-direction:column;position:relative;box-shadow:0 10px 30px rgba(14,14,51,.05)}
  .plan.pop{border:2px solid var(--pink);box-shadow:0 26px 55px rgba(249,16,90,.16)}
  .plan .badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--pink);color:#fff;font-size:12.5px;font-weight:900;padding:6px 16px;border-radius:999px;white-space:nowrap}
  .plan h3{font-size:20px;font-weight:900}
  .plan .for{color:var(--muted);font-size:14px;margin-top:3px;font-weight:600}
  .price{display:flex;align-items:baseline;gap:5px;margin:22px 0 4px}
  .price b{font-size:46px;letter-spacing:-1.5px;font-weight:900;color:var(--navy)}
  .price span{color:var(--muted);font-weight:700}
  .plan ul{list-style:none;margin:20px 0 28px;display:flex;flex-direction:column;gap:11px;flex:1}
  .plan li{color:var(--muted);font-size:15px;display:flex;gap:10px;font-weight:600}
  .plan li::before{content:"✓";color:#16A34A;font-weight:900}
  .plan li b{color:var(--ink)}

  /* FAQ */
  .faq-sec{background:var(--mint2)}
  .faq{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1000px;margin:0 auto}
  .qa{background:#fff;border-radius:16px;padding:20px 24px;display:flex;gap:12px;align-items:flex-start}
  .qa h4{font-size:16px;font-weight:900}
  .qa p{color:var(--muted);font-size:14.5px;font-weight:600;margin-top:5px}
  .qa .chev{margin-left:auto;color:var(--gold);font-weight:900;font-size:20px}

  footer{padding:54px 0 36px;color:var(--muted2);font-size:14px;background:#fff}
  .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
  .foot h5{color:var(--ink);font-size:13px;letter-spacing:1.4px;margin-bottom:14px;font-weight:900}
  .foot a{display:block;color:var(--muted);font-weight:600;margin-bottom:9px;font-size:14.5px}
  .foot a:hover{color:var(--pink)}
  .fine{margin-top:30px;padding-top:20px;border-top:1px solid #F0EAE0;font-size:12.5px;display:flex;gap:20px;flex-wrap:wrap}
  .fine a{color:var(--gold);text-decoration:underline;font-weight:700}

  @media(max-width:960px){
    .hero-in,.grow-in{grid-template-columns:1fr;padding:46px 0 56px}
    h1{font-size:38px}
    .grid,.steps,.plans,.faq{grid-template-columns:1fr}
    .sup-grid{grid-template-columns:repeat(2,1fr)}
    .stats{grid-template-columns:1fr;gap:10px}
    .nav nav{display:none}
    .foot{grid-template-columns:1fr 1fr}
    .f2{left:0}.mailrow{flex-direction:column}
    .banner{padding:44px 22px}
  }

  /* bands as round-corner boxes */
  .showband{max-width:1180px;margin:28px auto;border-radius:28px;padding:58px 36px;box-shadow:0 20px 46px rgba(14,14,51,.08)}
  .showband .wrap{padding:0}
  @media(max-width:1240px){.showband{margin:28px 16px}}
  /* chart-only hero */
  .visual{min-height:470px;padding-bottom:20px}
  .bigchart{position:relative;left:auto;top:24px;width:96%;margin:0 auto;transform:rotate(-1deg)}
  @media(max-width:960px){.bigchart{width:100%;top:0}.showband{padding:40px 20px}}

  /* step boxes: deeper pastel BG + extra round corners */
  .showband{border-radius:44px;padding:64px 44px}
  .showband.b1{background:#FAECD7}
  .showband.b2{background:#DFF2EA}
  .showband.b3{background:#F9E3DC}
  @media(max-width:960px){.showband{border-radius:32px;padding:44px 22px}}

  /* footer logo: bolder, words never merge */
  footer .logo{font-weight:1000}
  footer .logo .ds{margin-left:2px}

  /* footer logo: bolder, words never merge */
  footer .logo{font-weight:1000}
  footer .logo .ds{margin-left:2px}

  /* ===== Generic pages / blog ===== */
  .pagehero{background:var(--cream);padding:64px 0 48px;text-align:center}
  .pagehero h1{font-size:42px;font-weight:1000;color:var(--navy);letter-spacing:-.5px}
  .pagehero p{color:var(--muted);font-size:18px;margin-top:10px}
  .prose{max-width:820px;margin:0 auto;padding:48px 24px 72px;font-size:17px;line-height:1.75;color:#3D4457}
  .prose h2,.prose h3{color:var(--navy);font-weight:1000;margin:30px 0 12px}
  .prose img{border-radius:16px;max-width:100%;height:auto}
  .postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .postcard{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 12px 30px rgba(14,14,51,.06)}
  .postcard img{width:100%;height:190px;object-fit:cover;display:block}
  .postcard .pc-in{padding:20px}
  .postcard h3{font-size:19px;font-weight:900;color:var(--navy);line-height:1.35}
  .postcard p{color:var(--muted);font-size:14.5px;margin-top:8px;line-height:1.6}
  .postcard .meta{font-size:12.5px;color:var(--muted2);font-weight:800;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
  @media(max-width:960px){.postgrid{grid-template-columns:1fr}}

  /* ===== Support chat widget ===== */
  #ads-chat-fab{position:fixed;right:22px;bottom:22px;z-index:90;width:58px;height:58px;border-radius:50%;border:0;background:var(--pink);color:#fff;font-size:25px;cursor:pointer;box-shadow:0 14px 34px rgba(249,16,90,.4);display:flex;align-items:center;justify-content:center}
  #ads-chat{position:fixed;right:22px;bottom:22px;z-index:91;width:360px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 40px);background:#fff;border-radius:20px;box-shadow:0 30px 80px rgba(14,14,51,.3);display:flex;flex-direction:column;overflow:hidden}
  #ads-chat[hidden]{display:none}
  .ads-chat-head{background:var(--navy);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px}
  .ads-chat-head b{font-size:15px;display:block}
  .ads-chat-head small{opacity:.75;font-size:12px}
  .ads-chat-av{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#DEB028,#B98F14);color:#0E0E33;font-weight:1000;display:flex;align-items:center;justify-content:center;font-size:14px}
  #ads-chat-x{margin-left:auto;background:transparent;border:0;color:#fff;font-size:16px;cursor:pointer}
  #ads-chat-msgs{flex:1;overflow-y:auto;padding:14px;background:#FDF8F2;display:flex;flex-direction:column;gap:8px}
  .ads-m{max-width:85%;padding:10px 13px;border-radius:15px;font-size:14px;line-height:1.55;background:#fff;border:1px solid #F0EAE0;color:#2A2F3F;align-self:flex-start;border-bottom-left-radius:4px}
  .ads-m.me{background:var(--pink);color:#fff;align-self:flex-end;border-bottom-left-radius:15px;border-bottom-right-radius:4px;border:0}
  #ads-chat-chips{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px 4px;background:#fff}
  #ads-chat-chips button{border:1.5px solid #F3C6D3;background:#FFF5F8;color:#C40E47;font-weight:800;font-size:12.5px;border-radius:999px;padding:6px 12px;cursor:pointer}
  #ads-chat-form{display:flex;gap:8px;padding:10px 12px 14px;background:#fff}
  #ads-chat-in{flex:1;border:1.5px solid var(--line);border-radius:999px;padding:11px 16px;font:inherit;font-size:14px;outline:none}
  #ads-chat-form button{width:44px;height:44px;border-radius:50%;border:0;background:var(--pink);color:#fff;font-size:16px;cursor:pointer}

  .ads-avwrap{position:relative;flex:0 0 38px;display:block}
  .ads-avwrap img{width:38px;height:38px;border-radius:50%;object-fit:cover;display:block}
  .ads-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#22C55E;border:2px solid var(--navy);animation:adspulse 2s infinite}
  @keyframes adspulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}100%{box-shadow:0 0 0 7px rgba(34,197,94,0)}}
