/* ============================================================
   MedCode — section + widget styles
   ============================================================ */

/* ---------------- HERO ---------------- */
.hero{ padding:148px 0 64px; position:relative; text-align:center; }
.hero-center{ max-width:1180px; margin:0 auto; }
.hero h1{ font-size:clamp(34px,5.1vw,64px); line-height:1.05; letter-spacing:-.03em; font-weight:600;
  margin:0; color:var(--ink); text-wrap:wrap; }
.hero-lead{ font-size:19px; line-height:1.6; color:var(--muted); margin:26px auto 0; max-width:62ch; text-wrap:pretty; }
.hero-cta{ display:flex; gap:12px; margin-top:34px; justify-content:center; flex-wrap:wrap; }
.hero-dash-wrap{ margin-top:54px; }

/* wide dashboard panel */
.hero-dash{ position:relative; max-width:1120px; margin:0 auto; text-align:left; }
.hd-pad{ padding:30px 32px 32px; }
.hd-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.hd-crumb{ font-size:13px; color:var(--muted-2); font-weight:500; }
.hd-crumb-cur{ color:var(--ink-2); }
.hd-title{ font-size:24px; font-weight:600; letter-spacing:-.02em; color:var(--ink); margin:9px 0 5px; white-space:nowrap; }
.hd-livedot{ display:inline-block; vertical-align:middle; margin-left:9px; width:8px; height:8px; border-radius:50%; background:#2c9a6a; box-shadow:0 0 0 0 rgba(44,154,106,.5); animation:livepulse 1.8s infinite; }
@keyframes livepulse{ 0%{ box-shadow:0 0 0 0 rgba(44,154,106,.5) } 70%{ box-shadow:0 0 0 8px rgba(44,154,106,0) } 100%{ box-shadow:0 0 0 0 rgba(44,154,106,0) } }
.hd-meta{ font-size:14px; color:var(--muted); }
.hd-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:13px; }
.hd-audit{ font-size:13px; color:var(--muted-2); }
.hd-btns{ display:flex; gap:10px; }
.hd-b{ font-family:inherit; font-size:13.5px; font-weight:550; padding:10px 17px; border-radius:999px; cursor:pointer; transition:.2s; white-space:nowrap; }
.hd-b.ghost{ background:#fff; border:1px solid var(--line-2); color:var(--ink); }
.hd-b.ghost:hover{ border-color:#cfc9e6; }
.hd-b.dark{ background:var(--navy); border:none; color:#fff; }
.hd-b.dark:hover{ background:#23263e; }
.hd-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; }
.hd-kpi{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 24px; }
.hd-kpi-v{ font-size:30px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.hd-kpi-cap{ font-size:14px; color:var(--muted); margin-top:5px; }
.hd-spark{ display:flex; align-items:flex-end; gap:3px; height:40px; }
.hd-spark span{ width:5px; border-radius:2px; background:linear-gradient(180deg,#8b7ee6,#b9a6e6); animation:barGrow .9s ease-out both; }
.hd-typer{ margin-top:18px; background:#11132a; border-radius:16px; padding:16px 20px 18px; }
.hd-typer-h{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:#7e83ab;
  letter-spacing:.04em; text-transform:uppercase; font-family:var(--mono); margin-bottom:11px; }
.hd-typer-body{ font-family:var(--mono); font-size:13.5px; line-height:1.7; min-height:166px; white-space:pre-wrap; word-break:break-word; }
.hd-tline{ color:#aeb3da; }
.hd-tline.mut{ color:#6f74a0; } .hd-tline.grn{ color:#5fd39a; } .hd-tline.pur{ color:#b59bf0; } .hd-tline.blu{ color:#7fa8f5; }
.hd-tline .caret{ background:#cfc7f2; }

/* ---------------- FEATURE CARDS ---------------- */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:50px; }
.feat-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s, border-color .4s; will-change:transform; }
.feat-card:hover{ box-shadow:var(--shadow); border-color:var(--line-2); }
.feat-ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:var(--purple-soft); color:var(--purple-ink); margin-bottom:18px; }
.feat-card h3{ font-size:19px; font-weight:600; letter-spacing:-.01em; margin:0 0 9px; }
.feat-card p{ font-size:14.5px; line-height:1.6; color:var(--muted); margin:0; }
.feat-foot{ display:inline-flex; align-items:center; gap:7px; margin-top:18px; font-size:13.5px; font-weight:600; color:var(--purple-ink); }
.feat-foot .a{ transition:transform .3s; } .feat-card:hover .feat-foot .a{ transform:translateX(4px); }

/* ---------------- WORKFLOW SHOWCASE ---------------- */
.flow{ position:relative; margin-top:54px; }
.flow-line{ position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); background:var(--line-2); overflow:hidden; }
.flow-line .prog{ position:absolute; left:0; right:0; top:0; background:linear-gradient(180deg,#8b7ee6,#e08a63); transition:height .2s linear; }
.flow-steps{ display:flex; flex-direction:column; gap:26px; position:relative; }
.flow-step{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; }
.flow-step:nth-child(even) .flow-card{ grid-column:1; text-align:right; }
.flow-step:nth-child(even) .flow-spacer{ grid-column:3; }
.flow-node{ grid-column:2; width:54px; height:54px; border-radius:50%; background:#fff; border:2px solid var(--line-2);
  display:grid; place-items:center; color:var(--muted-2); z-index:2; transition:all .5s; }
.flow-step.on .flow-node{ border-color:transparent; background:var(--navy); color:#fff; transform:scale(1.08); box-shadow:0 14px 30px -12px rgba(40,30,90,.5); }
.flow-card{ grid-column:3; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px 20px; box-shadow:var(--shadow-sm);
  opacity:.5; transform:translateY(14px); transition:all .6s cubic-bezier(.2,.7,.3,1); }
.flow-step.on .flow-card{ opacity:1; transform:none; box-shadow:var(--shadow); }
.flow-card .fc-step{ font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--purple-ink); }
.flow-card h4{ font-size:18px; font-weight:600; margin:6px 0 6px; letter-spacing:-.01em; }
.flow-card p{ font-size:14px; line-height:1.55; color:var(--muted); margin:0; }
.flow-spacer{ grid-column:1; }

/* ---------------- AI TOOLS ---------------- */
.tools-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:46px; }
.tool-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:flex; gap:16px; align-items:flex-start;
  transition:box-shadow .4s, border-color .4s; }
.tool-card:hover{ box-shadow:var(--shadow); border-color:var(--line-2); }
.tool-ic{ width:42px; height:42px; border-radius:12px; background:var(--purple-soft); color:var(--purple-ink); display:grid; place-items:center; flex:none; }
.tool-card h4{ font-size:17px; font-weight:600; margin:0 0 6px; letter-spacing:-.01em; }
.tool-card p{ font-size:14px; line-height:1.55; color:var(--muted); margin:0; }
.tool-viz{ margin-top:12px; }

/* ---------------- INTEGRATIONS ---------------- */
.integ{ position:relative; height:400px; margin-top:30px; max-width:1000px; margin-left:auto; margin-right:auto; }
.integ-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.integ-link{ stroke:#c6bdee; stroke-width:1.6; fill:none; stroke-linecap:round; }
@keyframes dashflow{ to{ stroke-dashoffset:-6; } }
.integ-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  width:118px; height:118px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; text-align:center;
  box-shadow:0 30px 60px -20px rgba(40,30,90,.55); }
.integ-core b{ font-size:14px; font-weight:600; } .integ-core span{ font-size:10.5px; color:#a9adce; display:block; margin-top:2px; }
.integ-node{ position:absolute; transform:translate(-50%,-50%); background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:11px 16px; font-size:14px; font-weight:600; color:var(--ink-2); box-shadow:var(--shadow-sm); z-index:2; display:flex; align-items:center; gap:8px; }
.integ-node .nd{ width:8px; height:8px; border-radius:50%; background:var(--purple); }

/* ---------------- PRICING ---------------- */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px; align-items:stretch; }
.price-toggle{ display:flex; gap:6px; padding:5px; background:#fff; border:1px solid var(--line); border-radius:999px; width:max-content; margin:24px auto 0; }
.price-toggle button{ border:none; background:none; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--muted);
  padding:8px 16px; border-radius:999px; cursor:pointer; transition:.25s; }
.price-toggle button.on{ background:var(--navy); color:#fff; }
.price-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; display:flex; flex-direction:column;
  position:relative; transition:transform .4s, box-shadow .4s; }
.price-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.price-card.feat{ background:linear-gradient(165deg,#23203f,#15172a); color:#fff; border-color:#2a2848; overflow:hidden; }
.price-card.feat::before{ content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px;
  background:conic-gradient(from 0deg,#8b7ee6,#e08a63,#6f9af0,#8b7ee6); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.0; transition:opacity .4s; animation:spin calc(8s/(var(--motion)*.6+.4)) linear infinite; }
.price-card.feat:hover::before{ opacity:.8; }
.price-card.feat .glow{ position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle,rgba(140,110,230,.6),transparent 70%); pointer-events:none; }
.price-tag{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
.price-card.feat .price-tag{ color:#b9a9f0; }
.price-amt{ display:flex; align-items:baseline; gap:6px; margin:14px 0 4px; }
.price-amt b{ font-size:46px; font-weight:600; letter-spacing:-.03em; }
.price-amt span{ font-size:14px; color:var(--muted); } .price-card.feat .price-amt span{ color:#a9adce; }
.price-desc{ font-size:13.5px; line-height:1.5; color:var(--muted); margin:0 0 20px; min-height:40px; }
.price-card.feat .price-desc{ color:#bcc0e0; }
.price-feats{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:11px; flex:1; }
.price-feats li{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-2); }
.price-card.feat .price-feats li{ color:#dfe1f2; }
.price-feats .ck{ width:18px; height:18px; border-radius:50%; background:var(--green-soft); color:var(--green); display:grid; place-items:center; flex:none; }
.price-card.feat .ck{ background:rgba(140,200,160,.18); color:#7fd6a6; }

/* ---------------- TESTIMONIALS ---------------- */
.tcols{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px; }
.tcol{ display:flex; flex-direction:column; gap:18px; }
.tcard{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); }
.tcard .tq{ color:#cfc7f2; }
.tcard p{ font-size:15px; line-height:1.6; color:var(--ink-2); margin:12px 0 18px; }
.tcard .tu{ display:flex; align-items:center; gap:11px; }
.tcard .tav{ width:40px; height:40px; border-radius:50%; background:var(--grad-strong); display:grid; place-items:center; font-weight:600; color:#3a2b50; font-size:14px; }
.tcard .tn b{ font-size:14px; display:block; } .tcard .tn span{ font-size:12.5px; color:var(--muted); }
.tstars{ display:flex; gap:2px; color:#e0a93c; }

/* ---------------- FAQ ---------------- */
.faq{ max-width:760px; margin:34px auto 0; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:box-shadow .3s, border-color .3s; }
.faq-item.open{ box-shadow:var(--shadow); border-color:var(--line-2); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; cursor:pointer; font-size:16px; font-weight:600; color:var(--ink); }
.faq-q .fc{ transition:transform .35s; color:var(--muted-2); flex:none; }
.faq-item.open .faq-q .fc{ transform:rotate(180deg); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .4s cubic-bezier(.3,.8,.3,1); }
.faq-a-in{ padding:0 24px 22px; font-size:14.5px; line-height:1.65; color:var(--muted); }

/* ---------------- CONTACT ---------------- */
.contact-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }
.contact-l{ padding:46px; position:relative; }
.contact-l h3{ font-size:30px; font-weight:600; letter-spacing:-.02em; line-height:1.1; margin:0 0 16px; }
.contact-l p{ font-size:15px; line-height:1.6; color:var(--muted); margin:0 0 26px; max-width:38ch; }
.contact-r{ padding:46px; background:var(--card-2); border-left:1px solid var(--line); display:flex; flex-direction:column; gap:16px; }
.contact-r .qc{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.success-pop{ display:flex; align-items:center; gap:10px; background:var(--green-soft); color:var(--green); padding:14px 18px; border-radius:14px; font-weight:600; font-size:14.5px; }

/* illustration in contact */
.cl-viz{ position:relative; height:200px; margin-top:10px; }
.cl-orbit{ position:absolute; left:60px; top:50%; transform:translateY(-50%); }

/* ---------------- FOOTER ---------------- */
.footer{ position:relative; z-index:2; border-top:1px solid var(--line); padding:60px 0 40px; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; }
.foot-brand p{ font-size:13.5px; line-height:1.6; color:var(--muted); margin:14px 0 0; max-width:34ch; }
.foot-col h5{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin:0 0 16px; }
.foot-col a{ display:block; font-size:14px; color:var(--ink-2); text-decoration:none; margin-bottom:11px; transition:color .2s; cursor:pointer; }
.foot-col a:hover{ color:var(--purple-ink); }
.foot-bottom{ text-align:center; font-size:13px; color:var(--muted-2); margin-top:46px; padding-top:24px; border-top:1px solid var(--line); }
.news{ display:flex; gap:10px; max-width:420px; }
.news input{ flex:1; }

/* ---------------- NEW PAGES ---------------- */
.cta-band{ background:linear-gradient(150deg,#23203f,#15172a); color:#fff; border-radius:var(--radius-lg);
  padding:40px 44px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  position:relative; overflow:hidden; box-shadow:var(--shadow); }
.cta-band::after{ content:""; position:absolute; top:-50%; right:8%; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(140,110,230,.5),transparent 70%); pointer-events:none; }
.cta-band h3{ font-size:25px; font-weight:600; letter-spacing:-.02em; margin:0 0 7px; }
.cta-band p{ font-size:15px; color:#bcc0e0; margin:0; max-width:52ch; line-height:1.5; }

.sec-badges{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:40px; }
.sec-badge{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink-2);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 16px; }
.sec-badge svg{ color:var(--green); }

.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.blog-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s, border-color .4s; cursor:pointer; }
.blog-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--line-2); }
.blog-thumb{ position:relative; height:150px; background:linear-gradient(135deg,#efeafb,#e7eefb); display:grid; place-items:center; }
.blog-glyph{ color:#b3a9e0; }
.blog-cat{ position:absolute; top:14px; left:14px; font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px; letter-spacing:.02em; }
.blog-cat.purple{ background:var(--purple-soft); color:var(--purple-ink); }
.blog-cat.green{ background:var(--green-soft); color:var(--green); }
.blog-cat.blue{ background:var(--blue-soft); color:var(--blue); }
.blog-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.blog-body h3{ font-size:18px; font-weight:600; letter-spacing:-.01em; line-height:1.25; margin:0 0 9px; }
.blog-body p{ font-size:14px; line-height:1.55; color:var(--muted); margin:0 0 18px; flex:1; }
.blog-meta{ display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--muted-2); }
.blog-read{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--purple-ink); }
.blog-card:hover .blog-read svg{ transform:translateX(3px); transition:transform .3s; }

.contact-info{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.contact-info-card{ display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow-sm); }
.ci-k{ font-size:12.5px; color:var(--muted-2); font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
.ci-v{ font-size:15.5px; font-weight:600; color:var(--ink); margin-top:3px; }

/* analysis detail grid — equal-height boxes */
.analysis-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; }
.analysis-grid > .reveal{ display:flex; }
.analysis-grid > .reveal > .card{ flex:1; width:100%; }

@media (max-width:980px){
  .hero{ padding:130px 0 60px; }
  .hero-grid,.contact-card,.tools-grid{ grid-template-columns:1fr; }
  .feat-grid,.price-grid,.tcols,.blog-grid,.contact-info,.analysis-grid{ grid-template-columns:1fr; }
  .hd-side-bl{ display:none; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:24px; }
  .flow-step{ grid-template-columns:44px 1fr; gap:16px; }
  .flow-line{ left:22px; } .flow-node{ grid-column:1; }
  .flow-card,.flow-step:nth-child(even) .flow-card{ grid-column:2; text-align:left; } .flow-spacer{ display:none; }
}