/* PharmaDealFlow showcase — palette from the product brand kit:
   tone #2A0049 (deep violet), accent #D200D2 (hot magenta),
   companions #8A0FAE/#E14BE0/#A93BC4/#4A0865, dark #1C0526,
   tint #F6F0FA, line #E6DFF0, ink #241832, muted #8A8098 */
:root{
  --tone:#2A0049; --accent:#D200D2; --violet:#8A0FAE; --pink:#E14BE0;
  --dark:#1C0526; --tint:#F6F0FA; --line:#E6DFF0; --ink:#241832; --muted:#8A8098;
  --disp:"Fraunces", Georgia, serif;
  --body:system-ui, "Segoe UI", -apple-system, sans-serif;
}
*{box-sizing:border-box; margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--body); color:var(--ink); background:#fff; line-height:1.55; overflow-x:clip}
.hidden{display:none}
img,svg{display:block}

/* ---------- nav ---------- */
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px clamp(16px,5vw,56px); position:sticky; top:0; background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line); z-index:10}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--tone);
  font-family:var(--disp); font-size:21px; font-weight:600; letter-spacing:.01em}
.brand b{color:var(--accent); font-weight:700}
.brand-mark{width:30px; height:30px}
.brand-mark.small{width:22px; height:22px}
.nav nav{display:flex; align-items:center; gap:clamp(12px,2.5vw,28px)}
.nav nav a{color:var(--ink); text-decoration:none; font-size:14.5px}
.nav nav a:hover{color:var(--accent)}

/* ---------- buttons ---------- */
.btn{display:inline-block; background:linear-gradient(100deg,var(--violet),var(--accent));
  color:#fff; text-decoration:none; font-weight:600; font-size:15px; border:0; cursor:pointer;
  padding:13px 26px; border-radius:10px; box-shadow:0 6px 18px rgba(210,0,210,.25)}
.btn:hover{filter:brightness(1.08)}
.btn-small{padding:9px 18px; font-size:13.5px}
.btn-ghost{background:none; color:var(--tone); box-shadow:none; border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent); filter:none}

/* ---------- hero ---------- */
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,64px); align-items:center;
  padding:clamp(48px,8vh,96px) clamp(16px,5vw,56px); background:
  radial-gradient(900px 480px at 85% -10%, rgba(210,0,210,.10), transparent 60%),
  radial-gradient(700px 420px at -10% 110%, rgba(138,15,174,.08), transparent 60%), #fff}
.eyebrow{font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--violet); margin-bottom:14px}
.hero h1{font-family:var(--disp); font-weight:600; font-size:clamp(34px,4.6vw,58px); line-height:1.08; color:var(--tone); text-wrap:balance}
.hero h1 em{font-style:normal; background:linear-gradient(100deg,var(--violet),var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{font-size:clamp(16px,1.6vw,18.5px); color:#4b3f5c; max-width:56ch; margin-top:18px}
.hero-cta{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap}

/* product mock */
.hero-visual{min-width:0}
.mock{background:var(--dark); border-radius:16px; padding:0 0 18px; box-shadow:0 30px 70px rgba(42,0,73,.35); overflow:hidden}
.mock-bar{display:flex; align-items:center; gap:7px; padding:12px 16px; background:rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.08)}
.mock-bar .dot{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.22)}
.mock-title{margin-left:10px; color:#CBB8DE; font-size:12.5px}
.mock-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:16px}
.mock-col h5{color:#9F87B8; font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin:2px 0 10px}
.mock-card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); border-radius:10px; padding:12px; margin-bottom:10px}
.mock-card.hot{border-color:rgba(210,0,210,.55); box-shadow:0 0 0 1px rgba(210,0,210,.3)}
.mock-card i{display:block; font-style:normal; color:#EDE4F6; font-size:12.5px; font-weight:600; margin-bottom:9px}
.mock-card s{display:block; height:6px; border-radius:3px; background:rgba(255,255,255,.14); text-decoration:none; margin-bottom:6px}
.chip{display:inline-block; font-style:normal; font-size:10.5px; font-weight:700; color:#fff;
  background:linear-gradient(100deg,var(--violet),var(--accent)); padding:3px 9px; border-radius:99px; margin-top:4px}
.chip.alt{background:rgba(255,255,255,.12); color:#D9C9EA}

/* ---------- sections ---------- */
.section{padding:clamp(56px,9vh,104px) clamp(16px,5vw,56px); max-width:1180px; margin:0 auto}
.section h2{font-family:var(--disp); font-weight:600; font-size:clamp(26px,3.2vw,40px); color:var(--tone); line-height:1.15; max-width:24ch; text-wrap:balance}
.grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:40px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 24px}
.card h3{font-size:17px; color:var(--tone); margin-bottom:10px}
.card p{font-size:14.5px; color:#4b3f5c}

/* dark workflow band */
.section-dark{max-width:none; background:linear-gradient(160deg,var(--dark),var(--tone))}
.section-dark .eyebrow{color:var(--pink)}
.section-dark h2{color:#fff; margin:0 auto; text-align:center}
.section-dark .eyebrow{text-align:center}
.flow{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; list-style:none; padding:0;
  max-width:1180px; margin:44px auto 0; counter-reset:step}
.flow li{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:12px;
  padding:18px 16px; counter-increment:step}
.flow li::before{content:counter(step,decimal-leading-zero); display:block; font-family:var(--disp);
  color:var(--pink); font-weight:700; font-size:15px; margin-bottom:8px}
.flow b{display:block; color:#fff; font-size:15px; margin-bottom:6px}
.flow span{color:#C9B6DC; font-size:12.5px; line-height:1.4; display:block}

/* tint band + form */
.section-tint{max-width:none; background:var(--tint)}
.demo-wrap{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,5vw,72px); max-width:1180px; margin:0 auto; align-items:start}
form{background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px; display:grid; gap:16px}
form label{display:grid; gap:6px; font-size:13.5px; font-weight:600; color:var(--tone)}
.opt{color:var(--muted); font-weight:400}
form input, form textarea{font:inherit; padding:11px 12px; border:1.5px solid var(--line); border-radius:9px; background:#fff; color:var(--ink)}
form input:focus, form textarea:focus{outline:none; border-color:var(--accent)}
form .btn{justify-self:start; margin-top:4px}

/* ---------- feature pages ---------- */
.page-hero{padding:clamp(40px,7vh,72px) clamp(16px,5vw,56px) clamp(24px,4vh,40px); max-width:1180px; margin:0 auto}
.page-hero h1{font-family:var(--disp); font-weight:600; font-size:clamp(30px,3.8vw,48px); line-height:1.1; color:var(--tone); max-width:22ch; text-wrap:balance}
.split{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,64px); align-items:center; max-width:1180px; margin:0 auto; padding:clamp(28px,5vh,56px) clamp(16px,5vw,56px)}
.split h2{font-family:var(--disp); font-weight:600; font-size:clamp(22px,2.6vw,32px); color:var(--tone); line-height:1.18; text-wrap:balance}
.split .lede{font-size:15.5px; margin-top:14px}
.checklist{list-style:none; padding:0; margin-top:18px; display:grid; gap:11px}
.checklist li{position:relative; padding-left:28px; font-size:14.5px; color:#4b3f5c}
.checklist li::before{content:""; position:absolute; left:0; top:3px; width:16px; height:16px; border-radius:50%;
  background:linear-gradient(120deg,var(--violet),var(--accent))}
.checklist li::after{content:""; position:absolute; left:4.5px; top:7.5px; width:7px; height:4px;
  border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg)}
.checklist b{color:var(--tone)}
/* generic dark panel mocks on feature pages */
.panel{background:var(--dark); border-radius:14px; padding:18px; box-shadow:0 24px 54px rgba(42,0,73,.28)}
.panel h6{color:#9F87B8; font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 12px}
.rowline{display:flex; align-items:center; justify-content:space-between; gap:10px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09); border-radius:9px; padding:10px 12px; margin-bottom:8px}
.rowline i{font-style:normal; color:#EDE4F6; font-size:12.5px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rowline small{color:#B49BCB; font-size:11px; white-space:nowrap}
.loglines{margin-top:12px}
.loglines p{color:#C9B6DC; font-size:11.5px; padding:5px 2px; border-top:1px dashed rgba(255,255,255,.12); margin:0}
.loglines p b{color:var(--pink); font-weight:600}
/* bars chart mock */
.bars{display:flex; align-items:flex-end; gap:8px; height:150px; padding:6px 2px 0}
.bars s{flex:1; border-radius:5px 5px 0 0; text-decoration:none;
  background:linear-gradient(180deg,var(--pink),var(--violet))}
.bars s.dim{background:rgba(255,255,255,.16)}
.axis{display:flex; gap:8px; margin-top:8px}
.axis em{flex:1; text-align:center; font-style:normal; color:#9F87B8; font-size:10px}
/* chat mock (AI page) */
.chat{display:grid; gap:10px}
.bubble{border-radius:11px; padding:11px 13px; font-size:12.5px; line-height:1.45; max-width:92%}
.bubble.in{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); color:#E6DAF2; justify-self:start}
.bubble.ai{background:linear-gradient(120deg,rgba(138,15,174,.45),rgba(210,0,210,.35)); border:1px solid rgba(210,0,210,.5); color:#fff; justify-self:end}
.bubble .who{display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; opacity:.75; margin-bottom:5px}
.suggest{margin-top:4px; border:1px dashed rgba(210,0,210,.55); border-radius:11px; padding:11px 13px}
.suggest h6{margin-bottom:8px}
.suggest .chip{margin:0 6px 6px 0}
/* capability pill row */
.pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.pills a{text-decoration:none; font-size:13px; font-weight:600; color:var(--tone); background:#fff;
  border:1.5px solid var(--line); border-radius:99px; padding:9px 16px}
.pills a:hover{border-color:var(--accent); color:var(--accent)}
.section-tint .pills a{background:#fff}
/* homepage card links */
.card a.more{display:inline-block; margin-top:12px; font-size:13.5px; font-weight:700; color:var(--accent); text-decoration:none}
.card a.more:hover{text-decoration:underline}
/* footer links */
.foot-links{display:flex; flex-wrap:wrap; gap:4px 18px}
.foot-links a{color:#C9B6DC; text-decoration:none; font-size:12.5px}
.foot-links a:hover{color:#fff}

/* ---------- footer ---------- */
footer{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:28px clamp(16px,5vw,56px); background:var(--dark); color:#B9A6C9; font-size:13.5px}
footer > div{display:flex; align-items:center; gap:10px}
.foot-note{color:#8A6FA5}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split.rev .panel{order:2}
  .grid,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .demo-wrap{grid-template-columns:1fr}
}
@media (max-width:620px){
  .nav{padding:12px 14px}
  .nav nav a:not(.btn){display:none}
  .brand{font-size:18px; gap:8px}
  .brand-mark{width:25px; height:25px}
  .btn-small{padding:8px 13px; font-size:12.5px}
  .grid,.grid-3{grid-template-columns:1fr}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mock-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mock-col:nth-child(3){display:none}
}