:root{
  --berry:#7A1E2C;
  --graphite:#1F1F23;
  --green:#2E6F4F;
  --bg:#F4F5F7;
  --text:#222;
  --muted:#6B7280;
  --card:#fff;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg);}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px;}
header{
  position:sticky;top:0;z-index:10;
  background:rgba(244,245,247,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(31,31,35,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px;}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;}
.brand img{width:40px;height:40px;object-fit:contain}
.brand .name{display:flex;flex-direction:column;line-height:1.05}
.brand .name b{font-size:16px}
.brand .name span{font-size:12px;color:var(--muted)}
.menu{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.menu a{font-size:14px;color:var(--graphite);opacity:.85}
.menu a:hover{opacity:1}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:999px;border:1px solid rgba(31,31,35,.15);
  font-weight:700;font-size:14px;gap:8px;cursor:pointer;
  background:#fff;
}
.btn.primary{background:var(--berry);border-color:var(--berry);color:#fff}
.btn.primary:hover{filter:brightness(1.03)}
.btn.ghost:hover{background:rgba(31,31,35,.04)}
.hero{padding:52px 0 36px;}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center;}
.h1{font-size:44px;line-height:1.05;margin:0 0 10px;color:var(--graphite);}
.sub{font-size:16px;line-height:1.5;color:var(--muted);margin:0 0 18px;max-width:62ch}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.badge{padding:8px 10px;border-radius:999px;background:rgba(31,31,35,.05);font-size:13px;color:var(--graphite)}
.hero-card{
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.85));
  border:1px solid rgba(31,31,35,.08);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 10px 30px rgba(31,31,35,.08);
}
.hero-card .kpi{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.kpi div{background:rgba(244,245,247,.8);border:1px solid rgba(31,31,35,.06);border-radius:14px;padding:12px}
.kpi b{display:block;font-size:16px}
.kpi span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.section{padding:34px 0}
.section h2{margin:0 0 14px;font-size:28px;color:var(--graphite)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{
  background:var(--card);
  border:1px solid rgba(31,31,35,.08);
  border-radius:var(--radius);
  padding:16px;
}
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{background:var(--card);border:1px solid rgba(31,31,35,.08);border-radius:var(--radius);padding:16px}
.step .n{width:28px;height:28px;border-radius:10px;background:rgba(122,30,44,.12);color:var(--berry);display:flex;align-items:center;justify-content:center;font-weight:900;margin-bottom:10px}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.footer{padding:26px 0;border-top:1px solid rgba(31,31,35,.08);color:var(--muted);font-size:13px}
.small{font-size:13px;color:var(--muted)}
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .h1{font-size:34px}
}
@media (max-width: 520px){
  .steps{grid-template-columns:1fr}
  .menu{display:none}
}

/* ---------- Motion & UI polish ---------- */
html{scroll-behavior:smooth;}
:focus-visible{outline:3px solid rgba(122,30,44,.35); outline-offset:3px; border-radius:10px;}
.shadow-sm{box-shadow:0 6px 18px rgba(31,31,35,.08);}
.shadow-md{box-shadow:0 16px 44px rgba(31,31,35,.12);}
.btn{transition:transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(31,31,35,.12);}
.btn:active{transform:translateY(0px) scale(.99); box-shadow:0 6px 16px rgba(31,31,35,.10);}
.btn.primary{box-shadow:0 10px 26px rgba(122,30,44,.22);}
.btn.primary:hover{box-shadow:0 16px 34px rgba(122,30,44,.26);}
.badge{transition:transform .12s ease, background .12s ease;}
.badge:hover{transform:translateY(-1px); background:rgba(31,31,35,.07);}
.card{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.card:hover{transform:translateY(-2px); box-shadow:0 16px 44px rgba(31,31,35,.12); border-color:rgba(31,31,35,.12);}
.step{transition:transform .18s ease, box-shadow .18s ease;}
.step:hover{transform:translateY(-2px); box-shadow:0 16px 44px rgba(31,31,35,.12);}
header.is-scrolled{background:rgba(244,245,247,.92); border-bottom-color:rgba(31,31,35,.12);}
header .nav{transition:padding .18s ease;}
header.is-scrolled .nav{padding:10px 0;}
/* Active menu link */
.menu a.active{opacity:1; font-weight:800; color:var(--berry);}
/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none;}
}
/* Mobile menu */
.burger{display:none; width:42px; height:42px; border-radius:999px; border:1px solid rgba(31,31,35,.15); background:#fff; align-items:center; justify-content:center; cursor:pointer;}
.burger span{display:block; width:18px; height:2px; background:var(--graphite); position:relative;}
.burger span:before,.burger span:after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--graphite);}
.burger span:before{top:-6px;}
.burger span:after{top:6px;}
.mobile-menu{display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:50;}
.mobile-panel{position:absolute; right:0; top:0; height:100%; width:min(360px, 92vw); background:var(--bg); padding:16px; box-shadow:-20px 0 60px rgba(0,0,0,.25);}
.mobile-panel a{display:block; padding:12px 10px; border-radius:12px; font-weight:700; color:var(--graphite);}
.mobile-panel a:hover{background:rgba(31,31,35,.06);}
.mobile-panel .close{margin-left:auto; margin-bottom:8px;}
@media (max-width: 520px){
  .burger{display:flex;}
  .menu{display:none !important;}
}
/* Back to top */
.to-top{position:fixed; right:18px; bottom:18px; z-index:40; display:none;}
.to-top.show{display:inline-flex;}
/* Form feedback */
.notice{padding:12px 14px; border-radius:14px; border:1px solid rgba(31,31,35,.12); background:#fff; color:var(--graphite); margin-top:12px; display:none;}
.notice.ok{border-color:rgba(46,111,79,.35); background:rgba(46,111,79,.08);}
.notice.err{border-color:rgba(122,30,44,.35); background:rgba(122,30,44,.08);}
.notice.show{display:block;}
.input, .select, .textarea{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(31,31,35,.15);
  background:#fff;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.input:focus, .select:focus, .textarea:focus{
  border-color:rgba(122,30,44,.45);
  box-shadow:0 0 0 4px rgba(122,30,44,.12);
  outline:none;
}

/* ---------- Premium header / brand mark ---------- */
.brand-mark{
  display:flex; align-items:center; gap:14px;
}
.brand-mark .logo-wrap{
  width:44px; height:44px; border-radius:14px;
  background: radial-gradient(120% 120% at 20% 15%, rgba(255,255,255,.95), rgba(255,255,255,.55));
  border:1px solid rgba(31,31,35,.10);
  box-shadow: 0 10px 26px rgba(31,31,35,.10);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.brand-mark img{
  width:34px; height:34px; object-fit:contain;
  transform-origin: 50% 65%;
}
/* Logo animation: subtle "alive" */
@keyframes logoFloat {
  0%   { transform: translateY(0) rotate(0deg); }
  40%  { transform: translateY(-1.5px) rotate(-1deg); }
  70%  { transform: translateY(0.5px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes logoShine {
  0% { transform: translateX(-120%) rotate(12deg); opacity:0; }
  10%{ opacity:.35; }
  40%{ opacity:.0; }
  100%{ transform: translateX(240%) rotate(12deg); opacity:0; }
}
.logo-animate{
  animation: logoFloat 5.5s ease-in-out infinite;
}
.logo-wrap::after{
  content:"";
  position:absolute;
  width:70px; height:140%;
  left:-80px; top:-20%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: rotate(12deg);
  opacity:0;
  animation: logoShine 6.5s ease-in-out infinite;
  pointer-events:none;
}
/* Hero premium */
.hero{
  position:relative;
}
.hero::before{
  content:"";
  position:absolute; inset:-60px 0 auto 0; height:420px;
  background:
    radial-gradient(900px 380px at 10% 10%, rgba(122,30,44,.10), transparent 60%),
    radial-gradient(760px 320px at 92% 22%, rgba(46,111,79,.10), transparent 55%);
  pointer-events:none;
}
.hero-grid{position:relative;}
.hero-card{
  border-radius:22px;
}
.hero-card b{font-size:16px}
/* About showcase block */
.showcase{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
  align-items:stretch;
}
.showcase .panel{
  background: linear-gradient(180deg,#fff,rgba(255,255,255,.86));
  border:1px solid rgba(31,31,35,.08);
  border-radius:22px;
  padding:18px;
  box-shadow:0 16px 44px rgba(31,31,35,.10);
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px;
  border:1px solid rgba(31,31,35,.12);
  background:rgba(255,255,255,.8);
  font-size:13px; color:var(--graphite);
}
.pill-dot{
  width:8px; height:8px; border-radius:999px;
  background:var(--berry);
}
.kpi-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px;
}
.kpi-grid .k{
  border-radius:18px;
  background:rgba(244,245,247,.9);
  border:1px solid rgba(31,31,35,.06);
  padding:14px;
}
.k .big{font-size:22px; font-weight:900; color:var(--graphite); line-height:1}
.k .cap{font-size:12px; color:var(--muted); margin-top:6px}
@media (max-width: 900px){
  .showcase{grid-template-columns:1fr}
}