/* ==========================================================================
   MemoHoney — style.css
   Core tokens, base typography, layout primitives, header, hero, footer
   ========================================================================== */

:root{
  /* Brand palette */
  --gold:#C9A227;
  --gold-deep:#A8851C;
  --gold-soft:#E8D48A;
  --gold-wash:#F7EFD6;
  --navy:#1F2937;
  --ink:#111827;
  --muted:#5B6472;
  --muted-2:#7A828E;
  --white:#FFFFFF;
  --cream:#FDF9EF;
  --cream-2:#FBF4E4;
  --green:#166534;
  --green-deep:#0F4A25;
  --line:#EAE3D2;
  --line-2:#E5E7EB;

  /* Type */
  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --fs-eyebrow:.78rem;
  --fs-small:.875rem;
  --fs-body:1.0625rem;
  --fs-lead:clamp(1.06rem,.98rem + .38vw,1.24rem);
  --fs-h3:clamp(1.18rem,1.08rem + .42vw,1.38rem);
  --fs-h2:clamp(1.72rem,1.36rem + 1.5vw,2.62rem);
  --fs-h1:clamp(2.05rem,1.5rem + 2.5vw,3.5rem);

  /* Space */
  --container:1160px;
  --container-narrow:820px;
  --gutter:clamp(18px,4vw,32px);
  --section-y:clamp(56px,7vw,102px);
  --radius:14px;
  --radius-lg:20px;

  --shadow-sm:0 1px 2px rgba(31,41,55,.06),0 2px 8px rgba(31,41,55,.05);
  --shadow-md:0 4px 10px rgba(31,41,55,.06),0 14px 34px rgba(31,41,55,.08);
  --shadow-lg:0 10px 24px rgba(31,41,55,.08),0 28px 60px rgba(31,41,55,.12);

  --hex:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}

/* --- Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.68;
  color:var(--navy);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
ul,ol{padding-left:1.15em}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;border-radius:4px}

/* --- Typography -------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);margin:0 0 .6em;font-weight:700;letter-spacing:-.012em}
h1{font-size:var(--fs-h1);line-height:1.1}
h2{font-size:var(--fs-h2);line-height:1.18}
h3{font-size:var(--fs-h3);line-height:1.3;font-weight:600}
h4{font-size:1.05rem;line-height:1.35;font-weight:600}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--ink)}
.lead{font-size:var(--fs-lead);color:var(--muted);line-height:1.62}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);
  margin:0 0 .95rem;
}
.eyebrow::before{
  content:"";width:11px;height:12px;background:var(--gold);
  clip-path:var(--hex);flex:none;
}
.section-head{max-width:760px;margin:0 auto clamp(34px,4.5vw,56px);text-align:center}
.section-head p{color:var(--muted);font-size:var(--fs-lead)}
.section-head--left{margin-left:0;text-align:left}

/* --- Layout ------------------------------------------------------------ */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:var(--container-narrow)}
.section{padding-block:var(--section-y)}
.section--cream{background:var(--cream);border-block:1px solid var(--line)}
.section--tight{padding-block:clamp(38px,4.6vw,64px)}
.grid{display:grid;gap:clamp(18px,2.2vw,28px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.split--reverse .split__media{order:2}
.center{text-align:center}
.mt-lg{margin-top:clamp(28px,3.4vw,44px)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* Honeycomb texture used on cream panels */
.honeycomb{position:relative;isolation:isolate}
.honeycomb::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23C9A227' stroke-opacity='.17' stroke-width='1'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31z'/%3E%3Cpath d='M28 49.5 55 65v31L28 111.5 1 96V65z'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- Buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1.2;
  padding:.95em 1.7em;border-radius:999px;border:1.5px solid transparent;
  text-align:center;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--gold);color:var(--ink);box-shadow:0 6px 18px rgba(201,162,39,.32)}
.btn--primary:hover{background:var(--gold-soft);box-shadow:0 10px 26px rgba(201,162,39,.4)}
.btn--green{background:var(--green);color:#fff;box-shadow:0 6px 18px rgba(22,101,52,.26)}
.btn--green:hover{background:var(--green-deep);color:#fff}
.btn--ghost{background:transparent;color:var(--navy);border-color:#D8CFB8}
.btn--ghost:hover{border-color:var(--gold);background:var(--gold-wash)}
.btn--lg{font-size:1.075rem;padding:1.1em 2.3em}
.btn--block{display:flex;width:100%}
.btn__note{display:block;font-size:var(--fs-small);color:var(--muted);margin-top:.8rem}

/* --- Ticker bar -------------------------------------------------------- */
.ticker{background:var(--navy);color:#F3F0E6;font-size:.82rem;letter-spacing:.02em;overflow:hidden}
.ticker__track{display:flex;align-items:center;justify-content:center;gap:2.2rem;padding:.62rem var(--gutter);flex-wrap:wrap}
.ticker__item{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap}
.ticker__item::before{content:"";width:8px;height:9px;background:var(--gold);clip-path:var(--hex);flex:none}

/* --- Header / nav ------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease;
}
.site-header.is-stuck{box-shadow:0 6px 22px rgba(31,41,55,.08)}
.nav{display:flex;align-items:center;gap:1.4rem;min-height:70px}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--ink);letter-spacing:-.02em;flex:none}
.brand:hover{text-decoration:none}
.brand__mark{width:26px;height:29px;background:linear-gradient(150deg,var(--gold-soft),var(--gold-deep));clip-path:var(--hex);flex:none}
.brand em{font-style:normal;color:var(--gold-deep)}
.nav__list{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0;margin-left:auto}
.nav__list a{
  display:block;padding:.5rem .68rem;border-radius:8px;font-size:.925rem;font-weight:500;color:var(--navy);
}
.nav__list a:hover{background:var(--gold-wash);color:var(--ink);text-decoration:none}
.nav__list a[aria-current="page"]{color:var(--gold-deep);font-weight:600}
.nav__cta{flex:none}
.nav__cta .btn{padding:.66em 1.25em;font-size:.92rem}
.nav__toggle{
  display:none;margin-left:auto;background:transparent;border:1px solid var(--line);
  border-radius:10px;width:44px;height:42px;align-items:center;justify-content:center;
}
.nav__toggle span{display:block;width:19px;height:2px;background:var(--navy);position:relative;transition:background .2s}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--navy);transition:transform .22s ease}
.nav__toggle span::before{top:-6px}
.nav__toggle span::after{top:6px}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* --- Hero -------------------------------------------------------------- */
.hero{position:relative;background:linear-gradient(180deg,var(--cream) 0%,#fff 78%);overflow:hidden;border-bottom:1px solid var(--line)}
.hero__inner{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(26px,4vw,60px);align-items:center;padding-block:clamp(44px,6vw,88px)}
.hero h1{margin-bottom:.5em}
.hero h1 em{font-style:italic;color:var(--gold-deep)}
.hero__sub{font-size:var(--fs-lead);color:var(--muted);max-width:34em;margin-bottom:1.5rem}
.hero__chips{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0 0 1.8rem;padding:0}
.hero__chips li{
  display:inline-flex;align-items:center;gap:.45em;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.42rem .95rem;font-size:.855rem;font-weight:500;color:var(--navy);box-shadow:var(--shadow-sm);
}
.hero__chips li::before{content:"";width:9px;height:10px;background:var(--gold);clip-path:var(--hex);flex:none}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.hero__media{position:relative}
.hero__media img{
  width:100%;max-width:520px;margin-inline:auto;border-radius:var(--radius-lg);
  filter:drop-shadow(0 26px 44px rgba(31,41,55,.16));
}
.hero__seal{
  position:absolute;right:2%;bottom:4%;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:.7rem 1rem;box-shadow:var(--shadow-md);font-size:.8rem;line-height:1.35;max-width:180px;
}
.hero__seal strong{display:block;font-family:var(--font-display);font-size:1rem;color:var(--gold-deep)}

/* --- Footer ------------------------------------------------------------ */
.site-footer{background:var(--navy);color:#C7CDD6;padding-block:clamp(44px,5.5vw,72px) 0;font-size:.925rem}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3.4vw,48px)}
.footer__brand .brand{color:#fff;margin-bottom:.9rem}
.footer__brand img{width:120px;height:auto;margin-bottom:1rem;border-radius:10px}
.footer__brand p{color:#A9B2BE;font-size:.9rem;max-width:34ch}
.site-footer h4{color:#fff;font-family:var(--font-body);font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:1rem}
.footer__list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer__list a{color:#C7CDD6;font-size:.9rem}
.footer__list a:hover{color:var(--gold-soft)}
.footer__disclaimer{
  margin-top:clamp(32px,4vw,52px);padding:1.5rem;border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);background:rgba(255,255,255,.04);
}
.footer__disclaimer p{font-size:.83rem;line-height:1.6;color:#A9B2BE}
.footer__disclaimer p:first-child{color:#DDE2E8}
.footer__bar{
  margin-top:2rem;border-top:1px solid rgba(255,255,255,.13);padding-block:1.3rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:.84rem;color:#98A2B0;
}
.footer__bar a{color:#98A2B0}
.footer__pay img{width:120px;height:21px;opacity:.85}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}