/* === BASE STYLES === */
html { scroll-behavior: smooth; }
body { font-family: 'Outfit', sans-serif; background: #f8fafc; color: #0f172a; overflow-x: hidden; margin: 0; }
.heading-font { font-family: 'Space Grotesk', sans-serif; }

/* === INTRO OVERLAY === */
#intro-overlay { position: fixed; inset: 0; z-index: 9999; background: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; animation: fadeOutIntro 0.8s ease-in-out 3.5s forwards; }
.intro-text { text-align: center; font-size: 2.5rem; font-weight: 900; background: linear-gradient(to right, #2563eb, #06b6d4); -webkit-background-clip: text; color: transparent; transform: translateY(100%); animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@media (min-width: 640px) { .intro-text { font-size: 3.5rem; } }
@media (min-width: 768px) { .intro-text { font-size: 6rem; } }
.intro-sub { text-align: center; opacity: 0; transform: translateY(20px); animation: fadeUp 0.5s ease 0.8s forwards; color: #64748b; letter-spacing: 4px; font-weight: 600; font-size: 0.875rem; margin-top: 10px; text-transform: uppercase; }
.loader-line { width: 0%; height: 4px; background: #2563eb; margin-top: 20px; animation: loadLine 3s ease-in-out forwards; border-radius: 2px; }

/* === ANIMATIONS === */
@keyframes slideUp { to { transform: translateY(0); } }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes loadLine { 0% { width: 0%; } 50% { width: 70%; } 100% { width: 200px; } }
@keyframes fadeOutIntro { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* === HERO FLYING ELEMENTS === */
.flying-char-container { position: relative; z-index: 20; display: flex; justify-content: center; align-items: center; height: 260px; overflow: hidden; }
@media (min-width: 640px) { .flying-char-container { height: 320px; } }
@media (min-width: 1024px) { .flying-char-container { height: 500px; } }
.flying-char { animation: flyFloat 4s ease-in-out infinite; filter: drop-shadow(0 20px 40px rgba(37,99,235,0.25)); width: 150px; height: auto; max-height: 100%; object-fit: contain; }
@media (min-width: 640px) { .flying-char { width: 220px; } }
@media (min-width: 1024px) { .flying-char { width: 420px; } }
@keyframes flyFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-25px) rotate(3deg); } }
.float-icon-box { position: absolute; background: white; padding: 0.75rem; border-radius: 1rem; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); z-index: 25; }

/* === PREMIUM SERVICES CARDS (FLEX FOR UNIFORM HEIGHT) === */
.service-card { 
    background: linear-gradient(145deg, #1e293b, #0f172a); 
    border: 1px solid rgba(26,86,219,0.2); 
    border-radius: 12px; 
    transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275); 
    position: relative; 
    overflow: hidden;
    display: flex; 
    flex-direction: column; 
    height: 100%; 
}
@media (min-width: 640px) { .service-card { border-radius: 24px; } }
.service-card p { flex-grow: 1; }
.service-card:hover { transform: translateY(-8px) scale(1.01); border-color: rgba(26,86,219,0.6); box-shadow: 0 20px 60px rgba(26,86,219,0.25); }
.service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(26,86,219,0.08), rgba(126,58,242,0.08)); z-index: -1; opacity: 0; transition: opacity 0.4s; }
.service-card:hover::before { opacity: 1; }
.service-card .icon-box { transition: transform 0.5s; background: rgba(37,99,235,0.1); }
.service-card:hover .icon-box { transform: rotateY(180deg) scale(1.1); background: #2563eb; color: white; }
.text-gradient { background: linear-gradient(to right,#1d4ed8,#06b6d4); -webkit-background-clip: text; color: transparent; }

/* === SPECIALIZED SERVICES GRID === */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; }
.special-card { background-color: #f4f9ff; border-radius: 12px; padding: 30px 15px; text-align: center; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; border: 1px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 160px; text-decoration: none; }
.special-card p { margin: 15px 0 0 0; font-size: 0.95rem; font-weight: 600; color: #4a5568; line-height: 1.4; transition: color 0.3s ease; }
.icon-wrapper { font-size: 2.5rem; color: var(--icon-color, #1a56db); transition: all 0.4s ease; animation: float 4s ease-in-out infinite; }
.special-card:hover { transform: translateY(-10px); background-color: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 15px 30px rgba(26, 86, 219, 0.15); }
.special-card:hover p { color: var(--icon-color); }
.special-card:hover .icon-wrapper { animation: iconPop 0.5s forwards; }

@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0px); } }
@keyframes iconPop { 0% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.3) rotate(-10deg); } 70% { transform: scale(1.1) rotate(10deg); } 100% { transform: scale(1.2) rotate(0deg); } }

@media (max-width: 768px) {
    .services-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .special-card { padding: 15px 5px; min-height: 100px; border-radius: 6px; }
    .icon-wrapper { font-size: 1.5rem; }
    .special-card p { font-size: 0.65rem; margin-top: 8px; }
    .special-card:hover { transform: translateY(-5px); }
}

/* === ORBIT WIDGET === */
.orbit-widget-container {width:100%;max-width:550px;aspect-ratio:1/1;margin:0 auto;position:relative;perspective:1200px;display:flex;justify-content:center;align-items:center;background:transparent;cursor:pointer;}
.orbit-widget-system {position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(20deg) rotateY(-5deg);transition:transform .1s ease-out;}
.main-logo {position:absolute;top:50%;left:50%;width:22%;height:22%;min-width:80px;min-height:80px;background:#fff;border-radius:50%;padding:0;box-shadow:0 10px 30px rgba(0,0,0,.15);transform:translate(-50%,-50%) translateZ(20px);display:flex;justify-content:center;align-items:center;z-index:50;}
.main-logo img {width:130%;height:130%;object-fit:contain;}
.orbit-ring,.element-orbit {position:absolute;top:50%;left:50%;border-radius:50%;}
.orbit-ring {border:1.5px solid rgba(103,58,183,.12);transform:translate(-50%,-50%);pointer-events:none;}
.ring-1,.o-inner {width:35%;height:35%;}
.ring-2,.o-mid1 {width:55%;height:55%;}
.ring-3,.o-mid2 {width:75%;height:75%;}
.ring-4,.o-outer {width:95%;height:95%;}
.element-orbit {animation:rotateSystem linear infinite;transform-style:preserve-3d;}
@keyframes rotateSystem {from{transform:translate(-50%,-50%) rotateZ(0deg);}to{transform:translate(-50%,-50%) rotateZ(360deg);}}
.pos-wrapper {position:absolute;width:0;height:0;transform-style:preserve-3d;}
.pos-r1-1 {top:0%;left:50%;}.pos-r1-2 {top:50%;left:100%;}.pos-r1-3 {top:100%;left:50%;}.pos-r1-4 {top:50%;left:0%;}
.pos-r2-1 {top:0%;left:50%;}.pos-r2-2 {top:34%;left:97%;}.pos-r2-3 {top:90%;left:79%;}.pos-r2-4 {top:90%;left:21%;}.pos-r2-5 {top:34%;left:3%;}
.pos-r3-1 {top:0%;left:50%;}.pos-r3-2 {top:34%;left:97%;}.pos-r3-3 {top:90%;left:79%;}.pos-r3-4 {top:90%;left:21%;}.pos-r3-5 {top:34%;left:3%;}
.pos-r4-1 {top:0%;left:50%;}.pos-r4-2 {top:75%;left:93%;}.pos-r4-3 {top:75%;left:7%;}
.floating-element {position:absolute;animation:counterRotate linear infinite;transform-style:preserve-3d;box-shadow:0 6px 15px rgba(0,0,0,.15);border-radius:50%;overflow:hidden;background:#fff;}
@keyframes counterRotate {from{transform:rotateZ(0deg) rotateY(5deg) rotateX(-20deg);}to{transform:rotateZ(-360deg) rotateY(5deg) rotateX(-20deg);}}
.social-icon {width:38px;height:38px;top:-19px;left:-19px; display: flex; align-items: center; justify-content: center; padding: 4px;}
.social-icon img,.robot-icon img {width:100%;height:100%;object-fit:contain;}
.robot-icon {width:45px;height:45px;top:-22.5px;left:-22.5px; background: transparent; box-shadow: none;}
.speed-1 {animation-duration:18s;}.speed-2 {animation-duration:26s;}.speed-3 {animation-duration:34s;}.speed-4 {animation-duration:42s;}

@media (max-width: 600px) {
    .main-logo {min-width: 60px; min-height: 60px;}
    .social-icon {width: 28px; height: 28px; top: -14px; left: -14px;}
    .robot-icon {width: 34px; height: 34px; top: -17px; left: -17px;}
}

/* Modal and tools specific CSS */
.service-modal { animation: modalPop 0.4s cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes modalPop { from { opacity: 0; transform: scale(0.88) translateY(40px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.timeline-step { position: relative; }
.timeline-step:not(:last-child):after { content: ''; position: absolute; left: 28px; top: 52px; bottom: -18px; width: 3px; background: #e2e8f0; }

@media (max-width: 640px) {
    .service-modal { border-radius: 20px !important; }
    .service-modal .text-lg { font-size: 0.95rem !important; line-height: 1.4 !important; }
    .service-modal .text-xl { font-size: 1.05rem !important; }
    .service-modal .timeline-step { padding: 12px !important; gap: 12px !important; }
    .service-modal .timeline-step .w-12 { width: 36px !important; height: 36px !important; font-size: 0.95rem !important; }
    .service-modal .timeline-step .text-lg { font-size: 0.95rem !important; }
    .service-modal details { padding: 12px 14px !important; }
    .service-modal .bg-emerald-50, .service-modal .bg-amber-50 { padding: 10px 12px !important; }
}

/* === ISOMETRIC SOCIAL ICONS === */
.iso-social {
  position: relative;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
}
.iso-social li {
  position: relative;
  width: 60px;
  height: 60px;
  background: var(--clr);
  transform: rotate(-30deg) skew(25deg);
  box-shadow: -20px 20px 10px rgba(0,0,0,0.3);
  transition: 0.5s;
  cursor: pointer;
}
.iso-social li:hover {
  transform: rotate(-30deg) skew(25deg) translate(15px, -15px);
  box-shadow: -35px 35px 20px rgba(0,0,0,0.4);
}
.iso-social li::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -20px;
  height: 100%;
  width: 20px;
  background: #cbd5e1; /* slate-300 */
  transition: 0.5s;
  transform: skewY(-45deg);
}
.iso-social li::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -10px;
  height: 20px;
  width: 100%;
  background: #94a3b8; /* slate-400 */
  transition: 0.5s;
  transform: skewX(-45deg);
}
.iso-social li a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32px;
  text-decoration: none;
  transition: 0.5s;
}

@media (max-width: 640px) {
  .iso-social { gap: 20px; }
  .iso-social li { width: 45px; height: 45px; }
  .iso-social li::before { top: 8px; left: -16px; width: 16px; }
  .iso-social li::after { bottom: -16px; left: -8px; height: 16px; }
  .iso-social li a { font-size: 24px; }
}

.iso-social-sm { gap: 18px !important; flex-wrap: nowrap !important; }
.iso-social-sm li { width: 35px !important; height: 35px !important; }
.iso-social-sm li::before { top: 6px !important; left: -12px !important; width: 12px !important; }
.iso-social-sm li::after { bottom: -12px !important; left: -6px !important; height: 12px !important; }
.iso-social-sm li a { font-size: 18px !important; }