/* =========================================================
       GLOBAL (kept minimal to avoid conflicts)
    ========================================================== */
    .design-page *{ box-sizing:border-box; }
    .design-page{
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background:#f6f7fb;
      color:#0f172a;
      margin:0;
    }

    /* =========================================================
       HEADER
    ========================================================== */
    .design-header{
      position:sticky;
      top:0;
      z-index:999;
      background:rgba(255,255,255,.9);
      backdrop-filter: blur(10px);
      border-bottom:1px solid #e5e7eb;
      box-shadow:0 10px 25px rgba(0,0,0,.06);
      transition:transform .28s ease, opacity .22s ease;
    }
    .design-header.design-hide{
      transform:translateY(-110%);
      opacity:0;
      pointer-events:none;
    }
    
    .design-header-inner{
      max-width:1200px;
      margin:auto;
      padding:12px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    
    .design-header-brand img{ max-height:44px; }
    
    /* NAV */
    .design-header-nav{
      display:flex;
      gap:10px;
    }
    .design-header-nav a{
      text-decoration:none;
      color:#111827;
      font-weight:700;
      font-size:14px;
      padding:10px 12px;
      border-radius:12px;
      transition:.2s ease;
    }
    .design-header-nav a:hover{
      background:linear-gradient(135deg,#6366F1,#4F46F5);
      color:#fff;
    }
    
    /* Active page style (applied via JS with aria-current="page") */
    .design-header-nav a[aria-current="page"],
    .design-drawer a[aria-current="page"]{
      background:rgba(99,102,241,.12);
      border-color: rgba(99,102,241,.25);
    }
    
    /* CTA */
    .design-header-btn-head{
      background:linear-gradient(135deg,#6366F1,#4F46F5);
      color:#fff;
      padding:9px 15px;
      border-radius:8px;
      font-weight:700;
      text-decoration:none;
      white-space:nowrap;
    }
    
    /* Burger */
    .design-header-burger{
      display:none;
      width:44px;height:44px;
      border-radius:14px;
      border:1px solid #e5e7eb;
      background:#fff;
      cursor:pointer;
      position:relative;
    }
    .design-header-burger span{
      position:absolute;
      left:50%;
      width:18px;height:2px;
      background:#111827;
      transform:translateX(-50%);
      border-radius:99px;
    }
    .design-header-burger span:nth-child(1){ top:14px; }
    .design-header-burger span:nth-child(2){ top:21px; }
    .design-header-burger span:nth-child(3){ top:28px; }
    
    /* =========================================================
       OVERLAY
    ========================================================== */
    .design-overlay{
      position:fixed; inset:0;
      background:rgba(17,24,39,.45);
      opacity:0; visibility:hidden;
      transition:opacity .25s ease, visibility .25s ease;
      z-index:1000;
    }
    .design-overlay.design-active{ opacity:1; visibility:visible; }
    
    /* =========================================================
       DRAWER
    ========================================================== */
    .design-drawer{
      position:fixed;
      top:0; right:0;
      height:100dvh;
      width:min(360px,88vw);
      background:#fff;
      border-left:1px solid #e5e7eb;
      box-shadow:-20px 0 40px rgba(0,0,0,.12);
      transform:translateX(110%);
      transition:transform .32s cubic-bezier(.22,1,.36,1);
      will-change:transform;
      z-index:1001;
      display:flex;
      flex-direction:column;
    }
    .design-drawer.design-active{ transform:translateX(0); }
    
    .design-drawer-head{
      padding:14px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      border-bottom:1px solid #e5e7eb;
    }
    .design-drawer-badge{
      width:80px;height:40px;
      border-radius:12px;
      background:linear-gradient(135deg,#6366F1,#4F46F5);
      color:#fff;
      display:grid;
      place-items:center;
      font-weight:900;
    }
    .design-drawer-close{
      width:44px;height:44px;
      border-radius:14px;
      border:1px solid #e5e7eb;
      background:#fff;
      cursor:pointer;
      position:relative;
    }
    .design-drawer-close:before,
    .design-drawer-close:after{
      content:"";
      position:absolute;
      left:50%;top:50%;
      width:18px;height:2px;
      background:#111827;
    }
    .design-drawer-close:before{ transform:translate(-50%,-50%) rotate(45deg); }
    .design-drawer-close:after{ transform:translate(-50%,-50%) rotate(-45deg); }
    
    .design-drawer-body{
      padding:14px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .design-drawer a{
      text-decoration:none;
      color:#111827;
      font-weight:800;
      padding:12px;
      border-radius:14px;
      border:1px solid #e5e7eb;
      background:#fff;
      transition:.2s ease;
    }
    .design-drawer a:hover{
      background:linear-gradient(135deg,#6366F1,#4F46F5);
      color:#fff;
      border-color:transparent;
    }
    
    /* =========================================================
       MOBILE RULES
    ========================================================== */
    @media (max-width:900px){
      .design-header-nav{ display:none; }
      .design-header-btn-head{ display:none; } /* hide CTA on mobile header */
      .design-header-burger{ display:inline-block; }
    }
    
    /* Accessibility */
    @media (prefers-reduced-motion: reduce){
      .design-drawer, .design-overlay{ transition:none !important; }
    }
    

    /* =========================================================
       FOOTER (Same system)
    ========================================================== */
    .design-footer{
      background: #0F172A;
      color:#e5e7eb;
    }

    .design-footer-wrap{
      max-width:1200px;
      margin:0 auto;
      padding:48px 16px 28px;
      display:grid;
      grid-template-columns:1.4fr 1fr 1fr 1.3fr;
      gap:22px;
    }

    .design-footer-brand{
      display:flex;
      align-items:center;
      gap:10px;
      text-decoration:none;
      color:#e5e7eb;
      font-weight:900;
      letter-spacing:.2px;
      margin-bottom:10px;
    }

    .design-footer-title{
      margin:6px 0 12px;
      font-size:14px;
      letter-spacing:.4px;
      text-transform:uppercase;
      color:#ffffff;
    }

    .design-footer-text{
      margin:0 0 14px;
      color:#9ca3af;
      line-height:1.6;
      font-size:14px;
    }

    .design-footer-links{
      list-style:none;
      padding:0;
      margin:0;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .design-footer-links a{
      color:#e5e7eb;
      text-decoration:none;
      opacity:.9;
      font-size:14px;
      padding:8px 10px;
      border-radius:12px;
      border:1px solid transparent;
      transition:.2s ease;
      display:inline-flex;
      width:fit-content;
    }
    .design-footer-links a:hover{
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.12);
      transform:translateY(-1px);
    }

    .design-footer-social{
      display:flex;
      gap:10px;
      margin-top:12px;
    }
    .design-footer-social a{
      width:42px;height:42px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      display:grid;
      place-items:center;
      color:#ffffff;
      text-decoration:none;
      transition:.2s ease;
    }
    .design-footer-social a svg{ width:20px; height:20px; }
    .design-footer-social a:hover{
      transform:translateY(-2px);
      background:rgba(255,255,255,.10);
    }

    .design-footer-form{
      display:flex;
      gap:10px;
      margin:10px 0 14px;
    }
    .design-footer-input{
      flex:1;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      color:#ffffff;
      outline:none;
      font-size:14px;
    }
    .design-footer-input::placeholder{ color:rgba(229,231,235,.65); }

    .design-footer-btn{
      padding:12px 14px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background: linear-gradient(135deg,#6366F1,#4F46F5);
      color:#ffffff;
      font-weight:800;
      cursor:pointer;
      transition:.2s ease;
      white-space:nowrap;
    }
    .design-footer-btn:hover{
      transform:translateY(-1px);
      background:rgba(255,255,255,.18);
    }

    .design-footer-contact{
      display:flex;
      flex-direction:column;
      gap:10px;
      padding-top:8px;
      border-top:1px dashed rgba(255,255,255,.14);
    }
    .design-footer-contact-row{
      display:flex;
      gap:10px;
      align-items:baseline;
      flex-wrap:wrap;
      font-size:14px;
    }
    .design-footer-contact-label{
      color:#9ca3af;
      min-width:62px;
    }
    .design-footer-contact a{
      color:#e5e7eb;
      text-decoration:none;
    }
    .design-footer-contact a:hover{ text-decoration:underline; }

    .design-footer-bottom{
      border-top:1px solid rgba(255,255,255,.10);
      padding:16px 16px;
      max-width:1200px;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      color:rgba(229,231,235,.85);
      font-size:13px;
    }
    .design-footer-bottom-links{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .design-footer-bottom a{
      color:rgba(229,231,235,.9);
      text-decoration:none;
    }
    .design-footer-bottom a:hover{ text-decoration:underline; }
    .design-footer-dot{ opacity:.5; }

    @media (max-width: 980px){
      .design-footer-wrap{ grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 560px){
      .design-footer-wrap{ grid-template-columns: 1fr; }
      .design-footer-form{ flex-direction: column; }
      .design-footer-btn{ width: 100%; }
    }