:root {
  --color-flag-red: #C83A38;
  --color-flag-red-dark: #A92D32;
  --color-flag-blue: #244A7C;
  --color-flag-green: #238052;
  --color-flag-cream: #F8F3E7;
  --color-hero-glow: rgba(29, 92, 143, 0.12);
  --color-grid-line: rgba(29, 92, 143, 0.09);
  --color-paper-shadow: rgba(176, 122, 31, 0.1);
  --color-stamp-shadow: rgba(43, 33, 24, 0.2);
  --radius-flag: var(--radius-xs);
  --home-hero-copy: 540px;
  --home-envelope-width: 612px;
  --home-envelope-height: 396px;
  --home-grid-gap: 28px;
}

.home-hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 82% 44%, var(--color-hero-glow), var(--color-transparent) 38%),
    linear-gradient(var(--color-grid-line) 1px, var(--color-transparent) 1px),
    linear-gradient(90deg, var(--color-grid-line) 1px, var(--color-transparent) 1px);
  background-position: center, center bottom, center bottom;
  background-size: auto, 56px 56px, 56px 56px;
}

.home-hero::after {
  position: absolute;
  z-index: -1;
  right: 4%;
  bottom: 5%;
  width: 34%;
  height: 42%;
  border-radius: var(--radius-pill);
  background: var(--color-paper-shadow);
  content: "";
  filter: blur(34px);
  transform: rotate(-8deg);
}

.hero-demo-copy {
  max-width: var(--home-hero-copy);
}

.hero-actions {
  margin-bottom: 24px;
}

.hero-summary {
  margin-bottom: 0;
}

.hero-summary strong {
  color: var(--color-text);
}

.platform-line {
  flex-wrap: wrap;
}

.platform-line-item svg {
  color: var(--color-accent);
}

.linux-face {
  fill: var(--color-panel);
}

.linux-eye {
  fill: var(--color-text);
}

.linux-beak,
.linux-foot {
  fill: var(--color-warn);
}

.hero-stage {
  min-height: calc(var(--home-envelope-height) + 50px);
}

.home-envelope {
  width: var(--home-envelope-width);
  height: var(--home-envelope-height);
  border-image: repeating-linear-gradient(
    45deg,
    var(--color-accent) 0 14px,
    var(--color-panel) 14px 28px
  ) 11;
}

.envelope-route-label {
  position: absolute;
  z-index: 4;
  top: 113px;
  left: 30px;
  color: var(--color-muted);
  font: 700 9px/1.4 var(--font-mono);
  letter-spacing: 0.15em;
}

.route-stamp {
  filter: drop-shadow(0 2px 3px var(--color-stamp-shadow));
}

.flag-svg {
  border-radius: var(--radius-flag);
}

.flag-white {
  fill: var(--color-white);
}

.flag-hk-red,
.flag-sg-red,
.flag-jp-red,
.flag-us-red,
.flag-uk-red,
.flag-it-red {
  fill: var(--color-flag-red);
}

.flag-us-blue,
.flag-uk-blue {
  fill: var(--color-flag-blue);
}

.flag-it-green {
  fill: var(--color-flag-green);
}

.flag-white-stroke {
  fill: none;
  stroke: var(--color-white);
  stroke-width: 8;
}

.flag-uk-red-stroke {
  fill: none;
  stroke: var(--color-flag-red);
  stroke-width: 3;
}

.home-envelope .route-art path {
  stroke-dasharray: 4 10;
}

.home-envelope .route-glow-dot {
  animation-duration: 7.5s;
}

.decision-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--home-grid-gap);
  margin-top: 46px;
  border-top: 1px dashed var(--color-border);
  padding-top: 36px;
}

.decision-notes article {
  min-width: 0;
}

.decision-notes h3 {
  font-size: 21px;
}

.decision-notes p:last-child {
  margin-bottom: 0;
  color: var(--color-muted);
}

.route-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  align-items: start;
  gap: 28px;
}

.route-guide {
  box-shadow: var(--shadow-card);
}

.route-guide h3 {
  font-size: 24px;
}

.route-guide p {
  color: var(--color-muted);
}

.plan-description {
  color: var(--color-muted);
}

.traffic-note {
  margin-top: 32px;
  margin-bottom: 0;
}

.pricing-explanation {
  max-width: var(--reading-width);
  margin-top: 42px;
}

.pricing-explanation p {
  color: var(--color-muted);
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.workflow-card {
  position: relative;
  min-width: 0;
  border-top: 4px solid var(--color-accent);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-panel);
  padding: 27px 24px 24px;
  box-shadow: var(--shadow-card);
}

.workflow-card:nth-child(even) {
  background: var(--color-bg);
}

.workflow-mark {
  display: grid;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  place-items: center;
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 800;
}

.workflow-card h3 {
  font-size: 21px;
}

.workflow-card p {
  margin-bottom: 0;
  color: var(--color-muted);
}

.workflow-summary {
  max-width: 980px;
  margin-top: 34px;
  border-left: 5px solid var(--color-accent);
  box-shadow: var(--shadow-card);
}

.workflow-summary p {
  color: var(--color-muted);
}

.articles-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 36px;
  border-top: 1px dashed var(--color-border);
  padding-top: 28px;
}

.articles-footer p {
  max-width: 660px;
  margin-bottom: 0;
  color: var(--color-muted);
}

@media (max-width: 1200px) {
  .home-hero {
    background-size: auto, 48px 48px, 48px 48px;
  }

  .hero-demo-copy {
    max-width: 700px;
  }

  .hero-stage {
    width: 100%;
  }

  .route-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .route-guide {
    max-width: 760px;
  }

  .workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .decision-notes {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .articles-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .home-hero {
    background-size: auto, 38px 38px, 38px 38px;
  }

  .home-hero::after {
    display: none;
  }

  .hero-demo-copy h1 {
    margin-top: 16px;
    margin-bottom: 18px;
  }

  .hero-actions {
    margin-bottom: 18px;
  }

  .hero-summary {
    font-size: 15px;
    line-height: 1.65;
  }

  .hero-trust {
    margin-top: 16px;
  }

  .platform-line {
    gap: 10px 14px;
    margin-top: 16px;
    padding-top: 14px;
  }

  .platform-line-label {
    width: 100%;
  }

  .hero-stage {
    min-height: 296px;
    padding-top: 22px;
    padding-bottom: 0;
  }

  .home-envelope {
    height: 280px;
  }

  .envelope-route-label {
    display: none;
  }

  .home-envelope .stamp-row {
    top: 14px;
  }

  .home-envelope .postmark {
    right: 32px;
    bottom: 12px;
  }

  .decision-notes {
    margin-top: 34px;
    padding-top: 28px;
  }

  .workflow-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .home-hero .kicker {
    font-size: 11px;
  }

  .home-hero .button-row {
    flex-direction: row;
  }

  .home-hero .button-row .btn {
    width: auto;
    flex: 1 1 0;
    padding-inline: 16px;
  }

  .hero-trust {
    gap: 5px 9px;
    font-size: 12px;
  }

  .platform-line-item {
    font-size: 11px;
  }

  .hero-stage {
    min-height: 252px;
  }

  .home-envelope {
    height: 242px;
    border-width: 8px;
  }

  .home-envelope .stamp-row {
    right: 8px;
    left: 8px;
    gap: 3px;
  }

  .home-envelope .stamp-shell {
    padding: 3px;
  }

  .home-envelope .flag-svg {
    height: 22px;
  }

  .home-envelope .stamp-name {
    margin-top: 3px;
    font-size: 6px;
  }

  .home-envelope .postmark {
    width: 78px;
    height: 78px;
  }

  .home-envelope .postmark strong {
    font-size: 12px;
  }

  .home-envelope .postmark small {
    font-size: 5px;
  }

  .home-envelope .postmark::before {
    top: 25px;
  }

  .home-envelope .postmark::after {
    bottom: 25px;
  }

  .fact-band-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }

  .workflow-summary {
    border-left-width: 4px;
  }
}

@media (max-width: 380px) {
  .home-hero .button-row {
    flex-direction: column;
  }

  .home-hero .button-row .btn {
    width: 100%;
  }

  .hero-trust-separator {
    display: none;
  }

  .platform-line {
    gap: 9px 12px;
  }

  .hero-stage {
    min-height: 226px;
  }

  .home-envelope {
    height: 216px;
  }

  .home-envelope .postmark {
    width: 70px;
    height: 70px;
  }

  .fact-band-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-envelope .route-glow-dot {
    animation: none;
  }
}