/* ===========================================================
   COOPILO TECHNOLOGIES — Global Stylesheet
   Brand tokens: Dark #18191D · Blue #007BFF · Red #DC3545 · Light #F8F9FA
   =========================================================== */

:root{
  --coopilo-dark: #18191D;
  --coopilo-dark-2: #212227;
  --coopilo-dark-3: #2A2B31;
  --coopilo-blue: #007BFF;
  --coopilo-blue-dim: #0A63C9;
  --coopilo-red: #DC3545;
  --coopilo-light: #F8F9FA;
  --coopilo-white: #FFFFFF;
  --coopilo-gray: #6B7280;
  --coopilo-border: rgba(255,255,255,0.09);
  --coopilo-border-dark: rgba(24,25,29,0.10);

  --grad-primary: linear-gradient(135deg, #007BFF 0%, #18191D 100%);
  --grad-blue-red: linear-gradient(135deg, #007BFF 0%, #DC3545 100%);
  --grad-dark-blue: linear-gradient(135deg, #18191D 0%, #007BFF 100%);
  --grad-red-dark: linear-gradient(135deg, #DC3545 0%, #18191D 100%);
  --grad-light: linear-gradient(135deg, #F8F9FA 0%, #FFFFFF 100%);

  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  font-family: var(--font-body);
  background: var(--coopilo-white);
  color: var(--coopilo-dark);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,.font-display{ font-family: var(--font-display); letter-spacing: -0.02em; }

::selection{ background: var(--coopilo-blue); color: var(--coopilo-white); }

:focus-visible{
  outline: 2px solid var(--coopilo-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Gradient text ---------- */
.text-gradient{
  background: var(--grad-blue-red);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-blue{
  background: linear-gradient(90deg, #4DA3FF, #007BFF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Section backgrounds ---------- */
.bg-dark{ background: var(--coopilo-dark); color: var(--coopilo-white); }
.bg-light{ background: var(--coopilo-light); }

.glow-hero{
  background:
    radial-gradient(circle at 14% 18%, rgba(0,123,255,0.30), transparent 38%),
    radial-gradient(circle at 84% 8%, rgba(220,53,69,0.14), transparent 32%),
    radial-gradient(circle at 70% 85%, rgba(0,123,255,0.14), transparent 40%),
    var(--coopilo-dark);
}
.glow-section{
  background:
    radial-gradient(circle at 85% 20%, rgba(0,123,255,0.20), transparent 35%),
    radial-gradient(circle at 10% 80%, rgba(220,53,69,0.10), transparent 30%),
    var(--coopilo-dark);
}
.grid-overlay{
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
}

/* ---------- Nav ---------- */
.navbar{
  backdrop-filter: blur(14px);
  background: rgba(24,25,29,0.72);
  border-bottom: 1px solid var(--coopilo-border);
}
.nav-link{ position: relative; color: rgba(255,255,255,0.82); }
.nav-link:hover{ color: var(--coopilo-white); }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background: var(--coopilo-blue); transition: width .25s ease;
}
.nav-link:hover::after{ width:100%; }

.mega-panel{
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-group:hover .mega-panel,
.nav-group:focus-within .mega-panel{
  opacity:1; visibility:visible; transform: translateY(0);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-display); font-weight:600; font-size:.95rem;
  padding: .85rem 1.6rem; border-radius: 8px;
  transition: all .2s ease; white-space: nowrap;
}
.btn-primary{
  background: var(--coopilo-blue); color:#fff;
}
.btn-primary:hover{
  background:#0A6FE0; box-shadow: 0 0 0 1px rgba(0,123,255,.4), 0 8px 30px -6px rgba(0,123,255,.55);
  transform: translateY(-1px);
}
.btn-secondary{
  background: transparent; color:#fff; border:1px solid rgba(255,255,255,.28);
}
.btn-secondary:hover{ border-color: var(--coopilo-blue); background: rgba(0,123,255,.08); }
.btn-secondary-dark{
  background: transparent; color: var(--coopilo-dark); border:1px solid rgba(24,25,29,.18);
}
.btn-secondary-dark:hover{ border-color: var(--coopilo-blue); color: var(--coopilo-blue); }
.btn-white{ background:#fff; color: var(--coopilo-dark); }
.btn-white:hover{ background:#EDEFF2; transform: translateY(-1px); }

/* ---------- Cards ---------- */
.card-light{
  background:#fff; border:1px solid rgba(24,25,29,.08); border-radius: 14px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-light:hover{
  transform: translateY(-4px); border-color: rgba(0,123,255,.35);
  box-shadow: 0 20px 40px -18px rgba(0,123,255,.25);
}
.card-dark{
  background: var(--coopilo-dark-2); border:1px solid rgba(255,255,255,.08); border-radius:14px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card-dark:hover{
  transform: translateY(-4px); border-color: rgba(0,123,255,.45);
  box-shadow: 0 20px 45px -18px rgba(0,123,255,.35);
}

.icon-badge{
  width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,123,255,.10); color: var(--coopilo-blue);
}

/* ---------- Path cards (hero split) ---------- */
.path-card{
  position:relative; overflow:hidden; border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  transition: border-color .25s ease, transform .25s ease;
}
.path-card:hover{ border-color: rgba(0,123,255,.55); transform: translateY(-3px); }
.path-card .arrow{ transition: transform .25s ease; }
.path-card:hover .arrow{ transform: translateX(6px); }

/* ---------- Process timeline ---------- */
.timeline-line{
  background: linear-gradient(90deg, rgba(0,123,255,.15), rgba(0,123,255,.85), rgba(0,123,255,.15));
}
.timeline-dot{
  width:12px; height:12px; border-radius:999px; background: var(--coopilo-blue);
  box-shadow: 0 0 0 5px rgba(0,123,255,.15);
}

/* ---------- Marquee (technology strip) ---------- */
.marquee-track{
  display:flex; width:max-content;
  animation: marquee 32s linear infinite;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}

/* ---------- Utility ---------- */
.eyebrow{
  font-family: var(--font-display); font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform: uppercase; color: var(--coopilo-blue);
}
.divider-glow{ height:1px; background: linear-gradient(90deg, transparent, rgba(0,123,255,.5), transparent); }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--coopilo-blue); color:#fff;
  padding:.75rem 1.25rem; z-index:100; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ===========================================================
   MOTION SYSTEM — preloader, scroll reveal, nav state, media
   =========================================================== */

/* ---------- Preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:200; background: var(--coopilo-dark);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .5s ease, visibility .5s ease;
}
#preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-mark{
  font-family: var(--font-display); font-weight:800; font-size:1.75rem; color:#fff;
  letter-spacing:-0.02em; display:flex; align-items:center; gap:.6rem;
}
.preloader-dot{
  width:9px; height:9px; border-radius:999px; background: var(--coopilo-blue);
  animation: preloader-pulse 1.1s ease-in-out infinite;
}
@keyframes preloader-pulse{
  0%, 100%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.6); opacity:.5; }
}
.preloader-bar{
  position:absolute; bottom:0; left:0; height:2px; width:100%;
  background: rgba(255,255,255,.08); overflow:hidden;
}
.preloader-bar::after{
  content:''; position:absolute; inset:0; width:40%;
  background: linear-gradient(90deg, transparent, #007BFF, transparent);
  animation: preloader-sweep 1.2s ease-in-out infinite;
}
@keyframes preloader-sweep{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce){
  #preloader{ transition: none; }
  .preloader-dot, .preloader-bar::after{ animation: none; }
}

/* ---------- Nav scroll state ---------- */
header.navbar{ transition: background .3s ease, box-shadow .3s ease, padding .3s ease; }
header.nav-scrolled{ box-shadow: 0 10px 30px -20px rgba(0,0,0,.6); }
header.nav-scrolled .h-20{ height: 4.25rem; transition: height .3s ease; }

/* ---------- Scroll reveal ---------- */
[data-reveal]{
  opacity:0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
}
[data-reveal].in-view{ opacity:1; transform: translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal-group] > *{ transition-delay: calc(var(--reveal-i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* ---------- Photo media ---------- */
.media-photo{
  position:relative; overflow:hidden; border-radius:14px;
}
.media-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .6s cubic-bezier(.16,.84,.44,1);
}
.media-photo:hover img{ transform: scale(1.06); }
.media-photo::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(24,25,29,0) 40%, rgba(24,25,29,.85) 100%);
}
.media-photo .media-caption{
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.25rem; z-index:2;
}
.media-photo-dark-card::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(24,25,29,.35) 0%, rgba(24,25,29,.92) 88%);
  z-index:1;
}
.media-photo-dark-card img{ position:absolute; inset:0; z-index:0; }
.media-photo-dark-card > *:not(img){ position:relative; z-index:2; }

/* ---------- Magnetic buttons ---------- */
.btn-magnetic{ will-change: transform; }

/* ---------- SVG diagram draw-in ---------- */
.diagram-line{
  stroke-dasharray: 1200; stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.6s cubic-bezier(.16,.84,.44,1);
}
.diagram-visible .diagram-line{ stroke-dashoffset: 0; }
.diagram-node{
  opacity:0; transform: scale(.6); transform-box: fill-box; transform-origin: center;
  transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.diagram-visible .diagram-node{ opacity:1; transform: scale(1); }
.diagram-node:nth-of-type(1){ transition-delay: .1s; }
.diagram-node:nth-of-type(2){ transition-delay: .35s; }
.diagram-node:nth-of-type(3){ transition-delay: .6s; }
.diagram-node:nth-of-type(4){ transition-delay: .85s; }
.diagram-node:nth-of-type(5){ transition-delay: 1.1s; }

/* ---------- Tech keyword marquee ---------- */
.marquee-wrap{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.marquee-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1.1rem; margin:0 .4rem; border-radius:999px;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  font-family: var(--font-display); font-size:.8rem; color: rgba(255,255,255,.75); white-space:nowrap;
}
.marquee-chip .dot{ width:5px; height:5px; border-radius:999px; background: var(--coopilo-blue); }