body { background: var(--paper); }

/* Hero */
.svc-hero { max-width: var(--container); margin: 0 auto; padding: 80px var(--gutter) 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: stretch; }
@media(max-width:860px){ .svc-hero{grid-template-columns:1fr;gap:32px;} }
@media(max-width:767px){ .svc-hero{padding-top:56px;} }
.svc-hero-text .eyebrow { margin-bottom: 24px; }
.svc-hero-text h1 { font-family: var(--font-display); font-size: clamp(40px, 6vw, 76px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.01; margin-bottom: 20px; }
.svc-hero-right { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.svc-hero-right p { font-size: 17px; color: var(--gray-600); line-height: 1.72; margin-bottom: 24px; }
.svc-index { display: flex; flex-direction: column; gap: 0; margin-top: 32px; border-top: 1px solid var(--gray-200); }
.si-link { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--gray-200); font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); transition: color 0.15s var(--ease), padding-left 0.18s var(--ease); }
.si-link:hover { color: var(--accent); padding-left: 4px; }
.si-num { font-family: var(--font-mono); font-size: 11px; color: var(--gray-400); letter-spacing: 0.1em; }

/* Blueprint section — bounded, IntersectionObserver triggered */
.blueprint-section { background: #1a2332; padding: 88px var(--gutter); position: relative; overflow: hidden; }
.bp-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px); background-size: 48px 48px; pointer-events: none; }
.bp-bg-glow { position: absolute; top: 50%; right: 10%; transform: translateY(-50%); width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,0.14) 0%, transparent 70%); pointer-events: none; }
.bp-inner { max-width: var(--container); margin: 0 auto; position: relative; z-index: 1; }
.bp-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 60px; }
@media(max-width:860px){ .bp-head{grid-template-columns:1fr;gap:24px;} }
.bp-head h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 48px); font-weight: 500; letter-spacing: -0.025em; color: white; line-height: 1.1; }
.bp-head p { font-size: 16px; color: rgba(255,255,255,0.60); line-height: 1.7; }
/* Blueprint frame */
.bp-frame { border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.015); position: relative; }
.bp-inner-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.035) 1px,transparent 1px); background-size: 36px 36px; pointer-events: none; }
/* Animated elements */
.bp-el { transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); }
.bp-el.hidden { opacity: 0; }
/* Nav row */
.bp-nav { display: flex; align-items: center; padding: 0 24px; height: 52px; border-bottom: 1px solid rgba(255,255,255,0.08); gap: 16px; position: relative; z-index: 1; }
.bp-logo-bar { width: 100px; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.15); transform-origin: left; transform: scaleX(0); transition: transform 0.5s 0.1s var(--ease-out); }
.bp-nav-bars { display: flex; gap: 10px; margin-left: 30px; }
.bp-nav-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.07); transform-origin: left; transform: scaleX(0); }
.bp-nav-bar:nth-child(1){ width:44px; transition: transform 0.4s 0.25s var(--ease-out); }
.bp-nav-bar:nth-child(2){ width:38px; transition: transform 0.4s 0.33s var(--ease-out); }
.bp-nav-bar:nth-child(3){ width:50px; transition: transform 0.4s 0.41s var(--ease-out); }
.bp-nav-bar:nth-child(4){ width:36px; transition: transform 0.4s 0.49s var(--ease-out); }
.bp-nav-cta { margin-left: auto; width: 80px; height: 30px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15); opacity: 0; transition: opacity 0.4s 0.6s; }
/* Hero row */
.bp-hero-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(255,255,255,0.07); }
.bp-hero-left { padding: 36px 24px; border-right: 1px solid rgba(255,255,255,0.07); }
.bp-h-line { height: 18px; border-radius: 3px; background: rgba(255,255,255,0.15); margin-bottom: 10px; transform-origin: left; transform: scaleX(0); }
.bp-h-line:nth-child(1){ width:80%; transition: transform 0.5s 0.65s var(--ease-out); }
.bp-h-line:nth-child(2){ width:62%; transition: transform 0.5s 0.76s var(--ease-out); }
.bp-h-line:nth-child(3){ width:45%; height:14px; transition: transform 0.5s 0.87s var(--ease-out); }
.bp-sub-lines { display: grid; gap: 7px; margin-top: 18px; }
.bp-sub-line { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.07); transform-origin: left; transform: scaleX(0); }
.bp-sub-line:nth-child(1){ width:90%; transition: transform 0.4s 0.95s var(--ease-out); }
.bp-sub-line:nth-child(2){ width:78%; transition: transform 0.4s 1.02s var(--ease-out); }
.bp-sub-line:nth-child(3){ width:58%; transition: transform 0.4s 1.09s var(--ease-out); }
.bp-hero-btns { display: flex; gap: 10px; margin-top: 24px; opacity: 0; transition: opacity 0.5s 1.15s; }
.bp-btn-a { width: 120px; height: 36px; border-radius: 999px; background: rgba(255,255,255,0.15); }
.bp-btn-b { width: 90px; height: 36px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); }
.bp-hero-right { display: flex; align-items: center; justify-content: center; padding: 20px; }
.bp-img-placeholder { width: 100%; height: 180px; border-radius: 6px; border: 1px dashed rgba(255,255,255,0.1); opacity: 0; transition: opacity 0.5s 0.8s; display: flex; align-items: center; justify-content: center; }
.bp-img-icon { width: 40px; height: 40px; border: 1.5px solid rgba(255,255,255,0.2); transform: rotate(45deg); }
/* Services row */
.bp-svc-row { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid rgba(255,255,255,0.07); }
.bp-svc-col { padding: 24px 18px; border-right: 1px solid rgba(255,255,255,0.06); opacity: 0; transform: translateY(8px); position: relative; z-index: 1; }
.bp-svc-col:last-child { border-right: none; }
.bp-svc-col:nth-child(1){ transition: opacity 0.4s 1.1s, transform 0.4s 1.1s; }
.bp-svc-col:nth-child(2){ transition: opacity 0.4s 1.2s, transform 0.4s 1.2s; }
.bp-svc-col:nth-child(3){ transition: opacity 0.4s 1.3s, transform 0.4s 1.3s; }
.bp-svc-col:nth-child(4){ transition: opacity 0.4s 1.4s, transform 0.4s 1.4s; }
.bp-svc-num { font-family: var(--font-mono); font-size: 10px; color: rgba(37,99,235,0.8); letter-spacing: 0.1em; margin-bottom: 10px; }
.bp-svc-bar { height: 6px; border-radius: 999px; margin-bottom: 6px; background: rgba(255,255,255,0.1); }
.bp-svc-bar:nth-child(2){ width:80%; }
.bp-svc-bar:nth-child(3){ width:60%; background:rgba(255,255,255,0.06); }
.bp-svc-bar:nth-child(4){ width:42%; background:rgba(255,255,255,0.04); }
/* Footer bar */
.bp-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; opacity: 0; transition: opacity 0.5s 1.5s; position: relative; z-index: 1; }
.bp-footer-dot { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.50); letter-spacing: 0.07em; }
.bp-footer-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(37,99,235,0.8); }
.bp-footer-anno { font-family: var(--font-mono); font-size: 10px; color: rgba(37,99,235,0.6); letter-spacing: 0.07em; }
/* Activated state */
.bp-frame.active .bp-logo-bar,
.bp-frame.active .bp-nav-bar,
.bp-frame.active .bp-h-line,
.bp-frame.active .bp-sub-line { transform: scaleX(1); }
.bp-frame.active .bp-nav-cta,
.bp-frame.active .bp-hero-btns,
.bp-frame.active .bp-img-placeholder,
.bp-frame.active .bp-footer { opacity: 1; }
.bp-frame.active .bp-svc-col { opacity: 1; transform: none; }

/* Service detail sections */
.svc-detail { padding: 100px 0; }
.svc-detail .container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.svc-detail-block { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--gray-200); padding: 72px 0; align-items: stretch; transition: background 0.25s var(--ease); }
.svc-detail-block:hover { background: rgba(37,99,235,0.018); }
.svc-detail-block:hover .sd-num { color: var(--accent-deep); transition: color 0.2s var(--ease); }
.svc-detail-block:last-child { border-bottom: 1px solid var(--gray-200); }
.svc-detail-block.flip .sd-text { order: 2; padding-left: 64px; padding-right: 0; padding-top: 8px; }
.svc-detail-block.flip .sd-content { order: 1; }
@media(max-width:860px){ .svc-detail-block{grid-template-columns:1fr;gap:40px;align-items:start;} .svc-detail-block .sd-text,.svc-detail-block.flip .sd-text{padding:0 !important;order:1;} .svc-detail-block .sd-content,.svc-detail-block.flip .sd-content{order:2;} }
.sd-text { padding-right: 64px; display: flex; flex-direction: column; justify-content: center; padding-top: 8px; }
.sd-content { display: flex; flex-direction: column; min-height: 100%; justify-content: center; }
.sd-num { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 14px; }
.sd-title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 36px); font-weight: 500; letter-spacing: -0.022em; line-height: 1.12; margin-bottom: 16px; }
.sd-body { font-size: 15px; color: var(--gray-600); line-height: 1.72; margin-bottom: 14px; }
.sd-points { display: grid; gap: 0; margin: 24px 0 28px; border-top: 1px solid var(--gray-200); }
.sd-point { display: grid; grid-template-columns: 18px 1fr; gap: 0 10px; font-size: 14px; color: var(--gray-600); line-height: 1.6; padding: 12px 0; border-bottom: 1px solid var(--gray-100); align-items: start; }
.sd-arr { color: var(--accent); font-size: 12px; padding-top: 3px; line-height: 1; }
.sd-point strong { color: var(--ink); font-weight: 600; }
/* Visual panels */
.sd-vis { background: var(--gray-100); border-radius: 14px; flex: 1; min-height: 320px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; padding: 14px; padding-bottom: 44px; }
.sd-browser-frame { width: 100%; max-width: 460px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; min-height: 300px; }
.sd-browser-inner { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 18px; background: #fafafa; }
.sd-vis-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.025) 1px,transparent 1px); background-size: 22px 22px; }
/* Bracket wrapper: 160×160 so flex-center works on the full visual, not just the top-left corner */
.sd-brackets-wrap { width: 160px; height: 160px; display: flex; align-items: flex-start; justify-content: flex-start; position: relative; z-index: 1; }
.sd-brackets { width: 80px; height: 80px; border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); position: relative; }
.sd-brackets::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 80px; height: 80px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.sd-vis-label { position: absolute; bottom: 14px; right: 16px; font-family: var(--font-mono); font-size: 10px; color: var(--gray-400); letter-spacing: 0.07em; }
/* CMS visual */
.sd-cms-mock { background: var(--navy); flex: 1; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(11,13,16,0.15); display: flex; flex-direction: column; }
.sd-cms-bar { background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.07); padding: 11px 15px; display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.scd { width: 9px; height: 9px; border-radius: 50%; }
.scd:nth-child(1){background:rgba(255,95,86,.5);} .scd:nth-child(2){background:rgba(255,189,46,.5);} .scd:nth-child(3){background:rgba(39,201,63,.5);}
.sd-cms-body { padding: 20px; flex: 1; }
.sd-cms-label { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.50); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
.sd-cms-field { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 5px; padding: 9px 12px; font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 12px; }
.sd-cms-field.focus { border-color: var(--accent); background: rgba(37,99,235,0.08); }
.sd-cms-blocks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.sd-cms-block { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 6px; padding: 8px 12px; font-size: 12px; color: rgba(255,255,255,0.55); }
.sd-cms-block-icon { width: 16px; height: 16px; border-radius: 3px; background: rgba(37,99,235,0.3); flex-shrink: 0; }
.sd-cms-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
.sd-cms-save { background: var(--accent); color: white; font-size: 12px; padding: 7px 16px; border-radius: 6px; font-family: var(--font-sans); }
.sd-cms-status { font-family: var(--font-mono); font-size: 11px; color: #27C93F; letter-spacing: 0.04em; }
/* Perf visual */
.sd-perf { padding: 40px 36px; display: flex; flex-direction: column; gap: 20px; justify-content: center; background: white; border-radius: 14px; border: 1px solid var(--gray-200); }
.perf-row { display: grid; grid-template-columns: 120px 1fr 36px; align-items: center; gap: 0; }
.perf-label { font-size: 13px; color: var(--gray-600); }
.perf-bar-wrap { height: 6px; background: var(--gray-100); border-radius: 999px; margin: 0 16px; }
.perf-bar { height: 100%; border-radius: 999px; }
.perf-score { font-family: var(--font-mono); font-size: 12px; color: var(--ink); font-weight: 500; text-align: right; }
/* SEO visual — centered vertically, no flex:1 so it doesn't stretch the full height */
.sd-seo-mock { background: white; border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.sd-content .sd-seo-mock { justify-content: center; }
.seo-row { padding: 14px 20px; border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; }
.seo-row:last-child { border-bottom: none; }
.seo-key { font-size: 13px; color: var(--gray-600); }
.seo-val { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; }
.seo-val.ok { color: #27C93F; }
.seo-val.accent { color: var(--accent); }

/* Process */
.process-section { background: white; border-top: 1px solid var(--gray-200); padding: 88px 0; }
.process-section .container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.ps-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 64px; }
@media(max-width:720px){ .ps-head{grid-template-columns:1fr;gap:24px;} }
.ps-head h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }
.ps-head p { font-size: 16px; color: var(--gray-600); line-height: 1.7; padding-top: 8px; }
.process-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 1px solid var(--gray-200); border-radius: 14px; overflow: hidden; }
@media(max-width:720px){ .process-steps{grid-template-columns:1fr 1fr;} }
@media(max-width:480px){ .process-steps{grid-template-columns:1fr;} .proc-step{border-right:none;border-bottom:1px solid var(--gray-200);} .proc-step:last-child{border-bottom:none;} }
.proc-step { padding: 32px 28px; border-right: 1px solid var(--gray-200); transition: background 0.2s var(--ease), transform 0.2s var(--ease-out); }
.proc-step:hover { background: var(--accent-soft); transform: translateY(-2px); }
.proc-step:hover .proc-num { color: var(--accent-deep); }
.proc-step:last-child { border-right: none; }
@media(max-width:720px){ .proc-step:nth-child(2){ border-right:none; } .proc-step:nth-child(3){ border-top:1px solid var(--gray-200); } }
.proc-num { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 14px; }
.proc-title { font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 10px; }
.proc-desc { font-size: 13px; color: var(--gray-600); line-height: 1.65; }

/* Final CTA */
.final-cta { background: var(--navy); background-image: radial-gradient(ellipse at 40% 60%,rgba(37,99,235,.14) 0%,transparent 55%); padding: 100px var(--gutter); text-align: center; }
.final-cta h2 { font-family: var(--font-display); font-size: clamp(36px,6vw,80px); font-weight: 500; letter-spacing: -.035em; color: white; line-height: 1; margin-bottom: 22px; }
.final-cta p { font-size: 17px; color: rgba(255,255,255,0.60); max-width: 460px; margin: 0 auto 40px; line-height: 1.7; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }