.devtools-home{
  position:relative;padding:112px 7.4vw 126px;background:#fff;color:#111a2b;overflow:hidden;
}
.devtools-home__head{width:min(100%,760px);margin:0 auto 58px;text-align:left}
.devtools-home__head .eyebrow{margin-bottom:16px}
.devtools-home__head h2{margin:0;font-size:clamp(3rem,4.4vw,5.1rem);line-height:1.02;letter-spacing:-.052em}
.devtools-home__head h2 span{color:#1764ff}
.devtools-home__head>p{max-width:680px;margin:22px 0 0;color:#657187;font-size:1rem;line-height:1.65}
.devtools-home__grid{width:min(100%,1320px);margin:0 auto;display:grid;grid-template-columns:1fr 1.04fr 1fr;gap:20px;align-items:stretch}
.devtools-home__middle{display:grid;grid-template-rows:.72fr 1.28fr;gap:20px}
.devtools-card{position:relative;display:flex;min-width:0;border:1px solid #dfe8f5;border-radius:17px;background:#fff;color:inherit;text-decoration:none;overflow:hidden;box-shadow:0 20px 55px rgba(27,58,110,.055);transition:transform .36s cubic-bezier(.2,.75,.2,1),box-shadow .36s ease,border-color .36s ease}
.devtools-card:hover,.devtools-card:focus-visible{transform:translateY(-7px);border-color:#aec8f8;box-shadow:0 26px 65px rgba(30,84,180,.14);outline:none}
.devtools-card__arrow{position:absolute;z-index:4;top:16px;right:18px;color:#7d8797;font-size:1.35rem;transition:color .25s ease,transform .25s ease}
.devtools-card:hover .devtools-card__arrow,.devtools-card:focus-visible .devtools-card__arrow{color:#1764ff;transform:translate(3px,-3px)}
.devtools-card--tall{min-height:650px;flex-direction:column}
.devtools-card--sdk .devtools-visual{height:410px}
.devtools-card--gateway{justify-content:space-between}
.devtools-card__copy{position:relative;z-index:2;padding:31px 32px 32px}
.devtools-card__copy h3{margin:13px 0 12px;font-size:clamp(1.25rem,1.55vw,1.58rem);line-height:1.18;letter-spacing:-.025em}
.devtools-card__copy p{margin:0;color:#687387;font-size:.95rem;line-height:1.58}
.devtools-status{display:inline-flex;align-items:center;gap:7px;color:#66758b;font-size:.68rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.devtools-status:before{content:"";width:7px;height:7px;border-radius:50%;background:#8fa0b8}
.devtools-status--live:before{background:#16b981}.devtools-status--build:before{background:#1764ff}.devtools-status--spec:before{background:#7657e8}.devtools-status--plan:before{background:#f0a029}
.devtools-visual{position:relative;display:grid;place-items:center;width:100%}
.devtools-visual{transition:transform .5s cubic-bezier(.2,.75,.2,1)}
.devtools-card:hover .devtools-visual,.devtools-card:focus-visible .devtools-visual{transform:scale(1.035)}
.devtools-card--sdk .devtools-card__copy{margin-top:auto}
.devtools-card--api{min-height:238px;align-items:center;padding-right:125px}
.devtools-card--api .devtools-card__copy{padding-right:0}
.devtools-official-icon{position:absolute;right:31px;bottom:32px;display:grid;place-items:center;width:88px;height:88px;border:1px solid #d9e8fb;border-radius:24px;background:linear-gradient(145deg,#fff,#e9f4ff);box-shadow:0 16px 34px rgba(23,100,255,.12)}
.devtools-official-icon img{width:52px;height:52px;filter:invert(32%) sepia(94%) saturate(3444%) hue-rotate(215deg) brightness(101%) contrast(103%)}
.devtools-card--docs{min-height:392px;flex-direction:column}
.devtools-card--docs .devtools-card__copy{padding-bottom:10px}
.devtools-docs-brand{position:relative;width:238px;height:170px;margin:auto 34px 24px auto}
.devtools-doc-sheet{position:absolute;width:124px;height:152px;border:1px solid #b9d2f2;border-radius:15px;background:linear-gradient(145deg,#fff,#e8f3ff);box-shadow:0 18px 35px rgba(29,105,192,.12)}
.devtools-doc-sheet--back{left:65px;top:1px;transform:rotate(8deg)}
.devtools-doc-sheet--front{left:28px;top:10px;transform:rotate(-5deg);padding:37px 22px}
.devtools-doc-sheet--front i{display:block;height:5px;margin:0 0 15px;border-radius:999px;background:#84b8f7}.devtools-doc-sheet--front i:nth-child(2){width:72%}.devtools-doc-sheet--front i:nth-child(3){width:86%}
.devtools-github-mark{position:absolute;z-index:3;right:0;bottom:4px;display:grid;place-items:center;width:82px;height:82px;border-radius:25px;background:#101827;box-shadow:0 18px 35px rgba(16,24,39,.23)}
.devtools-github-mark img{width:49px;height:49px;filter:invert(1)}
.devtools-card--gateway .devtools-card__copy{padding-bottom:4px}
.devtools-card--gateway .devtools-visual{height:390px;margin-top:auto}
.devtools-brand-visual{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(52,139,255,.14),transparent 47%)}
.devtools-brand-orbit{position:absolute;width:250px;height:250px;border:1px solid rgba(23,100,255,.18);border-radius:50%;box-shadow:0 0 0 38px rgba(23,100,255,.035),0 0 0 76px rgba(23,100,255,.025)}
.devtools-brand-icon{position:relative;z-index:2;display:grid;place-items:center;width:154px;height:154px;border:1px solid #d9e8fb;border-radius:38px;background:linear-gradient(145deg,#fff,#e8f4ff);box-shadow:0 28px 55px rgba(24,91,186,.18);transform:rotate(-5deg)}
.devtools-brand-icon img{width:92px;height:92px;filter:invert(32%) sepia(95%) saturate(3080%) hue-rotate(211deg) brightness(99%) contrast(103%)}
.devtools-code-lines{position:absolute;right:24px;bottom:36px;display:grid;gap:8px;width:132px;padding:16px;border:1px solid rgba(185,210,242,.85);border-radius:14px;background:rgba(255,255,255,.84);box-shadow:0 14px 30px rgba(29,105,192,.1);backdrop-filter:blur(8px)}
.devtools-code-lines i{height:5px;border-radius:99px;background:#72acf3}.devtools-code-lines i:nth-child(2){width:72%}.devtools-code-lines i:nth-child(3){width:87%}.devtools-code-lines i:nth-child(4){width:55%}
.devtools-tech-label{position:absolute;left:25px;bottom:25px;color:#1764ff;font-size:.65rem;font-weight:900;letter-spacing:.13em}
.devtools-gateway-visual{position:relative;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:25px 34px 38px;background:radial-gradient(circle at 50% 45%,rgba(37,202,221,.14),transparent 52%)}
.devtools-gateway-stack{position:relative;width:230px;height:152px}.devtools-gateway-stack span{position:absolute;left:15px;width:200px;height:78px;border:2px solid #64d9ea;border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(142,230,242,.5));box-shadow:0 16px 28px rgba(38,158,191,.11);transform:rotateX(58deg) rotateZ(-1deg)}.devtools-gateway-stack span:nth-child(1){top:0}.devtools-gateway-stack span:nth-child(2){top:38px}.devtools-gateway-stack span:nth-child(3){top:76px}
.devtools-gateway-brands{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:20px}.devtools-gateway-brands span{display:grid;place-items:center;width:78px;height:78px;border:1px solid #d9e8fb;border-radius:23px;background:#fff;box-shadow:0 16px 34px rgba(27,91,166,.13)}.devtools-gateway-brands img{width:45px;height:45px;filter:invert(32%) sepia(94%) saturate(3444%) hue-rotate(215deg) brightness(101%) contrast(103%)}.devtools-gateway-brands i{width:36px;height:1px;background:#99bce9;position:relative}.devtools-gateway-brands i:after{content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px;border-top:1px solid #99bce9;border-right:1px solid #99bce9;transform:rotate(45deg)}
.devtools-gateway-visual .devtools-tech-label{bottom:21px}
@supports(animation-timeline:view()){
  .devtools-card{opacity:.15;transform:translateY(42px);animation:devtoolsReveal both linear;animation-timeline:view();animation-range:entry 12% cover 34%}
  .devtools-card:nth-child(3){animation-range:entry 18% cover 40%}
}
@keyframes devtoolsReveal{to{opacity:1;transform:translateY(0)}}
@media(max-width:1020px){.devtools-home__grid{grid-template-columns:1fr 1fr}.devtools-card--gateway{grid-column:1/-1;min-height:520px;display:grid;grid-template-columns:1fr 1fr;align-items:center}.devtools-card--gateway .devtools-visual{height:440px}}
@media(max-width:720px){.devtools-home{padding:82px 5vw 90px}.devtools-home__head{margin-bottom:38px}.devtools-home__head h2{font-size:clamp(2.55rem,12vw,3.65rem)}.devtools-home__grid{grid-template-columns:1fr}.devtools-card--tall{min-height:560px}.devtools-home__middle{grid-template-rows:auto}.devtools-card--api{min-height:250px}.devtools-card--docs{min-height:380px}.devtools-card--gateway{grid-column:auto;display:flex;min-height:570px}.devtools-card__copy{padding:27px 26px}.devtools-card--sdk .devtools-visual{height:350px}.devtools-card--gateway .devtools-visual{height:350px}.devtools-home .page-section-index{top:45px}}
@media(prefers-reduced-motion:reduce){.devtools-card,.devtools-visual{transition:none!important;animation:none!important;opacity:1!important;transform:none!important}}