/* Digly marketing site — surface tokens */
@import url('./colors_and_type.css');
:where(img[width][height]){height:auto}.nav .brand img,.foot .brand img{width:auto}


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--digly-bg); }
body { font-family: var(--font-body); color: var(--digly-navy); }

.site {
  width: 1440px;
  margin: 0 auto;
  position: relative;
}

/* ---------- Top nav (navy pill) ---------- */
.nav {
  margin: 28px 32px;
  background: var(--digly-navy);
  border-radius: 100px;
  padding: 18px 18px 18px 32px;
  display: flex; align-items: center; gap: 40px;
  color: #fff;
  position: sticky; top: 28px; z-index: 100;
}
.nav .brand img { height: 32px; display: block; }
.nav .brand { display:inline-flex; align-items:center; gap:14px; text-decoration:none; }
.nav .brand .brand-home { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.1); color:var(--digly-green); transition:background .15s ease, transform .15s ease; }
.nav .brand .brand-home .material-symbols-rounded { font-size:20px; font-variation-settings:'FILL' 1,'wght' 600; }
.nav .brand:hover .brand-home { background:var(--digly-green); color:var(--digly-navy); transform:translateY(-1px); }
.nav .links { display: flex; gap: 36px; flex: 1; justify-content: center; }
.nav .links a {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  color: rgba(255,255,255,.78); text-decoration: none;
  transition: color .15s ease;
}
.nav .links a:hover,
.nav .links a.active { color: #fff; }
.nav .links a.nav-home { display:inline-flex; align-items:center; gap:6px; }
.nav .links a.nav-home .material-symbols-rounded { font-size:20px; font-variation-settings:'FILL' 1,'wght' 600; color: var(--digly-green); }
.nav .cta {
  background: var(--digly-green); color: var(--digly-navy);
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  padding: 14px 22px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  transition: transform .18s var(--ease-standard), box-shadow .18s;
}
.nav .cta:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,213,97,.35); }

/* ---------- Hero ---------- */
.hero {
  margin: 24px 32px 0;
  padding: 80px 64px 96px;
  border-radius: 40px;
  background: var(--digly-bg);
  position: relative; overflow: hidden;
}
.hero .blob1 { position: absolute; left: -120px; top: -80px; width: 380px; z-index: 0; transform: rotate(-12deg);}
.hero .blob2 { position: absolute; right: -100px; bottom: -100px; width: 380px; z-index: 0; transform: rotate(20deg);}
.hero .content { position: relative; z-index: 2; max-width: 920px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--digly-navy);
  padding: 10px 18px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(6,0,94,.05);
}
.hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 96px; line-height: 0.98; letter-spacing: -0.03em;
  color: var(--digly-navy);
  margin: 24px 0 0;
}
.hero h1 em { font-style: normal; color: var(--digly-green); }
.hero .lead {
  font-family: var(--font-body); font-size: 22px; line-height: 1.5;
  color: var(--fg-2); margin: 28px 0 0; max-width: 720px;
}
.hero-actions { margin-top: 36px; display: flex; gap: 14px; align-items: center;}
.btn-primary {
  background: var(--digly-green); color: var(--digly-navy);
  padding: 18px 26px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  transition: all .18s var(--ease-standard);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0,213,97,.35); background: #00C758;}
.btn-ghost {
  background: transparent; color: var(--digly-navy);
  padding: 18px 26px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  box-shadow: inset 0 0 0 1.5px var(--digly-navy);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
}

/* ---------- Section ---------- */
section.block {
  padding: 96px 64px;
  margin: 0 32px;
}
section.block.dark {
  background: var(--digly-navy);
  border-radius: 40px;
  color: #fff;
  margin-top: 32px;
  position: relative; overflow: hidden;
}
.block .h-eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--digly-blue-bright);
}
.dark .h-eyebrow { color: var(--digly-green); }
.block h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 64px; line-height: 1.05; letter-spacing: -0.025em;
  color: var(--digly-navy); margin: 16px 0 0;
  max-width: 900px;
}
.dark h2 { color: #fff; }
.block h2 em { font-style: normal; color: var(--digly-green); }
.block .sub {
  font-family: var(--font-body); font-size: 20px; color: var(--fg-2);
  line-height: 1.5; max-width: 720px; margin-top: 22px;
}
.dark .sub { color: rgba(255,255,255,.7); }

/* ---------- Tools grid ---------- */
.tools-title {
  text-align: center; padding: 0 64px;
}
.tools-title h2 { margin: 0 auto; }
.tools-title .pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: var(--digly-navy); margin-top: 32px;
}
.tools-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin-top: 56px;
}
.tool-card {
  background: #fff; border-radius: 28px; padding: 56px 32px;
  display: flex; align-items: center; justify-content: center;
  min-height: 180px;
  box-shadow: 0 8px 30px rgba(6,0,94,.05);
  transition: transform .18s var(--ease-standard), box-shadow .18s;
}
.tool-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(6,0,94,.1); }
.tool-card .logo {
  font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--digly-navy); letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 12px;
}

/* ---------- Process / steps ---------- */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin-top: 56px;
}
.step {
  background: #fff; border-radius: 28px; padding: 36px;
  box-shadow: 0 8px 30px rgba(6,0,94,.05);
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
.dark .step { background: rgba(255,255,255,.06); color: #fff;}
.step .tile {
  width: 80px; height: 80px; border-radius: 20px;
  background: var(--digly-yellow); color: var(--digly-navy);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(217,170,27,.25);
}
.step .tile .material-symbols-rounded { font-size: 42px; font-variation-settings: 'FILL' 1, 'wght' 600;}
.step .num {
  font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .12em;
  color: var(--digly-green); text-transform: uppercase;
}
.step h3 {
  font-family: var(--font-display); font-weight: 800; font-size: 26px; color: inherit; letter-spacing: -0.02em; margin: 0;
}
.step p { font-family: var(--font-body); font-size: 15px; color: var(--fg-3); line-height: 1.5; margin: 0;}
.dark .step p { color: rgba(255,255,255,.65); }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 56px;}
.team-card {
  display: flex; flex-direction: column; gap: 14px;
}
.team-card .ava {
  width: 100%; aspect-ratio: 1 / 1;
}
.team-card .ava img { width: 100%; height: 100%; object-fit: contain; display: block;}
.team-card .nm { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--digly-navy); letter-spacing: -0.01em;}
.team-card .rl { font-family: var(--font-body); font-size: 14px; color: var(--fg-3);}

/* ---------- Testimonial ---------- */
.testi {
  background: #fff; border-radius: 32px; padding: 48px;
  display: flex; gap: 32px; align-items: flex-start;
  box-shadow: 0 20px 60px rgba(6,0,94,.08);
  margin-top: 56px; position: relative; overflow: hidden;
}
.testi .mark {
  font-family: var(--font-display); font-weight: 800; color: var(--digly-blue-bright);
  font-size: 96px; line-height: 0.6;
  flex: none;
}
.testi .body { font-family: var(--font-display); font-weight: 600; font-size: 32px; color: var(--digly-navy); letter-spacing: -0.01em; line-height: 1.25; text-wrap: balance;}
.testi .by { display: flex; align-items: center; gap: 14px; margin-top: 28px;}
.testi .by img { width: 56px; height: 56px; border-radius: 14px; transform: rotate(-4deg);}
.testi .nm { font-family: var(--font-display); font-weight: 700; font-size: 16px;}
.testi .rl { font-family: var(--font-body); font-size: 14px; color: var(--fg-3);}

/* ---------- CTA banner ---------- */
.cta-banner {
  margin: 32px;
  background: var(--digly-navy);
  border-radius: 40px;
  padding: 80px 64px;
  display: flex; align-items: center; justify-content: space-between;
  position: relative; overflow: hidden;
  color: #fff;
}
.cta-banner h2 {
  font-family: var(--font-display); font-weight: 800; font-size: 80px;
  letter-spacing: -0.03em; line-height: 1; color: #fff;
  margin: 0;
}
.cta-banner h2 em { font-style: normal; color: var(--digly-green); }
.cta-banner .blob1 { position: absolute; left: -80px; top: -80px; width: 280px; transform: rotate(-12deg);}
.cta-banner .blob2 { position: absolute; right: -80px; bottom: -80px; width: 280px; transform: rotate(20deg);}

/* ---------- Footer ---------- */
footer.foot {
  padding: 64px 64px 48px;
  margin: 0 32px;
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 32px;
}
.foot .col .foot-h, .foot .col h4 { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--digly-navy); margin: 0 0 14px; letter-spacing: -0.01em;}
.foot .col a { display: block; font-family: var(--font-body); font-size: 14px; color: var(--fg-2); padding: 4px 0; text-decoration: none;}
.foot .col a:hover { color: var(--digly-blue); }
.foot .brand img { height: 28px; }
.foot .brand p { font-family: var(--font-body); font-size: 14px; color: var(--fg-3); margin-top: 12px; line-height: 1.5; max-width: 260px;}
.foot-bottom {
  margin: 0 64px; padding: 24px 0;
  border-top: 1px solid var(--digly-border);
  display: flex; justify-content: space-between;
  font-family: var(--font-body); font-size: 13px; color: var(--fg-3);
}

h2.h-eyebrow { margin: 0; line-height: inherit; }
.team-card h3.nm { margin: 0; line-height: 1.2; }
.txt-link { color: var(--digly-blue-bright); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.txt-link:hover { color: var(--digly-navy); }
.dark .txt-link, .navy .txt-link { color: var(--digly-green); }

/* Logo = homeknop */
.nav .brand{position:relative;padding:8px 14px;margin:-8px -14px;border-radius:9999px;transition:background .22s cubic-bezier(.2,.7,.2,1),transform .14s cubic-bezier(.2,.7,.2,1)}
.nav .brand:hover{background:rgba(255,255,255,.08)}
.nav .brand:active{transform:scale(.97)}
.nav .brand::after{content:attr(data-tip);position:absolute;left:14px;top:calc(100% + 10px);white-space:nowrap;background:var(--digly-green);color:var(--digly-navy);font-family:var(--font-body);font-weight:600;font-size:13px;padding:6px 12px;border-radius:9999px;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .22s cubic-bezier(.2,.7,.2,1),transform .22s cubic-bezier(.2,.7,.2,1);box-shadow:var(--sh-2)}
.nav .brand:hover::after,.nav .brand:focus-visible::after{opacity:1;transform:none}