/* =========================
   VoiceAura Office
   Health Center style
========================= */

.office-page{
  position:relative;
  z-index:10;
  max-width:1120px;
  margin:0 auto;
  padding-bottom:56px;
}

.office-page > *{
  position:relative;
  z-index:20;
}

/* =========================
   Tabs
========================= */

.office-tabs{
  display:flex;
  gap:10px;
  margin:20px 16px 10px;
}

.office-tab-btn{
  flex:1;

  display:flex;
  align-items:center;
  justify-content:center;

  min-height:48px;
  padding:12px 16px;

  border:none;
  border-radius:999px;

  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.10);

  color:white;
  font-weight:bold;
  text-decoration:none;

  cursor:pointer;
}

.office-tab-btn.active{
  background:linear-gradient(135deg, #22c55e, #0ea5e9);
  box-shadow:0 0 16px rgba(14,165,233,0.35);
}

.office-tab-panel.hidden{
  display:none;
}

/* =========================
   Main Card
========================= */

.office-card{
  margin:16px;
  padding:24px;

  border-radius:18px;

  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);

  backdrop-filter:blur(10px);

  color:rgba(255,255,255,.92);
}

.office-card-head{
  margin-bottom:14px;
}

.office-label{
  display:inline-block;

  padding:5px 12px;
  margin-bottom:12px;

  border-radius:999px;

  font-size:12px;
  font-weight:bold;

  background:rgba(14,165,233,0.22);
  color:#bae6fd;
}

.office-label.plus{
  background:rgba(245,158,11,0.16);
  color:#fde68a;
  border:1px solid rgba(245,158,11,0.24);
}

.office-label.caution{
  background:rgba(245,158,11,0.14);
  color:#fde68a;
}

.office-card h2{
  margin:0;
  font-size:24px;
  line-height:1.45;
  color:rgba(255,255,255,.96);
}

.office-card p{
  margin:12px 0 0;

  font-size:16px;
  line-height:1.85;

  color:rgba(255,255,255,.82);
}

/* =========================
   Mini Cards
========================= */

.office-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin:16px;
}

.office-mini-card{
  padding:22px;

  border-radius:18px;

  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);

  backdrop-filter:blur(10px);
}

.office-icon{
  margin-bottom:18px;
  font-size:34px;
}

.office-mini-card h3{
  margin:0 0 12px;

  font-size:21px;
  line-height:1.35;

  color:rgba(255,255,255,.94);
}

.office-mini-card p{
  margin:0 0 16px;

  font-size:15px;
  line-height:1.75;

  color:rgba(255,255,255,.76);
}

.office-mini-card a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:40px;
  padding:0 16px;

  border-radius:999px;

  color:#dbeafe;
  text-decoration:none;
  font-weight:800;

  background:rgba(14,165,233,0.16);
  border:1px solid rgba(125,211,252,0.24);
}

/* =========================
   Plus / Contact
========================= */

.office-plus-card{
  background:
    radial-gradient(circle at top left, rgba(245,158,11,0.14), transparent 42%),
    rgba(255,255,255,.08);

  border:1px solid rgba(245,158,11,0.22);
}

.office-plus-list{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.office-plus-list div{
  padding:14px;

  border-radius:14px;

  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
}

.office-plus-list strong{
  display:block;

  margin-bottom:6px;

  color:#fff;
  font-size:16px;
}

.office-plus-list span{
  display:block;

  color:rgba(255,255,255,0.78);
  font-size:14px;
  line-height:1.7;
}

.office-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}

.office-main-btn,
.office-sub-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:44px;
  padding:0 18px;

  border-radius:999px;

  font-size:15px;
  font-weight:800;

  text-decoration:none;
  cursor:pointer;
}

.office-main-btn{
  color:white;

  border:none;
  background:linear-gradient(135deg, #22c55e, #0ea5e9);
  box-shadow:0 0 16px rgba(14,165,233,0.28);
}

.office-sub-btn{
  color:white;

  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.16);
}

.office-check-list{
  display:grid;
  gap:10px;
  margin:16px 0;
}

.office-check-list div{
  padding:12px 14px;

  border-radius:14px;

  background:rgba(14,165,233,0.12);
  border:1px solid rgba(14,165,233,0.22);

  font-size:14px;
  line-height:1.7;

  color:rgba(255,255,255,0.90);
}

.office-caution{
  background:rgba(245,158,11,0.08);
  border:1px solid rgba(245,158,11,0.20);
}

/* =========================
   Responsive
========================= */

@media(max-width:768px){

  .office-tabs{
    margin:18px 16px 8px;
  }

  .office-tab-btn{
    min-height:44px;
    padding:10px 8px;
    font-size:13px;
  }

  .office-card{
    margin:14px;
    padding:20px;
  }

  .office-card h2{
    font-size:22px;
  }

  .office-card p{
    font-size:15px;
  }

  .office-grid{
    grid-template-columns:1fr;
    gap:14px;
    margin:14px;
  }

  .office-mini-card{
    padding:20px;
  }

  .office-actions{
    flex-direction:column;
  }

  .office-main-btn,
  .office-sub-btn{
    width:100%;
  }
}

@media(max-width:520px){

  .office-tabs{
    display:grid;
    grid-template-columns:1fr;
  }

  

/* =========================
   Office Step1 Content
========================= */

.office-roadmap-card{
  background:
    radial-gradient(circle at top left, rgba(14,165,233,0.12), transparent 42%),
    rgba(255,255,255,.08);
}

.office-roadmap{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.office-roadmap div{
  padding:14px;

  border-radius:14px;

  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
}

.office-roadmap strong{
  display:block;

  margin-bottom:6px;

  color:#fff;
  font-size:16px;
}

.office-roadmap span{
  display:block;

  color:rgba(255,255,255,0.78);
  font-size:14px;
  line-height:1.7;
}

/* =========================
   Office Step2 Plus Content
========================= */

.office-rule-card{
  background:
    radial-gradient(circle at top left, rgba(34,197,94,0.10), transparent 42%),
    rgba(255,255,255,.08);
}

.office-plus-rule-list{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.office-plus-rule-list div{
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
}

.office-plus-rule-list strong{
  display:block;
  margin-bottom:6px;
  color:#fff;
  font-size:16px;
}

.office-plus-rule-list span{
  display:block;
  color:rgba(255,255,255,0.78);
  font-size:14px;
  line-height:1.7;
}

.office-flow-card{
  background:
    radial-gradient(circle at top left, rgba(14,165,233,0.14), transparent 42%),
    rgba(255,255,255,.08);
}

.office-flow{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:16px;
}

.office-flow div{
  padding:16px;
  border-radius:16px;
  background:rgba(0,0,0,0.16);
  border:1px solid rgba(255,255,255,0.12);
}

.office-flow-no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  margin-bottom:10px;
  border-radius:999px;
  color:#fff;
  font-weight:900;
  background:linear-gradient(135deg, #22c55e, #0ea5e9);
}

.office-flow strong{
  display:block;
  margin-bottom:8px;
  color:#fff;
  font-size:16px;
}

.office-flow p{
  margin:0;
  color:rgba(255,255,255,0.76);
  font-size:14px;
  line-height:1.7;
}

@media(max-width:768px){
  .office-flow{
    grid-template-columns:1fr;
  }
}

/* =========================
   Office Step3 Contact Content
========================= */

.office-contact-main{
  background:
    radial-gradient(circle at top left, rgba(14,165,233,0.13), transparent 42%),
    rgba(255,255,255,.08);
}

.office-contact-examples{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:18px;
}

.office-contact-examples div{
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
}

.office-contact-examples strong{
  display:block;
  margin-bottom:6px;
  color:#fff;
  font-size:16px;
}

.office-contact-examples span{
  display:block;
  color:rgba(255,255,255,0.78);
  font-size:14px;
  line-height:1.7;
}

.office-example-card{
  background:
    radial-gradient(circle at top left, rgba(34,197,94,0.10), transparent 42%),
    rgba(255,255,255,.08);
}

.office-response-card{
  background:
    radial-gradient(circle at top left, rgba(168,85,247,0.10), transparent 42%),
    rgba(255,255,255,.08);
}

@media(max-width:768px){

  .office-contact-examples{
    grid-template-columns:1fr;
  }
}

/* =========================
   Office Step4 Unified Contact
========================= */

.office-service-card{
  background:
    radial-gradient(circle at top left, rgba(14,165,233,0.12), transparent 42%),
    rgba(255,255,255,.08);
}

.office-service-list{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.office-service-list div{
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
}

.office-service-list strong{
  display:block;
  margin-bottom:6px;
  color:#fff;
  font-size:16px;
}

.office-service-list span{
  display:block;
  color:rgba(255,255,255,0.78);
  font-size:14px;
  line-height:1.7;
}

.office-contact-flow{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:18px;
}

.office-contact-flow div{
  padding:16px;
  border-radius:16px;
  background:rgba(0,0,0,0.16);
  border:1px solid rgba(255,255,255,0.12);
}

.office-contact-flow strong{
  display:block;
  margin-bottom:8px;
  color:#fff;
  font-size:16px;
}

.office-contact-flow p{
  margin:0;
  color:rgba(255,255,255,0.76);
  font-size:14px;
  line-height:1.7;
}

.office-link-note{
  margin-top:12px !important;
  font-size:13px !important;
  color:rgba(255,255,255,0.68) !important;
}

a.office-main-btn,
a.office-sub-btn{
  text-decoration:none;
}

@media(max-width:768px){

  .office-contact-flow{
    grid-template-columns:1fr;
  }
}


/* =========================
   Office Price
========================= */

.office-price-card{
  background:
    radial-gradient(circle at top left, rgba(245,158,11,0.16), transparent 42%),
    rgba(255,255,255,.08);
  border:1px solid rgba(245,158,11,0.24);
}

.office-price-main{
  margin:18px 0 16px;
  padding:20px;

  border-radius:18px;

  background:rgba(0,0,0,0.18);
  border:1px solid rgba(245,158,11,0.22);

  text-align:center;
}

.office-price-name{
  font-size:15px;
  font-weight:800;
  color:rgba(255,255,255,0.78);
}

.office-price-value{
  margin-top:8px;
  font-size:38px;
  line-height:1.2;
  font-weight:900;
  color:#fde68a;
}

.office-price-note{
  margin-top:8px;
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,0.68);
}

@media(max-width:768px){

  .office-price-value{
    font-size:32px;
  }
}