.crumbs{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--muted);transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.4}

.i-hero{
  display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center;
  padding:60px 0;
}
.i-hero h1{
  font-family:var(--serif);
  font-size:clamp(48px,6vw,80px);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.02em;
  margin-bottom:22px;
  max-width:14ch;
}

/* SHIMMERING ALUMINUM TEXT — readable, structured aluminum sheen */
.i-hero h1 em{
  font-style:italic;
  font-weight:400;
  background:linear-gradient(
    100deg,
    #6a6e72 0%,
    #8a8e92 25%,
    #b0b4b8 45%,
    #d8dcdf 50%,
    #b0b4b8 55%,
    #8a8e92 75%,
    #6a6e72 100%
  );
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:shimmer 4s ease-in-out infinite;
}
@keyframes shimmer{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

.i-hero .scene{
  position:relative;width:100%;aspect-ratio:5/4;
  max-width:600px;margin-left:auto;
}
.i-hero .scene svg{width:100%;height:100%;display:block}
.i-hero .ctas{margin-top:32px;display:flex;gap:10px;flex-wrap:wrap}
.i-hero .ctas .btn{border-radius:10px}
@media(max-width:880px){.i-hero{grid-template-columns:1fr}}

.i-hero .scene .organizer{
  cursor:pointer;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
  transform-origin:center center;
  transform-box:fill-box;
}
.i-hero .scene .organizer:hover{transform:translateY(-3px) scale(1.04)}

@keyframes thinkBob{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-2px) rotate(2deg)}
}
.i-hero .scene .head-group{
  animation:thinkBob 4s ease-in-out infinite;
  transform-origin:center bottom;
  transform-box:fill-box;
}

@keyframes thinkPulse{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:1;transform:scale(1.06)}
}
.i-hero .scene .thought{
  animation:thinkPulse 2.4s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box;
}

@keyframes handToDrawer1{
  0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:0}
  10%{opacity:1}
  60%{opacity:1;transform:translate(80px,40px) rotate(-12deg) scale(.85)}
  100%{transform:translate(160px,80px) rotate(-25deg) scale(.5);opacity:0}
}
@keyframes handToDrawer2{
  0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:0}
  10%{opacity:1}
  60%{opacity:1;transform:translate(120px,55px) rotate(15deg) scale(.85)}
  100%{transform:translate(220px,100px) rotate(35deg) scale(.5);opacity:0}
}
@keyframes handToDrawer3{
  0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:0}
  10%{opacity:1}
  60%{opacity:1;transform:translate(160px,55px) rotate(-8deg) scale(.85)}
  100%{transform:translate(280px,90px) rotate(-18deg) scale(.5);opacity:0}
}
@keyframes handToDrawer4{
  0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:0}
  10%{opacity:1}
  60%{opacity:1;transform:translate(140px,60px) rotate(20deg) scale(.85)}
  100%{transform:translate(250px,105px) rotate(40deg) scale(.5);opacity:0}
}
.i-hero .scene .fly-1{animation:handToDrawer1 4.2s ease-in-out infinite;animation-delay:0s;transform-origin:center;transform-box:fill-box}
.i-hero .scene .fly-2{animation:handToDrawer2 4.6s ease-in-out infinite;animation-delay:1s;transform-origin:center;transform-box:fill-box}
.i-hero .scene .fly-3{animation:handToDrawer3 5s ease-in-out infinite;animation-delay:2.1s;transform-origin:center;transform-box:fill-box}
.i-hero .scene .fly-4{animation:handToDrawer4 5.4s ease-in-out infinite;animation-delay:3.2s;transform-origin:center;transform-box:fill-box}

.s-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:32px;flex-wrap:wrap;gap:16px;
}
.s-head h2{
  font-size:clamp(28px,3.4vw,40px);
  line-height:1.1;letter-spacing:-.01em;
  font-weight:400;
}
/* Section heading em — soft metal gray (replaces gold) */
.s-head h2 em{font-style:italic;color:#8a8e92}

.insert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1080px){.insert-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.insert-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.insert-grid{grid-template-columns:1fr}}

.insert-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  transition:all .25s var(--ease);text-decoration:none;color:inherit;
}
.insert-card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--shadow)}
.insert-card .ph{aspect-ratio:1/1;overflow:hidden;background:#fafafa;position:relative;display:grid;place-items:center;padding:14px}
.insert-card .ph img{width:100%;height:100%;object-fit:contain;transition:transform .8s var(--ease)}
.insert-card:hover .ph img{transform:scale(1.04)}
.insert-card .body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}
.insert-card .code{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.insert-card h4{font-family:var(--serif);font-size:22px;font-weight:500;margin:4px 0;line-height:1.15}
.insert-card .meta{font-size:12px;color:var(--muted);line-height:1.5;flex:1}

/* "See more details" link footer — soft metal gray */
.insert-card .foot{
  display:flex;align-items:center;gap:8px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12px;font-weight:600;letter-spacing:.04em;
  color:#5a5e62;
  transition:color .2s var(--ease);
}
.insert-card .foot svg{transition:transform .25s var(--ease);flex-shrink:0}
.insert-card:hover .foot{color:var(--ink)}
.insert-card:hover .foot svg{transform:translateX(4px)}

.compat{
  background:var(--bg-2);padding:60px 0;border-radius:10px;margin-top:80px;
  text-align:center;
}
.compat h3{margin-bottom:16px}
.compat p{color:var(--muted);max-width:60ch;margin:0 auto;font-size:16px;line-height:1.7}

/* Organizer search */
.org-search{position:relative}
.org-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.org-search input{
  padding:11px 16px 11px 40px;border:1px solid var(--line);border-radius:12px;
  font-size:13px;width:300px;background:#fff;transition:all .2s var(--ease);
}
.org-search input:focus{outline:none;border-color:var(--gold);width:340px}
@media(max-width:780px){.org-search input,.org-search input:focus{width:100%}}
.org-empty{padding:60px 20px;text-align:center;color:var(--muted);font-size:14px;display:none}
