:root{--ink:#060a1d;--ink-2:#0b1230;--paper:#f7f9fc;--line:#dbe2ed;--muted:#65708a;--cyan:#22d9ef;--blue:#56a8ff;--mono:'DM Mono',monospace;--sans:'Manrope',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--sans)}.skip-link{position:absolute;left:-999px}.skip-link:focus{left:1rem;top:1rem;z-index:10;background:#fff;padding:.5rem}.site-header{height:76px;max-width:1280px;margin:auto;padding:0 36px;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:800;text-decoration:none;color:var(--ink);letter-spacing:-.6px}.brand-mark{display:flex;width:22px;height:22px;position:relative;transform:rotate(45deg);border:1.5px solid var(--cyan)}.brand-mark i{position:absolute;width:6px;height:6px;background:var(--cyan)}.brand-mark i:nth-child(1){top:-3px;left:-3px}.brand-mark i:nth-child(2){right:-3px;bottom:-3px}.brand-mark i:nth-child(3){left:7px;top:7px;background:var(--ink)}nav{display:flex;gap:29px}nav a,.header-cta{font-size:12px;color:#414b64;text-decoration:none;font-weight:700}.header-cta{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}.header-cta span{color:#00aeca;font-size:16px;margin-left:3px}.hero{min-height:665px;max-width:1280px;margin:auto;padding:80px 36px 96px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:36px}.eyebrow,.mini-label,.panel-overline{font:500 10px/1.4 var(--mono);letter-spacing:1.25px;text-transform:uppercase;color:#5d6a83;margin:0 0 20px}.eyebrow span{width:8px;height:8px;display:inline-block;background:var(--cyan);margin-right:8px;transform:rotate(45deg)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(42px,5vw,70px);letter-spacing:-3.8px;line-height:1.04;margin-bottom:26px}h2{font-size:clamp(34px,4vw,52px);letter-spacing:-2.7px;line-height:1.08;margin-bottom:0}.lede{font-size:17px;line-height:1.65;max-width:530px;color:#46516a}.actions{display:flex;align-items:center;gap:28px;margin-top:34px}.button{display:inline-flex;gap:18px;align-items:center;text-decoration:none;font-size:13px;font-weight:800;padding:14px 18px}.primary{background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--cyan)}.primary span{font-size:19px}.text-link{font-weight:800;text-decoration:none;color:var(--ink);font-size:13px}.text-link span{color:#00b9d1;margin-left:7px}.hero-visual{height:418px;background:var(--ink);position:relative;overflow:hidden;box-shadow:14px 14px 0 #d5f6fa}.hero-visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(59,214,237,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(59,214,237,.06) 1px,transparent 1px);background-size:28px 28px}.vernir-mark{position:absolute;width:250px;right:-75px;top:-55px;opacity:.1;mix-blend-mode:screen}.visual-label{position:absolute;z-index:1;font:10px var(--mono);letter-spacing:1px;color:#8090ae}.top-label{top:20px;left:20px}.visual-label b{color:var(--cyan);margin-left:12px}.architecture-grid{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:center;padding:70px 40px 20px;gap:15px}.node{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;color:#fff;font-size:12px}.node strong{margin-top:8px}.node small{font:9px var(--mono);color:#7384a6;margin-top:2px}.aws-icon{display:grid;place-items:center;width:54px;height:54px;background:#16213d;border:1px solid #2a3d62;color:#b4c1d8;font:28px var(--sans)}.ecs .aws-icon{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 25px rgba(34,217,239,.28)}.edge{height:1px;background:#4d638a;position:absolute;top:50%;z-index:1}.edge-one{left:20%;width:28%}.edge-two{right:20%;width:28%}.signal{position:absolute;border:1px solid var(--cyan);border-radius:50%;opacity:.22}.signal-one{width:380px;height:380px;left:47px;top:25px}.signal-two{width:230px;height:230px;left:122px;top:100px}.shift-chip{position:absolute;bottom:22px;left:20px;color:#c9dcf0;font:10px var(--mono);background:#101b35;padding:8px 10px;border-left:2px solid var(--cyan)}.shift-chip span{color:var(--cyan);font-size:16px}.section{max-width:1280px;margin:auto;padding:115px 36px}.concept{border-top:1px solid var(--line)}.section-heading{margin-bottom:48px}.comparison{display:grid;grid-template-columns:1fr 68px 1fr;align-items:center}.architecture-card{min-height:285px;border:1px solid var(--line);padding:26px 28px;background:#fff}.architecture-card.proposed{border-color:#93e8f2;box-shadow:7px 7px 0 #d6f6f9}.card-kicker{font:10px var(--mono);text-transform:uppercase;letter-spacing:1px;color:#78849a}.card-kicker>span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#a3afc1;margin-right:7px}.proposed .card-kicker>span{background:#16c8de}.card-kicker b{float:right;color:#04a8bf;font-size:9px}.architecture-card h3{font-size:18px;margin:13px 0 30px;letter-spacing:-.6px}.flow{display:flex;align-items:center;justify-content:space-between;gap:8px}.flow>div{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700}.flow b{display:grid;place-items:center;width:27px;height:27px;background:#eff3f8;color:#50617d;font-size:15px}.flow small{display:block;color:#8490a5;font:8px var(--mono)}.flow i{color:#aab5c6;font-style:normal}.flow .highlight b{background:#d9f9fc;color:#008da5}.price{font-size:22px;font-weight:800;letter-spacing:-1px;margin:31px 0 0}.price small{font-size:10px;color:#748097;font-weight:500;letter-spacing:0}.saving{margin:2px 0 0;color:#009db5;font:10px var(--mono)}.arrow-shift{text-align:center;color:#07bfd5}.arrow-shift span{font-size:38px;line-height:1}.arrow-shift small{display:block;font:8px var(--mono);letter-spacing:1px;color:#5d6a83}.difference{background:var(--ink);max-width:none;color:#fff;padding-left:max(36px,calc((100vw - 1208px)/2));padding-right:max(36px,calc((100vw - 1208px)/2))}.difference .eyebrow{color:#8c9ab5}.difference .section-heading>p:last-child{max-width:530px;color:#b8c1d2;margin:23px 0 0}.versus{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#27334f}.versus article{padding:34px;background:#0b132a}.versus .accent{background:#0d1c36}.mini-label{color:#99a7bf}.accent .mini-label{color:var(--cyan)}.versus h3{font-size:22px;line-height:1.28;letter-spacing:-1px;max-width:390px}.versus ul{list-style:none;padding:0;margin:28px 0 0;border-top:1px solid #25314c}.versus li{color:#b5c0d2;border-bottom:1px solid #25314c;padding:10px 0;font-size:13px}.versus li:before{content:'↳';color:#62708a;margin-right:9px}.accent li:before{color:var(--cyan)}.how{border-bottom:1px solid var(--line)}.steps{list-style:none;counter-reset:steps;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.steps li{padding:25px 24px 10px 0;border-right:1px solid var(--line);margin-right:24px}.steps li:last-child{border:0}.steps span,.principle-grid>article>span{font:10px var(--mono);color:#00a6bd}.steps h3{font-size:17px;margin:18px 0 8px}.steps p,.principle-grid p{font-size:13px;color:#66718a;max-width:210px}.recommendation{background:#eaf2fa;max-width:none;padding-left:max(36px,calc((100vw - 1208px)/2));padding-right:max(36px,calc((100vw - 1208px)/2))}.product-panel{background:#fff;border:1px solid #d8e1eb;box-shadow:9px 9px 0 #ccebf0}.product-panel header{display:flex;justify-content:space-between;padding:26px 28px 20px;border-bottom:1px solid #e4e9f0}.panel-overline{color:#0c9daf;margin:0 0 8px}.panel-overline span{color:#77b2bd}.product-panel h3{font-size:20px;letter-spacing:-.75px;margin:0}.product-panel button{border:0;background:none;letter-spacing:2px;color:#7a879b}.panel-metrics{display:grid;grid-template-columns:1.1fr 1fr 1fr;border-bottom:1px solid #e4e9f0}.panel-metrics>div{padding:20px 28px;border-right:1px solid #e4e9f0}.panel-metrics>div:last-child{border:0}.panel-metrics span,.evidence p{display:block;text-transform:uppercase;letter-spacing:1px;font:9px var(--mono);color:#77849a;margin-bottom:7px}.panel-metrics strong{font-size:25px;letter-spacing:-1px}.panel-metrics strong small{font:10px var(--mono);color:#66728a}.panel-metrics b{font:12px var(--mono);white-space:nowrap}.panel-metrics i{font-style:normal;color:#91a1b7}.proposed-metric b{color:#008fa5}.evidence{display:grid;grid-template-columns:1.5fr 1fr}.evidence>div,.evidence aside{padding:25px 28px}.evidence ul{columns:2;list-style:none;padding:0;margin:0}.evidence li{font-size:12px;color:#526078;padding:5px 0}.evidence li:before{content:'✓';color:#00b7cc;margin-right:7px}.evidence aside{border-left:1px solid #e4e9f0;background:#fffaf0}.evidence aside p{color:#a77d24}.evidence aside>span{float:left;color:#d49212;margin-right:9px}.evidence aside b,.evidence aside small{display:block;font-size:12px;line-height:1.45}.evidence aside small{color:#748096;margin-top:6px}.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.principle-grid article{border-top:2px solid #a9dfe6;padding-top:17px}.principle-grid h3{font-size:16px;letter-spacing:-.5px;margin:18px 0 9px}.final-cta{max-width:1280px;margin:0 auto;padding:105px 36px;display:flex;align-items:center;justify-content:space-between;overflow:hidden}.final-cta h2{margin-bottom:32px}.cta-graph{width:340px;height:220px;position:relative;background-image:radial-gradient(#bbd8e2 1px,transparent 1px);background-size:17px 17px}.cta-graph i{position:absolute;width:10px;height:10px;background:var(--cyan);transform:rotate(45deg);box-shadow:0 0 14px var(--cyan)}.cta-graph i:nth-child(1){left:10%;top:55%}.cta-graph i:nth-child(2){left:36%;top:25%}.cta-graph i:nth-child(3){left:48%;top:66%}.cta-graph i:nth-child(4){left:70%;top:34%}.cta-graph i:nth-child(5){left:87%;top:65%}.cta-graph i:nth-child(6){left:36%;top:25%;width:1px;height:115px;transform:rotate(-31deg);box-shadow:none;background:#7cd9e5}.cta-graph i:nth-child(7){left:48%;top:65%;width:1px;height:87px;transform:rotate(64deg);box-shadow:none;background:#7cd9e5}footer{border-top:1px solid var(--line);max-width:1280px;margin:auto;padding:25px 36px;display:flex;gap:30px;align-items:center}footer p{margin:0;font-size:11px;color:#738096}footer p:last-child{margin-left:auto}footer strong{letter-spacing:2px;color:#37435b;font-size:10px}
@media(max-width:760px){.site-header{padding:0 20px;height:64px}nav{display:none}.header-cta{font-size:11px}.hero{padding:58px 20px 70px;display:block;min-height:0}.hero-visual{height:300px;margin-top:55px}h1{letter-spacing:-2.5px}.section{padding:75px 20px}.comparison{grid-template-columns:1fr;gap:22px}.arrow-shift{transform:rotate(90deg);height:25px}.architecture-card{padding:22px 18px}.flow>div{font-size:10px}.flow b{width:23px;height:23px}.difference,.recommendation{padding-left:20px;padding-right:20px}.versus{grid-template-columns:1fr}.steps,.principle-grid{grid-template-columns:1fr 1fr}.steps li{margin-right:12px;padding-right:12px}.steps li:nth-child(2){border:0}.panel-metrics,.evidence{grid-template-columns:1fr}.panel-metrics>div{border-right:0;border-bottom:1px solid #e4e9f0}.evidence aside{border-left:0;border-top:1px solid #e4e9f0}.evidence ul{columns:1}.final-cta{padding:75px 20px;display:block}.cta-graph{margin:45px auto 0;width:260px;height:140px}footer{padding:25px 20px;display:grid;gap:9px}footer p:last-child{margin-left:0}.lede{font-size:16px}}
@media(max-width:390px){.steps,.principle-grid{grid-template-columns:1fr}.steps li{border-right:0;border-bottom:1px solid var(--line)}.flow{gap:3px}.flow>div{gap:3px}.architecture-card{overflow:hidden}}
.vernir-wordmark{font:700 11px var(--sans);letter-spacing:.9px}

/* ArchShift dark theme: Vernir navy and cyan establish the family; lime marks
   ArchShift's own cost-saving outcomes and primary actions. */
:root{--ink:#f3f7ff;--ink-2:#dce7fb;--paper:#070b18;--line:#202b42;--muted:#8b9ab4;--cyan:#27d8ef;--blue:#75a9ff;--accent:#c7f464;--accent-deep:#a7d447}body{background:var(--paper);color:var(--ink)}.site-header{background:var(--paper)}.brand{color:var(--ink)}.brand-mark{border-color:var(--cyan)}.brand-mark i:nth-child(3){background:var(--paper)}nav a{color:#abb9d1}.header-cta{color:var(--ink);border-color:var(--accent)}.header-cta span{color:var(--accent)}.lede{color:#aebbd0}.primary{background:var(--accent);color:#07101b;box-shadow:4px 4px 0 var(--cyan)}.text-link{color:var(--ink)}.text-link span{color:var(--accent)}.hero-visual{background:#090f22;box-shadow:14px 14px 0 rgba(39,216,239,.24)}.hero-visual:before{background-image:linear-gradient(rgba(39,216,239,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(39,216,239,.08) 1px,transparent 1px)}.aws-icon{background:#121d36;border-color:#2b3c61;color:#b9c7e4}.ecs .aws-icon{border-color:var(--cyan);color:var(--cyan)}.shift-chip{background:#111d38;border-left-color:var(--accent)}.shift-chip span{color:var(--accent)}.concept{border-color:var(--line)}.architecture-card{background:#0d1427;border-color:#26334d}.architecture-card.proposed{background:#0d1826;border-color:#3e6a69;box-shadow:7px 7px 0 rgba(39,216,239,.2)}.card-kicker{color:#91a2be}.card-kicker>span{background:#6c7990}.proposed .card-kicker>span{background:var(--accent)}.card-kicker b{color:var(--accent)}.flow b{background:#19243b;color:#aebbd1}.flow small{color:#7c8ca8}.flow .highlight b{background:#173244;color:var(--cyan)}.price{color:#f5f8ff}.price small{color:#8795ad}.saving{color:var(--accent)}.arrow-shift{color:var(--accent)}.arrow-shift small{color:#93a2bb}.difference{background:#0a1020}.difference .section-heading>p:last-child{color:#aebbd0}.versus{background:#27334f}.versus article{background:#0e172b}.versus .accent{background:#132033;box-shadow:inset 3px 0 0 var(--accent)}.accent .mini-label{color:var(--accent)}.versus ul,.versus li{border-color:#283650}.versus li{color:#b7c4d8}.accent li:before{color:var(--accent)}.how{border-color:var(--line)}.steps{border-color:var(--line)}.steps li{border-color:var(--line)}.steps p,.principle-grid p{color:#9aa9c1}.recommendation{background:#0b1222}.product-panel{background:#10192c;border-color:#2a3853;box-shadow:9px 9px 0 rgba(199,244,100,.14)}.product-panel header,.panel-metrics{border-color:#2a3853}.product-panel h3{color:var(--ink)}.product-panel button{color:#9baac3}.panel-overline{color:var(--accent)}.panel-overline span{color:var(--cyan)}.panel-metrics>div{border-color:#2a3853}.panel-metrics span,.evidence p{color:#94a4bd}.panel-metrics strong{color:var(--accent)}.panel-metrics strong small{color:#93a4bc}.panel-metrics b{color:#dae4f3}.proposed-metric b{color:var(--cyan)}.evidence aside{border-color:#2a3853;background:#171a21}.evidence li{color:#b4c1d4}.evidence li:before{color:var(--accent)}.evidence aside p{color:#e2b968}.evidence aside b{color:#e4eaf3}.evidence aside small{color:#9eaabe}.principle-grid article{border-color:var(--accent)}.principle-grid>article>span{color:var(--cyan)}.final-cta{background:radial-gradient(circle at 78% 50%,rgba(39,216,239,.08),transparent 26%)}footer{border-color:var(--line)}footer p{color:#8e9cb5}footer strong{color:#d6e0ef}.cta-graph{background-image:radial-gradient(#2b4e5b 1px,transparent 1px)}.cta-graph i{background:var(--accent);box-shadow:0 0 14px var(--accent)}.cta-graph i:nth-child(6),.cta-graph i:nth-child(7){background:var(--cyan)}

/* Refined interaction layer: measured depth and motion for a technical brand. */
:root {
  --surface: rgba(14, 22, 42, 0.78);
  --surface-strong: #101a30;
  --glow-cyan: rgba(39, 216, 239, 0.18);
  --glow-lime: rgba(199, 244, 100, 0.14);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 8%, rgba(48, 97, 155, 0.16), transparent 28rem),
    radial-gradient(circle at 7% 24%, rgba(39, 216, 239, 0.07), transparent 23rem),
    var(--paper);
  font-size: 1.125rem;
}

.lede {
  font-size: 19px;
}

nav a,
.header-cta {
  font-size: 14px;
}

.button,
.text-link,
.steps p,
.principle-grid p,
.versus li {
  font-size: 15px;
}

.panel-metrics b,
.evidence li,
.evidence aside b,
.evidence aside small,
footer p {
  font-size: 14px;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 0.7px, transparent 0.7px);
  background-size: 7px 7px;
  content: "";
  opacity: 0.25;
  pointer-events: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  max-width: none;
  padding-inline: max(36px, calc((100vw - 1208px) / 2));
  border-bottom: 1px solid rgba(117, 169, 255, 0.12);
  background: rgba(7, 11, 24, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
}

.brand-mark {
  box-shadow: 0 0 22px rgba(39, 216, 239, 0.18);
  transition: transform 500ms var(--ease-out), box-shadow 500ms ease;
}

.brand:hover .brand-mark {
  box-shadow: 0 0 28px rgba(39, 216, 239, 0.42);
  transform: rotate(135deg);
}

nav a {
  position: relative;
  padding-block: 8px;
  transition: color 200ms ease;
}

nav a::after {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--accent));
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms var(--ease-out);
}

nav a:hover {
  color: #fff;
}

nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-cta {
  padding: 9px 14px;
  border: 1px solid rgba(199, 244, 100, 0.45);
  border-radius: 999px;
  background: rgba(199, 244, 100, 0.04);
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.header-cta:hover {
  border-color: var(--accent);
  background: rgba(199, 244, 100, 0.1);
  transform: translateY(-2px);
}

.hero {
  min-height: calc(100vh - 76px);
  padding-block: clamp(70px, 9vw, 118px);
}

.hero-copy {
  position: relative;
  z-index: 2;
  animation: hero-enter 900ms 80ms both var(--ease-out);
}

h1 {
  max-width: 760px;
  background: linear-gradient(112deg, #fff 14%, #dbe9ff 58%, #9eeaf2 112%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}

h2 {
  text-wrap: balance;
}

.eyebrow span {
  box-shadow: 0 0 15px rgba(39, 216, 239, 0.65);
}

.actions {
  flex-wrap: wrap;
}

.button {
  position: relative;
  min-height: 50px;
  padding: 14px 22px;
  border-radius: 999px;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}

.button:hover {
  background: #d1fa77;
  box-shadow: 4px 4px 0 var(--cyan);
}

.button span,
.text-link span,
.header-cta span {
  display: inline-block;
  transition: transform 300ms var(--ease-out);
}

.button:hover span,
.header-cta:hover span {
  transform: translateX(3px);
}

.text-link {
  position: relative;
  padding-block: 8px;
}

.text-link::after {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  content: "";
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform 300ms var(--ease-out);
}

.text-link:hover::after {
  transform: scaleX(1);
}

.text-link:hover span {
  transform: translateY(3px);
}

.hero-visual {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  border: 1px solid rgba(117, 169, 255, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 52% 48%, rgba(39, 216, 239, 0.12), transparent 30%),
    linear-gradient(145deg, #0d1730, #070c1b 68%);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.34),
    12px 12px 0 rgba(39, 216, 239, 0.13);
  transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 350ms var(--ease-out), box-shadow 350ms ease;
  animation: visual-enter 1000ms 180ms both var(--ease-out);
}

.hero-visual:hover {
  box-shadow:
    0 38px 95px rgba(0, 0, 0, 0.44),
    12px 12px 0 rgba(39, 216, 239, 0.2);
}

.hero-visual::before {
  border-radius: inherit;
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.visual-label b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.visual-label b span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: live-pulse 1.8s ease-in-out infinite;
}

.signal {
  animation: signal-pulse 4s ease-in-out infinite;
}

.signal-two {
  animation-delay: -2s;
}

.node {
  animation: node-float 4.6s ease-in-out infinite;
}

.node:nth-of-type(2) {
  animation-delay: -1.5s;
}

.node:nth-of-type(3) {
  animation-delay: -3s;
}

.aws-icon {
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 250ms ease, transform 250ms var(--ease-out);
}

.node:hover .aws-icon {
  border-color: var(--cyan);
  transform: translateY(-4px) scale(1.04);
}

.edge {
  overflow: hidden;
  background: rgba(77, 99, 138, 0.6);
}

.edge::after {
  position: absolute;
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  content: "";
  animation: data-flow 2.4s linear infinite;
}

.shift-chip {
  border: 1px solid rgba(199, 244, 100, 0.2);
  border-left: 2px solid var(--accent);
  border-radius: 8px;
  background: rgba(17, 29, 56, 0.78);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  animation: chip-float 3.8s ease-in-out infinite;
}

.section {
  position: relative;
}

.architecture-card,
.versus article,
.product-panel,
.principle-grid article {
  transition: border-color 300ms ease, box-shadow 300ms ease, transform 350ms var(--ease-out);
}

.architecture-card {
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.15);
}

.architecture-card:hover {
  border-color: rgba(117, 169, 255, 0.45);
  transform: translateY(-6px);
}

.architecture-card.proposed {
  background:
    radial-gradient(circle at 100% 0, rgba(199, 244, 100, 0.08), transparent 45%),
    #0d1826;
  box-shadow: 0 20px 55px rgba(39, 216, 239, 0.08), 7px 7px 0 rgba(39, 216, 239, 0.16);
}

.difference {
  background:
    radial-gradient(circle at 88% 15%, rgba(39, 216, 239, 0.11), transparent 27rem),
    linear-gradient(180deg, #080e1d, #0a1020);
}

.versus {
  gap: 12px;
  border: 1px solid rgba(117, 169, 255, 0.14);
  border-radius: 16px;
  background: rgba(39, 51, 79, 0.55);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.versus article:hover {
  background: #111d35;
}

.versus .accent {
  background: linear-gradient(145deg, #15253a, #101b30);
}

.steps li {
  position: relative;
  margin-right: 0;
  padding: 25px 24px 10px;
  transition: background 250ms ease, transform 300ms var(--ease-out);
}

.steps li:hover {
  background: linear-gradient(180deg, rgba(39, 216, 239, 0.055), transparent);
  transform: translateY(-4px);
}

.recommendation {
  background:
    radial-gradient(circle at 14% 30%, rgba(117, 169, 255, 0.1), transparent 25rem),
    radial-gradient(circle at 86% 74%, rgba(199, 244, 100, 0.06), transparent 26rem),
    #0b1222;
}

.product-panel {
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(17, 28, 50, 0.96), rgba(13, 21, 39, 0.96));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3), 9px 9px 0 rgba(199, 244, 100, 0.1);
  overflow: hidden;
}

.product-panel:hover {
  border-color: rgba(199, 244, 100, 0.3);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.36), 9px 9px 0 rgba(199, 244, 100, 0.15);
  transform: translateY(-5px);
}

.product-panel button {
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}

.product-panel button:hover,
.product-panel button:focus-visible {
  border-color: rgba(117, 169, 255, 0.3);
  background: rgba(117, 169, 255, 0.08);
}

.principle-grid article {
  position: relative;
  padding: 21px 20px 18px;
  border: 1px solid rgba(117, 169, 255, 0.12);
  border-top: 2px solid var(--accent);
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(18, 29, 51, 0.62), transparent);
}

.principle-grid article:hover {
  border-color: rgba(199, 244, 100, 0.32);
  transform: translateY(-5px);
}

.final-cta {
  position: relative;
  margin-block: 30px;
  border: 1px solid rgba(117, 169, 255, 0.14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 78% 50%, rgba(39, 216, 239, 0.14), transparent 28%),
    linear-gradient(135deg, rgba(15, 25, 47, 0.92), rgba(8, 14, 29, 0.78));
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.26);
}

.cta-graph i:nth-child(-n + 5) {
  animation: graph-node 3.4s ease-in-out infinite;
}

.cta-graph i:nth-child(2) {
  animation-delay: -0.7s;
}

.cta-graph i:nth-child(3) {
  animation-delay: -1.4s;
}

.cta-graph i:nth-child(4) {
  animation-delay: -2.1s;
}

.cta-graph i:nth-child(5) {
  animation-delay: -2.8s;
}

.reveal-ready .reveal {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 700ms var(--ease-out), translate 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready .reveal.is-visible {
  opacity: 1;
  translate: 0;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes visual-enter {
  from { opacity: 0; transform: perspective(1000px) translateY(28px) scale(0.97); }
  to { opacity: 1; transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); }
}

@keyframes live-pulse {
  50% { opacity: 0.45; transform: scale(0.72); }
}

@keyframes signal-pulse {
  50% { opacity: 0.08; transform: scale(1.035); }
}

@keyframes node-float {
  50% { transform: translateY(-5px); }
}

@keyframes data-flow {
  from { transform: translateX(-100%); }
  to { transform: translateX(350%); }
}

@keyframes chip-float {
  50% { transform: translateY(-4px); }
}

@keyframes graph-node {
  50% { box-shadow: 0 0 24px var(--accent); transform: rotate(45deg) scale(1.25); }
}

@media (max-width: 760px) {
  .site-header {
    padding-inline: 20px;
  }

  .hero {
    min-height: 0;
  }

  .hero-visual {
    border-radius: 14px;
  }

  .final-cta {
    margin: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1 !important;
    translate: none !important;
  }
}