/* ==========================================================================
   HYPERFORMICS — SECTIONS
   Per-section layout rules, ordered to match index.html.
   ========================================================================== */

.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================ 1. HERO ============================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 5.5rem;
  padding-bottom: 1.5rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(109, 40, 217, 0.25), transparent 60%),
    var(--c-bg-1);
}

.hero__particles { position: absolute; inset: 0; z-index: 1; }

.hero__glow {
  position: absolute;
  width: 60vw; height: 60vw;
  max-width: 900px; max-height: 900px;
  border-radius: 50%;
  background: var(--grad-radial-glow);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}
.hero__glow--1 { top: -20%; left: -15%; }
.hero__glow--2 { bottom: -25%; right: -10%; animation: float-slow 9s ease-in-out infinite reverse; }

.hero__beam {
  position: absolute;
  top: -10%; left: 50%;
  width: 140%; height: 120%;
  background: linear-gradient(100deg, transparent 40%, rgba(183,71,184,0.05) 48%, rgba(255,255,255,0.04) 50%, transparent 58%);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  max-width: 56rem;
  padding-inline: var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.hero__headline, .hero__sub { min-width: 0; max-width: 100%; }

.hero__logo { width: clamp(52px, 7vw, 76px); height: auto; margin-bottom: var(--space-3); filter: drop-shadow(0 0 30px rgba(183,71,184,0.35)); }
.hero__logo-bar {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: bar-rise 0.8s var(--ease-premium) both;
  animation-delay: var(--d, 0s);
}
@keyframes bar-rise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.hero__logo-arrow {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: logo-draw 1.3s var(--ease-premium) 0.5s forwards;
}
.hero__logo-head { opacity: 0; animation: fade-up 0.5s var(--ease-premium) both; animation-delay: var(--d, 0.9s); }

.hero__headline {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-3);
  transition-delay: 0.1s;
}
.hero__sub {
  font-size: var(--fs-body-lg);
  color: var(--c-text-2);
  max-width: 38rem;
  margin-bottom: var(--space-4);
  transition-delay: 0.2s;
}
.hero__content .btn { transition-delay: 0.3s; }

.scroll-cue {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--c-text-3);
}

/* ============================ 2. ABOUT ============================ */
.about__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.about__pillar { padding: var(--space-4); }
.about__pillar h3 { font-size: var(--fs-h3); margin-bottom: var(--space-1); }
.about__pillar p { font-size: var(--fs-small); }

.about__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--glass-border);
}
.stat { text-align: center; }

@media (max-width: 900px) {
  .about__pillars { grid-template-columns: 1fr; }
  .about__stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}

/* ============================ 3. WHAT WE BUILD ============================ */
.build__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.build__card { padding: var(--space-4); }
.build__card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.build__card p { font-size: var(--fs-small); }

@media (max-width: 1100px) { .build__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .build__grid { grid-template-columns: repeat(2, 1fr); } }

.results-strip { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--glass-border); }
.results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.results-card { padding: 0; overflow: hidden; }
.results-card .browser-frame__viewport--natural { background: var(--c-bg-4); }
.results-card .browser-frame { border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: none; }
.results-card__body { padding: var(--space-3); }
.results-card__body h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.results-card__body p { font-size: var(--fs-small); }

@media (max-width: 1100px) { .results-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================ 8. INDUSTRIES ============================ */
.industries__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.industry-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
}
.industry-tile svg { width: 30px; height: 30px; stroke: var(--c-text-1); fill: none; stroke-width: 1.5; transition: stroke var(--dur-fast), filter var(--dur-fast); }
.industry-tile:hover svg { stroke: var(--c-primary); filter: drop-shadow(0 0 10px rgba(183,71,184,0.5)); transform: scale(1.12) rotate(-6deg); }
.industry-tile span { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-text-2); }

@media (max-width: 1100px) { .industries__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) { .industries__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================ 12. WHY CHOOSE US ============================ */
.why-us .container { text-align: center; }
.why-us .eyebrow { justify-content: center; display: flex; }
.statement-list {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.statement-list li {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  justify-content: center;
  transition: color var(--dur-base);
}
.statement-list li:last-child { border-bottom: none; }
.statement-list li:hover { color: var(--c-primary); }
.statement-list__index {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  opacity: 0.6;
}

/* ============================ 4. FEATURED PORTFOLIO ============================ */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.project-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.project-card:not([class*="glass-active"]) .browser-frame__viewport,
.project-card .browser-frame__viewport { -webkit-backdrop-filter: none; backdrop-filter: none; }
.project-card__body { padding: var(--space-3) var(--space-4) var(--space-4); }
.project-card__header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
.project-card__favicon { width: 22px; height: 22px; border-radius: 5px; }
.project-card__header h3 { font-size: 1.1rem; }
.project-card__industry { font-size: var(--fs-micro); color: var(--c-primary); text-transform: uppercase; letter-spacing: var(--ls-wide); margin-bottom: 0.6rem; }
.project-card__tagline { font-size: var(--fs-small); color: var(--c-text-2); font-style: italic; margin-bottom: var(--space-2); min-height: 2.6em; }
.project-card__services, .project-card__tech { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--space-2); }
.chip--tech { background: var(--glass-tint-secondary); }
.project-card__cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: var(--fs-small); font-weight: var(--fw-semibold);
  color: var(--c-text-1);
  transition: gap var(--dur-fast), color var(--dur-fast);
}
.project-card__cta:hover { color: var(--c-primary); gap: 0.65rem; }

/* ============================ 5. SOFTWARE & AI ============================ */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.dash-card { padding: 0; overflow: hidden; }
.dash-card .browser-frame { border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: none; }
.dash-card__label { padding: var(--space-3) var(--space-4) var(--space-4); }
.dash-card__label h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.dash-card__label p { font-size: var(--fs-small); }
.dash-mock { aspect-ratio: 16/9; background: var(--c-bg-1); padding: var(--space-3); overflow: hidden; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.4rem; }
.dot--primary { background: var(--c-primary); box-shadow: 0 0 8px rgba(183,71,184,0.6); }
.dot--secondary { background: var(--c-secondary); box-shadow: 0 0 8px rgba(109,40,217,0.6); }
.dot--support { background: var(--c-support); box-shadow: 0 0 8px rgba(79,70,229,0.6); }

.dash-kanban { display: flex; gap: var(--space-2); height: 100%; }
.dash-kanban__col { flex: 1; background: var(--glass-1); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 0.6rem; }
.dash-kanban__title { display: block; font-size: var(--fs-micro); color: var(--c-text-3); text-transform: uppercase; letter-spacing: var(--ls-wide); margin-bottom: 0.5rem; }
.dash-kanban__card { background: var(--c-bg-3); border-radius: 8px; padding: 0.45rem 0.6rem; font-size: 0.72rem; margin-bottom: 0.4rem; display: flex; align-items: center; }
.dash-kanban__card.is-won { opacity: 0.7; }

.dash-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; height: 100%; }
.dash-flow__node { background: var(--glass-2); border: 1px solid var(--glass-border); border-radius: var(--radius-full); padding: 0.5rem 1rem; font-size: 0.72rem; white-space: nowrap; }
.dash-flow__node--accent { background: var(--glass-tint-primary); border-color: var(--glass-border-glow); }
.dash-flow__arrow { width: 18px; height: 1px; background: var(--glass-border-hover); position: relative; }
.dash-flow__arrow::after { content: '›'; position: absolute; right: -4px; top: -9px; color: var(--c-text-3); }

.dash-stats { display: flex; justify-content: space-around; margin-bottom: var(--space-3); }
.dash-stats__val { display: block; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.3rem; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dash-stats__lbl { font-size: var(--fs-micro); color: var(--c-text-3); }
.dash-bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 55%; }
.dash-bars span { flex: 1; height: var(--h); background: var(--grad-primary); border-radius: 4px 4px 0 0; opacity: 0.85; }

.dash-portal__progress { height: 8px; background: var(--glass-1); border-radius: var(--radius-full); overflow: hidden; margin-bottom: 0.6rem; }
.dash-portal__progress span { display: block; width: 72%; height: 100%; background: var(--grad-primary); }
.dash-portal__label { font-size: var(--fs-small); color: var(--c-text-2); margin-bottom: 0.7rem; }
.dash-portal__row { display: flex; align-items: center; font-size: 0.78rem; padding: 0.35rem 0; border-bottom: 1px solid var(--glass-border); }

@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

/* ============================ 6. MOBILE APPLICATIONS ============================ */
.phones-row {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-7);
  overflow-x: auto;
  padding: var(--space-3) var(--space-2) var(--space-5);
  scroll-snap-type: x proximity;
}
.phone-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  scroll-snap-align: center;
}
.phone-item h3 { font-size: 0.95rem; text-align: center; color: var(--c-text-2); font-weight: var(--fw-medium); }
.phone-item:nth-child(2) .device-frame { animation-delay: -2s; }
.phone-item:nth-child(3) .device-frame { animation-delay: -4s; }
.phone-item:nth-child(4) .device-frame { animation-delay: -1s; }
.phone-item:nth-child(5) .device-frame { animation-delay: -3s; }
.phone-item:nth-child(6) .device-frame { animation-delay: -0.5s; }
.phone-item:nth-child(7) .device-frame { animation-delay: -2.5s; }

.phone-mock { padding: 2.2rem 1rem 1rem; height: 100%; display: flex; flex-direction: column; gap: 0.55rem; }
.phone-mock__title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 0.95rem; margin-bottom: 0.3rem; }
.phone-mock__calendar { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--c-text-3); margin-bottom: 0.3rem; }
.phone-mock__calendar .is-active { color: #fff; background: var(--grad-primary); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.phone-mock__slot { background: var(--glass-1); border: 1px solid var(--glass-border); border-radius: 10px; padding: 0.55rem 0.7rem; font-size: 0.72rem; color: var(--c-text-2); }
.phone-mock__slot.is-active { background: var(--glass-tint-primary); border-color: var(--glass-border-glow); color: var(--c-text-1); }
.phone-mock__btn { margin-top: auto; background: var(--grad-primary); color: #fff; text-align: center; padding: 0.7rem; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: var(--fw-semibold); }
.phone-mock__map { flex: 1; min-height: 90px; background: var(--c-bg-3); border-radius: 12px; position: relative; background-image: linear-gradient(rgba(183,71,184,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(183,71,184,0.08) 1px, transparent 1px); background-size: 16px 16px; }
.phone-mock__pin { position: absolute; top: 45%; left: 55%; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: var(--c-primary); transform: rotate(-45deg); box-shadow: var(--glow-primary); }
.phone-mock .dash-stats { margin-bottom: 0.2rem; }
.phone-mock .dash-stats__val { font-size: 1.1rem; }

@media (max-width: 760px) {
  .phones-row { justify-content: flex-start; }
}

/* ============================ 10. GLOBAL REACH ============================ */
.map-wrap {
  margin-top: var(--space-6);
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
}
#worldMap { width: 100%; height: auto; overflow: visible; }
.map-dot { fill: var(--c-text-3); opacity: 0.35; }
.map-arc { stroke: url(#navGrad); stroke-width: 1.4; opacity: 0.7; }
.map-arc-dot { filter: drop-shadow(0 0 4px rgba(183,71,184,0.9)); }
.map-marker__ring {
  fill: none; stroke: var(--c-primary); stroke-width: 1; opacity: 0.35;
  animation: ring-expand 2.6s ease-out infinite;
  transform-box: fill-box; transform-origin: center;
}
.map-marker__core { fill: var(--c-primary); filter: drop-shadow(0 0 6px rgba(183,71,184,0.8)); }
.map-marker__label {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  fill: var(--c-text-1); letter-spacing: 0.02em;
}
@keyframes ring-expand {
  0% { r: 4; opacity: 0.7; }
  100% { r: 16; opacity: 0; }
}
.map-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--c-text-2);
}
.map-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.map-legend__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); box-shadow: var(--glow-primary); }

@media (prefers-reduced-motion: reduce) {
  .map-marker__ring { animation: none; opacity: 0.25; }
}

/* ============================ 7. AI CAPABILITIES ============================ */
.network-wrap { margin-top: var(--space-6); display: flex; justify-content: center; }
#aiNetwork { width: 100%; max-width: 620px; height: auto; }
.net-line { stroke: var(--glass-border-hover); stroke-width: 1; }
.net-node__bg { fill: var(--c-bg-2); stroke: var(--glass-border); stroke-width: 1; transition: fill var(--dur-base), stroke var(--dur-base); }
.net-node:hover .net-node__bg { fill: var(--glass-tint-primary); stroke: var(--glass-border-glow); }
.net-node__label {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
  fill: var(--c-text-2);
}
.net-center__ring {
  fill: none; stroke: var(--c-primary); stroke-width: 1; opacity: 0.3;
  animation: ring-expand 3s ease-out infinite;
  transform-box: fill-box; transform-origin: center;
}
.net-center__bg { fill: url(#navGrad); filter: drop-shadow(0 0 24px rgba(183,71,184,0.5)); }
.net-center__label { font-family: var(--font-display); font-size: 15px; font-weight: 700; fill: #fff; }

@media (max-width: 640px) {
  .net-node__label { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .net-center__ring { animation: none; opacity: 0.2; }
}

/* ============================ 9. CLIENT SUCCESS ============================ */
.testimonial-row { margin-top: var(--space-4); }
.testimonial-row .marquee-track { gap: var(--space-3); padding-inline: var(--space-3); }
.t-card {
  width: 320px;
  flex-shrink: 0;
  background: var(--glass-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
}
.t-card__head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.6rem; }
.t-card__head b { font-size: 0.85rem; font-weight: 600; flex: 1; }
.t-card__head small { color: var(--c-text-3); font-size: var(--fs-micro); }
.t-card__icon {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.t-card--whatsapp .t-card__icon { background: #25D366; }
.t-card--email .t-card__icon { background: var(--c-support); }
.t-card--linkedin .t-card__icon { background: #0A66C2; font-size: 0.6rem; }
.t-card--google .t-card__icon { background: #fff; color: #4285F4; }
.t-card p { font-size: 0.85rem; color: var(--c-text-1); line-height: var(--lh-normal); margin-bottom: 0.6rem; }
.t-card__meta { font-size: var(--fs-micro); color: var(--c-text-3); }
.t-card--google .t-card__head small { color: #FBBC05; letter-spacing: 0.05em; }

/* ============================ 11. TECH STACK ============================ */
.tech-marquee { margin-top: var(--space-6); }
.tech-marquee .marquee-track { gap: var(--space-3); padding-inline: var(--space-3); align-items: center; }
.tech-chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  flex-shrink: 0;
  padding: 0.75rem 1.4rem;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 0.95rem;
  color: var(--c-text-2);
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.tech-chip:hover { color: var(--c-text-1); border-color: var(--glass-border-glow); background: var(--glass-tint-primary); transform: translateY(-3px); }
.tech-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--grad-primary); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-premium); }
.tech-chip:hover i { transform: scale(1.6) rotate(90deg); }

/* ============================ 13. CONTACT ============================ */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
  align-items: start;
}
.contact-grid > * { min-width: 0; }
.contact-info { padding: var(--space-4); }
.contact-info h3 { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.contact-info__link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--glass-border);
  transition: transform var(--dur-fast) var(--ease-premium);
}
.contact-info__link:first-of-type { border-top: none; }
.contact-info__link:hover { transform: translateX(4px); }
.contact-info__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--glass-tint-primary);
  border: 1px solid var(--glass-border);
  transition: background var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium);
}
.contact-info__icon svg { width: 18px; height: 18px; stroke: var(--c-text-1); fill: none; stroke-width: 1.7; }
.contact-info__link:hover .contact-info__icon { background: var(--glass-tint-secondary); border-color: var(--glass-border-glow); transform: rotate(-6deg) scale(1.08); }
.contact-info__link > span:last-child { min-width: 0; flex: 1; }
.contact-info__link b { display: block; font-size: var(--fs-small); color: var(--c-text-1); font-weight: var(--fw-semibold); }
.contact-info__link small { display: block; font-size: var(--fs-small); color: var(--c-text-2); margin-top: 0.15rem; overflow-wrap: break-word; word-break: break-word; }
.contact-form { padding: var(--space-4); min-width: 0; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}