@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Sora:wght@500;600;700&display=swap');

:root{
  --navy:#0A1F44; --navy-2:#12306B; --blue:#2563EB; --blue-d:#1B4FC4;
  --gold:#C9A24B; --bg:#F5F7FB; --card:#fff; --line:#E3E8F1;
  --text:#4A5670; --head:#0A1F44; --muted:#7B869E;
  --f-head:'Sora',system-ui,sans-serif; --f-body:'DM Sans',system-ui,sans-serif;
}
.cd-wrap{ max-width:1160px; margin:0 auto; padding:0 24px; }
.cd-hero,.cd-trust,.cd-body,.cd-similar{ font-family:var(--f-body); color:var(--text); }

/* HERO */
.cd-hero{ background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%); color:#fff; padding:44px 0 96px; }
.cd-hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.cd-crumb{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13.5px; margin-bottom:22px; color:#AFC0E3; }
.cd-crumb a{ color:#AFC0E3; text-decoration:none; } .cd-crumb a:hover{ color:#fff; }
.cd-crumb i{ font-size:11px; opacity:.6; } .cd-crumb span{ color:#fff; }
.cd-tags{ display:flex; gap:10px; margin-bottom:16px; }
.cd-tag{ font-size:13px; font-weight:600; padding:5px 14px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); }
.cd-tag-gold{ background:rgba(201,162,75,.18); border-color:var(--gold); color:#F0D58E; }
.cd-hero h1{ font-family:var(--f-head); font-weight:700; font-size:clamp(30px,4vw,46px); line-height:1.18; letter-spacing:-.02em; margin:0 0 16px; color:#fff; }
.cd-lead{ font-size:17px; line-height:1.7; color:#CBD6EE; max-width:58ch; margin:0 0 22px; }
.cd-meta{ list-style:none; padding:0; margin:0 0 28px; display:flex; flex-wrap:wrap; gap:10px 26px; font-size:14.5px; color:#E4EBF9; }
.cd-meta i{ color:var(--gold); margin-right:7px; }
.cd-actions{ display:flex; flex-wrap:wrap; gap:14px; }

.cd-btn{ font-family:var(--f-body); font-weight:600; font-size:15.5px; padding:14px 30px; border-radius:8px; border:1px solid transparent; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .2s, box-shadow .2s; }
.cd-btn-primary{ background:var(--blue); color:#fff; box-shadow:0 6px 18px rgba(37,99,235,.35); }
.cd-btn-primary:hover{ background:var(--blue-d); color:#fff; }
.cd-btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.cd-btn-ghost:hover{ background:rgba(255,255,255,.1); color:#fff; }
.cd-btn-block{ width:100%; }
.cd-btn:focus-visible,.cd-sim-card:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

.cd-hero-media{ border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.18); box-shadow:0 24px 60px rgba(0,0,0,.35); background:#fff; }
.cd-hero-media img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.cd-fallback{ object-fit:contain !important; padding:28px; background:#fff; }

/* TRUST BAR */
.cd-trust{ position:relative; margin-top:-48px; z-index:2; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 14px 40px rgba(10,31,68,.12); display:grid; grid-template-columns:repeat(3,1fr); }
.cd-trust-item{ display:flex; align-items:center; gap:16px; padding:24px 28px; }
.cd-trust-item + .cd-trust-item{ border-left:1px solid var(--line); }
.cd-trust-item i{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:#EAF0FE; color:var(--blue); font-size:19px; flex:none; }
.cd-trust-item b{ display:block; font-family:var(--f-head); font-size:26px; color:var(--head); line-height:1.1; }
.cd-trust-item span{ font-size:14px; color:var(--muted); }

/* BODY */
.cd-body{ background:var(--bg); padding:64px 0 56px; margin-top:-48px; padding-top:112px; }
.cd-body-grid{ display:grid; grid-template-columns:1fr 340px; gap:40px; align-items:start; }
.cd-main,.cd-side-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; }
.cd-main{ padding:36px 38px; }
.cd-main h2,.cd-similar h2{ font-family:var(--f-head); font-weight:600; font-size:26px; color:var(--head); margin:0 0 4px; letter-spacing:-.01em; }
.cd-sub{ color:var(--muted); font-size:15px; margin:0 0 26px; }
.cd-topics{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:14px 32px; }
.cd-topics li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.5; padding-bottom:14px; border-bottom:1px solid var(--line); }
.cd-topics i{ flex:none; width:22px; height:22px; border-radius:50%; background:#E7F6EE; color:#16A05D; font-size:11px; display:grid; place-items:center; margin-top:1px; }

.cd-side{ position:sticky; top:96px; }
.cd-side-card{ padding:28px; }
.cd-side-card h3{ font-family:var(--f-head); font-weight:600; font-size:18px; color:var(--head); margin:0 0 14px; }
.cd-side-card dl{ margin:0 0 22px; }
.cd-side-card dl div{ display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.cd-side-card dt{ color:var(--muted); } .cd-side-card dd{ margin:0; font-weight:600; color:var(--head); text-align:right; }
.cd-side-call{ display:block; text-align:center; margin-top:14px; font-weight:600; color:var(--blue); text-decoration:none; font-size:15px; }
.cd-side-call i{ margin-right:6px; }

/* SIMILAR */
.cd-similar{ background:#fff; border-top:1px solid var(--line); padding:64px 0 76px; }
.cd-sim-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px; }
.cd-sim-card{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; color:var(--text); transition:box-shadow .25s, border-color .25s; }
.cd-sim-card:hover{ box-shadow:0 16px 36px rgba(10,31,68,.12); border-color:#C7D4EE; }
.cd-sim-img img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.cd-sim-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.cd-sim-cat{ font-size:13px; font-weight:600; color:var(--blue); }
.cd-sim-body h3{ font-family:var(--f-head); font-weight:600; font-size:19px; color:var(--head); margin:6px 0 8px; }
.cd-sim-body p{ font-size:14.5px; line-height:1.6; margin:0 0 16px; }
.cd-sim-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:14px; color:var(--muted); }
.cd-sim-link{ color:var(--blue); font-weight:600; } .cd-sim-link i{ font-size:12px; margin-left:4px; }

/* RESPONSIVE */
@media (max-width:960px){
  .cd-hero-grid{ grid-template-columns:1fr; gap:36px; }
  .cd-body-grid{ grid-template-columns:1fr; }
  .cd-side{ position:static; }
}
@media (max-width:700px){
  .cd-hero{ padding:32px 0 84px; }
  .cd-trust{ grid-template-columns:1fr; }
  .cd-trust-item + .cd-trust-item{ border-left:0; border-top:1px solid var(--line); }
  .cd-topics{ grid-template-columns:1fr; }
  .cd-main{ padding:26px 22px; }
  .cd-btn{ flex:1; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* SHARE SHEET */
.cd-share-overlay{ position:fixed; inset:0; z-index:1100; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(10,31,68,.6); backdrop-filter:blur(3px); font-family:var(--f-body); }
.cd-share-overlay.open{ display:flex; }
.cd-share-box{ position:relative; width:100%; max-width:440px; background:#fff; border-radius:18px; padding:28px 26px 24px; box-shadow:0 30px 70px rgba(0,0,0,.35); }
.cd-share-box h3{ font-family:var(--f-head); font-weight:600; font-size:20px; color:var(--head); margin:0 0 18px; }
.cd-share-close{ position:absolute; top:14px; right:16px; width:34px; height:34px; border:0; border-radius:50%; background:var(--bg); font-size:22px; line-height:1; color:var(--head); cursor:pointer; }
.cd-share-preview{ display:flex; gap:14px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:12px; margin-bottom:20px; }
.cd-share-preview img{ width:84px; height:64px; object-fit:cover; border-radius:8px; flex:none; }
.cd-share-preview b{ display:block; color:var(--head); font-size:15px; line-height:1.3; }
.cd-share-preview span{ font-size:13px; color:var(--muted); }
.cd-share-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px 8px; }
.cd-share-opt{ display:flex; flex-direction:column; align-items:center; gap:8px; background:none; border:0; padding:6px 2px; cursor:pointer; text-decoration:none; font-family:var(--f-body); }
.cd-share-opt i{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:22px; }
.cd-share-opt span{ font-size:12.5px; color:var(--text); text-align:center; line-height:1.3; }
.cd-share-opt:hover i{ transform:scale(1.06); } .cd-share-opt i{ transition:transform .15s; }
.cd-share-opt:focus-visible,.cd-share-close:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; border-radius:10px; }
.cd-share-hint{ margin:20px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); text-align:center; }