/* ============================================================
   CORIO - SUPPORT PAGE STYLES
   -----------------------------------------------------------
   Loaded on top of assets/css/base.css.
   ============================================================ */

/* ============================================================
   5. SUPPORT HERO
============================================================ */
.support-hero{
  padding:60px 0 46px;
  background:
    radial-gradient(60% 50% at 85% 0%, var(--orange-glow), transparent 70%),
    linear-gradient(180deg, var(--cream), #FFFDF9);
  text-align:center;
}
.support-hero h1{ font-size:clamp(32px,5vw,50px); margin:16px 0 14px; }
.support-hero p{ color:var(--ink-soft); font-size:16px; max-width:640px; margin:0 auto; }
.support-hero .quick-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px; }
.support-hero .quick-chips a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; color:var(--ink);
  background:var(--white); border:1px solid var(--line);
  padding:10px 18px; border-radius:var(--r-pill); box-shadow:var(--shadow-sm);
  transition:all .2s ease;
}
.support-hero .quick-chips a:hover{ border-color:var(--orange); color:var(--orange-deep); transform:translateY(-2px); }
.support-hero .quick-chips a i{ color:var(--orange); }

/* ============================================================
   6. QUICK ACTION CARDS
============================================================ */
.support-wrap{ padding:56px 0 40px; }
.support-block{ margin-bottom:64px; }
.support-block:last-child{ margin-bottom:0; }
.support-block-head{ max-width:640px; margin-bottom:32px; }
.support-block-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.support-block-head h2{ font-size:clamp(26px,3.4vw,36px); margin-top:14px; }
.support-block-head p{ color:var(--ink-soft); font-size:16px; margin-top:12px; }

.action-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.action-card{
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:28px; box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.action-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--orange); }
.action-card .ico{
  width:52px; height:52px; border-radius:15px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center; font-size:21px;
  background:linear-gradient(135deg,var(--orange),var(--orange-deep)); color:#fff;
}
.action-card h3{ font-size:18.5px; margin-bottom:9px; }
.action-card p{ color:var(--ink-soft); font-size:14.5px; margin:0 0 18px; flex:1; }
.action-card .go{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; color:var(--orange-deep);
}
.action-card:hover .go i{ transform:translateX(4px); }
.action-card .go i{ transition:transform .2s ease; }

/* ============================================================
   7. SELF-SERVICE STEPS
============================================================ */
.steps-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.step-card{
  display:flex; gap:18px; align-items:flex-start;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px; box-shadow:var(--shadow-sm);
}
.step-card .num{
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-size:15px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--orange),var(--orange-deep));
}
.step-card h3{ font-size:17px; margin-bottom:7px; }
.step-card p{ color:var(--ink-soft); font-size:14.5px; margin:0; }
.step-card p + p{ margin-top:8px; }

/* ============================================================
   8. CONTACT CHANNELS
============================================================ */
.channels{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.channel{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px; text-align:center; box-shadow:var(--shadow-sm);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.channel:hover{ transform:translateY(-4px); border-color:var(--orange); box-shadow:var(--shadow-md); }
.channel .ico{
  width:54px; height:54px; border-radius:50%; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  background:var(--orange-light); color:var(--orange-deep);
}
.channel h3{ font-size:16.5px; margin-bottom:6px; }
.channel p{ color:var(--ink-soft); font-size:13.5px; margin:0 0 12px; }
.channel a{ font-size:14.5px; font-weight:700; color:var(--orange-deep); }
.channel a:hover{ text-decoration:underline; }

/* ---- Response promise strip ---- */
.promise{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  background:linear-gradient(135deg,var(--ink),#3a2e26);
  border-radius:var(--r-lg); padding:38px; color:#fff; margin-top:26px;
}
.promise > div{ text-align:center; }
.promise i{ font-size:24px; color:var(--orange); margin-bottom:12px; }
.promise strong{ display:block; font-size:20px; font-family:var(--font-display); margin-bottom:4px; }
.promise span{ font-size:13.5px; color:rgba(255,255,255,.72); }

/* ---- Closing CTA ---- */
.support-cta{
  margin-top:56px; padding:44px;
  background:linear-gradient(120deg, var(--orange-deep), var(--orange) 60%, #FFB347);
  border-radius:var(--r-lg); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.support-cta h2{ color:#fff; font-size:26px; margin-bottom:8px; }
.support-cta p{ color:rgba(255,255,255,.94); font-size:15.5px; margin:0; max-width:520px; }
.support-cta .links{ display:flex; gap:12px; flex-wrap:wrap; }
.support-cta .links a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14.5px; font-weight:700; color:var(--ink);
  background:#fff; padding:13px 24px; border-radius:var(--r-pill);
  transition:transform .2s ease, box-shadow .2s ease;
}
.support-cta .links a:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.2); }
.support-cta .links a.ghost{
  background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55);
}
.support-cta .links a.ghost:hover{ background:rgba(255,255,255,.14); }

/* ============================================================
   9. RESPONSIVE
============================================================ */
@media (max-width:1000px){
  .channels{ grid-template-columns:repeat(2,1fr); }
  .action-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .steps-grid{ grid-template-columns:1fr; }
  .promise{ grid-template-columns:1fr; gap:20px; padding:30px 24px; }
  .support-cta{ padding:30px 22px; }
}
@media (max-width:620px){
  .support-hero{ padding:42px 0 34px; }
  .support-wrap{ padding:40px 0 20px; }
  .action-grid{ grid-template-columns:1fr; }
  .channels{ grid-template-columns:1fr; }
  .support-cta .links{ width:100%; }
  .support-cta .links a{ flex:1; justify-content:center; }
}