/* =========================================================
Weaver — welcome/site.css
Marketing site, now served from Cloudflare Pages.
Palette derived from the subject: ink, parchment, gold leaf.
========================================================= */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* ink family — the largest fields */
  --ink-900:#0b0a08;
  --ink-800:#100e0b;
  --ink-700:#171410;
  --ink-600:#1f1b15;
  --ink-500:#272219;
  --line:#2c2822;
  --line-strong:#3b352b;

  /* parchment family — text */
  --parchment:#ece7dd;
  --muted:#a29b8f;
  --faint:#6f695f;

  /* gold leaf — dominant accent */
  --gold:#e0a43c;
  --gold-bright:#f7cd6b;
  --gold-deep:#b8801f;
  --gold-soft:rgba(224,164,60,.12);
  --gold-line:rgba(224,164,60,.42);

  /* semantic + secondary accents */
  --quill-red:#c4453a;
  --ink-blue:#6d93bd;
  --sage:#84a76c;

  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;

  --nav-h:64px;
  --radius:14px;

  /* the freehand golden W — identical to the studio mark */
  --weaver-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 88'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='8' y1='12' x2='120' y2='80'%3E%3Cstop offset='0' stop-color='%23fffdf4'/%3E%3Cstop offset='.18' stop-color='%23ffeaa6'/%3E%3Cstop offset='.4' stop-color='%23ffcb52'/%3E%3Cstop offset='.62' stop-color='%23eda21a'/%3E%3Cstop offset='.82' stop-color='%23c07d10'/%3E%3Cstop offset='1' stop-color='%238a5510'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%236b3f06'/%3E%3Cstop offset='.08' stop-color='%23a0640c'/%3E%3Cstop offset='.2' stop-color='%23e0a41c'/%3E%3Cstop offset='.34' stop-color='%23ffd45e'/%3E%3Cstop offset='.44' stop-color='%23fffef9'/%3E%3Cstop offset='.52' stop-color='%23ffe89a'/%3E%3Cstop offset='.64' stop-color='%23f2b021'/%3E%3Cstop offset='.8' stop-color='%23b8760f'/%3E%3Cstop offset='1' stop-color='%236b3f06'/%3E%3C/linearGradient%3E%3CradialGradient id='c' cx='.34' cy='.2' r='.55'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.8'/%3E%3Cstop offset='.45' stop-color='%23fff6d8' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M6 76C12 58 20 34 32 22C33 40 33 56 37 66C42 76 52 70 58 46C61 34 63 26 66 24C67 42 67 56 71 66C76 76 86 70 92 46C95 34 97 26 99 22C105 13 114 10 119 15C124 19 123 29 116 30C111 31 107 27 106 22' fill='none' stroke='%235c3405' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round' opacity='.85'/%3E%3Cpath d='M6 76C12 58 20 34 32 22C33 40 33 56 37 66C42 76 52 70 58 46C61 34 63 26 66 24C67 42 67 56 71 66C76 76 86 70 92 46C95 34 97 26 99 22C105 13 114 10 119 15C124 19 123 29 116 30C111 31 107 27 106 22' fill='none' stroke='url(%23a)' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 76C12 58 20 34 32 22C33 40 33 56 37 66C42 76 52 70 58 46C61 34 63 26 66 24C67 42 67 56 71 66C76 76 86 70 92 46C95 34 97 26 99 22C105 13 114 10 119 15C124 19 123 29 116 30C111 31 107 27 106 22' fill='none' stroke='%23fffdf6' stroke-width='.8' stroke-linecap='round' stroke-linejoin='round' opacity='.7'/%3E%3Cpath d='M24 26C23 44 26 58 31 68C33.5 74 41 73.5 40.5 67C38 56 38.5 42 40 24C40.5 18.5 24.5 19.5 24 26Z' fill='url(%23b)'/%3E%3Cpath d='M24 26C23 44 26 58 31 68C33.5 74 41 73.5 40.5 67C38 56 38.5 42 40 24C40.5 18.5 24.5 19.5 24 26Z' fill='url(%23c)'/%3E%3Cpath d='M58 28C57 45 60 58 65 68C67.5 74 75 73.5 74.5 67C72 56 72.5 43 74 26C74.5 20.5 58.5 21.5 58 28Z' fill='url(%23b)'/%3E%3Cpath d='M58 28C57 45 60 58 65 68C67.5 74 75 73.5 74.5 67C72 56 72.5 43 74 26C74.5 20.5 58.5 21.5 58 28Z' fill='url(%23c)'/%3E%3C/svg%3E");
}

html{scroll-behavior:smooth}
body{
  background:var(--ink-900);
  color:var(--parchment);
  font-family:var(--sans);
  line-height:1.65;
  overflow-x:hidden;
}
a{color:var(--gold);text-decoration:none}
img{max-width:100%;display:block}

/* ---------- scrollbar, in the site's own language ---------- */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:var(--ink-800)}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--line-strong),#2a251d);
  border-radius:8px;border:2px solid var(--ink-800);
}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep))}

.wrap{max-width:1060px;margin:0 auto;padding:0 24px}

/* ---------- fixed navigation ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:var(--nav-h);
  background:rgba(11,10,8,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
nav.is-stuck{
  background:rgba(11,10,8,.93);
  border-bottom-color:var(--line);
  box-shadow:0 8px 30px rgba(0,0,0,.5);
}
.nav-in{display:flex;align-items:center;gap:22px;height:var(--nav-h)}
.brand{
  display:inline-flex;align-items:center;
  font-family:var(--serif);font-style:italic;font-size:1.32rem;
  color:var(--parchment);letter-spacing:.01em;
}
.brand b{
  display:inline-block;width:1.44em;height:1.06em;
  vertical-align:-.16em;margin-right:.06em;
  background-image:var(--weaver-mark);
  background-repeat:no-repeat;background-position:center;background-size:contain;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 2px rgba(255,222,130,.55)) drop-shadow(0 1px 6px rgba(240,178,40,.5));
}
.nav-links{display:flex;gap:20px;margin-right:auto}
.nav-links a{
  position:relative;color:var(--muted);font-size:.9rem;font-weight:600;
  padding:4px 0;transition:color .18s ease;
}
.nav-links a:hover{color:var(--parchment)}
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,var(--gold-bright),var(--gold-deep));
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease;border-radius:2px;
}
.nav-links a:hover::after,.nav-links a.is-current::after{transform:scaleX(1)}
.nav-links a.is-current{color:var(--gold)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:11px;font-weight:650;font-size:.95rem;
  border:1px solid transparent;cursor:pointer;
  transition:transform .16s ease,filter .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.btn-gold{
  background:linear-gradient(140deg,var(--gold-bright),var(--gold) 52%,var(--gold-deep));
  color:#1a1408;box-shadow:0 6px 22px rgba(224,164,60,.24);
}
.btn-gold:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 10px 30px rgba(224,164,60,.34)}
.btn-ghost{background:transparent;color:var(--parchment);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--gold-line);background:var(--gold-soft);transform:translateY(-2px)}
.btn-sm{padding:9px 16px;font-size:.86rem;border-radius:9px}

/* ---------- hero: mesh gradient + grain + drifting light ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + 92px) 0 78px;
  text-align:center;
  background:
    radial-gradient(900px 420px at 18% -8%, rgba(224,164,60,.20), transparent 62%),
    radial-gradient(760px 400px at 84% 4%,  rgba(109,147,189,.14), transparent 60%),
    radial-gradient(1000px 520px at 50% 108%, rgba(196,69,58,.10), transparent 62%),
    linear-gradient(180deg,var(--ink-800),var(--ink-900));
}
.hero::before{
  content:'';position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(420px 300px at 30% 40%, rgba(247,205,107,.13), transparent 65%);
  animation:drift 22s ease-in-out infinite alternate;
}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.32;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
@keyframes drift{
  0%{transform:translate3d(-4%,-2%,0) scale(1)}
  100%{transform:translate3d(6%,4%,0) scale(1.12)}
}
.hero .wrap{position:relative;z-index:1}

.eyebrow{
  display:inline-block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px;
  border:1px solid var(--gold-line);background:var(--gold-soft);
  border-radius:999px;padding:5px 14px;
}
h1{
  font-family:var(--serif);font-size:clamp(2.2rem,5.2vw,3.7rem);
  line-height:1.1;font-weight:600;margin-bottom:20px;letter-spacing:-.01em;
  background:linear-gradient(178deg,#fbf6ea 8%,var(--parchment) 46%,#b9b1a3 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.sub{font-size:1.12rem;color:var(--muted);max-width:660px;margin:0 auto 34px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- the workflow strip: the product, made visible ---------- */
.flow{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  gap:12px;align-items:stretch;margin:52px auto 0;max-width:940px;text-align:left;
}
.flow-panel{
  background:linear-gradient(180deg,var(--ink-700),var(--ink-600));
  border:1px solid var(--line);border-radius:12px;padding:14px;
  display:flex;flex-direction:column;gap:9px;min-width:0;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.flow-panel.is-canon{border-color:var(--gold-line);box-shadow:0 10px 34px rgba(224,164,60,.14)}
.flow-head{
  display:flex;align-items:center;gap:7px;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
}
.flow-dot{width:7px;height:7px;border-radius:50%;flex:none}
.flow-panel:nth-child(1) .flow-dot{background:var(--ink-blue)}
.flow-panel:nth-child(1) .flow-head{color:var(--ink-blue)}
.flow-panel.is-canon .flow-dot{background:var(--gold)}
.flow-panel.is-canon .flow-head{color:var(--gold)}
.flow-panel:nth-child(5) .flow-dot{background:var(--sage)}
.flow-panel:nth-child(5) .flow-head{color:var(--sage)}
.flow-text{font-family:var(--serif);font-size:.82rem;line-height:1.6;color:var(--muted)}
.flow-panel.is-canon .flow-text{color:var(--parchment)}
.flow-tag{
  margin-top:auto;font-family:var(--mono);font-size:.6rem;color:var(--faint);
  border-top:1px dashed var(--line);padding-top:8px;
}
.flow-arrow{
  align-self:center;color:var(--gold);font-size:1.1rem;opacity:.75;
  animation:pulse 2.6s ease-in-out infinite;
}
.flow-arrow:nth-of-type(2){animation-delay:.5s}
@keyframes pulse{0%,100%{opacity:.4;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}}

/* ---------- sections ---------- */
section{padding:74px 0;position:relative;scroll-margin-top:calc(var(--nav-h) + 18px)}
section.tint-a{background:linear-gradient(180deg,var(--ink-900),var(--ink-800) 55%,var(--ink-900))}
section.tint-b{background:linear-gradient(180deg,var(--ink-900),#12100c 50%,var(--ink-900))}
h2{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.25rem);margin-bottom:14px;font-weight:600}
.lead{color:var(--muted);max-width:700px;margin-bottom:38px;font-size:1.02rem}

/* ---------- cards ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{
  position:relative;background:var(--ink-700);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px;overflow:hidden;
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  opacity:0;transition:opacity .22s ease;
}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.42)}
.card:hover::before{opacity:1}
.card h3{font-family:var(--serif);font-size:1.16rem;margin-bottom:10px;color:var(--parchment);font-weight:600}
.card p{font-size:.93rem;color:var(--muted)}
.card .k{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px;display:block;font-weight:700;
}
.vs{
  color:var(--faint);font-size:.85rem;margin-top:14px;font-style:italic;
  border-left:2px solid var(--quill-red);padding-left:12px;
}

/* ---------- pricing ---------- */
ul.tick{list-style:none;display:flex;flex-direction:column;gap:11px;margin:18px 0}
ul.tick li{padding-left:26px;position:relative;font-size:.94rem;color:var(--muted)}
ul.tick li:before{content:'✓';position:absolute;left:0;color:var(--sage);font-weight:700}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.price{
  background:var(--ink-700);border:1px solid var(--line);border-radius:16px;
  padding:28px;display:flex;flex-direction:column;gap:6px;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.price:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.price.hot{
  border-color:var(--gold-line);
  background:linear-gradient(180deg,rgba(224,164,60,.14),var(--ink-700) 58%);
  box-shadow:0 16px 46px rgba(224,164,60,.14);
}
.price.hot:hover{box-shadow:0 22px 56px rgba(224,164,60,.2)}
.price .amt{font-family:var(--serif);font-size:2.5rem;color:var(--parchment);line-height:1.1}
.price .per{color:var(--faint);font-size:.85rem}
.price .note{color:var(--muted);font-size:.88rem;margin:8px 0 18px}
.price .btn{margin-top:auto}
.badge{
  display:inline-block;background:var(--gold-soft);color:var(--gold);
  border:1px solid var(--gold-line);border-radius:999px;padding:3px 11px;
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;
}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:12px;max-width:780px}
.faq details{
  background:var(--ink-700);border:1px solid var(--line);
  border-radius:12px;padding:16px 20px;transition:border-color .2s ease;
}
.faq details[open]{border-color:var(--gold-line)}
.faq summary{
  cursor:pointer;font-weight:600;font-size:.96rem;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--gold);font-size:1.2rem;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:12px;color:var(--muted);font-size:.91rem}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:38px 0;margin-top:20px;background:var(--ink-800)}
.foot-in{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;color:var(--faint);font-size:.85rem}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{color:var(--muted);transition:color .18s ease}
.foot-links a:hover{color:var(--gold)}

/* ---------- staged reveals ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero::before,.flow-arrow{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .flow{grid-template-columns:1fr;gap:10px}
  .flow-arrow{justify-self:center;transform:rotate(90deg)}
  @keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
}
@media(max-width:860px){
  .grid3,.grid2,.price-grid{grid-template-columns:1fr}
  .hero{padding:calc(var(--nav-h) + 60px) 0 52px}
  section{padding:56px 0}
  .nav-in{gap:12px}
  .nav-links{gap:14px}
  .nav-links a{font-size:.84rem}
  .brand{font-size:1.15rem}
  nav .btn{padding:9px 14px;font-size:.84rem}
}
@media(max-width:520px){
  .wrap{padding:0 18px}
  .nav-links a:not(.is-current){display:none}
  .cta-row .btn{width:100%}
}