/* AstroPlus 2.0 „Aura”: strona główna. Wzorzec: prototyp/home.css (v4 po akceptacji).
   Wspólne elementy (aura, aura-fill, gwiazdki, chipy, przyciski) są w main.css, karta znaku w zcard.css. */

.section-head__aside { max-width: 38ch; }

/* ---------- kosmiczna pogoda ---------- */
.wx { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; margin-bottom: clamp(24px, 4vw, 40px); }
.wx > * {
  display: inline-flex; align-items: center; gap: 8px; font: .78rem/1.3 var(--f-ui); padding: 6px 12px 6px 8px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--paper) 72%, white);
}
.wx a:hover { border-color: var(--line-strong); }
.wx svg { width: 16px; height: 16px; flex: none; }
.wx .hot { border-color: var(--ink); }

/* ---------- hero ---------- */
.h3 { position: relative; overflow: hidden; padding-block: clamp(24px, 4vw, 48px) clamp(40px, 6vw, 72px); }
.h3__aura { width: min(1100px, 170vw); right: -22%; top: -42%; }
.h3__intro { position: relative; z-index: 1; display: grid; gap: 18px; max-width: 980px; }
.h3 h1 { font-size: clamp(2.8rem, 6.4vw, 5.4rem); line-height: .94; letter-spacing: -.02em; }
.hero__sub { max-width: 30rem; color: var(--ink-soft); }
/* stan B pojawia się, gdy znak jest zapamiętany (atrybut ustawiany w <head>, zanim strona się narysuje) */
.me { display: none; position: relative; z-index: 1; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
html[data-my-sign] .me { display: grid; }
html[data-my-sign] #pick { display: none; }
.me__txt { display: grid; gap: 20px; min-width: 0; }
.me__hello { font-size: clamp(3rem, 8vw, 6.6rem); }
.me__lead { font-family: var(--f-lead); font-style: var(--lead-style); font-weight: var(--lead-weight); font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.35; max-width: 34rem; min-height: 1.35em; }
.meters { display: grid; gap: 10px; }
.meter { display: grid; grid-template-columns: 96px auto; align-items: center; gap: 12px; }
.meter > span:first-child { font: 600 .7rem/1.2 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; }
.lucky-inline { display: flex; gap: 8px 24px; flex-wrap: wrap; font: .92rem/1.4 var(--f-ui); color: var(--ink-soft); }
.lucky-inline b { color: var(--ink); font-weight: 600; }
.dot-c { display: inline-block; width: .7em; height: .7em; border-radius: 50%; vertical-align: -.05em; margin-right: .35em; border: 1px solid var(--line); }
.me__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.me__card { position: relative; justify-self: center; width: min(320px, 78%); isolation: isolate; animation: float 7s ease-in-out infinite; }
.me__card .zcard { width: 100%; cursor: default; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(3deg); transition: transform .25s ease-out; animation: halo 6s ease-in-out infinite; }
.me__card.is-tilting .zcard__sheen { opacity: 1; }
.me__card .ghost { position: absolute; inset: 0; transform: rotate(-6deg) translate(-16px, 10px); border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line); z-index: -1; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 860px) {
  .me { grid-template-columns: 1fr; }
  .me__card { order: -1; width: min(230px, 62%); }
  .h3__aura { width: 170vw; right: -70%; top: 2%; }
}

/* ---------- talia: rząd przewijany (telefon) / wachlarz (desktop) ---------- */
.deck { position: relative; z-index: 1; margin-top: clamp(28px, 4vw, 48px); }
.deck__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 6px; }
.deck__nav { display: flex; gap: 8px; }
.deck__nav button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--paper) 70%, white); color: var(--ink); cursor: pointer; font-size: 1.1rem;
}
.deck__nav button:hover { background: var(--ink); color: var(--paper); }
.deck__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(156px, 42vw, 200px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: 16px var(--gutter) 30px; margin-inline: calc(var(--gutter) * -1); scrollbar-width: none;
}
.deck__track::-webkit-scrollbar { display: none; }
.deck__track .zcard { scroll-snap-align: start; animation: rise-in .8s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.deck .zcard .cl-lines path { animation: draw 1.5s cubic-bezier(.4, 0, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 55ms + 650ms + var(--k, 0) * 70ms); }
.deck--fan { margin-top: 24px; }
.deck--fan .deck__nav { display: none; }
.deck--fan .deck__track { display: block; position: relative; overflow: visible; height: var(--fan-h, 360px); padding: 0; margin: 0; }
.deck--fan .deck__track .zcard {
  position: absolute; left: 0; top: 42px; width: var(--cw); transform-origin: 50% 115%;
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s;
  animation: deal 1s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 55ms + 150ms);
}
.deck--fan .deck__track .zcard:hover, .deck--fan .deck__track .zcard:focus-visible {
  transform: translate(var(--x), calc(var(--y) - 54px)) rotate(calc(var(--r) * .3)) scale(1.07);
  z-index: 30 !important; box-shadow: 0 30px 50px -24px rgba(30, 27, 46, .6);
}
@keyframes deal { from { transform: translate(var(--x0), 40px) rotate(0deg); opacity: 0; } }
/* wachlarz: pionowe podpisy na „grzbietach” zamiast uciętych nazw */
.deck--fan .zcard__spine {
  display: block; position: absolute; z-index: 3; left: 7.6cqw; top: 31cqw; writing-mode: vertical-rl; transform: rotate(180deg);
  font: 600 5.6cqw/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; transition: opacity .3s;
}
.deck--fan .zcard .zcard__text { opacity: 0; transition: opacity .3s; }
.deck--fan .zcard:hover .zcard__text, .deck--fan .zcard:focus-visible .zcard__text, .deck--fan .zcard:last-child .zcard__text { opacity: 1; }
.deck--fan .zcard:hover .zcard__spine, .deck--fan .zcard:focus-visible .zcard__spine, .deck--fan .zcard:last-child .zcard__spine { opacity: 0; }

/* ---------- rytuał ---------- */
.ritual { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rcard { position: relative; border-radius: 12px; overflow: hidden; isolation: isolate; min-height: 500px; padding: 28px 26px; display: grid; align-content: space-between; gap: 20px; }
.rcard--night { background: var(--night); color: var(--on-night); }
.rcard--aura { color: var(--card-ink); }
.rcard > *:not(.aura-fill) { position: relative; z-index: 1; }
.flip { perspective: 1400px; min-height: 500px; cursor: pointer; border-radius: 12px; }
.flip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.flip__in { position: relative; width: 100%; height: 100%; min-height: 500px; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.3, .7, .2, 1); }
.flip.is-open .flip__in { transform: rotateY(180deg); }
.flip__face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; overflow: hidden;
  background: var(--night); color: var(--on-night); display: grid; grid-template-rows: auto 1fr auto; justify-items: center; text-align: center;
  padding: 30px 24px; outline: 1px solid var(--line-night); outline-offset: -10px; isolation: isolate;
}
.flip__face--front { transform: rotateY(180deg); }
.flip__face .corner { position: absolute; width: 30px; color: var(--star); }
.flip__face .corner.tl { top: 6px; left: 6px; }
.flip__face .corner.tr { top: 6px; right: 6px; }
.flip__face .corner.bl { bottom: 6px; left: 6px; }
.flip__face .corner.br { bottom: 6px; right: 6px; }
.flip__art { position: relative; width: 66%; align-self: center; color: var(--star); display: grid; place-items: center; }
.flip__art .aura { width: 160%; left: -30%; top: -30%; opacity: .55; }
.flip__art .ill { position: relative; width: 100%; }
.flip__hint { font: 600 .78rem/1.4 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--star); display: grid; gap: 6px; }
.flip__hint small { font-size: .78rem; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--on-night-soft); }
.flip__num { font-family: var(--f-display); font-style: italic; color: var(--star); font-size: 1.15rem; }
.flip__name { font-family: var(--f-display); font-style: italic; font-size: 2.2rem; line-height: 1; margin-top: 4px; }
.flip__mean { font: .92rem/1.5 var(--f-ui); color: var(--on-night-soft); max-width: 30ch; margin: 10px auto 0; }
.mooncard__moon { position: relative; width: 58%; aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }
.mooncard__moon .aura { width: 180%; left: -40%; top: -40%; opacity: .75; }
.mooncard__moon svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.mooncard__body { display: grid; gap: 14px; }
.mooncard h3 { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 2rem; }
.mooncard__more { font: 600 var(--t-xs)/1.3 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--star); text-decoration: none; }
.mooncard__more:hover { text-decoration: underline; text-underline-offset: .2em; }
.week {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; font: .64rem/1.2 var(--f-ui);
  letter-spacing: .08em; color: var(--on-night-soft); border-top: 1px solid var(--line-night); padding-top: 14px;
}
.week div { display: grid; gap: 4px; justify-items: center; padding: 6px 0; border-radius: 8px; }
.week svg { width: 24px; height: 24px; color: var(--star); }
.week .today { background: rgba(233, 213, 166, .12); color: var(--on-night); }
.dos-mini { display: grid; gap: 6px; font: .86rem/1.45 var(--f-ui); color: var(--on-night-soft); }
.dos-mini b { color: var(--star); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .64rem; margin-right: 6px; }
.affirm { font-family: var(--f-display); font-style: italic; font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1.18; text-wrap: balance; }
.affirm::before { content: "\201E"; display: block; font-size: 3.5rem; line-height: .6; margin-bottom: 14px; opacity: .5; }
.rcard__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font: .82rem/1.4 var(--f-ui); }
.rcard__foot .btn-mini { border-radius: 999px; }
@media (max-width: 980px) {
  .ritual { grid-template-columns: 1fr; }
  .rcard, .flip, .flip__in { min-height: 470px; }
}

/* ---------- ranking ---------- */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; margin-bottom: 28px; }
.pod { position: relative; border-radius: 12px; overflow: hidden; isolation: isolate; padding: 24px; display: grid; gap: 10px; align-content: end; min-height: 270px; color: var(--card-ink); text-decoration: none; }
.pod--1 { min-height: 340px; order: 2; }
.pod--2 { order: 1; }
.pod--3 { order: 3; }
.pod > *:not(.aura-fill) { position: relative; z-index: 1; }
.pod .pod__rank { position: absolute; top: 14px; left: 22px; font-family: var(--f-display); font-style: italic; font-size: clamp(4rem, 7vw, 6rem); line-height: 1; }
.pod .pod__const { position: absolute; right: 6%; top: 8%; width: 46%; color: var(--card-ink); opacity: .7; }
.pod__name { font-family: var(--f-display); font-style: italic; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; display: flex; align-items: center; gap: 10px; }
.pod__name .g { width: 26px; height: 26px; }
.pod p { font: .92rem/1.45 var(--f-ui); max-width: 32ch; }
.pod:hover .pod__name span:first-of-type { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.ranklist { border-top: 1px solid var(--line); }
.rrow { display: grid; grid-template-columns: 52px 40px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 10px; border-bottom: 1px solid var(--line); text-decoration: none; }
.rrow__n { font-family: var(--f-display); font-style: italic; font-size: 1.9rem; line-height: 1; text-align: center; }
.rrow__dot { width: 40px; height: 40px; border-radius: 50%; position: relative; overflow: hidden; display: grid; place-items: center; color: var(--card-ink); }
.rrow__dot .g { position: relative; z-index: 1; width: 20px; height: 20px; }
.rrow__main { display: grid; gap: 2px; min-width: 0; }
.rrow__name { font-family: var(--f-display); font-style: italic; font-size: 1.35rem; line-height: 1.1; }
.rrow__txt { font: .88rem/1.4 var(--f-ui); color: var(--ink-soft); }
.rrow:hover .rrow__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.rrow.is-you { background: color-mix(in srgb, var(--paper) 40%, white); }
.you {
  font: 600 .58rem/1 var(--f-ui); font-style: normal; letter-spacing: .16em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: 3px 7px; border-radius: 999px; margin-left: 8px; vertical-align: middle;
}
@media (max-width: 760px) {
  .podium { grid-template-columns: 1fr; }
  .pod--1, .pod--2, .pod--3 { order: 0; min-height: 210px; }
  .rrow { grid-template-columns: 36px 36px minmax(0, 1fr); gap: 12px; padding-inline: 4px; }
  .rrow .stars { grid-column: 3; }
}


/* ---------- Magazyn ---------- */
.saved { display: inline-flex; align-items: center; gap: 8px; font: .82rem/1 var(--f-ui); padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--paper) 70%, white); }
.saved svg { width: 14px; height: 14px; }
.topics { display: flex; gap: 18px; overflow-x: auto; padding: 6px 4px 20px; margin: 0 0 12px; scrollbar-width: none; }
.topics::-webkit-scrollbar { display: none; }
.topic { flex: none; display: grid; justify-items: center; gap: 9px; background: none; border: 0; padding: 0; cursor: pointer; font: .78rem/1.2 var(--f-ui); color: var(--ink); }
.topic__dot {
  width: 76px; height: 76px; border-radius: 50%; position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center;
  color: var(--card-ink); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--line-strong); transition: box-shadow .3s, transform .3s;
}
.topic__dot > *:not(.aura-fill) { position: relative; z-index: 1; width: 50%; }
.topic__dot .g { width: 100%; height: auto; aspect-ratio: 1; }
.topic:hover .topic__dot { transform: translateY(-3px); }
.topic[aria-selected="true"] .topic__dot { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.topic[aria-selected="true"] { font-weight: 600; }
.mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.mgrid__more { margin-top: 28px; text-align: center; }
.m { position: relative; border-radius: 18px; overflow: hidden; isolation: isolate; min-width: 0; }
.m > .aura-fill { z-index: 0; }
.m > *:not(.aura-fill) { position: relative; z-index: 1; }
.m h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.15; }
.m__link { text-decoration: none; }
.m__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.m:hover .m__link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.m--poster { min-height: 380px; padding: 26px; display: grid; align-content: end; gap: 10px; color: var(--card-ink); }
.m--wide { grid-column: span 2; }
.m .m__word {
  position: absolute; z-index: 1; top: 5%; left: -.06em; font-family: var(--f-display); font-style: italic; font-size: clamp(4.4rem, 9vw, 8rem);
  line-height: .82; letter-spacing: -.035em; white-space: nowrap; opacity: .92; pointer-events: none;
}
.m--wide .m__word { font-size: clamp(5rem, 10vw, 9.5rem); }
.m .m__art { position: absolute; z-index: 1; right: 6%; top: 30%; width: 44%; color: var(--card-ink); opacity: .9; }
/* rysunek w prawym dolnym rogu, mniejszy: nie wchodzi na wielkie słowo u góry ani na tekst po lewej */
.m.m--wide .m__art { right: 6%; top: auto; bottom: 9%; width: 17%; max-width: 170px; opacity: .85; }
.m--wide h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); max-width: 22ch; }
.m--poster p { font: .95rem/1.5 var(--f-ui); max-width: 34ch; }
.m--card { background: color-mix(in srgb, var(--paper) 55%, white); border: 1px solid var(--line); display: flex; flex-direction: column; }
.m__cover { position: relative; aspect-ratio: 16 / 11; flex: none; overflow: hidden; display: grid; place-items: center; color: var(--card-ink); }
.m__cover > .ill { position: relative; z-index: 1; width: 36%; }
.m__cover > .media { position: absolute; inset: 0; }
.m__body { padding: 18px 20px 22px; display: grid; gap: 8px; align-content: start; flex: 1; }
.m__body p { font: .9rem/1.5 var(--f-ui); color: var(--ink-soft); }
.save {
  position: absolute !important; top: 14px; right: 14px; z-index: 3 !important; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 82%, transparent); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; transition: background .25s, color .25s, transform .25s;
}
.save svg { width: 16px; height: 16px; }
.save:hover { transform: scale(1.06); }
.save[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.save.pop { animation: pop .45s cubic-bezier(.2, .7, .2, 1.4); }
@keyframes pop { 40% { transform: scale(1.25); } }
.m--quiz { background: var(--night-grad); color: var(--on-night); padding: 26px; display: grid; gap: 14px; align-content: start; }
.m--quiz .label { color: var(--star); }
.m--quiz__q { color: var(--on-night-soft); font: .92rem/1.5 var(--f-ui); }
.quiz { display: grid; gap: 8px; margin-top: 4px; }
.quiz button {
  text-align: left; font: .95rem/1.3 var(--f-ui); padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line-night);
  background: transparent; color: var(--on-night); cursor: pointer; transition: border-color .25s, background .25s;
}
.quiz button:hover { border-color: var(--star); }
.quiz button[aria-pressed="true"] { background: rgba(235, 216, 172, .14); border-color: var(--star); }
.quiz__res { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line-night); }
.quiz__res .ill { color: var(--star); }
.quiz__res b { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.35rem; display: block; }
.quiz__res p { font: .88rem/1.45 var(--f-ui); color: var(--on-night-soft); }
.m--list { border: 1px solid var(--line); padding: 24px; background: var(--paper-2); }
.pop-list { margin: 14px 0 0; display: grid; }
.pop-list a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--f-ui); }
.pop-list li:last-child a { border-bottom: 0; }
.pop-list a:hover span:last-child { text-decoration: underline; text-underline-offset: .14em; }
.pop-list .n { font-family: var(--f-display); font-style: italic; font-size: 1.9rem; line-height: 1; }
.m--you { color: var(--card-ink); padding: 26px; min-height: 380px; display: grid; align-content: space-between; gap: 18px; }
.m--you .m__sky { position: absolute; z-index: 1; right: -4%; top: -2%; width: 66%; opacity: .9; }
.m--you .g { width: 34px; height: 34px; stroke-width: 1.3; }
.m--you__txt { display: grid; gap: 8px; }
@media (max-width: 1000px) { .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .m--quiz { grid-column: span 2; } }
@media (max-width: 640px) {
  .mgrid { grid-template-columns: 1fr; }
  .m--wide, .m--quiz { grid-column: auto; }
  .m .m__art { top: 22%; width: 40%; }
  /* telefon: mały, w wolnym pasie między wielkim słowem a etykietą */
  .m.m--wide .m__art { top: 23%; bottom: auto; right: 8%; width: 17%; }
  .m--poster { min-height: 360px; }
}


/* ---------- newsletter z podglądem maila ---------- */
.news2__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.news2__txt { display: grid; gap: 18px; min-width: 0; }
.news2__txt > .muted { max-width: 44ch; }
.news2__form { display: grid; gap: 18px; margin-top: 6px; }
.news2__row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px; }
.freq { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.freq legend { margin-bottom: 10px; color: var(--on-night-soft); }
.freq label { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--line-night); border-radius: 999px; font: .88rem/1.2 var(--f-ui); }
.freq input { accent-color: var(--star); margin: 0; }
.freq label:has(input:checked) { border-color: var(--star); color: var(--star); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.phone-wrap { position: relative; justify-self: center; padding: 20px; }
.phone-wrap::before {
  content: ""; position: absolute; inset: -6% -14%; border-radius: 50%; z-index: 0; filter: blur(34px); opacity: .6;
  background: radial-gradient(circle, var(--a1) 0%, var(--a2) 35%, transparent 68%);
}
.phone {
  position: relative; z-index: 1; width: min(290px, 74vw); aspect-ratio: 9 / 18.5; border-radius: 46px; background: #1D1929; padding: 11px;
  box-shadow: 0 50px 80px -34px rgba(0, 0, 0, .65), inset 0 0 0 1.5px rgba(255, 255, 255, .14); transform: rotate(4deg); animation: float 7s ease-in-out infinite;
}
.phone__notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; border-radius: 20px; background: #0E0C15; z-index: 3; }
.phone__screen { height: 100%; border-radius: 36px; overflow: hidden; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; font-family: var(--f-ui); }
.mail__bar { display: flex; justify-content: space-between; padding: 15px 26px 4px; font-size: .68rem; font-weight: 600; }
.mail__from { display: flex; align-items: center; gap: 8px; padding: 22px 16px 10px; font-size: .7rem; color: var(--ink-soft); }
.mail__from .wordmark { font-size: .95rem; color: var(--ink); }
.mail__hero { position: relative; margin: 0 12px; border-radius: 18px; overflow: hidden; isolation: isolate; padding: 14px 14px 16px; min-height: 148px; color: var(--card-ink); display: grid; align-content: end; gap: 4px; }
.mail__hero > *:not(.aura-fill) { position: relative; z-index: 1; }
.mail__hero .label { font-size: .58rem; }
.mail__sky { position: absolute !important; right: -6%; top: -8%; width: 64%; }
.mail__hello { font-family: var(--f-display); font-style: italic; font-size: 1.45rem; line-height: 1.02; }
.mail__sec { padding: 11px 18px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; font-size: .78rem; line-height: 1.45; }
.mail__sec .label { font-size: .56rem; }
.mail__aff { font-family: var(--f-display); font-style: italic; font-size: .95rem; }
.mail__btn { margin: 12px 18px; padding: 10px; text-align: center; background: var(--ink); color: var(--paper); border-radius: 999px; font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 900px) {
  .news2__grid { grid-template-columns: 1fr; }
  .phone-wrap { order: 2; }
}
@media (max-width: 480px) { .news2__row { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .me__card, .phone { animation: none !important; }
}