.rb-four-squares{font-size:15px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.rb-four-squares{margin:0;border-radius:0;min-height:100dvh}
.rb-four-squares{--bg:#101414;--card:#191f1e;--ink:#f0f4ef;--muted:#a6b3ad;--accent:#c3dda3;--line:#35413b;--soft:#222d26;--radius:20px;--diagram:#121a16;background:var(--bg);color:var(--ink);margin:0 18px;border-radius:12px;overflow:hidden;min-width:0}
.rb-four-squares .service-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:27px;position:relative;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;transition:border-color .25s,transform .25s;animation:rb-four-squares-platform-enter .5s both;animation-delay:calc(var(--order)*65ms)}
.rb-four-squares .service-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.rb-four-squares .card-top{display:flex;align-items:center;gap:10px;margin-bottom:17px}
.rb-four-squares .service-icon{width:35px;height:35px;display:grid;place-items:center;background:var(--soft);border:1px solid var(--line);border-radius:10px;color:var(--accent)}
.rb-four-squares .service-icon .icon{width:21px;height:21px}
.rb-four-squares .service-tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rb-four-squares .icon{display:inline-block;width:20px;height:20px;background:currentColor;mask:var(--icon) center/contain no-repeat;-webkit-mask:var(--icon) center/contain no-repeat;flex-shrink:0;vertical-align:middle}
.rb-four-squares .card-copy h3{font-size:25px;line-height:1.15;letter-spacing:-.045em;margin:0 0 13px;font-weight:500;max-width:420px}
.rb-four-squares .card-copy p{font-size:13px;line-height:1.65;color:var(--muted);margin:0 0 10px;max-width:550px}
.rb-four-squares .card-link{font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:space-between;padding-top:18px;border-top:1px solid var(--line);margin-top:18px;gap:16px}
.rb-four-squares .card-link .icon{width:17px;height:17px;color:var(--accent);transition:transform .25s}
.rb-four-squares .card-link:hover .icon{transform:translate(3px,-3px)}
.rb-four-squares .screen-foot .icon{width:14px;height:14px}
.rb-four-squares .visual{align-self:end;margin-top:24px;min-height:153px;background:var(--diagram);border-radius:12px;display:flex;flex-direction:column;justify-content:center;position:relative;padding:18px;overflow:hidden;color:var(--accent)}
.rb-four-squares{--bg:#172127;--card:#1d2c34;--ink:#edf5f8;--muted:#adc1cc;--accent:#93d1e2;--line:#3a535f;--soft:#263e48;--diagram:#192831;--radius:24px}
.rb-four-squares .service-card{padding:30px}
.rb-four-squares .visual{background:none;border-top:1px solid var(--line);border-radius:0}
.rb-four-squares .service-icon{border-radius:50%}
.rb-four-squares{--bg:#08090b;
  --card:#121418;
  --ink:#f4f5f7;
  --muted:#b0b4bf;
  --accent:#becaff;
  --line:#2b2e36;
  --soft:#1a1e28;
  --diagram:#0f1116;}
.rb-four-squares .card-framework{--accent:#9aafff;--soft:#20263c}
.rb-four-squares .card-designer{--accent:#84dec2;--soft:#182e29}
.rb-four-squares .service-card{isolation:isolate;
  background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 55%),var(--card);
  border-color:color-mix(in srgb,var(--accent) 18%,#22252b);
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;}
.rb-four-squares .service-card:hover{transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--accent) 55%,#22252b);
  box-shadow:0 16px 38px #0005;}
.rb-four-squares .service-tag{color:var(--accent)}
.rb-four-squares .service-icon{width:42px;height:42px;
  border-color:color-mix(in srgb,var(--accent) 28%,transparent);
  transition:transform .35s ease;}
.rb-four-squares .service-card:hover .service-icon{transform:rotate(-7deg)}
.rb-four-squares .card-copy h3{letter-spacing:-.04em}
.rb-four-squares .visual{border-color:color-mix(in srgb,var(--accent) 15%,#202329);
  min-height:183px;
  padding-top:25px;}
.rb-four-squares .card-link{border-color:#2b2e36}
.rb-four-squares .card-link:hover{color:var(--accent)}
.rb-four-squares{margin:0;border-radius:0;scroll-margin-top:95px}
.rb-four-squares .service-card{animation:none}
.rb-four-squares .card-link{color:var(--ink)}
.rb-four-squares{--bg:#05060a;background:#05060a}
.rb-four-squares .service-card{background:linear-gradient(145deg,var(--g1) 0%,var(--g1) 11%,var(--g2) 31%,#05060a 54%,#05060a 100%);background-size:190% 190%;background-position:0% 0%;animation:rb-four-squares-tilegrad 11s ease-in-out infinite alternate;border-color:rgba(255,255,255,.1)}
.rb-four-squares .card-copy p{color:#d5dcf2}
.rb-four-squares .service-tag{font-size:13px}
.rb-four-squares .card-framework{--accent:#b79bff;--soft:#2a2150;--g1:#7a3df0;--g2:#3d1a8f}
.rb-four-squares .card-designer{--accent:#6fdcb6;--soft:#15362c;--g1:#0f9d72;--g2:#07573f}
.rb-four-squares .card-copy p{color:#eef1fa}
.rb-four-squares .service-tag{color:#fff;opacity:.92}
.rb-four-squares .service-icon{background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.25)}
.rb-four-squares .card-designer{animation-delay:-6s}
.rb-four-squares{position:relative}
.rb-four-squares{font-family:'DM Sans',system-ui,'Segoe UI',sans-serif;min-height:0;margin:0;border-radius:0;line-height:1.5}
.rb-four-squares .service-card{cursor:pointer}
.rb-four-squares .card-framework,.rb-four-squares .card-solutions{display:flex!important;flex-direction:column}
.rb-four-squares .card-framework .visual,.rb-four-squares .card-solutions .visual{margin:0;border:0;padding:0;align-self:stretch!important;width:auto!important;background:none!important;border-radius:0}
.rb-four-squares .card-framework .gem-wrap{overflow:visible!important}
.rb-four-squares .card-framework{background:radial-gradient(120% 90% at 50% 50%,#0d0e18 0%,#07070d 60%,#050509 100%)!important;animation:none!important}
.rb-four-squares .card-framework .card-copy h3{font-size:24px!important;margin:0!important}
.rb-four-squares .card-framework .gem-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;min-height:150px;position:relative;z-index:1}
.rb-four-squares .gem{position:relative;width:min(92%,470px)}
.rb-four-squares .gem .gbw{position:absolute;inset:-34px -44px;pointer-events:none}
.rb-four-squares .gem .gb{position:absolute;inset:0;filter:blur(34px);opacity:.95}
.rb-four-squares .gem .gb i{position:absolute;border-radius:50%;display:block}
.rb-four-squares .gem .gA{animation:rb-four-squares-gfa 9s ease-in-out infinite alternate}
.rb-four-squares .gem .gB{animation:rb-four-squares-gfb 9s ease-in-out infinite alternate}
.rb-four-squares .gem .gA .b1{left:0;top:-10%;width:42%;height:130%;background:radial-gradient(closest-side,#3f86ff 25%,transparent);animation:rb-four-squares-gm1 11s ease-in-out infinite alternate}
.rb-four-squares .gem .gA .b2{left:25%;top:-35%;width:42%;height:150%;background:radial-gradient(closest-side,#8f5cff 25%,transparent);animation:rb-four-squares-gm2 13s ease-in-out infinite alternate}
.rb-four-squares .gem .gA .b3{left:52%;top:-5%;width:40%;height:130%;background:radial-gradient(closest-side,#ff4f9a 25%,transparent);animation:rb-four-squares-gm3 12s ease-in-out infinite alternate}
.rb-four-squares .gem .gA .b4{left:68%;top:-30%;width:34%;height:150%;background:radial-gradient(closest-side,#21d4c4 25%,transparent);animation:rb-four-squares-gm4 14s ease-in-out infinite alternate}
.rb-four-squares .gem .gB .b1{left:0;top:-30%;width:42%;height:150%;background:radial-gradient(closest-side,#21d4c4 25%,transparent);animation:rb-four-squares-gm3 12s ease-in-out infinite alternate}
.rb-four-squares .gem .gB .b2{left:24%;top:-5%;width:42%;height:130%;background:radial-gradient(closest-side,#ff4f9a 25%,transparent);animation:rb-four-squares-gm1 10s ease-in-out infinite alternate}
.rb-four-squares .gem .gB .b3{left:50%;top:-35%;width:42%;height:150%;background:radial-gradient(closest-side,#3f86ff 25%,transparent);animation:rb-four-squares-gm4 13s ease-in-out infinite alternate}
.rb-four-squares .gem .gB .b4{left:68%;top:-10%;width:34%;height:130%;background:radial-gradient(closest-side,#a56bff 25%,transparent);animation:rb-four-squares-gm2 11s ease-in-out infinite alternate}
.rb-four-squares .gem .rim{position:absolute;inset:-1.5px;border-radius:999px;background:linear-gradient(90deg,#3f86ff,#8f5cff,#ff4f9a,#21d4c4,#3f86ff,#8f5cff);background-size:300% 100%;animation:rb-four-squares-grim 8s linear infinite;opacity:.9}
.rb-four-squares .gem .inp{position:relative;height:64px;border-radius:999px;background:linear-gradient(#10111a,#0b0c13);display:flex;align-items:center;gap:12px;padding:0 10px 0 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.rb-four-squares .gem .pl,.rb-four-squares .gem .sd{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;border:0;padding:0}
.rb-four-squares .gem .pl{background:rgba(255,255,255,.07);color:#d8dcf0}
.rb-four-squares .gem .sd{background:linear-gradient(135deg,#4c8dff,#a56bff 55%,#ff5fa2);color:#fff;box-shadow:0 4px 18px rgba(130,100,255,.5);cursor:pointer}
.rb-four-squares .gem input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#eef0ff;font:inherit;font-size:17px}
.rb-four-squares .gem input::placeholder{color:rgba(230,234,255,.62)}
.rb-four-squares .gem .mic{color:#aab0cc;display:grid;place-items:center;width:30px;flex:none}
.rb-four-squares .gchips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;position:relative}
.rb-four-squares .gchips a{font-size:13px;color:rgba(235,238,255,.85);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);padding:7px 13px;border-radius:999px;display:flex;gap:6px;align-items:center;text-decoration:none}
.rb-four-squares .gchips a:hover{border-color:rgba(160,180,255,.5)}
.rb-four-squares .gchips svg{color:#9fb4ff}
.rb-four-squares .card-solutions .card-top{position:absolute;left:24px;top:24px;z-index:3;background:rgba(6,12,36,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:5px 12px 5px 6px;border-radius:99px;border:1px solid rgba(255,255,255,.14);margin:0!important}
.rb-four-squares .card-solutions .card-copy{margin-top:12px}
.rb-four-squares .card-solutions .card-copy h3{margin:0 0 4px!important;font-size:30px!important}
.rb-four-squares .card-solutions .card-top{display:none!important}
.rb-four-squares .card-solutions .card-copy{margin-top:8px!important}
.rb-four-squares .card-solutions .card-copy h3{font-size:26px!important;margin:0 0 2px!important}
.rb-four-squares .card-solutions .card-link{margin-top:6px!important;padding-top:10px!important}
.rb-four-squares .card-designer{padding:0!important;overflow:hidden;background:#05060a!important;animation:none!important;display:block!important}
.rb-four-squares .card-designer .cd-anim{position:absolute;inset:0;pointer-events:none}
.rb-four-squares .card-designer .cd-anim iframe{width:100%;height:100%;border:0;display:block;background:#05060a}
.rb-four-squares .card-designer .card-top{position:absolute;left:14px;top:14px;z-index:3;margin:0!important;background:rgba(5,8,14,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:5px 12px 5px 6px;border-radius:99px;border:1px solid rgba(25,192,142,.35)}
.rb-four-squares .card-designer .card-link{position:absolute!important;left:auto!important;right:14px;bottom:12px;z-index:3;margin:0!important;padding:7px 14px!important;border:1px solid rgba(25,192,142,.4)!important;border-radius:99px;background:rgba(5,8,14,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);width:auto!important}
.rb-four-squares .card-designer .cd-hit{position:absolute;inset:0;z-index:2}
.rb-four-squares .card-team .card-top{position:absolute;right:14px;left:auto;top:14px;z-index:3;margin:0!important;padding:5px 12px 5px 6px!important;background:rgba(7,8,12,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:99px;border:1px solid rgba(255,214,102,.35)}
.rb-four-squares .card-team .card-top{display:flex!important;left:82px!important;right:auto!important;top:14px!important}
.rb-four-squares .card-team .card-link{position:absolute!important;left:auto!important;right:14px;bottom:12px;z-index:3;margin:0!important;padding:7px 14px!important;border:1px solid rgba(255,214,102,.4)!important;border-radius:99px;background:rgba(7,8,12,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);width:auto!important}
.rb-four-squares .card-designer,.rb-four-squares .card-team{min-height:240px}
@keyframes rb-four-squares-platform-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes rb-four-squares-platform-connected-orbit{to{rotate:360deg}}
@keyframes rb-four-squares-hubc2{0%,14.58%{opacity:0;animation-timing-function:ease-in-out}25%,75%{opacity:1}75.01%,100%{opacity:0}}
@keyframes rb-four-squares-hubc3{0%,39.58%{opacity:0;animation-timing-function:ease-in-out}50%,75%{opacity:1}75.01%,100%{opacity:0}}
@keyframes rb-four-squares-hubc4{0%,64.58%{opacity:0;animation-timing-function:ease-in-out}75%,89.58%{opacity:1;animation-timing-function:ease-in-out}100%{opacity:0}}
@keyframes rb-four-squares-hubdrift{0%{transform:translate(-7%,-5%) rotate(0deg) scale(1)}50%{transform:translate(6%,4%) rotate(140deg) scale(1.08)}100%{transform:translate(-3%,7%) rotate(300deg) scale(1)}}
@keyframes rb-four-squares-tilegrad{0%{background-position:0% 0%}50%{background-position:30% 14%}100%{background-position:8% 34%}}
@keyframes rb-four-squares-gfa{0%{opacity:1}100%{opacity:.15}}
@keyframes rb-four-squares-gfb{0%{opacity:.15}100%{opacity:1}}
@keyframes rb-four-squares-gm1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40px,18px) scale(1.15)}}
@keyframes rb-four-squares-gm2{0%{transform:translate(20px,10px) scale(1.1)}100%{transform:translate(-30px,-14px) scale(.9)}}
@keyframes rb-four-squares-gm3{0%{transform:translate(0,12px) scale(.95)}100%{transform:translate(-44px,-10px) scale(1.2)}}
@keyframes rb-four-squares-gm4{0%{transform:translate(-10px,0) scale(1.05)}100%{transform:translate(30px,16px) scale(.9)}}
@keyframes rb-four-squares-grim{0%{background-position:0 0}100%{background-position:-300% 0}}
.rb-four-squares .card-link>span:first-child{min-width:0}

/* ---- App Dev: 3 ways to build (reuses the start-page card look above) ---- */
.bw-sec{background:#05060a;padding:72px 18px 80px}
.bw-sec .bw-head{max-width:1180px;margin:0 auto 34px;text-align:center;color:#f0f4ef;font-family:'DM Sans',system-ui,'Segoe UI',sans-serif}
.bw-sec .bw-head .eb{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#b79bff}
.bw-sec .bw-head h2{margin:0;font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-.03em;color:#fff}
.bw-sec .bw-head p{margin:12px auto 0;max-width:640px;color:#a6b3ad;font-size:17px;line-height:1.55}
.rb-four-squares.bw{max-width:1180px;margin:0 auto;background:transparent;overflow:visible}
.bw .bw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bw .bw-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.bw .service-card{min-height:360px}
.bw .bw-n{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:8px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:13px;font-weight:700}
.bw .card-framework .gem-wrap{min-height:200px}
.bw .card-mix{--accent:#93c5ff;padding:0!important;overflow:hidden;display:block!important;background:#05060a!important;animation:none!important}
.bw .card-mix .mix-pic{position:absolute;inset:0;background:#0b0c12 center/cover no-repeat}
.bw .card-mix .mix-pic:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,10,.15) 0%,rgba(5,6,10,.25) 45%,rgba(5,6,10,.92) 100%)}
.bw .card-mix .card-top{position:absolute;left:14px;top:14px;z-index:3;margin:0!important;background:rgba(5,8,14,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:5px 12px 5px 6px;border-radius:99px;border:1px solid rgba(147,197,255,.35)}
.bw .card-mix .mix-ai{position:absolute;left:18px;right:18px;bottom:64px;z-index:3}
.bw .card-mix .mix-ai .gem{max-width:none}
.bw .card-mix .card-link{position:absolute!important;left:auto!important;right:14px;bottom:12px;z-index:3;margin:0!important;padding:7px 14px!important;border:1px solid rgba(147,197,255,.4)!important;border-radius:99px;background:rgba(5,8,14,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);width:auto!important}
.bw .card-mix .cd-hit{position:absolute;inset:0;z-index:2}
.bw .card-designer{min-height:360px}
.bw .pc{background:#0d0f16;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:20px 22px;color:#e9ecf2;font-family:'DM Sans',system-ui,'Segoe UI',sans-serif}
.bw .pc h4{margin:0 0 10px;font-size:16px;color:#fff}
.bw .pc ul{list-style:none;margin:0 0 14px;padding:0}
.bw .pc ul:last-child{margin-bottom:0}
.bw .pc li{position:relative;padding:5px 0 5px 28px;font-size:15px;line-height:1.45;color:#c9cfdb}
.bw .pc li:before{position:absolute;left:0;top:6px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:800;line-height:1}
.bw .pc .plus li:before{content:"+";background:rgba(52,211,153,.16);color:#34d399}
.bw .pc .minus li:before{content:"\2212";background:rgba(248,113,113,.16);color:#f87171}
.bw .pc .best{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font-size:14px;color:#a6b3ad}
.bw .pc .best b{color:#fff}
@media(max-width:980px){.bw .bw-grid{grid-template-columns:1fr}.bw .service-card,.bw .card-designer{min-height:340px}}
.bw .bw-col{display:contents}
.bw .bw-grid{grid-template-rows:auto auto;grid-auto-flow:column}
.bw .bw-grid>.bw-col>.service-card{grid-row:1;min-height:380px}
.bw .bw-grid>.bw-col>.pc{grid-row:2}
.bw .card-link,.bw .card-link span{text-decoration:none!important}
@media(max-width:980px){.bw .bw-col{display:flex}.bw .bw-grid{grid-auto-flow:row;grid-template-rows:none}.bw .bw-grid>.bw-col>.service-card,.bw .bw-grid>.bw-col>.pc{grid-row:auto}}
.bw .card-mix .cd-anim{position:absolute;inset:0;pointer-events:none}
.bw .card-mix .cd-anim iframe{width:100%;height:100%;border:0;display:block;background:#05060a}
.bw .card-mix .mix-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,6,10,0) 45%,rgba(5,6,10,.55) 75%,rgba(5,6,10,.85) 100%)}
.bw .card-mix{border-color:rgba(147,197,255,.25)}
.bw .service-card{overflow:hidden}