:root{
  --bg:#1A1A1A;
  --panel:#2A2A2A;
  --accent:#F47B20;
  --text:#FFFFFF;
  --muted:#AAAAAA;
  --footer:#777777;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Futura,"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.35;
}

.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding:28px 18px 18px;
}

.top{
  padding-top:6px;
}

.brand{
  max-width:1100px;
  margin:0 auto;
  text-align:center;
}

.brand__title{
  margin:0;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-size:clamp(28px,6vw,52px);
}

.brand__teb{
  display:inline-block;
  padding-bottom:6px;
  border-bottom:4px solid var(--accent);
  line-height:1;
}

.brand__rest{margin-left:10px}

.brand__tagline{
  margin:12px 0 14px;
  font-size:clamp(14px,2.2vw,16px);
  opacity:0.92;
}

.brand__divider{
  height:2px;
  background:var(--accent);
  width:min(520px,92%);
  margin:0 auto;
  opacity:0.9;
}

.rates{
  width:100%;
  max-width:1100px;
  margin:26px auto 0;
  flex:1;
}

.rates__heading{
  margin:18px 0 18px;
  text-align:center;
  font-size:clamp(18px,3vw,26px);
  font-weight:800;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  align-items:stretch;
}

.card{
  background:var(--panel);
  border-radius:14px;
  border-left:4px solid var(--accent);
  padding:18px 18px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  box-shadow:0 0 0 rgba(244,123,32,0);
  transition:box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
  opacity:0;
  transform:translateY(10px);
}

.card.is-visible{
  animation:fadeUp 520ms ease forwards;
}

.card:nth-child(1).is-visible{animation-delay:0ms}
.card:nth-child(2).is-visible{animation-delay:90ms}
.card:nth-child(3).is-visible{animation-delay:180ms}

.card:hover{
  box-shadow:0 0 0 2px rgba(244,123,32,0.28), 0 16px 36px rgba(0,0,0,0.35);
  transform:translateY(-2px);
}

.card__icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:var(--accent);
  flex:0 0 auto;
  font-size:20px;
}

.card__title{
  margin:0;
  font-weight:800;
  font-size:18px;
  letter-spacing:0.01em;
}

.card__price{
  margin:8px 0 4px;
  color:var(--accent);
  font-weight:800;
  font-size:28px;
}

.card__subtitle{
  color:var(--muted);
  font-size:13px;
  font-weight:600;
}

.notice{
  margin:18px auto 0;
  width:fit-content;
  max-width:100%;
  background:var(--panel);
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:center;
}

.notice__icon{color:var(--accent); font-size:16px}
.notice__text{font-weight:800; color:var(--text); font-size:14px}

.back{
  margin:16px 0 0;
  display:flex;
  justify-content:center;
}

.back__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  background:var(--accent);
  color:var(--text);
  font-weight:800;
  text-decoration:none;
  letter-spacing:0.01em;
  transition:filter 180ms ease, transform 180ms ease;
}

.back__button:hover{
  filter:brightness(0.9);
  transform:translateY(-1px);
}

.back__button:focus-visible{
  outline:2px solid rgba(244,123,32,0.85);
  outline-offset:4px;
}

.footer{
  padding-top:18px;
}

.footer__text{
  margin:0;
  text-align:center;
  color:var(--footer);
  font-size:12.5px;
}

@keyframes fadeUp{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}

@media (max-width: 860px){
  .cards{grid-template-columns:1fr;}
  .card{align-items:center}
  .card__content{width:100%}
  .card__price{font-size:26px}
}

@media (prefers-reduced-motion: reduce){
  .card{transition:none}
  .card.is-visible{animation:none; opacity:1; transform:none}
  .back__button{transition:none}
}