@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root { --ink:#1d211e; --muted:#69706a; --paper:#f5f2e9; --lavender:#e6e5df; --lilac:#d4d3ca; --violet:#59655d; --deep:#202521; --line:rgba(29,33,30,.14); --serif:'Playfair Display', Georgia, serif; --sans:'DM Sans', Arial, sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1180px, calc(100% - 48px)); margin:0 auto; }
.page-glow { pointer-events:none; position:absolute; border-radius:50%; filter:blur(5px); z-index:-1; }
.glow-one { width:500px; height:330px; top:-120px; right:-160px; background:radial-gradient(ellipse,rgba(47,54,48,.18),rgba(47,54,48,.035) 58%,transparent 71%); filter:blur(19px); }
.glow-two { width:430px; height:280px; top:960px; left:-190px; background:radial-gradient(ellipse,rgba(102,111,101,.14),transparent 68%); filter:blur(22px); }
.site-header { height:95px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:10px; font:500 15px/1 var(--mono); letter-spacing:.2em; }
.brand-mark { width:30px; height:30px; display:block; flex:0 0 30px; overflow:hidden; border-radius:50%; border:1px solid rgba(29,33,30,.12); color:transparent; background:url('/statics/ffsm/en/fatereading-favicon.svg?v=20260728-hexagram2') center/contain no-repeat; font-size:0; letter-spacing:0; box-shadow:0 3px 9px rgba(83,45,38,.14); }
.desktop-nav { display:flex; gap:32px; margin-left:auto; font-size:14px; color:#504b5e; }
.desktop-nav a, .footer-bottom a { transition:color .2s; }
.desktop-nav a:hover, .footer-bottom a:hover { color:var(--violet); }
.header-link { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; }
.header-link span { font-size:18px; color:var(--violet); }
.hero { min-height:650px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:60px; padding:54px 0 108px; }
.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 19px; font:500 10px/1.4 var(--mono); letter-spacing:.13em; color:#686176; text-transform:uppercase; }
.eyebrow span { width:21px; height:1px; background:#a74738; }
h1, h2, h3, p { margin-top:0; }
h1, h2 { font-family:var(--serif); font-weight:500; letter-spacing:-.05em; }
h1 { max-width:570px; margin-bottom:23px; font-size:clamp(54px, 6.1vw, 89px); line-height:.98; }
h1 em, h2 em { color:#a74738; font-weight:500; }
.hero-text { max-width:480px; color:var(--muted); font-size:17px; line-height:1.65; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:33px; }
.button { display:inline-flex; align-items:center; gap:17px; padding:15px 20px 15px 22px; border-radius:4px; font-size:14px; font-weight:600; transition:transform .2s, box-shadow .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--ink); color:#fff; box-shadow:0 12px 25px rgba(29,33,30,.16); }
.button span { font-size:19px; line-height:0; }
.text-link { border-bottom:1px solid #a8a3b0; padding-bottom:4px; color:#4c465b; font-size:14px; }
.trust-row { display:flex; align-items:center; gap:13px; margin-top:75px; color:#777183; font-size:12px; line-height:1.5; }
.trust-row strong { color:#373040; font-weight:600; }.trust-row p { margin:0; }.avatar-stack { display:flex; }.avatar-stack span { width:27px; height:27px; margin-right:-5px; border:2px solid var(--paper); display:grid; place-items:center; border-radius:50%; color:#fff; background:#8061dc; font-size:12px; }.avatar-stack span:nth-child(2){background:#cd9c9f}.avatar-stack span:nth-child(3){background:#4c4366}
.hero-art { position:relative; width:min(455px,100%); aspect-ratio:1/1.05; justify-self:end; border-radius:48% 52% 45% 55% / 43% 49% 51% 57%; background:radial-gradient(circle at 48% 38%,#e9e7df 0 10%,#c6c9c2 34%,#878f87 68%,#454b45); overflow:hidden; box-shadow:inset 0 0 65px rgba(255,255,255,.55); }
.orbital { position:absolute; border:1px solid rgba(85,60,139,.25); border-radius:50%; transform:rotate(-25deg); }.orbital-a { width:135%; height:41%; top:31%; left:-18%; }.orbital-b { width:71%; height:116%; top:-8%; left:18%; transform:rotate(44deg); }.moon { position:absolute; width:145px; height:145px; top:23%; left:31%; border-radius:50%; background:radial-gradient(circle at 36% 30%,#fff 0 3%,#f9f7ff 21%,#e5dafe 58%,#c5afea); box-shadow:0 20px 55px rgba(82,51,134,.21); }.moon:after { content:''; position:absolute; width:20px; height:20px; top:34px; left:79px; border-radius:50%; background:rgba(170,146,214,.16); box-shadow:-42px 39px 0 5px rgba(170,146,214,.1),35px 59px 0 -3px rgba(170,146,214,.17); }.moon span { display:block; position:absolute; width:100%; height:100%; border:1px solid rgba(255,255,255,.75); border-radius:50%; transform:scale(1.16); }.orbit-dot { position:absolute; z-index:2; width:9px; height:9px; border-radius:50%; background:#8061dc; box-shadow:0 0 0 5px rgba(128,97,220,.13); }.dot-a { top:30%; right:14%; }.dot-b { bottom:25%; left:14%; background:#e89e93; }.constellation { position:absolute; z-index:5; color:#fff; opacity:.83; }.c-one{top:16%;left:18%;font-size:16px}.c-two{top:27%;right:20%;font-size:26px}.c-three{bottom:19%;right:18%;font-size:15px}.hero-card { position:absolute; z-index:6; right:0; bottom:8%; width:205px; padding:18px 19px; background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.85); border-radius:5px; box-shadow:0 13px 30px rgba(90,63,140,.14); backdrop-filter:blur(7px); }.card-kicker { margin:0 0 12px; font:500 8px/1 var(--mono); letter-spacing:.13em; color:#736987; }.hero-card p:not(.card-kicker) { margin:0; font:500 20px/1.17 var(--serif); }.hero-card span { display:block; margin-top:17px; color:#77698c; font:8px/1 var(--mono); letter-spacing:.13em; }
.service-section { padding:76px 0 124px; }.section-heading { display:flex; justify-content:space-between; gap:36px; align-items:flex-end; margin-bottom:42px; }.section-heading h2,.how-intro h2,.cta-section h2 { margin:0; font-size:clamp(38px,4vw,58px); line-height:1.02; }.section-heading > p { max-width:316px; margin:0 0 3px; color:var(--muted); font-size:15px; line-height:1.6; }.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.service-card { position:relative; min-height:355px; padding:22px 24px; overflow:hidden; border-radius:5px; transition:transform .25s, box-shadow .25s; }.service-card:hover { transform:translateY(-5px); box-shadow:0 18px 38px rgba(45,27,88,.16); }.tarot-card { background:#28213a; color:#fff; }.chart-card { background:#e8ddf8; }.pillars-card { background:#e7d7d1; }.service-number { color:inherit; opacity:.55; font:10px/1 var(--mono); letter-spacing:.1em; }.service-icon { position:absolute; opacity:.9; }.cards-icon { top:60px; left:28px; width:110px; height:122px; }.cards-icon i { position:absolute; width:62px; height:91px; border-radius:3px; border:1px solid rgba(255,255,255,.46); background:linear-gradient(145deg,rgba(237,227,255,.27),rgba(147,112,207,.05)); transform:rotate(-15deg); }.cards-icon i:nth-child(2){left:20px;top:4px;transform:rotate(3deg)}.cards-icon i:nth-child(3){left:42px;top:17px;transform:rotate(18deg)}.chart-icon { width:130px; height:130px; top:48px; left:30px; border:1px solid rgba(81,55,126,.32); border-radius:50%; display:grid; place-items:center; }.chart-icon:before,.chart-icon:after { content:''; position:absolute; border:1px solid rgba(81,55,126,.23); border-radius:50%; }.chart-icon:before { width:72%; height:72%; }.chart-icon:after { width:40%; height:40%; }.chart-icon i { font:26px var(--serif); color:#7659ae; }.pillars-icon { top:62px; left:32px; display:flex; align-items:flex-end; gap:12px; height:102px; }.pillars-icon i { display:block; width:19px; border-radius:12px 12px 3px 3px; background:rgba(120,75,87,.45); }.pillars-icon i:nth-child(1){height:64px}.pillars-icon i:nth-child(2){height:100px}.pillars-icon i:nth-child(3){height:41px}.pillars-icon i:nth-child(4){height:77px}.service-copy { position:absolute; right:25px; bottom:22px; left:25px; }.service-copy h3 { margin:0 0 8px; font:500 27px/1 var(--serif); letter-spacing:-.035em; }.service-copy p { max-width:230px; margin:0; opacity:.77; font-size:13px; line-height:1.53; }.card-arrow { position:absolute; top:20px; right:22px; font-size:22px; }
.quote-section { background:#eee7fb; padding:97px 0 93px; text-align:center; }.quote-inner { max-width:840px; }.quote-mark { display:block; height:38px; color:#8061dc; font:64px/.8 var(--serif); }.quote-section blockquote { margin:12px 0 24px; font:500 clamp(27px,3.4vw,47px)/1.15 var(--serif); letter-spacing:-.04em; }.quote-section p { margin:0; color:#736a80; font:9px/1 var(--mono); letter-spacing:.14em; }
.how-section { display:grid; grid-template-columns:.95fr 1.05fr; gap:80px; padding:130px 0; }.steps { display:grid; gap:0; padding:0; margin:0; list-style:none; counter-reset:step; }.steps li { display:grid; grid-template-columns:50px 1fr; gap:0 15px; padding:0 0 29px; margin-bottom:25px; border-bottom:1px solid var(--line); }.steps li:last-child { margin-bottom:0; }.steps span { grid-row:1/3; color:#856ac6; font:10px/1.6 var(--mono); }.steps h3 { margin:0 0 7px; font-size:16px; font-weight:600; }.steps p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.cta-section { position:relative; overflow:hidden; margin-bottom:100px; padding:90px 70px; text-align:center; color:#fff; background:linear-gradient(117deg,#1c211e,#344039 58%,#5e6a60); border-radius:6px; }.cta-section:before,.cta-section:after { content:''; position:absolute; width:430px; height:430px; border:1px solid rgba(255,255,255,.12); border-radius:50%; }.cta-section:before{left:-250px;top:-260px}.cta-section:after{right:-210px;bottom:-280px}.cta-section .eyebrow { justify-content:center; color:#e2d8f8; }.cta-section .eyebrow span { background:#e3d8ff; }.cta-section h2 { position:relative; z-index:1; margin:0 0 30px; font-size:clamp(42px,5vw,68px); }.cta-section h2 em { color:#e8d9ff; }.cta-star { position:absolute; top:24%; left:18%; opacity:.65; font-size:26px; }.button-light { position:relative; z-index:1; background:#f8f6ff; color:#29213e; }
.site-footer { padding-bottom:31px; }.footer-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:48px; border-bottom:1px solid var(--line); }.footer-top p { margin:0; color:var(--muted); font:13px/1.5 var(--serif); font-style:italic; }.footer-bottom { display:flex; justify-content:space-between; gap:22px; padding-top:24px; color:#777183; font-size:11px; }.footer-bottom p { margin:0; }.footer-bottom div { display:flex; gap:21px; }
@media (max-width:760px) { .shell{width:min(100% - 32px,600px)} .site-header{height:75px}.desktop-nav{display:none}.header-link{font-size:12px}.hero{grid-template-columns:1fr;gap:25px;padding:48px 0 75px}.hero-copy{order:2}.hero-art{order:1;justify-self:center;width:min(340px,94vw)}h1{font-size:55px}.hero-text{font-size:16px}.trust-row{margin-top:47px}.section-heading{display:block}.section-heading>p{margin-top:20px}.service-section{padding:68px 0 80px}.service-grid{grid-template-columns:1fr}.service-card{min-height:267px}.service-icon{transform:scale(.8);transform-origin:top left}.quote-section{padding:77px 0}.how-section{grid-template-columns:1fr;gap:45px;padding:82px 0}.cta-section{margin-bottom:70px;padding:70px 22px}.cta-star{left:7%;top:14%}.footer-top,.footer-bottom{align-items:flex-start;flex-direction:column;gap:17px}.footer-bottom div{gap:16px}.hero-card{right:0;bottom:7%;transform:scale(.85);transform-origin:right bottom} }
@media (max-width:390px) { .header-link{display:none}.site-header{justify-content:flex-start}.hero{padding-top:27px}h1{font-size:48px}.hero-art{width:300px}.hero-card{display:none}.button{padding:14px 16px}.section-heading h2,.how-intro h2{font-size:38px} }
.hero-ink-art { background:#e7e5dc; box-shadow:none; }.hero-ink-art:after { display:none; }.hero-ink-art > img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }.hero-ink-art .hero-card { z-index:2; background:rgba(246,243,233,.78); border-color:rgba(255,255,255,.72); box-shadow:0 16px 34px rgba(20,28,22,.21); }.hero-ink-art .card-kicker { color:#6b7169; }.hero-ink-art .hero-card span { color:#7d4c43; }.ink-sun,.ink-moon,.ink-cloud { position:absolute; pointer-events:none; }.ink-sun { z-index:1; top:16%; left:21%; width:170px; height:170px; border-radius:48% 52% 45% 55% / 54% 44% 56% 46%; background:radial-gradient(circle at 36% 35%,rgba(246,242,226,.72) 0 7%,rgba(198,204,194,.62) 21%,rgba(67,79,69,.68) 59%,rgba(29,39,32,.82) 100%); filter:blur(.35px) contrast(1.08); box-shadow:inset 17px -15px 28px rgba(13,21,16,.38), 0 0 0 8px rgba(228,225,211,.09), 11px 20px 26px rgba(23,33,25,.23); transform:rotate(-17deg); }.ink-sun:before,.ink-sun:after { content:''; position:absolute; border-radius:50%; background:rgba(235,232,218,.13); filter:blur(2px); }.ink-sun:before { width:35px; height:35px; top:30px; right:33px; }.ink-sun:after { width:18px; height:18px; bottom:28px; left:42px; }.ink-moon { z-index:2; top:25%; right:15%; width:112px; height:112px; border-radius:56% 44% 53% 47% / 48% 55% 45% 52%; background:radial-gradient(circle at 36% 31%,#f1efe4 0 14%,#d4d7cc 43%,#7f8a80 84%); box-shadow:inset -12px -9px 17px rgba(49,61,51,.23), 0 13px 27px rgba(18,29,20,.18); transform:rotate(22deg); }.ink-moon:after { content:''; position:absolute; top:-7px; right:-19px; width:94px; height:115px; border-radius:50%; background:rgba(54,67,56,.63); filter:blur(1px); }.ink-cloud { z-index:2; height:38px; border-radius:50%; background:rgba(237,233,218,.24); filter:blur(8px); }.ink-cloud-one { width:180px; right:-26px; top:49%; transform:rotate(-12deg); }.ink-cloud-two { width:155px; left:-32px; top:60%; background:rgba(26,37,29,.27); transform:rotate(18deg); }.orbital { z-index:3; border-color:rgba(241,239,228,.4); }.orbit-dot { z-index:4; background:#a74738; box-shadow:0 0 0 5px rgba(167,71,56,.14); }.hero-art:after { content:''; position:absolute; z-index:0; width:300px; height:170px; left:-65px; bottom:-58px; border-radius:50%; background:radial-gradient(ellipse,rgba(18,25,21,.52) 0 12%,rgba(34,42,36,.25) 43%,transparent 70%); filter:blur(14px); transform:rotate(-20deg); }.pillars-card { background:linear-gradient(145deg,#ddd9ca,#b7bcb3); }.iching-card { background:linear-gradient(145deg,#1f2923,#465248); }.elements-card { background:linear-gradient(145deg,#e6e3d6,#d0d1c3); }.quote-section { background:#e4e2d9; }.bagua { position:absolute; z-index:4; width:170px; height:170px; top:20%; left:30%; border:1px solid rgba(87,59,135,.35); border-radius:50%; transform:rotate(18deg); box-shadow:0 0 0 17px rgba(255,255,255,.13), 0 17px 45px rgba(80,52,124,.14); }.bagua:before,.bagua:after { content:''; position:absolute; background:rgba(87,59,135,.35); }.bagua:before { top:50%; left:11%; width:78%; height:1px; }.bagua:after { top:11%; left:50%; width:1px; height:78%; }.trigram { position:absolute; width:38px; height:18px; border-top:3px solid rgba(77,49,124,.65); border-bottom:3px solid rgba(77,49,124,.65); }.trigram:after { content:''; position:absolute; top:5px; left:0; width:100%; border-top:3px solid rgba(77,49,124,.65); }.trigram-one{top:-9px;left:65px}.trigram-two{right:-15px;top:65px;transform:rotate(90deg)}.trigram-three{bottom:-9px;left:65px}.trigram-four{left:-15px;top:65px;transform:rotate(90deg)}.eastern-grid .service-card { cursor:default; }.eastern-grid .service-card:hover { transform:none; box-shadow:none; }.iching-card { background:#253040; color:#f8f5ff; }.elements-card { background:#e6e2d5; }.trigram-icon { top:57px; left:32px; width:94px; display:grid; gap:8px; }.trigram-icon i { display:block; height:3px; background:rgba(255,255,255,.7); }.trigram-icon i:nth-child(2),.trigram-icon i:nth-child(5) { width:74%; border-right:17px solid #253040; }.elements-icon { top:58px; left:30px; display:flex; gap:6px; align-items:center; }.elements-icon i { width:30px; height:30px; display:grid; place-items:center; border:1px solid rgba(67,73,55,.28); border-radius:50%; color:#4b5844; font:14px var(--serif); }.card-status { position:absolute; top:22px; right:22px; color:inherit; opacity:.55; font:9px/1 var(--mono); letter-spacing:.1em; }.explore-lenses { margin-top:57px; padding-top:25px; border-top:1px solid var(--line); }.lens-links { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.lens-links a { display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:9px; padding:18px 0; border-bottom:1px solid var(--line); transition:color .2s; }.lens-links a:hover { color:#7956bc; }.lens-links span { color:#8d8497; font:10px var(--mono); }.lens-links strong { font:500 20px/1 var(--serif); }.lens-links em { grid-column:2; color:var(--muted); font:12px var(--sans); }.lens-links b { grid-column:3; grid-row:1/3; font-size:19px; font-weight:400; } .service-stream{border-top:1px solid var(--line)}.stream-item{display:grid;grid-template-columns:44px 68px minmax(0,1fr) auto;align-items:center;gap:16px;min-height:126px;padding:21px 17px;border-bottom:1px solid var(--line);transition:background .2s,transform .2s}.stream-item:hover{background:rgba(225,225,216,.52);transform:translateX(4px)}.stream-number{align-self:start;padding-top:6px;color:#8c928b;font:10px/1 var(--mono);letter-spacing:.08em}.stream-icon{display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(29,33,30,.15);border-radius:50%;color:#35443a;background:#e4e3da;font:26px/1 var(--serif)}.stream-copy{display:grid;gap:7px}.stream-copy strong{font:500 27px/1 var(--serif);letter-spacing:-.03em}.stream-copy em{color:var(--muted);font:13px/1.45 var(--sans);font-style:normal}.stream-action{display:flex;align-items:center;gap:15px;color:#35433a;font:600 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}.stream-action b{display:grid;place-items:center;width:31px;height:31px;border:1px solid rgba(29,33,30,.2);border-radius:50%;font:20px/1 var(--sans);font-weight:400}.stream-pillars .stream-icon{background:#d7ddd1}.stream-elements .stream-icon{background:#e5e0d0;color:#796442}.stream-iching .stream-icon{background:#2b3930;color:#f2f0e6}.stream-tarot .stream-icon{background:#e5ded6;color:#7f5346}.stream-astro .stream-icon{background:#dce1df;color:#3e6262}@media (max-width:760px) { .bagua{transform:scale(.78) rotate(18deg)}.stream-heading{margin-bottom:25px}.stream-item{grid-template-columns:31px 50px minmax(0,1fr);gap:11px;min-height:108px;padding:19px 2px}.stream-item:hover{transform:none}.stream-icon{width:43px;height:43px;font-size:22px}.stream-number{padding-top:4px}.stream-copy strong{font-size:21px}.stream-copy em{font-size:12px;line-height:1.35}.stream-action{grid-column:3;justify-self:start;margin-top:-4px;font-size:9px;gap:8px}.stream-action b{width:23px;height:23px;font-size:15px}.lens-links{grid-template-columns:1fr}.eastern-grid .service-card{min-height:267px}.trigram-icon,.elements-icon{transform:scale(.8);transform-origin:top left} }