/* WebNest landing page — app layer on the CostusWorx Fluent kit.
   Load order: assets/fluent-kit/fluent-core.css, then this file.
   Literal colours and px font sizes live in TOKENS only (php check_layer.php must print "clean"). */

/* ===== TOKENS ===== */
:root {
  /* WebNest family colours: CostusWorx navy + blue, WebNest's own accent (logo/README) */
  --tenant-primary: #1F3864;
  --tenant-accent: #8BC34A;
  --w-navy: #1F3864;
  --w-blue: #2E5FA3;
  --w-ltblue: #D5E8F0;
  --w-ink: #1A1A1A;
  --w-muted: #6B7A90;
  --w-accent: #8BC34A;
  --w-accent-ink: #4E7A1F;
  --w-hero-from: #1F3864;
  --w-hero-to: #2E5FA3;
  --w-on-hero: #FFFFFF;
  --w-on-hero-soft: #D5E8F0;
  --w-on-hero-line: rgba(255,255,255,.28);
  --w-on-hero-glass: rgba(255,255,255,.10);
  --w-band: #EEF4FA;
  /* Type scale for a marketing page (the kit stops at title3) */
  --w-fs-hero: 40px; --w-lh-hero: 48px;
  --w-fs-h2: 28px; --w-lh-h2: 36px;
  --w-fs-lead: 18px; --w-lh-lead: 28px;
  --w-wrap: 1120px;
}

/* ===== BASE ===== */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--v6-canvas); color: var(--w-ink); }
a { color: var(--v6-action); }
.w-wrap { max-width: var(--w-wrap); margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.w-skip { position: absolute; left: -9999px; }
.w-skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--v6-surface); color: var(--v6-t1); padding: 8px 12px; border-radius: var(--v6-r-sm); }

/* Header: kit header colours, sticky, logo lockup instead of the white logo chip */
.w-hdr { position: sticky; top: 0; padding: 0 12px; }
.w-hdr .w-logo { height: 40px; width: auto; display: block; }
.w-hdr nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.w-hdr nav a { color: var(--v6-surface); text-decoration: none; font-size: var(--v6-fs-body); padding: 6px 10px; border-radius: var(--v6-r-sm); }
.w-hdr nav a:hover { background: var(--v6-on-chrome-hover); }
.w-hdr nav a:focus-visible { outline: var(--v6-focus-w) solid var(--v6-focus-on-chrome); outline-offset: 1px; }
.w-hdr nav .w-cta { background: var(--w-accent); color: var(--w-navy); font-weight: 600; }
.w-hdr nav .w-cta:hover { background: var(--w-accent); filter: brightness(1.06); }

/* Sections */
.w-sec { padding: 56px 0; }
.w-sec-band { background: var(--w-band); }
.w-eyebrow { font-size: var(--v6-fs-cap); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--w-blue); margin: 0 0 8px; }
.w-h2 { font-size: var(--w-fs-h2); line-height: var(--w-lh-h2); font-weight: 700; color: var(--w-navy); margin: 0 0 8px; }
.w-lead { font-size: var(--w-fs-lead); line-height: var(--w-lh-lead); color: var(--v6-t2); margin: 0 0 24px; max-width: 760px; }

/* ===== COMPONENTS ===== */
/* Hero */
/* Hero: a faint spider web (logo/web-bg.svg) spun over the brand gradient */
.w-hero { background: url(/logo/web-bg.svg) no-repeat right -220px center / 760px auto, linear-gradient(135deg, var(--w-hero-from), var(--w-hero-to)); color: var(--w-on-hero); padding: 64px 0 56px; overflow: hidden; }
.w-hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: center; }
.w-hero .w-eyebrow { color: var(--w-accent); }
.w-hero h1 { font-size: var(--w-fs-hero); line-height: var(--w-lh-hero); font-weight: 700; margin: 0 0 16px; }
.w-hero .w-lead { color: var(--w-on-hero-soft); }
.w-hero-mark { justify-self: center; width: min(300px, 70%); height: auto; filter: drop-shadow(0 18px 32px rgba(0,0,0,.30)); /* v6-allow: soft drop shadow on the hero mark */ }
.w-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.w-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--v6-r-sm); font-weight: 600; font-size: var(--v6-fs-body); text-decoration: none; box-sizing: border-box; }
.w-btn-accent { background: var(--w-accent); color: var(--w-navy); }
.w-btn-accent:hover { filter: brightness(1.06); }
.w-btn-ghost { border: var(--v6-line) solid var(--w-on-hero-line); color: var(--w-on-hero); background: var(--w-on-hero-glass); }
.w-btn-ghost:hover { background: var(--v6-on-chrome-hover); }
.w-btn:focus-visible { outline: var(--v6-focus-w) solid var(--w-on-hero); outline-offset: 2px; }
.w-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.w-fact { border-top: 3px solid var(--w-accent); padding-top: 10px; }
.w-fact strong { display: block; font-size: var(--v6-fs-title3); line-height: var(--v6-lh-title3); }
.w-fact span { font-size: var(--v6-fs-cap); color: var(--w-on-hero-soft); }

/* How the nest works: four numbered steps joined by a thread */
.w-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.w-steps::before { content: ""; position: absolute; left: 24px; right: 24px; top: 22px; border-top: 2px dashed var(--w-blue); opacity: .35; }
.w-steps li { position: relative; margin: 0 4px 4px 0; }
.w-step-n { position: absolute; top: -14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--w-accent); color: var(--w-navy); font-weight: 700; display: grid; place-items: center; font-size: var(--v6-fs-cap); }
.w-steps h3 { margin: 8px 0 6px; font-size: var(--v6-fs-sub2); line-height: var(--v6-lh-sub2); color: var(--w-navy); }
.w-steps p { margin: 0; color: var(--v6-t2); }
.w-steps .w-ico { color: var(--w-blue); }
.w-steps .w-ico .v6-ic { width: 32px; height: 32px; stroke-width: 1.5; }

/* Platform cards: the kit's 3D block family */
.w-plats { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.w-plat { display: flex; flex-direction: column; margin: 0 4px 4px 0; }
.w-plat-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.w-plat-top img { width: 52px; height: 52px; flex-shrink: 0; }
.w-plat .v6-pill { white-space: normal; }
.w-plat h3 { margin: 4px 0 0; font-size: var(--v6-fs-sub1); line-height: var(--v6-lh-sub1); color: var(--w-navy); }
.w-plat p { margin: 0 0 14px; color: var(--v6-t2); flex: 1; }
.w-plat-links { display: flex; gap: 16px; border-top: var(--v6-line) solid var(--v6-hover); padding-top: 10px; }
.w-plat-links a { font-weight: 600; text-decoration: none; }
.w-plat-links a:hover { text-decoration: underline; }

/* Why blocks */
.w-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.w-why .v6-block { margin: 0 4px 4px 0; }
.w-why h3 { margin: 8px 0 6px; font-size: var(--v6-fs-sub2); line-height: var(--v6-lh-sub2); color: var(--w-navy); }
.w-why p { margin: 0; color: var(--v6-t2); }
.w-why .w-ico { color: var(--w-blue); }
.w-why .w-ico .v6-ic { width: 32px; height: 32px; stroke-width: 1.5; }

/* Contact */
.w-contact { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; }
.w-contact dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; }
.w-contact dt { font-weight: 600; color: var(--w-navy); display: flex; align-items: center; gap: 8px; }
.w-contact dd { margin: 0; }
.w-contact .w-btn-accent { margin-top: 8px; }

/* Footer */
.w-foot { background: var(--w-navy); color: var(--w-on-hero-soft); padding: 32px 0 24px; font-size: var(--v6-fs-cap); }
.w-foot-grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.w-foot img { height: 60px; width: auto; display: block; }
.w-foot a { color: var(--w-on-hero); }
.w-foot p { margin: 4px 0; }
.w-foot .w-by { display: flex; align-items: center; gap: 10px; color: var(--w-on-hero); text-decoration: none; font-weight: 600; font-size: var(--v6-fs-body); }
.w-foot .w-by img { height: 34px; }

/* Phones and small tablets */
@media (max-width: 860px) {
  .w-hero-grid, .w-contact { grid-template-columns: 1fr; }
  .w-hero-mark { display: none; }
  .w-why { grid-template-columns: 1fr; }
  .w-steps { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .w-steps::before { display: none; }
  .w-hero { background-position: right -320px top -80px, 0 0; }
  .w-hdr nav .w-hide-sm { display: none; }
}
@media (max-width: 520px) {
  .w-hero { padding: 40px 0; }
  .w-hero h1 { font-size: var(--w-fs-h2); line-height: var(--w-lh-h2); }
  .w-facts { grid-template-columns: 1fr; gap: 12px; }
  .w-steps { grid-template-columns: 1fr; }
  .w-hdr .w-logo { height: 32px; }
  .w-foot img { height: 40px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }