/* Echoes of Time — castoutlabs site styles */
:root{
  --bg1:#cabfe6; --bg2:#e8e2f4; --ink:#3f3a58; --ink-soft:#6a6284; --ink-faint:#9089a8;
  --accent:#7c6fb0; --accent-deep:#5d4a91; --teal:#38bfa8; --sand:#e0b483;
  --card:rgba(255,255,255,.55); --card-border:rgba(120,110,160,.2);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); line-height:1.65; min-height:100vh;
  background:radial-gradient(circle at 50% 20%, var(--bg2), var(--bg1) 70%);
  background-attachment:fixed;
}
.wrap{max-width:760px;margin:0 auto;padding:0 24px;}
header.wrap{padding:34px 24px 10px;}
nav{display:flex;align-items:center;gap:22px;font-size:14px;padding:10px 0;}
nav .brand{font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent-deep);text-decoration:none;margin-right:auto;}
nav a{color:var(--ink-soft);text-decoration:none;}
nav a:hover{color:var(--accent-deep);}
.hero{text-align:center;padding:64px 0 40px;}
.hero .mark{width:120px;height:120px;margin:0 auto 26px;display:block;}
h1{font-size:clamp(34px,6vw,52px);letter-spacing:6px;font-weight:600;color:var(--ink);}
h1 b{color:var(--accent-deep);}
.tag{letter-spacing:4px;text-transform:uppercase;font-size:13px;color:var(--ink-faint);margin-top:10px;}
.lede{max-width:520px;margin:26px auto 0;font-size:17px;color:var(--ink-soft);}
.cta{display:inline-block;margin-top:34px;background:var(--accent);color:#fff;border-radius:28px;
  padding:14px 34px;text-decoration:none;font-weight:600;letter-spacing:1.5px;font-size:14px;
  box-shadow:0 10px 30px rgba(93,74,145,.3);transition:transform .15s;}
.cta:hover{transform:translateY(-2px);}
.cta.soon{background:var(--card);color:var(--ink-soft);border:1px solid var(--card-border);box-shadow:none;cursor:default;}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;padding:48px 24px;}
.feat{background:var(--card);border:1px solid var(--card-border);border-radius:20px;padding:22px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.feat .ico{font-size:26px;}
.feat h3{font-size:15px;margin:10px 0 6px;letter-spacing:1px;color:var(--accent-deep);}
.feat p{font-size:13.5px;color:var(--ink-soft);}
main.doc{background:var(--card);border:1px solid var(--card-border);border-radius:24px;
  padding:44px 46px;margin:40px 0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
main.doc h1{font-size:30px;letter-spacing:2px;margin-bottom:4px;}
main.doc .updated{font-size:13px;color:var(--ink-faint);margin-bottom:28px;}
main.doc h2{font-size:19px;color:var(--accent-deep);margin:30px 0 10px;letter-spacing:.5px;}
main.doc p, main.doc li{font-size:15px;color:var(--ink-soft);margin-bottom:12px;}
main.doc ul{padding-left:22px;}
main.doc strong{color:var(--ink);}
main.doc a{color:var(--accent-deep);}
footer{padding:36px 0 46px;text-align:center;font-size:13px;color:var(--ink-faint);}
footer a{color:var(--ink-soft);text-decoration:none;margin:0 10px;}
footer a:hover{color:var(--accent-deep);}
@media(max-width:600px){ main.doc{padding:30px 22px;} }

/* ============ animated hero ============ */
.hero{position:relative;overflow:hidden;text-align:center;padding:34px 0 64px;}
.hero .sky{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,#d8ecea,#cabfe6 45%,#ecd8cf 100%);
  background-size:220% 220%;animation:skyshift 36s ease-in-out infinite;}
@keyframes skyshift{0%,100%{background-position:0% 0%;}33%{background-position:80% 40%;}66%{background-position:20% 90%;}}
.hero-inner{position:relative;}
.diorama{width:min(680px,94vw);height:auto;display:block;margin:0 auto -8px;}
.island{animation:floaty 7s ease-in-out infinite;transform-origin:360px 280px;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.gem{animation:bob 3.2s ease-in-out infinite;transform-origin:360px 190px;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.portal{animation:pulse 3.2s ease-in-out infinite;transform-origin:360px 238px;}
@keyframes pulse{0%,100%{opacity:.75;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}
.cloud{filter:blur(3px);}
.c1{animation:drift 34s linear infinite;transform:translate(-140px,120px);}
.c2{animation:drift 46s linear infinite;animation-delay:-18s;transform:translate(-140px,300px);}
.c3{filter:blur(5px);animation:drift 40s linear infinite;animation-delay:-30s;transform:translate(-160px,330px);}
@keyframes drift{from{transform:translate(-180px,var(--cy,140px));}to{transform:translate(900px,var(--cy,140px));}}
.c1{--cy:120px;} .c2{--cy:300px;} .c3{--cy:330px;}
.tw{animation:twinkle 4s ease-in-out infinite;}
.t1{animation-delay:0s;} .t2{animation-delay:.8s;} .t3{animation-delay:1.6s;} .t4{animation-delay:2.4s;} .t5{animation-delay:3.2s;}
@keyframes twinkle{0%,100%{opacity:.15;}50%{opacity:.9;}}
.traveller{animation:floaty 7s ease-in-out infinite;}

/* ============ sections ============ */
.sect{text-align:center;font-size:15px;letter-spacing:4px;color:var(--accent-deep);font-weight:600;}
.sect-sub{text-align:center;font-size:14px;color:var(--ink-faint);margin-top:8px;}

/* ============ screenshots ============ */
.shots-band{padding:56px 0;background:linear-gradient(180deg,transparent,rgba(255,255,255,.35) 20%,rgba(255,255,255,.35) 80%,transparent);}
.shots{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:36px;}
.phone{width:200px;border-radius:30px;padding:9px;background:#211d2e;
  box-shadow:0 24px 60px rgba(63,58,88,.35);transition:transform .25s;}
.phone img{width:100%;border-radius:22px;display:block;}
.phone:hover{transform:translateY(-10px) rotate(0deg) !important;}
.p1{transform:rotate(-3deg);}
.p2{transform:rotate(1.5deg) translateY(14px);}
.p3{transform:rotate(-1.5deg);}
.p4{transform:rotate(3deg) translateY(10px);}

/* ============ chapter chips ============ */
.chapters-sect{padding:56px 0 8px;}
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:30px;}
.chip{position:relative;border-radius:16px;padding:16px 12px 13px;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,var(--g1),var(--g2));
  box-shadow:0 8px 22px rgba(63,58,88,.18);transition:transform .2s;}
.chip:hover{transform:translateY(-4px);}
.chip span{font-family:Georgia,'Times New Roman',serif;font-size:22px;opacity:.85;display:block;}
.chip em{font-style:normal;font-size:11.5px;letter-spacing:.5px;font-weight:600;display:block;margin-top:4px;
  text-shadow:0 1px 4px rgba(0,0,0,.25);}
@media (prefers-reduced-motion: reduce){
  .island,.gem,.portal,.cloud,.tw,.traveller,.hero .sky{animation:none;}
}
.phone.video{width:230px;}
.phone video{width:100%;border-radius:22px;display:block;}

/* ============ mobile ============ */
html,body{overflow-x:hidden;}
@media (max-width:640px){
  .wrap{padding:0 18px;}
  header.wrap{padding:26px 18px 8px;}
  nav{gap:12px;font-size:12.5px;flex-wrap:wrap;}
  nav .brand{letter-spacing:1.5px;}
  .hero{padding:20px 0 44px;}
  .hero .lede{font-size:15px;padding:0 6px;}
  .cta{padding:12px 24px;font-size:13px;}
  .diorama{width:100vw;margin-left:calc(50% - 50vw);}
  .shots-band{padding:40px 0;}
  .shots{gap:16px;margin-top:26px;}
  .phone{width:calc(50% - 10px);max-width:190px;padding:6px;border-radius:24px;}
  .phone img,.phone video{border-radius:18px;}
  .phone.video{width:calc(50% - 10px);max-width:190px;}
  .p1,.p2,.p3,.p4{transform:none;}
  .features{padding:34px 0;gap:12px;}
  .feat{padding:18px;}
  .sect{font-size:13px;letter-spacing:3px;}
  main.doc h1{font-size:24px;}
}

/* features: compact list rows on narrow screens */
@media (max-width:700px){
  .features{grid-template-columns:1fr;gap:10px;padding:34px 18px;}
  .feat{display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:start;padding:16px 18px;}
  .feat .ico{grid-row:1 / span 2;font-size:24px;text-align:center;line-height:1.3;}
  .feat h3{grid-column:2;margin:2px 0 4px;}
  .feat p{grid-column:2;margin:0;}
}

/* ============ story quotes ============ */
.story-band{padding:64px 0 40px;}
.quotes{display:flex;flex-direction:column;gap:22px;margin:36px auto 0;max-width:560px;}
.q{background:var(--card);border:1px solid var(--card-border);border-radius:20px;padding:22px 28px;
  font-size:16.5px;line-height:1.6;color:var(--ink-soft);font-style:italic;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.q em{color:var(--accent-deep);font-style:italic;}
.q1{transform:rotate(-.6deg);align-self:flex-start;}
.q2{transform:rotate(.5deg);align-self:flex-end;}
.q3{transform:rotate(-.4deg);align-self:center;}
.story-note{text-align:center;margin-top:26px;font-size:13.5px;color:var(--ink-faint);}

/* ============ how it plays ============ */
.how-sect{padding:48px 24px;}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:34px;}
.step{background:var(--card);border:1px solid var(--card-border);border-radius:20px;padding:26px 24px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-align:center;}
.step-num{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;
  font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.step h3{font-size:16px;color:var(--accent-deep);margin-bottom:8px;letter-spacing:.5px;}
.step p{font-size:14px;color:var(--ink-soft);}

/* ============ mechanics ============ */
.mech-sect{padding:44px 24px;}
.mech-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:30px 0 18px;}
.mech{background:var(--card);border:1px solid var(--card-border);border-radius:20px;
  padding:10px 18px;font-size:13.5px;font-weight:600;color:var(--ink-soft);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .15s;}
.mech:hover{transform:translateY(-3px);color:var(--accent-deep);}

/* ============ craft ============ */
.craft-band{padding:56px 0;background:linear-gradient(180deg,transparent,rgba(255,255,255,.35) 25%,rgba(255,255,255,.35) 75%,transparent);text-align:center;}
.craft-text{max-width:560px;margin:26px auto 0;font-size:16px;color:var(--ink-soft);line-height:1.7;}
.palette{display:flex;gap:12px;justify-content:center;margin:30px 0 12px;}
.palette span{width:34px;height:34px;border-radius:50%;box-shadow:inset -4px -6px 10px rgba(0,0,0,.12),0 4px 12px rgba(90,70,140,.2);}

@media (max-width:640px){
  .story-band{padding:44px 0 28px;}
  .q{font-size:15px;padding:18px 20px;}
  .craft-text{font-size:15px;padding:0 6px;}
}