/* =========================================================
   For4 Technologies LLC — Premium Corporate Site
   Custom stylesheet (works alongside Tailwind CDN utilities)
   ========================================================= */

:root{
  --c-primary:#0A1931;
  --c-secondary:#1F6BFF;
  --c-accent:#00C2FF;
  --c-white:#FFFFFF;
  --c-bg:#F7FAFC;
  --c-dark-bg:#081321;
  --shadow-glow: 0 0 40px rgba(0,194,255,.25);
}

*{ scroll-behavior: smooth; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;
  background:var(--c-bg);
  color:var(--c-primary);
  overflow-x:hidden;
}

h1,h2,h3,h4,.font-display{
  font-family:'Space Grotesk','Inter',sans-serif;
  letter-spacing:-0.02em;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--c-dark-bg); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--c-secondary),var(--c-accent));
  border-radius:10px;
}

/* ---------- Selection ---------- */
::selection{ background:var(--c-accent); color:var(--c-dark-bg); }

/* ---------- Loader ---------- */
#site-loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--c-dark-bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
#site-loader.loaded{ opacity:0; visibility:hidden; }
.loader-ring{
  width:64px;height:64px;border-radius:50%;
  border:3px solid rgba(0,194,255,.15);
  border-top-color:var(--c-accent);
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Glass / Cards ---------- */
.glass{
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.12);
}
.glass-light{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(10,25,49,.08);
}
.card-premium{
  position:relative;
  border-radius:1.25rem;
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .45s ease;
}
.card-premium:hover{
  transform:translateY(-8px);
  box-shadow:0 25px 60px -15px rgba(31,107,255,.35), var(--shadow-glow);
}

/* Glow border accent on hover */
.glow-border{
  position:relative;
}
.glow-border::before{
  content:'';
  position:absolute; inset:-1px;
  border-radius:inherit;
  background:linear-gradient(135deg,var(--c-secondary),var(--c-accent));
  opacity:0; z-index:-1;
  transition:opacity .4s ease;
  filter:blur(10px);
}
.glow-border:hover::before{ opacity:.55; }

/* ---------- Navigation ---------- */
#site-nav{
  transition:background-color .4s ease, box-shadow .4s ease, padding .4s ease;
}
#site-nav.scrolled{
  background:rgba(8,19,33,.85);
  backdrop-filter:blur(16px);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5);
}
.nav-link{
  position:relative;
  color:rgba(255,255,255,.78);
  transition:color .3s ease;
}
.nav-link::after{
  content:'';
  position:absolute; left:0; bottom:-6px;
  width:0; height:2px;
  background:linear-gradient(90deg,var(--c-secondary),var(--c-accent));
  transition:width .35s ease;
}
.nav-link:hover, .nav-link.active{ color:#fff; }
.nav-link:hover::after, .nav-link.active::after{ width:100%; }

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.9rem 1.9rem;
  border-radius:.85rem;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.01em;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, background .35s ease;
  overflow:hidden;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{
  background:linear-gradient(135deg,var(--c-secondary),var(--c-accent));
  color:#fff;
  box-shadow:0 10px 30px -8px rgba(31,107,255,.55);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -8px rgba(0,194,255,.6); }
.btn-outline{
  border:1.5px solid rgba(255,255,255,.35);
  color:#fff;
  background:rgba(255,255,255,.04);
}
.btn-outline:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-3px); }
.btn-dark{
  border:1.5px solid rgba(10,25,49,.2);
  color:var(--c-primary);
  background:rgba(10,25,49,.04);
}
.btn-dark:hover{ background:var(--c-primary); color:#fff; transform:translateY(-3px); }

.btn-shine::before{
  content:'';
  position:absolute; top:0; left:-75%;
  width:50%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-20deg);
  transition:left .7s ease;
}
.btn-shine:hover::before{ left:125%; }

/* ---------- Hero ---------- */
#hero{
  position:relative;
  min-height:100vh;
  background:radial-gradient(ellipse at 20% 0%, rgba(31,107,255,.35), transparent 55%),
             radial-gradient(ellipse at 85% 15%, rgba(0,194,255,.25), transparent 50%),
             linear-gradient(160deg,#081321 0%, #0A1931 55%, #0d234a 100%);
  overflow:hidden;
}
#hero-canvas, #hero-network{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1;
}
.hero-grid-overlay{
  position:absolute; inset:0; z-index:1;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at center, black 40%, transparent 80%);
}
.hero-content{ position:relative; z-index:5; }

.eyebrow-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem 1rem;
  border-radius:999px;
  font-size:.78rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase;
}

.hero-headline .word{ display:inline-block; overflow:hidden; }

.gradient-text{
  background:linear-gradient(100deg,#ffffff 10%, var(--c-accent) 55%, var(--c-secondary) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.scroll-indicator{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:5; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:rgba(255,255,255,.55); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
}
.scroll-mouse{
  width:24px; height:38px; border:2px solid rgba(255,255,255,.4); border-radius:14px;
  position:relative;
}
.scroll-mouse::before{
  content:''; position:absolute; top:6px; left:50%; width:4px; height:8px;
  background:var(--c-accent); border-radius:2px; transform:translateX(-50%);
  animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{ 0%{opacity:1; top:6px;} 70%{opacity:0; top:20px;} 100%{opacity:0; top:6px;} }

/* Floating shield / particles util */
.floating{ animation:floatY 6s ease-in-out infinite; }
.floating-slow{ animation:floatY 9s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-16px);} }

/* ---------- Section headings ---------- */
.section-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.75rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--c-secondary);
}
.section-tag::before{
  content:''; width:22px; height:2px; background:linear-gradient(90deg,var(--c-secondary),var(--c-accent));
  display:inline-block;
}

/* ---------- Stat counters ---------- */
.stat-number{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  background:linear-gradient(135deg,var(--c-secondary),var(--c-accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Reveal animation base ---------- */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:scale(.92); transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.reveal-scale.in-view{ opacity:1; transform:scale(1); }
.stagger > * { transition-delay: calc(var(--i,0) * 90ms); }

/* ---------- Service cards ---------- */
.service-icon{
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(31,107,255,.15), rgba(0,194,255,.15));
  color:var(--c-secondary);
  font-size:1.4rem;
  transition:transform .4s ease, background .4s ease, color .4s ease;
}
.card-premium:hover .service-icon{
  background:linear-gradient(135deg,var(--c-secondary),var(--c-accent));
  color:#fff;
  transform:rotate(-8deg) scale(1.08);
}

/* ---------- Device Mockups (VeilGuard) ---------- */
.device-wrap{ perspective:1600px; }
.device{
  position:relative;
  transform-style:preserve-3d;
  transition:transform .6s ease;
}
.laptop-shell{
  width:min(560px,90vw);
  border-radius:16px 16px 4px 4px;
  background:linear-gradient(160deg,#132445,#0A1931);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.6);
  padding:14px 14px 0;
}
.laptop-base{
  height:14px;
  background:linear-gradient(160deg,#1a2c52,#0d1a34);
  border-radius:0 0 10px 10px;
  margin:0 -14px;
  box-shadow:0 20px 30px -10px rgba(0,0,0,.5);
}
.screen{
  border-radius:10px;
  background:radial-gradient(circle at 30% 20%, rgba(31,107,255,.35), transparent 55%),
             linear-gradient(160deg,#0d1e3d,#081321);
  aspect-ratio:16/10;
  overflow:hidden; position:relative;
  border:1px solid rgba(255,255,255,.06);
}
.vpn-ui-topbar{ display:flex; align-items:center; gap:6px; padding:10px 14px; }
.vpn-ui-dot{ width:8px; height:8px; border-radius:50%; }

.phone-shell{
  width:190px;
  border-radius:34px;
  background:linear-gradient(160deg,#132445,#0A1931);
  border:1px solid rgba(255,255,255,.1);
  padding:10px;
  box-shadow:0 30px 60px -15px rgba(0,0,0,.6);
}
.phone-screen{
  border-radius:24px;
  aspect-ratio:9/19;
  background:radial-gradient(circle at 50% 15%, rgba(0,194,255,.3), transparent 55%),
             linear-gradient(160deg,#0d1e3d,#081321);
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
.tablet-shell{
  width:230px;
  border-radius:22px;
  background:linear-gradient(160deg,#132445,#0A1931);
  border:1px solid rgba(255,255,255,.1);
  padding:10px;
  box-shadow:0 30px 60px -15px rgba(0,0,0,.55);
}
.tablet-screen{
  border-radius:14px;
  aspect-ratio:3/4;
  background:radial-gradient(circle at 50% 10%, rgba(31,107,255,.3), transparent 55%),
             linear-gradient(160deg,#0d1e3d,#081321);
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}

.vpn-connect-btn{
  width:92px;height:92px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--c-accent), var(--c-secondary));
  box-shadow:0 0 0 6px rgba(0,194,255,.12), 0 0 40px rgba(0,194,255,.55);
  display:flex;align-items:center;justify-content:center;color:#fff;
  animation:pulseGlow 2.6s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 0 0 6px rgba(0,194,255,.12), 0 0 30px rgba(0,194,255,.45); }
  50%{ box-shadow:0 0 0 12px rgba(0,194,255,.08), 0 0 55px rgba(0,194,255,.7); }
}
.vpn-line{ height:6px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.vpn-line span{ display:block; height:100%; background:linear-gradient(90deg,var(--c-secondary),var(--c-accent)); border-radius:6px; }

/* ---------- Ecosystem store badges ---------- */
.store-badge{
  display:flex; align-items:center; gap:.85rem;
  padding:1.1rem 1.2rem;
  border-radius:1rem;
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.store-badge:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 20px 45px -12px rgba(0,194,255,.35); }
.store-badge .store-icon{
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(31,107,255,.18),rgba(0,194,255,.18));
  color:var(--c-secondary); font-size:1.35rem;
}

/* ---------- Timeline (Why Choose Us) ---------- */
.timeline-line{
  position:absolute; top:0; bottom:0; left:24px;
  width:2px;
  background:linear-gradient(180deg,var(--c-secondary),var(--c-accent));
  opacity:.35;
}
@media(min-width:1024px){
  .timeline-line{ left:50%; }
}
.timeline-dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--c-accent);
  box-shadow:0 0 0 6px rgba(0,194,255,.18), 0 0 20px rgba(0,194,255,.6);
}

/* ---------- Founder ---------- */
.founder-frame{
  position:relative; border-radius:1.5rem; overflow:hidden;
  box-shadow:0 40px 80px -20px rgba(10,25,49,.5);
}
.founder-frame::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(8,19,33,.85) 100%);
}
.founder-frame::before{
  content:''; position:absolute; inset:-2px; z-index:-1; border-radius:inherit;
  background:linear-gradient(135deg,var(--c-secondary),var(--c-accent));
}

/* ---------- Tech stack icons ---------- */
.tech-chip{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  padding:1.3rem .8rem;
  border-radius:1rem;
  transition:transform .4s ease, background .4s ease;
}
.tech-chip:hover{ transform:translateY(-6px); }
.tech-chip i{ font-size:1.7rem; color:var(--c-secondary); transition:color .4s ease, transform .4s ease; }
.tech-chip:hover i{ color:var(--c-accent); transform:scale(1.15); }

/* ---------- Security section ---------- */
#security{
  background:radial-gradient(ellipse at 80% 20%, rgba(31,107,255,.25), transparent 55%),
             linear-gradient(160deg,#081321,#0A1931 70%);
}
.shield-core{
  position:relative; width:260px; height:260px; margin:0 auto;
}
.shield-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(0,194,255,.25);
  animation:ringSpin 14s linear infinite;
}
.shield-ring.r2{ inset:-30px; animation-duration:20s; animation-direction:reverse; border-style:dashed; }
.shield-ring.r3{ inset:-60px; animation-duration:26s; opacity:.5; }
@keyframes ringSpin{ to{ transform:rotate(360deg); } }

/* ---------- Contact ---------- */
.map-placeholder{
  position:relative; border-radius:1.25rem; overflow:hidden; min-height:340px;
  background:
    radial-gradient(circle at 30% 40%, rgba(31,107,255,.35), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(0,194,255,.25), transparent 45%),
    linear-gradient(160deg,#0d1e3d,#081321);
}
.map-grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:32px 32px;
}
.map-pin{
  position:absolute; width:16px;height:16px;border-radius:50%;
  background:var(--c-accent); box-shadow:0 0 0 0 rgba(0,194,255,.6);
  animation:pinPulse 2s ease-out infinite;
}
@keyframes pinPulse{
  0%{ box-shadow:0 0 0 0 rgba(0,194,255,.55); }
  70%{ box-shadow:0 0 0 22px rgba(0,194,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,194,255,0); }
}

.form-input{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:.75rem;
  padding:.85rem 1rem;
  color:#fff;
  transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.form-input::placeholder{ color:rgba(255,255,255,.4); }
.form-input:focus{
  outline:none; border-color:var(--c-accent);
  box-shadow:0 0 0 3px rgba(0,194,255,.18);
  background:rgba(255,255,255,.09);
}

/* ---------- Footer ---------- */
footer a{ transition:color .3s ease, opacity .3s ease; }
.social-icon{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  transition:transform .35s ease, background .35s ease, color .35s ease;
}
.social-icon:hover{ transform:translateY(-4px); background:linear-gradient(135deg,var(--c-secondary),var(--c-accent)); }

/* ---------- Utility ---------- */
.bg-noise{
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:3px 3px;
}
.mouse-glow{
  position:fixed; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,194,255,.12), transparent 70%);
  pointer-events:none; z-index:2; transform:translate(-50%,-50%);
  transition:opacity .3s ease; opacity:0;
}

/* animated gradient border card */
.gradient-border{
  border-radius:1.25rem;
  background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
}

@media (max-width: 767px){
  .laptop-shell{ transform:scale(.92); }
}