/* Plandorabox Tools homepage. Palette + type follow the Visual & Typography
   Developer Guide: Comfortaa only; black, white and greys carry the page;
   yellow is reserved for the action arrows. */
:root{
  --black:#1D1D14; --white:#EEEEEE; --yellow:#EBE9A0; --yellow-hover:#E1DE8C;
  --grey-50:#F7F7F5; --grey-100:#EBEBE8; --grey-200:#D4D4D0; --grey-300:#B8B8B2;
  --grey-400:#7A7A73; --grey-500:#6B6B64; --grey-600:#4A4A44; --grey-700:#2D2D27;
  --black-900:#12120D;
  --font-brand:'Comfortaa',system-ui,sans-serif;
  --radius:16px;
  color-scheme:light;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--grey-50);
  color:var(--black);
  font-family:var(--font-brand);
  font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--black);outline-offset:3px;}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.home{max-width:1520px;margin:0 auto;padding:18px 32px 20px;}

/* ---------- Masthead ---------- */
.masthead{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:18px;}
.masthead-logo{display:flex;align-items:center;gap:16px;margin:0;font-size:inherit;}
.masthead-mark{width:clamp(52px,4.6vw,68px);height:auto;display:block;}
.masthead-word{font-weight:700;font-size:clamp(30px,3vw,42px);line-height:.92;letter-spacing:-.02em;}
.masthead-tag{margin:0;font-size:clamp(14px,1.2vw,17px);color:var(--grey-500);}

/* ---------- Tile grid ---------- */
.rows{display:flex;flex-direction:column;gap:10px;}
.row{display:grid;gap:10px;}
.row-1{grid-template-columns:repeat(4,minmax(0,1fr));}
.row-2{grid-template-columns:280fr 285fr 315fr 275fr 290fr;}
.row-3{grid-template-columns:430fr 315fr 335fr 360fr;}

.tile{
  position:relative;display:block;overflow:hidden;
  min-height:clamp(210px,24vh,252px);
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:transform .2s ease,box-shadow .2s ease;
  isolation:isolate;
}
.row-2 .tile{min-height:clamp(200px,23vh,238px);}
.row-3 .tile{min-height:clamp(190px,22vh,226px);}
.tile--light{background:var(--white);border-color:#E2E2DD;color:var(--black);}
.tile--dark{background:var(--black);color:var(--white);}
a.tile:hover,button.tile:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(29,29,20,.14);}
button.tile{width:100%;font:inherit;text-align:left;cursor:pointer;padding:0;}

.tile-art{
  position:absolute;top:0;right:0;bottom:0;width:48%;z-index:-1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);
  mask-image:linear-gradient(90deg,transparent 0,#000 22%);
}
.tile-art svg{width:100%;height:100%;display:block;transition:transform .5s ease;}
a.tile:hover .tile-art svg,button.tile:hover .tile-art svg{transform:scale(1.04);}
.tile--wide .tile-art{width:52%;}

.tile-body{
  position:relative;height:100%;min-height:inherit;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px 18px 20px 24px;max-width:60%;
}
.tile-icon{width:40px;height:40px;margin-bottom:auto;flex:0 0 auto;}
.tile-title{display:block;white-space:nowrap;margin:14px 0 6px;font-size:clamp(20px,1.75vw,28px);line-height:1.1;font-weight:700;letter-spacing:-.01em;}
.tile-desc{display:block;margin:0 0 14px;font-size:13px;line-height:1.45;color:var(--grey-600);}
.tile--dark .tile-desc{color:var(--grey-200);}
.tile-go{
  width:30px;height:30px;border-radius:50%;background:var(--yellow);color:var(--black);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  transition:background .15s,transform .15s;
}
.tile-go svg{width:16px;height:16px;}
a.tile:hover .tile-go,button.tile:hover .tile-go{background:var(--yellow-hover);transform:translateX(3px);}
.tile-soon{
  display:inline-block;align-self:flex-start;white-space:nowrap;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;border:1px solid currentColor;opacity:.75;
}
.tile--inert{cursor:default;}

/* ---------- Footer bar ---------- */
.footbar{
  margin-top:22px;background:var(--black);color:var(--white);border-radius:22px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:18px 32px;font-size:14px;
}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;}
.foot-links a,.foot-links button{
  color:inherit;background:none;border:none;font:inherit;cursor:pointer;padding:2px 0;
}
.foot-links a:hover,.foot-links button:hover{text-decoration:underline;}
.foot-links > * + *::before{content:"";display:inline-block;width:1px;height:14px;background:var(--grey-600);margin:0 18px;vertical-align:-2px;}
.foot-links--legal{justify-content:flex-end;font-size:12px;}
.foot-links--legal > * + *::before{margin:0 12px;}
.foot-social{
  display:flex;gap:22px;padding:0 32px;
  border-left:1px solid var(--grey-600);border-right:1px solid var(--grey-600);
}
.foot-social a{display:inline-flex;opacity:.95;}
.foot-social a:hover{opacity:1;color:var(--yellow);}
.foot-social svg{width:22px;height:22px;}

/* ---------- All tools dialog ---------- */
.all-tools{
  width:min(920px,calc(100vw - 32px));max-height:min(760px,calc(100vh - 48px));
  border:none;border-radius:20px;padding:0;background:var(--grey-50);color:var(--black);
  box-shadow:0 24px 80px rgba(0,0,0,.25);
}
.all-tools::backdrop{background:rgba(18,18,13,.55);}
.all-tools-head{
  position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;background:var(--grey-50);border-bottom:1px solid var(--grey-200);
}
.all-tools-head h2{margin:0;font-size:22px;}
.all-tools-close{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--grey-200);background:transparent;
  cursor:pointer;font-size:20px;line-height:1;color:var(--black);
}
.all-tools-close:hover{background:var(--grey-100);}
.all-tools-body{padding:20px 24px 28px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;}
.tool-group h3{margin:0 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-500);}
.tool-group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.tool-group a{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--grey-200);
  font-size:14px;font-weight:600;
}
.tool-group a:hover{border-color:var(--black);}
.tool-group a::after{content:"\2192";color:var(--grey-500);}
.tool-group.is-target h3{color:var(--black);}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .row-1,.row-2,.row-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .row-2 > :last-child{grid-column:1 / -1;}
  .rows{gap:10px;}
  .footbar{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .foot-links,.foot-links--legal{justify-content:center;}
  .foot-social{border:none;padding:0;}
}
@media (max-width:640px){
  .home{padding:18px 16px 24px;}
  .row-1,.row-2,.row-3{grid-template-columns:minmax(0,1fr);}
  .tile,.row-2 .tile,.row-3 .tile{min-height:190px;}
  .tile-body{max-width:64%;padding:22px 18px 18px 20px;}
  .tile-icon{width:40px;height:40px;}
  .footbar{padding:18px 16px;border-radius:18px;}
  .foot-links > * + *::before{margin:0 10px;}
}
@media (prefers-reduced-motion:reduce){
  .tile,.tile-art svg,.tile-go{transition:none;}
}