/* След Эха. Layout and interactions use Bootstrap; the visual language follows the Android game. */
@font-face {
  font-family:Manrope;
  src:url('../assets/vendor/fonts/manrope.woff2') format('woff2');
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family:Manrope;
  src:url('../assets/vendor/fonts/manrope-latin.woff2') format('woff2');
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --bg:#100919;
  --surface:#171021;
  --text:#fff0d4;
  --muted:#baacc7;
  --accent:#c59ae9;
  --line:rgba(205,172,111,.14);
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  --bs-border-color:var(--line);
  --bs-body-font-family:'Manrope',sans-serif;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Manrope,Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

::selection {
  background:#c59ae9;
  color:#100919;
}

a {
  color:inherit;
  text-decoration:none;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  font:inherit;
}

button:focus-visible,a:focus-visible {
  outline:2px solid var(--accent)!important;
  outline-offset:6px;
  box-shadow:none!important;
}

a:hover {
  color:var(--accent);
}

img,video {
  display:block;
  max-width:100%;
}

h1,h2,h3,p,figure {
  margin-top:0;
}

h2 {
  font-size:clamp(32px,3.55vw,56px);
  font-weight:600;
  line-height:1.17;
  letter-spacing:-1.8px;
}

h3 {
  font-weight:600;
}

p {
  color:var(--muted);
}

.text-accent {
  color:var(--accent);
}

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

.container {
  padding-inline:24px;
}

.section-space {
  padding-block:85px;
}

.section-bottom {
  padding-bottom:85px;
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--accent);
  font-size:11px;
  line-height:1.6;
  letter-spacing:2.6px;
  font-weight:600;
  margin-bottom:24px;
}

.status-dot {
  display:inline-block;
  width:5px;
  height:5px;
  background:var(--accent);
  border-radius:50%;
  box-shadow:0 0 12px #c59ae955;
  flex-shrink:0;
}

.body-copy {
  font-size:16px;
  line-height:1.9;
  max-width:540px;
}

.btn {
  border-radius:3px;
  padding:17px 24px;
  font-size:11px;
  line-height:1.5;
  letter-spacing:1.3px;
  text-transform:uppercase;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  transition:transform .25s,border-color .25s,background .25s,color .25s;
}

.btn:hover {
  transform:translateY(-2px);
}

.btn-echo {
  background:var(--accent);
  border:1px solid var(--accent);
  color:#fff0d4;
  box-shadow:0 6px 35px #c59ae90d;
}

.btn-echo:hover,.btn-echo:active {
  background:#ead4ff!important;
  border-color:#ead4ff!important;
  color:#fff0d4!important;
}

.btn i {
  font-size:17px;
}

.btn-outline-echo {
  color:var(--text);
  border:1px solid #ffffff45;
  background:#0a101433;
}

.btn-outline-echo:hover {
  color:var(--accent);
  border-color:var(--accent);
}

.skip-link {
  position:fixed;
  top:8px;
  left:12px;
  padding:12px;
  background:var(--accent);
  color:#100919;
  z-index:2000;
  transform:translateY(-150%);
}

.skip-link:focus {
  transform:translateY(0);
}

/* Navigation */
.site-header {
  position:fixed;
  inset:0 0 auto;
  z-index:1030;
  transition:background .35s,border-color .35s;
  border-bottom:1px solid transparent;
}

.site-header.scrolled {
  background:#100919df;
  border-color:var(--line);
  backdrop-filter:blur(18px);
}

.navbar {
  height:88px;
  flex-wrap:nowrap;
}

.brand {
  display:flex;
  align-items:center;
  gap:13px;
  flex-shrink:0;
  font-size:19px;
  line-height:1.2;
  letter-spacing:2.3px;
  font-weight:700;
}

.brand small {
  display:block;
  letter-spacing:2.1px;
  font-size:7px;
  font-weight:500;
  color:#b1bcc6;
  margin-top:7px;
}

.echo-mark {
  position:relative;
  display:block;
  width:21px;
  height:32px;
  border:1px solid var(--accent);
  transform:skewY(-18deg);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

.echo-mark:before,.echo-mark:after {
  content:'';
  position:absolute;
  inset:5px;
  border:1px solid var(--accent);
}

.echo-mark:after {
  inset:9px 7px;
  background:var(--accent);
}

.desktop-nav {
  gap:30px;
}

.desktop-nav a {
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1.4px;
  color:#dacbe5;
}

.desktop-nav a:hover {
  color:var(--accent);
}

.nav-play {
  padding:12px 20px;
  font-size:10px;
  gap:20px;
}

.menu-toggle,.icon-button {
  background:transparent;
  border:1px solid var(--line);
  width:42px;
  height:42px;
  color:var(--text);
  display:grid;
  place-items:center;
  border-radius:3px;
}

.menu-toggle {
  font-size:24px;
}

.offcanvas {
  background:#140c20;
  --bs-offcanvas-width:360px;
}

.offcanvas-header {
  padding:28px;
}

.offcanvas-header h2 {
  font-size:21px;
  letter-spacing:2px;
  margin:0;
}

.offcanvas-body {
  padding:28px;
}

.mobile-links {
  display:flex;
  flex-direction:column;
  gap:24px;
}

.mobile-links a {
  font-size:24px;
}

.menu-foot {
  margin-top:80px;
  font-size:14px;
}

/* Cinematic hero */
.hero {
  position:relative;
  min-height:820px;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#130a20;
}

.hero-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:62% 48%;
  opacity:.88;
}

.hero-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(16,9,25,.92),rgba(16,9,25,.36) 72%,rgba(16,9,25,.2)),linear-gradient(0deg,#100919,transparent 36%,rgba(16,9,25,.2) 78%,#10091966);
  box-shadow:inset 0 0 180px #03080b55;
}

.grain {
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

.hero-content {
  position:relative;
  padding-top:145px;
  padding-bottom:130px;
  z-index:1;
}

.hero h1 {
  font-size:clamp(58px,8.2vw,120px);
  line-height:1.04;
  font-weight:600;
  letter-spacing:-3px;
  margin:25px 0;
}

.hero h1 span {
  color:#f4dab0;
}

.hero-tagline {
  font-size:clamp(24px,2.4vw,36px);
  line-height:1.4;
  color:var(--text);
  font-weight:400;
  letter-spacing:-.6px;
  margin-bottom:22px;
}

.hero-description {
  font-size:16px;
  line-height:1.9;
  color:#c9b7d5;
  max-width:440px;
}

.hero-actions {
  margin-top:32px;
}

.btn-trailer {
  background:#0a101638;
  border:1px solid #ffffff22;
  color:var(--text);
  gap:13px;
  padding:13px 20px;
}

.btn-trailer:hover {
  color:var(--accent);
  border-color:var(--accent);
  background:#101e2588;
}

.play-circle {
  height:25px;
  width:25px;
  border:1px solid #ffffff40;
  border-radius:50%;
  display:grid;
  place-items:center;
}

.hero-note {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:11px;
  color:#bba8c7;
  margin:26px 0 0;
}

.tiny-line {
  width:18px;
  height:1px;
  background:#617380;
}

.hero-coordinate {
  display:none;
}

.hero-bottom {
  position:absolute;
  bottom:27px;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:1.7px;
  color:#cabbdb;
  text-transform:uppercase;
}

.scroll-link {
  display:flex;
  align-items:center;
  gap:14px;
}

.scroll-track {
  width:14px;
  height:22px;
  border:1px solid #cabbdb55;
  border-radius:10px;
  position:relative;
}

.scroll-track:after {
  content:'';
  position:absolute;
  width:2px;
  height:5px;
  background:var(--accent);
  left:5px;
  top:4px;
  animation:scroll-cue 2s infinite;
}

.hero-bottom-right {
  display:flex;
  align-items:center;
  gap:25px;
}

.hero-bottom-right>span {
  display:none;
}

.icon-button {
  width:32px;
  height:32px;
  font-size:17px;
}

.icon-button:hover {
  color:var(--accent);
}

/* World introduction and features */
.intro {
  position:relative;
}

.intro .text-link {
  display:inline-flex;
  align-items:center;
  gap:22px;
  color:var(--text);
  font-size:12px;
  border-bottom:1px solid #c59ae95c;
  padding:12px 0;
  margin-top:13px;
}

.text-link i {
  color:var(--accent);
}

.world-figure {
  position:relative;
  height:460px;
  max-width:460px;
  margin:0 auto;
  overflow:hidden;
}

.world-figure:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,var(--bg),transparent 30%,transparent 80%,var(--bg));
}

.world-figure img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 35%;
}

.world-figure figcaption {
  position:absolute;
  bottom:28px;
  left:20px;
  right:20px;
  z-index:1;
  font-size:8px;
  letter-spacing:1.7px;
  display:flex;
  gap:10px;
  align-items:center;
}

.section-heading {
  position:relative;
  margin-bottom:40px;
}

.section-heading h2 {
  font-size:clamp(30px,3vw,44px);
}

.section-index {
  position:absolute;
  right:0;
  bottom:5px;
  font:10px monospace;
  letter-spacing:2px;
  color:var(--muted);
  display:none;
}

.feature {
  height:100%;
  min-height:315px;
  background:linear-gradient(135deg,#22162daa,#140d20a0);
  border:1px solid var(--line);
  border-radius:22px;
  padding:28px;
  transition:transform .35s,border-color .35s,box-shadow .35s;
  position:relative;
  overflow:hidden;
}

.feature:hover {
  transform:translateY(-5px);
  border-color:#c59ae966;
  box-shadow:0 0 40px #c59ae90a;
}

.feature-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:40px;
}

.feature-top span {
  font:12px monospace;
  color:#7d8b9b;
}

.feature-top i {
  font-size:26px;
  color:var(--accent);
  font-weight:300;
}

.feature h3 {
  font-size:23px;
  letter-spacing:-.7px;
  margin-bottom:20px;
}

.feature p {
  font-size:16px;
  line-height:1.8;
  margin:0;
}

.feature-line {
  position:absolute;
  bottom:0;
  left:28px;
  width:32px;
  height:1px;
  background:var(--accent);
}

/* Choice interaction */
.choice-section {
  border-block:1px solid var(--line);
  background:radial-gradient(ellipse at 80% 50%,#49266135,transparent 55%),#140c20;
}

.choice-options {
  margin-top:32px;
  display:grid;
  gap:10px;
  max-width:560px;
}

.choice-option {
  display:flex;
  align-items:center;
  gap:20px;
  text-align:left;
  width:100%;
  padding:16px 20px;
  background:#180f23;
  border:1px solid #b1cddd23;
  border-radius:4px;
  color:#dfd0e8;
  transition:background .25s,border-color .25s;
}

.choice-number {
  font:11px monospace;
  color:#778a9b;
}

.choice-option i {
  margin-left:auto;
  color:#647784;
}

.choice-option:hover,.choice-option:focus-visible,.choice-option[aria-pressed=true] {
  color:var(--accent);
  background:#c59ae909;
  border-color:#c59ae975;
}

.choice-option:hover i,.choice-option[aria-pressed=true] i {
  color:var(--accent);
}

.echo-preview {
  text-align:center;
  max-width:370px;
  margin:auto;
}

.echo-preview .eyebrow {
  justify-content:center;
  font-size:9px;
  letter-spacing:2.3px;
}

.echo-preview p {
  font-size:16px;
}

.echo-orbit {
  position:relative;
  width:220px;
  height:220px;
  margin:0 auto 30px;
  display:grid;
  place-items:center;
}

.echo-orbit span {
  position:absolute;
  inset:0;
  border:1px solid #c59ae919;
  border-radius:50%;
}

.echo-orbit span:nth-child(2) {
  inset:28px;
  border-color:#c59ae938;
}

.echo-orbit span:nth-child(3) {
  inset:58px;
  border-color:#c59ae950;
  box-shadow:0 0 70px #c59ae913,inset 0 0 30px #c59ae90c;
}

.echo-orbit:after {
  content:'';
  position:absolute;
  top:28px;
  left:105px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px var(--accent);
}

.echo-orbit i {
  font-size:40px;
  color:var(--accent);
}

.choice-outcome:empty {
  display:none;
}

.choice-outcome {
  border-top:1px solid var(--line);
  padding-top:20px;
  color:#dce6ea!important;
}

.reset-link {
  background:none;
  border:0;
  color:var(--accent);
  padding:10px 0;
  font-size:12px;
  text-align:left;
}

.reset-link i {
  margin-left:8px;
}

/* Consequences and steps */
.consequence-figure {
  height:520px;
  position:relative;
  overflow:hidden;
  margin:0;
}

.consequence-figure:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#100919c9,transparent 50%);
}

.consequence-figure img {
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:center 43%;
  filter:saturate(.65);
}

.consequence-figure figcaption {
  position:absolute;
  z-index:1;
  bottom:24px;
  left:22px;
  font-size:8px;
  letter-spacing:1.5px;
  display:flex;
  gap:10px;
  align-items:center;
}

.consequence-figure figcaption i {
  font-size:19px;
  color:var(--accent);
}

.world-copy h2 {
  margin-bottom:30px;
}

.echo-timeline {
  list-style:none;
  margin:35px 0 0;
  padding:0 0 0 20px;
  border-left:1px solid #c59ae933;
}

.echo-timeline li {
  position:relative;
  display:flex;
  align-items:baseline;
  gap:20px;
  font-size:13px;
  padding-bottom:28px;
}

.echo-timeline li:last-child {
  padding-bottom:0;
}

.echo-timeline li:before {
  content:'';
  position:absolute;
  left:-24px;
  top:8px;
  background:#100919;
  border:1px solid var(--accent);
  height:7px;
  width:7px;
  border-radius:50%;
}

.echo-timeline time {
  color:var(--accent);
  font:11px monospace;
}

.echo-timeline li:last-child:before {
  background:var(--accent);
  box-shadow:0 0 12px #c59ae950;
}

.how {
  border-top:1px solid var(--line);
  background:#130c1d;
}

.steps {
  list-style:none;
  padding:0;
  margin-top:45px;
}

.steps li {
  position:relative;
  padding-left:65px;
}

.step-number {
  position:absolute;
  left:12px;
  top:0;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid #c59ae960;
  background:#130c1d;
  border-radius:50%;
  font:11px monospace;
  color:var(--accent);
  z-index:1;
}

.steps li:not(:last-child):after {
  content:'';
  position:absolute;
  left:28px;
  top:32px;
  height:calc(100% + 24px);
  width:1px;
  background:var(--line);
}

.steps h3 {
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:1.1px;
  line-height:1.6;
}

.steps p {
  font-size:16px;
  line-height:1.8;
  margin:12px 0;
}

/* Dialogue */
.story-side-note {
  display:inline-flex;
  gap:12px;
  align-items:center;
  font-size:9px;
  letter-spacing:1.6px;
  color:var(--muted);
  margin-top:25px;
}

.story-side-note i {
  color:var(--accent);
  font-size:18px;
}

.dialogue {
  background:linear-gradient(135deg,#21162a,#160f20);
  border:1px solid #beddf329;
  border-radius:9px;
  box-shadow:0 24px 70px #0003;
  overflow:hidden;
}

.dialogue-bar {
  padding:20px 24px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:10px monospace;
  letter-spacing:1.3px;
}

.dialogue-bar i {
  font-size:16px;
  color:var(--accent);
  margin-right:10px;
}

.dialogue-live {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:8px;
}

.dialogue-body {
  padding:26px 22px;
}

.speaker {
  display:flex;
  gap:14px;
  align-items:center;
}

.avatar {
  display:grid;
  place-items:center;
  height:42px;
  width:42px;
  border:1px solid #c59ae933;
  background:#c59ae909;
  color:var(--accent);
  font-size:20px;
  border-radius:50%;
}

.speaker strong {
  font-size:10px;
  letter-spacing:1.9px;
  display:block;
  color:var(--accent);
}

.speaker small {
  font-size:10px;
  color:var(--muted);
}

.speaker>i {
  color:var(--muted);
}

.dialogue-quote {
  font-size:clamp(20px,2vw,26px);
  line-height:1.6;
  color:var(--text);
  margin:26px 0;
}

.dialogue-answers {
  display:grid;
  gap:9px;
}

.dialogue-answers button {
  display:flex;
  align-items:center;
  text-align:left;
  gap:13px;
  width:100%;
  padding:14px;
  background:#ffffff02;
  border:1px solid var(--line);
  border-radius:4px;
  color:#d9cbe0;
  font-size:16px;
  transition:background .2s,border-color .2s;
}

.dialogue-answers button>span {
  font:10px monospace;
  color:#6d8090;
}

.dialogue-answers button>i {
  margin-left:auto;
  opacity:0;
  color:var(--accent);
}

.dialogue-answers button:hover:not(:disabled),.dialogue-answers button.selected {
  border-color:#c59ae955;
  background:#c59ae909;
  color:var(--text);
}

.dialogue-answers button:hover>i,.dialogue-answers button.selected>i {
  opacity:1;
}

.dialogue-answers button:disabled:not(.selected) {
  opacity:.4;
}

.memory-note {
  color:var(--accent);
  font-size:10px;
  display:flex;
  gap:8px;
  align-items:center;
  margin:18px 0 0;
}

.memory-note i {
  font-size:15px;
}

/* Closing scenes */
.atmosphere {
  position:relative;
  min-height:430px;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:80px 0;
}

.atmosphere>img {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  object-fit:cover;
  object-position:50% 55%;
  filter:saturate(.5);
}

.atmosphere:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#100919,transparent 40%,#100919),#140a2155;
}

.atmosphere .container {
  position:relative;
  z-index:1;
}

.atmosphere h2 {
  font-size:clamp(32px,4vw,60px);
  margin:26px 0;
}

.atmosphere p {
  font-size:16px;
  color:#d9c7e4;
}

.small-diamond {
  display:inline-block;
  width:12px;
  height:12px;
  border:1px solid var(--accent);
  transform:rotate(45deg);
}

.statistics {
  padding:65px 0 90px;
}

.statistics strong {
  font-size:76px;
  font-weight:400;
  letter-spacing:-4px;
  line-height:1.3;
}

.statistics strong span {
  font-size:45px;
}

.statistics p {
  font-size:13px;
  margin:12px 0 0;
}

.final-cta {
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
  padding-block:100px 115px;
}

.final-cta>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 58%;
  opacity:.28;
}

.final-cta:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#100919,transparent 50%,#100919),linear-gradient(90deg,#100919cc,transparent,#100919cc);
}

.final-cta .container {
  position:relative;
  z-index:1;
}

.final-cta .eyebrow {
  justify-content:center;
}

.final-cta h2 {
  font-size:clamp(38px,4.8vw,72px);
  margin-bottom:24px;
}

.final-cta p {
  font-size:16px;
}

.final-cta .btn {
  margin-top:22px;
  padding:20px 34px;
}

.final-cta small {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:16px;
}

.site-footer {
  padding-block:45px 24px;
  border-top:1px solid var(--line);
}

.footer-top {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  padding-bottom:40px;
}

.footer-nav,.social-links {
  display:flex;
  gap:24px;
}

.footer-nav a,.footer-nav button {
  font-size:12px;
  color:#aab6c5;
}

.site-footer button {
  border:0;
  background:none;
  padding:0;
}

.social-links button {
  font-size:18px;
  color:#afbdc7;
}

.social-links span {
  font-size:12px;
  font-weight:800;
}

.site-footer button:hover {
  color:var(--accent);
}

.footer-bottom {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:24px;
  font-size:10px;
  color:#84909e;
}

.footer-bottom>div {
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
}

.footer-bottom>span:last-child {
  font-size:8px;
  letter-spacing:1.6px;
  display:none;
}

/* Bootstrap overlays and demo */
.modal-content {
  background:#180f24;
  border:1px solid #c1dce52b;
  border-radius:10px;
  box-shadow:0 30px 100px #0009;
}

.modal-header {
  padding:22px 24px;
  border-color:var(--line);
}

.modal-title {
  font-size:16px;
  letter-spacing:0;
  line-height:1.5;
}

.modal-body {
  padding:26px;
}

.modal-backdrop {
  --bs-backdrop-opacity:.85;
}

.trailer-frame {
  position:relative;
}

.trailer-frame:fullscreen {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100vw;
  height:100vh;
  background:#05080c;
}

.trailer-frame:fullscreen video {
  width:100%;
  max-height:100vh;
}

.modal video {
  width:100%;
  max-height:72vh;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#05080c;
}

.trailer-subtitles {
  position:absolute;
  right:24px;
  bottom:70px;
  left:24px;
  z-index:2;
  display:flex;
  justify-content:center;
  pointer-events:none;
  text-align:center;
}

.trailer-subtitle {
  max-width:min(760px,90%);
  padding:12px 20px;
  color:#f7e4cd;
  background:#150b21d9;
  border:1px solid #d5ae7050;
  border-radius:6px;
  box-shadow:0 5px 24px #0008;
  font:600 clamp(16px,2.3vw,29px)/1.28 var(--heading-font);
}

.trailer-download {
  position:absolute;
  top:50%;
  left:50%;
  z-index:3;
  display:flex;
  align-items:center;
  gap:12px;
  width:max-content;
  max-width:calc(100% - 32px);
  padding:10px 16px 10px 11px;
  color:#fff0d4;
  background:linear-gradient(100deg,#3c174f,#752da4 52%,#3c174f);
  border:1px solid #e2c080;
  border-radius:11px;
  box-shadow:0 8px 28px #000a, inset 0 0 0 1px #fff1c520;
  font:700 15px/1.05 var(--heading-font);
  transform:translate(-50%,-50%);
  transition:transform .2s ease, filter .2s ease;
}

.trailer-download:hover {
  color:#fff7e8;
  filter:brightness(1.12);
  transform:translate(-50%,calc(-50% - 2px));
}

.trailer-download small {
  display:block;
  margin-bottom:3px;
  color:#f0d3ff;
  font:700 8px/1 Manrope,sans-serif;
  letter-spacing:1.1px;
}

.trailer-download>i { margin-left:7px; color:#ffe2a5; }

.trailer-download-mark {
  display:block;
  width:31px;
  height:31px;
  border-radius:8px;
  flex:0 0 auto;
}

.trailer-fullscreen {
  position:absolute;
  top:15px;
  right:15px;
  z-index:4;
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  color:#fff0d4;
  background:#100919ba;
  border:1px solid #d5ae7070;
  border-radius:50%;
  font-size:17px;
}

.trailer-fullscreen:hover {
  color:#fff;
  border-color:#f4dab0;
  background:#321743e8;
}

.trailer-frame:fullscreen .trailer-fullscreen {
  top:28px;
  right:28px;
}

.video-caption {
  font-size:12px;
  padding:15px 24px;
  margin:0;
}

@media(max-width:575.98px) {
  .trailer-subtitles { right:12px; bottom:58px; left:12px; }
  .trailer-subtitle { max-width:100%; padding:8px 12px; font-size:16px; }
  .trailer-download { max-width:calc(100% - 24px); padding:8px 12px 8px 9px; font-size:13px; }
  .trailer-download-mark { width:27px; height:27px; font-size:18px; }
  .trailer-fullscreen { top:10px; right:10px; width:34px; height:34px; font-size:15px; }
}

.game-modal h2 {
  font-size:36px;
  margin-bottom:20px;
}

.game-modal #demo-text {
  font-size:17px;
  line-height:1.9;
  color:#d6c6df;
}

.demo-options {
  display:grid;
  gap:10px;
  margin-top:26px;
}

.demo-options button {
  border:1px solid var(--line);
  color:var(--text);
  background:#21142e;
  border-radius:4px;
  padding:15px 18px;
  text-align:left;
}

.demo-options button:hover {
  border-color:var(--accent);
  color:var(--accent);
}

.demo-memory {
  font-size:12px;
  color:var(--accent);
  min-height:22px;
  margin:20px 0;
}

.demo-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:10px;
}

.demo-footer>span {
  font-size:10px;
  color:var(--muted);
}

/* Enhancement is opt-in: content remains visible if JavaScript fails. */
.motion-ready .reveal {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s ease,transform .7s ease;
}

.motion-ready .reveal.visible {
  opacity:1;
  transform:translateY(0);
}

@keyframes scroll-cue {
  0%,100% {
    transform:translateY(0);
    opacity:.4;
  }
  50% {
    transform:translateY(6px);
    opacity:1;
  }
}

@media(min-width:576px) {
  .container {
    padding-inline:24px;
  }
  .hero h1 {
    letter-spacing:-4px;
  }
  .hero-bottom-right>span {
    display:block;
  }
  .section-index {
    display:inline;
  }
  .footer-nav {
    gap:28px;
  }
}

@media(min-width:768px) {
  .section-space {
    padding-block:110px;
  }
  .section-bottom {
    padding-bottom:110px;
  }
  .hero-content {
    padding-top:155px;
    padding-bottom:150px;
  }
  .hero {
    min-height:900px;
    min-height:100svh;
  }
  .hero-shade {
    background:linear-gradient(90deg,#100919e8,rgba(16,9,25,.55) 45%,rgba(16,9,25,.08)),linear-gradient(0deg,#100919,transparent 35%,transparent 75%,#10091988);
  }
  .world-figure {
    height:580px;
  }
  .steps li {
    padding:70px 24px 0 12px;
  }
  .step-number {
    width:38px;
    height:38px;
    top:0;
  }
  .steps li:not(:last-child):after {
    left:50px;
    top:19px;
    width:calc(100% - 38px);
    height:1px;
  }
  .statistics .col-md-4+.col-md-4 {
    border-left:1px solid var(--line);
  }
  .dialogue-body {
    padding:32px;
  }
  .atmosphere {
    min-height:530px;
  }
  .footer-bottom>span:last-child {
    display:block;
  }
}

@media(min-width:992px) {
  .hero-coordinate {
    display:block;
    position:absolute;
    right:38px;
    top:45%;
    writing-mode:vertical-rl;
    font:8px monospace;
    letter-spacing:2px;
    color:#abb8c988;
  }
  .intro .body-copy {
    max-width:510px;
  }
  .world-copy {
    padding-left:60px;
  }
  .consequence-figure {
    height:620px;
  }
  .hero-content .eyebrow {
    font-size:10px;
  }
  .hero-content {
    padding-top:155px;
    padding-bottom:130px;
  }
  .hero h1 {
    margin-top:24px;
    margin-bottom:25px;
  }
  .world-figure {
    height:620px;
  }
  .section-space {
    padding-block:125px;
  }
}

@media(min-width:1200px) {
  .container {
    max-width:1200px;
    padding-inline:30px;
  }
  .feature {
    padding:28px 24px;
    min-height:345px;
  }
  .feature p {
    font-size:16px;
  }
  .hero h1 {
    font-size:108px;
  }
  .hero-tagline {
    font-size:31px;
  }
  .hero-description {
    font-size:15px;
  }
  .hero .btn {
    padding-block:17px;
  }
  .desktop-nav {
    gap:30px;
  }
}

@media(min-width:1600px) {
  .container {
    max-width:1440px;
  }
  .hero h1 {
    font-size:128px;
  }
  .hero-tagline {
    font-size:38px;
  }
  .hero-description {
    font-size:17px;
  }
  .section-space {
    padding-block:150px;
  }
  .feature {
    padding:34px;
    min-height:355px;
  }
  .hero {
    min-height:900px;
    min-height:100svh;
  }
}

@media(max-width:575.98px) {
  .hero-content {
    padding-top:140px;
    padding-bottom:130px;
  }
  .hero .eyebrow {
    font-size:9px;
    letter-spacing:2px;
  }
  .hero-description {
    font-size:16px;
  }
  .hero-actions {
    flex-direction:column;
    align-items:stretch;
    max-width:330px;
  }
  .hero-actions .btn {
    min-height:52px;
  }
  .hero h1 {
    font-size:clamp(55px,13.5vw,76px);
    letter-spacing:-2px;
  }
  .hero-tagline {
    font-size:25px;
  }
  .hero-bottom {
    font-size:8px;
  }
  .world-figure {
    height:450px;
  }
  .dialogue-bar {
    padding:18px;
  }
  .dialogue-live {
    display:none;
  }
  .dialogue-answers button {
    padding:13px 10px;
    gap:10px;
  }
  .dialogue-answers button>i {
    display:none;
  }
  .modal-dialog {
    margin:12px;
  }
  .game-modal h2 {
    font-size:30px;
  }
  .modal-header {
    padding:18px;
  }
  .modal-body {
    padding:22px;
  }
  .hero-note {
    font-size:10px;
  }
  .feature {
    min-height:290px;
  }
  .feature h3 br {
    display:none;
  }
  .feature-top {
    margin-bottom:27px;
  }
  .footer-top .brand {
    width:100%;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
  .motion-ready .reveal {
    opacity:1;
    transform:none;
  }
  .hero-video {
    object-position:62% 48%;
  }
}

/* Original game identity: amethyst magic, old gold, book typography. */
:root {
  --gold: #d5ae70;
  --gold-soft: #f4dab0;
  --heading-font: Georgia, 'Times New Roman', serif;
}
body {
  background: radial-gradient(ellipse at 12% 17%, #2b173b55, transparent 32%), var(--bg);
}
h1, h2, h3, .brand, .dialogue-quote {
  font-family: var(--heading-font);
}
h2 {
  font-weight: 600;
  letter-spacing: -.9px;
  color: var(--gold-soft);
}
h3 { color: var(--gold-soft); }
.eyebrow { color: var(--gold); letter-spacing: 2px; }
.brand { font-size: 26px; letter-spacing: .3px; color: #f6dfb9; gap: 12px; }
.brand small { font-family: Manrope, sans-serif; color: #bdabc9; font-size: 7px; letter-spacing: 2px; }
.brand-logo { width: 46px; height: 46px; object-fit: contain; border-radius: 12px; }
.site-header.scrolled { background: #100919ec; border-color: #d5ae7030; }
.desktop-nav a { color: #d4c3df; }
.btn { border-radius: 30px; text-transform: none; letter-spacing: .1px; font-size: 17px; font-family: var(--heading-font); font-weight: 700; }
.btn-echo {
  background: linear-gradient(100deg, #3c174f, #742ca3 50%, #3c174f);
  border: 1px solid #c299e0;
  color: #ffe6bb;
  box-shadow: inset 0 0 0 3px #cc9beb12, 0 5px 30px #a244de1c;
}
.btn-echo:hover, .btn-echo:active {
  background: linear-gradient(100deg, #502167, #8a3bbc 50%, #502167) !important;
  color: #fff1d8 !important;
  border-color: #ebcaff !important;
}
.btn-outline-echo, .btn-trailer { background: #10091950; border-color: #b38c55a0; color: #f4dab0; }
.btn-outline-echo:hover, .btn-trailer:hover { background: #311a3f; border-color: var(--gold); color: #ffe9c7; }
.nav-play { font-family: Manrope, sans-serif; font-size: 11px; letter-spacing: .4px; padding: 12px 22px; }
.hero { background: #100919; min-height: 900px; min-height: 100svh; }
.hero-video {
  width: auto;
  max-width: none;
  height: 126%;
  top: -12%;
  right: 0;
  bottom: auto;
  left: auto;
  object-fit: contain;
  opacity: 1;
  mask-image: linear-gradient(90deg, transparent, #000 22%);
}
.hero-shade {
  background: linear-gradient(90deg, #100919 3%, #100919ee 27%, #10091988 53%, #10091900 77%), linear-gradient(0deg, #100919, transparent 22%, transparent 80%, #10091966);
  box-shadow: none;
}
.hero-content { padding-top: 155px; padding-bottom: 125px; }
.hero-content > .eyebrow { margin-bottom: 14px; }
.hero-sigil { display: flex; align-items: center; gap: 20px; width: 220px; margin: 10px 0 5px; }
.hero-sigil img { width: 74px; height: 74px; border-radius: 20px; }
.hero-sigil > span { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #b58d53); }
.hero-sigil > span:last-child { transform: rotate(180deg); }
.hero h1 { font-size: clamp(70px, 8.6vw, 128px); line-height: 1.12; font-weight: 700; letter-spacing: -3px; color: #fff0d4; margin: 14px 0 20px; }
.hero-tagline { font-family: var(--heading-font); font-size: clamp(25px, 2.5vw, 36px); color: #d7b9ec; line-height: 1.35; }
.hero-description { color: #c3b0d0; font-size: 16px; line-height: 1.85; max-width: 520px; }
.hero-actions .btn { min-width: 200px; padding: 15px 26px; }
.hero-note { color: #bba7c8; font-size: 11px; }
.hero-coordinate { color: #d5ae7070; letter-spacing: 1.8px; }
.scroll-link { color: #c1aaca; }
.hero-bottom-right { color: #ab94b7; }
.intro { border-top: 1px solid #d5ae7020; }
.world-figure.actual-game { width: 290px; height: auto; overflow: visible; border: 1px solid #d5ae7070; border-radius: 26px; padding: 8px; background: #090610; box-shadow: 0 0 100px #8a3aad20, 0 30px 60px #0006; transform: rotate(3deg); }
.world-figure.actual-game img { height: auto; width: 100%; border-radius: 18px; }
.world-figure.actual-game:after { display: none; }
.world-figure.actual-game figcaption { position: static; justify-content: center; padding: 20px 0 12px; font-size: 8px; color: #cfb887; }
.feature { border-color: #b38c5555; background: linear-gradient(145deg, #27183199, #110d18); border-radius: 18px; }
.feature-top { margin-bottom: 24px; }
.feature-top img { width: 64px; height: 64px; object-fit: contain; }
.feature-top span { color: var(--gold); }
.feature h3 { font-size: 28px; font-weight: 600; line-height: 1.12; letter-spacing: -.4px; }
.feature-line { background: var(--gold); }
.feature:hover { border-color: #d5ae70bb; box-shadow: 0 15px 45px #65258b14; }
.section-index { color: #b49668; }
.game-gallery { background: linear-gradient(160deg, #20122c, #100919 70%); border-block: 1px solid #d5ae7025; }
.screen-tabs { gap: 14px; }
.screen-tab { display: flex; align-items: center; gap: 18px; width: 100%; padding: 20px; text-align: left; color: #dfc8ed; background: #140d1d; border: 1px solid #d5ae703d; border-radius: 16px; transition: border-color .2s, background .2s; }
.screen-tab img { width: 55px; height: 55px; object-fit: contain; flex-shrink: 0; }
.screen-tab strong { display: block; font: 600 25px/1.3 var(--heading-font); color: var(--gold-soft); margin-bottom: 7px; }
.screen-tab small { display: block; font-size: 14px; line-height: 1.5; color: #baa7c7; }
.screen-tab i { margin-left: auto; color: var(--gold); }
.screen-tab.active, .screen-tab:hover { border-color: #c39ce0; background: linear-gradient(110deg, #392046, #1b1127); }
.gallery-note { font-size: 12px; margin: 25px 5px 0; }
.screen-stage { position: relative; padding: 26px 0; background: radial-gradient(ellipse, #8f43bb28, transparent 68%); }
.screen-stage .tab-content { max-width: 340px; margin: auto; padding: 9px; border: 1px solid #ac875a99; border-radius: 28px; background: #08060d; box-shadow: 0 30px 70px #0007; }
.screen-stage img { width: 100%; height: auto; border-radius: 20px; }
.screen-caption { display: block; text-align: center; font-size: 9px; letter-spacing: 2px; color: var(--gold); margin-top: 24px; }
.choice-section { background: radial-gradient(ellipse at 80% 50%, #60307830, transparent 60%), #150d20; border-color: #b88c5038; }
.choice-option { border: 1px solid #c59a5e60; border-radius: 14px; padding: 18px 20px; color: #efdbbb; background: #110a1b; }
.choice-number { color: #c59a5e; }
.choice-option[aria-pressed=true], .choice-option:hover { background: #39204a; border-color: #c59ae9; color: #fff0d4; }
.echo-orbit { width: 220px; height: 220px; }
.echo-orbit img { width: 180px; height: 180px; object-fit: contain; filter: drop-shadow(0 0 28px #a152d136); }
.echo-orbit:after { display: none; }
.consequence-figure { height: 500px; border: 1px solid #af875044; border-radius: 120px 120px 18px 18px; }
.consequence-figure img { filter: none; object-position: 26% center; }
.consequence-figure:after { background: linear-gradient(0deg, #100919f0, transparent 35%); }
.echo-timeline { border-color: #d5ae7044; }
.echo-timeline time { color: var(--gold); min-width: 42px; font-size: 10px; }
.echo-timeline li:before { border-color: var(--gold); background: var(--bg); }
.how { background: #130c1d; border-color: #d5ae7025; }
.steps h3 { font-size: 23px; letter-spacing: 0; text-transform: none; }
.step-number { border-color: #b58b56; color: var(--gold); background: #1b1025; }
.steps li:not(:last-child):after { background: #d5ae7040; }
.dialogue { border-color: #b58b5666; background: linear-gradient(140deg, #281a34, #100b19); border-radius: 18px; }
.dialogue-bar { color: var(--gold); letter-spacing: 1px; }
.dialogue-quote { color: #f8e7ce; font-size: 28px; }
.dialogue-answers button { border-radius: 12px; border-color: #d5ae7040; background: #150e20; }
.avatar { background: #452058; border-color: #b17bcc; color: #eed4ff; font-family: var(--heading-font); }
.atmosphere { border-block: 1px solid #d5ae7020; }
.atmosphere>img { object-position: center; filter: none; }
.atmosphere:after { background: linear-gradient(0deg, #100919, transparent 55%, #100919), #10091980; }
.statistics strong { color: var(--gold-soft); font-family: var(--heading-font); }
.small-diamond { border-color: var(--gold); }
.final-cta>img { object-position: 75% 60%; opacity: .55; }
.final-cta:after { background: linear-gradient(0deg, #100919, #10091966 50%, #100919), linear-gradient(90deg, #100919aa, transparent, #100919aa); }
.game-modal { background: linear-gradient(145deg, #251331, #100b19); border-color: #b38c5570; }
.game-modal h2 { color: var(--gold-soft); }
.demo-options button { border-radius: 12px; border-color: #b38c5566; color: #f4dab0; }
.demo-options button:hover { background: #402251; }
.site-footer { border-color: #d5ae7028; background: #0c0811; }
.site-footer .brand { font-size: 24px; }
@media(min-width:1600px) {
  .hero-video { right: 3%; }
  .hero-content { padding-block: 170px 150px; }
}
@media(max-width:991.98px) {
  .hero-video { right: -140px; opacity: .75; }
  .hero-shade { background: linear-gradient(90deg, #100919ee, #10091999 50%, #10091933), linear-gradient(0deg, #100919, transparent 45%); }
  .world-figure.actual-game { margin-top: 20px; }
  .screen-stage .tab-content { max-width: 320px; }
  .consequence-figure { height: 430px; }
}
@media(max-width:575.98px) {
  .brand { font-size: 24px; }
  .brand-logo { width: 40px; height: 40px; }
  .brand small { font-size: 6px; }
  .hero-content { padding-top: 120px; padding-bottom: 115px; }
  .hero h1 { font-size: clamp(62px, 17vw, 86px); letter-spacing: -2px; margin-top: 12px; }
  .hero-tagline { font-size: 26px; }
  .hero-description { font-size: 16px; }
  .hero-sigil { width: 170px; gap: 14px; }
  .hero-sigil img { width: 57px; height: 57px; border-radius: 14px; }
  .hero-content>.eyebrow { font-size: 8px; letter-spacing: 1.7px; }
  .hero-actions { gap: 12px !important; margin-top: 26px; }
  .hero-actions .btn { min-height: 51px; padding: 12px 20px; }
  .hero-note { font-size: 9px; line-height: 1.6; max-width: 290px; }
  .hero-video { right: -135px; height: 115%; top: -5%; }
  h2 { font-size: 36px; line-height: 1.16; }
  .world-figure.actual-game { width: 270px; transform: rotate(0); }
  .feature h3 { font-size: 27px; }
  .screen-tab { padding: 16px; gap: 12px; }
  .screen-tab img { width: 44px; height: 44px; }
  .screen-tab strong { font-size: 23px; }
  .screen-tab small { font-size: 14px; }
  .screen-stage .tab-content { max-width: 290px; }
  .choice-option { padding: 16px 13px; gap: 12px; font-size: 15px; }
  .dialogue-quote { font-size: 25px; }
  .dialogue-answers button { font-size: 15px; }
}

/* Download handoff at the end of every interactive story. */
.story-continue { margin: 24px 0 18px; padding: 24px 0 8px; border-top: 1px solid #d5ae7040; }
.story-continue[hidden], .demo-options[hidden] { display: none !important; }
.story-continue p { font: 24px/1.3 var(--heading-font); color: var(--gold-soft); margin-bottom: 18px; }
.story-continue .btn { font-size: 17px; gap: 14px; }
.story-continue small { display: block; margin-top: 14px; font-size: 12px; color: var(--muted); }
.footer-downloads, .support-contacts { display: flex; flex-wrap: wrap; gap: 16px 26px; }
.footer-downloads a, .support-contacts a { display: inline-flex; align-items: center; gap: 10px; color: var(--gold-soft); font-size: 13px; overflow-wrap: anywhere; }
.footer-downloads a:hover, .support-contacts a:hover { color: var(--accent); }
.footer-downloads i, .support-contacts i { color: var(--accent); }
.footer-support { padding: 28px 0; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; scroll-margin-top: 100px; }
.footer-support h2 { font-size: 24px; letter-spacing: 0; margin-bottom: 8px; }
.footer-support p { font-size: 13px; margin: 0; }
.support-contacts { flex-direction: column; gap: 12px; }
.news-preview { border-top: 1px solid var(--line); background: #140c1e; }
.news-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 42px; }
.news-heading h2 { margin-bottom: 0; }
.news-heading .text-link { color: var(--gold-soft); font-size: 13px; white-space: nowrap; }
.news-heading .text-link i { margin-left: 15px; }
.news-card { height: 100%; border: 1px solid #d5ae7040; border-radius: 16px; background: #100b19; overflow: hidden; transition: border-color .2s, transform .2s; }
.news-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.news-card>a { display: flex; flex-direction: column; height: 100%; }
.news-card img { width: 100%; height: 190px; object-fit: cover; }
.news-card .eyebrow { font-size: 9px; letter-spacing: 1.3px; margin-bottom: 15px; }
.news-card>a>div { display: flex; flex-direction: column; padding: 25px; flex: 1; }
.news-card h3 { font-size: 28px; line-height: 1.15; margin-bottom: 16px; }
.news-card p { font-size: 15px; line-height: 1.7; }
.read-more { margin-top: auto; padding-top: 10px; color: var(--accent); font-size: 12px; display: flex; justify-content: space-between; }
.news-main { padding-top: 150px; }
.news-page-heading { max-width: 800px; padding: 30px 0 45px; }
.news-page-heading h1 { font-size: clamp(48px, 6vw, 84px); line-height: 1.08; color: var(--gold-soft); margin: 20px 0 28px; }
.news-page-heading>p:last-child { font-size: 18px; max-width: 580px; }
.news-index { display: flex; gap: 18px 32px; flex-wrap: wrap; padding: 22px 0; border-block: 1px solid var(--line); margin-bottom: 65px; }
.news-index a { color: var(--accent); font-size: 14px; }
.news-article { max-width: 940px; margin: 0 auto 100px; scroll-margin-top: 110px; }
.news-article>img { width: 100%; aspect-ratio: 2.3; height: auto; object-fit: cover; border-radius: 20px; border: 1px solid var(--line); }
.news-article>.news-portal { object-position: center 65%; }
.news-article-copy { padding: 38px 0 0; max-width: 760px; margin: auto; }
.news-article h2 { font-size: clamp(32px, 4vw, 46px); margin-bottom: 28px; }
.news-article-copy>p:not(.eyebrow) { font-size: 17px; line-height: 1.9; }
.news-article .text-link { display: inline-flex; gap: 20px; color: var(--accent); margin-top: 10px; }
.news-article .btn { margin-top: 18px; }
.news-subscribe { display: flex; align-items: center; gap: 28px; padding: 35px; border: 1px solid #d5ae7040; border-radius: 18px; margin: 0 auto 100px; background: #24152f; }
.news-subscribe img { width: 70px; height: 70px; border-radius: 18px; }
.news-subscribe h2 { font-size: 30px; margin-bottom: 10px; }
.news-subscribe p { font-size: 15px; margin: 0; }
.news-subscribe .btn { margin-left: auto; flex-shrink: 0; }
@media(min-width:992px) and (max-width:1199.98px) { .desktop-nav { gap: 15px; } .desktop-nav a { font-size: 9px; letter-spacing: .7px; } }
@media(max-width:767.98px) {
  .footer-support, .news-heading, .news-subscribe { align-items: flex-start; flex-direction: column; }
  .news-subscribe .btn { margin-left: 0; }
  .news-card img { height: 210px; }
  .news-heading { gap: 18px; }
  .news-main { padding-top: 110px; }
  .news-article>img { aspect-ratio: 1.5; }
  .news-article { margin-bottom: 65px; }
  .news-subscribe { padding: 26px; }
  .news-page .brand { font-size: 21px; }
  .news-page .nav-play { font-size: 11px; padding: 10px 15px; gap: 8px; }
}