/* Mind Clarity — Apple-like premium landing (Cloudflare Pages) */

/* Anti-overflow safety */
html, body { width: 100%; overflow-x: clip; }
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 12px; }

:root{
  /* Base tokens (light) */
  --bg: #f3f6fb;
  --surface: rgba(255,255,255,.72);
  --surface2: rgba(255,255,255,.55);
  --text: #0b0f19;
  --muted: rgba(11,15,25,.72);
  --border: rgba(11,15,25,.14);
  --shadow: 0 16px 45px rgba(11,15,25,.10);

  /* Accents from official label-ish */
  --a1:#62B9DC;
  --a2:#1F7DAF;
  --a3:#9DD5E5;

  /* Modern pastels */
  --p1:#BDA7FF;
  --p2:#B7F5E2;
  --p3:#FFD8C6;

  /* Gradients */
  --g1: radial-gradient(1200px 700px at 15% 10%, rgba(98,185,220,.45), transparent 55%),
        radial-gradient(900px 600px at 85% 15%, rgba(189,167,255,.35), transparent 55%),
        radial-gradient(900px 700px at 60% 90%, rgba(183,245,226,.30), transparent 60%),
        radial-gradient(800px 600px at 10% 85%, rgba(255,216,198,.26), transparent 60%);
  --g2: linear-gradient(135deg, rgba(98,185,220,.12), rgba(31,125,175,.10), rgba(189,167,255,.10));
  --ctaGrad: linear-gradient(135deg, var(--a2), var(--a1), var(--p1));

  --radius: 22px;
  --radius-sm: 16px;

  --container: 1120px;
  --pad: clamp(16px, 4vw, 28px);

  --focus: rgba(31,125,175,.92);
  --dur: 360ms;
  --ease: cubic-bezier(.2,.9,.2,1);
}

html.theme-dark{
  --bg:#0b0f19;
  --surface: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.04);
  --text:#eef3ff;
  --muted: rgba(238,243,255,.76);
  --border: rgba(238,243,255,.16);
  --shadow: 0 22px 60px rgba(0,0,0,.40);
  --focus: rgba(157,213,229,.95);

  --g1: radial-gradient(1100px 700px at 18% 12%, rgba(98,185,220,.23), transparent 55%),
        radial-gradient(900px 650px at 82% 16%, rgba(189,167,255,.20), transparent 55%),
        radial-gradient(900px 700px at 60% 90%, rgba(183,245,226,.13), transparent 60%),
        radial-gradient(800px 600px at 12% 85%, rgba(255,216,198,.11), transparent 60%);
  --g2: linear-gradient(135deg, rgba(98,185,220,.10), rgba(31,125,175,.07), rgba(189,167,255,.08));
  --ctaGrad: linear-gradient(135deg, var(--a1), var(--a2), var(--p1));
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur: 1ms; }
  *{ scroll-behavior: auto !important; }
}

body{
  margin:0;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg);
  line-height: 1.55;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: var(--g1), var(--g2);
  pointer-events:none;
  z-index: -2;
}

/* subtle noise */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: -1;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

a{ color: inherit; text-underline-offset: 3px; }
.skip{
  position:absolute; left:-999px; top:0;
  padding:10px 12px; border-radius: 12px;
  background: var(--surface); border:1px solid var(--border);
}
.skip:focus{ left: 12px; top: 12px; z-index: 2000; }

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section{
  padding-top: 30px;
  padding-bottom: 30px;
}

.section--full{ min-height: 100svh; }
.section--full > .container{ width: 100%; }

.h1{ font-size: clamp(30px, 3.4vw, 52px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 10px; }
.h2{ font-size: clamp(22px, 2.4vw, 32px); margin: 0 0 10px; letter-spacing: -.015em; }
.h3{ font-size: 18px; margin: 0 0 8px; }
.lead{ font-size: 16px; color: var(--muted); margin: 0 0 16px; max-width: 60ch; }
.tiny{ font-size: 12px; }
.fineprint{ font-size: 12px; color: var(--muted); margin: 14px 0 0; }
.muted{ color: var(--muted); }

.grid{ display:grid; gap: 14px; }
.grid--3{ grid-template-columns: 1fr; }
.grid--2{ grid-template-columns: 1fr; }
@media (min-width: 900px){
  .grid--3{ grid-template-columns: repeat(3, 1fr); }
  .grid--2{ grid-template-columns: repeat(2, 1fr); }
}

/* Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 500;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--border);
}

.progress{ height: 2px; background: transparent; }
.progress__bar{ height: 2px; width: 0%; background: var(--ctaGrad); }

.header__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand{
  display:flex; align-items:center; gap: 10px;
  text-decoration:none;
}
.brand__mark{
  width: 34px; height: 34px; border-radius: 14px;
  background: var(--ctaGrad);
  box-shadow: 0 10px 24px rgba(31,125,175,.25);
  position: relative;
  overflow: hidden;
}
.brand__mark::after{
  content:"";
  position:absolute; inset:-20%;
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.75), transparent 55%);
  opacity:.55;
}
.brand__text{ display:flex; flex-direction:column; }
.brand__name{ font-weight: 780; letter-spacing: -.02em; font-size: 14px; }
.brand__sub{ font-size: 12px; color: var(--muted); margin-top: -2px; }

.nav{ display:flex; gap: 14px; align-items:center; }
.nav__link{
  text-decoration:none;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 999px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link:hover{ background: color-mix(in srgb, var(--surface) 90%, transparent); }
.nav__link--cta{ margin-top: 6px; }

.nav--desktop{ display:none; }
@media (min-width: 900px){
  .nav--desktop{ display:flex; }
}

.header__actions{ display:flex; align-items:center; gap: 8px; }
.iconbtn{
  width: 42px; height: 42px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
  display:grid; place-items:center;
  cursor:pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
  color: var(--text);
}
.iconbtn:hover{ transform: translateY(-1px); background: color-mix(in srgb, var(--surface) 84%, white 16%); }
.iconbtn__icon{ font-size: 16px; }

.btn{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 18px;
  text-decoration:none;
  font-weight: 700;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.btn--primary{
  background: var(--ctaGrad);
  color: white;
}
.btn--primary::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 17px;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.35), transparent 55%);
  opacity: .9;
  pointer-events:none;
}
.btn--ghost{
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  box-shadow: none;
}
.btn--sm{ padding: 10px 14px; border-radius: 16px; font-size: 13px; }
.btn:hover{ transform: translateY(-2px); }
.btn--primary:hover{ box-shadow: 0 18px 46px rgba(31,125,175,.22); }
.btn--ghost:hover{ background: color-mix(in srgb, var(--surface) 84%, white 16%); }

.header__cta{ display:none; }
@media (min-width: 900px){
  .header__cta{ display:inline-flex; }
}

/* Language popover */
.lang{ position: relative; }
.lang__popover{
  position:absolute;
  top: 52px;
  right: 0;
  width: 220px;
  padding: 10px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.lang__title{
  font-size: 12px;
  color: var(--muted);
  margin: 2px 4px 10px;
}
.lang__list{ display:flex; flex-direction:column; gap: 6px; }
.lang__item{
  text-decoration:none;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
}
.lang__item:hover{ border-color: var(--border); background: color-mix(in srgb, var(--surface) 90%, transparent); }

/* Burger — mobile only */
.burger{ display:grid; }
@media (min-width: 900px){
  .burger{ display:none; }
}
.burger__lines{
  width: 18px; height: 12px; position: relative;
}
.burger__lines::before,
.burger__lines::after{
  content:"";
  position:absolute; left:0; right:0; height:2px;
  background: var(--text);
  border-radius: 999px;
  opacity: .9;
}
.burger__lines::before{ top: 2px; }
.burger__lines::after{ bottom: 2px; }

/* Mobile dialog */
.mobile-dialog{
  border: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  background: transparent;
}
.mobile-dialog::backdrop{
  background: rgba(0,0,0,.55);
}
.mobile-dialog__inner{
  position: fixed;
  inset: 0;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, rgba(0,0,0,.2));
  display:flex;
  flex-direction:column;
  gap: 14px;
  z-index: 1500;
}
.mobile-dialog__top{
  display:flex; align-items:center; justify-content:space-between;
}
.mobile-dialog__brand{ font-weight: 800; letter-spacing: -.02em; }
.nav--mobile{ flex-direction: column; align-items: stretch; gap: 8px; }
.nav--mobile .nav__link{
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.mobile-dialog__meta{
  margin-top: auto;
  display:flex;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  justify-content:center;
}
.tinylink{ color: inherit; }
.dot{ opacity:.7; }

/* Hero */
.hero{ padding-top: 18px; }
.hero__grid{
  display:grid;
  gap: 14px;
  align-items:center;
}
.hero__content{ text-align: center; }
.hero__ctas{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; justify-content: center; }
.bullets{ margin: 0; padding-left: 18px; color: var(--text); opacity: .9; }
.bullets li{ margin: 6px 0; }
.trust{ margin: 14px 0 0; color: var(--muted); }

.hero__visual{ display:grid; place-items:center; }
.glass{
  width: min(520px, 100%);
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface2) 88%, transparent));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.glass::before{
  content:"";
  position:absolute;
  inset: -30% -20% auto -30%;
  height: 55%;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,.45), transparent 60%);
  opacity: .65;
}
.hero__media{ margin: 0 auto; }
.hero__media img{ margin-inline: auto; object-fit: contain; }

@media (min-width: 900px){
  .hero__grid{ grid-template-columns: 1.05fr .95fr; gap: 22px; }
  .hero__content{ text-align: left; }
  .hero__ctas{ justify-content: flex-start; }
}

@media (max-width: 899px){
  .section--full{ align-items: flex-start; }
}

/* Cards */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  align-items: stretch;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover{ transform: translateY(-3px); border-color: color-mix(in srgb, var(--a3) 45%, var(--border)); box-shadow: 0 22px 56px rgba(0,0,0,.12); }
.card__h{ margin:0; font-size: 16px; letter-spacing: -.01em; }
.card__p{ margin:0; color: var(--muted); font-size: 13px; }

/* Experience */
.exp{
  margin-top: 16px;
  display:grid;
  gap: 14px;
}
.exp__media{
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px;
  box-shadow: var(--shadow);
}
.exp__stack{ position: relative; min-height: 250px; display:grid; place-items:center; overflow:hidden; border-radius: 18px; }
.exp__img{ position:absolute; inset: 0; display:grid; place-items:center; opacity:0; transition: opacity var(--dur) var(--ease); }
.exp__img.is-active{ opacity: 1; }
.exp__img img{ object-fit: contain; }
.exp__steps{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap: 10px; }
.exp__step{
  padding: 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  outline: none;
}
.exp__step.is-active{
  border-color: color-mix(in srgb, var(--a1) 55%, var(--border));
  transform: translateY(-1px);
}
.exp__kicker{ font-size: 12px; color: var(--muted); font-weight: 700; }
.exp__h{ margin: 4px 0 6px; font-size: 16px; letter-spacing: -.01em; }
.exp__p{ margin: 0; color: var(--muted); font-size: 13px; }

@media (min-width: 900px){
  .exp{ grid-template-columns: .95fr 1.05fr; align-items:start; }
  .exp__media{ position: sticky; top: 92px; }
}

/* Steps */
.steps{ display:grid; gap: 10px; margin-top: 14px; }
.step{
  display:flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}
.step__num{
  width: 34px; height: 34px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--a3) 35%, var(--surface));
  border: 1px solid var(--border);
  display:grid; place-items:center;
  font-weight: 800;
}
.step__h{ margin: 0 0 4px; font-size: 15px; }
.step__p{ margin: 0; color: var(--muted); font-size: 13px; }

/* Ingredients */
.ing{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  display:flex;
  flex-direction:column;
  align-items: stretch;
  gap: 10px;
  transition: transform var(--dur) var(--ease);
}
.ing:hover{ transform: translateY(-2px); }
.ing__media{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
}
.ing__media img{ width: 100%; height: 220px; object-fit: cover; }
.ing__h{ margin: 0; font-size: 15px; letter-spacing: -.01em; }
.ing__p{ margin: 0; color: var(--muted); font-size: 13px; }

.labelbox{
  margin-top: 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px;
  box-shadow: var(--shadow);
}
.labelbox__list{ margin: 0; padding-left: 18px; color: var(--muted); }

/* Pricing */
.plans{ align-items: stretch; }
.plan{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display:flex;
  flex-direction:column;
  align-items: stretch;
  gap: 10px;
  position: relative;
  overflow:hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.plan:hover{ transform: translateY(-3px); border-color: color-mix(in srgb, var(--a1) 45%, var(--border)); }
.plan__badge{
  position:absolute;
  top: 12px; right: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 800;
}
html.theme-dark .plan__badge{ background: rgba(255,255,255,.08); }

.plan__top{ display:flex; align-items:baseline; justify-content:space-between; gap: 10px; }
.plan__h{ margin:0; font-size: 17px; letter-spacing: -.01em; }
.plan__meta{ font-size: 12px; color: var(--muted); font-weight: 700; }

.plan__media{
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
  border: 1px solid var(--border);
  padding: 10px;
  display:grid;
  place-items:center;
}
.plan__media img{ object-fit: contain; margin-inline:auto; }

.plan__price{ display:grid; gap: 2px; }
.plan__was{ font-size: 12px; color: var(--muted); text-decoration: line-through; }
.plan__now{ font-size: 28px; font-weight: 900; letter-spacing: -.02em; }
.plan__per{ font-size: 12px; color: var(--muted); }

.plan__bullets{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
}
.plan__cta{
  margin-top: auto; /* critical alignment */
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.plan__cta .btn{ width: 100%; }
.plan__note{ font-size: 12px; color: var(--muted); text-align: center; }

/* Guarantee */
.guarantee{ }
.guarantee__grid{
  display:grid;
  gap: 14px;
  align-items:center;
}
.guarantee__cta{ display:flex; flex-direction:column; align-items:flex-start; gap: 10px; margin-top: 12px; }
.guarantee__seal{ display:grid; place-items:center; }
.seal img{ margin-inline: auto; object-fit: contain; }

@media (min-width: 900px){
  .guarantee__grid{ grid-template-columns: 1.05fr .95fr; }
}

/* FAQ */
.faqgrid{ display:grid; gap: 10px; margin-top: 14px; }
.faq{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
}
.faq__q{
  cursor:pointer;
  font-weight: 800;
  list-style:none;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__a{ margin-top: 8px; color: var(--muted); }

/* Footer */
.site-footer{
  border-top: 1px solid var(--border);
  padding-top: 22px;
  padding-bottom: 22px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
}
.footer__grid{ display:flex; flex-direction:column; gap: 14px; }
.footer__name{ font-weight: 900; letter-spacing: -.02em; }
.footer__links{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.footer__col{ display:flex; flex-direction:column; gap: 8px; }
.footer__h{ font-size: 12px; color: var(--muted); font-weight: 800; }
.footer__col a{ color: var(--muted); text-decoration:none; }
.footer__col a:hover{ color: var(--text); text-decoration: underline; }
.footer__bottom{ margin-top: 14px; }

@media (min-width: 900px){
  .footer__grid{ flex-direction:row; justify-content:space-between; align-items:flex-start; }
  .footer__links{ width: 420px; }
}

/* Mobile floating CTA (mobile only) */
.float-cta{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 480; /* below dialog, above content */
  display:flex;
  justify-content:center;
}
.float-cta__inner{
  max-width: var(--container);
  width: 100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg) 72%, rgba(0,0,0,.15));
  border: 1px solid var(--border);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.float-cta__label{ font-weight: 900; letter-spacing: -.02em; }
@media (min-width: 900px){
  .float-cta{ display:none; }
}

/* Reveal motion */
[data-reveal]{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: transform, opacity;
}
.is-revealed{
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Legal page */
.legal .h1{ margin-top: 0; }