/* Farnamatic Technology — baseline styles */
:root{
  --bg:#0c0f14;
  --bg-elev:#11161d;
  --text:#e9eef5;
  --muted:#afbccd;
  --brand:#4cafef; /* Blue accent for brand text */
  --card:#0f141b;
  --border:#1d2530;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
  color:var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, #142033 0%, rgba(20,32,51,0) 60%),
              radial-gradient(1000px 500px at 100% 10%, #0e1624 0%, rgba(14,22,36,0) 60%),
              var(--bg);
}

.container{max-width:1100px; margin:0 auto; padding:0 20px}

.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(12,15,20,.7);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; padding:12px 0;
}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text)}
.brand-logo{width:36px; height:36px; border-radius:8px; object-fit:cover; box-shadow:var(--shadow)}
.brand-name{font-weight:700; letter-spacing:.2px; color:var(--brand)}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--muted); text-decoration:none}
.nav a:hover{color:var(--text)}
.btn{display:inline-block; padding:.7rem 1rem; border-radius:10px; border:1px solid var(--border); text-decoration:none}
.btn-primary{background:var(--brand); color:#001528; font-weight:700; border-color:transparent}
.btn-secondary{background:transparent; color:var(--text)}
.menu-toggle{display:none; background:transparent; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:.4rem .6rem}

.hero{padding:72px 0 56px; border-bottom:1px solid var(--border)}
.hero-inner{display:grid; grid-template-columns: 140px 1fr; gap:28px; align-items:center}
.hero-media img{width:140px; height:140px; object-fit:cover; border-radius:24px; box-shadow:var(--shadow)}
.hero-copy h1{margin:0 0 8px 0; font-size: clamp(28px, 5vw, 48px); line-height:1.1}
.hero-copy .accent{color:var(--brand)}
.tagline{color:var(--muted); max-width: 70ch}
.hero-cta{margin-top:18px; display:flex; gap:12px; flex-wrap:wrap}

.section{padding:56px 0}
.section.alt{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.section-title{margin:0 0 24px; font-size: clamp(22px, 3.5vw, 32px)}

.cards{display:grid; grid-template-columns: repeat(4, 1fr); gap:18px}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.card h3{margin-top:0; margin-bottom:8px; font-size:20px}
.card p{margin-top:0; color:var(--muted)}
.card ul{margin:10px 0 0 18px; color:var(--muted)}

.stats{display:flex; gap:18px; flex-wrap:wrap; margin-top:16px}
.stat{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px; min-width:160px; text-align:center}
.stat strong{display:block; font-size:20px; color:var(--brand)}
.stat span{color:var(--muted); font-size:14px}

.list-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:18px}
.list-item{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px}
.list-item h4{margin:0 0 6px 0}
.list-item p{margin:0; color:var(--muted)}

.contact{display:flex; flex-direction:column; gap:10px}
.contact-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.text-link{color:var(--muted); text-decoration:underline}
.text-link:hover{color:var(--text)}

.site-footer{border-top:1px solid var(--border); padding:22px 0; background:#0a0d12}
.footer-inner{display:grid; grid-template-columns: 1.3fr .8fr 1fr; gap:16px; align-items:center}
.footer-brand{display:flex; gap:10px; align-items:center}
.footer-brand img{width:36px; height:36px; border-radius:8px; object-fit:cover}
.footer-title{font-weight:700}
.footer-sub{color:var(--muted); font-size:14px}
.footer-links{display:flex; gap:14px; flex-wrap:wrap}
.footer-links a{color:var(--muted); text-decoration:none}
.footer-links a:hover{color:var(--text)}
.footer-copy{color:var(--muted); font-size:14px; text-align:right}

@media (max-width: 880px){
  .hero-inner{grid-template-columns: 1fr; text-align:center}
  .hero-media img{margin:0 auto}
  .cards{grid-template-columns: 1fr 1fr}
  .list-grid{grid-template-columns: 1fr}
  .footer-inner{grid-template-columns:1fr}
  .footer-copy{text-align:left}
  .menu-toggle{display:inline-block}
  .nav{display:none}
  .nav.open{display:flex; position:absolute; top:60px; right:20px; background:var(--bg-elev); padding:10px; border:1px solid var(--border); border-radius:12px; flex-direction:column}
}

@media (max-width: 520px){
  .cards{grid-template-columns: 1fr}
}


/* Horizontal 3D wireframe wave background */
.hero{ position:relative; overflow:hidden; }
.hero-wave-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
#wave3d{ width:100%; height:100%; display:block; }
.hero .container, .hero-inner{ position:relative; z-index:1; }



/* Topbar wave */
header { position: relative; overflow: hidden; }
.topbar-wave-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#wave3d { width: 100%; height: 100%; display: block; }
header nav, header .container { position: relative; z-index: 1; }



/* ==== Animated gradient waved bar in header (cyan → purple), subtle and readable ==== */
.site-header{ position: sticky; top: 0; z-index: 30; overflow: hidden; }

.header-inner, .site-header .container, .site-header nav, .brand { position: relative; z-index: 1; }


  /* 100% { background-position: 100% 50%; }
} */



/* Elegant gradient ribbon topbar */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  overflow: hidden;
  background-color: #0d0d2b; /* deep background */
}

.header-inner, .site-header .container, .site-header nav, .brand {
  position: relative;
  z-index: 1;
}


  /* 50% { transform: translateX(-25px) translateY(-3px); }
  100% { transform: translateX(0) translateY(0); }
} */



/* Inline SVG gradient ribbon in top bar (Chrome-safe) */
.site-header{ position: sticky; top:0; z-index:30; overflow:hidden; background:#0d0d2b; }
.site-header .header-inner, .site-header .container, .site-header nav, .brand{ position:relative; z-index:1; }
.ribbon-wrap{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ribbon{ position:absolute; top:0; left:-5%; width:110%; height:100%; opacity:.5; filter:saturate(115%); animation: ribbonDrift 18s ease-in-out infinite alternate; }
@keyframes ribbonDrift{
  0% { transform: translateX(0) translateY(0); }
  50%{ transform: translateX(-3%) translateY(-2px); }
  100%{ transform: translateX(0) translateY(0); }
}



/* Ensure SVG transforms animate visibly */
.ribbon { 
  opacity: .55; 
  will-change: transform; 
  transform-box: fill-box; 
  transform-origin: 50% 50%;
  animation: ribbonDrift 12s ease-in-out infinite alternate;
}
@keyframes ribbonDrift{
  0%   { transform: translateX(0%) translateY(0px); }
  50%  { transform: translateX(-5%) translateY(-6px); }
  100% { transform: translateX(0%) translateY(0px); }
}
@media (prefers-reduced-motion: reduce){
  .ribbon { animation: none; }
}



/* === Topbar twin ribbon waves === */
.site-header { position: sticky; top: 0; z-index: 30; overflow: hidden; }
#topbarWave{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45; /* keep nav readable */
  filter: saturate(115%);
}
.site-header .container, .site-header .header-inner, .site-header nav, .brand { position: relative; z-index: 1; }


/* Ensure the canvas always fills the header */
#topbarWave{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block; pointer-events:none; z-index:0; }
.site-header .container, .site-header .header-inner, .site-header nav, .brand{ position:relative; z-index:1; }

/* --- Mobile nav fix + faded waves layering --- */
.menu-toggle { position: relative; z-index: 6; }
.site-header .container, .site-header .header-inner, .site-header nav, .brand { position: relative; z-index: 5; }

@media (max-width: 880px){
  .site-header { overflow: visible; } /* allow dropdown to extend below bar */
  .nav { display: none; }
  .nav.open {
    display: flex;
    position: absolute;
    top: 100%;
    right: 16px;
    background: var(--bg-elev, rgba(16,22,34,.95));
    border: 1px solid var(--border, #1a2230);
    border-radius: 12px;
    padding: 10px;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    z-index: 7;
  }
  .nav.open a { color: var(--text, #e9eef5); text-decoration: none; }
}

/* Mobile nav: keep waves behind, make dropdown visible */
#topbarWave { z-index: 0; pointer-events: none; }

.menu-toggle {
  display: none;
  position: relative;
  z-index: 6;
  background: transparent;
  border: 1px solid var(--border, #1a2230);
  color: var(--text, #e9eef5);
  border-radius: 10px;
  padding: .45rem .6rem;
  touch-action: manipulation; /* helps iOS */
}

.site-header .container,
.site-header .header-inner,
.site-header nav,
.brand { position: relative; z-index: 5; }

@media (max-width: 880px){
  .menu-toggle { display: inline-block; }
  .site-header { overflow: visible; } /* allow dropdown to extend */
  .nav { display: none; }
  .nav.open {
    display: flex;
    position: absolute;
    top: 100%;
    right: 16px;
    background: var(--bg-elev, rgba(16,22,34,.96));
    border: 1px solid var(--border, #1a2230);
    border-radius: 12px;
    padding: 10px;
    flex-direction: column;
    gap: 10px;
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    z-index: 7;
    -webkit-overflow-scrolling: touch;
  }
  .nav.open a { color: var(--text, #e9eef5); text-decoration: none; }
}

/* Footer spectrum canvas (Fourier-style) */
.site-footer{ position: relative; overflow: hidden; }
#footerSpectrum{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0.28; /* faded to keep text readable */
  filter: saturate(115%);
}
.site-footer .footer-inner, .site-footer .footer-brand, .site-footer .footer-links, .site-footer .footer-copy{
  position: relative; z-index: 1;
}

/* Bigger, finger-friendly mobile toggle + correct layering */
#topbarWave { z-index: 0; pointer-events: none; } /* waves never intercept taps */

.menu-toggle{
  display: none;                /* shown only on small screens */
  position: relative;
  z-index: 6;                   /* above the wave canvas */
  background: rgba(255,255,255,0.06);
  border: 1.5px solid var(--border, #1a2230);
  color: var(--text, #e9eef5);
  border-radius: 12px;
  padding: 0.65rem 0.8rem;      /* bigger touch target */
  font-size: 1.15rem;           /* larger icon */
  line-height: 1;
  touch-action: manipulation;   /* fixes iOS delayed click */
}

/* Mobile dropdown */
@media (max-width: 880px){
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .site-header{ overflow: visible; } /* let dropdown extend below bar */
  .nav{ display:none; }
  .nav.open{
    display:flex;
    position:absolute;
    top:100%;
    right:16px;
    background: var(--bg-elev, rgba(16,22,34,.96));
    border: 1px solid var(--border, #1a2230);
    border-radius: 12px;
    padding: 10px;
    flex-direction: column;
    gap: 10px;
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    z-index: 7;
    -webkit-overflow-scrolling: touch;
  }
  .nav.open a{ color: var(--text, #e9eef5); text-decoration: none; }
}

/* Ensure the wave canvas never steals taps */
#topbarWave { pointer-events: none; z-index: 0; }

/* Bigger, on-top, iOS-friendly toggle */
.menu-toggle{
  display: none;
  position: relative;
  z-index: 999;                  /* make sure NOTHING covers it */
  background: rgba(255,255,255,0.06);
  border: 1.5px solid var(--border, #1a2230);
  color: var(--text, #e9eef5);
  border-radius: 12px;
  padding: 0.70rem 0.9rem;       /* larger touch target */
  font-size: 1.25rem;            /* larger icon */
  line-height: 1;
  touch-action: manipulation;    /* kill 300ms delay on iOS Safari */
  -webkit-tap-highlight-color: transparent;
}

/* Ensure header content is above the canvas */
.site-header .container,
.site-header .header-inner,
.site-header nav,
.brand { position: relative; z-index: 10; }

@media (max-width: 880px){
  .menu-toggle{ display: inline-flex; align-items:center; justify-content:center; }
  .site-header{ overflow: visible; }
  .nav{ display: none; }
  .nav.open{
    display: flex;
    position: absolute;
    top: 100%;
    right: 16px;
    background: var(--bg-elev, rgba(16,22,34,.96));
    border: 1px solid var(--border, #1a2230);
    border-radius: 12px;
    padding: 10px;
    flex-direction: column;
    gap: 10px;
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    z-index: 998;                /* below the button, above canvas */
  }
  .nav.open a{ color: var(--text, #e9eef5); text-decoration: none; }
}