/* ==========================================================================
   CauseLogic marketing site — shared styles (links styles.css for tokens)
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--text-body);background:var(--surface-page);line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);margin:0;letter-spacing:-0.02em;line-height:1.08}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 32px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary)}
.muted{color:var(--text-muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;padding:12px 22px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid transparent;transition:background var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast);white-space:nowrap}
.btn.lg{font-size:15px;padding:14px 26px}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-ghost{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface-sunken)}
.btn-white{background:#fff;color:var(--blue-800)}
.btn-white:hover{background:var(--blue-50)}

/* nav */
nav.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle)}
nav.top .row{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--blue-800)}
.brand img{width:34px;height:34px;object-fit:contain}
.navlinks{display:flex;gap:30px;font-size:14px;font-weight:500;color:var(--text-muted)}
.navlinks a{padding:4px 0;border-bottom:2px solid transparent;transition:color var(--dur-fast)}
.navlinks a:hover{color:var(--color-primary)}
.navlinks a.active{color:var(--text-strong);border-bottom-color:var(--color-primary)}

/* page hero (interior pages) */
.phero{background:radial-gradient(120% 90% at 85% -20%, #EAF2F6 0%, #FFFFFF 60%);border-bottom:1px solid var(--border-subtle)}
.phero .wrap{padding:72px 32px 64px}
.phero h1{font-size:46px;line-height:1.04;max-width:780px}
.phero p.lead{font-size:18px;color:var(--text-muted);margin:20px 0 0;max-width:600px;line-height:1.6}
.phero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* sections */
section{padding:84px 0}
section.tight{padding:64px 0}
.shead{max-width:700px;margin-bottom:46px}
.shead.center{margin-left:auto;margin-right:auto;text-align:center}
.shead h2{font-size:38px}
.shead p{font-size:17px;color:var(--text-muted);margin-top:14px;line-height:1.6}
.alt{background:var(--surface-sunken)}

/* generic card grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:26px;transition:box-shadow var(--dur-fast),transform var(--dur-fast)}
.card.hov:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card .ic{width:48px;height:48px;border-radius:12px;background:var(--blue-50);color:var(--color-primary);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.card h3{font-size:18px;margin-bottom:8px}
.card p{font-size:14px;color:var(--text-muted);line-height:1.55;margin:0}

/* trust bar */
.trust{border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);background:var(--surface-sunken)}
.trust .row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;flex-wrap:wrap}
.std{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;color:var(--blue-800)}
.std i{color:var(--color-primary);font-size:20px}
.trust .meta{font-size:13px;color:var(--text-muted)}
.trust .meta b{color:var(--color-primary);font-size:15px}

/* node panel */
.panel{position:relative;border-radius:var(--radius-xl);background:var(--gradient-deep);box-shadow:var(--shadow-xl);overflow:hidden}
.panel .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.panel .nd{position:absolute;border-radius:50%;background:var(--cl-cyan);box-shadow:0 0 0 6px rgba(108,184,203,.18)}
.panel .ln{position:absolute;height:3px;background:rgba(108,184,203,.55);transform-origin:left center;border-radius:3px}
.floatcard{position:absolute;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:14px 16px;display:flex;align-items:center;gap:12px;white-space:nowrap}
.floatcard .fic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px}
.floatcard .k{font-size:12px;color:var(--text-muted);font-weight:600}
.floatcard .v{font-size:18px;font-weight:800;color:var(--text-strong);font-family:var(--font-display)}

/* results band */
.results{background:var(--gradient-deep);color:#fff}
.results .g{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
.results .big{font-family:var(--font-display);font-size:50px;font-weight:700;line-height:1;letter-spacing:-.02em}
.results .lbl{font-size:14px;color:rgba(255,255,255,.72);margin-top:10px;line-height:1.45}
.results .cap{color:var(--cl-cyan)}

/* case study cards */
.case{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden;display:flex;flex-direction:column}
.case .top{padding:24px 26px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:12px}
.case .co{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--text-strong)}
.case .loc{font-size:12px;color:var(--text-subtle);font-family:var(--font-mono)}
.case .metric{text-align:right}
.case .metric .mv{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--success);line-height:1}
.case .metric .ml{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.case .body{padding:24px 26px;display:flex;flex-direction:column;gap:16px;flex:1}
.case .row2{display:flex;gap:10px}
.case .row2 .lab{flex-shrink:0;width:74px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-subtle);padding-top:2px}
.case .row2 .txt{font-size:14px;color:var(--text-body);line-height:1.55}

/* pill row (modules) */
.modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.modchip{display:flex;align-items:center;gap:10px;border-radius:var(--radius-md);padding:14px 16px;font-weight:700;font-size:14px;color:var(--text-strong)}
.modchip i{font-size:20px}

/* process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{position:relative}
.step .n{font-family:var(--font-display);font-size:15px;font-weight:700;color:#fff;background:var(--color-primary);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step h3{font-size:18px;margin-bottom:8px}
.step p{font-size:14px;color:var(--text-muted);line-height:1.55;margin:0}
.step:not(:last-child):before{content:"";position:absolute;top:16px;left:46px;right:-10px;height:2px;background:repeating-linear-gradient(90deg,var(--border-strong) 0 6px,transparent 6px 12px)}

/* feature list */
.flist{display:flex;flex-direction:column;gap:18px}
.flist .fi{display:flex;gap:14px}
.flist .fi i{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:var(--blue-50);color:var(--color-primary);display:flex;align-items:center;justify-content:center;font-size:20px}
.flist .fi h4{font-size:16px;margin:2px 0 4px;font-family:var(--font-display)}
.flist .fi p{font-size:14px;color:var(--text-muted);line-height:1.55;margin:0}

/* quote */
.quote{max-width:840px;margin:0 auto;text-align:center}
.quote blockquote{font-family:var(--font-display);font-size:30px;line-height:1.4;color:var(--text-strong);letter-spacing:-.01em;margin:0}
.quote .by{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:12px}
.quote .by img{width:44px;height:44px;object-fit:contain}
.quote .by .nm{font-weight:700;color:var(--text-strong)}
.quote .by .rl{font-size:13px;color:var(--text-muted)}

/* faq */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:0}
.faq details{border-bottom:1px solid var(--border-subtle);padding:20px 0}
.faq summary{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--text-strong);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:24px;color:var(--color-primary);font-weight:400;transition:transform var(--dur-fast)}
.faq details[open] summary:after{content:"–"}
.faq p{font-size:15px;color:var(--text-muted);line-height:1.6;margin:14px 0 0}

/* CTA band */
.cta-band{padding:84px 0}
.cta-inner{background:var(--gradient-brand);border-radius:var(--radius-xl);padding:60px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-inner h2{font-size:38px;color:#fff;margin-bottom:14px}
.cta-inner p{font-size:17px;color:rgba(255,255,255,.92);max-width:560px;margin:0 auto 28px}

/* forms */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;font-weight:600;color:var(--text-muted)}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:14px;padding:12px 14px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-card);color:var(--text-strong);outline:none;transition:border-color var(--dur-fast),box-shadow var(--dur-fast);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-primary);box-shadow:var(--shadow-focus)}
.field textarea{resize:vertical;min-height:120px;line-height:1.5}

/* footer */
footer{background:var(--blue-900);color:rgba(255,255,255,.7);padding:56px 0 34px}
footer .g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
footer .brand{color:#fff;margin-bottom:14px}
footer .brand img{filter:brightness(0) invert(1)}
footer .tag{font-size:14px;line-height:1.6;margin:0;max-width:280px}
footer h4{color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px;font-family:var(--font-body)}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
footer ul a:hover{color:#fff}
footer .bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;font-size:13px;flex-wrap:wrap;gap:10px}

@media(max-width:920px){
  .grid-3,.grid-2,.steps,.results .g,.modgrid{grid-template-columns:repeat(2,1fr)}
  .navlinks{display:none}
  .phero h1{font-size:34px}
  footer .g{grid-template-columns:1fr 1fr}
}

/* ---- mobile edge-fit + nav menu ---- */
html,body{overflow-x:hidden}
.navtoggle{display:none;background:transparent;border:0;cursor:pointer;color:var(--blue-800);font-size:26px;line-height:1;padding:6px}

@media(max-width:920px){
  .wrap{padding:0 26px}
  .phero .wrap{padding:56px 26px 48px}
  .navtoggle{display:inline-flex;align-items:center}
  nav.top .row{position:relative}
  nav.top .row > .btn-primary{display:none}
  .navlinks{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);padding:8px 20px 16px}
  nav.top.open .navlinks{display:flex}
  .navlinks a{padding:14px 0;border-bottom:1px solid var(--border-subtle)}
  .hero .g > div,
  .phero .wrap,
  .shead,
  .cta-inner,
  .hero .cta,
  .phero .cta{text-align:center}
  .hero .cta,
  .phero .cta{justify-content:center}
  .shead{margin-left:auto;margin-right:auto}
}