/* sacrera.com — the app's Night look carried onto the web.
   Layout idea: one night-ink column of chapters (Draw, Visualize, Embody), each led by a real screen of the app,
   with the Seed of Life in the hero that the visitor draws, circle by circle, as the one live moment. */
:root{
  --night:#0a0e1a;      /* ground */
  --deep:#131b30;       /* glow under phones */
  --rule:#232c47;
  --line:#ece6d6;       /* text: moonlit parchment */
  --muted:#9aa0bb;
  --gold:#e2b96c;       /* the compass point: accent and the one action */
  --on-gold:#1a1408;
  --petal:#8ea4ff;
  --display:"Bona Nova",Georgia,"Times New Roman",serif;
  --body:"Jost","Futura","Avenir Next",system-ui,sans-serif;
  --fs-s:.875rem; --fs-m:1.0625rem; --fs-l:1.25rem; --fs-xl:clamp(1.75rem,1.2rem + 2vw,2.5rem); --fs-hero:clamp(2.75rem,min(1.6rem + 5vw,9.6svh),5.25rem);
  --wrap:72rem;
  color-scheme:dark;
}

@font-face{font-family:"Bona Nova";font-weight:400;font-display:swap;src:url(fonts/bona-nova-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Bona Nova";font-weight:400;font-display:swap;src:url(fonts/bona-nova-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1EFF,U+20A0-20AB,U+20AD-20C0}
@font-face{font-family:"Bona Nova";font-weight:400;font-display:swap;src:url(fonts/bona-nova-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Bona Nova";font-weight:700;font-display:swap;src:url(fonts/bona-nova-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Jost";font-weight:400;font-display:swap;src:url(fonts/jost-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Jost";font-weight:400;font-display:swap;src:url(fonts/jost-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1EFF,U+20A0-20AB,U+20AD-20C0}
@font-face{font-family:"Jost";font-weight:400;font-display:swap;src:url(fonts/jost-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Jost";font-weight:500;font-display:swap;src:url(fonts/jost-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Jost";font-weight:500;font-display:swap;src:url(fonts/jost-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0400-045F}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--line);font-family:var(--body);font-size:var(--fs-m);line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold);color:var(--on-gold)}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration-color:color-mix(in srgb,var(--gold) 45%,transparent);text-underline-offset:3px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.kick{font-size:var(--fs-s);font-weight:500;color:var(--gold)}
.muted{color:var(--muted)}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--night) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--rule) 70%,transparent)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--line);text-decoration:none;font-family:var(--display);font-size:1.45rem;letter-spacing:.01em}
.brand img{width:34px;height:34px}
.top nav{display:flex;align-items:center;gap:1.4rem;font-size:var(--fs-s)}
.top nav a{color:var(--muted);text-decoration:none}
.top nav a:hover{color:var(--line)}
.top nav a.play{color:var(--on-gold)}
@media (max-width:560px){ .top nav .hide-s{display:none} }

/* ---------- the one action ---------- */
.play{display:inline-flex;align-items:center;gap:.65rem;padding:.85rem 1.5rem .85rem 1.2rem;border-radius:999px;background:var(--gold);color:var(--on-gold);font-weight:500;font-size:var(--fs-m);text-decoration:none;line-height:1.2;transition:filter .2s,transform .14s}
.play:hover{filter:brightness(1.07)}
.play:active{transform:scale(.97)}
.play svg{width:20px;height:20px;flex:none}
.play small{display:block;font-size:.72rem;font-weight:400;opacity:.8}
.top .play{padding:.5rem 1rem .5rem .8rem;font-size:var(--fs-s)}
.top .play svg{width:15px;height:15px}

/* ---------- hero ---------- */
.hero{padding:clamp(1rem,4.5svh,4.5rem) 0 clamp(1.25rem,5svh,4.5rem)}
@media (min-width:821px){.hero{min-height:calc(100svh - 65px);display:grid;align-content:center}.hero .wrap>div:first-child{padding-left:clamp(0px,8vw - 3rem,3.5rem)}}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(2rem,5vw,4rem)}
.hero h1{font-size:var(--fs-hero);letter-spacing:-.01em}
.hero h1 span{display:block}
.hero h1 span:nth-child(2){padding-left:.9em}
.hero h1 span:nth-child(3){padding-left:1.8em;color:var(--gold)}
.hero .lead{margin-top:clamp(.75rem,2.6svh,1.5rem);font-size:var(--fs-l);max-width:30ch}
.hero .sub{margin-top:clamp(.4rem,1.3svh,.9rem);color:var(--muted);max-width:44ch}
.hero .acts{margin-top:clamp(1rem,3.6svh,2rem);display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
.hero .note{font-size:var(--fs-s);color:var(--muted)}
.hero .try-link{font-size:var(--fs-s);color:var(--line)}
.live{justify-self:center;width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center}
.seed{position:relative;aspect-ratio:1;width:100%;max-width:clamp(250px,100svh - 300px,460px);cursor:pointer;touch-action:manipulation;border-radius:50%;transition:opacity 1.2s ease}
.seed svg{width:100%;height:100%;overflow:visible}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr}
  .live{max-width:340px;order:-1}
}

/* the live drawing: faint compass guides, a gold compass point, each circle inked by the visitor's tap */
.seed .guide{fill:none;stroke:var(--muted);stroke-width:.6;stroke-dasharray:2 3;opacity:.45}
.seed .ink{fill:none;stroke:url(#silver);stroke-width:2.4;stroke-linecap:round}
.seed .ink.now{stroke:var(--gold)}
.seed .glow{filter:drop-shadow(0 0 6px rgba(236,230,214,.35))}
.seed .petal{opacity:0;transition:opacity 1.6s ease-out}
.live.bloom .seed .petal{opacity:1}
.live.bloom .seed .guides{opacity:0;transition:opacity 1.2s ease}
.seed .turn{transform-origin:0 0}
.live.bloom .seed .turn{animation:spin 140s linear infinite 1.5s}
.seed .pt{fill:var(--gold)}
.seed .pt-ring{fill:none;stroke:var(--gold);stroke-width:1;opacity:.7;transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-in-out infinite}
.seed .hit{fill:transparent}
.seed .compass{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.live.eyes-closed .seed{opacity:.04}
.live .say{margin-top:clamp(.4rem,1.5svh,1.1rem);min-height:3.2em;line-height:1.5;max-width:34ch;text-align:center;color:var(--line)}
.live .count{font-size:var(--fs-s);color:var(--muted);margin-top:.3rem}
.live .live-acts{margin-top:.9rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
.soft-btn{min-height:44px;padding:0 1.2rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);background:transparent;color:var(--line);font:500 var(--fs-s)/1 var(--body);cursor:pointer;transition:background-color .18s,transform .14s}
.soft-btn:hover{background:color-mix(in srgb,var(--gold) 14%,transparent)}
.soft-btn:active{transform:scale(.97)}
.soft-btn[hidden]{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.45);opacity:.15}}
.no-js .seed .compass,.no-js .live .say,.no-js .live .count,.no-js .hero .try-link{display:none}
.no-js .seed .petal{opacity:1}
.no-js .seed .guides{opacity:0}
@media (prefers-reduced-motion:reduce){
  .seed .petal,.seed .compass,.live.bloom .seed .guides{transition:none}
  .live.bloom .seed .turn,.seed .pt-ring{animation:none}
}

/* ---------- phones ---------- */
.phone{position:relative;width:100%;max-width:280px;border-radius:34px;padding:7px;background:linear-gradient(160deg,#2a3352,#121829 40%,#1d2440);box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(236,230,214,.06)}
.phone img{border-radius:28px;width:100%;aspect-ratio:600/1299;object-fit:cover;background:var(--night)}
.phone::after{content:"";position:absolute;inset:-12% -20%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--petal) 16%,transparent),transparent);pointer-events:none}

/* ---------- three steps ---------- */
.steps{padding:clamp(3rem,7vw,6rem) 0;border-top:1px solid var(--rule)}
.steps header{max-width:40rem}
.steps header h2{font-size:var(--fs-xl);margin-top:.5rem}
.steps ol{list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem)}
.steps li{display:flex;flex-direction:column;gap:1rem}
.steps li:nth-child(2){margin-top:3.5rem}
.steps li:nth-child(3){margin-top:7rem}
.steps h3{font-size:var(--fs-xl)}
.steps h3 + p{margin-top:.5rem;color:var(--muted);max-width:32ch}
@media (max-width:820px){
  .steps ol{grid-template-columns:1fr}
  .steps li,.steps li:nth-child(2),.steps li:nth-child(3){margin-top:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:1.25rem}
}
@media (max-width:480px){ .steps li,.steps li:nth-child(2),.steps li:nth-child(3){grid-template-columns:1fr} .steps .phone{max-width:240px} }

/* ---------- the journey ---------- */
.journey{padding:clamp(3rem,7vw,6rem) 0;background:radial-gradient(60rem 30rem at 70% 40%,rgba(142,164,255,.07),transparent 70%)}
.journey .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.journey .phone{justify-self:center;max-width:300px}
.journey h2{font-size:var(--fs-xl);margin-top:.5rem}
.journey p.body{margin-top:1.1rem;max-width:36rem}
.days{margin:1.8rem 0 0;padding:0;list-style:none;display:grid;grid-template-columns:auto 1fr;gap:.7rem 1.2rem;max-width:34rem;border-top:1px solid var(--rule);padding-top:1.4rem}
.days dd{margin:0}
.days dt,.days b{font-family:var(--display);font-weight:400;color:var(--gold);white-space:nowrap}
.days span{color:var(--muted)}
@media (max-width:820px){ .journey .wrap{grid-template-columns:1fr} .journey .phone{order:2;max-width:260px} }
@media (max-width:480px){ .days{grid-template-columns:1fr;gap:.15rem} .days dd{margin:0 0 .8rem} }

/* ---------- inside ---------- */
.inside{padding:clamp(3rem,7vw,6rem) 0;border-top:1px solid var(--rule)}
.inside h2{font-size:var(--fs-xl);margin-top:.5rem;max-width:22ch}
.trio{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem)}
.trio figure{margin:0;display:flex;flex-direction:column;gap:1.2rem}
.trio figcaption b{display:block;font-family:var(--display);font-weight:400;font-size:var(--fs-l);color:var(--line)}
.trio figcaption{color:var(--muted);max-width:30ch}
@media (max-width:820px){ .trio{grid-template-columns:1fr 1fr} .trio figure:last-child{grid-column:1/-1;max-width:50%} }
@media (max-width:480px){ .trio{grid-template-columns:1fr} .trio figure:last-child{max-width:none} .trio .phone{max-width:240px} }

/* ---------- paper ---------- */
.paper{padding:clamp(3rem,7vw,6rem) 0;border-top:1px solid var(--rule)}
.paper .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.paper h2{font-size:var(--fs-xl);margin-top:.5rem}
.paper p.body{margin-top:1rem;color:var(--muted);max-width:34rem}
.sheets{position:relative;height:clamp(300px,36vw,440px)}
.sheets img{position:absolute;width:56%;border-radius:4px;box-shadow:0 24px 60px -10px rgba(0,0,0,.7)}
.sheets img:nth-child(1){left:0;top:8%;transform:rotate(-6deg)}
.sheets img:nth-child(2){left:22%;top:0;transform:rotate(1deg);z-index:1}
.sheets img:nth-child(3){right:0;top:10%;transform:rotate(7deg)}
@media (max-width:820px){ .paper .wrap{grid-template-columns:1fr} .sheets{height:clamp(280px,70vw,420px)} }

/* ---------- closing band ---------- */
.closing{position:relative;padding:clamp(5rem,12vw,9rem) 0;text-align:center;overflow:hidden;isolation:isolate}
.closing::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--night),transparent 30%,transparent 70%,var(--night)),url(img/orion.webp) center/cover no-repeat;opacity:.55}
.closing h2{font-size:var(--fs-hero)}
.closing p{margin:1rem auto 2rem;max-width:34ch;font-size:var(--fs-l)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);padding:2.5rem 0 3rem;font-size:var(--fs-s);color:var(--muted)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem 3rem}
.foot nav{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
.foot nav a{color:var(--muted);text-decoration:none}
.foot nav a:hover,.foot nav a[aria-current]{color:var(--line)}
.foot .fine{flex-basis:100%;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;opacity:.85}

/* ---------- reading pages (privacy, terms, support) ---------- */
.doc{padding:clamp(2.5rem,6vw,4.5rem) 0 4rem}
.doc article{width:min(42rem,100% - 2.5rem);margin-inline:auto}
.doc h1{font-size:clamp(2.25rem,1.6rem + 2.5vw,3.25rem)}
.doc .date{margin-top:.5rem;font-size:var(--fs-s);color:var(--muted)}
.doc .text{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:1rem}
.doc .text p,.doc .text li{line-height:1.7;max-width:65ch}
.doc .text b{font-weight:500;color:var(--line)}
.doc .text ul{margin:-.3rem 0 0;padding-left:1.2em;display:flex;flex-direction:column;gap:.45rem}
.doc .text li::marker{color:var(--muted)}
.doc .text h2{font-size:var(--fs-l);margin-top:1.2rem}
.doc .contact{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--rule);font-size:var(--fs-s);color:var(--muted)}
.mail{font-weight:500}