@import url("./styles.css");

.ds-support{padding-bottom:84px}
.ds-section{padding-top:22px;padding-bottom:22px}

.ds-hero{
  padding-top:34px;
  padding-bottom:22px;
  background:linear-gradient(155deg,var(--card-bg),color-mix(in srgb,var(--card-bg) 80%, var(--pri) 20%));
  border-top:1px solid var(--bdr);
  border-bottom:1px solid var(--bdr);
}
.ds-hero__grid{
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  padding:34px;
  display:grid;
  grid-template-columns:1.25fr .9fr;
  gap:22px;
  position:relative;
  overflow:hidden;
}
.ds-hero__grid::after{
  content:"";
  position:absolute;
  inset:auto -180px -220px auto;
  width:460px;
  aspect-ratio:1;
  background:radial-gradient(circle,rgba(0,84,173,.22),transparent 70%);
  pointer-events:none;
}
.ds-hero h1{font-size:clamp(34px,5vw,62px);line-height:1.03;letter-spacing:-.04em;color:var(--head);margin-bottom:14px}
.ds-hero p{font-size:16px;color:var(--muted);max-width:62ch}
.ds-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.ds-stat-row{margin-top:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ds-stat-row li{padding:14px;border-radius:14px;border:1px solid var(--bdr);background:var(--surf);display:grid;gap:2px}
.ds-stat-row strong{font-size:22px;letter-spacing:-.02em}
.ds-stat-row span{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-family:'DM Mono',monospace}

.ds-panel{border:1px solid var(--bdr);background:var(--surf);border-radius:22px;padding:20px;display:grid;align-content:start;gap:14px}
.ds-panel h2{font-size:24px;letter-spacing:-.02em}
.ds-panel__items{display:grid;gap:8px}
.ds-panel__item{border:1px solid var(--bdr);background:var(--card-bg);border-radius:14px;padding:12px;display:grid;gap:4px}
.ds-panel__item span{font-size:11px;font-family:'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ds-panel__item strong{font-size:26px;line-height:1;letter-spacing:-.03em}
.ds-panel__item small{font-size:12px;color:var(--muted)}
.ds-panel__link{font-weight:600;color:var(--pri);display:inline-flex;align-items:center;gap:6px}

.ds-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.ds-card{border:1px solid var(--bdr);border-radius:18px;background:var(--card-bg);padding:20px;box-shadow:var(--sh);display:grid;gap:10px;transition:transform .2s var(--ease),border-color .2s ease,background .2s ease}
.ds-card:hover{transform:translateY(-4px);border-color:var(--bdr-hi);background:var(--surf2)}
.ds-card>i{width:42px;height:42px;border-radius:12px;background:var(--pri-lo);color:var(--pri);display:grid;place-items:center;font-size:21px}
.ds-card h3{font-size:22px;line-height:1.12;letter-spacing:-.02em}
.ds-card p{font-size:14px;color:var(--muted)}
.ds-card a{margin-top:2px;display:inline-flex;align-items:center;gap:4px;color:var(--pri);font-weight:600;font-size:14px}

.ds-flow{border:1px solid var(--bdr);border-radius:24px;background:var(--card-bg);padding:24px;box-shadow:var(--sh)}
.ds-flow__head h2{font-size:clamp(28px,3.6vw,44px);max-width:20ch;letter-spacing:-.03em;line-height:1.05}
.ds-steps{margin-top:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ds-step{border:1px solid var(--bdr);border-radius:14px;background:var(--surf);padding:14px;display:grid;gap:6px}
.ds-step span{font-family:'DM Mono',monospace;color:var(--pri);font-size:12px;letter-spacing:.12em}
.ds-step h3{font-size:17px;line-height:1.15;letter-spacing:-.015em}
.ds-step p{font-size:13px;color:var(--muted);line-height:1.55}

.ds-split{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.ds-critical,.ds-faq{border:1px solid var(--bdr);border-radius:24px;background:var(--card-bg);box-shadow:var(--sh);padding:24px}
.ds-critical h2,.ds-faq h2{font-size:34px;line-height:1.03;letter-spacing:-.03em;margin-bottom:10px}
.ds-critical p{color:var(--muted);margin-bottom:14px}
.ds-critical ul{display:grid;gap:8px;margin-bottom:18px}
.ds-critical li{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:14px}
.ds-critical li i{color:var(--pri);margin-top:2px}
.ds-faq details{border-top:1px solid var(--bdr);padding:12px 0}
.ds-faq summary{list-style:none;cursor:pointer;font-weight:600;letter-spacing:-.01em;display:flex;justify-content:space-between;gap:12px}
.ds-faq summary::-webkit-details-marker{display:none}
.ds-faq summary::after{content:'+';font-size:20px;color:var(--pri);line-height:1;transition:transform .2s}
.ds-faq details[open] summary::after{transform:rotate(45deg)}
.ds-faq p{color:var(--muted);font-size:14px;margin-top:8px}

@media (max-width:1100px){
  .ds-hero__grid{grid-template-columns:1fr;padding:26px}
  .ds-cards,.ds-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-split{grid-template-columns:1fr}
}
@media (max-width:700px){
  .ds-hero{padding-top:20px}
  .ds-hero__grid{padding:20px;border-radius:0}
  .ds-hero p{font-size:15px}
  .ds-stat-row,.ds-cards,.ds-steps{grid-template-columns:1fr}
  .ds-critical h2,.ds-faq h2{font-size:28px}
}

/* --- Support page: glass bento system --- */
.ds-hero__grid{grid-template-columns:1.05fr .95fr;backdrop-filter:blur(16px);background:linear-gradient(145deg,color-mix(in srgb,var(--card-bg) 70%,rgba(255,255,255,.3)),color-mix(in srgb,var(--card-bg) 84%,var(--pri) 16%))}
.ds-panel{position:relative;overflow:hidden;background:linear-gradient(155deg,color-mix(in srgb,var(--card-bg) 72%,rgba(255,255,255,.28)),color-mix(in srgb,var(--card-bg) 88%,var(--pri) 12%))}
.ds-panel::before{content:"";position:absolute;inset:-30% auto auto -18%;width:220px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 66%)}
.ds-panel__item{backdrop-filter:blur(10px);background:color-mix(in srgb,var(--card-bg) 75%,rgba(255,255,255,.22))}

.ds-cards{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(148px,auto)}
.ds-card{grid-column:span 2;border-radius:22px;position:relative;overflow:hidden;background:linear-gradient(155deg,var(--card-bg),color-mix(in srgb,var(--surf) 66%,transparent))}
.ds-card::after{content:"";position:absolute;inset:auto -60px -70px auto;width:160px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--pri-lo2),transparent 72%)}
.ds-card:nth-child(1){grid-column:span 3;grid-row:span 2}
.ds-card:nth-child(2){grid-row:span 2;background:linear-gradient(155deg,color-mix(in srgb,var(--card-bg) 80%,var(--cyan) 20%),var(--card-bg))}
.ds-card:nth-child(3){background:linear-gradient(155deg,color-mix(in srgb,var(--card-bg) 80%,var(--green) 20%),var(--card-bg))}
.ds-card:nth-child(4){grid-column:span 2;background:linear-gradient(155deg,color-mix(in srgb,var(--card-bg) 80%,var(--amber) 20%),var(--card-bg))}

.ds-flow{background:linear-gradient(150deg,color-mix(in srgb,var(--card-bg) 82%,var(--pri) 18%),var(--card-bg))}
.ds-steps{grid-template-columns:repeat(8,minmax(0,1fr))}
.ds-step{grid-column:span 2;border-radius:18px}
.ds-step:nth-child(1){grid-column:span 3}
.ds-step:nth-child(2){grid-column:span 5}
.ds-step:nth-child(3){grid-column:span 5}
.ds-step:nth-child(4){grid-column:span 3}

.ds-split{grid-template-columns:1fr 1fr}
.ds-critical,.ds-faq{border-radius:28px;backdrop-filter:blur(14px);background:linear-gradient(150deg,color-mix(in srgb,var(--card-bg) 76%,rgba(255,255,255,.2)),color-mix(in srgb,var(--card-bg) 86%,var(--pri) 14%))}
.critical-lines{display:grid;gap:10px;margin-bottom:18px}
.critical-line{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:11px;border-radius:12px;border:1px solid var(--bdr);background:color-mix(in srgb,var(--surf) 70%,transparent)}
.critical-line i{color:var(--pri);margin-top:2px}

@media (max-width:1100px){
  .ds-cards,.ds-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-card,.ds-card:nth-child(1),.ds-card:nth-child(2),.ds-step,.ds-step:nth-child(1),.ds-step:nth-child(2),.ds-step:nth-child(3),.ds-step:nth-child(4){grid-column:span 1;grid-row:span 1}
}