/* AMANI Visual – stránky služieb (cena webu, web pre developera, web pre ambulanciu, prezentácia produktu).
   Načítava sa po styles.css a automation.css; používa ich tokeny a triedy (.au-hero, .au-head, .au-gain, .au-steps, .faq, .contact). */

.sv-hero .au-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.sv-hero__secondary { border-color: rgba(238, 235, 228, .45); color: var(--paper); }
.sv-hero__secondary:hover { border-color: var(--paper); }
.au-hero__act { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.sv-panel { border: 1px solid rgba(238, 235, 228, .18); border-radius: 18px; padding: clamp(22px, 2.6vw, 34px); display: grid; gap: 18px; background: rgba(255, 255, 255, .03); align-self: center; }
.sv-panel__k { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; opacity: .6; }
.sv-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sv-panel li { display: flex; gap: 12px; align-items: baseline; font-size: 15.5px; line-height: 1.5; }
.sv-panel li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--copper); flex: none; transform: translateY(-2px); }

.sv-gain { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sv-two-wrap { background: var(--moss); color: var(--paper); padding: clamp(68px, 8vw, 112px) 0; }
.sv-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 72px); }
.sv-two h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.025em; line-height: 1.1; margin-bottom: 18px; }
.sv-list { list-style: none; margin: 0; padding: 0; display: grid; }
.sv-list li { display: flex; gap: 14px; align-items: baseline; border-top: 1px solid var(--line-dark); padding: 14px 0; font-size: 15.5px; line-height: 1.5; }
.sv-list li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--copper); flex: none; transform: translateY(-2px); }

.sv-demos-wrap { background: var(--paper); color: var(--ink); padding: clamp(68px, 8vw, 112px) 0; }
.sv-demos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.sv-demo { display: grid; gap: 10px; align-content: start; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 2.2vw, 30px); background: #fff; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.sv-demo:hover { transform: translateY(-3px); border-color: var(--copper); }
.sv-demo__k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--copper); }
.sv-demo strong { font-family: var(--font-display); font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -.03em; line-height: 1.08; }
.sv-demo__t { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.sv-demo__go { margin-top: 6px; font-size: 14px; font-weight: 700; display: inline-flex; gap: 8px; align-items: center; }
.sv-demo__go i { font-style: normal; color: var(--copper); transition: transform .3s var(--ease); }
.sv-demo:hover .sv-demo__go i { transform: translateX(4px); }

.sv-more-wrap { background: var(--paper); color: var(--ink); padding: 0 0 clamp(56px, 7vw, 96px); }
.sv-more { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; border-top: 1px solid var(--line); padding-top: 22px; font-size: 15px; }
.sv-more span { opacity: .65; }
.sv-more a { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--line); }
.sv-more a:hover { border-color: var(--copper); }

@media (max-width: 1100px) {
  .sv-hero .au-hero__grid { grid-template-columns: 1fr; }
  .sv-panel { align-self: start; }
  .sv-gain, .sv-demos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sv-gain, .sv-demos, .sv-two { grid-template-columns: 1fr; }
  .sv-two { gap: 36px; }
}