:root{--dev-navy:#061238;--dev-blue:#087ef5;--dev-cyan:#31d7f4;--dev-pale:#f2f7fc;--dev-line:#d6e2ef;--dev-text:#526078}.web-development-page{overflow-x:hidden;color:var(--dev-navy);background:#fff}.dev-section{position:relative;padding:112px 0;scroll-margin-top:90px}.dev-section.dark{color:#fff;background:var(--dev-navy)}.dev-section h1,.dev-section h2,.dev-section h3,.dev-section b,.dev-section strong{font-family:Manrope,sans-serif}.dev-section h2{margin:0;font-size:clamp(2.15rem,4.3vw,4.4rem);line-height:1.05;letter-spacing:-.055em}.dev-section p{line-height:1.75}.dev-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 22px;color:var(--dev-blue);font:800 .69rem/1 Manrope;letter-spacing:.17em}.dev-eyebrow i{width:38px;height:2px;background:linear-gradient(90deg,var(--dev-blue),var(--dev-cyan));transform-origin:left}.dark .dev-eyebrow{color:#72dff5}.section-copy>p:last-of-type,.section-head>p:last-child{max-width:650px;color:var(--dev-text);font-size:.96rem;margin:24px 0 0}.dark .section-copy>p:last-of-type{color:#afbed6}.section-head{max-width:880px;margin-bottom:60px}.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(470px,1.1fr);gap:8vw;align-items:center}.text-link{display:inline-flex;gap:8px;align-items:center;margin-top:28px;color:var(--dev-blue);font:800 .75rem Manrope;letter-spacing:.05em}.text-link span,.dev-section .btn span,.related-grid a span{transition:transform .2s}.text-link:hover span,.text-link:focus-visible span,.dev-section .btn:hover span,.dev-section .btn:focus-visible span{transform:translateX(4px)}button{font:inherit}.hero-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(520px,.9fr);gap:6vw;align-items:center}.dev-hero{min-height:calc(100vh - 76px);padding:110px 0 86px;display:flex;align-items:center;background:radial-gradient(circle at 78% 30%,#e2f5ff 0,transparent 31%),linear-gradient(135deg,#fff 68%,#f4f9ff)}.hero-grid-bg{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(#b6d4f1 1px,transparent 1px),linear-gradient(90deg,#b6d4f1 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,transparent 35%,#000)}.hero-copy{position:relative;z-index:1}.hero-copy h1{margin:0;max-width:760px;font-size:clamp(3.05rem,5.2vw,5.8rem);line-height:.98;letter-spacing:-.065em}.hero-copy h1 span{display:block;overflow:hidden}.hero-copy h1 i{display:block;font-style:normal}.dev-lead{max-width:690px;margin:30px 0;color:var(--dev-text);font-size:1.02rem}.hero-copy .text-link{display:flex;width:max-content}.hero-architecture{position:relative;padding:34px 42px;background:rgba(255,255,255,.82);border:1px solid #cbdceb;box-shadow:0 28px 70px rgba(13,49,98,.11);clip-path:polygon(0 0,94% 0,100% 8%,100% 100%,6% 100%,0 92%)}.hero-architecture:before{content:"PLATFORM ARCHITECTURE / 01";display:block;margin-bottom:25px;color:#7789a3;font:700 .59rem Manrope;letter-spacing:.16em}.module{position:relative;border:1px solid #b8cce0;background:#fff;color:var(--dev-navy);text-align:center}.module small,.module span{display:block;color:#73839b;font:700 .55rem Manrope;letter-spacing:.12em}.module b{display:block;font-size:.76rem;letter-spacing:.07em}.arch-top{width:54%;padding:12px;margin:auto}.arch-app{padding:17px}.arch-app small{margin-bottom:5px}.vline{display:block;width:1px;height:20px;margin:auto;background:var(--dev-blue)}.arch-branch{display:flex;justify-content:space-around;height:22px;border-top:1px solid var(--dev-blue);margin:0 20%}.arch-branch i{width:1px;height:22px;background:var(--dev-blue)}.arch-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}.arch-pair button{padding:17px;cursor:pointer}.arch-pair span{margin-top:5px}.arch-api{display:block;width:70%;padding:13px;margin:0 auto;cursor:pointer}.arch-data{padding:13px}.arch-data span{margin-top:4px}.hero-architecture button,.requirement-inputs button,.layer-stack button,.fb-system button,.integration-map button,.scale-system button,.technology-list button,.design-flow button{transition:transform .25s,border-color .25s,background .25s,color .25s,box-shadow .25s}.hero-architecture button:hover,.hero-architecture button:focus-visible{border-color:var(--dev-blue);background:#edf7ff;transform:translateY(-2px);outline:0}.data-line{position:relative}.data-line em{position:absolute;width:6px;height:6px;left:-2px;top:0;border-radius:50%;background:var(--dev-cyan)}
.purpose-section{background:var(--dev-pale)}.requirement-system{position:relative;padding:34px;border:1px solid #cbd9e8;background:#fff;clip-path:polygon(0 0,95% 0,100% 12%,100% 100%,0 100%)}.requirement-system>b,.requirement-system>strong{display:block;padding:16px;text-align:center;border:1px solid #bdd0e4;letter-spacing:.08em;font-size:.74rem}.requirement-system>strong{border-color:#7bb7ed;background:#edf7ff;color:var(--dev-blue)}.requirement-inputs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:24px 0}.requirement-inputs button{padding:13px 4px;border:1px solid #d1deeb;background:#fff;color:#53647d;font:700 .57rem Manrope;cursor:pointer}.requirement-inputs button:hover,.requirement-inputs button:focus-visible{border-color:var(--dev-blue);background:#edf7ff;color:var(--dev-blue);transform:translateY(-2px);outline:0}.requirement-path{position:relative;width:1px;height:30px;margin:auto;background:#a9bdd2}.requirement-path em{position:absolute;width:6px;height:6px;left:-2px;border-radius:50%;background:var(--dev-blue)}.requirement-system:has(.requirement-inputs button:hover) strong,.requirement-system:has(.requirement-inputs button:focus-visible) strong{box-shadow:inset 3px 0 var(--dev-blue)}
.capability-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.capability-grid article,.quality-grid article,.principle-grid article{position:relative;padding:30px 25px;border:1px solid var(--dev-line);background:#fff;clip-path:polygon(0 0,92% 0,100% 12%,100% 100%,0 100%);transition:transform .25s,border-color .25s,box-shadow .25s,background .25s}.capability-grid article:after,.quality-grid article:after{content:"";position:absolute;left:24px;bottom:0;width:0;height:2px;background:linear-gradient(90deg,var(--dev-blue),var(--dev-cyan));transition:width .3s}.capability-grid article:hover,.quality-grid article:hover,.principle-grid article:hover{transform:translateY(-4px);border-color:var(--dev-blue);box-shadow:0 12px 26px rgba(22,77,137,.08);background:#f9fcff}.capability-grid article:hover:after,.quality-grid article:hover:after{width:45px}.capability-grid small,.quality-grid small{color:var(--dev-blue);font:800 .56rem Manrope;letter-spacing:.12em}.capability-grid h3,.quality-grid h3,.principle-grid h3{font-size:1rem;margin:22px 0 10px}.capability-grid p,.quality-grid p,.principle-grid p{margin:0;color:var(--dev-text);font-size:.78rem}
.layer-stack{display:flex;flex-direction:column;gap:12px;perspective:900px}.layer-stack button{display:grid;grid-template-columns:35px 1fr auto;align-items:center;text-align:left;padding:24px 28px;border:1px solid #344767;background:#0c1a45;color:#fff;clip-path:polygon(0 0,96% 0,100% 30%,100% 100%,0 100%);cursor:pointer}.layer-stack button:nth-child(1){margin:0 7%}.layer-stack button:nth-child(2){margin:0 5%}.layer-stack button:nth-child(3){margin:0 2.5%}.layer-stack small{color:#56caed}.layer-stack span{color:#879ab8;font-size:.67rem}.layer-stack button:hover,.layer-stack button:focus-visible,.layer-stack button.is-active{border-color:#29bdf0;background:#10275a;transform:translateY(-3px);outline:0;box-shadow:inset 4px 0 var(--dev-blue)}
.connected-section{background:#f5f9fd}.section-head>p{color:var(--dev-text)}.fb-system{display:grid;grid-template-columns:1fr 230px 1fr;align-items:stretch}.fb-side{display:grid;gap:9px;padding:34px;border:1px solid #cbd9e8;background:#fff;color:var(--dev-navy);text-align:left;cursor:pointer}.fb-side small{color:var(--dev-blue);font:800 .56rem Manrope;letter-spacing:.14em}.fb-side b{font-size:1.35rem;margin-bottom:12px}.fb-side span{padding:10px;border-left:2px solid #d6e4f1;color:#5a687e;font-size:.72rem}.fb-contract{position:relative;align-self:center;padding:22px 15px;border:1px solid #7fb8e9;background:#e8f5ff;color:var(--dev-blue);font:800 .62rem Manrope;cursor:pointer}.fb-contract i{position:absolute;top:50%;width:36px;height:1px;background:var(--dev-blue)}.fb-contract i:first-child{right:100%}.fb-contract i:last-child{left:100%}.fb-side:hover,.fb-side:focus-visible,.fb-contract:hover,.fb-contract:focus-visible{border-color:var(--dev-blue);background:#eef7ff;transform:translateY(-3px);outline:0}.fb-system:has(.fb-contract:hover) .fb-side,.fb-system:has(.fb-contract:focus-visible) .fb-side{border-color:#7bb9ed;background:#f7fbff}
.integration-map{display:flex;flex-direction:column;align-items:center}.integration-core{width:62%;padding:28px;border:1px solid #26aee6;background:#0d2454;color:#fff;cursor:pointer}.integration-core small{display:block;margin-bottom:7px;color:#58d3f0;font:700 .57rem Manrope;letter-spacing:.14em}.integration-grid{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;margin-top:48px}.integration-grid:before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:48px;background:#2b8bc7}.integration-grid button{padding:17px;border:1px solid #30486d;background:#091940;color:#b7c7dc;font:700 .62rem Manrope;letter-spacing:.07em;cursor:pointer}.integration-grid button:last-child{grid-column:1/-1;width:50%;justify-self:center}.integration-grid button:hover,.integration-grid button:focus-visible,.integration-core:hover,.integration-core:focus-visible{border-color:var(--dev-cyan);background:#10285a;color:#fff;transform:translateY(-3px);outline:0}.integration-map:has(.integration-core:hover) .integration-grid button{border-color:#326b95;color:#d8edf7}
.quality-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.quality-grid article{padding:26px 28px;clip-path:none}.quality-grid h3{margin:10px 0 5px}.scale-section{background:var(--dev-pale)}.scale-system{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center}.scale-core{aspect-ratio:1;display:grid;place-content:center;border:1px solid var(--dev-blue);background:#fff;color:var(--dev-navy);clip-path:polygon(12% 0,100% 0,100% 88%,88% 100%,0 100%,0 12%);cursor:pointer}.scale-core small,.scale-paths small{display:block;color:var(--dev-blue);font:700 .56rem Manrope;letter-spacing:.12em}.scale-core b{font-size:1rem;margin-top:8px}.scale-paths{display:grid;gap:15px}.scale-paths button{position:relative;padding:22px 20px;border:1px solid #c6d7e7;background:#fff;color:var(--dev-navy);text-align:left;font:800 .7rem Manrope;cursor:pointer}.scale-paths button:before{content:"";position:absolute;right:100%;top:50%;width:29px;height:1px;background:#a7bfd5}.scale-paths small{display:inline;margin-right:15px}.scale-paths button:hover,.scale-paths button:focus-visible,.scale-core:hover,.scale-core:focus-visible{border-color:var(--dev-blue);background:#edf7ff;transform:translateX(3px);outline:0}
.dev-process{position:relative;display:grid;grid-template-columns:repeat(7,1fr);padding:0;margin:0;list-style:none}.dev-process:before{content:"";position:absolute;top:24px;left:6%;right:6%;height:1px;background:#b7cce0}.dev-process li{position:relative;padding:0 11px;cursor:default}.dev-process small{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;margin-bottom:22px;border:1px solid #aac3da;border-radius:50%;background:#fff;color:var(--dev-blue);font:800 .58rem Manrope;transition:.25s}.dev-process b{display:block;font-size:.72rem;letter-spacing:.05em}.dev-process span{display:block;margin-top:9px;color:var(--dev-text);font-size:.69rem;line-height:1.55}.dev-process li:hover small,.dev-process li:focus-visible small{border-color:var(--dev-blue);background:var(--dev-blue);color:#fff;transform:translateY(-3px);box-shadow:0 0 0 6px #e3f2ff}.dev-process li:focus-visible{outline:0}.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.principle-grid article{border-color:#304565;background:#0a1941;color:#fff;clip-path:none}.principle-grid article:hover{border-color:var(--dev-cyan);background:#102452;box-shadow:0 15px 28px rgba(0,0,0,.13)}.principle-grid article>i{display:grid;place-items:center;width:34px;height:34px;border:1px solid #3b587d;color:#51caec;font-style:normal;transition:.25s}.principle-grid article:hover>i{border-color:var(--dev-cyan);background:#153263}.principle-grid p{color:#9fb0ca}
.technology-section{background:#f5f9fd}.technology-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.technology-list button{display:grid;grid-template-columns:35px 1fr auto;align-items:center;padding:21px;border:1px solid #ccd9e7;background:#fff;color:var(--dev-navy);text-align:left;cursor:pointer}.technology-list small{color:var(--dev-blue);font:800 .56rem Manrope}.technology-list b{font-size:.75rem}.technology-list span{color:#7a899c;font-size:.63rem}.technology-list button:hover,.technology-list button:focus-visible{border-color:var(--dev-blue);background:#edf7ff;transform:translateY(-3px);outline:0;box-shadow:inset 3px 0 var(--dev-blue)}.design-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center}.design-flow button{min-height:115px;padding:18px 10px;border:1px solid #c8d7e5;background:#fff;color:var(--dev-navy);cursor:pointer}.design-flow small,.design-flow b{display:block}.design-flow small{color:var(--dev-blue);font-size:.55rem;margin-bottom:10px}.design-flow b{font-size:.62rem}.design-flow>i{color:#7b9bbb;font-style:normal}.design-flow button:hover,.design-flow button:focus-visible{border-color:var(--dev-blue);background:#edf7ff;transform:translateY(-3px);outline:0}.related-section{background:var(--dev-pale)}.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.related-grid a{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;padding:28px;border:1px solid #cbd9e7;background:#fff;color:var(--dev-navy);transition:.25s}.related-grid small{grid-column:1/-1;color:var(--dev-blue);font:800 .56rem Manrope}.related-grid b{font-size:.9rem}.related-grid a:hover,.related-grid a:focus-visible{border-color:var(--dev-blue);background:#edf7ff;transform:translateY(-4px);outline:0}.related-grid a:hover span{transform:translateX(4px)}.final-cta{text-align:center}.final-cta .container{max-width:940px}.final-cta .dev-eyebrow{justify-content:center}.final-cta h2{font-size:clamp(2.5rem,5vw,5rem)}.final-cta p{max-width:720px;margin:26px auto;color:#afbed5}.final-cta .button-row{justify-content:center}
.js-dev [data-reveal]{opacity:0;transform:translateY(24px)}.js-dev [data-reveal].is-visible{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}.js-dev .hero-copy h1 i{transform:translateY(110%)}.js-dev .dev-hero.is-visible .hero-copy h1 i{transform:none;transition:transform .75s cubic-bezier(.22,1,.36,1) .18s}.js-dev .dev-hero.is-visible .hero-copy h1 span+span i{transition-delay:.28s}.js-dev .dev-hero .hero-architecture{opacity:0;transform:translateY(18px)}.js-dev .dev-hero.is-visible .hero-architecture{opacity:1;transform:none;transition:.65s .4s}.js-dev .dev-hero.is-visible .data-line em{animation:dataTravel 1.4s .9s ease-in-out 1 both}.js-dev .layer-stack button{opacity:0;transform:translateY(14px)}.js-dev .architecture-section.is-visible .layer-stack button{opacity:1;transform:none;transition:.45s}.js-dev .architecture-section.is-visible .layer-stack button:nth-child(4){transition-delay:.08s}.js-dev .architecture-section.is-visible .layer-stack button:nth-child(3){transition-delay:.16s}.js-dev .architecture-section.is-visible .layer-stack button:nth-child(2){transition-delay:.24s}.js-dev .architecture-section.is-visible .layer-stack button:nth-child(1){transition-delay:.32s}@keyframes dataTravel{0%{transform:translateY(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(20px);opacity:0}}
@media(max-width:1100px){.dev-section{padding:92px 0}.hero-layout{grid-template-columns:minmax(0,1fr) minmax(420px,.85fr);gap:35px}.hero-copy h1{font-size:clamp(2.7rem,5.7vw,4.8rem)}.split{grid-template-columns:minmax(0,.9fr) minmax(400px,1.1fr);gap:50px}.capability-grid{grid-template-columns:repeat(2,1fr)}.dev-process{grid-template-columns:repeat(4,1fr);gap:35px 0}.dev-process:before{display:none}.fb-system{grid-template-columns:1fr 175px 1fr}.principle-grid{grid-template-columns:repeat(2,1fr)}.related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.dev-section{padding:78px 0}.hero-layout,.split{grid-template-columns:1fr}.dev-hero{min-height:0;padding-top:90px}.hero-layout{gap:55px}.hero-architecture{width:min(620px,100%);margin:auto}.section-copy{order:1}.split>div:last-child{order:2}.section-head{margin-bottom:42px}.fb-system{grid-template-columns:1fr}.fb-contract{width:70%;justify-self:center;margin:34px 0}.fb-contract i{top:auto;left:50%!important;width:1px;height:35px}.fb-contract i:first-child{bottom:100%}.fb-contract i:last-child{top:100%}.dev-process{grid-template-columns:1fr;gap:0;padding-left:24px}.dev-process:before{display:block;top:0;bottom:0;left:47px;right:auto;width:1px;height:auto}.dev-process li{display:grid;grid-template-columns:48px 1fr;column-gap:24px;padding:0 0 30px}.dev-process small{grid-row:1/3;margin:0}.dev-process span{margin-top:5px}.design-flow{grid-template-columns:1fr}.design-flow>i{height:24px;text-align:center;transform:rotate(90deg)}.design-flow button{min-height:80px}.technology-list{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.dev-section{padding:68px 0}.dev-section h2{font-size:2.18rem}.hero-copy h1{font-size:2.72rem}.dev-lead{font-size:.92rem}.hero-copy .button-row{align-items:stretch}.hero-copy .button-row .btn{justify-content:center;width:100%}.hero-architecture{padding:26px 18px;clip-path:none}.hero-architecture:before{font-size:.53rem}.arch-top{width:80%}.arch-branch{display:none}.arch-pair{grid-template-columns:1fr;gap:10px}.arch-pair:before{content:"FRONTEND + BACKEND";padding:14px;border:1px solid var(--dev-blue);background:#edf7ff;color:var(--dev-blue);text-align:center;font:800 .63rem Manrope}.arch-pair button{display:none}.arch-api{width:88%}.split{gap:40px}.section-copy h2 br,.section-head h2 br{display:none}.requirement-system{padding:25px 16px;clip-path:none}.requirement-inputs{grid-template-columns:1fr 1fr}.requirement-inputs button:last-child{grid-column:1/-1}.capability-grid,.quality-grid,.principle-grid,.technology-list,.related-grid{grid-template-columns:1fr}.layer-stack button,.layer-stack button:nth-child(n){margin:0;grid-template-columns:32px 1fr}.layer-stack span{display:none}.integration-core{width:100%}.integration-grid{grid-template-columns:1fr 1fr}.integration-grid button:last-child{width:100%}.scale-system{grid-template-columns:1fr}.scale-core{width:180px;margin:auto}.scale-paths button:before{display:none}.technology-list button{grid-template-columns:30px 1fr}.technology-list span{display:none}.final-cta h2{font-size:2.3rem}.final-cta h2 br{display:none}}
@media(max-width:390px){.hero-copy h1{font-size:2.35rem}.hero-architecture{padding-inline:12px}.integration-grid{grid-template-columns:1fr}.integration-grid button:last-child{grid-column:auto}.capability-grid article,.quality-grid article,.principle-grid article{padding:24px 20px}.related-grid a{padding:24px}.requirement-inputs{grid-template-columns:1fr}.requirement-inputs button:last-child{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.js-dev [data-reveal],.js-dev .hero-copy h1 i,.js-dev .dev-hero .hero-architecture,.js-dev .layer-stack button{opacity:1!important;transform:none!important;transition:none!important}.js-dev .data-line em{animation:none!important}.web-development-page *{scroll-behavior:auto!important}.hero-architecture button,.requirement-inputs button,.layer-stack button,.fb-system button,.integration-map button,.scale-system button,.technology-list button,.design-flow button,.capability-grid article,.quality-grid article,.principle-grid article,.related-grid a{transition:none!important}}
.web-development-page .section-head{display:block}


/* Principles icon picker: map the approved 34x34 icon-box styling onto the
   shared icon partial wrapper (.dev-principle-icon) so Font Awesome icons
   render in the same box the legacy glyph <i> used. Mirrors the Web Design
   principles treatment. Dimensions/colors match the original article>i rules. */
.principles-section .principle-grid article>.dev-principle-icon{
  display:grid;place-items:center;width:34px;height:34px;
  border:1px solid #3b587d;color:#51caec;font-style:normal;transition:.25s;
}
.principles-section .principle-grid article>.dev-principle-icon>i{font-size:15px;line-height:1}
.principles-section .principle-grid article:hover>.dev-principle-icon{
  border-color:var(--dev-cyan);background:#153263;
}