:root {
  --navy: #073b60;
  --blue: #0f4c75;
  --teal: #0f766e;
  --aqua: #3db8b0;
  --ink: #172033;
  --muted: #607287;
  --line: #d9e6ed;
  --mist: #f2f8f8;
  --white: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: linear-gradient(180deg, #eef7f7 0, #f7fafc 520px, #f4f7f9 100%); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }

.diff-topbar { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 14px max(4vw, 20px); background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(15,76,117,.12); box-shadow: 0 8px 28px rgba(15,47,65,.07); }
.diff-brand { display: flex; align-items: center; gap: 13px; color: var(--navy); text-decoration: none; }
.diff-brand > span:last-child { display: grid; gap: 1px; }
.diff-brand small { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.diff-brand strong { font-size: 1.05rem; }
.diff-logo { width: 150px; height: 48px; display: grid; place-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.diff-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.diff-topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; }
.diff-print,.diff-back { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1rem; border: 1px solid #c5d4dd; border-radius: 999px; color: var(--navy); background: #fff; font: inherit; font-size: .78rem; font-weight: 900; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.diff-print { color: #fff; border-color: var(--teal); background: var(--teal); }
.diff-print:hover,.diff-print:focus-visible,.diff-back:hover,.diff-back:focus-visible { transform: translateY(-1px); border-color: var(--teal); box-shadow: 0 8px 18px rgba(7,59,96,.12); outline: none; }

main { width: min(1240px, calc(100% - 32px)); margin: 24px auto 0; }
.diff-hero { position: relative; min-height: 520px; display: grid; grid-template-columns: 1.35fr .65fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); padding: clamp(2rem, 5vw, 4.8rem); overflow: hidden; border-radius: 30px; color: #fff; background: radial-gradient(circle at 78% 24%, rgba(74,214,203,.28), transparent 26%), linear-gradient(125deg, #063756 0%, #0b5670 48%, #0d796f 100%); box-shadow: 0 28px 70px rgba(7,59,96,.22); }
.diff-hero::before,.diff-hero::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; pointer-events: none; }
.diff-hero::before { width: 560px; height: 560px; right: -260px; top: -260px; }
.diff-hero::after { width: 420px; height: 420px; left: -280px; bottom: -330px; }
.diff-hero-copy { position: relative; z-index: 2; }
.diff-eyebrow,.diff-kicker { margin: 0 0 .65rem; font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.diff-hero .diff-eyebrow { color: #9ce4dd; }
.diff-hero h1 { max-width: 760px; margin: 0; font-size: clamp(2.6rem, 6vw, 5.5rem); line-height: .96; letter-spacing: -.04em; }
.diff-hero p { max-width: 790px; margin: 1rem 0 0; color: rgba(255,255,255,.84); font-size: 1rem; line-height: 1.72; }
.diff-hero .diff-lead { color: #fff; font-size: clamp(1.05rem, 1.8vw, 1.34rem); line-height: 1.6; }
.diff-hero-tags { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.45rem; }
.diff-hero-tags span { padding: .48rem .7rem; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(255,255,255,.1); color: #e8fffc; font-size: .72rem; font-weight: 800; }
.diff-water-mark { position: relative; min-height: 300px; display: grid; place-items: center; text-align: center; }
.diff-water-mark span { position: absolute; border: 1px solid rgba(188,255,249,.28); border-radius: 50%; animation: ripple 8s ease-in-out infinite; }
.diff-water-mark span:nth-child(1) { width: 180px; height: 180px; }
.diff-water-mark span:nth-child(2) { width: 250px; height: 250px; animation-delay: -2.6s; }
.diff-water-mark span:nth-child(3) { width: 320px; height: 320px; animation-delay: -5.2s; }
.diff-water-mark strong { position: relative; max-width: 200px; color: #dffffb; font-size: 1rem; line-height: 1.5; }
@keyframes ripple { 0%,100% { transform: scale(.94); opacity: .55; } 50% { transform: scale(1.04); opacity: 1; } }

.diff-numbers { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; width: calc(100% - clamp(24px,6vw,70px)); margin: -44px auto 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--line); box-shadow: 0 18px 45px rgba(15,47,65,.12); }
.diff-numbers article { min-height: 160px; display: flex; flex-direction: column; justify-content: center; padding: 1.3rem; background: #fff; }
.diff-numbers strong { color: var(--teal); font-size: clamp(2rem,4vw,3rem); line-height: 1; }
.diff-numbers span { margin-top: .55rem; color: #29445a; font-size: .8rem; font-weight: 800; line-height: 1.35; }
.diff-numbers small { margin-top: .35rem; color: var(--muted); font-size: .67rem; }

.diff-intro { max-width: 900px; margin: clamp(3.5rem,7vw,6rem) auto; text-align: center; }
.diff-intro p { margin: 0; color: #36556a; font-size: clamp(1.12rem,2.1vw,1.45rem); line-height: 1.72; }

.diff-story { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.diff-feature { position: relative; display: grid; grid-template-columns: 54px 1fr; gap: 1rem; padding: clamp(1.4rem,3vw,2.2rem); overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: 0 10px 34px rgba(15,47,65,.06); }
.diff-feature-wide { grid-column: 1 / -1; }
.diff-feature-number { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--blue); background: #e7f2f7; font-size: .72rem; font-weight: 950; letter-spacing: .06em; }
.diff-kicker { color: var(--teal); }
.diff-feature h2 { margin: 0; color: var(--navy); font-size: clamp(1.3rem,2.3vw,2rem); line-height: 1.15; }
.diff-feature p:not(.diff-kicker) { margin: .85rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.72; }
.diff-feature-accent { color: #fff; border-color: transparent; background: linear-gradient(145deg,#0b4b70,#0e756f); }
.diff-feature-accent .diff-feature-number { color: #dffffb; background: rgba(255,255,255,.13); }
.diff-feature-accent .diff-kicker { color: #9ce4dd; }
.diff-feature-accent h2 { color: #fff; }
.diff-feature-accent p:not(.diff-kicker) { color: rgba(255,255,255,.82); }
.diff-quality { background: linear-gradient(135deg,#fff,#eef9f7); }
.diff-technical-note { padding: .75rem .85rem; border-left: 3px solid var(--teal); border-radius: 8px; background: rgba(15,118,110,.07); color: #315f5a!important; font-size: .78rem!important; }
.diff-value { background: linear-gradient(145deg,#fffaf0,#fff); }

.diff-closing { margin: clamp(3rem,7vw,6rem) 0 1.5rem; padding: clamp(2rem,5vw,4.5rem); border-radius: 28px; color: #fff; text-align: center; background: linear-gradient(125deg,#073b60,#0f766e); box-shadow: 0 24px 60px rgba(7,59,96,.18); }
.diff-closing .diff-eyebrow { color: #9ce4dd; }
.diff-closing h2 { margin: 0; font-size: clamp(2rem,4vw,3.5rem); }
.diff-closing p:not(.diff-eyebrow) { max-width: 900px; margin: 1rem auto 0; color: rgba(255,255,255,.84); font-size: 1rem; line-height: 1.75; }
.diff-closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.5rem; }
.diff-closing-actions a { min-height: 44px; display: inline-flex; align-items: center; padding: .7rem 1rem; border: 1px solid #fff; border-radius: 999px; color: var(--navy); background: #fff; font-size: .78rem; font-weight: 900; text-decoration: none; }
.diff-closing-actions a.secondary { color: #fff; background: transparent; }

footer { padding: 1.4rem max(4vw,20px) 2rem; color: var(--muted); text-align: center; }
footer p { max-width: 900px; margin: 0 auto; font-size: .7rem; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto!important; animation: none!important; transition: none!important; } }
@media (max-width: 900px) { .diff-hero { grid-template-columns: 1fr; min-height: auto; }.diff-water-mark { display: none; }.diff-numbers { grid-template-columns: repeat(2,1fr); }.diff-story { grid-template-columns: 1fr; }.diff-feature-wide { grid-column: auto; } }
@media (max-width: 620px) { .diff-topbar { align-items: stretch; flex-direction: column; }.diff-topbar-actions { align-items: stretch; flex-direction: column; }.diff-print,.diff-back { width: 100%; }.diff-brand > span:last-child { display: none; } main { width: min(100% - 20px,1240px); margin-top: 10px; }.diff-hero { padding: 1.6rem; border-radius: 22px; }.diff-numbers { width: calc(100% - 18px); grid-template-columns: 1fr; margin-top: -20px; }.diff-numbers article { min-height: 125px; }.diff-feature { grid-template-columns: 1fr; }.diff-closing { border-radius: 22px; } }
@media print { body { background:#fff; }.diff-topbar,.diff-closing-actions { display:none; }.diff-hero,.diff-feature-accent,.diff-closing { color:#172033; background:#fff; box-shadow:none; border:1px solid #ccd8df; }.diff-hero p,.diff-feature-accent p:not(.diff-kicker),.diff-closing p:not(.diff-eyebrow) { color:#475569; }.diff-hero h1,.diff-feature-accent h2,.diff-closing h2 { color:#073b60; }.diff-numbers,.diff-feature { box-shadow:none; break-inside:avoid; } }