/* ==========================================================================
   TITANOM.AI — SHELL
   Atmosphere, preloader, nav, mobile menu, breadcrumb, footer.
   Every page shares this markup. Edit here once, it changes everywhere.
   ========================================================================== */

/* ============ ATMOSPHERE ============ */
.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,transparent 40%,rgba(0,0,0,.55) 100%)
}
.cursor-glow{
  position:fixed;top:0;left:0;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:2;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(107,155,155,.14),transparent 62%);
  transition:opacity .4s;mix-blend-mode:screen
}
@media(hover:none){.cursor-glow{display:none}}

/* ============ PRELOADER (home page only, once per session) ============ */
.preloader{position:fixed;inset:0;z-index:10000;background:var(--ink-0);display:grid;place-items:center;overflow:hidden}
.preloader .p-core{
  position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,var(--teal-glow),transparent 60%);filter:blur(30px);opacity:0;
  animation:pcore 2.6s var(--ease) infinite
}
@keyframes pcore{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.6;transform:scale(1.05)}}
.p-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:34px}
.p-mark{width:78px;height:78px}
.p-mark svg{width:100%;height:100%;overflow:visible}
.p-mark .seg{opacity:0;transform:translateY(14px)}
.p-bar{width:220px;height:2px;background:var(--line-2);position:relative;overflow:hidden;border-radius:2px}
.p-bar span{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--teal),var(--teal-bright));box-shadow:0 0 14px var(--teal-glow)}
.p-meta{
  display:flex;justify-content:space-between;width:220px;font-family:var(--font-display);
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted-2)
}
.p-count{color:var(--teal-bright)}
.preloader.done{transition:transform 1s var(--ease);transform:translateY(-100%)}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:9000;transition:background .5s,border-color .5s,backdrop-filter .5s}
.nav.scrolled{background:rgba(10,11,11,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-in{
  display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);
  max-width:var(--maxw);margin:0 auto;padding:0 32px
}
.brand{display:flex;align-items:center}
.brand svg{height:22px;width:auto}
.nav-links{display:flex;gap:38px;align-items:center}
.nav-links a{font-family:var(--font-display);font-weight:500;font-size:14px;color:var(--muted);position:relative;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--teal);transition:width .4s var(--ease)}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after{width:100%}
/* current page marker — set aria-current="page" on the matching link */
.nav-links a[aria-current="page"]{color:var(--white)}
.nav-links a[aria-current="page"]::after{width:100%;background:var(--teal-bright)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-login{font-family:var(--font-display);font-weight:500;font-size:14px;color:var(--muted);transition:color .3s}
.nav-login:hover{color:var(--white)}
.burger{display:none;flex-direction:column;gap:5px;padding:8px}
.burger span{width:22px;height:2px;background:var(--mist);transition:.4s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:8999;background:var(--ink-0);display:flex;flex-direction:column;
  justify-content:center;gap:6px;padding:40px;transform:translateY(-100%);transition:transform .7s var(--ease)
}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{
  font-family:var(--font-display);font-weight:700;font-size:clamp(24px,7vw,32px);color:var(--white);
  padding:10px 0;border-bottom:1px solid var(--line)
}
.mobile-menu a.accent{color:var(--teal-bright);border-bottom:none;margin-top:14px}

/* ============ BREADCRUMB ============ */
.crumbs{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--font-display);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)
}
.crumbs a{color:var(--muted-2);transition:color .3s}
.crumbs a:hover{color:var(--teal-bright)}
.crumbs .sep{color:var(--line-2)}
.crumbs [aria-current="page"]{color:var(--teal-bright)}

/* ============ FOOTER ============ */
footer{background:var(--ink-0);border-top:1px solid var(--line);padding:80px 0 40px;position:relative;z-index:3}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:60px;border-bottom:1px solid var(--line)}
.foot-brand svg{height:26px;margin-bottom:22px}
.foot-brand p{font-size:.95rem;color:var(--muted);max-width:300px}
.foot-contact{margin-top:22px;display:flex;flex-direction:column;gap:8px}
.foot-contact a{font-size:.93rem;color:var(--muted);transition:color .3s}
.foot-contact a:hover{color:var(--teal-bright)}
.foot-col h2,.foot-col h5{
  font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:20px
}
.foot-col a{display:block;font-size:.95rem;color:var(--muted);margin-bottom:13px;transition:color .3s,padding-left .3s}
.foot-col a:hover{color:var(--white);padding-left:5px}
.foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:34px;flex-wrap:wrap;gap:14px}
.foot-bot span{font-family:var(--font-display);font-size:12px;color:var(--muted-2);letter-spacing:.04em}
.foot-legal{display:flex;gap:20px;flex-wrap:wrap}
.foot-legal a{font-family:var(--font-display);font-size:12px;color:var(--muted-2);transition:color .3s}
.foot-legal a:hover{color:var(--mist)}
.foot-company{margin:16px 0 0;font-family:var(--font-body);font-size:11px;line-height:1.65;font-weight:300;color:var(--muted-2);letter-spacing:.01em;max-width:78ch}
.foot-mono{font-family:var(--font-display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.giant{
  font-family:var(--font-exp);font-weight:800;font-size:clamp(3rem,15vw,13rem);color:transparent;
  -webkit-text-stroke:1px var(--line);text-align:center;line-height:.9;letter-spacing:-.02em;
  margin-top:60px;user-select:none;opacity:.6
}

/* ============ SHELL RESPONSIVE ============ */
@media(max-width:960px){
  .nav-links,.nav-login{display:none}
  .nav-cta .btn{display:none}
  .burger{display:flex}
  .nav-in{height:66px}
  :root{--nav-h:66px}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .nav-in{padding-left:22px;padding-right:22px}
  .foot-top{grid-template-columns:1fr;gap:34px}
  .giant{margin-top:36px}
  footer{padding-top:60px}
}