﻿/* Eagle60 â€” Highâ€‘tech dark theme */
:root{
  --bg:#0a0d12;        /* deep space */
  --panel:#0f141c;
  --muted:#7b8794;
  --text:#e6f0ff;
  --accent:#0aeef0;    /* cyan glow */
  --accent2:#7cf39b;   /* neon green */
  --ring: 0 0 0 2px rgba(10,238,240,.25);
  --shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 40px rgba(10,238,240,.06) inset;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1100px,92%);margin:auto}
.small{font-size:.9rem;color:var(--muted)}
.section{padding:72px 0}
.section-title{font-size:2rem;margin:0 0 22px;letter-spacing:.3px}
.logo{width:36px;height:36px}
.logo.sm{width:28px;height:28px}

/* Nav */
.site-nav{top:0;z-index:50;background:linear-gradient(180deg, rgba(10,13,18,.95), rgba(10,13,18,.7));backdrop-filter:saturate(150%) blur(6px);display:flex;align-items:center;justify-content:space-between;padding:10px 4%}
.site-nav .brand{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.3px}
.site-nav .brand em{font-weight:600;font-style:normal;color:var(--muted);margin-left:4px}
.site-nav nav{display:flex;gap:18px;align-items:center}
.site-nav nav a{opacity:.9;padding:8px 10px;border-radius:10px}
.site-nav nav a:hover{opacity:1;background:rgba(124,243,155,.08);box-shadow:var(--shadow)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:.25s;gap:8px;font-weight:700;letter-spacing:.3px}
.btn-primary{background:linear-gradient(90deg,var(--accent),#63f7ff);color:#041316;box-shadow:0 6px 30px rgba(10,238,240,.35)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 32px rgba(10,238,240,.45)}
.btn-outline{border-color:rgba(122,248,155,.6)}
.btn-outline:hover{background:rgba(124,243,155,.08)}
.btn-ghost{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}

/* Hero */
.hero{position:relative;min-height:78vh;display:grid;place-items:center;padding:80px 0 40px;overflow:hidden}
.hero-bg{position:absolute;inset:-10%;background:
 radial-gradient(600px 300px at 15% 20%, rgba(10,238,240,.13),transparent 60%),
 radial-gradient(800px 360px at 90% 10%, rgba(124,243,155,.15),transparent 60%),
 radial-gradient(700px 300px at 50% 85%, rgba(10,238,240,.1),transparent 60%);
 filter:saturate(120%) blur(10px);z-index:-1}
.hero-inner h1{font-size:clamp(2rem,5vw,4rem);line-height:1.05;margin:0 0 14px}
.hero-inner .accent{color:var(--accent)}
.hero .sub{max-width:760px;color:#cfe2ff;font-size:1.15rem}
.cta{display:flex;gap:12px;margin:20px 0 10px;flex-wrap:wrap}
.badges{list-style:none;display:flex;gap:12px;padding:0;margin:10px 0 0;flex-wrap:wrap}
.badges li{font-size:.9rem;color:#b9c9e6;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:8px 12px;border-radius:999px}
.scroll-indicator{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:.85rem;color:var(--muted);opacity:.8}

/* Cards / grid */
.grid{display:grid;gap:18px}
.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.card h3{margin:6px 0 8px}
.card .meta{color:#b9c9e6}
.card .meta{padding-left:18px}
.card .meta li{margin:6px 0}

/* Pictograms (simple CSS shapes) */
.icon{width:42px;height:42px;border-radius:10px;position:relative;box-shadow:inset 0 0 0 2px rgba(10,238,240,.65);}
.i-map::after{content:"";position:absolute;inset:10px;border-radius:6px;background:linear-gradient(135deg,var(--accent),transparent)}
.i-inspect::after{content:"";position:absolute;inset:10px;border-radius:50%;box-shadow:0 0 0 2px var(--accent)}
.i-media::after{content:"â–¶";position:absolute;inset:0;display:grid;place-items:center;color:var(--accent);font-size:18px}

/* Chips */
.chips{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.chip{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);padding:10px 14px;border-radius:999px;text-align:center}

/* Gallery */
.gallery{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.shot{margin:0;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.shot img{aspect-ratio:16/10;object-fit:cover}
.shot figcaption{padding:10px 12px;color:#bfd3f7}

/* Pricing */
.pricing{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.price-card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px;box-shadow:var(--shadow);position:relative}
.price-card.featured{outline:2px solid rgba(10,238,240,.6);box-shadow:0 0 40px rgba(10,238,240,.12), var(--shadow)}
.price{font-size:2.2rem;margin:4px 0 10px}
.price span{font-size:1.2rem}
.unit{font-size:1rem;color:#a7b7cf}

/* Form */
.form{margin-top:10px}
label{display:block;margin:10px 0 6px;color:#cfe2ff}
input,select,textarea{width:100%;padding:12px 14px;background:#0c1117;border:1px solid rgba(255,255,255,.1);border-radius:12px;color:#e6f0ff;box-shadow:var(--shadow);outline:none}
input:focus,select:focus,textarea:focus{box-shadow:var(--shadow), var(--ring);border-color:rgba(10,238,240,.5)}
.form .two{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:10px}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.08);padding:24px 0 40px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.site-footer .container{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.site-footer .left{display:flex;gap:10px;align-items:center}
.foot-links{display:flex;gap:12px}

/* Utilities */
.two{display:grid;gap:12px}

@media (max-width: 720px){
  .site-nav nav a{padding:8px}
}
/* TEMP: help locate the logo */
.logo{ outline: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.04); }
/* Logo tune-ups */
.logo{
  width: clamp(160px, 22vw, 320px);
  height:auto;
  margin: 8px 0 14px;
}
@media (max-width:640px){
  .logo{ width: clamp(150px,40vw,240px); margin: 6px 0 10px; }
}
/* Auto-swap logo based on prefers-color-scheme */
:root { --logo-url: url("assets/img/eagle60-logo.png"); }
@media (prefers-color-scheme: dark){
  :root { --logo-url: url("assets/img/eagle60-logo-light.png"); }
}
.logo{ content: var(--logo-url); }
.logo{ background: transparent; }

.logo{border:none!important;outline:none!important;box-shadow:none!important;}

/* === E60 LOGO OVERRIDES === */
.hero .logo, .logo {
  display: block !important;
  margin: 0 auto 16px !important;   /* center + a little space below */
  max-width: clamp(180px, 22vw, 340px) !important;
  height: auto !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  /* keep the nice depth; remove if you want it flat */
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.35));
}

/* in case any theme adds odd borders/underlines on images in hero/nav */
.hero img, header img {
  border: 0 !important;
  outline: 0 !important;
}

/* if the dotted orange line came from hr/divider, neutralize it */
.hero hr, .divider, .hero .divider {
  border: 0 !important;
  height: 0 !important;
}


/* E60-LOGO-HOTFIX (safe) */
.logo{
  display:block;
  margin: 0 auto 16px;
  max-width: clamp(180px,22vw,340px);
  height:auto;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

/* E60-KILL-TOP-BOX */
/* E60-KILL-TOP-BOX — force-remove any top borders/outlines/shadows/dotted dividers */
body > header:first-of-type,
body > header:first-of-type .container,
body > header:first-of-type *:first-child,
body > *:first-child,
header.hero,
header.hero .container,
header.hero::before,
header.hero::after,
body > header:first-of-type + hr,
body > hr:first-child {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
hr { border: 0 !important; height: 0 !important; }
.logo{
  display:block !important;
  margin: 0 auto 16px !important;
  max-width: clamp(180px,22vw,340px) !important;
  height:auto !important;
  border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important;
}
/* hard kill any debug/outline leftovers */
.logo, .hero .logo { border:none !important; outline:none !important; }
/* if some early container added borders, hide them */
.logo-probe, #logo-probe { display:none !important; }
/* hard kill any debug/outline leftovers */
.logo, .hero .logo { border:none !important; outline:none !important; }
.logo-probe, #logo-probe { display:none !important; }
/* Enforce clean hero logo */
.hero .logo{
  display:block; margin:0 auto 12px;
  width: clamp(180px,22vw,320px); height:auto;
  border:none !important; outline:none !important; box-shadow:none !important;
}
/* Kill any leftover debug styles */
.logo-probe, #logo-probe { display:none !important; }
hr { border:none !important; outline:none !important; }
* { outline-color: initial; }
/* If something injected orange borders anywhere, neutralize */
[class*="probe"], [id*="probe"] { border:none !important; outline:none !important; }

 /* Show only the hero copy of the logo */
 img[src$="eagle60-logo.png"]{ display:none !important; border:none !important; outline:none !important; }
 .hero img[src$="eagle60-logo.png"]{
   display:block !important; margin:0 auto 12px;
   width:clamp(180px,22vw,320px); height:auto;
   border:none !important; outline:none !important; box-shadow:none !important;
 }
 /* Kill rogue orange debug styles globally */
 *[style*="orange"]{ border:none !important; outline:none !important; }
 hr{ border:none !important; outline:none !important; }

 /* Show only the hero copy of the logo */
 img[src$="eagle60-logo.png"]{ display:none !important; border:none !important; outline:none !important; }
 .hero img[src$="eagle60-logo.png"]{
   display:block !important; margin:0 auto 12px;
   width:clamp(180px,22vw,320px); height:auto;
   border:none !important; outline:none !important; box-shadow:none !important;
 }
 /* Kill rogue orange debug styles globally */
 *[style*="orange"]{ border:none !important; outline:none !important; }
 hr{ border:none !important; outline:none !important; }

/* === Eagle60 one-true-hero-logo & anti-orange === */
img[src$="eagle60-logo.png"] {
  display: none !important; border: none !important; outline: none !important; box-shadow: none !important;
}
.hero img[src*="eagle60-logo.png"] {
  display: block !important;
  margin: 0 auto 12px !important;
  width: clamp(180px,22vw,320px) !important; height: auto !important;
  border: none !important; outline: none !important; box-shadow: none !important;
}
/* neutralize any leftover orange debug styling */
*[style*="orange"] { border: none !important; outline: none !important; box-shadow: none !important; }
hr { border: none !important; outline: none !important; box-shadow: none !important; }
/* optional: if an orphaned probe wrapper survived without styles, make it invisible */
[id*="probe"], [class*="probe"] { display: none !important; visibility: hidden !important; }

/* === Eagle60 hero logo (robust) === */
img[src*="eagle60-logo.png"] {
  border: none !important; outline: none !important; box-shadow: none !important;
}
/* allow only the hero logo to show; generic matches to cover different hero markups */
.hero .logo, header.hero .logo, .hero-header .logo, .hero-logo .logo {
  display: block !important;
  margin: 0 auto 12px !important;
  width: clamp(180px,22vw,320px) !important; height: auto !important;
}
/* if any global rule hides images, unhide this one explicitly */
picture.hero-logo .logo { visibility: visible !important; opacity: 1 !important; }

/* responsive 16:9 iframe container */
.embed-16x9{ position:relative; width:100%; aspect-ratio:16 / 9; background:#fff; border-radius:12px; overflow:hidden; }
.embed-16x9 iframe{ position:absolute; inset:0; width:100%; height:100%; }
