:root{
    --font-display:'Spectral',Georgia,serif;
    --font-body:'Mulish',system-ui,sans-serif;
    --font-script:'Petit Formal Script',cursive;
    --night-0:#0d0919; --night-1:#0c0918; --night-2:#140e24;
    --mauve:#8b7fa6; --lavender:#c8bce8; --sage:#93a88f;
    --cream:#f4ede6; --cream-dim:#b3a7c2; --gold:#d486b4; --gold-2:#f6cfe2;
    --reve:#b59ad8; --reve-2:#d9c7f0;
    --grain-opacity:.05;
    --measure:42rem;
  }
  body{ background:var(--night-0); color:var(--cream); overflow-x:hidden; }
  .container{ width:min(1160px,92vw); margin-inline:auto; }
  .btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-body); font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding:13px 24px; border-radius:999px; transition:.35s cubic-bezier(.16,.7,.3,1); cursor:pointer; }
  .btn-gold{ background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#1b1330; box-shadow:0 8px 26px -10px rgba(212,134,180,.7); }
  .btn-gold:hover{ transform:translateY(-2px); }
  .btn-ghost{ border:1px solid rgba(212,134,180,.5); color:var(--gold-2); }
  .btn-ghost:hover{ background:rgba(212,134,180,.12); }
  .btn svg{ width:16px; height:16px; }

  /* reading progress */
  .progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:300; background:linear-gradient(90deg,var(--gold),var(--gold-2)); box-shadow:0 0 12px rgba(246,207,226,.6); transition:width .1s linear; }

  /* header */
  header[data-header]{ position:fixed; inset:0 0 auto 0; z-index:200; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px clamp(18px,4vw,48px); transition:.45s; }
  header.is-scrolled{ background:rgba(13,9,25,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); padding-top:10px; padding-bottom:10px; border-bottom:1px solid rgba(212,134,180,.18); }
  .brand{ display:flex; align-items:center; gap:12px; flex:none; }
  .brand .logo-badge{ width:46px; height:46px; display:grid; place-items:center; flex:none; }
  .brand .logo-badge img{ width:46px; height:46px; object-fit:contain; filter:drop-shadow(0 2px 9px rgba(246,207,226,.4)); }
  .brand .wm b{ font-family:var(--font-display); font-weight:500; font-size:20px; white-space:nowrap; line-height:1; }
  .brand .wm small{ display:block; font-size:8.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-top:4px; font-family:var(--font-body); }
  nav.main{ display:flex; gap:24px; align-items:center; }
  nav.main a{ font-family:var(--font-body); font-size:13px; color:var(--cream-dim); transition:color .3s; }
  nav.main a:hover{ color:var(--cream); } nav.main a.active{ color:var(--gold-2); }

  /* hero */
  .a-hero{ position:relative; isolation:isolate; min-height:84vh; display:flex; align-items:flex-end; overflow:hidden; }
  .a-hero .bg{ position:absolute; inset:0; z-index:0; }
  .a-hero .bg img{ width:100%; height:100%; object-fit:cover; }
  .a-hero .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, var(--night-0) 3%, rgba(13,9,25,.86) 32%, rgba(13,9,25,.45) 62%, rgba(13,9,25,.62) 100%); }
  .a-hero .starfield{ z-index:1; opacity:.5; }
  .a-hero .inner{ position:relative; z-index:2; width:min(900px,92vw); margin:0 auto; padding:0 0 64px; text-align:center; }
  .crumbs{ font-family:var(--font-body); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-dim); margin-bottom:24px; }
  .crumbs a{ color:var(--cream-dim); } .crumbs a:hover{ color:var(--gold-2); }
  .a-cat{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-body); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2); border:1px solid rgba(212,134,180,.45); padding:6px 15px; border-radius:999px; margin-bottom:24px; }
  .a-cat svg{ width:13px; height:13px; }
  .a-hero h1{ font-family:var(--font-display); font-weight:300; font-size:clamp(38px,6vw,76px); line-height:1.0; letter-spacing:-.01em; }
  .a-hero h1 em{ font-style:normal; font-family:var(--font-script); color:var(--gold-2); font-size:1.04em; }
  .a-hero .stand{ margin:22px auto 0; max-width:54ch; color:var(--cream-dim); font-size:clamp(16px,1.4vw,19px); line-height:1.7; font-family:var(--font-display); font-style:italic; }
  .byline{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:34px; flex-wrap:wrap; }
  .byline .av{ width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#2a2150,#140e24); border:1px solid rgba(212,134,180,.5); display:grid; place-items:center; font-family:var(--font-display); font-size:17px; color:var(--gold-2); }
  .byline .who{ text-align:left; }
  .byline .who b{ font-family:var(--font-body); font-weight:600; font-size:14px; }
  .byline .who span{ display:block; font-size:12px; color:var(--cream-dim); margin-top:2px; }
  .byline .sep{ width:1px; height:30px; background:rgba(212,134,180,.3); }
  .byline .meta{ font-size:12.5px; color:var(--cream-dim); }

  /* article body */
  .article{ padding:72px 0 40px; position:relative; }
  .prose{ width:min(var(--measure),92vw); margin:0 auto; }
  .prose > p{ font-family:var(--font-display); font-size:19.5px; line-height:1.82; color:#f4ede6; margin-bottom:26px; }
  .prose > p a{ color:var(--gold-2); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
  .prose .lead{ font-size:23px; line-height:1.7; color:var(--cream); }
  .prose .lead::first-letter{ float:left; font-family:var(--font-display); font-size:84px; line-height:.72; padding:10px 14px 0 0; color:var(--gold-2); font-weight:500; }
  .prose h2{ font-family:var(--font-display); font-weight:300; font-size:clamp(28px,3.4vw,40px); line-height:1.1; margin:54px 0 8px; }
  .prose h2 .idx{ font-family:var(--font-script); color:var(--gold-2); font-size:.62em; margin-right:12px; }
  .prose h2 + .sub2{ color:var(--gold); font-family:var(--font-body); font-size:12px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:22px; }
  .prose h3{ font-family:var(--font-display); font-weight:500; font-size:24px; margin:34px 0 10px; color:#fff; }
  .prose ul.clean{ margin:0 0 26px; display:flex; flex-direction:column; gap:12px; }
  .prose ul.clean li{ display:flex; gap:13px; font-family:var(--font-display); font-size:18px; line-height:1.6; color:#f4ede6; }
  .prose ul.clean li svg{ width:18px; height:18px; color:var(--gold-2); flex:none; margin-top:5px; }
  .rule-orn{ display:flex; align-items:center; justify-content:center; gap:14px; margin:46px 0; color:var(--gold); }
  .rule-orn::before, .rule-orn::after{ content:""; height:1px; width:70px; background:linear-gradient(90deg,transparent,rgba(212,134,180,.6)); }
  .rule-orn::after{ background:linear-gradient(270deg,transparent,rgba(212,134,180,.6)); }
  .rule-orn svg{ width:16px; height:16px; }

  /* pull quote */
  .pull{ margin:48px 0; padding:8px 0 8px 30px; border-left:2px solid var(--gold); }
  .pull p{ font-family:var(--font-display); font-style:italic; font-weight:300; font-size:clamp(24px,2.8vw,32px); line-height:1.32; color:#fff; }
  .pull cite{ display:block; margin-top:14px; font-family:var(--font-body); font-style:normal; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-2); }

  /* full-bleed figure */
  .figure{ width:min(1000px,94vw); margin:54px auto; }
  .figure .fr{ border-radius:18px; overflow:hidden; border:1px solid rgba(212,134,180,.25); position:relative; }
  .figure img{ width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }
  .figure figcaption{ margin-top:12px; text-align:center; font-size:13px; color:var(--mauve); font-style:italic; }

  /* plant cards */
  .plants{ width:min(960px,94vw); margin:40px auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .plant{ border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(255,255,255,.025); padding:26px 22px; transition:.4s cubic-bezier(.16,.7,.3,1); }
  .plant:hover{ transform:translateY(-5px); border-color:rgba(212,134,180,.45); background:rgba(212,134,180,.05); }
  .plant .pic{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 50% 40%,#2a1d4a,#0c0918); border:1px solid rgba(212,134,180,.4); color:var(--gold-2); margin-bottom:16px; }
  .plant .pic svg{ width:26px; height:26px; }
  .plant h4{ font-family:var(--font-display); font-weight:500; font-size:21px; }
  .plant .lat{ font-family:var(--font-display); font-style:italic; font-size:13px; color:var(--gold); margin:2px 0 10px; }
  .plant p{ font-size:13.5px; line-height:1.6; color:var(--cream-dim); }

  /* callout */
  .callout{ width:min(var(--measure),92vw); margin:46px auto; border:1px solid rgba(212,134,180,.3); border-radius:18px; background:linear-gradient(150deg,rgba(22,29,68,.7),rgba(20,14,36,.5)); padding:30px 32px; position:relative; overflow:hidden; }
  .callout .moon{ position:absolute; top:-20px; right:-16px; width:96px; color:rgba(246,207,226,.1); }
  .callout .tag{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-body); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-2); margin-bottom:14px; }
  .callout .tag svg{ width:14px; height:14px; }
  .callout h3{ font-family:var(--font-display); font-weight:400; font-size:23px; margin-bottom:14px; }
  .callout ol{ margin:0; padding:0; counter-reset:step; display:flex; flex-direction:column; gap:12px; }
  .callout ol li{ counter-increment:step; display:flex; gap:14px; font-size:15px; line-height:1.55; color:#f4ede6; }
  .callout ol li::before{ content:counter(step); flex:none; width:26px; height:26px; border-radius:50%; background:rgba(212,134,180,.16); border:1px solid rgba(212,134,180,.5); color:var(--gold-2); font-family:var(--font-display); font-size:14px; display:grid; place-items:center; }

  /* key takeaways */
  .takeaway{ width:min(var(--measure),92vw); margin:46px auto; border-top:1px solid rgba(212,134,180,.25); border-bottom:1px solid rgba(212,134,180,.25); padding:28px 0; }
  .takeaway h3{ font-family:var(--font-body); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
  .takeaway li{ display:flex; gap:12px; padding:9px 0; font-size:15.5px; color:#f4ede6; }
  .takeaway li svg{ width:17px; height:17px; color:var(--gold-2); flex:none; margin-top:4px; }

  /* disclaimer */
  .disc{ width:min(var(--measure),92vw); margin:30px auto 0; font-size:12.5px; color:var(--mauve); line-height:1.6; font-style:italic; padding:16px 18px; border:1px dashed rgba(212,134,180,.25); border-radius:12px; }

  /* product cta */
  .prod-cta{ padding:30px 0 90px; }
  .pc-card{ position:relative; width:min(1000px,94vw); margin:0 auto; border-radius:22px; overflow:hidden; border:1px solid rgba(212,134,180,.3); background:linear-gradient(150deg,#140e24,#0d0919); padding:50px 46px; display:grid; grid-template-columns:1.3fr .7fr; gap:36px; align-items:center; }
  .pc-card .stars{ position:absolute; inset:0; z-index:0; }
  .pc-card > *{ position:relative; z-index:1; }
  .pc-card .tag{ font-family:var(--font-body); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:9px; margin-bottom:12px; }
  .pc-card .tag svg{ width:14px; height:14px; }
  .pc-card h2{ font-family:var(--font-display); font-weight:300; font-size:clamp(26px,3.2vw,40px); line-height:1.06; }
  .pc-card h2 em{ font-style:normal; font-family:var(--font-script); color:var(--gold-2); }
  .pc-card p{ color:var(--cream-dim); font-size:15px; line-height:1.7; margin:14px 0 24px; max-width:42ch; }
  .pc-fig{ aspect-ratio:3/4; position:relative; border-radius:16px; overflow:hidden; border:1px solid rgba(212,134,180,.35); }
  .pc-fig img{ width:100%; height:100%; object-fit:cover; }

  /* author box */
  .author{ width:min(var(--measure),92vw); margin:0 auto 70px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:rgba(255,255,255,.02); padding:30px 32px; display:flex; gap:22px; align-items:center; }
  .author .ava{ width:72px; height:72px; flex:none; border-radius:50%; background:linear-gradient(135deg,#2a2150,#140e24); border:1px solid rgba(212,134,180,.5); display:grid; place-items:center; font-family:var(--font-display); font-size:28px; color:var(--gold-2); }
  .author .who2 .role{ font-family:var(--font-body); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
  .author .who2 h4{ font-family:var(--font-display); font-weight:500; font-size:22px; margin:3px 0 7px; }
  .author .who2 p{ font-size:13.5px; color:var(--cream-dim); line-height:1.6; }

  /* related */
  .related{ padding:60px 0 90px; border-top:1px solid rgba(212,134,180,.16); }
  .related h3{ font-family:var(--font-display); font-weight:300; font-size:clamp(24px,3vw,38px); text-align:center; margin-bottom:36px; }
  .related h3 em{ font-style:normal; font-family:var(--font-script); color:var(--gold-2); }
  .rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .rc{ border:1px solid rgba(255,255,255,.1); border-radius:16px; overflow:hidden; background:rgba(255,255,255,.02); display:flex; flex-direction:column; transition:.4s cubic-bezier(.16,.7,.3,1); }
  .rc:hover{ transform:translateY(-6px); border-color:rgba(212,134,180,.45); box-shadow:0 26px 50px -28px #000; }
  .rc .rp{ aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.08); }
  .rc .rp img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.16,.7,.3,1); }
  .rc:hover .rp img{ transform:scale(1.06); }
  .rc .rb{ padding:18px 20px 20px; }
  .rc .rcat{ font-family:var(--font-body); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--sage); }
  .rc h4{ font-family:var(--font-display); font-weight:400; font-size:19px; line-height:1.2; margin-top:6px; }

  /* footer */
  footer.site{ background:linear-gradient(180deg,var(--night-1),var(--night-0)); border-top:1px solid rgba(212,134,180,.18); padding:54px 0 30px; }
  .foot-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:36px; align-items:start; }
  .foot-brand .logo-card{ width:130px; aspect-ratio:1; display:grid; place-items:center; margin-bottom:4px; }
  .foot-brand .logo-card img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 18px rgba(246,207,226,.22)); }
  .foot-brand p{ color:var(--cream-dim); font-size:13.5px; line-height:1.7; max-width:36ch; }
  .foot-brand .social{ margin-top:14px; display:flex; gap:10px; }
  .foot-brand .social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(212,134,180,.3); display:grid; place-items:center; color:var(--cream-dim); transition:.3s; }
  .foot-brand .social a:hover{ color:var(--gold-2); border-color:var(--gold-2); transform:translateY(-2px); }
  .foot-brand .social svg{ width:17px; height:17px; }
  footer.site h5{ font-family:var(--font-body); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
  footer.site ul li{ margin-bottom:10px; }
  footer.site ul a{ color:var(--cream-dim); font-size:13.5px; transition:color .25s; } footer.site ul a:hover{ color:var(--cream); }
  .legal{ margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); }
  .legal .ent{ font-size:12.5px; color:var(--cream-dim); line-height:1.8; } .legal .ent b{ color:var(--cream); }
  .legal .disclaimer{ margin-top:10px; font-size:11.5px; color:var(--mauve); line-height:1.6; }

  /* whatsapp float */
  .wa-float{ position:fixed; right:22px; bottom:22px; z-index:250; width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,#3ce678,#1faa4f); display:grid; place-items:center; color:#fff; box-shadow:0 14px 34px -10px rgba(37,211,102,.7), 0 4px 14px -4px rgba(0,0,0,.5); animation:waPulse 3.4s ease-in-out 1.5s infinite; }
  .wa-float:hover{ box-shadow:0 18px 44px -10px rgba(37,211,102,.9); }
  .wa-float svg{ width:30px; height:30px; }
  @keyframes waPulse{ 0%,100%{ box-shadow:0 14px 34px -10px rgba(37,211,102,.7), 0 0 0 0 rgba(60,230,120,.5) } 50%{ box-shadow:0 14px 34px -10px rgba(37,211,102,.7), 0 0 0 12px rgba(60,230,120,0) } }

  @media(max-width:860px){
    nav.main{ display:none; }
    .plants{ grid-template-columns:1fr; }
    .pc-card{ grid-template-columns:1fr; } .pc-fig{ max-width:300px; }
    .rel-grid{ grid-template-columns:1fr; }
    .foot-top{ grid-template-columns:1fr 1fr; } .foot-brand{ grid-column:1/-1; }
  }
  @media (prefers-reduced-motion: reduce){ .wa-float{ animation:none; } }