:root{
  --bg:#EFEAE4;
  --fg:#1E2A52;
  --accent:#0061FE;
  --muted:#B7D4EC;
  --ink:#1E2A52;
  --surface:#F2C94C;
  --t-cyan:#4FC9C6;
  --t-vermilion:#EE5023;
  --t-orange:#F58220;
  --t-lime:#C9E342;
  --t-maroon:#6F1E45;
  --t-lavender:#C5A7D8;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);}
body{font-family:'Inter',system-ui,sans-serif;font-weight:500;line-height:1.45;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;}

.canvas{
  position:relative;
  padding:48px 56px 32px;
  min-height:100vh;
}
.grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(90deg,transparent calc(8.333% - 1px),rgba(183,212,236,.7) calc(8.333% - 1px),rgba(183,212,236,.7) 8.333%,transparent 8.333%),
    linear-gradient(0deg,transparent calc(16.66% - 1px),rgba(183,212,236,.35) calc(16.66% - 1px),rgba(183,212,236,.35) 16.66%,transparent 16.66%);
  background-size:100% 100%;
  pointer-events:none;z-index:0;opacity:.55;
}
.util{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);padding-bottom:20px;
  border-bottom:1px solid rgba(30,42,82,.18);
}
.util .right{opacity:.6;}

.board{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:140px;
  gap:18px;
  padding:32px 0;
}

.tile{
  position:relative;
  border-radius:14px;
  padding:20px 18px;
  display:flex;flex-direction:column;justify-content:space-between;
  color:var(--ink);font-weight:600;
  cursor:default;
  transition:transform .25s ease, box-shadow .25s ease;
}
.tile[tabindex]{cursor:pointer;outline:none;}
.tile[tabindex]:hover,.tile[tabindex]:focus-visible{transform:translateY(-4px);box-shadow:0 18px 36px -16px rgba(30,42,82,.35);}

.cover{
  grid-column:span 3;grid-row:span 2;
  background:var(--ink);color:#fff;
  padding:28px 30px;
}
.cover .num{
  font-size:36px;font-weight:700;letter-spacing:.02em;
  position:absolute;top:24px;left:28px;
}
.cover-eyebrow{position:absolute;top:34px;right:30px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6;}
.cover-title{
  font-size:clamp(34px,4vw,56px);font-weight:700;letter-spacing:-.02em;line-height:.95;
  margin:64px 0 12px;
}
.cover-sub{margin:0;font-size:14px;opacity:.8;}

.t-eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;}
.t-num{position:absolute;top:14px;right:16px;font-size:11px;letter-spacing:.2em;opacity:.6;}
.t-big{
  font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1;margin:8px 0;
}
.t-big.light{font-family:'Inter',serif;font-style:italic;}
.t-big sup{font-size:.36em;font-weight:600;letter-spacing:0;vertical-align:super;margin-left:.06em;}
.t-meta{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.75;}
.t-price{font-size:14px;font-weight:700;letter-spacing:.04em;}

.t-micro{grid-column:span 2;grid-row:span 2;background:var(--t-orange);}
.t-classic{grid-column:span 1;grid-row:span 1;background:var(--t-cyan);}
.t-partial{grid-column:span 1;grid-row:span 1;background:var(--t-vermilion);color:#fff;align-items:flex-start;}
.t-designer{grid-column:span 1;grid-row:span 1;background:var(--t-lime);}
.t-mega{grid-column:span 2;grid-row:span 1;background:var(--t-maroon);color:#fff;}
.t-architect{grid-column:span 1;grid-row:span 1;background:var(--accent);color:#fff;}
.t-lab{grid-column:span 1;grid-row:span 1;background:var(--t-lavender);}
.t-b2b{grid-column:span 2;grid-row:span 1;background:var(--surface);color:var(--ink);}
.t-b2b .t-cta{
  display:inline-block;padding:6px 12px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  margin-top:6px;
}
.t-care{grid-column:span 1;grid-row:span 1;background:var(--t-cyan);}
.t-share{grid-column:span 1;grid-row:span 1;background:var(--t-orange);justify-content:space-between;}
.share-tile{
  display:flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;padding:8px 12px;border-radius:999px;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
}
.share-icon{width:18px;height:18px;border-radius:50%;background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:11px;}

/* FOOT */
.foot{padding:20px 56px;background:var(--ink);color:#fff;}
.foot-row{
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  max-width:1280px;margin:0 auto;font-size:12px;letter-spacing:.06em;
}
.foot-link{
  background:var(--surface);color:var(--ink);
  padding:6px 12px;border-radius:999px;font-weight:700;text-transform:uppercase;
}

/* MODAL */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal[hidden]{display:none;}
.modal-overlay{position:absolute;inset:0;background:rgba(30,42,82,.6);backdrop-filter:blur(6px);}
.modal-card{
  position:relative;background:var(--bg);color:var(--ink);
  border-radius:18px;
  max-width:880px;width:100%;
  display:grid;grid-template-columns:1fr 1fr;
  overflow:hidden;z-index:1;
  box-shadow:0 30px 80px -20px rgba(30,42,82,.5);
}
.modal-close{position:absolute;top:10px;right:14px;z-index:2;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-size:22px;}
.modal-img{background:var(--surface);display:flex;align-items:center;justify-content:center;min-height:280px;}
.modal-img img{width:100%;height:100%;object-fit:cover;}
.modal-body{padding:28px;}
.modal-eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:700;}
.modal-body h3{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:6px 0 12px;}
.modal-body p{margin:0 0 18px;font-weight:500;}
.modal-spec{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px;}
.modal-spec > div{display:flex;flex-direction:column;gap:2px;}
.modal-spec dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;}
.modal-spec dd{margin:0;font-size:20px;font-weight:700;}
.t-cta{
  display:inline-block;padding:10px 16px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}

/* RESPONSIVE */
@media (max-width:980px){
  .canvas{padding:32px 24px;}
  .board{grid-template-columns:repeat(4,1fr);grid-auto-rows:130px;}
  .cover{grid-column:span 4;}
  .t-micro{grid-column:span 2;}
  .t-mega{grid-column:span 2;}
  .t-b2b{grid-column:span 2;}
}
@media (max-width:720px){
  .canvas{padding:24px 16px;}
  .board{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px;gap:12px;}
  .cover{grid-column:span 2;grid-row:span 2;}
  .cover-title{font-size:32px;margin:48px 0 8px;}
  .t-micro,.t-classic,.t-partial,.t-designer,.t-mega,.t-architect,.t-lab,.t-b2b,.t-care,.t-share{
    grid-column:span 1;grid-row:span 1;
  }
  .t-b2b{grid-column:span 2;}
  .foot{padding:18px 16px;}
  .modal-card{grid-template-columns:1fr;}
  .modal-spec{grid-template-columns:1fr;}
}