/* ═══════════════════════════════════════════════════════════
   AuralogicX — Page Sections
   css/sections.css
═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   BRAND STRIP (marquee)
══════════════════════════════════════════════════════════ */
.brand-strip {
  background:  rgba(6,12,26,0.58);
  border-top:  1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:     0; overflow:hidden; position:relative;
}
.brand-strip-inner {
  display:   flex;
  align-items:center;
  animation: marquee 28s linear infinite;
  gap:       0; white-space:nowrap;
}
.brand-strip-item {
  display:      flex;
  align-items:  center;
  gap:          14px;
  padding:      20px 40px;
  border-right: 1px solid var(--border);
  flex-shrink:  0;
}
.brand-strip-item img  { height:56px; width:56px; object-fit:contain; opacity:.85 }
.brand-strip-item span {
  font-family:    var(--ff-display);
  font-size:      10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--muted);
}
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ══════════════════════════════════════════════════════════
   ABOUT / LANDING
══════════════════════════════════════════════════════════ */
.landing-section {
  padding:  100px 0;
  background:rgba(6,12,26,0.52);
  position: relative; overflow:hidden;
}
.landing-section::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 55% 60% at 80% 50%,rgba(124,58,237,.10) 0%,transparent 65%);
}
.landing-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   72px;
  align-items:           center;
  position:              relative; z-index:1;
}
@media (max-width:860px) { .landing-grid { grid-template-columns:1fr; gap:48px } }
.landing-info p.intro { font-size:16px; color:var(--muted); line-height:1.82; margin-bottom:28px }
.landing-values {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   14px;
  margin-top:            32px;
}
@media (max-width:480px) { .landing-values { grid-template-columns:1fr } }
.lval {
  background:      var(--panel);
  border:          1px solid var(--border);
  border-radius:   var(--r);
  padding:         10px;
  transition:      .3s var(--ease);
  backdrop-filter: blur(12px);
}
.lval:hover      { border-color:rgba(0,212,255,.28); transform:translateY(-3px) }
.lval-icon       { font-size:18px; margin-bottom:8px }
.lval-icon img   { transition:filter .3s var(--ease) }
.lval:hover .lval-icon img { filter:brightness(1.4) drop-shadow(0 0 10px rgba(0,212,255,.55)) }
.lval-title      { font-family:var(--ff-display); font-size:12.5px; font-weight:700; margin-bottom:5px; color:#dde8ff }
.lval-text       { font-size:12px; color:#a8bdd8; line-height:1.65 }
.domains-showcase { display:flex; flex-direction:column; gap:14px }
.dshow-card {
  display:         flex;
  align-items:     flex-start;
  gap:             18px;
  background:      var(--panel);
  border:          1px solid var(--border);
  border-radius:   var(--r-lg);
  padding:         20px 22px;
  transition:      .32s var(--ease);
  position:        relative; overflow:hidden;
  backdrop-filter: blur(14px);
  cursor:          default;
}
.dshow-card::after {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--cyan),var(--violet));
  transform:scaleY(0); transform-origin:bottom; transition:.32s var(--ease);
}
.dshow-card:hover { border-color:rgba(0,212,255,.3); transform:translateX(6px) }
.dshow-card:hover::after { transform:scaleY(1) }
/* .dshow-icon { width:46px; height:46px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; background:linear-gradient(135deg,rgba(0,212,255,.1),rgba(124,58,237,.1)); border:1px solid rgba(0,212,255,.18) } */
.dshow-icon { width:46px; height:46px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; overflow:hidden; }
.dshow-icon img { max-width:100%; max-height:100%; transition:filter .3s var(--ease) }
.dshow-card:hover .dshow-icon img { filter:brightness(1.4) drop-shadow(0 0 10px rgba(0,212,255,.55)) }
.dshow-name { font-family:var(--ff-display); font-size:13.5px; font-weight:700; margin-bottom:5px; color:var(--white) }
.dshow-desc { font-size:12.5px; color:#b0c6e4; line-height:1.65 }
.dshow-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px }
.dshow-tag  { font-size:9px; font-family:var(--ff-display); letter-spacing:.5px; padding:3px 9px; border-radius:20px; background:rgba(0,212,255,.06); border:1px solid rgba(0,212,255,.14); color:var(--muted) }

/* ══════════════════════════════════════════════════════════
   SERVICES
══════════════════════════════════════════════════════════ */
.services-grid {
  display:               grid;
  grid-template-columns: repeat(4,1fr);
  gap:                   22px;
  margin-top:            56px;
  align-items:           start;
}
@media (max-width:1100px) { .services-grid { grid-template-columns:repeat(2,1fr) } }
@media (max-width:580px)  { .services-grid { grid-template-columns:1fr } }
.svc-card {
  background:    var(--panel);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       28px 24px;
  transition:    .35s var(--ease);
  cursor:        default;
  position:      relative; overflow:hidden;
}
.svc-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  transform:scaleX(0); transform-origin:left; transition:.35s var(--ease);
}
.svc-card:hover { border-color:rgba(0,212,255,.3); transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,.45) }
.svc-card:hover::after { transform:scaleX(1) }
.svc-icon-wrap {
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; font-size:22px;
  background:linear-gradient(135deg,rgba(0,212,255,.1),rgba(124,58,237,.1));
  border:1px solid rgba(0,212,255,.18);
}
.svc-card.domain-featured .svc-icon-wrap { background:transparent; border:none; padding:0; width:58px; height:58px }
.svc-card.domain-featured .svc-icon-wrap img { width:58px; height:58px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(0,212,255,.35)); transition:filter .3s var(--ease) }
.svc-icon-wrap { transition:filter .3s var(--ease) }
.svc-card:hover .svc-icon-wrap { filter:brightness(1.35) }
.svc-card:hover .svc-icon-wrap img { filter:brightness(1.4) drop-shadow(0 0 14px rgba(0,212,255,.6)) }
.svc-name  { font-family:var(--ff-display); font-size:14.5px; font-weight:700; margin-bottom:10px; line-height:1.3; color:#e8eeff; text-shadow:0 0 20px rgba(0,212,255,.15) }

/* ─── Description: clamped to a uniform height by default so cards
       don't vary in size based on how long each blurb is; expands
       to show the full text on hover/click, alongside the chips ── */
.svc-desc {
  position:   relative;
  font-size:  13px;
  color:      #b0c6e4;
  line-height:1.65;
  margin-bottom: 18px;
  max-height: 4.95em;   /* ≈ 3 lines at this font-size/line-height */
  overflow:   hidden;
  transition: max-height .4s var(--ease);
}
.svc-desc::after {
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:22px;
  background: linear-gradient(180deg, transparent, var(--panel));
  opacity:    1;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.svc-card:hover .svc-desc,
.svc-card.expanded .svc-desc {
  max-height: 320px; /* comfortably fits the longest description in full */
}
.svc-card:hover .svc-desc::after,
.svc-card.expanded .svc-desc::after {
  opacity: 0;
}

.svc-chips { display:flex; flex-wrap:wrap; gap:6px }
.chip { font-size:9.5px; font-family:var(--ff-display); letter-spacing:.5px; padding:4px 10px; border-radius:20px; background:rgba(0,212,255,.09); border:1px solid rgba(0,212,255,.24); color:#8ecce8 }

/* ─── All service cards: chips hidden by default, card expands on hover ── */
.svc-card .svc-chips {
  max-height: 0;
  opacity:    0;
  margin-top: 0;
  overflow:   hidden;
  transition: max-height .4s var(--ease), opacity .3s var(--ease), margin-top .4s var(--ease);
}
.svc-card:hover .svc-chips {
  max-height: 220px;
  opacity:    1;
  margin-top: 8px;
}
.svc-card.expanded .svc-chips {
  max-height: 220px;
  opacity:    1;
  margin-top: 8px;
}

/* ─── Capability-list variant (used instead of pill chips where content is longer) ── */
.svc-chips.svc-caps { display:block }
.svc-caps-label {
  font-family:    var(--ff-display);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color:          var(--cyan);
  opacity:        .9;
  margin-bottom:  8px;
}
.svc-caps-list { list-style:none; display:flex; flex-direction:column; gap:6px }
.svc-caps-list li {
  font-size:    12px;
  color:        #b0c6e4;
  line-height:  1.5;
  padding-left: 14px;
  position:     relative;
}
.svc-caps-list li::before {
  content:'';
  position:      absolute;
  left:0; top:7px;
  width:5px; height:5px;
  border-radius:  50%;
  background:     linear-gradient(135deg,var(--cyan),var(--violet));
}

/* ══════════════════════════════════════════════════════════
   CORE DOMAINS
══════════════════════════════════════════════════════════ */
.domains-section { position:relative; overflow:hidden }
.domains-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 70% at 85% 50%,rgba(124,58,237,.12) 0%,transparent 65%) }
.domains-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-top:56px }
@media (max-width:768px) { .domains-grid { grid-template-columns:1fr } }
.domain-card {
  display:         flex; gap:24px; align-items:flex-start;
  background:      var(--panel);
  border:          1px solid var(--border);
  border-radius:   var(--r-xl);
  padding:         32px 28px;
  transition:      .35s var(--ease);
  position:        relative; overflow:hidden;
  backdrop-filter: blur(14px);
}
.domain-card::before { content:''; position:absolute; inset:0; border-radius:var(--r-xl); background:linear-gradient(130deg,rgba(124,58,237,.06) 0%,transparent 50%); opacity:0; transition:.35s }
.domain-card:hover   { border-color:rgba(124,58,237,.38); transform:translateX(6px); box-shadow:-6px 0 50px rgba(124,58,237,.12) }
.domain-card:hover::before { opacity:1 }
.domain-img-wrap { width:72px; height:72px; border-radius:16px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(10,18,40,.8); border:1px solid rgba(0,212,255,.18); padding:8px }
.domain-img-wrap img { width:52px; height:52px; object-fit:contain }
.domain-name { font-family:var(--ff-display); font-size:17px; font-weight:700; margin-bottom:10px; background:linear-gradient(90deg,var(--white),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.domain-text { font-size:13.5px; color:#aec6e6; line-height:1.75 }

/* ══════════════════════════════════════════════════════════
   AI & DATA
══════════════════════════════════════════════════════════ */
.ai-section { position:relative; overflow:hidden }
.ai-grid    { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center }
@media (max-width:860px) { .ai-grid { grid-template-columns:1fr; gap:48px } }
.ai-chips   { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px }
.ai-chip    { font-family:var(--ff-display); font-size:10.5px; letter-spacing:.8px; padding:8px 16px; border-radius:var(--r); background:rgba(0,212,255,.08); border:1px solid rgba(0,212,255,.2); color:var(--cyan); transition:.3s var(--ease) }
.ai-chip:hover { background:rgba(0,212,255,.18); transform:translateY(-2px) }
.ai-cards-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px }
.ai-mini-card {
  background:      rgba(10,18,40,.8);
  border:          1px solid var(--border);
  border-radius:   var(--r-lg);
  padding:         24px 20px;
  text-align:      center;
  transition:      .3s var(--ease);
  backdrop-filter: blur(12px);
  display:         flex; flex-direction:column; align-items:center;
}
.ai-mini-card:hover { border-color:rgba(0,212,255,.3); transform:translateY(-4px) }
.ai-mini-card img  { transition:filter .3s var(--ease) }
.ai-mini-card:hover img { filter:brightness(1.4) drop-shadow(0 0 12px rgba(0,212,255,.55)) }
.ai-mini-label { font-family:var(--ff-display); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:6px }
.ai-mini-val   { font-family:var(--ff-display); font-size:18px; font-weight:700; background:linear-gradient(135deg,var(--cyan),var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }

/* ══════════════════════════════════════════════════════════
   INDUSTRIES
══════════════════════════════════════════════════════════ */
.ind-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:14px; margin-top:48px }
@media (max-width:1000px){ .ind-grid { grid-template-columns:repeat(4,1fr) } }
@media (max-width:600px) { .ind-grid { grid-template-columns:repeat(2,1fr) } }
.ind-card {
  background:      var(--panel);
  border:          1px solid var(--border);
  border-radius:   var(--r-lg);
  padding:         24px 16px;
  text-align:      center;
  transition:      .3s var(--ease);
  backdrop-filter: blur(12px);
  cursor:          default;
  display:         flex; flex-direction:column; align-items:center; gap:10px;
}
.ind-card:hover { border-color:rgba(0,212,255,.3); transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4) }
.ind-icon { font-size:28px }
.ind-icon img { transition:filter .3s var(--ease) }
.ind-card:hover .ind-icon img { filter:brightness(1.4) drop-shadow(0 0 12px rgba(0,212,255,.55)) }
.ind-name { font-family:var(--ff-display); font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted) }

/* ══════════════════════════════════════════════════════════
   PROCESS
══════════════════════════════════════════════════════════ */
.process-row { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:56px }
@media (max-width:960px)  { .process-row { grid-template-columns:repeat(2,1fr) } }
@media (max-width:500px)  { .process-row { grid-template-columns:1fr } }
.step {
  background:      var(--panel);
  border:          1px solid var(--border);
  border-radius:   var(--r-lg);
  padding:         28px 24px;
  transition:      .3s var(--ease);
  backdrop-filter: blur(12px);
  position:        relative; overflow:hidden;
}
.step::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--cyan),var(--violet)) }
.step:hover   { border-color:rgba(0,212,255,.28); transform:translateY(-4px) }
.step-num   { font-family:var(--ff-display); font-size:32px; font-weight:800; background:linear-gradient(135deg,var(--cyan),var(--violet)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:14px; line-height:1 }
.step-title { font-family:var(--ff-display); font-size:14px; font-weight:700; color:#dde8ff; margin-bottom:10px }
.step-text  { font-size:13px; color:#a8bdd8; line-height:1.7 }

/* ══════════════════════════════════════════════════════════
   WHY CARDS (About sub-section)
══════════════════════════════════════════════════════════ */
.why-grid  { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:32px }
@media (max-width:500px) { .why-grid { grid-template-columns:1fr } }
.why-grid--3col { grid-template-columns:repeat(3,1fr) }
@media (max-width:860px) { .why-grid--3col { grid-template-columns:repeat(2,1fr) } }
@media (max-width:500px) { .why-grid--3col { grid-template-columns:1fr } }
.why-card img { transition:filter .3s var(--ease) }
.why-card:hover img { filter:brightness(1.4) drop-shadow(0 0 10px rgba(0,212,255,.55)) }
.why-card  { background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:20px; transition:.3s var(--ease); backdrop-filter:blur(12px) }
.why-card:hover  { border-color:rgba(0,212,255,.3); transform:translateY(-3px) }
.why-card-icon   { font-size:20px; margin-bottom:10px }
.why-card-title  { font-family:var(--ff-display); font-size:13px; font-weight:700; margin-bottom:6px; color:#dde8ff }
.why-card-text   { font-size:12.5px; color:#b0c6e4; line-height:1.65 }

/* ══════════════════════════════════════════════════════════
   CONTACT
══════════════════════════════════════════════════════════ */
.contact-section { position:relative; overflow:hidden }
.contact-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 50% 60% at 20% 50%,rgba(0,212,255,.07) 0%,transparent 60%) }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:56px; position:relative; z-index:1 }
@media (max-width:860px) { .contact-grid { grid-template-columns:1fr; gap:40px } }
.cinfo-item { display:flex; align-items:flex-start; gap:16px; margin-bottom:24px }
.cinfo-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; background:linear-gradient(135deg,rgba(0,212,255,.1),rgba(124,58,237,.1)); border:1px solid rgba(0,212,255,.2); flex-shrink:0 }
.cinfo-label { font-family:var(--ff-display); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:4px }
.cinfo-val   { font-size:14px; color:var(--white); font-weight:500 }

/* ─── Contact form ───────────────────────────────────────── */
.cform { display:flex; flex-direction:column; gap:14px }
.crow  { display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (max-width:480px) { .crow { grid-template-columns:1fr } }
.cf {
  background:      rgba(10,18,40,.7);
  border:          1px solid rgba(0,212,255,.15);
  border-radius:   var(--r);
  padding:         14px 18px;
  color:           var(--white);
  font-family:     var(--ff-body);
  font-size:       14px;
  outline:         none;
  transition:      .25s var(--ease);
  width:           100%;
}
.cf::placeholder   { color:rgba(168,189,224,.5) }
.cf:focus          { border-color:rgba(0,212,255,.45); background:rgba(10,18,40,.9); box-shadow:0 0 20px rgba(0,212,255,.08) }
.cf option         { background:#060c1a; color:var(--white) }
textarea.cf        { min-height:130px; resize:vertical }

.form-status {
  font-size:   12.5px;
  line-height: 1.6;
  min-height:  0;
}
.form-status--success { color: var(--cyan) }
.form-status--error   { color: #ff8a95 }

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.footer {
  background:   rgba(3,6,15,.98);
  border-top:   1px solid var(--border);
  padding:      64px 0 0;
}
.footer-inner {
  max-width:    1200px;
  margin:       0 auto;
  padding:      0 28px 48px;
  display:      grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:          48px;
}
@media (max-width:960px) { .footer-inner { grid-template-columns:1fr 1fr } }
@media (max-width:560px) { .footer-inner { grid-template-columns:1fr } }
.footer-brand img { height:52px; object-fit:contain; margin-bottom:18px; display:block }
.footer-brand p   { font-size:13px; color:#8aa0c0; line-height:1.75; max-width:280px; margin-bottom:22px }
.footer-social    { display:flex; gap:12px }
.fsoc {
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,212,255,.07); border:1px solid rgba(0,212,255,.15);
  transition:.3s var(--ease);
}
.fsoc svg { width:16px; height:16px; fill:rgba(168,189,224,.7); transition:.3s }
.fsoc:hover { background:rgba(0,212,255,.15); border-color:rgba(0,212,255,.4) }
.fsoc:hover svg { fill:var(--cyan) }
.fsoc-li:hover { background:rgba(10,102,194,.15); border-color:rgba(10,102,194,.4) }
.fsoc-li:hover svg { fill:#0a66c2 }
.fsoc-x:hover  { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25) }
.fsoc-x:hover svg  { fill:var(--white) }
.fcol-title { font-family:var(--ff-display); font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--cyan); opacity:.8; margin-bottom:18px }
.fcol a     { display:block; font-size:13px; color:#8aa0c0; margin-bottom:10px; transition:.25s var(--ease) }
.fcol a:hover { color:var(--white); padding-left:4px }
.footer-btm {
  border-top:   1px solid rgba(0,212,255,.07);
  padding:      20px 28px;
  max-width:    1200px;
  margin:       0 auto;
  display:      flex;
  justify-content:space-between;
  align-items:  center;
  flex-wrap:    wrap;
  gap:          8px;
  font-size:    12px;
  color:        #5a7090;
}
.footer-btm span { color:#7090b0 }