/* Flotech custom graphics & visual enhancements */

.icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.service-icon .icon { width: 30px; height: 30px; }
.service-icon.it .icon { color: #0284c7; }
.service-icon.gis .icon { color: #166534; }

.contact-icon .icon { width: 22px; height: 22px; color: #166534; }
.plugin-icon .icon { width: 26px; height: 26px; color: #fff; }

/* Topographic background pattern */
.topo-bg {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M0 100 Q50 80 100 100 T200 100 M0 130 Q50 110 100 130 T200 130 M0 70 Q50 50 100 70 T200 70 M0 160 Q50 140 100 160 T200 160' fill='none' stroke='%2314532d' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
}

.page-header .topo-bg { opacity: 0.08; }
.page-header .topo-bg path { stroke: #fff; }

/* Hero redesign */
.hero-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: orbFloat 8s ease-in-out infinite;
}

.hero-orb:nth-child(1) {
  width: 300px; height: 300px;
  background: rgba(132,204,22,0.18);
  top: 10%; left: -5%;
}

.hero-orb:nth-child(2) {
  width: 250px; height: 250px;
  background: rgba(14,165,233,0.15);
  bottom: 10%; right: -5%;
  animation-delay: -3s;
}

.hero-orb:nth-child(3) {
  width: 180px; height: 180px;
  background: rgba(20,83,45,0.25);
  top: 50%; left: 40%;
  animation-delay: -5s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -15px) scale(1.05); }
}

.hero-visual {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-composition {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(168px, 40%) 1fr;
  grid-template-rows: 1fr minmax(168px, 40%) 1fr;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-items: center;
  gap: 10px;
}

.hero-globe-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(14, 165, 233, 0.2),
    0 0 48px rgba(14, 165, 233, 0.25),
    0 0 96px rgba(132, 204, 22, 0.12);
}

.hero-globe-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 36px rgba(12, 61, 46, 0.55);
  pointer-events: none;
}

.hero-globe-gif {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: screen;
  opacity: 0.92;
}

.hero-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

.hero-logo-center {
  grid-column: 2;
  grid-row: 2;
  z-index: 3;
  width: 100%;
  max-width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo-center picture {
  display: block;
  width: 100%;
}

.hero-logo-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
  animation: logoFloat 6s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Hero floating widgets — symmetric grid placement */
.hero-widget {
  position: relative;
  z-index: 2;
  background: rgba(15, 23, 42, 0.88);
  border-radius: 12px;
  border: 1px solid rgba(132, 204, 22, 0.35);
  padding: 10px 12px;
  width: 100%;
  max-width: 148px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.hero-widget--tl {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  border-color: rgba(132, 204, 22, 0.4);
}

.hero-widget--tr {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  border-color: rgba(14, 165, 233, 0.4);
  max-width: 138px;
}

.hero-widget--bl {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  justify-self: end;
  border-color: rgba(14, 165, 233, 0.35);
  max-width: 148px;
  padding: 10px 12px 12px;
}

.hero-widget--br {
  grid-column: 3;
  grid-row: 3;
  align-self: start;
  justify-self: start;
  border-color: rgba(132, 204, 22, 0.35);
  max-width: 96px;
  padding: 8px;
  display: flex;
  justify-content: center;
}

.hero-widget__screen {
  background: rgba(20, 83, 45, 0.55);
  border-radius: 6px;
  padding: 6px;
  margin-bottom: 8px;
}

.hero-widget__screen svg {
  width: 100%;
  height: auto;
  display: block;
}

.hero-widget__bars {
  display: flex;
  gap: 6px;
}

.hero-widget__bars span {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.15);
}

.hero-widget__bars span:first-child {
  width: 40%;
  background: rgba(132, 204, 22, 0.5);
}

.hero-widget__bars span:last-child {
  flex: 1;
}

.hero-widget__dots {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.hero-widget__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.hero-widget__dots span:nth-child(1) { background: rgba(239, 68, 68, 0.7); }
.hero-widget__dots span:nth-child(2) { background: rgba(234, 179, 8, 0.7); }
.hero-widget__dots span:nth-child(3) { background: rgba(132, 204, 22, 0.7); }

.hero-widget__code {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hero-widget__code span {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
}

.hero-widget__code span.c-blue { width: 55%; background: rgba(14, 165, 233, 0.55); }
.hero-widget__code span.c-green { width: 45%; background: rgba(132, 204, 22, 0.45); }
.hero-widget__code span.indent { margin-left: 10px; width: 70%; }
.hero-widget__code span:not(.c-blue):not(.c-green):not(.indent) { width: 80%; }

.hero-widget__label {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #84cc16;
  margin-bottom: 6px;
}

.hero-widget__chart {
  width: 100%;
  height: auto;
  display: block;
}

.hero-widget__phone {
  width: 56px;
  height: 96px;
  background: rgba(20, 83, 45, 0.5);
  border-radius: 10px;
  border: 1px solid rgba(14, 165, 233, 0.25);
  position: relative;
  overflow: hidden;
}

.hero-widget__phone-notch {
  width: 14px;
  height: 14px;
  border: 1.5px solid #0ea5e9;
  border-radius: 50%;
  margin: 10px auto 8px;
}

.hero-widget__phone-btn {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(135deg, #84cc16, #0ea5e9);
  opacity: 0.75;
}

.hero-stats {
  display: flex;
  gap: 24px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.hero-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  backdrop-filter: blur(8px);
}

.hero-stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--lime-light);
  line-height: 1;
}

.hero-stat-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.3;
}

/* Service cards - refined */
.service-card {
  background: linear-gradient(160deg, #fff 0%, #f8fafc 100%);
}

.service-card::after {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(132,204,22,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.service-icon {
  position: relative;
  background: linear-gradient(135deg, rgba(14,165,233,0.08) 0%, rgba(132,204,22,0.08) 100%) !important;
  border: 1px solid rgba(20,83,45,0.08);
}

.service-icon::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(132,204,22,0.2), rgba(14,165,233,0.2));
  opacity: 0;
  transition: opacity 0.25s;
  z-index: -1;
}

.service-card:hover .service-icon::before { opacity: 1; }

/* Why section icons — legacy; see css/why-section.css */

/* Project thumbnails - illustrated mockups */
.project-thumb {
  height: 220px;
  overflow: hidden;
  position: relative;
  padding: 0 !important;
}

.project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,0.15) 0%, transparent 40%);
  pointer-events: none;
}

/* Blog thumbnails */
.blog-thumb {
  height: 200px;
  overflow: hidden;
  position: relative;
  padding: 0 !important;
}

.blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-thumb .blog-category {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 4px 12px;
  background: rgba(255,255,255,0.92);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: 2;
}

/* About visual panel — globe + logo float on hero background */
.about-visual {
  position: relative;
  background: transparent;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.about-visual-glow {
  position: absolute;
  width: min(320px, 70%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(132, 204, 22, 0.28) 0%,
    rgba(14, 165, 233, 0.18) 35%,
    transparent 68%);
  z-index: 1;
  animation: glowPulse 5s ease-in-out infinite;
}

.about-globe-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, 88%);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(14, 165, 233, 0.25),
    0 0 56px rgba(14, 165, 233, 0.3),
    0 0 110px rgba(132, 204, 22, 0.14);
}

.about-globe-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 28px rgba(7, 31, 20, 0.45);
  pointer-events: none;
  z-index: 1;
}

.about-globe-gif {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: screen;
  opacity: 0.95;
  position: relative;
  z-index: 0;
}

@keyframes glowPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.06); opacity: 1; }
}

.about-visual-card {
  position: relative;
  z-index: 3;
  width: 82%;
  max-width: 320px;
  padding: 28px 24px 22px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.about-visual-card img {
  width: 100%;
  height: auto;
  display: block;
}

.about-visual-logo {
  position: relative;
  z-index: 4;
  width: 58%;
  max-width: 240px;
  padding: 0;
}

.about-visual-logo picture {
  display: block;
  width: 100%;
}

.about-visual-logo img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}

.about-visual-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(132, 204, 22, 0.2);
  pointer-events: none;
  z-index: 1;
}

.about-visual-ring--inner {
  width: min(360px, 80%);
  aspect-ratio: 1;
  animation: ringPulse 5s ease-in-out infinite;
  z-index: 3;
}

.about-visual-ring--outer {
  width: min(420px, 92%);
  aspect-ratio: 1;
  border-color: rgba(14, 165, 233, 0.12);
  animation: ringPulse 5s ease-in-out infinite 1.2s;
  z-index: 1;
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.03); opacity: 1; }
}

.about-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
}

.about-pillar {
  padding: 20px;
  background: var(--light);
  border-radius: var(--radius);
  border-left: 3px solid var(--lime);
  position: relative;
}

.about-pillar h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 6px;
}

.about-pillar p { font-size: 0.85rem; color: var(--gray); }

/* Plugin icons refined */
.plugin-icon {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%) !important;
  box-shadow: 0 4px 16px rgba(20,83,45,0.2);
  border: 1px solid rgba(132,204,22,0.2);
}

/* Map section frame */
.map-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(132,204,22,0.25);
}

.map-frame::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 36px;
  background: rgba(15,23,42,0.85);
  z-index: 500;
  border-bottom: 1px solid rgba(132,204,22,0.2);
}

.map-frame-dots {
  position: absolute;
  top: 12px; left: 16px;
  display: flex;
  gap: 6px;
  z-index: 501;
}

.map-frame-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
}

.map-frame-dots span:nth-child(1) { background: #ef4444; opacity: 0.7; }
.map-frame-dots span:nth-child(2) { background: #eab308; opacity: 0.7; }
.map-frame-dots span:nth-child(3) { background: #84cc16; opacity: 0.7; }

.map-frame-label {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  z-index: 501;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#home-map { border: none; height: 420px; }

/* CTA decorative */
.cta-section {
  position: relative;
  overflow: hidden;
}

.cta-section .topo-bg { opacity: 0.06; }

.cta-grid-deco {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Page header enhancement */
.page-header {
  background: linear-gradient(160deg, var(--green) 0%, #0a2e1f 50%, var(--navy) 100%);
}

.page-header-deco {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--lime), var(--blue), var(--lime));
}

/* Service detail cards icon strip */
.service-detail-card {
  position: relative;
  padding-top: 36px;
}

.service-detail-card .detail-accent {
  position: absolute;
  top: 0; left: 28px; right: 28px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--lime), var(--blue));
  opacity: 0.6;
}

@media (max-width: 900px) {
  .hero-visual { min-height: 300px; }
  .hero-composition { max-width: 340px; }
  .hero-logo-center { max-width: 130px; }
  .hero-widget { max-width: 118px; padding: 8px 10px; }
  .hero-widget--tr { max-width: 112px; }
  .hero-widget--br { max-width: 80px; }
  .hero-widget__phone { width: 48px; height: 82px; }
  .about-visual { min-height: 360px; }
  .about-globe-wrap { width: min(320px, 88%); }
  .about-visual-logo { width: 62%; max-width: 200px; }
  .hero-stats { justify-content: center; }
  .about-pillars { grid-template-columns: 1fr; }
}