 :root{
    --yellow:#FFC400;
    --yellow-deep:#F2B705;
    --black:#161616;
    --ink:#1F1F1F;
    --grey:#6B6E73;
    --grey-light:#F4F5F6;
    --grey-mid:#E4E6E8;
    --white:#FFFFFF;
    --radius:14px;
    --shadow:0 18px 50px -18px rgba(0,0,0,.28);
    --shadow-sm:0 8px 24px -12px rgba(0,0,0,.22);
  }
  
  .apidev-page{font-family:poppinsregular,'Poppins',-apple-system,sans-serif;font-size:18px;color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
  .apidev-page h1,.apidev-page h2,.apidev-page h3{font-family:poppinsbold,'Poppins',sans-serif}
  .apidev-page h1,.apidev-page h2,.apidev-page h3,.apidev-page h4{font-weight:700;line-height:1.18;letter-spacing:-.01em}
  .apidev-page a{text-decoration:none;color:inherit}
  .apidev-page img{max-width:100%}
  .apidev-page p{font-size:18px}
  .apidev-page .wrap{max-width:1320px;margin:0 auto;padding:0 24px}
  .apidev-page .yellow{color:var(--yellow-deep)}
  .apidev-page .center{text-align:center}

  /* Buttons */
  .apidev-page .btn{display:inline-block;font-weight:600;font-size:1rem;padding:16px 34px;border-radius:50px;border:none;cursor:pointer;transition:.25s ease;font-family:inherit}
  .apidev-page .btn-primary{background:var(--yellow);color:var(--black)}
  .apidev-page .btn-primary:hover{background:var(--black);color:var(--yellow);transform:translateY(-2px)}
  .apidev-page .btn-dark{background:var(--black);color:var(--yellow)}
  .apidev-page .btn-dark:hover{background:var(--yellow);color:var(--black);transform:translateY(-2px)}
  .apidev-page .btn-block{width:100%;text-align:center}

  /* Hero */
  .apidev-page .hero{position:relative;background:var(--black);color:var(--white);overflow:hidden;padding:50px 0}
  .apidev-page .hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,196,0,.16) 1px,transparent 0);background-size:34px 34px;opacity:.5}
  .apidev-page .hero::after{content:"";position:absolute;top:-120px;right:-120px;width:460px;height:460px;background:radial-gradient(circle,var(--yellow) 0%,transparent 68%);opacity:.16;border-radius:50%}
  .apidev-page .hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center}
  .apidev-page .pill{display:inline-block;background:rgba(255,196,0,.14);border:1px solid rgba(255,196,0,.4);color:var(--yellow);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:7px 16px;border-radius:50px;margin-bottom:22px}
 .apidev-page .hero h1 {
    font-size: 2.9rem;
    font-weight: 800;
    
    margin: 0;
}
  .apidev-page .hero h1 em{font-style:normal;color:var(--yellow)}
  .apidev-page .hero p.lede{color:#C9CCD1;max-width:540px;margin-bottom:30px}
  .apidev-page .hero-meta{display:flex;gap:30px;margin-top:34px;flex-wrap:wrap}
  .apidev-page .hero-meta div{font-size:.85rem;color:#A9ADB3}
  .apidev-page .hero-meta b{display:block;font-size:1.7rem;color:var(--yellow);font-weight:700}

  /* Form card */
  .apidev-page .form-card{background:var(--white);color:var(--ink);border-radius:18px;padding:32px;box-shadow:var(--shadow);border-top:6px solid var(--yellow)}
  .apidev-page .form-card h3{font-size:1.35rem;margin-bottom:6px}
  .apidev-page .form-card .sub{font-size:.9rem;color:var(--grey);margin-bottom:20px}
  .apidev-page .form-card input,.apidev-page .form-card select,.apidev-page .form-card textarea{width:100%;padding:13px 15px;margin-bottom:13px;border:1.5px solid var(--grey-mid);border-radius:10px;font-family:inherit;font-size:.93rem;transition:.2s}
  .apidev-page .form-card input:focus,.apidev-page .form-card select:focus,.apidev-page .form-card textarea:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,196,0,.25)}
  .apidev-page .form-card .tiny{font-size:.72rem;color:var(--grey);text-align:center;margin-top:10px}

  /* Section base */
  .apidev-page section{padding:50px 0}
  .apidev-page .section-tag{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow-deep);margin-bottom:14px}
  .apidev-page .section-head{max-width:1120px;margin:0 auto 44px;text-align:center}
  .apidev-page .section-head.left{margin-left:0;text-align:left}
  .apidev-page .section-head h2{font-size:2.3rem;margin-bottom:14px}
  .apidev-page .section-head p{color:var(--grey)}
  .apidev-page .bg-grey{background:var(--grey-light)}
  .apidev-page .bg-black{background:var(--black);color:var(--white)}
  .apidev-page .bg-black .section-head p{color:#B8BBC0}

  /* Why necessary */
  .apidev-page .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .apidev-page .why-card{background:var(--white);border:1px solid var(--grey-mid);border-radius:var(--radius);padding:30px 26px;transition:.25s}
  .apidev-page .why-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm);border-color:var(--yellow)}
  .apidev-page .why-card .ico{width:48px;height:48px;background:var(--yellow);color:var(--black);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
  .apidev-page .why-card .ico svg{width:24px;height:24px}
  .apidev-page .why-card h3{font-size:1.18rem;margin-bottom:8px}
  .apidev-page .why-card p{font-size:.93rem;color:var(--grey)}

  /* What includes */
  .apidev-page .inc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .apidev-page .inc-item{display:flex;gap:16px;background:var(--white);border-radius:var(--radius);padding:24px 26px;border-left:4px solid var(--yellow);box-shadow:var(--shadow-sm)}
  .apidev-page .inc-item .num{font-size:1.4rem;font-weight:800;color:var(--yellow-deep);flex-shrink:0}
  .apidev-page .inc-item h4{font-size:1.08rem;margin-bottom:5px}
  .apidev-page .inc-item p{font-size:.9rem;color:var(--grey)}

  /* Who should consider */
  .apidev-page .who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .apidev-page .who-card{text-align:center;padding:30px 18px;border-radius:var(--radius);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);transition:.25s}
  .apidev-page .who-card:hover{background:rgba(255,196,0,.08);border-color:var(--yellow)}
  .apidev-page .who-card .ico{width:44px;height:44px;border-radius:11px;background:rgba(255,196,0,.14);color:var(--yellow);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
  .apidev-page .who-card .ico svg{width:22px;height:22px}
  .apidev-page .who-card h4{font-size:1.02rem;margin-bottom:7px;color:var(--white)}
  .apidev-page .who-card p{font-size:.84rem;color:#A9ADB3}

  /* Platforms */
  .apidev-page .plat-tabs{display:flex;flex-direction:column;gap:32px}
  .apidev-page .plat-tab-nav{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px}
  .apidev-page .plat-tab-btn{text-align:center;padding:13px 22px;border-radius:10px;border:1px solid var(--grey-mid);background:var(--white);font-family:inherit;font-size:.92rem;font-weight:600;color:var(--ink);cursor:pointer;transition:.2s}
  .apidev-page .plat-tab-btn:hover{border-color:var(--yellow)}
  .apidev-page .plat-tab-btn.active{background:var(--black);border-color:var(--black);color:var(--white)}
  .apidev-page .plat-tab-panel{display:none;flex-wrap:wrap;justify-content:center;gap:18px}
  .apidev-page .plat-tab-panel.active{display:flex}
  .apidev-page .plat-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:28px 22px;border:1px solid var(--grey-mid);border-radius:18px;background:var(--white);font-weight:600;font-size:1rem;transition:.25s;width:190px;box-shadow:0 4px 16px -8px rgba(0,0,0,.08)}
  .apidev-page .plat-item:hover{border-color:var(--yellow);transform:translateY(-6px);box-shadow:0 16px 30px -12px rgba(0,0,0,.16)}
  .apidev-page .plat-ico{width:64px;height:64px;flex-shrink:0;border-radius:18px;background:linear-gradient(150deg,rgba(255,196,0,.22),rgba(255,196,0,.08));color:var(--yellow-deep);display:flex;align-items:center;justify-content:center;transition:.25s}
  .apidev-page .plat-item:hover .plat-ico:not(.brand-ico){background:var(--yellow);color:var(--black);transform:scale(1.06)}
  .apidev-page .plat-item:hover .plat-ico.brand-ico{transform:scale(1.08)}
  .apidev-page .plat-ico svg{width:30px;height:30px;stroke-width:1.7}
  .apidev-page .plat-ico.brand-ico svg{width:32px;height:32px}
  @media(max-width:760px){
    .apidev-page .plat-tab-nav{gap:8px}
    .apidev-page .plat-tab-btn{padding:11px 16px;font-size:.85rem}
    .apidev-page .plat-item{width:140px;padding:22px 14px}
    .apidev-page .plat-ico{width:52px;height:52px}
    .apidev-page .plat-ico svg{width:24px;height:24px}
  }
  .apidev-page .chips{display:flex;flex-wrap:wrap;gap:11px}
  .apidev-page .chip{background:var(--white);border:1px solid var(--grey-mid);border-radius:50px;padding:9px 20px;font-size:.88rem;font-weight:500;transition:.2s}
  .apidev-page .chip:hover{background:var(--yellow);border-color:var(--yellow);transform:translateY(-2px)}

  /* Packages / plans */
  .apidev-page .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
  .apidev-page .plan{background:var(--white);border:1px solid var(--grey-mid);border-radius:16px;padding:30px 24px;display:flex;flex-direction:column;transition:.25s;position:relative}
  .apidev-page .plan:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--yellow)}
  .apidev-page .plan.feat{border:2px solid var(--yellow);box-shadow:var(--shadow-sm)}
  .apidev-page .plan.feat::before{content:"Most Requested";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--yellow);color:var(--black);font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 16px;border-radius:50px;white-space:nowrap}
  .apidev-page .plan h3{font-size:1.18rem;margin-bottom:6px}
  .apidev-page .plan .plan-for{font-size:.8rem;color:var(--yellow-deep);font-weight:600;margin-bottom:16px;min-height:34px}
  .apidev-page .plan ul{list-style:none;margin-bottom:24px;flex-grow:1}
  .apidev-page .plan li{font-size:.87rem;color:var(--ink);padding:8px 0 8px 26px;position:relative;border-bottom:1px solid var(--grey-light)}
  .apidev-page .plan li::before{content:"✓";position:absolute;left:0;color:var(--yellow-deep);font-weight:800}
  .apidev-page .plan .btn{font-size:.9rem;padding:13px}

  /* Tracking */
  .apidev-page .track-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:46px}
  .apidev-page .track-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:26px}
  .apidev-page .track-card .kpi{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow);margin-bottom:10px}
  .apidev-page .track-card h4{font-size:1.06rem;color:var(--white);margin-bottom:7px}
  .apidev-page .track-card p{font-size:.86rem;color:#A9ADB3}
  .apidev-page .track-tools{text-align:center}
  .apidev-page .track-tools p{color:#9a9ea4;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:16px;font-weight:600}
  .apidev-page .track-tools .chips{justify-content:center}
  .apidev-page .track-tools .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:var(--white)}
  .apidev-page .track-tools .chip:hover{background:var(--yellow);color:var(--black)}

  /* Why EZ */
  .apidev-page .ez-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .apidev-page .ez-card{padding:28px;border-radius:var(--radius);background:var(--white);border:1px solid var(--grey-mid)}
  .apidev-page .ez-card .ico{width:44px;height:44px;border-radius:11px;background:rgba(242,183,5,.14);color:var(--yellow-deep);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .apidev-page .ez-card .ico svg{width:22px;height:22px}
  .apidev-page .ez-card h4{font-size:1.12rem;margin-bottom:8px}
  .apidev-page .ez-card p{font-size:.9rem;color:var(--grey)}

  /* Mid CTA band */
  .apidev-page .cta-band{background:var(--yellow);padding:50px 0}
  .apidev-page .cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
  .apidev-page .cta-band h2{font-size:1.9rem;color:var(--black);max-width:640px}
  .apidev-page .cta-band p{color:#3a3000;margin-top:6px}

  /* FAQ - all visible */
  .apidev-page .faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .apidev-page .faq-item{background:var(--white);border:1px solid var(--grey-mid);border-radius:var(--radius);padding:26px 28px;border-left:4px solid var(--yellow)}
  .apidev-page .faq-item h4{font-size:1.05rem;margin-bottom:10px;display:flex;gap:10px}
  .apidev-page .faq-item h4 .q{color:var(--yellow-deep);font-weight:800}
  .apidev-page .faq-item p{font-size:.9rem;color:var(--grey)}

  /* Final CTA */
  .apidev-page .final{background:var(--black);color:var(--white)}
  .apidev-page .final .wrap{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
  .apidev-page .final h2{font-size:2.4rem;margin-bottom:16px}
  .apidev-page .final h2 em{font-style:normal;color:var(--yellow)}
 .apidev-page .final h2

 {
    font-size: 2.4rem;
    margin-bottom: 16px;
    color: #fff;
}
  .apidev-page .final-list{list-style:none}
  .apidev-page .final-list li{padding:8px 0 8px 30px;position:relative;color:#D5D7DB;font-size:.95rem}
  .apidev-page .final-list li::before{content:"→";position:absolute;left:0;color:var(--yellow);font-weight:700}

  /* Reveal animation */
  .apidev-page .reveal{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.7,.2,1)}
  .apidev-page .reveal.in{opacity:1;transform:none}

  /* Responsive */
  @media(max-width:980px){
    .apidev-page .hero .wrap,.apidev-page .final .wrap{grid-template-columns:1fr;gap:38px}
    .apidev-page .hero h1{font-size:2.4rem}
    .apidev-page .why-grid,.apidev-page .who-grid,.apidev-page .plans,.apidev-page .track-grid,.apidev-page .ez-grid{grid-template-columns:repeat(2,1fr)}
    .apidev-page .inc-grid,.apidev-page .faq-grid{grid-template-columns:1fr}
  }
  @media(max-width:620px){
    .apidev-page .hero h1{font-size:2rem}
    .apidev-page .section-head h2{font-size:1.7rem}
    .apidev-page .why-grid,.apidev-page .who-grid,.apidev-page .plans,.apidev-page .track-grid,.apidev-page .ez-grid{grid-template-columns:1fr}
    .apidev-page section{padding:36px 0}
  }