/* Shared WCOR site styles — extends dop.org base */
:root{
  --bg:#f8fbfe; --ink:#212121; --muted:#626c78; --line:#96b5c7;
  --line-soft:rgba(150,181,199,.3); --btn:#D7E6EE; --cta:#C4DFF3;
  --orange:#ff5300; --blue:#0089d9; --purple:#8a38f5;
}
body{background:#f8fbfe; font-family: clash, 'Space Grotesk', system-ui, sans-serif;}
@keyframes wcor-wave { 0%{transform:scale(1); opacity:.55} 100%{transform:scale(2.8); opacity:0} }
a{color:inherit}
img{max-width:100%}

/* Layout */
.wcor-page{max-width:1160px; margin:0 auto; padding:80px 32px 100px;}
.wcor-page h1{font-size:clamp(36px,4.2vw,56px); font-weight:400; letter-spacing:-.02em; color:var(--ink); margin:0 0 16px; line-height:1.05;}
.wcor-page h1 b{font-weight:600}
.wcor-page .lede{font-size:17px; color:var(--muted); max-width:640px; line-height:1.55; margin:0 0 48px;}
.wcor-page h2{font-size:clamp(26px,3vw,36px); font-weight:500; color:var(--ink); margin:48px 0 16px; letter-spacing:-.01em;}
.wcor-page h3{font-size:20px; font-weight:600; color:var(--ink); margin:28px 0 10px;}
.wcor-page p{font-size:15px; line-height:1.65; color:#3a4450; margin:0 0 14px;}
.wcor-eyebrow{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); font-weight:500; margin-bottom:18px;}

/* cards */
.wcor-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.wcor-card{position:relative; background:#fff; border:1px solid var(--line-soft); border-radius:15px; padding:26px 25px 28px; display:flex; flex-direction:column; gap:12px;}
.wcor-card h3{font-size:18px; font-weight:600; margin:0; color:var(--ink);}
.wcor-card p{font-size:14px; color:var(--muted); line-height:1.5; margin:0;}
.wcor-card .corner-dot{position:absolute; top:22px; right:22px; width:11px; height:11px; border-radius:50%;}
.wcor-card .corner-dot::before, .wcor-card .corner-dot::after{content:""; position:absolute; inset:0; border-radius:50%; background:inherit; opacity:.55; animation:wcor-wave 2s ease-out infinite;}
.wcor-card .corner-dot::after{animation-delay:.3s}
.wcor-card[data-c="orange"] .corner-dot{background:var(--orange)}
.wcor-card[data-c="blue"] .corner-dot{background:var(--blue)}
.wcor-card[data-c="purple"] .corner-dot{background:var(--purple)}

/* buttons */
.wcor-btn, .wcor-btn-ghost{display:inline-block; border-radius:8px; padding:17px 26px; font-size:15px; font-weight:500; text-decoration:none; cursor:pointer; transition:transform .15s ease; font-family:inherit; border:0;}
.wcor-btn{background:#D7E6EE; color:#212121;}
.wcor-btn-ghost{background:#fff; color:#212121; border:1px solid #edf3f7;}
.wcor-btn:hover, .wcor-btn-ghost:hover{transform:translateY(-1px)}
.wcor-btn-dark{display:inline-block; background:#141519; color:#fff; border-radius:100px; padding:12px 24px; font-size:14px; font-weight:500; text-decoration:none;}

/* form */
.wcor-form{max-width:540px; display:grid; gap:16px;}
.wcor-form label{display:block; font-size:13px; color:var(--muted); font-weight:500; margin-bottom:6px; letter-spacing:.3px;}
.wcor-form input, .wcor-form textarea, .wcor-form select{
  width:100%; padding:14px 16px; border:1px solid var(--line-soft); border-radius:10px;
  background:#fff; color:var(--ink); font-size:15px; font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.wcor-form input:focus, .wcor-form textarea:focus, .wcor-form select:focus{outline:none; border-color:var(--line); box-shadow:0 0 0 3px rgba(150,181,199,.18);}
.wcor-form textarea{min-height:130px; resize:vertical;}
.wcor-ok{display:none; background:#eaf7ee; color:#1e6b3a; border:1px solid #c7e7d1; padding:14px; border-radius:10px; font-size:14px;}
.wcor-ok.show{display:block}

/* blog */
.blog-list{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.blog-card{background:#fff; border:1px solid var(--line-soft); border-radius:15px; overflow:hidden; text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .15s ease; display:flex; flex-direction:column;}
.blog-card:hover{transform:translateY(-2px); box-shadow:0 20px 40px -28px rgba(30,60,90,.25)}
.blog-thumb{aspect-ratio:16/10; background:linear-gradient(135deg,#d7e6ee,#c4dff3); position:relative; overflow:hidden;}
.blog-thumb svg{position:absolute; inset:0; width:100%; height:100%;}
.blog-body{padding:20px;}
.blog-tag{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:8px;}
.blog-title{font-size:18px; font-weight:600; color:var(--ink); margin:0 0 8px; line-height:1.3;}
.blog-ex{font-size:14px; color:var(--muted); line-height:1.5; margin:0;}
.blog-meta{font-size:12px; color:var(--muted); margin-top:12px;}

/* table-like */
.wcor-kv{display:grid; grid-template-columns:max-content 1fr; gap:12px 28px; background:#fff; border:1px solid var(--line-soft); border-radius:14px; padding:22px 26px;}
.wcor-kv dt{font-size:13px; color:var(--muted); font-weight:500; letter-spacing:.3px;}
.wcor-kv dd{margin:0; font-size:15px; color:var(--ink); font-weight:500;}

/* app dashboard */
.app-shell{display:grid; grid-template-columns:240px 1fr; min-height:calc(100vh - 64px); background:#f8fbfe;}
.app-side{background:#fff; border-right:1px solid #eef2f6; padding:28px 20px;}
.app-side h4{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin:20px 0 10px; font-weight:500;}
.app-side a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:var(--ink); font-size:14px; text-decoration:none; font-weight:500;}
.app-side a:hover, .app-side a.active{background:#f1f6fa}
.app-main{padding:36px 40px;}
.app-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px;}
.app-stat{background:#fff; border:1px solid var(--line-soft); border-radius:14px; padding:20px;}
.app-stat .lbl{font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); font-weight:500;}
.app-stat .val{font-size:28px; font-weight:600; color:var(--ink); margin-top:8px; font-variant-numeric:tabular-nums;}
.app-stat .chg{font-size:12px; color:#1e7a3a; margin-top:4px;}
.app-stat .chg.neg{color:#b33d3d}
.app-table{background:#fff; border:1px solid var(--line-soft); border-radius:14px; overflow:hidden;}
.app-table table{width:100%; border-collapse:collapse; font-size:14px;}
.app-table th{text-align:left; padding:14px 18px; background:#f7fafc; font-weight:500; color:var(--muted); font-size:12px; letter-spacing:1px; text-transform:uppercase; border-bottom:1px solid #eef2f6;}
.app-table td{padding:14px 18px; border-bottom:1px solid #f1f5f8; color:var(--ink);}
.app-table tr:last-child td{border-bottom:0}
.app-pill{display:inline-block; padding:3px 10px; border-radius:100px; font-size:12px; font-weight:500;}
.app-pill.ok{background:rgba(30,122,58,.1); color:#1e7a3a}
.app-pill.pend{background:rgba(255,150,0,.12); color:#c77400}
.app-pill.priv{background:rgba(138,56,245,.1); color:var(--purple)}

/* hero inside subpages */
.subhero{background:linear-gradient(180deg, #eaf2f8 0%, #f8fbfe 100%); padding:72px 32px 64px; border-bottom:1px solid #eef2f6;}
.subhero-inner{max-width:1160px; margin:0 auto;}

/* responsive */
@media (max-width: 900px){
  .wcor-grid, .blog-list, .app-cards{grid-template-columns:repeat(2,1fr)}
  .app-shell{grid-template-columns:1fr}
  .app-side{display:none}
}
@media (max-width: 600px){
  .wcor-grid, .blog-list, .app-cards{grid-template-columns:1fr}
  .wcor-page{padding:48px 20px 72px}
  .wcor-kv{grid-template-columns:1fr}
}