:root {
    --pcp-navy: #0b2a59;
    --pcp-blue: #17458f;
    --pcp-cyan: #06b6d4;
    --pcp-ink: #172033;
    --pcp-muted: #64748b;
    --pcp-surface: #ffffff;
    --pcp-radius: 1rem;
    --pcp-shadow: 0 16px 40px rgba(15, 42, 89, .11);
}

html { scroll-behavior: smooth; }
body.site-body {
    color: var(--pcp-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(circle at 8% 8%, rgba(6, 182, 212, .08), transparent 28rem),
        linear-gradient(180deg, #f8fbff 0%, #f8fafc 45%, #eef6fb 100%);
}
.site-nav {
    background: rgba(255, 255, 255, .92) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(15, 42, 89, .08);
    box-shadow: 0 8px 30px rgba(15, 42, 89, .08) !important;
}
.site-nav a:first-child { letter-spacing: -.04em; }
.site-nav > div { min-height: 42px; }
.site-nav a { text-underline-offset: 4px; }
.site-nav a:focus-visible,
body.site-body button:focus-visible,
body.site-body input:focus-visible,
body.site-body select:focus-visible,
body.site-body textarea:focus-visible {
    outline: 3px solid rgba(6, 182, 212, .35);
    outline-offset: 3px;
}
#mobileMenu {
    padding: .8rem 1.25rem 1.15rem;
    border-radius: 0 0 1rem 1rem;
}
#mobileMenu a { border-radius: .65rem; padding-left: .75rem; padding-right: .75rem; }
#mobileMenu a:hover { background: #ecfeff; }
body.site-body section h1,
body.site-body section h2 { letter-spacing: -.025em; text-wrap: balance; }
body.site-body section p { line-height: 1.7; }
body.site-body .shadow-lg {
    box-shadow: var(--pcp-shadow) !important;
    border: 1px solid rgba(15, 42, 89, .06);
}
body.site-body .shadow-lg:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 55px rgba(15, 42, 89, .16) !important;
}
.home-hero {
    isolation: isolate;
    border-radius: 0 0 clamp(1.5rem, 4vw, 4rem) clamp(1.5rem, 4vw, 4rem);
    box-shadow: 0 25px 70px rgba(8, 31, 66, .2);
}
.home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(6, 31, 70, .76) 0%, rgba(6, 31, 70, .26) 55%, rgba(6, 182, 212, .12) 100%);
    z-index: 1;
}
.home-hero img { filter: saturate(.92) contrast(1.03) brightness(.78) !important; }
.home-hero .hero-content { align-items: flex-start !important; text-align: left !important; max-width: 78rem; margin: 0 auto; left: 0; right: 0; }
.hero-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: .5rem .85rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.hero-proof { display: flex; flex-wrap: wrap; gap: .65rem 1.15rem; margin-top: 1.4rem; font-size: .88rem; font-weight: 700; }
.hero-proof span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-proof i { color: #67e8f9; }
.conversion-section { background: #fff; }
.audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.audience-card { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.2rem); border: 1px solid rgba(15,42,89,.09); border-radius: 1.35rem; background: linear-gradient(160deg,#fff 0%,#f5fbff 100%); box-shadow: var(--pcp-shadow); }
.audience-icon { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; margin-bottom: 1.25rem; border-radius: 1rem; color: #fff; background: linear-gradient(135deg,var(--pcp-blue),var(--pcp-cyan)); font-size: 1.35rem; }
.audience-card h3 { color: var(--pcp-navy); font-size: 1.45rem; font-weight: 800; }
.audience-card p { flex: 1; margin: .7rem 0 1.25rem; color: var(--pcp-muted); }
.audience-card a { color: #087a94; font-weight: 800; }
.audience-card a i { margin-left: .35rem; transition: transform .2s ease; }
.audience-card a:hover i { transform: translateX(4px); }
.service-process { color: #fff; background: linear-gradient(135deg,#071d3d 0%,#0b2a59 50%,#17458f 100%); }
.app-showcase { color: #fff; background: linear-gradient(130deg,#071d3d 0%,#123b75 58%,#087a94 130%); }
.app-benefits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.app-benefits > div { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem; border: 1px solid rgba(255,255,255,.13); border-radius: 1rem; background: rgba(255,255,255,.07); }
.app-benefits i { width: 1.4rem; margin-top: .2rem; color: #67e8f9; font-size: 1.15rem; text-align: center; }
.app-benefits span, .app-benefits strong, .app-benefits small { display: block; }
.app-benefits small { margin-top: .25rem; color: #bfdbfe; line-height: 1.35; }
.portal-demo { max-width: 620px; margin-inline: auto; width: 100%; }
.portal-browser { overflow: hidden; color: var(--pcp-ink); border: 7px solid rgba(255,255,255,.14); border-radius: 1.5rem; background: #fff; box-shadow: 0 35px 80px rgba(0,0,0,.32); transform: perspective(1200px) rotateY(-3deg); }
.portal-browser-top { display: flex; align-items: center; gap: .4rem; padding: .75rem 1rem; background: #eaf1f8; }
.portal-browser-top > span { width: .65rem; height: .65rem; border-radius: 99px; background: #94a3b8; }
.portal-browser-top small { flex: 1; margin-left: .5rem; padding: .35rem .7rem; border-radius: .5rem; color: #64748b; background: #fff; text-align: center; }
.portal-screen { padding: clamp(1.2rem,3vw,2rem); background: linear-gradient(180deg,#f8fbff,#edf8fb); }
.portal-head { display: flex; justify-content: space-between; color: #17458f; font-weight: 900; }
.portal-head span i { color: #06b6d4; }
.portal-eyebrow { margin-top: 1.5rem; color: #0891b2; font-size: .73rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.portal-screen h3 { margin: .2rem 0 1rem; color: #0b2a59; font-size: clamp(1.35rem,3vw,2rem); font-weight: 900; }
.portal-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.portal-stats > div { padding: 1rem; border-radius: 1rem; background: #fff; box-shadow: 0 10px 28px rgba(15,42,89,.08); }
.portal-stats i { display: block; margin-bottom: .75rem; color: #06b6d4; }
.portal-stats strong,.portal-stats small { display: block; }
.portal-stats small { margin-top: .2rem; color: #64748b; }
.portal-reading { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; margin-top: .75rem; }
.portal-reading > div { padding: .8rem .5rem; border-radius: .8rem; color: #64748b; background: #e6f7fb; text-align: center; }
.portal-reading span,.portal-reading strong { display: block; }
.portal-reading strong { margin-top: .25rem; color: #0b2a59; }
.portal-visit { display: flex; align-items: center; gap: .8rem; margin-top: .75rem; padding: 1rem; border-radius: 1rem; background: #fff; box-shadow: 0 10px 28px rgba(15,42,89,.08); }
.portal-visit > div { flex: 1; }
.portal-visit strong,.portal-visit small { display: block; }
.portal-visit small { margin-top: .2rem; color: #64748b; }
.portal-check { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 99px; color: #fff; background: #10b981; }
.portal-demo-note { margin-top: 1rem; color: #bfdbfe; font-size: .82rem; text-align: center; }
.real-app-gallery { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; align-items: start; padding: 1.25rem; border: 1px solid rgba(255,255,255,.15); border-radius: 1.5rem; background: rgba(255,255,255,.08); box-shadow: 0 30px 70px rgba(0,0,0,.25); }
.real-app-gallery figure { overflow: hidden; border-radius: 1rem; background: #fff; box-shadow: 0 16px 35px rgba(0,0,0,.2); }
.real-app-gallery figure span { display: block; padding: .7rem 1rem; color: #0b2a59; border-bottom: 1px solid #e2e8f0; font-size: .82rem; font-weight: 900; }
.real-app-gallery img { display: block; width: 100%; height: auto; }
.real-app-gallery-wide { max-width: 1100px; margin: 0 auto; gap: 1.25rem; grid-template-columns: repeat(3,minmax(0,1fr)); }
.app-proof-panel { display: flex; flex-direction: column; min-height: 100%; padding: 1.5rem; border-radius: 1rem; color: #fff; background: linear-gradient(150deg,#0b2a59,#087a94); box-shadow: 0 16px 35px rgba(0,0,0,.2); }
.app-proof-label { color: #a5f3fc; font-size: .78rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.app-proof-panel h3 { margin: 1rem 0; font-size: 1.35rem; font-weight: 900; line-height: 1.2; }
.app-proof-panel ul { display: grid; gap: .7rem; margin-bottom: 1.2rem; }
.app-proof-panel li { display: flex; align-items: flex-start; gap: .55rem; color: #dbeafe; font-size: .9rem; }
.app-proof-panel li i { margin-top: .2rem; color: #67e8f9; }
.app-proof-panel a { margin-top: auto; color: #fff; font-weight: 900; }
.process-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; counter-reset: steps; }
.process-grid li { position: relative; padding: 1.5rem; border: 1px solid rgba(255,255,255,.14); border-radius: 1.2rem; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.process-grid li > span { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; color: #cffafe; background: rgba(6,182,212,.2); font-weight: 900; }
.process-grid li > i { color: #67e8f9; font-size: 1.7rem; margin-bottom: 1.2rem; }
.process-grid h3 { min-height: 3.2rem; font-size: 1.15rem; font-weight: 800; }
.process-grid p { margin-top: .6rem; color: #bfdbfe; font-size: .94rem; }
.marketing-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(125deg, #081f42 0%, #17458f 52%, #06b6d4 135%) !important;
}
.marketing-hero::before,
.marketing-hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
}
.marketing-hero::before { width: 22rem; height: 22rem; right: -8rem; top: -12rem; }
.marketing-hero::after { width: 10rem; height: 10rem; left: 8%; bottom: -7rem; }
.marketing-hero > div { position: relative; z-index: 1; }
#cookieBanner {
    left: auto !important;
    right: 1rem !important;
    bottom: 1rem !important;
    width: min(540px, calc(100% - 2rem)) !important;
    padding: 1.25rem !important;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 1.25rem;
    box-shadow: 0 28px 80px rgba(2, 12, 27, .42);
}
#cookieBanner .max-w-7xl > div { align-items: flex-start !important; }
#cookieBanner button { padding: .6rem .9rem !important; font-size: .82rem; }
#cookieModal > div { border-radius: 1.25rem; box-shadow: 0 30px 90px rgba(2,12,27,.35); }
body.site-body a[class*="bg-cyan-500"],
body.site-body button[class*="bg-cyan-500"] {
    box-shadow: 0 9px 22px rgba(6, 182, 212, .24);
}
body.site-body a[class*="bg-"],
body.site-body button[class*="bg-"] { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
body.site-body a[class*="bg-"]:hover,
body.site-body button[class*="bg-"]:hover { transform: translateY(-1px); }
.site-footer {
    background: linear-gradient(135deg, #081f42 0%, #0b2a59 55%, #0e3a72 100%) !important;
    border-top: 4px solid var(--pcp-cyan);
}
.site-footer a { transition: color .2s ease; }
.projects-preview { background: linear-gradient(135deg, #effcff 0%, #f8fbff 48%, #e7f4ff 100%); }
.before-after-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
}
.project-photo {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: 1.35rem;
    background: #fff;
    box-shadow: var(--pcp-shadow);
    border: 1px solid rgba(15, 42, 89, .08);
}
.project-photo img { display: block; width: 100%; height: clamp(260px, 34vw, 430px); object-fit: cover; }
.project-photo figcaption {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    color: #fff;
    border-radius: .9rem;
    background: rgba(8, 31, 66, .88);
    backdrop-filter: blur(8px);
}
.project-photo figcaption span { padding: .3rem .65rem; border-radius: 999px; font-size: .76rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.project-photo-before figcaption span { background: #dc2626; }
.project-photo-after figcaption span { background: #059669; }
.comparison-arrow {
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--pcp-cyan);
    color: #fff;
    box-shadow: 0 12px 30px rgba(6, 182, 212, .35);
    font-size: 1.25rem;
}
.featured-project-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 1.5rem; align-items: stretch; }
.featured-comparison img { height: 100%; min-height: 350px; object-fit: cover; }
.project-summary { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 1.35rem; color: #fff; background: linear-gradient(145deg, #081f42, #17458f); box-shadow: var(--pcp-shadow); }
.project-summary h3 { margin: 1rem 0 .75rem; font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 800; }
.project-summary p { color: #dbeafe; }
.project-summary ul { display: grid; gap: .8rem; margin-top: 1.25rem; }
.project-summary li { display: flex; gap: .7rem; align-items: center; font-weight: 700; }
.project-summary li i { width: 1.35rem; color: #67e8f9; text-align: center; }
.project-status { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .75rem; border-radius: 999px; color: #cffafe; background: rgba(6,182,212,.18); font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 767px) {
    body.site-body section { scroll-margin-top: 76px; }
    body.site-body .fixed.bottom-4 { bottom: max(1rem, env(safe-area-inset-bottom)); }
    .home-hero { min-height: 540px !important; height: 72vh !important; }
    .home-hero .hero-content { align-items: center !important; text-align: center !important; padding-top: 2rem; }
    .home-hero h1 { font-size: clamp(2rem, 9vw, 3.2rem) !important; line-height: 1.05; }
    #cookieBanner { right: .65rem !important; bottom: .65rem !important; width: calc(100% - 1.3rem) !important; padding: 1rem !important; }
    #cookieBanner .flex.gap-3 { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: .4rem !important; }
    #cookieBanner button { padding: .55rem .35rem !important; font-size: .72rem; }
    .before-after-grid { grid-template-columns: 1fr; gap: .8rem; }
    .comparison-arrow { margin: -.2rem auto; transform: rotate(90deg); position: relative; z-index: 2; }
    .project-photo img { height: 280px; }
    .project-photo figcaption { align-items: flex-start; flex-direction: column; gap: .4rem; }
    .featured-project-grid { grid-template-columns: 1fr; }
    .featured-comparison img { min-height: 0; height: auto; }
    .hero-proof { justify-content: center; font-size: .78rem; }
    .audience-grid, .process-grid { grid-template-columns: 1fr; }
    .process-grid h3 { min-height: 0; }
    .app-benefits { grid-template-columns: 1fr; }
    .portal-browser { transform: none; border-width: 4px; }
    .portal-reading { grid-template-columns: 1fr; }
    .portal-reading > div { display: flex; justify-content: space-between; }
    .real-app-gallery, .real-app-gallery-wide { grid-template-columns: 1fr; padding: .75rem; }
}
@media (min-width: 768px) and (max-width: 1100px) { .real-app-gallery-wide { grid-template-columns: repeat(2,minmax(0,1fr)); } .app-proof-panel { grid-column: 1 / -1; } }
@media (min-width: 768px) and (max-width: 1023px) { .audience-grid { grid-template-columns: 1fr; } .process-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }