:root{
  --bg:#0D1117;
  --bg-2:#0b0d0f;
  --panel:#2B3138;
  --accent:#D4AF37;
  --text:#E6E6E6;
  --muted:#9ea7ad;
  --heading:#FFFFFF;
  --max-width:1100px;
}
:root[data-theme='light']{
  --bg:#f6f7f9;
  --bg-2:#ffffff;
  --panel:#ffffff;
  --accent:#b8862b;
  --text:#2b2f33;
  --muted:#6b7176;
  --heading:#0b0d0f;
}
*{box-sizing:border-box}
.site-transition{transition:background .3s ease,color .25s ease}
body{font-family:Raleway,system-ui,Arial,sans-serif;margin:0;background:linear-gradient(180deg,var(--bg),var(--bg-2));color:var(--text);-webkit-font-smoothing:antialiased;transition:background .4s ease,color .25s ease}
.container{max-width:var(--max-width);margin:0 auto;padding:24px}
.site-header{background:transparent;padding:12px 0;position:sticky;top:0;z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.controls{display:flex;gap:10px;align-items:center}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.logo{height:200px;width:200px;object-fit:contain;border-radius:6px}
.brand-text{letter-spacing:4px;font-weight:700}
.main-nav{display:flex;align-items:center;gap:14px}
.main-nav a{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:6px}
.nav-toggle{display:none;background:transparent;border:0;color:var(--muted);font-size:20px}

.hero{padding:48px 0}
.hero-inner{display:flex;align-items:center;gap:40px}
.hero-copy{flex:1}
.hero h1{color:var(--heading);font-size:42px;margin:0 0 12px;line-height:1.02;animation:slideInUp .9s cubic-bezier(.2,.9,.2,1) both}
.hero .lead{color:var(--muted);margin:0 0 18px;opacity:.95;transform:translateY(6px);animation:fadeIn .9s .15s both}
.hero-visual{width:260px;display:flex;justify-content:center}
.hero-logo{max-width:220px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.6)}
.hero-ctas{display:flex;gap:12px;margin-top:18px}

.btn{display:inline-block;padding:10px 16px;border-radius:8px;background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.06);text-decoration:none}
.btn-primary{background:linear-gradient(90deg,var(--accent),#b88f35);color:#0b0b0b;border:0;font-weight:600}

/* Button micro-interactions */
.btn{transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.45)}

.services{padding:36px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:rgba(255,255,255,0.02);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.card{transform:translateY(6px);transition:transform .35s cubic-bezier(.2,.9,.2,1),box-shadow .35s}
.card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(0,0,0,.6)}
.card h3{color:var(--heading);margin-top:0}

.courses-preview{padding:36px 0}
.course-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.course{background:rgba(255,255,255,0.02);padding:16px;border-radius:10px}
.course{transition:transform .3s ease,box-shadow .3s ease}
.course:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.course h4{margin:0 0 8px;color:var(--heading)}
.link{color:var(--accent);text-decoration:none;font-weight:600}

.contact-section{padding:36px 0}
.contact-inner{display:grid;grid-template-columns:360px 1fr;gap:24px}
.contact-card{background:var(--panel);padding:18px;border-radius:10px}
.contact-card a{color:var(--accent)}
.contact-form{display:flex;flex-direction:column;gap:12px;padding:18px;background:rgba(255,255,255,0.02);border-radius:10px}
.contact-form label{display:flex;flex-direction:column;color:#c8c9cb;font-size:14px}
.contact-form input,.contact-form textarea{margin-top:8px;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--muted)}

.site-footer{padding:18px 0;background:transparent;border-top:1px solid rgba(255,255,255,0.03);margin-top:40px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;color:var(--muted)}

/* Features / Services preview */
.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.feature-card h3{margin-top:0;color:var(--heading)}

/* Testimonials */
.testimonials .cards{grid-template-columns:repeat(2,1fr)}
.testimonials .card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:20px;border-radius:12px}

/* Black outline for boxes across the site */
/* Applies a clear black border to common panel/card elements so they show a dark outline on all pages */
.card,
.course,
.contact-card,
.contact-form,
.feature-card,
.square-card,
.category-card,
.course-detail,
.testimonial-card{
  border: 1px solid rgba(0,0,0,0.95) !important;
}

/* Canvas background */
.bg-canvas{position:fixed;inset:0;z-index:-2;width:100%;height: 1000px;display:block}

/* Global watermark: uses img/Logo2.jpg as subtle background watermark above the canvas
   but behind page content. Adjust opacity in themes or reduce for mobile. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1; /* sits above canvas (-2) and behind regular content (auto 0) */
  background-image:url('img/Logo2.jpg');
  background-repeat:no-repeat;
  background-position:center top;
  /* Use the stronger watermark across all pages */
  background-size:82vw;
  opacity:0.32;
  mix-blend-mode:screen;
  filter:brightness(1.35) contrast(1.12) saturate(1.08);
  transition:opacity .25s ease, transform .25s ease, filter .25s ease;
}

@media (max-width:900px){
  body::after{background-size:98vw;opacity:0.22}
}

/* Slightly different treatment in light theme: keep subtle texture */
:root[data-theme='light'] body::after{
  opacity:0.12;
  mix-blend-mode:multiply;
  filter:brightness(1) contrast(1);
}

/* Theme toggle */
#themeToggle{padding:8px 10px;border-radius:8px;border:0;background:rgba(255,255,255,0.04);color:var(--muted)}

/* Course detail */
.course-detail{padding:30px 0;border-top:1px solid rgba(255,255,255,0.02)}
.course-detail h2{color:var(--heading)}
.course-detail{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.2,.9,.2,1),transform .8s cubic-bezier(.2,.9,.2,1)}
.reveal.in-view{opacity:1;transform:none}

/* Header hide/show */
.site-header{transition:transform .32s cubic-bezier(.2,.9,.2,1),box-shadow .32s}
.site-header.hidden{transform:translateY(-120%);box-shadow:none}
.site-header.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.65);backdrop-filter:blur(6px);background:linear-gradient(180deg,rgba(13,17,23,.6),rgba(13,17,23,.35))}

/* Keyframes */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes slideInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .reveal, .hero h1, .hero .lead, .card, .course{transition:none;animation:none}
}

.muted{color:var(--muted)}

/* Responsive */
@media(max-width:900px){
  .hero-inner{flex-direction:column;text-align:center}
  .hero-visual{width:180px}
  .cards, .course-cards, .feature-cards{grid-template-columns:1fr}
  .contact-inner{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .main-nav{display:none;position:absolute;right:20px;top:72px;background:rgba(10,10,10,0.6);padding:12px;border-radius:8px;flex-direction:column}
}

.container a{color:inherit}

/* Flying falcon overlay */
.falcon{position:fixed;top:8%;left:-20%;z-index:80;pointer-events:none;will-change:transform;opacity:0.98}

/* Falcon image styles
  Use a detailed PNG/JPG you uploaded as `img/falcon-full.png` or replace `img/falcon.svg`.
  The `.detailed` modifier expands the falcon for richer logos. */
.falcon img, .falcon svg{max-width:180px;width:auto;height:auto;display:block;filter:drop-shadow(0 10px 24px rgba(0,0,0,0.5));transform-origin:center center}
.falcon.detailed img, .falcon.detailed svg{max-width:260px}

@keyframes flyAcross{
  0%{transform:translateX(-30vw) translateY(0) rotate(-8deg) scale(.9)}
  25%{transform:translateX(20vw) translateY(-6vh) rotate(-4deg) scale(1)}
  50%{transform:translateX(60vw) translateY(0vh) rotate(6deg) scale(1.05)}
  75%{transform:translateX(100vw) translateY(-4vh) rotate(2deg) scale(.98)}
  100%{transform:translateX(140vw) translateY(0) rotate(8deg) scale(.95)}
}

.falcon.fly{animation:flyAcross 20s linear infinite}

@media (max-width:700px){
  .falcon img, .falcon svg{max-width:84px}
  .falcon{top:6%}
  .falcon.fly{animation-duration:14s}
  .falcon.detailed img, .falcon.detailed svg{max-width:140px}
}

@media (prefers-reduced-motion: reduce){
  .falcon{opacity:.9}
  .falcon.fly{animation:none;transform:translateX(30vw) translateY(0)}
}

/* Categories grid */
.category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:20px 0}
.category-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:28px;border-radius:14px;text-decoration:none;color:var(--muted);display:flex;align-items:center;justify-content:center;min-height:140px;transition:transform .28s ease,box-shadow .28s}
.category-card .cat-inner{max-width:420px;text-align:center}
.category-card h3{color:var(--white);margin:0 0 8px}
.category-card:hover{transform:translateY(-10px);box-shadow:0 20px 60px rgba(0,0,0,.6)}

/* Square course grid */
.square-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px}
.square-card{background:var(--panel);border-radius:12px;padding:20px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);text-decoration:none;min-height:140px;transition:transform .22s ease,box-shadow .22s}
.square-card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.square-card .small{display:block;color:#9ea7ad;margin-top:8px}

@media(max-width:900px){
  .category-grid{grid-template-columns:1fr}
  .square-grid{grid-template-columns:repeat(2,1fr)}
}