/* =========================================================
   API DEVELOPER — activation page
   Header/footer are intentionally outside this stylesheet.
   ========================================================= */

.developer-page{
  --dev-blue:#1269ef;
  --dev-blue-2:#1e78f3;
  --dev-blue-dark:#12317c;
  --dev-ink:#102044;
  --dev-text:#26385d;
  --dev-muted:#6c7d9c;
  --dev-line:#d9e5f4;
  --dev-line-strong:#c8d9ee;
  --dev-soft:#f6f9ff;
  --dev-soft-blue:#eef5ff;
  --dev-green:#19a65a;
  --dev-green-bg:#f2fbf5;
  --dev-green-line:#bfe7cd;
  --dev-shadow:0 14px 36px rgba(29,66,120,.06);
  background:#fff;
  color:var(--dev-ink);
}

.developer-page *,
.developer-page *::before,
.developer-page *::after{box-sizing:border-box}

.developer-page [hidden]{display:none!important}

.developer-page svg{
  display:block;
  width:1em;
  height:1em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.developer-main{
  width:min(1160px,calc(100% - 36px));
  margin:0 auto;
  padding:34px 0 38px;
}

/* =========================
   HERO
   ========================= */

.developer-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(300px,.78fr);
  gap:24px 42px;
  overflow:hidden;
  padding:38px 42px 30px;
  border:1px solid var(--dev-line-strong);
  border-radius:18px;
  background:
    radial-gradient(circle at 78% 20%,rgba(120,169,255,.14),transparent 27%),
    linear-gradient(135deg,#fbfdff 0%,#f6f9ff 55%,#eef6ff 100%);
  box-shadow:var(--dev-shadow);
}

.developer-hero::after{
  content:"";
  position:absolute;
  right:-110px;
  bottom:-175px;
  width:420px;
  height:420px;
  border:1px solid rgba(77,139,238,.12);
  border-radius:50%;
}

.developer-hero__content{
  position:relative;
  z-index:3;
  align-self:center;
  padding:5px 0 4px;
}

.developer-eyebrow{
  margin:0 0 16px;
  color:#145dd5;
  font-size:.72rem;
  line-height:1;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.developer-hero h1{
  max-width:680px;
  margin:0;
  color:#112245;
  font-size:clamp(2.1rem,4vw,3.2rem);
  line-height:1.04;
  font-weight:900;
  letter-spacing:-.035em;
}

.developer-hero__lead{
  max-width:680px;
  margin:18px 0 0;
  color:#24385d;
  font-size:1rem;
  line-height:1.55;
  font-weight:500;
}

/* hero visual */

.developer-hero__visual{
  position:relative;
  z-index:2;
  min-height:210px;
  align-self:center;
}

.developer-visual__wire{
  position:absolute;
  border-color:#c9dcf8;
  opacity:.72;
}

.developer-visual__wire--a{
  left:15px;
  top:72px;
  width:116px;
  height:62px;
  border-top:1px solid;
  border-left:1px solid;
  border-radius:18px 0 0 0;
}

.developer-visual__wire--b{
  right:4px;
  top:54px;
  width:98px;
  height:80px;
  border-top:1px solid;
  border-right:1px solid;
  border-radius:0 18px 0 0;
}

.developer-visual__browser{
  position:absolute;
  left:58px;
  top:22px;
  width:164px;
  height:130px;
  padding:34px 18px 16px;
  border:1px solid #d8e4f2;
  border-radius:14px;
  background:rgba(255,255,255,.88);
  box-shadow:0 17px 30px rgba(45,87,147,.08);
}

.developer-visual__browser-top{
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:23px;
  display:flex;
  align-items:center;
  gap:5px;
  padding-left:12px;
  border-bottom:1px solid #e3eaf4;
  background:#f4f7fb;
  border-radius:14px 14px 0 0;
}

.developer-visual__browser-top span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#c4cfde;
}

.developer-visual__browser strong{
  display:block;
  margin-bottom:18px;
  color:#1c66dc;
  font-size:1.32rem;
  font-weight:900;
}

.developer-visual__browser i{
  display:block;
  width:74%;
  height:5px;
  margin-top:8px;
  border-radius:999px;
  background:#e6edf7;
}

.developer-visual__browser i:nth-of-type(2){width:58%}
.developer-visual__browser i:nth-of-type(3){width:42%}

.developer-visual__football{
  position:absolute;
  right:40px;
  top:0;
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  border:1px solid #d5e3f5;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  color:#2672ee;
  box-shadow:0 12px 24px rgba(38,101,193,.07);
}

.developer-visual__football svg{width:43px;height:43px}

.developer-visual__code{
  position:absolute;
  left:180px;
  bottom:13px;
  display:grid;
  place-items:center;
  width:68px;
  height:56px;
  border-radius:13px;
  background:linear-gradient(135deg,#2779f1,#145fdd);
  color:#fff;
  box-shadow:0 13px 24px rgba(21,95,221,.22);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:1.4rem;
  font-weight:800;
}

.developer-visual__bars{
  position:absolute;
  right:22px;
  bottom:18px;
  display:flex;
  align-items:flex-end;
  gap:7px;
  height:70px;
}

.developer-visual__bars i{
  display:block;
  width:10px;
  height:var(--h);
  min-height:16px;
  border-radius:999px;
  background:#dfebfb;
}

/* hero feature row */

.developer-benefits{
  position:relative;
  z-index:3;
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  overflow:hidden;
  border:1px solid #d4e1f2;
  border-radius:10px;
  background:rgba(255,255,255,.7);
}

.developer-benefit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-width:0;
  min-height:46px;
  padding:9px 12px;
  color:#25395e;
  font-size:.79rem;
  font-weight:700;
  white-space:nowrap;
}

.developer-benefit + .developer-benefit{
  border-left:1px solid #e2eaf5;
}

.developer-icon{
  flex:0 0 auto;
  color:#1f73ed;
  font-size:1.15rem;
}

/* =========================
   ACCOUNT STATE
   ========================= */

.developer-account{
  width:min(690px,100%);
  margin:26px auto 0;
  padding:26px 28px 20px;
  border:1px solid var(--dev-line);
  border-radius:15px;
  background:#fff;
  box-shadow:var(--dev-shadow);
}

.developer-account__title{
  display:flex;
  align-items:center;
  gap:12px;
}

.developer-account__title-icon{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  color:#1f71ed;
  font-size:1.22rem;
}

.developer-account__title h2{
  margin:0;
  color:#12254b;
  font-size:1.04rem;
  line-height:1.2;
  font-weight:850;
}

.developer-status{
  position:relative;
  min-height:46px;
  margin:18px 0 0;
  padding:13px 15px 13px 39px;
  border:1px solid #cddcf1;
  border-radius:8px;
  background:#f6f9fe;
  color:#466080;
  font-size:.76rem;
  line-height:1.45;
  font-weight:650;
}

.developer-status::before{
  content:"";
  position:absolute;
  left:15px;
  top:50%;
  width:11px;
  height:11px;
  margin-top:-5.5px;
  border:2px solid #7aa2db;
  border-top-color:transparent;
  border-radius:50%;
  animation:developer-spin .8s linear infinite;
}

.developer-status[data-kind="ready"]{
  border-color:var(--dev-green-line);
  background:var(--dev-green-bg);
  color:#148148;
}

.developer-status[data-kind="ready"]::before{
  border:0;
  background:#1dae5e;
  box-shadow:0 0 0 4px rgba(29,174,94,.08);
  animation:none;
}

.developer-status[data-kind="error"]{
  border-color:#efc9ce;
  background:#fff6f7;
  color:#b5414c;
}

.developer-status[data-kind="error"]::before{
  border:0;
  background:#d24e59;
  animation:none;
}

.developer-status[data-kind="notice"]{
  border-color:#d7e1ef;
  background:#f7f9fc;
  color:#536a88;
}

.developer-status[data-kind="notice"]::before{
  border:0;
  background:#8297b3;
  animation:none;
}

@keyframes developer-spin{to{transform:rotate(360deg)}}

.developer-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:15px;
}

.developer-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  padding:10px 14px;
  border:1px solid transparent;
  border-radius:8px;
  font:inherit;
  font-size:.78rem;
  font-weight:850;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;
}

.developer-button:hover:not(:disabled),
.developer-button:focus-visible{
  transform:translateY(-1px);
}

.developer-button--primary{
  border-color:#1767e4;
  background:linear-gradient(135deg,#2477f2,#0f60e4);
  color:#fff;
  box-shadow:0 8px 20px rgba(24,100,226,.16);
}

.developer-button--primary:hover:not(:disabled),
.developer-button--primary:focus-visible{
  background:linear-gradient(135deg,#317ff2,#1558cb);
  color:#fff;
}

.developer-button--secondary{
  border-color:#1a6deb;
  background:#fff;
  color:#175fce;
  box-shadow:none;
}

.developer-button--secondary:hover,
.developer-button--secondary:focus-visible{
  background:#f5f9ff;
  color:#114fae;
}

.developer-button:disabled{
  opacity:.62;
  cursor:wait;
  transform:none;
}

.developer-button__icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
}

.developer-button__icon svg{width:18px;height:18px}

.developer-offers-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:max-content;
  margin:17px auto 0;
  color:#1c63d7;
  font-size:.75rem;
  line-height:1;
  font-weight:800;
  text-decoration:none;
}

.developer-offers-link:hover{text-decoration:underline}

.developer-account__after{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:18px 0 0;
  padding-top:15px;
  border-top:1px solid #e1e8f2;
  color:#7485a0;
  font-size:.68rem;
  line-height:1.4;
  text-align:center;
}

/* =========================
   PROCESS
   ========================= */

.developer-process{
  width:min(760px,100%);
  margin:22px auto 0;
}

.developer-process > h2{
  margin:0 0 16px;
  color:#102044;
  font-size:1rem;
  line-height:1.2;
  font-weight:850;
  text-align:center;
}

.developer-process__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr);
  align-items:center;
  gap:8px;
}

.developer-step{
  position:relative;
  min-height:128px;
  padding:28px 18px 16px;
  border:1px solid var(--dev-line);
  border-radius:11px;
  background:#fff;
  box-shadow:0 8px 22px rgba(32,68,121,.035);
}

.developer-step__number{
  position:absolute;
  left:-7px;
  top:-10px;
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border:1px solid #c8dbf6;
  border-radius:50%;
  background:#eaf3ff;
  color:#1b69e7;
  font-size:.75rem;
  font-weight:900;
}

.developer-step__icon{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  margin-bottom:9px;
  color:#176ced;
  font-size:1.5rem;
  font-weight:900;
}

.developer-step__icon svg{width:28px;height:28px}

.developer-step h3{
  margin:0;
  color:#15284d;
  font-size:.78rem;
  line-height:1.2;
  font-weight:850;
}

.developer-step p{
  margin:6px 0 0;
  color:#71819d;
  font-size:.67rem;
  line-height:1.45;
  font-weight:500;
}

.developer-step-arrow{
  color:#77a1df;
  font-size:.8rem;
  letter-spacing:.08em;
  text-align:center;
}

/* =========================
   NOTE
   ========================= */

.developer-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  width:min(760px,100%);
  min-height:66px;
  margin:18px auto 0;
  padding:11px 20px;
  border:1px solid #d6e3f4;
  border-radius:10px;
  background:linear-gradient(90deg,#f7faff,#f3f8ff);
}

.developer-note__title{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}

.developer-note__bulb{
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  border:1px solid #d4e2f6;
  border-radius:50%;
  background:#fff;
  color:#2474ed;
  font-size:1.3rem;
}

.developer-note__title strong{
  color:#1b60cb;
  font-size:.84rem;
  font-weight:850;
}

.developer-note__points{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:28px;
  min-width:0;
  color:#526987;
  font-size:.7rem;
  font-weight:650;
}

.developer-note__points span{
  display:flex;
  align-items:center;
  gap:7px;
}

.developer-note__points i{
  display:grid;
  place-items:center;
  width:17px;
  height:17px;
  border-radius:50%;
  background:#1c69e4;
  color:#fff;
  font-size:.61rem;
  font-style:normal;
  font-weight:900;
}

/* =========================
   DARK THEME — driven by existing site theme
   ========================= */

[data-theme="dark"] .developer-page{
  --dev-ink:#eef5ff;
  --dev-text:#c9d7e9;
  --dev-muted:#90a4bd;
  --dev-line:#2a3d56;
  --dev-line-strong:#314762;
  --dev-soft:#0f1b2d;
  --dev-soft-blue:#11223b;
  background:#07101f;
  color:#dbe7f6;
}

[data-theme="dark"] .developer-hero{
  border-color:#2b415d;
  background:
    radial-gradient(circle at 78% 20%,rgba(44,104,206,.20),transparent 27%),
    linear-gradient(135deg,#0d192b 0%,#0d1a2d 56%,#102039 100%);
  box-shadow:none;
}

[data-theme="dark"] .developer-hero h1,
[data-theme="dark"] .developer-account__title h2,
[data-theme="dark"] .developer-process > h2,
[data-theme="dark"] .developer-step h3{color:#eef5ff}

[data-theme="dark"] .developer-hero__lead{color:#b2c3d8}
[data-theme="dark"] .developer-benefits,
[data-theme="dark"] .developer-account,
[data-theme="dark"] .developer-step{
  border-color:#2a3e59;
  background:#0e1a2c;
  box-shadow:none;
}

[data-theme="dark"] .developer-benefit{color:#d2deed}
[data-theme="dark"] .developer-benefit + .developer-benefit{border-left-color:#273b55}

[data-theme="dark"] .developer-visual__browser,
[data-theme="dark"] .developer-visual__football{
  border-color:#314762;
  background:#112138;
  box-shadow:none;
}

[data-theme="dark"] .developer-visual__browser-top{
  border-color:#2a3f59;
  background:#14243a;
}

[data-theme="dark"] .developer-visual__browser i,
[data-theme="dark"] .developer-visual__bars i{background:#263b56}

[data-theme="dark"] .developer-status{
  border-color:#304660;
  background:#111f33;
  color:#b9c8da;
}

[data-theme="dark"] .developer-status[data-kind="ready"]{
  border-color:#285d49;
  background:#102d25;
  color:#72dfa9;
}

[data-theme="dark"] .developer-status[data-kind="error"]{
  border-color:#6a3944;
  background:#321d24;
  color:#ff979e;
}

[data-theme="dark"] .developer-button--secondary{
  border-color:#3b70b8;
  background:#101f34;
  color:#b9d4ff;
}

[data-theme="dark"] .developer-button--secondary:hover{background:#172b46}

[data-theme="dark"] .developer-account__after{border-color:#273b55;color:#91a4bd}
[data-theme="dark"] .developer-step p{color:#95a8c0}
[data-theme="dark"] .developer-note{
  border-color:#2a405c;
  background:linear-gradient(90deg,#101e31,#11233b);
}
[data-theme="dark"] .developer-note__bulb{
  border-color:#304863;
  background:#14243a;
}
[data-theme="dark"] .developer-note__points{color:#a4b6cb}

/* =========================
   RESPONSIVE
   ========================= */

@media(max-width:900px){
  .developer-main{
    width:min(100% - 24px,1160px);
    padding-top:24px;
  }

  .developer-hero{
    grid-template-columns:minmax(0,1fr) 260px;
    padding:30px 30px 25px;
  }

  .developer-hero__visual{min-height:190px}

  .developer-visual__browser{left:24px}
  .developer-visual__football{right:6px}
  .developer-visual__code{left:138px}
  .developer-visual__bars{right:0}

  .developer-benefits{
    grid-template-columns:repeat(5,minmax(120px,1fr));
    overflow-x:auto;
    scrollbar-width:none;
  }

  .developer-benefits::-webkit-scrollbar{display:none}
}

@media(max-width:700px){
  .developer-main{
    width:min(100% - 18px,1160px);
    padding:14px 0 28px;
  }

  .developer-hero{
    display:block;
    padding:24px 18px 18px;
    border-radius:15px;
  }

  .developer-hero__content{text-align:center}

  .developer-eyebrow{margin-bottom:13px}

  .developer-hero h1{
    max-width:460px;
    margin-inline:auto;
    font-size:clamp(2rem,9vw,2.65rem);
  }

  .developer-hero__lead{
    max-width:470px;
    margin:14px auto 0;
    font-size:.9rem;
  }

  .developer-hero__visual{
    width:270px;
    min-height:120px;
    margin:18px auto 0;
    opacity:.9;
  }

  .developer-visual__browser{
    left:28px;
    top:0;
    width:140px;
    height:104px;
  }

  .developer-visual__browser strong{margin-bottom:10px;font-size:1.1rem}
  .developer-visual__browser i{margin-top:6px}

  .developer-visual__football{
    right:18px;
    width:50px;
    height:50px;
  }

  .developer-visual__football svg{width:34px;height:34px}

  .developer-visual__code{
    left:132px;
    bottom:0;
    width:56px;
    height:45px;
    font-size:1.15rem;
  }

  .developer-visual__bars,
  .developer-visual__wire{display:none}

  .developer-benefits{
    grid-template-columns:repeat(5,150px);
    margin-top:18px;
    border-radius:9px;
  }

  .developer-benefit{
    min-height:43px;
    font-size:.72rem;
  }

  .developer-account{
    margin-top:18px;
    padding:21px 17px 17px;
    border-radius:13px;
  }

  .developer-account__title{
    justify-content:center;
  }

  .developer-status{
    margin-top:15px;
    font-size:.72rem;
  }

  .developer-actions{
    grid-template-columns:1fr;
    gap:8px;
  }

  .developer-button{min-height:44px}

  .developer-process{margin-top:19px}
  .developer-process > h2{margin-bottom:13px}

  .developer-process__grid{
    grid-template-columns:1fr;
    gap:9px;
  }

  .developer-step-arrow{display:none}

  .developer-step{
    min-height:0;
    padding:16px 16px 14px 92px;
  }

  .developer-step__number{
    left:14px;
    top:16px;
  }

  .developer-step__icon{
    position:absolute;
    left:52px;
    top:14px;
    width:30px;
    height:30px;
    margin:0;
    font-size:1.2rem;
  }

  .developer-step__icon svg{width:24px;height:24px}

  .developer-note{
    display:block;
    margin-top:14px;
    padding:13px 15px;
  }

  .developer-note__title{
    justify-content:center;
  }

  .developer-note__points{
    justify-content:center;
    flex-wrap:wrap;
    gap:8px 18px;
    margin-top:10px;
  }
}

@media(max-width:390px){
  .developer-main{width:min(100% - 14px,1160px)}

  .developer-hero{padding-inline:14px}

  .developer-hero h1{font-size:2rem}

  .developer-hero__lead br{display:none}

  .developer-hero__visual{
    width:240px;
  }

  .developer-visual__browser{
    left:16px;
    width:132px;
  }

  .developer-visual__code{left:116px}

  .developer-benefits{
    grid-template-columns:repeat(5,138px);
  }

  .developer-account__title h2{font-size:.95rem}

  .developer-account__after{
    align-items:flex-start;
    text-align:left;
  }
}