/* ============================================================
   Minua landing page — marketing layer (brand palette).
   Phone-UI styles live in shared/minua-app.css.
   ============================================================ */
:root{
  --bg:#eef6f1; --bg2:#e7f1ec; --ink:#16241d; --ink2:#2a3b33;
  --green:#1f8a5b; --greenD:#176e48; --greenSoft:#def0e6;
  --orange:#d97757; --orangeD:#c2613f; --mint:#dcebe3;
  --muted:#6a7e74; --muted2:#90a298; --line:#dbe8e1;
  --card:#fff; --shadow:0 18px 50px -24px rgba(20,60,40,.30);
  --shadow-sm:0 6px 22px -10px rgba(20,60,40,.22);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Hanken Grotesk',sans-serif; -webkit-font-smoothing:antialiased;
  line-height:1.5; overflow-x:hidden;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
a{color:inherit; text-decoration:none}

.kicker{font-weight:800; font-size:13px; letter-spacing:2.4px; color:var(--green); text-transform:uppercase}
.display{font-weight:800; letter-spacing:-1.6px; line-height:1.04; color:var(--ink);
  font-size:clamp(34px,5.4vw,62px); margin:0}
.h2{font-weight:800; letter-spacing:-1px; font-size:clamp(28px,4vw,46px); margin:.3em 0 0; color:var(--ink)}
.lead{font-size:clamp(16px,1.5vw,20px); color:var(--ink2); max-width:46ch; margin:14px 0 0}
.section-sub{font-size:clamp(16px,1.6vw,19px); color:var(--muted); max-width:58ch; margin:16px 0 0; line-height:1.55}
.section-head{margin-bottom:38px}

/* ---------- NAV ---------- */
.nav-bar{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(12px);
  background:rgba(238,246,241,.82); border-bottom:1px solid rgba(219,232,225,.7)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:10px}
.brand-logo{width:30px; height:30px; border-radius:9px; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px}
.brand-name{font-weight:800; font-size:21px; letter-spacing:-.4px}
.nav-right{display:flex; align-items:center; gap:22px}
.nav-link{font-weight:600; font-size:14.5px; color:var(--muted); transition:color .2s}
.nav-link:hover{color:var(--ink)}
.lang-toggle{display:flex; background:#dde9e2; border-radius:999px; padding:3px}
.lang-toggle button{border:0; background:transparent; cursor:pointer; font-family:inherit;
  font-weight:800; font-size:13px; color:var(--muted); padding:6px 14px; border-radius:999px; transition:all .2s}
.lang-toggle button.on{background:var(--ink); color:#fff}
@media(max-width:680px){.nav-link{display:none}}

/* ---------- HERO ---------- */
/* flat bg matches the phone video's baked background → the device looks embedded */
.hero{padding:clamp(40px,6vw,76px) 0 clamp(36px,5vw,64px); background:var(--bg)}
.hero-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center}
.hero-copy .kicker{margin-bottom:16px; display:block}
.waitlist{display:flex; gap:10px; margin-top:26px; max-width:440px}
.waitlist input{flex:1; min-width:0; border:2px solid var(--line); background:#fff; border-radius:14px;
  padding:15px 16px; font-family:inherit; font-size:15px; font-weight:600; color:var(--ink)}
.waitlist input::placeholder{color:#aebfb6}
.waitlist input:focus{outline:none; border-color:var(--green)}
.waitlist button{border:0; cursor:pointer; font-family:inherit; font-weight:800; font-size:15px; color:#fff;
  background:var(--orange); border-radius:14px; padding:0 24px; box-shadow:0 12px 26px -8px rgba(217,119,87,.6); transition:transform .15s, background .2s}
.waitlist button:hover{background:var(--orangeD); transform:translateY(-1px)}
.waitlist.big{margin:26px auto 0}
.form-note{font-size:13px; color:var(--muted2); margin-top:12px}
.join-ok{margin-top:14px; font-weight:700; color:var(--greenD); font-size:14.5px}

/* the phone sits directly on the page — no frame; a soft edge feather hides any
   seam between the video's flat bg and the page's flat bg */
.hero-device{display:flex; justify-content:center; align-items:center}
.hero-phone-vid{display:block; width:100%; max-width:420px; height:auto;
  -webkit-mask-image:radial-gradient(135% 128% at 50% 46%, #000 80%, transparent 100%);
  mask-image:radial-gradient(135% 128% at 50% 46%, #000 80%, transparent 100%)}
@media(max-width:860px){.hero-inner{grid-template-columns:1fr; gap:18px}
  .hero-phone-vid{max-width:340px}}

/* ---------- BANDS ---------- */
.band{padding:clamp(56px,8vw,104px) 0}
.band.alt{background:linear-gradient(180deg,#e9f3ee,#e3efe9)}

/* ---------- 2 · PERSONAS ---------- */
.persona-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.persona-card{background:var(--card); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-sm);
  border:1px solid rgba(255,255,255,.7)}
.pc-video{background:#dceae2}
.pc-video video{display:block; width:100%; aspect-ratio:4/5; object-fit:cover}
.pc-foot{padding:18px 20px 22px}
.pc-quote{font-size:15.5px; color:var(--ink2); line-height:1.45; font-weight:500}
.pc-attr{font-weight:700; color:var(--muted2); font-size:13.5px; margin-top:10px}
/* small avatar still used in problems/solution sections */
.pc-avatar{width:42px; height:42px; border-radius:13px; color:#fff; font-weight:800; font-size:18px;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.pc-avatar.sm{width:38px; height:38px; border-radius:11px; font-size:16px}
@media(max-width:860px){.persona-grid{grid-template-columns:1fr; max-width:420px; margin:0 auto}}

/* ---------- 3 · PROBLEMS ---------- */
.problem-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.problem-col{background:var(--card); border-radius:22px; padding:22px; box-shadow:var(--shadow-sm)}
.pcol-head{display:flex; align-items:center; gap:12px; padding-bottom:16px; margin-bottom:6px; border-bottom:1px solid var(--line)}
.pcol-name{font-weight:800; font-size:18px}
.pcol-role{font-weight:600; color:var(--muted2); font-size:13.5px}
.field-row{display:grid; grid-template-columns:26px auto; grid-template-rows:auto auto; column-gap:10px; padding:11px 0; border-bottom:1px dashed #e6efe9}
.field-row:last-child{border-bottom:0}
.fr-ic{grid-row:1/3; font-size:18px; line-height:1}
.fr-label{font-weight:800; font-size:11.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--green)}
.fr-val{font-size:14.5px; color:var(--ink2); margin-top:2px}
@media(max-width:860px){.problem-grid{grid-template-columns:1fr}}

/* ---------- 4 · SOLUTION ---------- */
.solution-list{display:flex; flex-direction:column; gap:26px}
.sol-block{background:var(--card); border-radius:24px; padding:24px; box-shadow:var(--shadow-sm)}
.sol-who{display:flex; align-items:center; gap:12px; font-weight:800; font-size:19px; margin-bottom:18px}
.sol-items{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.sol-card{position:relative; border:1px solid var(--line); border-radius:18px; padding:18px 18px 16px; background:#fafdfb; overflow:hidden}
.sol-title{font-weight:800; font-size:16px; margin-bottom:14px}
.sol-flow{display:grid; grid-template-columns:1fr 26px 1fr; align-items:center; gap:8px}
.sol-before,.sol-after{font-size:13.5px; line-height:1.34; border-radius:12px; padding:11px 12px}
.sol-before{background:#f1f0ee; color:#8a8278; text-decoration:line-through; text-decoration-color:#cfc7ba}
.sol-after{background:var(--greenSoft); color:var(--greenD); font-weight:600}
.ba-tag{display:block; font-weight:800; font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:#b1a596; margin-bottom:3px; text-decoration:none}
.ba-tag.on{color:var(--green)}
.sol-arrow{text-align:center; font-weight:800; color:var(--orange); font-size:20px}
.sol-motif{margin-top:14px; display:flex; align-items:center; gap:10px; min-height:34px}
.motif-pill{display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:7px 13px; font-size:12.5px; font-weight:700; color:var(--ink)}
.motif-pill.timer{background:#ecf7f1; border-color:#bfe3d1; color:var(--greenD); font-variant-numeric:tabular-nums}
.motif-pill.green{background:var(--greenSoft); border-color:#bfe3d1; color:var(--greenD)}
.motif-pill.amber{background:#fbf0d6; border-color:#f0dcb4; color:#b07b16}
.motif-code{font-weight:800; letter-spacing:7px; color:var(--ink); background:#f2f7f4; border:2px dashed #c8dad1; border-radius:12px; padding:9px 14px; font-size:15px}
.sol-motif .ring .pct{font-size:13px}
@media(max-width:760px){.sol-items{grid-template-columns:1fr}}

/* ---------- 5 · COMPARE ---------- */
.compare-scroll{overflow-x:auto; border-radius:20px; box-shadow:var(--shadow-sm)}
.compare{width:100%; border-collapse:collapse; background:#fff; min-width:680px}
.compare th,.compare td{padding:16px 14px; text-align:center; border-bottom:1px solid var(--line)}
.compare thead th{font-weight:800; font-size:14px; color:var(--ink); background:#f3f8f5; vertical-align:bottom}
.compare .rowhead{text-align:left; font-weight:700; font-size:14.5px; color:var(--ink2); width:34%}
.compare tbody tr:last-child td{border-bottom:0}
.compare .col-minua{background:rgba(31,138,91,.07)}
.compare thead .col-minua{background:var(--green); color:#fff; border-top-left-radius:12px; border-top-right-radius:12px}
.mark{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; font-weight:800; font-size:15px}
.mark.yes{background:var(--greenSoft); color:var(--greenD)}
.mark.no{background:#f1efed; color:#bcae9f}

/* ---------- 6 · SWOT ---------- */
.swot-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.swot-cell{position:relative; border-radius:22px; padding:26px; box-shadow:var(--shadow-sm); overflow:hidden}
.swot-cell.pos{background:linear-gradient(180deg,#eaf6ef,#e2f1e8); border:1px solid #cfe6da}
.swot-cell.neg{background:linear-gradient(180deg,#fbf1ec,#f7ece6); border:1px solid #f0d9cd}
.swot-badge{position:absolute; top:20px; right:22px; font-weight:800; font-size:46px; opacity:.16; letter-spacing:-2px}
.swot-cell.pos .swot-badge{color:var(--green)}
.swot-cell.neg .swot-badge{color:var(--orange)}
.swot-title{margin:0 0 14px; font-weight:800; font-size:22px}
.swot-list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.swot-list li{position:relative; padding-left:24px; font-size:15px; color:var(--ink2); line-height:1.4}
.swot-list li::before{content:""; position:absolute; left:4px; top:9px; width:8px; height:8px; border-radius:50%}
.swot-cell.pos li::before{background:var(--green)}
.swot-cell.neg li::before{background:var(--orange)}
@media(max-width:760px){.swot-grid{grid-template-columns:1fr}}

/* ---------- 7 · BUSINESS ---------- */
.biz-note{display:inline-block; background:#fff; border:2px dashed #c8dad1; color:var(--muted);
  font-weight:700; border-radius:14px; padding:12px 18px; font-size:15px}
.biz-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px}
.biz-empty{height:150px; border-radius:20px; background:repeating-linear-gradient(135deg,#eef4f1,#eef4f1 12px,#e9f1ec 12px,#e9f1ec 24px);
  border:1px solid var(--line); padding:20px; display:flex; flex-direction:column; gap:14px}
.biz-dot{width:34px; height:34px; border-radius:10px; background:#dde9e2}
.biz-lines{display:flex; flex-direction:column; gap:9px}
.biz-lines span{height:10px; border-radius:6px; background:#dde9e2}
.biz-lines span:nth-child(2){width:62%}
@media(max-width:760px){.biz-cards{grid-template-columns:1fr}}

/* ---------- 8 · FINAL CTA ---------- */
.final-cta{padding:clamp(64px,9vw,120px) 0; text-align:center;
  background:radial-gradient(900px 480px at 50% 0,#f4fbf7 0,var(--bg) 60%)}
.final-inner{max-width:720px; margin:0 auto}
.final-inner .lead{margin:16px auto 0; text-align:center}
.final-cta .join-ok{text-align:center}

/* ---------- FOOTER ---------- */
.foot{border-top:1px solid var(--line); padding:30px 0; background:#e9f3ee}
.foot-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.foot-note{color:var(--muted); font-size:13.5px}

/* ---------- reveal (GSAP drives; fallback keeps visible) ---------- */
.reveal{opacity:0}
.no-anim .reveal{opacity:1}