/* assets/css/styles.css
   ============================================================
   MEDINOVA — landing page stylesheet
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --brand:#0b6e8a;
  --brand-2:#14a3b8;
  --brand-dark:#074f63;
  --ink:#0e1f27;
  --muted:#5d7079;
  --bg:#f1f7f9;
  --card:#ffffff;
  --line:#e2ecf1;
  --ok:#16a34a;
  --warn:#f59e0b;
  --bad:#dc2626;

  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;

  --shadow-1:0 1px 2px rgba(13,42,55,.05), 0 6px 20px -8px rgba(13,42,55,.18);
  --shadow-2:0 30px 70px -28px rgba(9,72,92,.45);

  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.modal-open{overflow:hidden}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;border-radius:4px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  min-height:100svh;
}

/* ---------- media column ---------- */
.hero__media{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,#0b6e8a 0%,#14a3b8 55%,#4fd1c5 100%);
}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,40,52,.10) 0%,rgba(4,40,52,.18) 45%,rgba(4,40,52,.62) 100%);
}
.hero__media-placeholder{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  gap:14px;text-align:center;padding:28px;color:rgba(255,255,255,.9);z-index:1;
}
.hero__media-placeholder p{margin:0;font-size:.85rem;line-height:1.6;max-width:24ch;opacity:.85}
.hero__media-placeholder code{
  background:rgba(255,255,255,.18);padding:2px 7px;border-radius:6px;font-size:.8rem;
}
.hero__media-badge{
  position:absolute;left:24px;bottom:24px;z-index:2;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
  color:#fff;font-size:.82rem;font-weight:600;letter-spacing:.01em;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.dot{
  width:8px;height:8px;border-radius:50%;background:#6ee7b7;flex:none;
  box-shadow:0 0 0 0 rgba(110,231,183,.75);animation:pulse 2.2s infinite;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 10px rgba(110,231,183,0)}
  100%{box-shadow:0 0 0 0 rgba(110,231,183,0)}
}

/* ---------- content column ---------- */
.hero__panel{
  display:flex;flex-direction:column;
  padding:clamp(28px,4.5vw,68px);
  background:
    radial-gradient(900px 420px at 100% 0%,#f4fbfd 0%,transparent 60%),
    var(--card);
}
.hero__inner{
  width:100%;max-width:560px;margin:auto;
  display:flex;flex-direction:column;gap:20px;
}

.tag{
  display:inline-flex;align-items:center;gap:8px;width:max-content;
  padding:7px 14px;border-radius:999px;
  background:linear-gradient(135deg,#e6f6f9,#d7f1f5);
  border:1px solid #c8e9f0;
  color:var(--brand-dark);
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}

h1{
  margin:0;font-size:clamp(1.95rem,3.7vw,3.05rem);line-height:1.06;
  letter-spacing:-.025em;font-weight:800;
}
h1 em{
  display:block;font-style:normal;
  background:linear-gradient(115deg,var(--brand) 0%,var(--brand-2) 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.lead{
  margin:0;color:var(--muted);font-size:1.0625rem;line-height:1.68;max-width:54ch;
}

/* ---------- notify form ---------- */
.notify{display:grid;gap:11px;max-width:470px}
.notify .hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0}

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.01em}

input,select{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:#fbfdfe;transition:border-color .18s,box-shadow .18s,background .18s;
  font-size:.95rem;
}
input::placeholder{color:#9db0b9}
input:focus,select:focus{
  outline:none;border-color:var(--brand-2);background:#fff;
  box-shadow:0 0 0 4px rgba(20,163,184,.16);
}

.msg{margin:0;font-size:.85rem;font-weight:600;min-height:1.1em;line-height:1.45}
.msg--ok{color:var(--ok)}
.msg--err{color:var(--bad)}
.msg--info{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:var(--r-sm);border:1.5px solid transparent;
  font-weight:700;font-size:.95rem;cursor:pointer;
  transition:transform .12s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.btn--primary{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  color:#fff;box-shadow:0 12px 26px -14px rgba(11,110,138,.95);
}
.btn--primary:hover:not(:disabled){filter:brightness(1.06);box-shadow:0 16px 32px -14px rgba(11,110,138,1)}
.btn--ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover:not(:disabled){background:#f6fbfc;border-color:#c9dbe3}
.btn--danger{background:#fff;border-color:#f3cccc;color:#b91c1c}
.btn--danger:hover:not(:disabled){background:#fef2f2}

/* ---------- tool launchers ---------- */
.tools-launch{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.tools-launch__title{
  margin:0;font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}
.tools-launch__grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.tbtn{
  display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  padding:14px;border-radius:var(--r-md);border:1.5px solid var(--line);
  background:#fff;cursor:pointer;
  transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease;
}
.tbtn:hover{transform:translateY(-2px);border-color:var(--brand-2);box-shadow:var(--shadow-1)}
.tbtn__ico{font-size:22px;line-height:1;flex:none}
.tbtn b{display:block;font-size:.92rem;letter-spacing:-.01em}
.tbtn small{display:block;margin-top:2px;color:var(--muted);font-size:.76rem;line-height:1.35}

.site-footer{padding-top:26px;text-align:center;font-size:12.5px;color:var(--muted)}

/* ============================================================
   MODAL
   ============================================================ */
.modal{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  padding:clamp(12px,3vw,28px);
  visibility:hidden;opacity:0;
  transition:opacity .22s ease,visibility .22s ease;
}
.modal.is-open{visibility:visible;opacity:1}
.modal__backdrop{
  position:absolute;inset:0;background:rgba(6,33,42,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.modal__dialog{
  position:relative;z-index:1;
  width:min(660px,100%);max-height:min(88svh,880px);overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:clamp(20px,3.5vw,34px);
  background:#fff;border-radius:22px;box-shadow:var(--shadow-2);
  transform:translateY(18px) scale(.97);opacity:0;
  transition:transform .32s cubic-bezier(.2,.9,.25,1),opacity .24s ease;
}
.modal.is-open .modal__dialog{transform:none;opacity:1}
.modal__close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--muted);
  font-size:15px;line-height:1;cursor:pointer;transition:.18s;
}
.modal__close:hover{background:#f2f8fa;color:var(--ink);border-color:#cfdfe6}

.view{display:none}
.view.is-active{display:block;animation:fadeUp .28s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================================================
   TOOL SHARED
   ============================================================ */
.tool__head{padding-right:44px;margin-bottom:4px}
.tool__head h2{margin:0 0 5px;font-size:clamp(1.3rem,2.4vw,1.6rem);letter-spacing:-.02em;font-weight:800}
.tool__head p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}

.seg{
  display:inline-flex;gap:4px;padding:4px;margin:18px 0 18px;
  background:#eef4f7;border-radius:999px;
}
.seg__btn{
  border:0;background:transparent;padding:8px 20px;border-radius:999px;
  font-size:.86rem;font-weight:700;color:var(--muted);cursor:pointer;transition:.18s;
}
.seg__btn.is-active{background:#fff;color:var(--brand-dark);box-shadow:0 1px 3px rgba(13,42,55,.16)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:12px}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.actions .btn{flex:1;min-width:130px}
.actions--center{justify-content:center}
.actions--center .btn{flex:0 1 auto;min-width:140px}

.note{margin:18px 0 0;font-size:.78rem;line-height:1.65;color:var(--muted)}
.note strong{color:#42555e}

.err{
  margin-top:14px;padding:11px 14px;border-radius:var(--r-sm);
  background:#fef2f2;border:1px solid #f6d5d5;color:#b91c1c;
  font-size:.85rem;font-weight:600;
}

/* ---------- result card ---------- */
.result{
  margin-top:22px;padding:18px;border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(180deg,#f8fcfd 0%,#ffffff 100%);
  animation:pop .3s cubic-bezier(.2,.9,.25,1);
}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}

.result__top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.result__label{
  display:block;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px;
}
.result__value{
  font-size:2.15rem;font-weight:800;line-height:1.05;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.chip{
  padding:9px 16px;border-radius:999px;font-size:.85rem;font-weight:800;
  background:#eef4f7;color:var(--ink);white-space:nowrap;
}

/* ---------- BMI gauge ---------- */
.gauge{margin:22px 0 4px}
.gauge__bar{
  position:relative;height:14px;border-radius:999px;
  background:linear-gradient(to right,
    #3b82f6 0 23.2%,
    #16a34a 23.2% 46.4%,
    #f59e0b 46.4% 64.3%,
    #dc2626 64.3% 100%);
}
.gauge__pin{
  position:absolute;top:50%;left:0;width:6px;height:26px;border-radius:6px;
  background:#0e1f27;border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  transform:translate(-50%,-50%);
  transition:left .55s cubic-bezier(.2,.9,.25,1),background .25s ease;
}
.gauge__scale{position:relative;height:16px;margin-top:7px;font-size:11px;color:var(--muted);font-weight:600}
.gauge__scale span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.gauge__scale span:first-child{transform:translateX(0)}
.gauge__scale span:last-child{transform:translateX(-100%)}

.info{
  margin-top:16px;padding:14px 15px;border-radius:var(--r-md);
  background:#f4f9fb;border:1px solid #e6f1f5;
  font-size:.875rem;line-height:1.8;color:#2b4954;
}
.info b{color:var(--ink);font-weight:700}

/* ---------- breath dial ---------- */
.breath{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:8px}
.dial{position:relative;width:min(66vw,264px);aspect-ratio:1}
.dial svg{width:100%;height:100%;display:block}
.dial__track{fill:none;stroke:#e9f1f4;stroke-width:12}
.dial__ring{
  fill:none;stroke:#2563eb;stroke-width:12;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke .3s ease;
}
.dial__center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;
}
.dial__time{
  font-size:2.7rem;font-weight:800;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.dial__unit{
  font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:5px;
}
.breath__msg{
  margin:0;min-height:1.4em;text-align:center;
  font-size:.95rem;font-weight:600;color:var(--brand-dark);
}

/* ---------- history ---------- */
.hist{margin-top:4px}
.hist__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:8px;font-size:.85rem;
}
.linkbtn{
  border:0;background:none;padding:4px 6px;border-radius:6px;
  color:var(--brand);font-size:.8rem;font-weight:800;cursor:pointer;
}
.linkbtn:hover{background:#eaf5f8}
.hist__item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px;border-radius:10px;font-size:.84rem;
  border-bottom:1px solid var(--line);
}
.hist__item:last-child{border-bottom:0}
.hist__item.is-best{background:#ecfdf5;border-bottom-color:transparent}
.hist__item .t{font-weight:800;font-variant-numeric:tabular-nums}
.hist__item small{color:var(--muted);font-size:.74rem;display:block;margin-top:2px}
.hist__empty{padding:10px 12px;font-size:.84rem;color:var(--muted)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}

  /* ---- prominent hero image ---- */
  .hero__media{
    min-height:min(58vh,440px);
    order:-1;
  }
  .hero__media-badge{
    left:14px;bottom:14px;
    padding:7px 13px;font-size:.74rem;
  }

  .hero__panel{padding:22px 18px 16px}
  .hero__inner{margin:0 auto;max-width:620px;gap:14px}

  .tag{padding:5px 11px;font-size:10.5px;letter-spacing:.12em}
  h1{font-size:clamp(1.55rem,5.6vw,2rem)}
  .lead{font-size:.95rem;line-height:1.55}

  .notify{gap:9px}
  input,select{padding:11px 12px;font-size:.92rem}
  .btn{padding:12px 18px;font-size:.92rem}

  .tools-launch{gap:9px;margin-top:2px}
  .tools-launch__title{font-size:10.5px}
  .tools-launch__grid{gap:9px}
  .tbtn{padding:11px;gap:9px}
  .tbtn__ico{font-size:18px}
  .tbtn b{font-size:.86rem}
  .tbtn small{font-size:.7rem;margin-top:1px}

  .site-footer{padding-top:14px;font-size:11.5px}
}

@media (max-width:560px){
  /* ---- taller, bolder hero on phones ---- */
  .hero__media{
    min-height:min(52vh,380px);
  }
  /* stronger gradient so any text over the image stays readable */
  .hero__media::after{
    background:linear-gradient(
      180deg,
      rgba(4,40,52,.05) 0%,
      rgba(4,40,52,.15) 40%,
      rgba(4,40,52,.72) 100%
    );
  }
  .hero__media-badge{
    left:12px;bottom:12px;
    padding:6px 11px;font-size:.72rem;
  }

  .hero__panel{padding:16px 14px 12px}
  .hero__inner{gap:11px}

  .tag{padding:4px 10px;font-size:10px}
  h1{font-size:clamp(1.35rem,7vw,1.75rem);line-height:1.1}
  .lead{font-size:.875rem;line-height:1.5}

  .tools-launch__grid{grid-template-columns:1fr 1fr;gap:8px}
  .tbtn{padding:10px 8px;gap:7px}
  .tbtn__ico{font-size:16px}
  .tbtn b{font-size:.8rem}
  .tbtn small{display:none}

  .grid2,.grid3{grid-template-columns:1fr}
  .seg{display:flex;width:100%}
  .seg__btn{flex:1;padding:8px 10px}
  .modal{padding:0;place-items:end stretch}
  .modal__dialog{
    width:100%;max-height:94svh;border-radius:22px 22px 0 0;
    padding:20px 14px 22px;
  }
  .result__value{font-size:1.75rem}
  .dial{width:min(70vw,210px)}
  .actions .btn{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}