/*
 * Sagra+ — Section layouts.
 */

/* ===== HERO ===== */
.hero { position: relative; padding-top: clamp(120px, 16vh, 180px); padding-bottom: clamp(var(--space-16), 9vw, var(--space-24)); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 18% 8%, var(--halo-1), transparent 70%),
    radial-gradient(55% 45% at 92% 14%, var(--halo-2), transparent 72%);
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
}
.hero__grid {
  display: grid; grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(var(--space-8), 4vw, var(--space-16)); align-items: center;
}
.hero__eyebrow { margin-bottom: var(--space-5); }
.hero h1 { font-size: var(--fs-display); letter-spacing: -0.035em; }
.hero h1 .hl { color: var(--primary); }
.hero__lead { margin-top: var(--space-5); font-size: var(--fs-lead); color: var(--text-muted); max-width: 33ch; line-height: 1.5; }
.hero__cta { margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__chips { margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-2); }

.hero__art { position: relative; }
.hero__art .mock--screen { aspect-ratio: 4 / 3; }
.hero__art-main { position: relative; z-index: 2; }
.hero__art-float {
  position: absolute; z-index: 3; width: 46%; right: -6%; bottom: -10%;
  aspect-ratio: 3 / 4 !important; box-shadow: var(--shadow-xl);
}
.hero__art-badge {
  position: absolute; z-index: 4; left: -16px; top: 14%;
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 13px; box-shadow: var(--shadow-lg);
  font-size: var(--fs-xs); font-weight: 600;
}
.hero__art-badge .ic { width: 30px; height: 30px; padding: 6px; border-radius: 8px; background: var(--success-soft); color: var(--success); }
.hero__art-badge b { font-family: var(--font-display); display: block; }
.hero__art-badge span { color: var(--text-faint); font-weight: 500; }

/* ===== TRUST / LOGOS STRIP ===== */
.trust { border-block: 1px solid var(--border); background: var(--surface); }
.trust__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; padding-block: var(--space-6); }
.trust__lbl { font-size: var(--fs-sm); color: var(--text-muted); max-width: 32ch; }
.trust__lbl b { color: var(--text); font-family: var(--font-display); }
.trust__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ===== FEATURES ===== */
.features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.feature h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.feature p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; }
.feature__list { margin-top: var(--space-4); display: flex; flex-direction: column; gap: 7px; }
.feature__list li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-sm); }
.feature__list .ic { width: 16px; height: 16px; color: var(--success); flex: none; margin-top: 3px; }

/* a tall feature spotlight (split: copy + mockup) */
.spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.spotlight--rev .spotlight__media { order: -1; }
.spotlight__media .mock { width: 100%; }
.spotlight h3 { font-size: var(--fs-h2); margin: var(--space-3) 0 var(--space-4); }
.spotlight p { color: var(--text-muted); font-size: var(--fs-lead); line-height: 1.55; }
.spotlight__list { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.spotlight__list li { display: flex; gap: var(--space-3); }
.spotlight__list .ic { width: 20px; height: 20px; color: var(--primary); flex: none; margin-top: 2px; }
.spotlight__list b { font-family: var(--font-display); display: block; font-size: var(--fs-body); }
.spotlight__list span { color: var(--text-muted); font-size: var(--fs-sm); }
.spotlight + .spotlight { margin-top: clamp(var(--space-16), 9vw, var(--space-24)); }

/* ===== SHOWCASE (interface gallery) ===== */
.showcase__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.shot { display: flex; flex-direction: column; gap: var(--space-4); }
.shot .mock { width: 100%; }
.shot__cap { display: flex; align-items: flex-start; gap: var(--space-3); }
.shot__cap .ftile { width: 38px; height: 38px; margin: 0; border-radius: var(--radius-sm); }
.shot__cap .ftile .ic { width: 19px; height: 19px; }
.shot__cap h4 { font-family: var(--font-display); font-size: var(--fs-body); }
.shot__cap p { font-size: var(--fs-sm); color: var(--text-muted); }
.showcase__more { margin-top: var(--space-12); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.shot--sm .mock { aspect-ratio: 4 / 3; }

/* ===== WORKFLOW ===== */
.workflow { background: var(--surface); border-block: 1px solid var(--border); }
.flow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); margin-top: var(--space-10); }
.flow::before { content: ""; position: absolute; top: 27px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 8px, transparent 8px 16px); opacity: 0.5; z-index: 0; }
.step { position: relative; z-index: 1; text-align: center; }
.step__n { width: 54px; height: 54px; margin: 0 auto var(--space-4); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); display: grid; place-items: center; color: var(--primary); }
.step--done .step__n { background: var(--primary); color: #fff; border-color: transparent; }
:root[data-theme='dark'] .step--done .step__n { color: #08122e; }
.step__n .ic { width: 24px; height: 24px; }
.step h4 { font-family: var(--font-display); font-size: var(--fs-body); margin-bottom: 6px; }
.step p { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.step__state { display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); font-family: var(--font-display); }

/* ===== FAQ ===== */
.faq { max-width: var(--container-narrow); margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q { width: 100%; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: var(--text); }
.faq__q .ic { margin-left: auto; width: 22px; height: 22px; color: var(--primary); transition: transform var(--dur) var(--ease-out); flex: none; }
.faq__item.is-open .faq__q .ic { transform: rotate(45deg); }
.faq__a { overflow: hidden; height: 0; transition: height var(--dur) var(--ease-soft); }
.faq__a-inner { padding-bottom: var(--space-5); color: var(--text-muted); font-size: var(--fs-body); line-height: 1.6; max-width: 68ch; }
@media (prefers-reduced-motion: reduce) { .faq__a { transition: none; } }

/* ===== CONTACT (CTA) ===== */
.contact { position: relative; overflow: hidden; }
.contact__panel {
  position: relative;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background:
    radial-gradient(70% 120% at 0% 0%, var(--primary-soft), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow-lg);
  padding: clamp(var(--space-8), 5vw, var(--space-16));
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-8), 4vw, var(--space-12)); align-items: center;
}
.contact__panel h2 { font-size: var(--fs-h2); }
.contact__panel p { color: var(--text-muted); margin-top: var(--space-4); font-size: var(--fs-lead); line-height: 1.5; }
.contact__points { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.contact__points li { display: flex; gap: var(--space-3); align-items: center; font-size: var(--fs-sm); }
.contact__points .ic { width: 18px; height: 18px; color: var(--success); flex: none; }

.cform { display: grid; gap: var(--space-4); }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-xs); font-weight: 600; font-family: var(--font-display); letter-spacing: 0.02em; }
.field input, .field textarea {
  width: 100%; padding: 0.7em 0.85em; border-radius: var(--radius);
  background: var(--bg); border: 1px solid var(--border-strong); color: var(--text);
  font-size: var(--fs-sm); transition: border-color var(--dur), box-shadow var(--dur);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.field textarea { resize: vertical; min-height: 92px; }
.cform__note { font-size: var(--fs-xs); color: var(--text-faint); }
.cform__ok { display: none; align-items: center; gap: 10px; padding: var(--space-4); border-radius: var(--radius); background: var(--success-soft); color: var(--success); font-size: var(--fs-sm); font-weight: 600; }
.cform__ok .ic { width: 20px; height: 20px; flex: none; }
.cform.is-sent .cform__ok { display: flex; }
.cform.is-sent .cform__fields { display: none; }

/* ===== FOOTER ===== */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); padding-block: var(--space-16) var(--space-8); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-8); }
.footer__about p { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--space-4); max-width: 34ch; line-height: 1.55; }
.footer__col h5 { font-family: var(--font-display); font-size: var(--fs-sm); margin-bottom: var(--space-4); letter-spacing: 0.02em; }
.footer__col a { display: block; color: var(--text-muted); font-size: var(--fs-sm); padding: 5px 0; transition: color var(--dur); }
.footer__col a:hover { color: var(--primary); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.footer__bottom p { font-size: var(--fs-xs); color: var(--text-faint); }
.footer__made { display: inline-flex; align-items: center; gap: 8px; }
.footer__made .ic { width: 15px; height: 15px; color: var(--secondary); }

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .features__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  .footer__about { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .hero__lead { max-width: none; }
  .hero__art { max-width: 520px; }
  .spotlight, .spotlight--rev { grid-template-columns: 1fr; gap: var(--space-8); }
  .spotlight--rev .spotlight__media { order: 0; }
  .contact__panel { grid-template-columns: 1fr; }
  .showcase__grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
  .flow::before { display: none; }
  .showcase__more { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .container { padding-inline: var(--space-5); }
  .features__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .cform__row { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .hero__art-float { display: none; }
}