/* ============================================================
   EFSATU — Showcase
   ============================================================ */
:root{
  --ink:#08141B; --paper:#F5F8FA; --white:#fff;
  --accent:#047AAC; --accent-deep:#03638A; --accent-bright:#1FA9E0;
  --text:#0E2230; --muted:#5A7481; --faint:#58737F; --line:#D8E4EA;
  --sans:"Manrope",system-ui,Segoe UI,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--paper);color:var(--text);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}

/* ---------- HEADER ---------- */
.head{padding:26px 0 0}
.top{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:28px;width:auto}
.brand span{font-size:19px;font-weight:800;letter-spacing:1.2px;color:var(--ink)}
.top .meta{display:flex;gap:22px;font-size:10px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--faint)}
.top .meta b{color:var(--accent-deep)}

.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:end;padding:64px 0 58px}
.hero h1{font-size:clamp(44px,5.8vw,78px);line-height:.98;letter-spacing:-.04em;font-weight:800;color:var(--ink)}
.hero h1 .s{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)}
.hero p{font-size:15px;line-height:1.8;color:var(--muted);max-width:380px}
.hero .note{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:10px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint)}
.hero .note:before{content:"";width:7px;height:7px;background:var(--accent);display:block}

/* ---------- TIER ---------- */
.tier{padding:78px 0 12px}
.tier-head{display:grid;grid-template-columns:56px auto 1fr auto;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:30px}
.tier-no{font-family:var(--serif);font-style:italic;font-size:34px;line-height:1;color:var(--accent)}
.tier-head h2{font-size:34px;line-height:1;letter-spacing:-.03em;font-weight:800;color:var(--ink)}
.tier-head .desc{font-size:13px;font-weight:600;color:var(--muted);padding-left:6px}
.tier-head .count{font-size:9.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card-waru .frame img{object-position:center}

.card{min-width:0;margin:0}
.frame{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 16px 36px rgba(8,20,27,.09);transition:transform .3s,box-shadow .3s}
.card:hover .frame{transform:translateY(-3px);box-shadow:0 24px 46px rgba(8,20,27,.14)}
.fbar{height:26px;display:flex;align-items:center;gap:5px;padding:0 10px;background:#FBFDFE;border-bottom:1px solid #E9F0F3}
.fbar i{width:5px;height:5px;border-radius:50%;background:#D9E3E9}
.fbar .tag{margin:0 auto;font-size:8px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:#8CA4B0}
.frame img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;background:#E9F0F4}
.cap{display:flex;align-items:baseline;gap:12px;margin-top:11px}
.cap .n{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--accent);min-width:15px}
.cap .nm{font-size:13.5px;font-weight:800;color:var(--ink)}
.cap .ty{margin-left:auto;font-size:9px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--faint);white-space:nowrap}

/* ---------- MAXIMUM (DARK) ---------- */
.tier.dark{background:var(--ink);margin-top:64px;padding:78px 0 84px;color:var(--paper)}
.tier.dark .tier-head{border-color:rgba(255,255,255,.14)}
.tier.dark .tier-no{color:var(--accent-bright)}
.tier.dark h2{color:#fff}
.tier.dark .desc{color:#9DB6C3}
.tier.dark .count{color:rgba(255,255,255,.45)}
.tier.dark .frame{border-color:rgba(255,255,255,.12);box-shadow:0 22px 50px rgba(0,0,0,.35)}
.tier.dark .cap .nm{color:#fff}
.tier.dark .cap .ty{color:rgba(255,255,255,.45)}
.tier.dark .cap .n{color:var(--accent-bright)}

/* ---------- EMPTY ---------- */
.empty{padding:40px 0;color:var(--faint);font-size:14px}

/* ---------- CTA / FOOTER ---------- */
.cta{padding:76px 0 70px}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:40px;border-top:1px solid var(--line);padding-top:44px}
.cta h2{font-size:clamp(30px,3.4vw,44px);line-height:1.05;letter-spacing:-.03em;font-weight:800;color:var(--ink);max-width:560px}
.cta h2 .s{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;font-size:13px;font-weight:800;padding:14px 24px;border-radius:999px;white-space:nowrap;transition:background .2s}
.btn:hover{background:var(--accent-deep)}
.cta-wa{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:220px}
.cta-wa-title{font-size:10.5px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--faint);margin:0 0 3px}
.cta-wa a{font-size:15px;font-weight:800;color:var(--accent-deep);border-bottom:1px solid var(--line);padding-bottom:2px;white-space:nowrap;transition:color .2s,border-color .2s}
.cta-wa a:hover{color:var(--accent);border-color:var(--accent)}
.foot{background:var(--ink);color:rgba(255,255,255,.55);padding:26px 0}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10.5px;letter-spacing:.4px}
.foot-brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:800;font-size:16px;letter-spacing:1.2px}
.foot-brand img{height:22px;width:auto}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .wrap{padding:0 26px}
  .hero{grid-template-columns:1fr;gap:26px;padding:48px 0 42px}
  .hero p{max-width:520px}
  .grid{grid-template-columns:1fr 1fr;gap:20px}
  .tier-head{grid-template-columns:44px auto 1fr;gap:12px}
  .tier-head .count{grid-column:2/4;margin-top:4px}
}
@media (max-width:620px){
  .wrap{padding:0 18px}
  .top .meta{display:none}
  .hero h1{font-size:40px}
  .hero .note{display:none}
  .tier{padding:56px 0 6px}
  .tier.dark{margin-top:48px;padding:56px 0 60px}
  .tier-head{grid-template-columns:auto 1fr;gap:6px 10px}
  .tier-no{font-size:28px}
  .tier-head h2{font-size:27px}
  .tier-head .desc{grid-column:1/3;font-size:12px;padding-left:0;margin-top:2px}
  .tier-head .count{display:none}
  .grid{grid-template-columns:1fr;gap:22px}
  .cap .ty{font-size:8px}
  .cta-in{flex-direction:column;align-items:flex-start;gap:24px}
  .foot-in{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .card:hover .frame{transform:none}
}