/* ============================================================================
   MentraNote Homepage v6 — Brand buttons + section redesigns.
   Layers on mentranote-home.css. Scoped under .mnx-home.
   ============================================================================ */

/* ---------- Brand buttons (flat, no glow) ---------- */
.mnx-home .theme-btn{
  background:linear-gradient(135deg,#4F7FFF 0%,#7B61FF 100%) !important;
  border:0 !important; border-radius:11px !important; padding:14px 30px !important;
  font-weight:700 !important; color:#fff !important; letter-spacing:.2px;
  box-shadow:0 4px 10px rgba(15,23,41,.14) !important;
  transition:transform .25s, box-shadow .25s, filter .25s; }
.mnx-home .theme-btn:hover{ transform:translateY(-2px); filter:brightness(1.03);
  box-shadow:0 6px 14px rgba(15,23,41,.2) !important; }
.mnx-home .theme-btn.style-2{
  background:linear-gradient(135deg,#2E5BFF 0%,#3F3DF0 100%) !important; color:#fff !important; border:0 !important; }
.mnx-home .theme-btn.style-2:hover{ color:#fff !important; }

/* ---------- One Platform: close gap to hero + separator + lead text ---------- */
.mnx-platform{ border-top:1px solid #E7EAF4; box-shadow:0 -1px 0 #fff, 0 -14px 26px -18px rgba(24,33,77,.18); }
.mnx-lead{ color:var(--mn-dark); font-size:18.5px; font-weight:600; line-height:1.7; }

/* ---------- Card watermark icons (6 pillars) ---------- */
.mnx-pcard .mnx-pic{ position:absolute; top:18px; right:20px; font-size:40px; color:rgba(255,255,255,.22); }
.mnx-pcard:hover .mnx-pic{ color:rgba(255,255,255,.34); }
.mnx-pcard .mnx-pbtn{ cursor:pointer; }

/* ---------- Trusted-by curve over the dark hero ---------- */
.mnx-logos{ position:relative; margin-top:-46px; padding:52px 0 30px !important; z-index:5;
  background:
    radial-gradient(620px 160px at 50% 0%, #EDE6FF 0%, transparent 70%),
    radial-gradient(420px 130px at 78% 8%, #FBE4F1 0%, transparent 70%),
    linear-gradient(180deg,#FAF9FF 0%, #FFFFFF 58%);
  border-radius:50% 50% 0 0 / 56px 56px 0 0; box-shadow:0 -1px 0 rgba(255,255,255,.6); }

/* ---------- Telehealth video card (hero floating) ---------- */
.mnx-fc-tele{ background:linear-gradient(150deg,#F6C9A8,#F2A9C0 55%,#C9B2EE); padding:0 !important; height:150px; width:172px; overflow:hidden; }
.mnx-fc-tele::after{ content:"\f007"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); font-size:96px; color:rgba(255,255,255,.55); }
.mnx-fc-tele .thead{ position:absolute; top:8px; left:8px; z-index:3; display:inline-flex; align-items:center; gap:6px; background:rgba(17,24,41,.55); backdrop-filter:blur(4px); color:#fff; font-size:9px; font-weight:700; padding:4px 9px; border-radius:50px; }
.mnx-fc-tele .thead .dot{ width:6px; height:6px; border-radius:50%; background:#34D399; box-shadow:0 0 0 3px rgba(52,211,153,.3); }
.mnx-fc-tele .wave{ position:absolute; top:34px; left:50%; transform:translateX(-50%); font-size:30px; z-index:3; animation:mnxWave 2.4s ease-in-out infinite; transform-origin:70% 80%; }
@keyframes mnxWave{ 0%,60%,100%{transform:translateX(-50%) rotate(0)} 70%{transform:translateX(-50%) rotate(16deg)} 80%{transform:translateX(-50%) rotate(-8deg)} 90%{transform:translateX(-50%) rotate(12deg)} }
.mnx-fc-tele .ctrls{ position:absolute; bottom:9px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:8px; }
.mnx-fc-tele .ctrls .c{ width:26px; height:26px; border-radius:50%; background:rgba(30,38,60,.82); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; box-shadow:0 4px 10px rgba(0,0,0,.3); }
.mnx-fc-tele .ctrls .c.end{ background:#FF4D4F; }

/* ---------- About-Us visual (Less Administration) ---------- */
.mnx-about-visual{ position:relative; min-height:380px; display:flex; align-items:center; justify-content:center; }
.mnx-about-visual .blob{ position:absolute; inset:6% 8%; border-radius:46% 54% 58% 42%/48% 42% 58% 52%; background:radial-gradient(circle at 32% 30%, rgba(123,97,255,.22), rgba(79,127,255,.16) 60%, transparent 78%); filter:blur(2px); animation:mnxMorph 12s ease-in-out infinite; }
@keyframes mnxMorph{ 0%,100%{border-radius:46% 54% 58% 42%/48% 42% 58% 52%} 50%{border-radius:58% 42% 44% 56%/56% 58% 42% 44%} }
.mnx-about-visual .orb{ position:relative; z-index:2; width:150px; height:150px; border-radius:50%; background:var(--mn-gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-size:54px; box-shadow:0 30px 60px rgba(91,99,255,.45); animation:mnxBob 6s ease-in-out infinite; }
.mnx-about-visual .fc{ position:absolute; z-index:3; display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--mn-border); border-radius:14px; padding:11px 14px; box-shadow:var(--shadow-lg); animation:mnxBob 6s ease-in-out infinite; }
.mnx-about-visual .fc .ic{ width:34px; height:34px; border-radius:10px; background:var(--mn-warning); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.mnx-about-visual .fc .ic.g{ background:var(--mn-accent); } .mnx-about-visual .fc .ic.b{ background:var(--mn-primary); }
.mnx-about-visual .fc b{ display:block; font-size:13px; color:var(--mn-dark); line-height:1.2; }
.mnx-about-visual .fc i{ font-size:11px; color:var(--mn-text-light); font-style:normal; }
.mnx-about-visual .fc-a{ top:8%; left:-2%; animation-delay:-1s; }
.mnx-about-visual .fc-b{ bottom:10%; right:-4%; animation-delay:-2.6s; }
.mnx-about-visual .fc-c{ bottom:4%; left:6%; animation-delay:-4s; }
.mnx-abouts .it{ display:flex; align-items:center; gap:12px; font-size:15px; font-weight:600; color:var(--mn-dark); margin-bottom:14px; }
.mnx-abouts .ck{ width:24px; height:24px; border-radius:50%; background:rgba(34,197,94,.12); color:var(--mn-success); display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }

/* ---------- Built Around (own animated workflow) ---------- */
.mnx-built{ padding:90px 0; background:radial-gradient(700px 300px at 80% 0%, #EEF1FF 0%, transparent 60%), #F7F8FE; }
.mnx-built .mnx-wf-i .t{ width:62px; height:62px; border-radius:50%; background:#fff; border:1px solid var(--mn-border);
  display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 12px;
  box-shadow:0 8px 18px rgba(24,33,77,.10); transition:transform .3s, box-shadow .3s, border-color .3s; }
.mnx-built .mnx-wf-i .t i{ background:var(--mn-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.mnx-built .mnx-wf-i:hover .t{ transform:translateY(-6px); box-shadow:0 14px 26px rgba(24,33,77,.16); border-color:#C7CFEA; }
.mnx-built .mnx-wf-i .l{ font-size:12.5px; font-weight:700; color:var(--mn-dark); }

/* directional flow: animated dashes travel left → right through the stages */
.mnx-built .mnx-wf-row{ overflow:visible; }
.mnx-built .mnx-wf-row::before{ content:""; position:absolute; top:30px; left:9%; right:9%; height:3px; border:0; z-index:0;
  background-image:linear-gradient(90deg, var(--mn-primary) 0 46%, transparent 46% 100%);
  background-size:18px 3px; background-repeat:repeat-x; opacity:.6;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  animation:mnxFlow 1.1s linear infinite; }
@keyframes mnxFlow{ to{ background-position:18px 0; } }
/* travelling pulse along the line */
.mnx-built .mnx-wf-row .pulse{ position:absolute; top:27px; left:9%; width:9px; height:9px; border-radius:50%; background:var(--mn-secondary); box-shadow:0 0 0 4px rgba(123,97,255,.18); z-index:2; animation:mnxPulseRun 3.4s ease-in-out infinite; }
@keyframes mnxPulseRun{ 0%{ left:9%; opacity:0 } 8%{opacity:1} 92%{opacity:1} 100%{ left:91%; opacity:0 } }
@media (prefers-reduced-motion:reduce){ .mnx-built .mnx-wf-row::before,.mnx-built .mnx-wf-row::after,.mnx-built .mnx-wf-row .pulse{ animation:none } }

/* ---------- Telehealth photo + testimonial avatar photos + slower scroll ---------- */
.mnx-fc-tele .tele-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; z-index:1; }
.mnx-fc-tele::after{ display:none; } /* hide silhouette when a real photo is used */
.mnx-fc-tele .thead{ z-index:3; } .mnx-fc-tele .ctrls{ z-index:3; }
.mnx-tcard2 .av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.mnx-tst-track{ animation-duration:78s !important; }

/* ---------- Glow removal (orb / modal / avatar) ---------- */
.mnx-about-visual .orb{ box-shadow:0 20px 44px rgba(24,33,77,.20); }
.mnx-modal-ic{ box-shadow:0 8px 18px rgba(24,33,77,.16); }
.mnx-tcard2 .av{ box-shadow:0 4px 10px rgba(24,33,77,.18); }

/* ---------- Why (Our-Services style) ---------- */
.mnx-why{ padding:90px 0; background:#EAF1FF; }
.mnx-orn{ display:inline-flex; align-items:center; gap:12px; font-weight:800; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--mn-dark); margin-bottom:8px; }
.mnx-orn::before,.mnx-orn::after{ content:""; width:34px; height:2px; background:linear-gradient(90deg,transparent,var(--mn-primary)); }
.mnx-orn::after{ background:linear-gradient(90deg,var(--mn-primary),transparent); }
.mnx-orn.light{ color:#fff; } .mnx-orn.light::before{ background:linear-gradient(90deg,transparent,#fff); } .mnx-orn.light::after{ background:linear-gradient(90deg,#fff,transparent); }
.mnx-svc{ position:relative; height:100%; background:#fff; border:1px solid #EAEDF6; border-radius:18px; padding:30px 26px 26px; box-shadow:0 10px 30px rgba(24,33,77,.06); transition:transform .35s, box-shadow .35s, border-color .35s; overflow:hidden; }
.mnx-svc::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--mn-gradient); transform:scaleX(0); transform-origin:left; transition:transform .35s; }
.mnx-svc:hover{ transform:translateY(-8px); box-shadow:0 26px 54px rgba(24,33,77,.14); border-color:transparent; }
.mnx-svc:hover::before{ transform:scaleX(1); }
.mnx-svc .ic{ display:inline-flex; width:60px; height:60px; align-items:center; justify-content:center; font-size:25px; color:#fff; background:var(--mn-gradient); border-radius:16px; margin-bottom:18px; transition:transform .35s; }
.mnx-svc:hover .ic{ transform:rotate(-6deg) scale(1.06); }
.mnx-svc h3{ font-size:19px; margin-bottom:10px; }
.mnx-svc p{ color:var(--mn-text-light); font-size:14px; line-height:1.6; margin-bottom:18px; }
.mnx-svc .rm{ background:none; border:0; padding:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:13px; color:var(--mn-dark); display:inline-flex; align-items:center; gap:7px; transition:gap .25s,color .25s; }
.mnx-svc .rm i{ color:var(--mn-primary); font-size:11px; } .mnx-svc:hover .rm{ color:var(--mn-primary); gap:11px; }

/* ---------- Testimonials (purple, auto-scroll) ---------- */
.mnx-tst{ position:relative; overflow:hidden; padding:80px 0; background:linear-gradient(125deg,#3B2C8F 0%,#5B3FB0 45%,#7E3FA8 100%); }
.mnx-tst .deco{ position:absolute; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%); pointer-events:none; }
.mnx-tst .deco.d-tl{ width:360px; height:360px; top:-140px; left:-120px; }
.mnx-tst .deco.d-br{ width:320px; height:320px; bottom:-130px; right:-110px; }
.mnx-tst-wrap{ overflow:hidden; margin-top:42px; -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.mnx-tst-track{ display:flex; gap:22px; width:max-content; padding:34px 12px 14px; animation:mnxScroll 42s linear infinite; }
.mnx-tst-wrap:hover .mnx-tst-track{ animation-play-state:paused; }
@keyframes mnxScroll{ to{ transform:translateX(-50%); } }
.mnx-tcard2{ position:relative; width:320px; flex-shrink:0; background:#fff; border-radius:18px; padding:42px 24px 24px; box-shadow:0 24px 50px rgba(20,12,60,.3); }
.mnx-tcard2 .av{ position:absolute; top:-26px; left:50%; transform:translateX(-50%); width:56px; height:56px; border-radius:50%; background:var(--mn-gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; border:4px solid #fff; box-shadow:var(--shadow); }
.mnx-tcard2 .qm{ color:var(--mn-primary); opacity:.18; font-size:26px; position:absolute; top:16px; right:20px; }
.mnx-tcard2 .nm{ display:block; text-align:center; font-size:16px; color:var(--mn-dark); margin-top:4px; }
.mnx-tcard2 .role{ display:block; text-align:center; font-size:12.5px; font-weight:700; color:var(--mn-primary); margin-bottom:14px; }
.mnx-tcard2 p{ text-align:center; font-size:13.5px; color:var(--mn-text); line-height:1.65; }

/* ---------- FAQ illustration ---------- */
.mnx-faq-img{ max-width:100%; display:inline-block; filter:drop-shadow(0 20px 40px rgba(24,33,77,.16)); animation:mnxBob 7s ease-in-out infinite; }

/* ---------- Mobile app section ---------- */
.mnx-mobile-sec{ padding:90px 0; background:linear-gradient(180deg,#F7F8FE,#FFFFFF); }
.mnx-pill{ display:inline-block; background:var(--mn-primary-light); color:var(--mn-primary); font-weight:800; font-size:11px; letter-spacing:.16em; padding:7px 16px; border-radius:50px; }
.mnx-pill.light{ background:rgba(123,97,255,.18); color:#C9B7FF; }
.mnx-mob-feats .it{ display:flex; align-items:center; gap:12px; font-size:15px; font-weight:600; color:var(--mn-dark); margin-bottom:13px; }
.mnx-mob-feats .ck{ width:24px; height:24px; border-radius:50%; background:rgba(34,197,94,.12); color:var(--mn-success); display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
.mnx-store{ display:inline-flex; align-items:center; gap:10px; background:#0F1729; color:#fff !important; padding:11px 18px; border-radius:12px; transition:transform .25s, box-shadow .25s; }
.mnx-store i{ font-size:22px; } .mnx-store span{ display:flex; flex-direction:column; line-height:1.15; font-weight:800; font-size:15px; }
.mnx-store span small{ font-size:9px; font-weight:600; opacity:.8; letter-spacing:.04em; }
.mnx-store:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(15,23,41,.3); }
.mnx-store.ghost{ background:#fff; color:var(--mn-primary) !important; border:1.5px solid var(--mn-border); }
.mnx-store.ghost i{ font-size:16px; }
.mnx-fine{ font-size:12.5px; color:var(--mn-text-light); margin-top:18px; }
.mnx-phone-wrap{ display:flex; justify-content:center; align-items:center; padding:24px; background:radial-gradient(circle at 50% 40%, #EDE9FF, transparent 70%); border-radius:24px; }
.mnx-phone{ position:relative; width:266px; border-radius:34px; background:#0F1729; padding:12px; box-shadow:0 40px 80px rgba(24,33,77,.3); }
.mnx-phone .notch{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:96px; height:18px; border-radius:0 0 14px 14px; background:#0F1729; z-index:3; }
.mnx-phone img{ width:100%; border-radius:24px; display:block; }

/* ---------- Final CTA (dark) ---------- */
.mnx-cta-dark{ position:relative; overflow:hidden; padding:96px 0; text-align:center;
  background:radial-gradient(700px 360px at 50% 0%, #1B2455 0%, transparent 60%), linear-gradient(180deg,#0C1230 0%,#0A0F26 100%); }
.mnx-cta-dark .deco{ position:absolute; border-radius:50%; background:radial-gradient(circle,rgba(123,97,255,.22),transparent 70%); pointer-events:none; }
.mnx-cta-dark .deco.c1{ width:360px; height:360px; top:-120px; left:-100px; }
.mnx-cta-dark .deco.c2{ width:300px; height:300px; bottom:-120px; right:-80px; background:radial-gradient(circle,rgba(79,127,255,.2),transparent 70%); }
.mnx-cta-dark h2{ color:#fff !important; font-size:clamp(28px,3.8vw,44px); }
.mnx-cta-dark p{ color:rgba(255,255,255,.72); font-size:17px; max-width:600px; margin:14px auto 0; }
.mnx-cta-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.mnx-cta-fine{ color:rgba(255,255,255,.5); font-size:12.5px; margin-top:18px; }

/* ---------- Pillar details modal ---------- */
.mnx-modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:20px; }
.mnx-modal.open{ display:flex; }
.mnx-modal-overlay{ position:absolute; inset:0; background:rgba(10,15,38,.6); backdrop-filter:blur(4px); animation:mnxFadeIn .25s ease; }
.mnx-modal-box{ position:relative; z-index:2; width:100%; max-width:540px; background:#fff; border-radius:22px; padding:40px 36px 36px; box-shadow:0 40px 90px rgba(10,15,38,.5); animation:mnxPop .3s cubic-bezier(.2,.9,.3,1.2); }
@keyframes mnxFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes mnxPop{ from{opacity:0; transform:translateY(20px) scale(.96)} to{opacity:1; transform:none} }
.mnx-modal-x{ position:absolute; top:16px; right:18px; width:34px; height:34px; border-radius:50%; border:0; background:var(--mn-bg); color:var(--mn-text); font-size:22px; line-height:1; cursor:pointer; transition:.2s; }
.mnx-modal-x:hover{ background:var(--mn-primary-light); color:var(--mn-primary); }
.mnx-modal-ic{ width:64px; height:64px; border-radius:16px; background:var(--mn-gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:18px; box-shadow:0 14px 28px rgba(91,99,255,.35); }
.mnx-modal-box h3{ font-size:24px; margin-bottom:14px; }
.mnx-modal-body{ color:var(--mn-text); font-size:15px; line-height:1.7; }
.mnx-modal-body ul{ list-style:none; margin:14px 0 0; padding:0; }
.mnx-modal-body li{ display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; }
.mnx-modal-body li i{ color:var(--mn-success); margin-top:4px; font-size:12px; }

/* ---------- v6 responsive ---------- */
@media (max-width:991px){
  .mnx-about-visual{ min-height:320px; }
  .mnx-faq-img{ max-width:340px; margin-top:24px; }
}
@media (max-width:767px){
  .mnx-built .mnx-wf-row{ gap:4px; } .mnx-built .mnx-wf-i .l{ font-size:9px; }
  .mnx-tcard2{ width:270px; }
}

/* ---------- Platform page: pillar checklists ---------- */
.mnx-plist{ list-style:none; padding:0; margin:14px 0 0; }
.mnx-plist li{ display:flex; gap:9px; align-items:flex-start; margin-bottom:9px; font-size:13.5px; color:var(--mn-text); line-height:1.5; }
.mnx-plist li i{ color:var(--mn-success); margin-top:4px; font-size:11px; flex-shrink:0; }
.mnx-plist li strong{ color:var(--mn-dark); }
.mnx-who-card{ height:100%; background:#fff; border:1px solid var(--mn-border); border-radius:16px; padding:26px; box-shadow:0 10px 30px rgba(24,33,77,.06); transition:transform .3s, box-shadow .3s; }
.mnx-who-card:hover{ transform:translateY(-5px); box-shadow:0 20px 44px rgba(24,33,77,.12); }
.mnx-who-card .ic{ width:48px;height:48px;border-radius:13px;background:var(--mn-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:14px; }