/* ---------- service detail page overrides ---------- */
#header-logo-slot{ opacity:1 !important; }
header.scrolled{ background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }

.svc-hero{ padding:160px clamp(20px,4vw,56px) 100px; position:relative; overflow:hidden; }
.svc-hero-inner{ max-width:1360px; margin:0 auto; display:flex; gap:64px; align-items:center; flex-wrap:wrap; position:relative; z-index:2; }
.svc-hero-left{ flex:1 1 480px; }
.svc-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.svc-tag{ font-family:"Space Mono",monospace; font-weight:700; font-size:12px; letter-spacing:.05em; border:1.5px solid var(--ink); border-radius:99px; padding:7px 16px; color:var(--ink); }
.svc-hero-title{ font-weight:900; font-size:clamp(2.6rem,5.6vw,4.6rem); line-height:1.15; letter-spacing:-.01em; margin-bottom:32px; }
.mkr{ position:relative; display:inline-block; }
.mkr::after{ content:""; position:absolute; left:-3px; right:-3px; bottom:0.02em; height:0.36em; background:var(--hl-color, var(--acc-01)); opacity:.5; z-index:-1; border-radius:2px; }
.svc-hero-title .accent{ background:linear-gradient(90deg, var(--ink) 0%, var(--acc-01) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.svc-hero-lead{ font-size:17px; line-height:2; color:var(--ink-dim); max-width:520px; margin-bottom:40px; text-wrap:pretty; }
.svc-hero-actions{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; }

.svc-btn-primary{
  display:inline-flex; align-items:center; gap:12px; background:var(--glitch-a); color:#fff; font-weight:700; font-size:16px;
  letter-spacing:.02em; padding:19px 36px; border-radius:999px; text-decoration:none; border:none; cursor:pointer;
  transition:background-color .25s ease, color .25s ease;
}
.svc-btn-primary:hover{ background:#fff; color:var(--glitch-a); box-shadow:inset 0 0 0 1.5px var(--glitch-a); }
.svc-btn-primary .circ{ width:26px; height:26px; border-radius:99px; border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center; flex:none; }

.svc-btn-secondary{ display:flex; flex-direction:column; align-items:flex-start; font-family:"Space Mono",monospace; font-weight:700; font-size:16px; letter-spacing:.05em; color:var(--ink); text-decoration:none; }
.svc-btn-secondary-line{ position:relative; width:130px; height:2px; background:var(--ink); margin-top:8px; transition:width .35s cubic-bezier(.22,1,.36,1); }
.svc-btn-secondary-line::after{ content:""; position:absolute; right:0; top:0; width:9px; height:2px; background:var(--ink); transform-origin:100% 50%; transform:rotate(45deg); }
.svc-btn-secondary:hover .svc-btn-secondary-line{ width:160px; }

.svc-hero-right{ flex:1 1 420px; max-width:520px; position:relative; z-index:2; }
.svc-media{ aspect-ratio:4/3; border-radius:28px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:0 30px 60px -20px rgba(0,0,0,.25); background:linear-gradient(160deg,var(--acc-01),#0a3f4d); }
.svc-media svg{ width:120%; height:120%; }

.svc-section{ padding:100px clamp(20px,4vw,56px) 120px; border-top:1px solid var(--border); }
.svc-section-inner{ max-width:1360px; margin:0 auto; }
.svc-section-top{ text-align:center; margin-bottom:64px; }
.svc-section-heading{ font-weight:900; font-size:clamp(2.6rem,5vw,4.2rem); line-height:1.3; letter-spacing:-.01em; }

.reasons-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
@media(max-width:900px){ .reasons-grid{ grid-template-columns:1fr; } }
.reason-card{ background:#fff; border:1px solid var(--border); border-radius:24px; overflow:hidden; }
.reason-media{ aspect-ratio:16/10; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.reason-media svg{ width:130%; height:130%; }
.reason-body{ padding:36px 32px; }
.reason-label{ font-family:"Space Mono",monospace; font-weight:700; font-size:13px; letter-spacing:.1em; margin-bottom:16px; }
.reason-title{ font-weight:900; font-size:1.7rem; line-height:1.45; margin-bottom:20px; letter-spacing:.02em; }
.reason-desc{ font-size:15.5px; line-height:2.05; color:var(--ink-dim); letter-spacing:.03em; text-wrap:pretty; }

.flow-list{ max-width:820px; margin:0 auto; position:relative; }
.flow-line-track{ position:absolute; left:27px; top:28px; bottom:28px; width:2px; background:var(--border); }
.flow-line-progress{ position:absolute; left:27px; top:28px; width:2px; height:0; background:var(--acc-01); transition:height .1s linear; }
.flow-step{ display:flex; gap:32px; padding:34px 0; align-items:flex-start; position:relative; z-index:1; }
.flow-num{ flex:none; width:56px; height:56px; border-radius:99px; border:1.5px solid var(--ink); background:#fff; display:flex; align-items:center; justify-content:center; font-family:"Space Mono",monospace; font-weight:700; font-size:17px; }
.flow-step.done .flow-num{ border-color:var(--acc-01); color:var(--acc-01); }
.flow-body{ padding-top:8px; max-width:640px; }
.flow-step-label{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.1em; color:var(--cyan); font-weight:700; margin-bottom:10px; }
.flow-title{ font-weight:900; font-size:1.5rem; margin-bottom:14px; letter-spacing:.02em; }
.flow-desc{ font-size:15.5px; line-height:2.05; color:var(--ink-dim); letter-spacing:.03em; text-wrap:pretty; }
.flow-step.goal .flow-num{ background:var(--acc-01); border-color:var(--acc-01); color:#fff; }
.flow-step.goal .flow-title{ color:var(--acc-01); }

/* pricing */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:stretch; }
@media(max-width:900px){ .price-grid{ grid-template-columns:1fr; } }
.price-card{ border:1px solid var(--border); border-radius:24px; padding:40px 32px; display:flex; flex-direction:column; }
.price-card.featured{ background:linear-gradient(160deg,var(--acc-01),#0a3f4d); color:#fff; border:none; position:relative; }
.price-badge{ position:absolute; top:28px; right:28px; background:#fff; color:var(--acc-01); font-weight:700; font-size:12px; padding:6px 14px; border-radius:99px; }
.price-name{ font-weight:700; font-size:19px; margin-bottom:18px; letter-spacing:.03em; }
.price-amount{ font-weight:900; font-size:3.4rem; margin-bottom:20px; letter-spacing:-.01em; }
.price-amount span{ font-size:1.1rem; font-weight:700; }
.price-desc{ font-size:15.5px; line-height:1.95; opacity:.85; margin-bottom:28px; letter-spacing:.02em; text-wrap:pretty; }
.price-list{ border-top:1px solid rgba(0,0,0,.1); padding-top:20px; display:flex; flex-direction:column; gap:12px; margin-top:auto; }
.price-card.featured .price-list{ border-top-color:rgba(255,255,255,.25); }
.price-list li{ list-style:none; display:flex; gap:10px; font-size:15px; line-height:1.85; letter-spacing:.02em; text-wrap:pretty; }
.price-list li::before{ content:"✓"; font-weight:700; flex:none; }

.price-options{ margin-top:64px; border-top:1px solid var(--border); padding-top:48px; max-width:1000px; margin-left:auto; margin-right:auto; }
.price-options-title{ display:flex; align-items:center; gap:12px; font-weight:900; font-size:1.3rem; margin-bottom:32px; }
.price-options-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 48px; }
@media(max-width:700px){ .price-options-grid{ grid-template-columns:1fr; } }
.price-option-row{ display:flex; justify-content:space-between; gap:16px; padding:19px 0; border-bottom:1px solid var(--border); font-size:15.5px; letter-spacing:.02em; }
.price-option-row span:last-child{ font-weight:700; }

/* faq */
.faq-list{ max-width:820px; margin:0 auto; border-top:1px solid var(--border); }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 4px; background:none; border:none; text-align:left; font-family:inherit; font-size:16.5px; font-weight:700; color:var(--ink); cursor:pointer; }
.faq-q-icon{ width:28px; height:28px; border-radius:99px; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; flex:none; transition:transform .3s ease, border-color .3s ease; }
.faq-item.open .faq-q-icon{ transform:rotate(45deg); border-color:var(--ink); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.22,1,.36,1); }
.faq-item.open .faq-a{ max-height:200px; }
.faq-a-inner{ padding:0 40px 28px 4px; font-size:14.5px; line-height:2; color:var(--ink-dim); text-wrap:pretty; }

/* cta */
.svc-cta-card{ max-width:1360px; margin:0 auto; border-radius:36px; overflow:hidden; padding:clamp(48px,7vw,90px) clamp(24px,5vw,64px); position:relative; background:linear-gradient(150deg, var(--acc-01), #04191e 85%); color:#fff; text-align:center; }
.svc-cta-eyebrow{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.15em; color:rgba(255,255,255,.6); text-transform:uppercase; font-weight:700; margin-bottom:22px; }
.svc-cta-heading{ font-weight:900; font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.2; margin-bottom:28px; }
.svc-cta-lead{ font-size:15.5px; line-height:2; color:rgba(255,255,255,.78); max-width:520px; margin:0 auto 40px; text-wrap:pretty; }
.svc-cta-btn{ display:inline-flex; align-items:center; gap:12px; background:#fff; color:var(--ink); font-weight:700; font-size:16px; padding:19px 38px; border-radius:999px; text-decoration:none; border:1.5px solid #fff; transition:background-color .25s ease, color .25s ease; }
.svc-cta-btn:hover{ background:transparent; color:#fff; }
.svc-cta-btn .circ{ width:26px; height:26px; border-radius:99px; border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center; flex:none; }
#header-logo-slot{ opacity:1 !important; }
header.scrolled{ background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }

:root{ --md-p:#0891b2; --md-p-dark:#0a3f4d; --md-p-deep:#052128; --md-pink:#ff3d81; --md-pink-dark:#b8215c; --md-ink:#18140f; }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ================= HERO ================= */
.md-hero{
  position:relative; overflow:hidden; padding:130px clamp(20px,4vw,56px) 0;
  background:linear-gradient(180deg, #dcf3f6 0%, #e3f6fa 55%, #ffffff 100%);
}
.md-hero-blob-shape{ position:absolute; top:0; left:0; width:100%; height:auto; z-index:0; }
.md-hero-grid{ max-width:1360px; margin:0 auto; display:grid; grid-template-columns:1.02fr 0.98fr; gap:8px; align-items:center; padding-top:20px; padding-bottom:70px; position:relative; z-index:2; }
@media(max-width:980px){ .md-hero-grid{ grid-template-columns:1fr; gap:32px; padding-top:24px; } }
@media(max-width:768px){ .md-hero{ padding:56px clamp(20px,5vw,32px) 0; } }
@media(max-width:768px){ .md-hero-illust.md-hero-illust-photo{ height:280px; } }
.md-hero-wordmark{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.md-hero-wordmark .w1{ font-weight:900; font-size:clamp(2.6rem,5.4vw,4.4rem); letter-spacing:-.02em; color:var(--md-ink); line-height:1; }
.md-hero-wordmark .w2{ font-weight:900; font-size:clamp(2.6rem,5.4vw,4.4rem); letter-spacing:-.02em; color:var(--md-p-dark); line-height:1; }

.md-hero-wordmark-wrap{ max-width:1360px; margin:0 auto; padding:0 clamp(20px,4vw,56px); text-align:center; position:relative; z-index:2; }
.md-hero-wordmark-solo{ display:inline-block; font-weight:900; white-space:nowrap; font-size:clamp(2.2rem,7vw,5.6rem); letter-spacing:-.02em; line-height:1; margin-bottom:40px; background:linear-gradient(95deg, var(--md-ink) 0%, var(--md-p-dark) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

.md-hero-textcol{ max-width:640px; margin:0 auto; }
.md-hero-title-big{ text-align:center; font-size:clamp(2.1rem,3.6vw,3.1rem); white-space:nowrap !important; text-wrap:nowrap !important; position:relative; z-index:3; margin-bottom:0; }
.md-trust-row-overlap{ justify-content:center; margin-top:-44px; margin-bottom:14px; position:relative; z-index:2; }

.circ2-plain{ background:#fff; color:var(--md-ink); font-weight:700; font-size:20px; line-height:1.5; text-align:center; display:flex; align-items:center; justify-content:center; padding:10px; }

.md-hero-illust-photo{ height:auto; display:flex; align-items:center; justify-content:center; }

.md-stats-after-method{ border-top:1px solid var(--border); }
.md-hero-subbrand{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.15em; color:var(--ink-dim); font-weight:700; margin-bottom:30px; }
.md-hero-title{ font-weight:900; font-size:clamp(2.1rem,3.8vw,3.2rem); line-height:1.35; letter-spacing:-.01em; margin-bottom:26px; text-wrap:pretty; }
.md-hero-title .gold{ background:linear-gradient(90deg, var(--md-ink) 0%, var(--md-p-dark) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.md-hero-sub{ font-size:21px; font-weight:700; letter-spacing:1px; line-height:1.9; color:#303030; max-width:560px; margin:0 auto 32px; text-align:center; }
.md-hero-cta-row{ display:flex; align-items:center; justify-content:center; gap:30px; flex-wrap:wrap; }
.md-hero-cta{
  display:inline-flex; align-items:center; gap:12px; background:var(--md-p); color:#fff; font-weight:700; font-size:16px;
  letter-spacing:.02em; padding:19px 36px; border-radius:999px; text-decoration:none;
  transition:background-color .25s ease, color .25s ease, box-shadow .25s ease;
  box-shadow:0 16px 32px -12px rgba(139,92,246,.5);
}
.md-hero-cta:hover{ background:var(--md-p-dark); }
.md-hero-cta .circ{ width:26px; height:26px; border-radius:99px; border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center; flex:none; }
.md-hero-note{ font-family:"Space Mono",monospace; font-size:12px; color:var(--ink-dim); letter-spacing:.03em; }
.md-hero-cta-outline{ display:inline-flex; align-items:center; font-weight:700; font-size:16px; color:var(--md-p-dark); text-decoration:none; padding:19px 34px; border-radius:999px; border:2px solid var(--md-p); transition:background-color .25s ease, color .25s ease; }
.md-hero-cta-outline:hover{ background:var(--md-p); color:#fff; }

/* illustration */
.md-hero-illust{ position:relative; height:520px; }
.md-illust-float{ position:absolute; background:#fff; border-radius:99px; box-shadow:0 14px 30px -12px rgba(58,36,112,.28); padding:12px 18px; font-size:12.5px; font-weight:700; color:var(--md-ink); display:flex; align-items:center; gap:8px; z-index:3; }

.md-stats{ background:#faf9fc; position:relative; z-index:2; }
.md-stats-inner{ max-width:1360px; margin:0 auto; padding:44px clamp(20px,4vw,56px); display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
@media(max-width:800px){ .md-stats-inner{ grid-template-columns:1fr 1fr; } }
.md-stat-num{ font-weight:900; font-size:clamp(1.8rem,3vw,2.4rem); color:var(--md-p-dark); letter-spacing:-.01em; }
.md-stat-label{ font-family:"Space Mono",monospace; font-size:11.5px; letter-spacing:.08em; color:var(--ink-dim); margin-top:8px; text-transform:uppercase; }

/* ================= shared ================= */
.md-section{ padding:130px clamp(20px,4vw,56px); }
.md-section-inner{ max-width:1220px; margin:0 auto; }
.md-eyebrow{ display:flex; align-items:center; gap:10px; justify-content:center; font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.2em; color:var(--md-p-dark); text-transform:uppercase; font-weight:700; margin-bottom:24px; }
.md-eyebrow::before, .md-eyebrow::after{ content:""; width:26px; height:1.5px; background:var(--md-p); opacity:.5; }
.md-heading{ font-weight:900; font-size:clamp(2.1rem,3.8vw,3.2rem); line-height:1.4; text-align:center; letter-spacing:-.01em; max-width:820px; margin:0 auto 24px; text-wrap:pretty; }
.md-section-lead{ text-align:center; font-size:16.5px; line-height:1.95; color:var(--ink-dim); max-width:600px; margin:0 auto 84px; }

/* ================= problems ================= */
.md-problem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
@media(max-width:900px){ .md-problem-grid{ grid-template-columns:1fr; } }
@media(max-width:640px){ .md-heading{ font-size:clamp(1.5rem,7vw,2rem); } .nowrap-part{ white-space:nowrap; } }
@media(max-width:768px){ .md-section{ padding:56px clamp(20px,5vw,32px); } }
.md-problem{ border:1px solid var(--border); border-radius:24px; overflow:hidden; background:#fff; }
.md-problem-media{ aspect-ratio:16/11; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#dcf3f6; }
.md-problem-media svg{ width:44%; height:44%; }
.md-problem-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.md-problem-body{ padding:32px 30px 36px; }
.md-problem-num{ font-family:"Space Mono",monospace; font-weight:700; font-size:12px; letter-spacing:.1em; color:var(--md-p-dark); margin-bottom:14px; }
.md-problem-title{ font-weight:900; font-size:1.35rem; margin-bottom:16px; line-height:1.5; }
.md-problem-desc{ font-size:15px; line-height:1.95; color:var(--ink-dim); }

/* ================= solution ================= */
.md-solution{ display:flex; gap:80px; align-items:center; flex-wrap:wrap; }
.md-solution-media{ flex:1 1 480px; }
.md-solution-text{ flex:1 1 440px; }
.md-solution-eyebrow{ display:flex; align-items:center; gap:10px; font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.18em; color:var(--md-p-dark); text-transform:uppercase; font-weight:700; margin-bottom:22px; }
.md-solution-eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--md-p); opacity:.5; }
.md-solution-heading{ font-weight:900; font-size:clamp(2.1rem,3.8vw,3rem); line-height:1.5; margin-bottom:28px; letter-spacing:-.005em; }
.md-solution-body{ font-size:16px; line-height:2.05; color:var(--ink-dim); }
.md-solution-body strong{ color:var(--md-ink); }

/* ---------- real photo background section ---------- */
.md-photo-section{
  position:relative; overflow:hidden; padding:140px clamp(20px,4vw,56px);
  background-image:url('../img/media-design/md-bg1.jpg');
  background-size:cover; background-position:center; background-attachment:fixed;
}
.md-photo-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg, rgba(14,24,48,.8), rgba(26,42,92,.62) 55%, rgba(184,33,92,.4));
}
@media(max-width:800px){ .md-photo-section{ background-attachment:scroll; } }
.md-browser-mock{ background:var(--md-p-deep); border-radius:22px; overflow:hidden; box-shadow:0 50px 90px -35px rgba(36,20,84,.5); }
.md-browser-bar{ display:flex; align-items:center; gap:6px; padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.1); }
.md-browser-bar span{ width:10px; height:10px; border-radius:99px; background:rgba(255,255,255,.3); }
.md-browser-bar .url{ margin-left:16px; font-family:"Space Mono",monospace; font-size:11px; color:rgba(255,255,255,.4); background:rgba(255,255,255,.06); padding:5px 14px; border-radius:6px; }
.md-browser-body{ padding:36px; }
.md-browser-body .l{ height:12px; border-radius:6px; background:rgba(255,255,255,.14); margin-bottom:16px; }
.md-browser-body .l.gold{ background:linear-gradient(90deg,#ff3d81,#0891b2); width:38%; height:10px; margin-bottom:26px; }
.md-browser-body .l.w95{ width:95%; } .md-browser-body .l.w80{ width:80%; } .md-browser-body .l.w60{ width:60%; }
.md-browser-thumbs{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-top:26px; }
.md-browser-thumbs div{ aspect-ratio:4/3; border-radius:12px; background:rgba(255,255,255,.08); position:relative; overflow:hidden; }
.md-browser-thumbs div::after{ content:""; position:absolute; inset:0; background:linear-gradient(155deg,rgba(139,92,246,.35),transparent); }

/* ================= pillars ================= */
.md-pillar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
@media(max-width:980px){ .md-pillar-grid{ grid-template-columns:1fr; } }
.md-pillar{ border-radius:28px; overflow:hidden; background:#fff; border:1px solid var(--border); display:flex; flex-direction:column; position:relative; }
.md-pillar-media{ aspect-ratio:16/12; position:relative; overflow:hidden; background:#eef2f2; }
.md-pillar-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.md-pillar-body{ padding:32px 30px 38px; flex:1; display:flex; flex-direction:column; position:relative; }
.md-pillar-num{ position:absolute; right:18px; bottom:-6px; z-index:0; font-family:"Space Mono",monospace; font-weight:700; font-size:6.5rem; color:#eef1f1; line-height:1; letter-spacing:-.02em; pointer-events:none; }
.md-pillar-title{ position:relative; z-index:1; font-weight:900; font-size:1.4rem; line-height:1.55; margin-bottom:18px; text-wrap:pretty; }
.md-pillar-desc{ position:relative; z-index:1; font-size:14.5px; line-height:1.95; color:var(--ink-dim); }

/* ================= plans ================= */
.md-plans-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
@media(max-width:900px){ .md-plans-grid{ grid-template-columns:1fr; } }
.md-plan-card{ border:1.5px solid var(--border); border-radius:28px; padding:0; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.md-plan-card.mid{ border-color:var(--md-p); box-shadow:0 30px 55px -28px rgba(58,36,112,.3); position:relative; }
.md-plan-top{ padding:32px 32px 0; }
.md-plan-badge{ position:absolute; top:-1px; right:28px; background:var(--md-p); color:#fff; font-family:"Space Mono",monospace; font-weight:700; font-size:11px; letter-spacing:.06em; padding:8px 16px; border-radius:0 0 10px 10px; }
.md-plan-tag{ font-family:"Space Mono",monospace; font-weight:700; font-size:12.5px; letter-spacing:.1em; color:var(--md-p-dark); margin-bottom:16px; }
.md-plan-name{ font-weight:700; font-size:1.15rem; color:var(--ink-dim); margin-bottom:16px; }
.md-plan-price{ font-weight:900; font-size:3.1rem; color:var(--md-pink); margin-bottom:10px; letter-spacing:-.01em; text-align:center; }
.md-plan-price-note{ text-align:left; margin-bottom:20px; }
.md-plan-price-note span{ display:inline-block; font-family:"Space Mono",monospace; font-size:14px; font-weight:700; color:var(--md-p-dark); letter-spacing:.05em; background:#e3f6fa; border:1px solid #cceef2; padding:7px 18px; border-radius:99px; }
.md-plan-for{ font-size:13.5px; color:var(--ink-dim); background:#f5f5f5; display:inline-block; padding:8px 14px; border-radius:8px; margin-bottom:24px; }
.md-plan-body{ padding:0 32px 34px; flex:1; }
.md-plan-desc{ font-size:15px; line-height:2; color:var(--ink-dim); }
.md-plan-list{ margin-top:20px; display:flex; flex-direction:column; gap:11px; }
.md-plan-list li{ list-style:none; display:flex; gap:10px; font-size:13.5px; font-weight:700; color:var(--md-ink); }
.md-plan-list li::before{ content:"✓"; color:var(--md-p); flex:none; }

/* ================= price table ================= */
.md-price-table{ border-top:1.5px solid var(--md-ink); }
.md-price-row{ display:grid; grid-template-columns:1fr 2fr 1fr; gap:24px; padding:34px 8px; border-bottom:1px solid var(--border); align-items:center; }
@media(max-width:700px){ .md-price-row{ grid-template-columns:1fr; gap:10px; } }
.md-price-row.head{ font-family:"Space Mono",monospace; font-size:12.5px; letter-spacing:.08em; color:var(--ink-dim); text-transform:uppercase; padding-top:20px; padding-bottom:20px; }
.md-price-plan{ font-weight:900; font-size:1.2rem; }
.md-price-detail{ font-size:15px; color:var(--ink-dim); line-height:1.9; }
.md-price-amount{ font-weight:900; font-size:1.3rem; text-align:right; }
@media(max-width:700px){ .md-price-amount{ text-align:left; } }

/* ================= flow ================= */
.md-flow-row{ display:flex; align-items:stretch; gap:0; position:relative; }
@media(max-width:900px){ .md-flow-row{ flex-direction:column; gap:6px; } }
@media(max-width:900px){ .md-flow-card{ padding:40px 20px 24px; } }
.md-flow-step{ flex:1; text-align:center; padding-top:36px; position:relative; }
@media(max-width:900px){ .md-flow-step{ padding-top:20px; } }
.md-flow-arrow{ flex:0 0 auto; display:flex; align-items:center; align-self:stretch; padding-top:112px; color:var(--md-p); }
@media(max-width:900px){
  .md-flow-arrow{
    padding-top:0; align-self:center; align-items:center; justify-content:center;
    width:28px; height:28px; margin:0 auto;
  }
  .md-flow-arrow svg{ transform:rotate(90deg); display:block; }
}
.md-flow-num{
  width:76px; height:76px; border-radius:99px; background:linear-gradient(155deg,var(--md-p),var(--md-p-dark)); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0 auto -38px; position:relative; z-index:2;
  box-shadow:0 14px 26px -10px rgba(58,36,112,.5);
}
.md-flow-num .st{ font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.1em; opacity:.85; }
.md-flow-num .n{ font-family:"Space Mono",monospace; font-weight:700; font-size:24px; }
.md-flow-card{ background:#fff; border:3px solid var(--md-p); border-radius:18px; padding:56px 20px 28px; height:100%; }
.md-flow-title{ font-weight:900; font-size:1.35rem; margin-bottom:14px; }
.md-flow-desc{ font-size:16px; line-height:1.85; color:var(--ink-dim); text-wrap:pretty; }

/* ================= final cta ================= */
.md-cta-card{ width:100%; margin:0 auto; overflow:hidden; padding:clamp(56px,7vw,100px) clamp(24px,5vw,64px); position:relative; background:linear-gradient(150deg, #0891b2, var(--md-p-deep) 78%); color:#fff; text-align:center; }
.md-cta-eyebrow{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.18em; color:rgba(255,255,255,.7); text-transform:uppercase; font-weight:700; margin-bottom:26px; }
.md-cta-heading{ font-weight:900; font-size:clamp(2.1rem,4.4vw,3.3rem); line-height:1.5; margin-bottom:28px; max-width:800px; margin-left:auto; margin-right:auto; }
.md-cta-lead{ font-size:16.5px; line-height:2; color:rgba(255,255,255,.78); max-width:500px; margin:0 auto 46px; }

/* ================= wave divider ================= */
.md-wave{ display:block; width:100%; height:70px; position:relative; z-index:1; }
.md-wave.flip{ transform:scaleY(-1); }

/* ================= hero blobs ================= */
.md-hero-blob{ position:absolute; border-radius:50%; opacity:.45; z-index:0; pointer-events:none; }

/* ================= trust badges ================= */
.md-trust-row{ display:flex; gap:28px; flex-wrap:wrap; margin-bottom:16px; position:relative; z-index:2; }
.md-trust-badge{ display:flex; flex-direction:column; align-items:center; text-align:center; width:172px; }
.md-trust-badge .circ2{ width:154px; height:154px; border-radius:99px; background:#fff; box-shadow:0 18px 34px -14px rgba(58,36,112,.4); display:flex; align-items:center; justify-content:center; margin-bottom:14px; border:3px solid #fff; }
.md-trust-badge .circ2 svg{ color:var(--md-p); }
.md-trust-badge .txt{ font-size:15px; font-weight:700; color:var(--md-ink); line-height:1.65; letter-spacing:.02em; }
.md-trust-badge .dot{ width:24px; height:24px; border-radius:99px; background:var(--md-p); display:flex; align-items:center; justify-content:center; flex:none; color:#fff; }

/* ================= stakeholder problems ================= */
.md-stake-wrap{ position:relative; max-width:1400px; margin:0 auto; min-height:820px; }
.md-stake-center-img{ position:absolute; top:44%; left:50%; transform:translate(-50%,-50%); z-index:1; width:353px; }
.md-stake-center-img img{ width:100%; height:auto; display:block; }

.md-stake{ position:absolute; background:#fff; border:1.5px solid var(--border); border-radius:20px; padding:26px 30px 24px; box-shadow:0 20px 40px -28px rgba(47,107,255,.25); z-index:2; width:470px; }
.md-stake-1{ top:3%; left:0; }
.md-stake-4{ bottom:15%; left:8%; }
.md-stake-2{ top:7%; right:0; }
.md-stake-3{ bottom:10%; right:4%; }

.md-stake::after{ content:""; position:absolute; width:20px; height:20px; background:#fff; }
.md-stake-1::after{ bottom:40px; right:-9px; border-top:1.5px solid var(--border); border-right:1.5px solid var(--border); transform:rotate(45deg); }
.md-stake-2::after{ bottom:40px; left:-9px; border-bottom:1.5px solid var(--border); border-left:1.5px solid var(--border); transform:rotate(45deg); }
.md-stake-3::after{ top:56px; left:-9px; border-bottom:1.5px solid var(--border); border-left:1.5px solid var(--border); transform:rotate(45deg); }
.md-stake-4::after{ top:40px; right:-9px; border-top:1.5px solid var(--border); border-right:1.5px solid var(--border); transform:rotate(45deg); }

@media(max-width:980px){
  .md-stake-wrap{ min-height:0; display:flex; flex-direction:column; align-items:center; gap:44px; }
  .md-stake-center-img{ position:static; transform:none; order:-1; }
  .md-stake{ position:static; width:100%; max-width:460px; }
  .md-stake::after{ display:none; }
  .md-stake-role-badge{ display:none !important; }
}

.md-stake-role-badge{ position:absolute; top:-20px; left:28px; color:#fff; font-size:14px; font-weight:700; padding:10px 22px; border-radius:99px; letter-spacing:.02em; box-shadow:0 10px 20px -8px rgba(0,0,0,.35); z-index:3; }
.md-stake-1 .md-stake-role-badge{ background:var(--md-p); }
.md-stake-2 .md-stake-role-badge{ background:var(--md-pink-dark); }
.md-stake-3 .md-stake-role-badge{ background:var(--md-p-dark); }
.md-stake-4 .md-stake-role-badge{ background:var(--md-pink); }
.md-stake-title{ font-weight:900; font-size:1.4rem; margin:14px 0 16px; line-height:1.5; }
.md-stake-list{ display:flex; flex-direction:column; gap:9px; }
.md-stake-list li{ list-style:none; font-size:16px; line-height:1.75; color:var(--ink-dim); position:relative; padding-left:20px; }
.md-stake-list li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:99px; background:var(--md-p); }

/* ================= comparison table ================= */
.cmp-wrap{ position:relative; background:#eef7f8; border-radius:22px; padding:28px; overflow:visible; }
.cmp-grid{ display:grid; grid-template-columns:64px 168px 1fr 1fr 1.05fr; grid-template-rows:56px repeat(6, minmax(84px, auto)); }
.cmp-head{ grid-row:1; padding:0 14px 20px; font-family:"Space Mono",monospace; font-size:13px; font-weight:700; color:var(--ink-dim); text-align:center; align-self:end; }
.cmp-head.musina{ visibility:hidden; }
.cmp-cat{ grid-column:1; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; font-weight:700; font-size:15px; line-height:1.7; border-radius:10px; padding:10px 4px; writing-mode:vertical-rl; letter-spacing:.06em; }
.cmp-rowlabel{ display:flex; align-items:center; justify-content:center; text-align:center; font-weight:700; font-size:15.5px; padding:24px 10px; background:#fff; margin:2px 0; border-radius:2px; white-space:nowrap; }
.cmp-cell{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center; background:#fff; margin:2px 0; padding:20px 12px; }
.cmp-cell .sym{ font-size:30px; line-height:1; font-weight:700; }
.cmp-cell .sym.ok{ color:var(--md-p); } .cmp-cell .sym.mid{ color:#e8781f; } .cmp-cell .sym.no{ color:#e0396b; }
.cmp-cell .desc{ font-size:14.5px; font-weight:700; color:var(--ink-dim); line-height:1.5; }
.cmp-musina-col{ grid-column:5; grid-row:1 / -1; background:linear-gradient(165deg,var(--md-p-dark),var(--md-p-deep)); border-radius:20px; margin:-20px -20px -20px 8px; padding:22px 16px; display:flex; flex-direction:column; box-shadow:0 30px 60px -20px rgba(58,36,112,.5); position:relative; z-index:2; }
.cmp-musina-title{ color:#fff; font-weight:900; font-size:1.5rem; text-align:center; padding-bottom:24px; }
.cmp-musina-cell{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:16px 8px; }
.cmp-musina-cell .sym{ font-size:32px; color:#fff; font-weight:700; }
.cmp-musina-cell .desc{ font-size:15px; font-weight:700; color:#fff; line-height:1.5; }
@media(max-width:860px){
  .cmp-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding:20px 16px; }
  .cmp-grid{ grid-template-columns:44px 130px 110px 110px 130px; min-width:524px; }
  .cmp-rowlabel{ font-size:13px; padding:24px 6px; }
  .cmp-scroll-hint{ display:block; }
}
.cmp-scroll-hint{ display:none; text-align:right; font-size:13px; color:var(--md-p-dark); font-weight:700; margin:0 0 8px; }

/* ================= faq ================= */
.md-faq-list{ max-width:840px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
.md-faq-item{ border:1.5px solid var(--border); border-radius:16px; background:#fff; overflow:hidden; }
.md-faq-q{ width:100%; display:flex; align-items:center; gap:22px; padding:28px 30px; background:none; border:none; text-align:left; font-family:inherit; font-size:16.5px; font-weight:700; color:var(--md-ink); cursor:pointer; }
.md-faq-q .qmark{ flex:none; width:38px; height:38px; border-radius:99px; background:var(--md-p); color:#fff; display:flex; align-items:center; justify-content:center; font-family:"Space Mono",monospace; font-weight:700; font-size:17px; }
.md-faq-q .arrow{ margin-left:auto; flex:none; transition:transform .3s ease; color:var(--ink-dim); }
.md-faq-item.open .md-faq-q .arrow{ transform:rotate(180deg); }
.md-faq-a{ max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.22,1,.36,1); }
.md-faq-item.open .md-faq-a{ max-height:220px; }
.md-faq-a-inner{ padding:0 30px 28px 90px; font-size:14.5px; line-height:1.95; color:var(--ink-dim); }

/* ---------- mid-page cta banner ---------- */
.md-midcta{
  position:relative; overflow:hidden; padding:90px clamp(20px,4vw,56px);
  background-image:url('../img/media-design/md-bg2.jpg');
  background-size:cover; background-position:center;
}
.md-midcta::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, rgba(14,24,48,.88), rgba(26,42,92,.7) 60%, rgba(184,33,92,.5));
}
.md-midcta-inner{ max-width:1220px; margin:0 auto; position:relative; z-index:1; text-align:center; }
.md-midcta-eyebrow{ font-family:"Space Mono",monospace; font-size:12.5px; letter-spacing:.2em; color:rgba(255,255,255,.65); text-transform:uppercase; font-weight:700; margin-bottom:20px; }
.md-midcta-text{ color:#fff; font-weight:900; font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.5; margin-bottom:38px; }
.md-midcta-btns{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.md-midcta-btn{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:16px; padding:19px 38px; border-radius:999px; text-decoration:none; transition:opacity .2s ease; }
.md-midcta-btn.outline{ background:rgba(255,255,255,.1); color:#fff; border:1.5px solid rgba(255,255,255,.55); }
.md-midcta-btn.solid{ background:#fff; color:var(--md-p-dark); }
.md-midcta-btn:hover{ opacity:.8; }


/* ================= mobile final overrides (must stay last in file) ================= */
@media(max-width:768px){
  .md-trust-row-overlap{ margin-top:8px; }
  .md-hero-title-big{ white-space:normal !important; text-wrap:pretty !important; font-size:clamp(1.3rem,6.5vw,1.8rem) !important; }
  .md-hero-wordmark-solo{ white-space:normal !important; font-size:clamp(1.8rem,9vw,3rem) !important; line-height:1.2 !important; margin-bottom:10px !important; }

  .md-hero-cta-row{ flex-wrap:nowrap !important; gap:10px !important; width:100%; }
  .md-hero-cta-row a{ flex:1 1 0 !important; min-width:0 !important; justify-content:center !important; text-align:center !important; }
  .md-hero-cta{ padding:14px 10px !important; font-size:13.5px !important; gap:6px !important; white-space:nowrap !important; overflow:hidden !important; }
  .md-hero-cta .circ{ display:none !important; }
  .md-hero-cta-outline{ padding:14px 10px !important; font-size:13.5px !important; white-space:nowrap !important; overflow:hidden !important; justify-content:center !important; text-align:center !important; }

  .md-trust-row{ flex-wrap:nowrap !important; gap:8px !important; justify-content:center; }
  .md-trust-badge{ width:auto !important; flex:1 1 0 !important; min-width:0 !important; }
  .md-trust-badge .circ2{ width:clamp(70px,22vw,104px) !important; height:clamp(70px,22vw,104px) !important; margin-bottom:8px !important; border-width:2px !important; }
  .circ2-plain{ font-size:clamp(13px,4vw,15px) !important; line-height:1.3 !important; padding:4px !important; }

  .md-section-lead{ margin-bottom:30px !important; }
}