

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 22px;border-radius:var(--radius-sm);
  font-weight:600;font-size:.9375rem;text-decoration:none;white-space:nowrap;
  transition:background var(--t),border-color var(--t),transform var(--t),color var(--t)}
.btn:active{transform:translateY(1px)}
.btn svg{flex:none;transition:transform var(--t)}
.btn:hover svg{transform:translateX(3px)}

.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-hover);color:#fff}
.hero .btn--primary{font-size:1.05rem;padding:14px 32px}

.btn--ghost{border:1px solid var(--border);color:var(--text)}
.btn--ghost:hover{border-color:var(--accent);color:var(--text-strong);background:rgba(53,167,255,.08)}

.btn--pill{border-radius:999px}

.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:var(--blue-hover);color:#fff}

.btn--wide{width:100%}
@media (min-width:480px){.btn--wide{width:auto}}

.arrow-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;
  font-size:.9375rem;color:var(--accent);text-decoration:none;margin-top:24px}
.arrow-link:hover{color:var(--text-strong)}
.arrow-link svg{transition:transform var(--t)}
.arrow-link:hover svg{transform:translateX(3px)}

.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:24px;transition:border-color var(--t),transform var(--t),background var(--t)}
@media (min-width:768px){.card{padding:28px}}
.card--link{display:block;text-decoration:none;color:inherit}
.card--link:hover{border-color:var(--accent);transform:translateY(-3px);background:var(--surface-2);color:inherit}
.card__num{font-size:var(--fs-small);font-weight:700;color:var(--accent);letter-spacing:.08em}
.card__icon{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;
  background:var(--surface-2);color:var(--accent);margin-bottom:18px}
.card--link:hover .card__icon{background:rgba(53,167,255,.18)}
.card__title{font-size:var(--fs-h3);margin:10px 0 8px;font-weight:600}
.card__text{color:var(--text-muted);font-size:.9375rem}
.card__tags{margin-top:14px;font-size:.8125rem;color:var(--text-dim)}

.card--lg{padding:28px;background:var(--surface-2);
  box-shadow:0 24px 48px -24px rgba(0,0,0,.5)}
@media (min-width:768px){.card--lg{padding:40px}}

.icon-badge{width:56px;height:56px;flex:none;display:grid;place-items:center;
  border-radius:14px;background:var(--surface-3);color:var(--accent);
  box-shadow:0 0 0 1px var(--border-soft),0 0 24px rgba(53,167,255,.25)}
.icon-badge--sm{width:44px;height:44px;border-radius:10px;box-shadow:0 0 0 1px var(--border-soft)}

.checks{display:grid;gap:10px;font-size:.9375rem}
.checks li{display:flex;gap:10px;align-items:flex-start;color:var(--text-muted)}
.checks svg{flex:none;margin-top:5px;color:var(--success)}

.checks__bullet{flex:none;width:22px;height:22px;border-radius:50%;background:var(--blue);
  display:grid;place-items:center;margin-top:1px;box-shadow:0 0 12px rgba(29,115,213,.35)}
.checks__bullet svg{margin-top:0;color:#fff}

.price{position:relative;display:flex;flex-direction:column;height:100%}
.price--featured{border-color:var(--accent);border-width:2px;background:var(--surface-2)}
.price__badge{position:absolute;top:-11px;right:20px;background:var(--blue);color:#fff;
  font-size:.75rem;font-weight:600;padding:4px 12px;border-radius:999px}
.price__name{font-size:1.0625rem;font-weight:700;color:var(--text-strong);letter-spacing:.04em}
.price__for{font-size:.875rem;color:var(--text-muted);margin-top:2px}
.price__amount{margin:18px 0 4px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price__value{font-size:clamp(1.625rem,1.4rem + .9vw,2rem);font-weight:600;
  color:var(--text);letter-spacing:-.02em}
.price__unit{font-size:.875rem;color:var(--text-muted)}
.price__list{margin:18px 0 24px}
.price .btn{margin-top:auto}

.faq{border-top:1px solid var(--border-soft)}
.faq__item{border-bottom:1px solid var(--border-soft)}
.faq__q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;padding:20px 0;text-align:left;font-size:1rem;font-weight:600;
  color:var(--text);line-height:1.45;transition:color var(--t)}
.faq__q:hover{color:var(--accent)}
.faq__sign{flex:none;width:26px;height:26px;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--border);color:var(--accent);
  margin-top:2px;transition:transform var(--t),background var(--t)}
.faq__q[aria-expanded=true] .faq__sign{transform:rotate(45deg);background:rgba(53,167,255,.14)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1)}
.faq__item[data-open] .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{color:var(--text-muted);padding-bottom:22px;max-width:70ch}

html:not([data-anim]) .faq__a{grid-template-rows:1fr}

.photoband{position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--border-soft);isolation:isolate}
.photoband__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.photoband::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,var(--bg) 22%,rgba(11,22,32,.86) 58%,rgba(11,22,32,.55))}
.photoband__inner{padding:36px var(--gutter)}
@media (min-width:900px){.photoband__inner{padding:56px;max-width:60%}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mt-auto{margin-top:auto}
[hidden]{display:none!important}
