/* Halcyra — the calm after nicotine. Night-sky canvas, aurora as the earned reward. */
:root {
  --canvas: #0B1220;
  --canvas-deep: #070D18;
  --surface: #16202E;
  --hairline: #232F40;
  --text: #F4F7FB;
  --muted: #93A1B5;
  --mint: #7FE7D0;
  --peri: #8FA8FF;
  --peach: #FFC59E;
  --aurora: linear-gradient(100deg, var(--mint), var(--peri) 52%, var(--peach));
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--canvas);
  color: var(--text);
  font-family: "Instrument Sans", -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Night-sky atmosphere: faint aurora glow high above the fold + grain */
.sky { position: fixed; inset: 0; z-index: -1; background: var(--canvas); }
.sky::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 75vh;
  background:
    radial-gradient(42% 55% at 22% 18%, rgba(127,231,208,.10), transparent 70%),
    radial-gradient(48% 60% at 55% 8%, rgba(143,168,255,.11), transparent 70%),
    radial-gradient(38% 50% at 84% 22%, rgba(255,197,158,.07), transparent 70%);
  filter: blur(28px);
}
.sky::after {
  content: ""; position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
a { color: var(--peri); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Header */
header { padding: 26px 0; }
header .wrap { display: flex; align-items: center; justify-content: space-between; }
.mark { display: flex; align-items: center; gap: 12px; font-weight: 600; letter-spacing: .01em; color: var(--text); }
.mark:hover { text-decoration: none; }
.rings { width: 34px; height: 34px; position: relative; }
.rings i { position: absolute; inset: 0; border-radius: 50%; border: 1.6px solid transparent;
  background: var(--aurora) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.rings i:nth-child(2) { inset: 5px; opacity: .75; }
.rings i:nth-child(3) { inset: 10px; opacity: .5; }
nav { display: flex; gap: 26px; font-size: 15px; }
nav a { color: var(--muted); }
nav a:hover { color: var(--text); text-decoration: none; }

/* ————— Hero: copy left, real device right ————— */
.hero { padding: 7vh 0 11vh; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,380px);
  gap: 56px; align-items: center; }
.hero-copy { text-align: left; }
h1 { font-family: "Fraunces", Georgia, serif; font-weight: 480; font-size: clamp(42px, 6vw, 70px);
  letter-spacing: -0.015em; line-height: 1.04; }
h1 em { font-style: italic; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: clamp(19px, 2.2vw, 23px);
  color: var(--muted); margin-top: 14px; font-weight: 400; }
.lede { max-width: 560px; margin: 24px 0 0; color: rgba(244,247,251,.85); font-size: 18px; }
.cta-row { margin-top: 38px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.badge-soon { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 16px;
  background: var(--aurora); color: #0B1220; font-weight: 600; font-size: 16px;
  box-shadow: 0 10px 34px rgba(143,168,255,.30); }
.privacy-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }

/* Device frame — screenshots are full-bleed captures; the frame supplies bezel + corners */
.device { border-radius: 52px; padding: 11px; background: #060A13;
  border: 1px solid #202B3C; box-shadow: 0 30px 80px rgba(3,6,12,.55), 0 2px 10px rgba(3,6,12,.4);
  position: relative; }
.device img { display: block; width: 100%; height: auto; border-radius: 42px; }
.device::after { content: ""; position: absolute; inset: -1px; border-radius: 52px; pointer-events: none;
  background: linear-gradient(155deg, rgba(127,231,208,.25), transparent 30%, transparent 72%, rgba(255,197,158,.16));
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; }
.hero-device { position: relative; animation: heroIn 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-device { animation: none; } }
.hero-device .device { transform: rotate(-1.6deg); animation: float 9s ease-in-out infinite; }
.hero-device::before { content: ""; position: absolute; inset: -12% -18%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(143,168,255,.20), rgba(127,231,208,.08) 55%, transparent 75%);
  filter: blur(22px); }
@keyframes float { 0%,100% { transform: rotate(-1.6deg) translateY(0); } 50% { transform: rotate(-1.6deg) translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .hero-device .device { animation: none; } }

/* ————— Editorial feature rows ————— */
.rows { display: grid; gap: 3vh; padding: 3vh 0; }
.row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,300px); gap: 56px; align-items: center;
  padding: 30px 0; }
.row.flip { grid-template-columns: minmax(0,300px) minmax(0,1fr); }
.row.flip .row-copy { order: 2; }
.row.flip .device { order: 1; }
.device.sm { border-radius: 44px; padding: 9px; }
.device.sm img { border-radius: 36px; }
.row-copy h2 { font-family: "Fraunces", Georgia, serif; font-weight: 520; font-size: clamp(26px, 3.2vw, 34px);
  letter-spacing: -.01em; margin: 8px 0 12px; }
.row-copy p { color: var(--muted); max-width: 54ch; }
.lede-sub { margin-top: 12px; font-size: 15px; }
.k { font-size: 12px; letter-spacing: .18em; font-weight: 600; }
.k.mint { color: var(--mint); } .k.peri { color: var(--peri); } .k.peach { color: var(--peach); }

/* ————— One-tap logging section ————— */
.onetap { margin: 8vh 0; padding: 9vh 0 10vh; position: relative;
  background: linear-gradient(180deg, transparent, rgba(7,13,24,.85) 12%, rgba(7,13,24,.85) 88%, transparent);
  border-top: 1px solid rgba(35,47,64,.6); border-bottom: 1px solid rgba(35,47,64,.6); }
.onetap::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 40% at 50% 0%, rgba(143,168,255,.08), transparent 70%); }
.onetap-head { text-align: center; max-width: 640px; margin: 0 auto 7vh; }
.onetap-head h2 { font-family: "Fraunces", Georgia, serif; font-weight: 520;
  font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -.01em; margin: 10px 0 14px; }
.onetap-head .sub { color: var(--muted); }
.onetap-grid { display: grid; grid-template-columns: minmax(0,320px) minmax(0,1fr); gap: 64px; align-items: start; }
.onetap-device { position: sticky; top: 5vh; }
.howtos { display: grid; gap: 20px; }
.howto { background: rgba(22,32,46,.72); border: 1px solid var(--hairline); border-radius: 22px; padding: 28px 30px; }
.howto h3 { font-family: "Fraunces", Georgia, serif; font-weight: 520; font-size: 22px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px; }
.howto h3 span { font-size: 18px; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.howto p { color: var(--muted); }
.howto ol { margin: 12px 0 4px; padding-left: 22px; color: rgba(244,247,251,.85); display: grid; gap: 6px; }
.howto ol strong, .howto p strong { color: var(--text); font-weight: 600; }
.howto .hint { font-size: 14px; color: rgba(147,161,181,.85); margin-top: 12px; }
.nowrap { white-space: nowrap; }
.phrases { list-style: none; margin: 14px 0 4px; display: flex; flex-wrap: wrap; gap: 10px; }
.phrases li { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 16px;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--hairline);
  background: rgba(11,18,32,.8); color: rgba(244,247,251,.92); }
.phrases li::before { content: "◉ "; font-style: normal; font-size: 11px; vertical-align: 2px;
  background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ————— Reveal-on-scroll (additive: JS adds html.io; without it, all visible) ————— */
html.io .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
html.io .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.io .reveal { opacity: 1; transform: none; transition: none; } }

/* ————— Long-form pages (privacy / support) ————— */
.page { max-width: 720px; margin: 0 auto; padding: 5vh 24px 10vh; }
.page h1 { font-size: clamp(34px, 5vw, 48px); margin-bottom: 8px; }
.page .sub { color: var(--muted); margin-bottom: 44px; }
.page h2 { font-family: "Fraunces", Georgia, serif; font-weight: 520; font-size: 23px; margin: 38px 0 8px; }
.page p, .page li { color: rgba(244,247,251,.82); }
.page ul { padding-left: 22px; margin: 8px 0; }
details { border: 1px solid var(--hairline); border-radius: 16px; background: rgba(22,32,46,.72);
  padding: 18px 22px; margin: 12px 0; }
details summary { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; display: flex; justify-content: space-between; align-items: center; }
details summary::after { content: "+"; color: var(--muted); font-size: 20px; transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin-top: 10px; color: var(--muted); }

footer { border-top: 1px solid var(--hairline); padding: 34px 0 54px; margin-top: 6vh; }
footer .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
footer nav { gap: 20px; }
.fineprint { max-width: 640px; font-size: 13px; color: rgba(147,161,181,.75); margin-top: 10px; }

/* ————— Responsive ————— */
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; gap: 48px; padding-top: 4vh; text-align: center; }
  .hero-copy { text-align: center; }
  .lede { margin-inline: auto; }
  .cta-row { justify-content: center; }
  .hero-device { max-width: 300px; margin: 0 auto; }
  .row, .row.flip { grid-template-columns: 1fr; gap: 30px; }
  .row.flip .row-copy { order: 1; }
  .row.flip .device { order: 2; }
  .row .device { max-width: 280px; margin: 0 auto; }
  .onetap-grid { grid-template-columns: 1fr; gap: 40px; }
  .onetap-device { position: static; max-width: 300px; margin: 0 auto; }
}