/* ===== DEVELOPER PORTAL STYLES ===== */

    /* Developer header override */
    .dev-header-nav{display:flex;gap:28px;font-size:14px;font-weight:600}
    .dev-header-nav a{color:#6c7378;transition:color .2s}
    .dev-header-nav a:hover,.dev-header-nav a.active{color:#003087}

    /* Hero */
    .dev-hero{
      background:#0a0e1a;color:#fff;padding:100px 0 80px;position:relative;overflow:hidden;
    }
    .dev-hero::before{
      content:'';position:absolute;top:0;left:0;right:0;bottom:0;
      background:
        radial-gradient(ellipse at 20% 50%,rgba(0,112,186,.15),transparent 60%),
        radial-gradient(ellipse at 80% 20%,rgba(99,102,241,.12),transparent 50%),
        radial-gradient(ellipse at 60% 80%,rgba(212,160,23,.08),transparent 50%);
    }
    .dev-hero .container{position:relative;z-index:1}
    .dev-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
    .dev-hero h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;line-height:1.12;margin-bottom:16px}
    .dev-hero h1 .grad{background:linear-gradient(135deg,#60a5fa,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
    .dev-hero>p,.dev-hero .sub{font-size:17px;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:28px}
    .dev-hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}

    /* AI banner */
    .dev-ai-banner{
      display:flex;align-items:center;gap:12px;
      background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(0,112,186,.1));
      border:1px solid rgba(99,102,241,.25);border-radius:12px;
      padding:14px 20px;margin-bottom:32px;
    }
    .dev-ai-banner .ai-icon{font-size:20px}
    .dev-ai-banner span{font-size:13px;color:rgba(255,255,255,.7)}
    .dev-ai-banner strong{color:#a5b4fc}

    /* Code mockup */
    .dev-code{
      background:#111827;border:1px solid rgba(255,255,255,.08);border-radius:16px;
      overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4);
    }
    .dev-code-bar{
      display:flex;align-items:center;gap:8px;padding:12px 16px;
      background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06);
    }
    .dev-code-dot{width:10px;height:10px;border-radius:50%}
    .dev-code-dot.r{background:#ff5f57}.dev-code-dot.y{background:#febc2e}.dev-code-dot.g{background:#28c840}
    .dev-code-tab{margin-left:16px;font-size:12px;color:rgba(255,255,255,.4);padding:4px 12px;border-radius:6px}
    .dev-code-tab.active{background:rgba(255,255,255,.08);color:#60a5fa}
    .dev-code pre{
      padding:20px;margin:0;font-size:13px;line-height:1.8;overflow-x:auto;
      font-family:'SF Mono','Fira Code',monospace;color:#e2e8f0;
    }
    .dev-code .kw{color:#c084fc}.dev-code .fn{color:#60a5fa}
    .dev-code .str{color:#34d399}.dev-code .cmt{color:#6b7280;font-style:italic}
    .dev-code .num{color:#fbbf24}.dev-code .op{color:#f472b6}

    /* Quick start cards */
    .dev-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
    .dev-quick-card{
      background:#fff;border:1px solid #eaeced;border-radius:14px;padding:28px 24px;
      text-align:center;transition:all .3s ease;cursor:pointer;
    }
    .dev-quick-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,48,135,.1);border-color:#d4e5f7}
    .dev-quick-icon{
      width:56px;height:56px;border-radius:14px;margin:0 auto 16px;
      display:flex;align-items:center;justify-content:center;font-size:28px;
    }
    .dev-quick-icon.nocode{background:linear-gradient(135deg,#dbeafe,#e0e7ff);color:#4338ca}
    .dev-quick-icon.mobile{background:linear-gradient(135deg,#d1fae5,#ccfbf1);color:#065f46}
    .dev-quick-icon.api{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#b45309}
    .dev-quick-icon.js{background:linear-gradient(135deg,#fce7f3,#ede9fe);color:#7c3aed}
    .dev-quick-card h3{font-size:16px;font-weight:700;color:#0a1628;margin-bottom:6px}
    .dev-quick-card p{font-size:13px;color:#6c7378;line-height:1.5;margin-bottom:14px}
    .dev-quick-card .link{font-size:13px;font-weight:600;color:#0070ba}

    /* Section */
    .dev-section{padding:100px 0}
    .dev-section-alt{background:#f8f9fb}
    .dev-section-dark{background:#0a0e1a;color:#fff}
    .dev-header{text-align:center;margin-bottom:56px}
    .dev-header .kicker{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:#0070ba;margin-bottom:10px}
    .dev-header h2{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:800;color:#0a1628;margin-bottom:12px}
    .dev-section-dark .dev-header h2{color:#fff}
    .dev-header p{font-size:16px;color:#6c7378;max-width:600px;margin:0 auto}
    .dev-section-dark .dev-header p{color:rgba(255,255,255,.5)}

    /* Products grid */
    .dev-products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .dev-product{
      background:#fff;border:1px solid #eaeced;border-radius:14px;padding:28px;
      transition:all .3s ease;display:flex;gap:16px;
    }
    .dev-product:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,48,135,.08);border-color:#d4e5f7}
    .dev-product-icon{
      width:44px;height:44px;min-width:44px;border-radius:12px;
      display:flex;align-items:center;justify-content:center;font-size:20px;
    }
    .dev-product h3{font-size:15px;font-weight:700;color:#0a1628;margin-bottom:4px}
    .dev-product p{font-size:13px;color:#6c7378;line-height:1.5;margin-bottom:8px}
    .dev-product .link{font-size:12px;font-weight:600;color:#0070ba}

    /* Payment methods section */
    .dev-methods-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
    .dev-method{
      display:flex;align-items:center;gap:14px;
      background:#fff;border:1px solid #eaeced;border-radius:12px;padding:18px 20px;
      transition:all .2s ease;
    }
    .dev-method:hover{border-color:#0070ba;box-shadow:0 4px 16px rgba(0,112,186,.08)}
    .dev-method-icon{font-size:28px;min-width:36px;text-align:center}
    .dev-method h4{font-size:14px;font-weight:700;color:#0a1628;margin-bottom:2px}
    .dev-method p{font-size:12px;color:#6c7378}
    .dev-method .arrow{margin-left:auto;color:#d1d5db;font-size:18px}

    /* Capabilities grid */
    .dev-caps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .dev-cap{
      background:#fff;border:1px solid #eaeced;border-radius:12px;padding:24px;
      transition:all .2s ease;
    }
    .dev-cap:hover{border-color:#0070ba;box-shadow:0 4px 16px rgba(0,112,186,.08)}
    .dev-cap .cap-icon{font-size:24px;margin-bottom:10px}
    .dev-cap h4{font-size:14px;font-weight:700;color:#0a1628;margin-bottom:4px}
    .dev-cap p{font-size:12px;color:#6c7378;line-height:1.5}

    /* Add-on services */
    .dev-addons{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .dev-addon{
      background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
      border-radius:12px;padding:24px;transition:all .2s ease;
    }
    .dev-addon:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15)}
    .dev-addon .addon-icon{font-size:24px;margin-bottom:10px}
    .dev-addon h4{font-size:14px;font-weight:700;color:#fff;margin-bottom:4px}
    .dev-addon p{font-size:12px;color:rgba(255,255,255,.5);line-height:1.5}

    /* API Reference table */
    .dev-api-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
    .dev-api-item{
      background:#111827;border:1px solid rgba(255,255,255,.08);border-radius:12px;
      padding:24px;transition:all .2s ease;
    }
    .dev-api-item:hover{border-color:rgba(96,165,250,.3);box-shadow:0 4px 20px rgba(96,165,250,.1)}
    .dev-api-item .method{
      display:inline-block;padding:3px 10px;border-radius:6px;font-size:11px;
      font-weight:700;font-family:monospace;margin-bottom:8px;
    }
    .dev-api-item .method.get{background:rgba(52,211,153,.15);color:#34d399}
    .dev-api-item .method.post{background:rgba(96,165,250,.15);color:#60a5fa}
    .dev-api-item .method.put{background:rgba(251,191,36,.15);color:#fbbf24}
    .dev-api-item .method.del{background:rgba(248,113,113,.15);color:#f87171}
    .dev-api-item .endpoint{font-size:13px;font-family:monospace;color:#e2e8f0;margin-bottom:6px}
    .dev-api-item .desc{font-size:12px;color:rgba(255,255,255,.4)}

    /* Workspace cards */
    .dev-workspaces{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .dev-workspace{
      background:#fff;border:1px solid #eaeced;border-radius:14px;padding:32px;
      text-align:center;transition:all .3s ease;
    }
    .dev-workspace:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,48,135,.1)}
    .dev-workspace-logo{font-size:40px;margin-bottom:14px}
    .dev-workspace h3{font-size:16px;font-weight:700;color:#0a1628;margin-bottom:6px}
    .dev-workspace p{font-size:13px;color:#6c7378;margin-bottom:16px}

    /* Community */
    .dev-community{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
    .dev-community-card{
      background:#fff;border:1px solid #eaeced;border-radius:16px;padding:32px;
      text-align:center;transition:all .3s ease;
    }
    .dev-community-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,48,135,.1)}
    .dev-community-card .comm-icon{font-size:40px;margin-bottom:16px}
    .dev-community-card h3{font-size:18px;font-weight:700;color:#0a1628;margin-bottom:8px}
    .dev-community-card p{font-size:14px;color:#6c7378;line-height:1.6}

    /* Dev tools footer */
    .dev-tools-footer{
      background:#0a0e1a;border-top:1px solid rgba(255,255,255,.06);
      padding:48px 0;
    }
    .dev-tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
    .dev-tools-col h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.3);margin-bottom:14px}
    .dev-tools-col a{display:block;font-size:13px;color:rgba(255,255,255,.6);padding:4px 0;transition:color .2s}
    .dev-tools-col a:hover{color:#60a5fa}

    /* Newsletter */
    .dev-newsletter{
      background:linear-gradient(135deg,rgba(0,112,186,.1),rgba(99,102,241,.08));
      border:1px solid rgba(0,112,186,.15);border-radius:16px;
      padding:40px;text-align:center;max-width:600px;margin:0 auto;
    }
    .dev-newsletter h3{font-size:20px;font-weight:700;color:#0a1628;margin-bottom:8px}
    .dev-newsletter p{font-size:14px;color:#6c7378;margin-bottom:20px}
    .dev-newsletter-form{display:flex;gap:8px;max-width:400px;margin:0 auto}
    .dev-newsletter-form input{
      flex:1;padding:12px 16px;border:1.5px solid #d1d5db;border-radius:10px;font-size:14px;
      outline:none;transition:border-color .2s;
    }
    .dev-newsletter-form input:focus{border-color:#0070ba}
    .dev-newsletter-form button{
      padding:12px 24px;background:linear-gradient(135deg,#003087,#0070ba);color:#fff;
      border:none;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;transition:transform .2s;
    }
    .dev-newsletter-form button:hover{transform:scale(1.03)}

    /* Responsive */
    @media(max-width:900px){
      .dev-hero-grid{grid-template-columns:1fr}
      .dev-quick{grid-template-columns:1fr 1fr}
      .dev-products{grid-template-columns:1fr}
      .dev-methods-grid{grid-template-columns:1fr}
      .dev-caps{grid-template-columns:1fr 1fr}
      .dev-addons{grid-template-columns:1fr}
      .dev-api-grid{grid-template-columns:1fr}
      .dev-workspaces{grid-template-columns:1fr}
      .dev-community{grid-template-columns:1fr}
      .dev-tools-grid{grid-template-columns:1fr 1fr}
    }
    @media(max-width:600px){
      .dev-quick{grid-template-columns:1fr}
      .dev-caps{grid-template-columns:1fr}
      .dev-tools-grid{grid-template-columns:1fr}
    }