/*
Theme Name: DesignWithOth
Theme URI: https://designwithoth.shop
Author: Othmane Zouak
Author URI: https://designwithoth.shop
Description: Premium freelance design service landing page theme for DesignWithOth. High-converting WhatsApp-driven design built for entrepreneurs and growing brands.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: designwithoth
Tags: business, portfolio, one-column, custom-colors, custom-menu
*/


:root{
    --bg:#0b0b14;--bg2:#11111d;--card:#16172a;--card2:#1c1d33;
    --fg:#f5f5fa;--muted:#9ea0b8;--border:#26283f;
    --primary:#7c5cff;--primary-glow:#5aa9ff;--whatsapp:#25D366;--whatsapp-fg:#04210f;
    --grad-primary:linear-gradient(135deg,#7c5cff,#5aa9ff);
    --grad-hero:radial-gradient(circle at 20% 0%,rgba(124,92,255,.25),transparent 50%),radial-gradient(circle at 80% 30%,rgba(90,169,255,.18),transparent 50%);
    --grad-card:linear-gradient(180deg,#16172a,#11111d);
    --grad-best:linear-gradient(160deg,rgba(124,92,255,.25),rgba(90,169,255,.12));
    --shadow-glow:0 20px 60px -10px rgba(124,92,255,.55);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
  h1,h2,h3{font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.02em;margin:0}
  a{color:inherit;text-decoration:none}
  .container{max-width:1200px;margin:0 auto;padding:0 24px}
  .muted{color:var(--muted)}
  .gradient-text{background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}

  /* Header */
  header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(11,11,20,.7);border-bottom:1px solid rgba(38,40,63,.5)}
  .nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px}
  .logo{display:flex;align-items:center;gap:10px;font-weight:700}
  .logo-mark{height:36px;width:36px;border-radius:10px;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-glow);color:white;font-weight:800}
  .nav-links{display:none;gap:32px}
  .nav-links a{font-size:14px;color:var(--muted)}
  .nav-links a:hover{color:var(--fg)}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;border:none;transition:all .2s;text-decoration:none}
  .btn-wa{background:var(--whatsapp);color:var(--whatsapp-fg)}
  .btn-wa:hover{filter:brightness(1.1);transform:scale(1.05)}
  .btn-primary{background:var(--grad-primary);color:white;box-shadow:var(--shadow-glow);filter:brightness(1.1)}
  .btn-primary:hover{filter:brightness(1.25);transform:scale(1.05)}
  .btn-ghost{background:rgba(22,23,42,.5);border:1px solid var(--border);color:var(--fg)}
  .btn-ghost:hover{background:var(--card)}
  @media(min-width:768px){.nav-links{display:flex}.header-cta{display:inline-flex}}
  .header-cta{display:none}

  /* Hero */
  .hero{position:relative;overflow:hidden;padding:96px 0 128px;text-align:center}
  .hero::before{content:"";position:absolute;inset:0;background:var(--grad-hero);pointer-events:none}
  .hero-inner{position:relative;max-width:880px;margin:0 auto}
  .pill{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;border:1px solid rgba(38,40,63,.6);background:rgba(22,23,42,.5);font-size:12px;color:var(--muted);margin-bottom:32px}
  .dot{height:8px;width:8px;border-radius:50%;background:var(--whatsapp);animation:pulse 2s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
  .hero h1{font-size:clamp(40px,7vw,80px);font-weight:700;line-height:1.05;margin-bottom:24px}
  .hero p.lead{font-size:clamp(17px,2vw,21px);color:rgba(245,245,250,.8);max-width:640px;margin:0 auto 40px}
  .cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
  .guarantee{margin-top:20px;font-size:14px;color:rgba(245,245,250,.7)}
  .guarantee.sub{margin-top:8px;color:rgba(245,245,250,.6)}
  .badges{margin-top:64px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
  .badges span{padding:6px 14px;border-radius:999px;background:var(--card);border:1px solid rgba(38,40,63,.6);font-size:12px;color:var(--muted)}

  /* Sections */
  section{padding:80px 0}
  .eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.2em;color:var(--primary);font-weight:600;margin-bottom:16px;text-align:center}
  .section-title{font-size:clamp(28px,4vw,48px);font-weight:700;text-align:center;max-width:760px;margin:0 auto 16px}
  .section-sub{text-align:center;color:var(--muted);max-width:560px;margin:0 auto 56px}

  /* Trust stats */
  .stats{display:grid;gap:24px;grid-template-columns:1fr;max-width:880px;margin:0 auto}
  @media(min-width:768px){.stats{grid-template-columns:repeat(3,1fr)}}
  .stat{border-radius:18px;border:1px solid var(--border);background:var(--grad-card);padding:32px;text-align:center}
  .stat-num{font-size:40px;font-weight:700;background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}
  .stat-label{font-size:14px;color:rgba(245,245,250,.8)}

  /* What you get */
  .features{display:grid;gap:16px;grid-template-columns:1fr;max-width:720px;margin:0 auto}
  @media(min-width:768px){.features{grid-template-columns:1fr 1fr}}
  .feature{display:flex;align-items:center;gap:12px;border-radius:14px;border:1px solid var(--border);background:rgba(22,23,42,.5);padding:16px}
  .check{display:inline-flex;height:20px;width:20px;border-radius:50%;background:rgba(124,92,255,.15);color:var(--primary);align-items:center;justify-content:center;font-size:13px;flex-shrink:0}

  /* Packages */
  .packages{display:grid;gap:24px;grid-template-columns:1fr}
  @media(min-width:640px){.packages{grid-template-columns:1fr 1fr}}
  @media(min-width:1024px){.packages{grid-template-columns:repeat(3,1fr)}}
  @media(min-width:1280px){.packages{grid-template-columns:repeat(5,1fr)}}
  .pkg{position:relative;border-radius:20px;padding:24px;display:flex;flex-direction:column;border:1px solid var(--border);background:var(--grad-card);transition:all .25s}
  .pkg:hover{transform:translateY(-4px);border-color:rgba(124,92,255,.4)}
  .pkg.best{border-color:rgba(124,92,255,.7);background:var(--grad-best);box-shadow:0 0 80px -10px rgba(124,92,255,.7);outline:1px solid rgba(124,92,255,.4)}
  .pkg.best:hover{box-shadow:0 0 120px -10px rgba(124,92,255,.9);outline-color:rgba(124,92,255,.7)}
  .badge-best{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:4px 12px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
  .pkg-name{font-size:14px;color:var(--muted);margin-bottom:8px}
  .pkg-price{font-size:48px;font-weight:700;margin-bottom:4px}
  .pkg-tag{font-size:11px;color:var(--primary);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:20px}
  .pkg ul{list-style:none;padding:0;margin:0 0 28px;flex:1}
  .pkg li{display:flex;gap:8px;font-size:14px;padding:6px 0}
  .pkg li::before{content:"✓";color:var(--primary);font-weight:700}
  .btn-card{width:100%;justify-content:center;background:var(--grad-primary);color:white;filter:brightness(1.1)}
  .btn-card:hover{filter:brightness(1.25);box-shadow:var(--shadow-glow)}
  .pkg.best .btn-card{background:var(--fg);color:var(--bg)}
  .urgency{margin-top:12px;text-align:center;font-size:12px;color:var(--muted);font-weight:500}
  .pkg.best .urgency{color:var(--primary)}

  /* Why grid */
  .why{display:grid;gap:24px;grid-template-columns:1fr}
  @media(min-width:640px){.why{grid-template-columns:1fr 1fr}}
  @media(min-width:1024px){.why{grid-template-columns:repeat(4,1fr)}}
  .why-card{padding:24px;border-radius:18px;border:1px solid var(--border);background:var(--grad-card);transition:all .25s}
  .why-card:hover{border-color:rgba(124,92,255,.4)}
  .why-icon{height:44px;width:44px;border-radius:12px;background:rgba(124,92,255,.1);border:1px solid rgba(124,92,255,.3);display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:20px}
  .why-card h3{font-size:16px;font-weight:600;margin-bottom:8px;font-family:'Inter',sans-serif}
  .why-card p{font-size:14px;color:var(--muted);margin:0;line-height:1.6}

  /* Final CTA */
  .final-cta{position:relative;overflow:hidden;border-radius:28px;border:1px solid var(--border);background:var(--grad-card);padding:64px 32px;text-align:center}
  .final-cta::before{content:"";position:absolute;inset:0;background:var(--grad-hero);opacity:.6;pointer-events:none}
  .final-cta > *{position:relative}
  .final-cta .icon{font-size:36px;margin-bottom:24px}
  .final-cta h2{font-size:clamp(28px,4vw,48px);font-weight:700;margin-bottom:16px}
  .final-cta p{color:var(--muted);max-width:560px;margin:0 auto 40px}
  .meta{margin-top:32px;display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}

  /* Footer */
  footer{border-top:1px solid var(--border);padding:48px 0;text-align:center;color:var(--muted);font-size:14px}
  footer .links{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-bottom:16px}
  footer .links a:hover{color:var(--fg)}
  .trust-line{margin-top:12px;font-size:12px}

  /* Floating WhatsApp */
  .floating{position:fixed;bottom:24px;right:24px;z-index:100;display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:999px;background:var(--whatsapp);color:var(--whatsapp-fg);font-weight:700;box-shadow:0 15px 50px -5px rgba(37,211,102,.7);outline:2px solid rgba(37,211,102,.4);transition:all .25s;animation:float 2.5s ease-in-out infinite}
  .floating:hover{transform:scale(1.08);filter:brightness(1.1)}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  .floating .label{display:none}
  @media(min-width:640px){.floating .label{display:inline}}

/* ===== Policy Modal ===== */
.policy-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
.policy-modal.open{display:flex}
.policy-modal-backdrop{position:absolute;inset:0;background:rgba(5,8,20,.75);backdrop-filter:blur(6px)}
.policy-modal-card{position:relative;max-width:720px;width:100%;max-height:85vh;overflow-y:auto;background:#0f1320;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:36px 32px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);color:#e6e8ee}
.policy-modal-card h2{font-family:'Space Grotesk',sans-serif;font-size:1.8rem;margin:0 0 16px;background:linear-gradient(135deg,#7c5cff,#25D366);-webkit-background-clip:text;background-clip:text;color:transparent}
.policy-modal-card h3{font-size:1.1rem;margin:22px 0 8px;color:#fff}
.policy-modal-card p,.policy-modal-card li{color:#b8bcc8;line-height:1.65;font-size:.95rem}
.policy-modal-card ul{padding-left:20px;margin:8px 0}
.policy-modal-card a{color:#7c5cff}
.policy-modal-card strong{color:#fff}
.policy-modal-close{position:absolute;top:12px;right:14px;background:transparent;border:none;color:#b8bcc8;font-size:28px;cursor:pointer;width:36px;height:36px;border-radius:8px;line-height:1}
.policy-modal-close:hover{background:rgba(255,255,255,.06);color:#fff}
.policy-link{cursor:pointer}