/*
Theme Name: MSD Digital Blue Theme
Theme URI: https://example.com/
Author: OpenAI for J.A.M.
Author URI: https://openai.com/
Description: A custom one-page WordPress theme for MSD Digital with an interactive tech background, code-inspired hero, app showcase, and extensive services section.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: msd-digital
*/

:root{
  --bg:#020617;
  --bg-soft:#091221;
  --panel:rgba(8, 17, 33, 0.72);
  --panel-strong:rgba(5, 10, 20, 0.86);
  --line:rgba(149, 214, 255, 0.14);
  --line-strong:rgba(89, 185, 255, 0.28);
  --text:#f8fbff;
  --muted:#a8bfd7;
  --accent:#2ad4ff;
  --accent-2:#3b82f6;
  --accent-3:#58c9ff;
  --success:#8df2ff;
  --shadow:0 30px 80px rgba(0, 0, 0, 0.35);
  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:18px;
  --container:min(1240px, calc(100% - 32px));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:#020617;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
.site-bg-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  z-index:0;
}
.site{
  position:relative;
  z-index:1;
  overflow:hidden;
}
.container{
  width:var(--container);
  margin-inline:auto;
}
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter: blur(16px);
  background:linear-gradient(180deg, rgba(2, 6, 23, 0.86) 0%, rgba(2, 6, 23, 0.58) 100%);
  border-bottom:1px solid rgba(120, 172, 219, 0.12);
}
.site-header__inner{
  min-height:var(--header-min-height, 86px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:var(--brand-gap, 14px);
  transform:translate(var(--brand-x, 0px), var(--brand-y, 0px));
}
.brand img{
  width:var(--header-logo-width, 128px);
  height:auto;
}
.brand__meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  transform:translate(var(--brand-meta-x, 0px), var(--brand-meta-y, 0px));
}

.brand__submark-image{
  width:var(--brand-sublogo-width, 220px) !important;
  height:auto;
  display:block;
  transform:translate(var(--brand-meta-x, 0px), var(--brand-meta-y, 0px));
}
.brand__meta small{
  color:var(--accent);
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:var(--brand-small-size, 11px);
}
.brand__meta span{
  color:var(--muted);
  font-size:var(--brand-tagline-size, 15px);
}
.nav-wrap{
  display:flex;
  align-items:center;
  gap:18px;
  transform:translateX(calc(var(--header-nav-shift, 0px) * -1)) translateY(var(--header-nav-y, 0px));
}
.primary-menu{
  display:flex;
  align-items:center;
  gap:var(--header-menu-gap, 24px);
  margin:0;
  padding:0;
  list-style:none;
}
.primary-menu a{
  color:var(--muted);
  transition:.25s ease;
  font-size:.95rem;
}
.primary-menu a:hover,
.primary-menu a:focus{
  color:var(--text);
}
.header-actions{
  display:flex;
  align-items:center;
  gap:var(--header-actions-gap, 12px);
}
.site-header .header-actions .btn{
  padding:var(--header-btn-py, 14px) var(--header-btn-px, 24px);
  font-size:var(--header-btn-font-size, 16px);
}
.btn,
.wp-block-button__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  padding:14px 24px;
  border:1px solid transparent;
  transition:.25s ease;
  font-weight:600;
  cursor:pointer;
}
.btn--primary{
  background:linear-gradient(135deg, var(--accent) 0%, #87e8ff 100%);
  color:#03101c;
  box-shadow:0 12px 30px rgba(42, 212, 255, 0.24);
}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 16px 36px rgba(42,212,255,.3)}
.btn--ghost{
  background:rgba(255,255,255,0.04);
  border-color:rgba(132, 196, 255, 0.14);
  color:var(--text);
}
.btn--ghost:hover{
  border-color:rgba(132, 196, 255, 0.28);
  background:rgba(255,255,255,0.07);
}
.menu-toggle{
  display:none;
  width:48px;
  height:48px;
  border-radius:999px;
  border:1px solid rgba(132,196,255,.14);
  background:rgba(255,255,255,.05);
  color:var(--text);
}
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after{
  display:block;
  position:relative;
  width:18px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  margin-inline:auto;
  transition:.25s ease;
}
.menu-toggle span::before,
.menu-toggle span::after{
  content:"";
  position:absolute;
  left:0;
}
.menu-toggle span::before{top:-6px}
.menu-toggle span::after{top:6px}
.menu-toggle.is-open span{background:transparent}
.menu-toggle.is-open span::before{top:0;transform:rotate(45deg)}
.menu-toggle.is-open span::after{top:0;transform:rotate(-45deg)}

.hero{
  position:relative;
  min-height:calc(100vh - var(--header-min-height, 86px));
  display:flex;
  align-items:center;
  isolation:isolate;
}
.hero__content{
  position:relative;
  z-index:2;
  width:100%;
  padding:var(--hero-padding-top, 52px) 0 var(--hero-padding-bottom, 60px);
}

.hero-intro{
  max-width:min(100%, 1080px);
  margin:0 auto 32px;
  text-align:center;
  transform:translate(var(--hero-left-x, 0px), var(--hero-left-y, 0px));
}
.hero-intro .eyebrow{
  justify-content:center;
}
.hero-intro .hero-copy{
  margin-left:auto;
  margin-right:auto;
}
.hero-intro .hero-actions{
  justify-content:center;
}
.hero-intro .quick-points{
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}
.hero-panels{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:var(--hero-grid-gap, 42px);
  align-items:stretch;
}
.hero-panel{
  min-width:0;
}
.hero-panel--left{
  transform:translate(var(--hero-left-x, 0px), var(--hero-left-y, 0px));
}
.hero-panel--right{
  transform: translate(var(--hero-right-x, 0px), var(--hero-right-y, 0px));
  padding-right: 8px;
  box-sizing: border-box;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.02fr) minmax(0, .98fr);
  gap:var(--hero-grid-gap, 42px);
  align-items:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(10, 25, 43, 0.62);
  border:1px solid rgba(108, 196, 255, 0.2);
  color:var(--success);
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.28em;
  box-shadow:0 10px 25px rgba(5,10,20,.22);
}
.hero h1{
  margin:18px 0 0;
  font-size:clamp(2.8rem, 5vw, 5.6rem);
  line-height:1.08;
  padding-bottom:0.08em;
  letter-spacing:-0.04em;
}
.hero h1 .gradient{
  display:block;
  background:linear-gradient(90deg, #9aefff 0%, #52d5ff 48%, #5c8fff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-copy{
  max-width:var(--hero-copy-max-width, 710px);
  margin-top:20px;
  color:var(--muted);
  font-size:1.06rem;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:28px;
}
.quick-points{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--quick-points-gap, 14px);
  margin-top:30px;
}
.point{
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line);
  border-radius:20px;
  padding:var(--point-padding, 18px);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}
.point strong{
  display:block;
  font-size:1.05rem;
}
.point span{
  display:block;
  color:var(--muted);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-top:8px;
}
.code-panel{
  margin-top:28px;
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg, rgba(7, 14, 25, 0.86) 0%, rgba(4, 9, 18, 0.92) 100%);
  border:1px solid rgba(121, 184, 255, 0.16);
  overflow:hidden;
  box-shadow:0 20px 70px rgba(2,6,23,.5);
}
.code-panel__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid rgba(121,184,255,.12);
}
.window-dots{
  display:flex;
  gap:8px;
}
.window-dots span{
  width:11px;
  height:11px;
  border-radius:999px;
  display:block;
}
.window-dots span:nth-child(1){background:#ff6b6b}
.window-dots span:nth-child(2){background:#ffd166}
.window-dots span:nth-child(3){background:#4cd964}
.badge{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(42,212,255,.08);
  border:1px solid rgba(42,212,255,.18);
  color:var(--success);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-weight:700;
}
.code-panel pre{
  margin:0;
  padding:22px 20px 24px;
  overflow:auto;
  color:#ccdcf3;
  font-size:.93rem;
  line-height:1.9;
}
.code-panel .kw{color:#69d5ff}
.code-panel .str{color:#9af2c5}
.code-panel .val{color:#f7d794}
.code-panel .bool{color:#f08ef4}
.code-focus{
  margin:0 20px 22px;
  border:1px solid rgba(88, 201, 255, 0.14);
  background:rgba(255,255,255,.03);
  border-radius:22px;
  padding:18px;
}
.code-focus small{
  display:block;
  color:var(--success);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-weight:700;
  margin-bottom:8px;
}
.code-focus p{
  margin:0;
  color:#dceaf7;
}

.code-panel{
  height:100%;
  display:flex;
  flex-direction:column;
}
.code-panel pre{
  flex:1 1 auto;
}
.interactive-panel{
  height:100%;
  min-height:100%;
  margin-top:28px;
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg, rgba(7, 14, 25, 0.86) 0%, rgba(4, 9, 18, 0.92) 100%);
  border:1px solid rgba(121, 184, 255, 0.16);
  overflow:hidden;
  box-shadow:0 20px 70px rgba(2,6,23,.5);
  position:relative;
}
.interactive-panel__frame{
  min-height:100%;
  height:100%;
  padding:0;
  display:flex;
}
.interactive-panel__embed,
.interactive-panel iframe,
.interactive-panel__empty{
  width:100%;
  min-height:100%;
  flex:1 1 auto;
  border-radius:0;
  background:transparent;
  border:none;
  box-shadow:none;
}
.interactive-panel iframe{
  border:0;
  display:block;
  background:#040814;
}
.interactive-panel__embed--shortcode > *:first-child{
  margin-top:0;
}
.interactive-panel__embed--shortcode > *:last-child{
  margin-bottom:0;
}

.hero-copy-col{transform:none;}
.hero-demo{position:relative;transform:none;}
.hero-demo .demo-shell{
  width:100%;
  max-width:var(--hero-demo-max-width, 999px);
  margin-left:auto;
}
.demo-shell{
  position:relative;
  padding:var(--demo-shell-padding, 20px);
  border-radius:36px;
  border:1px solid rgba(132,196,255,.14);
  background:linear-gradient(180deg, rgba(8,14,25,.72) 0%, rgba(5,10,18,.8) 100%);
  backdrop-filter:blur(16px);
  box-shadow:0 35px 90px rgba(0,0,0,.4);
}
.demo-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}
.demo-tab{
  border:1px solid rgba(127, 185, 255, 0.16);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  border-radius:999px;
  padding:10px 16px;
  cursor:pointer;
  transition:.22s ease;
  font-weight:600;
}
.demo-tab:hover,
.demo-tab:focus{
  color:var(--text);
  border-color:rgba(127,185,255,.28);
}
.demo-tab.is-active{
  color:var(--text);
  background:rgba(42,212,255,.12);
  border-color:rgba(42,212,255,.26);
  box-shadow:0 0 0 1px rgba(42,212,255,.08) inset;
}
.demo-frame{
  position:relative;
  overflow:hidden;
  min-height:var(--demo-frame-min-height, 640px);
  border-radius:30px;
  border:1px solid rgba(132,196,255,.14);
  background:
    radial-gradient(circle at top right, rgba(42,212,255,.1), transparent 22%),
    linear-gradient(180deg, rgba(4,9,18,.74) 0%, rgba(4,8,14,.96) 100%);
}
.demo-copy{
  position:absolute;
  left:24px;
  right:24px;
  top:24px;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.demo-copy__text{
  max-width:360px;
}
.demo-copy__text span{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(42,212,255,.12);
  border:1px solid rgba(42,212,255,.22);
  color:var(--success);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.demo-copy__text h2{
  margin:14px 0 0;
  font-size:2rem;
  line-height:1.12;
}
.demo-copy__text p{
  margin:10px 0 0;
  color:var(--muted);
}
.demo-metrics{
  display:grid;
  gap:10px;
}
.metric-card{
  min-width:130px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(132,196,255,.14);
  backdrop-filter:blur(10px);
}
.metric-card strong{
  display:block;
  font-size:1.05rem;
}
.metric-card span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:.86rem;
}
.demo-image-wrap{
  position:absolute;
  inset:var(--demo-image-top-inset, 120px) var(--demo-image-side-inset, 20px) var(--demo-image-bottom-inset, 20px);
  display:grid;
  grid-template-columns:1fr;
  place-items:center;
}
.demo-image-card{
  width:min(100%, 680px);
  height:100%;
  border-radius:28px;
  padding:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(132,196,255,.16);
  box-shadow:0 30px 80px rgba(0,0,0,.28);
}
.demo-image-card img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:22px;
}
.demo-footer{
  position:absolute;
  left:24px;
  right:24px;
  bottom:24px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-end;
  z-index:2;
}
.demo-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.demo-tags span{
  border-radius:999px;
  padding:8px 12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(132,196,255,.12);
  color:#dbeaf8;
  font-size:.85rem;
}
.demo-note{
  color:var(--muted);
  max-width:280px;
  text-align:right;
  font-size:.92rem;
}

.section{
  padding:var(--section-padding-y, 96px) 0;
}
.section{
  position:relative;
}
.section::before{
  content:"";
  position:absolute;
  inset:18px 0;
  background:linear-gradient(180deg, rgba(2, 6, 23, 0.22) 0%, rgba(2, 6, 23, 0.08) 100%);
  pointer-events:none;
  z-index:-1;
}
.section--tight{padding-top:52px}
.section-head{
  max-width:var(--section-head-max-width, 820px);
  margin-bottom:var(--section-head-margin-bottom, 36px);
}
.section-head span{
  display:inline-flex;
  color:var(--success);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.78rem;
  font-weight:700;
}
.section-head h2{
  margin:14px 0 0;
  font-size:clamp(2rem, 4vw, 3.4rem);
  line-height:1.08;
}
.section-head p{
  margin:14px 0 0;
  color:var(--muted);
}
.project-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--project-grid-gap, 22px);
}
.project-card{
  border-radius:28px;
  background:linear-gradient(180deg, rgba(9,16,29,.84) 0%, rgba(5,10,18,.9) 100%);
  border:1px solid rgba(132,196,255,.14);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.project-card__image{
  position:relative;
  height:var(--project-card-image-height, 460px);
  overflow:hidden;
  background:linear-gradient(180deg, rgba(9,16,29,.35) 0%, rgba(5,10,18,.62) 100%);
}
.project-card__image img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .45s ease;
}
.project-card:hover .project-card__image img{
  transform:scale(1.04);
}
.project-card__body{
  padding:var(--project-card-body-padding, 22px);
}
.project-card__body h3{
  margin:0;
  font-size:1.2rem;
}
.project-card__body p{
  margin:10px 0 0;
  color:var(--muted);
}
.project-card__body .meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.project-card__body .meta span{
  border-radius:999px;
  padding:7px 10px;
  font-size:.78rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(132,196,255,.12);
  color:#dceaf8;
}

.app-slider{
  position:relative;
  width:100%;
  height:100%;
  border-radius:inherit;
  overflow:hidden;
  touch-action:pan-y;
}
.slider-viewport{
  width:100%;
  height:100%;
  overflow:hidden;
}
.slider-track{
  display:flex;
  width:100%;
  height:100%;
  transition:transform .36s ease;
  will-change:transform;
}
.app-slider.is-dragging .slider-track{
  transition:none;
}
.slider-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.slider-slide img{
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
.slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(132,196,255,.18);
  background:rgba(4,8,14,.58);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
  backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,.26);
}
.slider-arrow span{
  font-size:1.7rem;
  line-height:1;
  margin-top:-2px;
}
.slider-arrow--prev{left:14px}
.slider-arrow--next{right:14px}
.slider-arrow:hover,
.slider-arrow:focus{
  border-color:rgba(42,212,255,.32);
  background:rgba(8,16,28,.82);
}
.slider-dots{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  z-index:3;
}
.slider-dot{
  width:9px;
  height:9px;
  border:none;
  border-radius:999px;
  padding:0;
  background:rgba(255,255,255,.26);
  cursor:pointer;
}
.slider-dot.is-active{
  width:22px;
  background:linear-gradient(90deg, #52d5ff 0%, #5c8fff 100%);
}
.app-slider.is-single .slider-arrow,
.app-slider.is-single .slider-dots{
  display:none;
}
.app-slider--hero{
  background:linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.01) 100%);
}
.app-slider--hero .slider-slide img{
  padding:8px;
}
.project-slider{
  height:100%;
}
.project-slider .slider-slide img{
  padding:10px 14px 22px;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--services-grid-gap, 22px);
}
.service-card{
  padding:var(--service-card-padding, 28px);
  border-radius:30px;
  background:linear-gradient(180deg, rgba(9,16,29,.84) 0%, rgba(5,10,18,.94) 100%);
  border:1px solid rgba(132,196,255,.14);
  box-shadow:var(--shadow);
}
.service-card h3{
  margin:0;
  font-size:1.35rem;
}
.service-card p{
  margin:8px 0 0;
  color:var(--muted);
}
.service-list{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px 18px;
}
.service-list li{
  position:relative;
  padding-left:18px;
  color:#dfeaf6;
  font-size:.95rem;
}
.service-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:8px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 0 14px rgba(42,212,255,.45);
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--process-grid-gap, 18px);
}
.process-card{
  padding:var(--process-card-padding, 24px);
  border-radius:26px;
  border:1px solid rgba(132,196,255,.12);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
}
.process-card strong{
  display:inline-flex;
  color:var(--success);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.22em;
}
.process-card h3{
  margin:14px 0 0;
  font-size:1.2rem;
}
.process-card p{
  margin:10px 0 0;
  color:var(--muted);
}

.cta{
  position:relative;
  overflow:hidden;
  border-radius:36px;
  border:1px solid rgba(132,196,255,.16);
  background:
    radial-gradient(circle at top left, rgba(42,212,255,.16), transparent 24%),
    radial-gradient(circle at bottom right, rgba(59,130,246,.16), transparent 20%),
    linear-gradient(180deg, rgba(8,14,25,.88) 0%, rgba(5,10,18,.94) 100%);
  padding:var(--cta-padding, 34px);
  box-shadow:var(--shadow);
}
.cta-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:var(--cta-grid-gap, 28px);
  align-items:center;
}
.cta h2{
  margin:12px 0 0;
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1.08;
}
.cta p{
  margin:14px 0 0;
  color:var(--muted);
}
.cta-panel{
  padding:var(--cta-panel-padding, 24px);
  border-radius:28px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(132,196,255,.12);
}
.cta-panel ul{
  margin:0;
  padding-left:20px;
  color:#dfeaf6;
}
.cta-panel li+li{
  margin-top:10px;
}

#projects .section-head{
  transform:translate(var(--projects-head-x, 0px), var(--projects-head-y, 0px));
}
#projects .project-grid{
  transform:translate(var(--projects-grid-x, 0px), var(--projects-grid-y, 0px));
}
#services .section-head{
  transform:translate(var(--services-head-x, 0px), var(--services-head-y, 0px));
}
#services .services-grid{
  transform:translate(var(--services-grid-x, 0px), var(--services-grid-y, 0px));
}
#process .section-head{
  transform:translate(var(--process-head-x, 0px), var(--process-head-y, 0px));
}
#process .process-grid{
  transform:translate(var(--process-grid-x, 0px), var(--process-grid-y, 0px));
}
#contact .cta-grid{
  transform:translate(var(--cta-grid-x, 0px), var(--cta-grid-y, 0px));
}

.site-footer{
  position: relative;
  padding: 34px 0;
  margin-top: 48px;
  border-top: 1px solid var(--line, rgba(149, 214, 255, 0.14));
  background:
    linear-gradient(180deg, rgba(4, 10, 32, 0.2), rgba(4, 10, 32, 0.55)),
    rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(10px);
}

.site-footer::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 30%, rgba(88, 201, 255, 0.10), transparent 26%),
    radial-gradient(circle at 85% 70%, rgba(45, 79, 255, 0.10), transparent 24%);
}

.site-footer .container{
  position: relative;
  z-index: 1;
}

.site-footer__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.site-footer__left,
.site-footer__right{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.site-footer__right{
  margin-left: auto;
  justify-content: flex-end;
}

.site-footer__brand{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.site-footer__logo-link{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-footer__logo{
  max-height: 38px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 18px rgba(88, 201, 255, 0.18));
}

.site-footer__brand-text{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-footer__copyright{
  color: var(--text, #f8fbff);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  opacity: 0.92;
}

.site-footer__note{
  color: var(--muted, #a8bfd7);
  font-size: 15px;
  line-height: 1.5;
  white-space: nowrap;
}

.site-footer__links{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.site-footer__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(88, 201, 255, 0.22);
  background: linear-gradient(180deg, rgba(14, 28, 60, 0.9), rgba(7, 17, 40, 0.95));
  color: #eaf6ff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.site-footer__button:hover{
  transform: translateY(-2px);
  border-color: rgba(88, 201, 255, 0.45);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  color: #ffffff;
}

.site-footer__button--secondary{
  background: transparent;
  border-color: rgba(168, 191, 215, 0.24);
  color: var(--muted, #a8bfd7);
}

.site-footer__button--secondary:hover{
  border-color: rgba(88, 201, 255, 0.38);
  color: #ffffff;
}

.basic-content{
  padding:60px 0;
  background:linear-gradient(180deg, rgba(2, 6, 23, 0.2) 0%, rgba(2, 6, 23, 0.08) 100%);
}
.entry-content{
  color:#e8f1fb;
}
.entry-content a{color:var(--success)}
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4{color:#fff}

@media (max-width: 1140px){
  .hero-grid,
  .cta-grid{
    grid-template-columns:1fr;
  }
  .project-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .process-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 991px){
  .site-footer{
    padding: 28px 0;
  }

  .site-footer__inner{
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer__right{
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .site-footer__note{
    white-space: normal;
  }
}

@media (max-width: 920px){
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav-wrap{
    position:absolute;
    left:16px;
    right:16px;
    top:88px;
    border-radius:28px;
    background:rgba(5,10,18,.95);
    border:1px solid rgba(132,196,255,.12);
    box-shadow:var(--shadow);
    padding:18px;
    flex-direction:column;
    align-items:stretch;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:.25s ease;
  }
  .nav-wrap.is-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .primary-menu{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  .header-actions{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }
  .site-header__inner{
    min-height:78px;
  }
  .brand img{width:min(var(--header-logo-width, 128px), 150px)}
  .quick-points,
  .services-grid{
    grid-template-columns:1fr;
  }
  .service-list{
    grid-template-columns:1fr;
  }
  .demo-copy,
  .demo-footer{
    position:relative;
    inset:auto;
  }
  .demo-copy{
    padding:22px 22px 0;
    flex-direction:column;
  }
  .demo-footer{
    padding:0 22px 22px;
    flex-direction:column;
    align-items:flex-start;
  }
  .demo-note{text-align:left;max-width:none}
  .demo-image-wrap{
    position:relative;
    inset:auto;
    padding:18px 18px 0;
  }
  .demo-frame{min-height:auto}
}

@media (max-width: 640px){
  :root{--container:min(1240px, calc(100% - 20px))}
  .hero__content{padding:36px 0 48px}
  .hero h1{font-size:clamp(2.4rem, 12vw, 4rem)}
  .section{padding:78px 0}
  .section--tight{padding-top:40px}
  .project-grid,
  .process-grid{
    grid-template-columns:1fr;
  }
  .point,
  .service-card,
  .process-card,
  .project-card__body,
  .cta,
  .cta-panel{
    padding-left:20px;
    padding-right:20px;
  }
  .demo-shell{
    padding:14px;
    border-radius:28px;
  }
  .demo-frame{
    border-radius:24px;
  }
  .demo-image-card{
    padding:10px;
    border-radius:20px;
  }
  .project-card__image{height:400px}
  .slider-arrow{width:38px;height:38px}
  .demo-image-card img{
    border-radius:14px;
    min-height:320px;
  }

  .site-footer__brand{
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer__links{
    width: 100%;
  }

  .site-footer__button{
    width: 100%;
  }

  .site-footer__copyright,
  .site-footer__note{
    font-size: 14px;
  }
}

@media (max-width: 980px){
  .hero-panels{
    grid-template-columns:1fr;
  }
  .hero-intro{
    margin-bottom:24px;
  }
}

@media (max-width: 980px){
  .interactive-panel{margin-top:0;}
}
.hero-panel--right .interactive-panel{
  position: relative;
  overflow: hidden;
}

/* STEP 1 — Contact / Awesome Support white panels + dark blue text + square edges */

/* Better message / notice boxes */
.basic-content .notice,
.basic-content .alert,
.basic-content .message,
.basic-content .wpas-notice,
.basic-content .wpas-alert,
.basic-content .wpas-msg,
.entry-content .notice,
.entry-content .alert,
.entry-content .message,
.entry-content .wpas-notice,
.entry-content .wpas-alert,
.entry-content .wpas-msg {
  background: #ffffff !important;
  color: #163b63 !important;
  border: 1px solid #b9cee3 !important;
  border-radius: 0 !important;
  padding: 18px 20px !important;
  box-shadow: none !important;
}

.basic-content .notice *,
.basic-content .alert *,
.basic-content .message *,
.basic-content .wpas-notice *,
.basic-content .wpas-alert *,
.basic-content .wpas-msg *,
.entry-content .notice *,
.entry-content .alert *,
.entry-content .message *,
.entry-content .wpas-notice *,
.entry-content .wpas-alert *,
.entry-content .wpas-msg * {
  color: #163b63 !important;
}

/* Override old Awesome Support link colors */
#wpas-account a,
#wpas-account .button,
#wpas-new-ticket a,
#wpas-new-ticket .button,
.wpas a,
.wpas .button,
.awesome-support a,
.awesome-support .button,
#wpas-account .wpas-btn,
#wpas-account .wpas-link,
#wpas-account .nav-tab,
#wpas-account .page-numbers,
#wpas-account input[type="submit"],
#wpas-account input[type="button"],
#wpas-new-ticket input[type="submit"],
#wpas-new-ticket input[type="button"] {
  color: #1d4f82 !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

#wpas-account a:hover,
#wpas-account .button:hover,
#wpas-new-ticket a:hover,
#wpas-new-ticket .button:hover,
.wpas a:hover,
.wpas .button:hover,
.awesome-support a:hover,
.awesome-support .button:hover {
  color: #0f3458 !important;
  text-decoration: underline !important;
}

/* General ticket page text */
#wpas-account,
#wpas-new-ticket,
.wpas,
.awesome-support,
#wpas-account p,
#wpas-account div,
#wpas-account span,
#wpas-account td,
#wpas-account th,
#wpas-new-ticket p,
#wpas-new-ticket div,
#wpas-new-ticket span,
#wpas-new-ticket td,
#wpas-new-ticket th,
.wpas p,
.wpas div,
.wpas span,
.wpas td,
.wpas th,
.awesome-support p,
.awesome-support div,
.awesome-support span,
.awesome-support td,
.awesome-support th {
  color: #163b63 !important;
}

/* Subject field and standard inputs */
#wpas-account input[type="text"],
#wpas-account input[type="email"],
#wpas-account input[type="password"],
#wpas-account input[type="search"],
#wpas-account input[type="url"],
#wpas-account input[type="tel"],
#wpas-account input[type="number"],
#wpas-account textarea,
#wpas-account select,
#wpas-new-ticket input[type="text"],
#wpas-new-ticket input[type="email"],
#wpas-new-ticket input[type="password"],
#wpas-new-ticket input[type="search"],
#wpas-new-ticket input[type="url"],
#wpas-new-ticket input[type="tel"],
#wpas-new-ticket input[type="number"],
#wpas-new-ticket textarea,
#wpas-new-ticket select,
.wpas input[type="text"],
.wpas input[type="email"],
.wpas input[type="password"],
.wpas input[type="search"],
.wpas input[type="url"],
.wpas input[type="tel"],
.wpas input[type="number"],
.wpas textarea,
.wpas select,
.awesome-support input[type="text"],
.awesome-support input[type="email"],
.awesome-support input[type="password"],
.awesome-support input[type="search"],
.awesome-support input[type="url"],
.awesome-support input[type="tel"],
.awesome-support input[type="number"],
.awesome-support textarea,
.awesome-support select {
  background: #ffffff !important;
  color: #163b63 !important;
  border: 1px solid #b9cee3 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#wpas-account input::placeholder,
#wpas-account textarea::placeholder,
#wpas-new-ticket input::placeholder,
#wpas-new-ticket textarea::placeholder,
.wpas input::placeholder,
.wpas textarea::placeholder,
.awesome-support input::placeholder,
.awesome-support textarea::placeholder {
  color: #5d7b99 !important;
  opacity: 1 !important;
}

/* Description editor outer shell */
#wpas-new-ticket .wp-editor-wrap,
#wpas-new-ticket .wp-editor-container,
#wpas-new-ticket .tmce-active,
#wpas-new-ticket .html-active,
#wpas-new-ticket .mce-tinymce {
  background: #ffffff !important;
  border: 1px solid #b9cee3 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Inner editor structure */
#wpas-new-ticket .mce-container,
#wpas-new-ticket .mce-container-body,
#wpas-new-ticket .mce-panel,
#wpas-new-ticket .mce-top-part,
#wpas-new-ticket .mce-toolbar-grp,
#wpas-new-ticket .mce-menubar,
#wpas-new-ticket .quicktags-toolbar,
#wpas-new-ticket .mce-statusbar,
#wpas-new-ticket .mce-edit-area,
#wpas-new-ticket .wp-editor-area {
  background: #ffffff !important;
  color: #163b63 !important;
  border-color: #d3dfeb !important;
  box-shadow: none !important;
}

/* Remove extra borders so the panel feels like one field */
#wpas-new-ticket .wp-editor-container,
#wpas-new-ticket .mce-container,
#wpas-new-ticket .mce-container-body,
#wpas-new-ticket .mce-panel,
#wpas-new-ticket .mce-edit-area {
  border: 0 !important;
  border-radius: 0 !important;
}

/* Toolbar strip */
#wpas-new-ticket .mce-toolbar-grp,
#wpas-new-ticket .quicktags-toolbar,
#wpas-new-ticket .mce-menubar {
  border-bottom: 1px solid #d3dfeb !important;
  background: #f8fbff !important;
}

/* Toolbar buttons */
#wpas-new-ticket .mce-btn,
#wpas-new-ticket .mce-menubtn,
#wpas-new-ticket .quicktags-toolbar input,
#wpas-new-ticket .quicktags-toolbar button {
  background: #f8fbff !important;
  border-color: #d3dfeb !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#wpas-new-ticket .mce-btn button,
#wpas-new-ticket .mce-menubtn button,
#wpas-new-ticket .mce-ico,
#wpas-new-ticket .mce-caret,
#wpas-new-ticket .quicktags-toolbar input,
#wpas-new-ticket .quicktags-toolbar button {
  color: #163b63 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#wpas-new-ticket .mce-btn:hover,
#wpas-new-ticket .mce-btn:focus,
#wpas-new-ticket .mce-menubtn:hover,
#wpas-new-ticket .mce-menubtn:focus,
#wpas-new-ticket .quicktags-toolbar input:hover,
#wpas-new-ticket .quicktags-toolbar button:hover {
  background: #eef5fb !important;
}

#wpas-new-ticket .mce-btn:hover button,
#wpas-new-ticket .mce-btn:focus button,
#wpas-new-ticket .mce-menubtn:hover button,
#wpas-new-ticket .mce-menubtn:focus button,
#wpas-new-ticket .mce-btn:hover .mce-ico,
#wpas-new-ticket .mce-btn:focus .mce-ico,
#wpas-new-ticket .mce-menubtn:hover .mce-ico,
#wpas-new-ticket .mce-menubtn:focus .mce-ico,
#wpas-new-ticket .quicktags-toolbar input:hover,
#wpas-new-ticket .quicktags-toolbar button:hover {
  color: #0f3458 !important;
}

/* Remove extra TinyMCE top shadow line */
#wpas-new-ticket .mce-top-part::before {
  box-shadow: none !important;
}

/* Text mode textarea */
#wpas-new-ticket textarea,
#wpas-new-ticket .wp-editor-area {
  background: #ffffff !important;
  color: #163b63 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Labels */
#wpas-new-ticket label,
#wpas-account label {
  color: #ffffff !important;
}

/* Login/Register checkbox helper text */
.login-remember label,
.login-remember,
.forgetmenot label,
.forgetmenot,
.show-password,
.show-password label,
label[for="rememberme"],
label[for*="show-password"],
label[for*="show_password"] {
  color: #1d4f82 !important;
}

/* Checkbox text hover */
.login-remember label:hover,
.forgetmenot label:hover,
.show-password label:hover,
label[for="rememberme"]:hover,
label[for*="show-password"]:hover,
label[for*="show_password"]:hover {
  color: #0f3458 !important;
}

/* Make the checkbox itself clearer too */
.login-remember input[type="checkbox"],
.forgetmenot input[type="checkbox"],
.show-password input[type="checkbox"],
input#rememberme,
input[id*="show-password"],
input[id*="show_password"] {
  accent-color: #1d4f82;
  border-color: #1d4f82 !important;
}
/* ===== FOOTER LAYOUT FIX ===== */

.site-footer {
  position: relative;
  padding: 34px 0 30px;
  margin-top: 48px;
  border-top: 1px solid rgba(149, 214, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(4, 10, 32, 0.20), rgba(4, 10, 32, 0.55)),
    rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(10px);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 30%, rgba(88, 201, 255, 0.10), transparent 26%),
    radial-gradient(circle at 85% 70%, rgba(45, 79, 255, 0.10), transparent 24%);
}

.site-footer .container {
  position: relative;
  z-index: 1;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  width: 100%;
}

.site-footer__logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.site-footer__logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 58px;
  max-width: 220px;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 16px rgba(88, 201, 255, 0.18));
}

.site-footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.site-footer__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(88, 201, 255, 0.22);
  background: linear-gradient(180deg, rgba(14, 28, 60, 0.9), rgba(7, 17, 40, 0.95));
  color: #eaf6ff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.site-footer__button:hover {
  transform: translateY(-2px);
  border-color: rgba(88, 201, 255, 0.45);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  color: #ffffff !important;
}

.site-footer__middle {
  color: #a8bfd7;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.95;
}

.site-footer__bottom {
  color: #f8fbff;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  opacity: 0.94;
}

@media (max-width: 768px) {
  .site-footer {
    padding: 28px 0 24px;
  }

  .site-footer__top {
    flex-direction: column;
    gap: 14px;
  }

  .site-footer__logo {
    max-height: 52px;
    max-width: 190px;
  }

  .site-footer__middle,
  .site-footer__bottom {
    font-size: 14px;
  }
}
/* ===== FOOTER LAYOUT FIX ===== */

.site-footer {
  position: relative;
  padding: 34px 0 30px;
  margin-top: 48px;
  border-top: 1px solid rgba(149, 214, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(4, 10, 32, 0.20), rgba(4, 10, 32, 0.55)),
    rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(10px);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 30%, rgba(88, 201, 255, 0.10), transparent 26%),
    radial-gradient(circle at 85% 70%, rgba(45, 79, 255, 0.10), transparent 24%);
}

.site-footer .container {
  position: relative;
  z-index: 1;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.site-footer__logo-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-footer__logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.site-footer__logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 58px;
  max-width: 220px;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 16px rgba(88, 201, 255, 0.18));
}

.site-footer__links-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.site-footer__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(88, 201, 255, 0.22);
  background: linear-gradient(180deg, rgba(14, 28, 60, 0.9), rgba(7, 17, 40, 0.95));
  color: #eaf6ff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.site-footer__button:hover {
  transform: translateY(-2px);
  border-color: rgba(88, 201, 255, 0.45);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  color: #ffffff !important;
}

.site-footer__button--secondary {
  background: transparent;
  border-color: rgba(168, 191, 215, 0.24);
  color: #cfe3f5 !important;
}

.site-footer__button--secondary:hover {
  border-color: rgba(88, 201, 255, 0.38);
  color: #ffffff !important;
}

.site-footer__middle {
  color: #a8bfd7;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.95;
}

.site-footer__bottom {
  color: #f8fbff;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  opacity: 0.94;
}

@media (max-width: 768px) {
  .site-footer {
    padding: 28px 0 24px;
  }

  .site-footer__logo {
    max-height: 52px;
    max-width: 190px;
  }

  .site-footer__links {
    flex-direction: column;
    width: 100%;
  }

  .site-footer__button {
    width: 100%;
    max-width: 240px;
  }

  .site-footer__middle,
  .site-footer__bottom {
    font-size: 14px;
  }
}
/* ===== SERVICES ACCORDION ===== */

#services .service-card {
  position: relative;
}

#services .service-card__toggle {
  width: 100%;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(132, 196, 255, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  color: #eef6ff;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  text-align: left;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

#services .service-card__toggle:hover,
#services .service-card__toggle:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(88, 201, 255, 0.30);
  outline: none;
}

#services .service-card__toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#services .service-card__toggle-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  position: relative;
  transition: transform 0.25s ease;
}

#services .service-card__toggle-icon::before,
#services .service-card__toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

#services .service-card__toggle-icon::before {
  transform: translate(-50%, -50%) rotate(0deg);
}

#services .service-card__toggle-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

#services .service-card.is-open .service-card__toggle-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0.2);
}

#services .service-card__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.25s ease;
}

#services .service-card.is-open .service-card__panel {
  opacity: 1;
  margin-top: 14px;
}

#services .service-card .service-list {
  margin: 0;
  padding: 0;
}

#services .service-card.is-open .service-card__toggle {
  border-color: rgba(88, 201, 255, 0.34);
  background: rgba(255, 255, 255, 0.06);
}

html.rtl-mode #services .service-card__toggle,
html[lang="ar"] #services .service-card__toggle,
body:lang(ar) #services .service-card__toggle {
  text-align: right;
}

html.rtl-mode #services .service-card__toggle-label,
html[lang="ar"] #services .service-card__toggle-label,
body:lang(ar) #services .service-card__toggle-label {
  flex-direction: row-reverse;
}

@media (max-width: 920px) {
  #services .service-card__toggle {
    padding: 13px 14px;
    font-size: 0.95rem;
  }
}

@media (max-width: 640px) {
  #services .service-card__toggle {
    border-radius: 16px;
  }
}