* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; color: var(--y4b-text); }
.navbar { padding: .65rem 0; }
.nav-container { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.nav-logo-img { display: block; width: auto; height: 56px; max-width: 64px; object-fit: contain; flex: 0 0 auto; }
.nav-logo-link { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; margin-right: auto; }
.nav-logo { color: var(--y4b-cyan); font-size: 1.35rem; font-weight: 800; letter-spacing: -.035em; }
.nav-right-desktop { display: flex; align-items: center; gap: .6rem; }
.nav-right-desktop > a { display: inline-flex; align-items: center; padding: .6rem .8rem; border: 1px solid var(--y4b-line); border-radius: 999px; color: var(--y4b-text); text-decoration: none; font-size: .9rem; font-weight: 700; white-space: nowrap; }
.di-shell { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; }
.di-breadcrumbs { display:flex; gap:.6rem; align-items:center; padding:1.4rem 0; color:var(--y4b-muted); font-size:.85rem; }
.di-breadcrumbs a { color:var(--y4b-cyan); text-decoration:none; }
.di-hero { position:relative; overflow:hidden; padding:clamp(2rem,7vw,6rem); margin:0 0 2rem; border:1px solid var(--y4b-line); border-radius:30px; background:linear-gradient(130deg,rgba(16,32,55,.94),rgba(7,13,26,.9) 60%,rgba(26,24,54,.78)); box-shadow:0 28px 90px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05); }
.di-hero::after { content:""; position:absolute; width:38rem; height:38rem; right:-15rem; top:-24rem; border-radius:50%; background:radial-gradient(circle,rgba(100,230,239,.2),rgba(90,140,255,.08) 35%,transparent 68%); pointer-events:none; }
.di-eyebrow,.di-kicker { color:var(--y4b-cyan); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:800; }
.di-hero h1 { position:relative; z-index:1; max-width:920px; margin:.9rem 0 1.3rem; font-size:clamp(2.55rem,7vw,5.6rem); line-height:.98; letter-spacing:-.065em; }
.di-hero-copy { position:relative; z-index:1; max-width:800px; color:var(--y4b-muted); font-size:clamp(1.03rem,1.6vw,1.23rem); line-height:1.8; }
.di-actions { position:relative; z-index:1; display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.8rem; }
.di-button { display:inline-flex; align-items:center; justify-content:center; padding:.86rem 1.2rem; border-radius:10px; border:1px solid rgba(100,230,239,.32); color:var(--y4b-text); text-decoration:none; font-weight:750; background:rgba(100,230,239,.1); }
.di-button.primary { color:#04131c; background:var(--y4b-cyan); border-color:var(--y4b-cyan); }
.di-proof { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin:0 0 5.5rem; }
.di-proof div { padding:1rem; border:1px solid var(--y4b-line); border-radius:14px; background:rgba(12,21,38,.65); color:#dce9f8; text-align:center; font-size:.9rem; font-weight:700; }
.di-section { padding:0 0 6rem; }
.di-section-head { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:end; margin-bottom:1.8rem; }
.di-section h2 { max-width:760px; margin:.55rem 0 0; font-size:clamp(1.8rem,4vw,3.15rem); letter-spacing:-.05em; line-height:1.04; }
.di-section-head p,.di-copy { color:var(--y4b-muted); line-height:1.8; }
.di-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; }
.di-card { grid-column:span 4; padding:1.5rem; border:1px solid var(--y4b-line); border-radius:18px; background:linear-gradient(145deg,rgba(19,31,53,.74),rgba(8,14,27,.76)); box-shadow:0 18px 46px rgba(0,0,0,.18); }
.di-card.wide { grid-column:span 6; }
.di-card h3 { margin:.65rem 0 .5rem; font-size:1.2rem; letter-spacing:-.025em; }
.di-card p { color:var(--y4b-muted); line-height:1.75; }
.di-card a { display:inline-block; margin-top:1rem; color:var(--y4b-cyan); font-weight:750; text-decoration:none; }
.di-number { color:var(--y4b-cyan); font-size:.72rem; font-weight:800; letter-spacing:.13em; }
.di-flow { display:grid; grid-template-columns:repeat(5,1fr); gap:.7rem; counter-reset:step; }
.di-flow article { position:relative; padding:1.3rem; min-height:185px; border:1px solid var(--y4b-line); border-radius:16px; background:rgba(12,21,38,.72); counter-increment:step; }
.di-flow article::before { content:"0" counter(step); color:var(--y4b-cyan); font-size:.75rem; font-weight:800; letter-spacing:.12em; }
.di-flow h3 { margin:.75rem 0 .45rem; font-size:1.02rem; }
.di-flow p { color:var(--y4b-muted); line-height:1.65; font-size:.91rem; }
.di-callout { padding:clamp(1.5rem,4vw,3rem); margin:0 0 6rem; border:1px solid rgba(100,230,239,.22); border-radius:22px; background:linear-gradient(110deg,rgba(90,140,255,.11),rgba(100,230,239,.07)); }
.di-callout h2 { font-size:clamp(1.55rem,3vw,2.4rem); letter-spacing:-.04em; }
.di-callout p { max-width:900px; margin-top:.9rem; color:var(--y4b-muted); line-height:1.8; }
.di-note { padding:1rem 1.2rem; margin:1.5rem 0 0; border-left:2px solid var(--y4b-cyan); color:var(--y4b-muted); background:rgba(100,230,239,.045); line-height:1.7; }
.di-faq { display:grid; gap:.75rem; }
.di-faq details { padding:1.1rem 1.2rem; border:1px solid var(--y4b-line); border-radius:14px; background:rgba(12,21,38,.62); }
.di-faq summary { cursor:pointer; font-weight:750; }
.di-faq p { padding-top:.75rem; color:var(--y4b-muted); line-height:1.75; }
.di-cta { padding:clamp(2rem,6vw,4rem); margin-bottom:6rem; border:1px solid var(--y4b-line); border-radius:26px; text-align:center; background:linear-gradient(130deg,rgba(16,32,55,.95),rgba(7,13,26,.93)); }
.di-cta h2 { max-width:850px; margin:.7rem auto 1rem; font-size:clamp(1.9rem,4.5vw,3.3rem); line-height:1.03; letter-spacing:-.05em; }
.di-cta p { max-width:680px; margin:0 auto; color:var(--y4b-muted); line-height:1.75; }
.di-cta .di-actions { justify-content:center; }
.di-architecture { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.di-architecture > div { padding:1.25rem; border:1px solid var(--y4b-line); border-radius:16px; background:rgba(12,21,38,.62); }
.di-architecture strong { display:block; margin-bottom:.35rem; color:#eff8ff; }
.di-architecture span { color:var(--y4b-muted); line-height:1.7; }
@media(max-width:820px){.di-proof{grid-template-columns:repeat(2,1fr)}.di-section-head{grid-template-columns:1fr;gap:.8rem}.di-flow{grid-template-columns:repeat(2,1fr)}.di-card{grid-column:span 6}.di-card.wide{grid-column:span 6}}
@media(max-width:620px){.navbar{padding:.45rem 0}.nav-logo-img{height:42px}.nav-logo{font-size:1rem}.nav-right-desktop{gap:.35rem}.nav-right-desktop>a{display:none}.nav-right-desktop>a:first-child,.nav-right-desktop>a[href="/ai-engineering-and-integration/"],.nav-right-desktop>a:last-child{display:inline-flex;padding:.5rem .65rem;font-size:.78rem}}
@media(max-width:560px){.di-shell{width:calc(100% - 1rem)}.di-hero{padding:2rem 1.25rem;border-radius:22px}.di-proof{margin-bottom:4rem}.di-card,.di-card.wide{grid-column:span 12}.di-flow{grid-template-columns:1fr}.di-flow article{min-height:unset}.di-architecture{grid-template-columns:1fr}}