/* ============================================
   DIGITAL PMM — shared design system
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --violet:#b2227a;
  --violet-dark:#4a1354;
  --coral:#b2227a;
  --sun:#fdf4e2;
  --teal:#4a1354;
  --ink:#171217;
  --muted:#665f66;
  --paper:#fdf4e2;
  --paper-dim:#f7e9cf;
  --line:#ecdfc2;
  --white:#FFFFFF;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
}
h1,h2,h3,h4,.display{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  line-height:1.12;
  color:var(--ink);
}
a{text-decoration:none;color:inherit;}
img,svg{max-width:100%;display:block;}
.wrap{width:min(1160px,92%);margin:0 auto;}

/* ===== NAV ===== */
nav.site-nav{
  position:sticky;top:0;z-index:80;
  background:rgba(255,251,245,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav.site-nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:78px;
}
.brand{
  font-family:'Space Grotesk',sans-serif;
  font-weight:800;
  font-size:16px;
  color:var(--ink);
  display:flex;align-items:center;gap:9px;
  white-space:nowrap;
}
@media (max-width:480px){
  .brand{font-size:13.5px;}
}
.brand .dot{
  width:10px;height:10px;border-radius:3px;
  background:var(--coral);
  display:inline-block;
  transform:rotate(45deg);
}
.navlinks{display:flex;gap:28px;align-items:center;font-weight:600;font-size:14.5px;}
.navlinks a{opacity:0.72;transition:opacity 0.2s,color 0.2s;position:relative;}
.navlinks a:hover{opacity:1;color:var(--violet);}
.navlinks a.current{opacity:1;color:var(--violet);}
.navlinks a.current::after{
  content:"";position:absolute;left:0;right:0;bottom:-22px;
  height:2px;background:var(--coral);
}
.menu-toggle{display:none;background:none;border:0;font-size:24px;color:var(--ink);}

@media (max-width:860px){
  .navlinks{
    position:fixed;top:78px;left:0;right:0;
    background:var(--paper);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    max-height:0;
    overflow:hidden;
    border-bottom:1px solid var(--line);
    transition:max-height 0.3s ease;
  }
  .navlinks.open{max-height:520px;}
  .navlinks a{padding:16px 24px;border-bottom:1px solid var(--line);opacity:1;}
  .navlinks a.current::after{display:none;}
  .navlinks .btn{margin:14px 24px;}
  .menu-toggle{display:block;}
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;
  border-radius:11px;
  font-weight:700;
  font-size:14.5px;
  border:2px solid transparent;
  transition:transform 0.18s, box-shadow 0.18s, background 0.18s, border-color 0.18s;
  cursor:pointer;
  white-space:nowrap;
}
.btn-primary{
  background:var(--coral);
  color:var(--white);
  box-shadow:0 10px 24px -6px rgba(255,77,109,0.45);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -6px rgba(255,77,109,0.55);}
.btn-dark{
  background:var(--ink);
  color:var(--paper);
}
.btn-dark:hover{background:var(--violet-dark);transform:translateY(-2px);}
.btn-outline{
  border-color:var(--ink);
  color:var(--ink);
  background:transparent;
}
.btn-outline:hover{background:var(--ink);color:var(--paper);}
.btn-light{
  border-color:rgba(255,255,255,0.6);
  color:var(--white);
}
.btn-light:hover{background:rgba(255,255,255,0.12);}
.btn-block{width:100%;}

/* ===== SECTION SHARED ===== */
section{padding:96px 0;}
.section-tight{padding:64px 0;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--coral);
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";width:7px;height:7px;border-radius:2px;
  background:var(--coral);transform:rotate(45deg);
}
.section-head{max-width:640px;}
.section-head h2{font-size:clamp(30px,4.4vw,44px);}
.section-head p{color:var(--muted);font-size:16.5px;margin-top:16px;line-height:1.65;}
.center{text-align:center;margin-left:auto;margin-right:auto;}

/* ===== CARD (kanban/project-card signature) ===== */
.pcard{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px;
  transition:transform 0.2s,box-shadow 0.2s;
}
.pcard:hover{transform:translateY(-4px);box-shadow:0 22px 40px -18px rgba(26,16,35,0.18);}
.pcard-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.tag{
  font-size:11px;font-weight:800;letter-spacing:0.3px;text-transform:uppercase;
  padding:5px 10px;border-radius:6px;
}
.tag-violet{background:#f0e2ec;color:var(--violet-dark);}
.tag-coral{background:#f9dcec;color:var(--violet);}
.tag-teal{background:#171217;color:var(--paper);}
.tag-sun{background:#ecdfc2;color:var(--ink);}
.pcard h3{font-size:19px;margin-bottom:8px;}
.pcard p{color:var(--muted);font-size:14.5px;line-height:1.6;}

/* ===== FOOTER ===== */
footer{background:var(--ink);padding:56px 0 32px;color:rgba(255,251,245,0.85);}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:36px;
  padding-bottom:36px;
  border-bottom:1px solid rgba(255,251,245,0.12);
}
.footer-logo{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:18px;color:var(--paper);margin-bottom:12px;}
.footer-grid p{font-size:13.5px;color:rgba(255,251,245,0.6);line-height:1.6;}
.footer-grid h4{font-size:13px;color:var(--paper);margin-bottom:14px;letter-spacing:0.3px;}
.footer-grid a{display:block;font-size:13.5px;color:rgba(255,251,245,0.65);padding:5px 0;transition:color 0.2s;}
.footer-grid a:hover{color:var(--sun);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  padding-top:24px;font-size:12.5px;color:rgba(255,251,245,0.45);
}
.social{display:flex;gap:12px;}
.social a{
  width:36px;height:36px;border-radius:10px;
  background:rgba(255,251,245,0.08);
  display:flex;align-items:center;justify-content:center;
  padding:0;
}
.social a:hover{background:var(--coral);}
.social svg{width:17px;height:17px;fill:var(--paper);}
@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:3px;
}

/* ===== WHATSAPP FLOATING BUTTON ===== */
.whatsapp-float{
  position:fixed;
  bottom:24px;right:24px;
  z-index:70;
  width:58px;height:58px;
  border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -6px rgba(0,0,0,0.4);
  transition:transform 0.2s;
}
.whatsapp-float:hover{transform:scale(1.08);}
.whatsapp-float svg{width:30px;height:30px;fill:#fff;}
@media (max-width:600px){
  .whatsapp-float{width:52px;height:52px;bottom:18px;right:18px;}
  .whatsapp-float svg{width:26px;height:26px;}
}

@media (prefers-reduced-motion: reduce){
  .pcard,.btn,html{transition:none;scroll-behavior:auto;}
}