/* ============================================================
   AflyZon — site shell styles
   Global navigation, Time Building tool bar, mobile menu, the Home /
   Time Building / coming-soon pages, and the small integration rules
   that place the existing Time Building pages under the shared
   navigation (their own old headers are hidden; content unchanged).
   ============================================================ */
:root{
  --az-bg:#050505; --az-s1:#111111; --az-s2:#171717;
  --az-text:#ffffff; --az-mute:#a0a0a0; --az-line:rgba(255,255,255,.09); --az-line2:rgba(255,255,255,.16);
  --az-yellow:#ffed00; --az-yellow-rgb:255,237,0;
  --az-nav-h:68px; --az-tb-h:0px; --az-top:calc(var(--az-nav-h) + var(--az-tb-h));
  --az-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --az-display:"Space Grotesk","Inter",sans-serif;
}
html[data-az-tb]{ --az-tb-h:48px; }
@media (max-width:860px){ :root{ --az-nav-h:60px; } html[data-az-tb]{ --az-tb-h:46px; } }

/* ---------------- global navigation ---------------- */
.azn{ position:sticky; top:0; z-index:1000; height:var(--az-nav-h); background:rgba(5,5,5,.88); border-bottom:1px solid var(--az-line); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); font-family:var(--az-font); }
.azn-inner{ height:100%; max-width:1440px; margin:0 auto; padding:0 28px; display:flex; align-items:center; gap:34px; }
/* Official logo image. Its lettering is dark, so it sits on a white plate
   (its original background) to stay legible on the dark interface. */
.azn-logo{ display:inline-flex; align-items:center; flex:0 0 auto; height:44px; padding:5px 10px; background:#ffffff; border-radius:8px; text-decoration:none; }
.azn-logo img{ display:block; height:100%; width:auto; }
.azn-links{ display:flex; align-items:center; gap:4px; height:100%; flex:1 1 auto; min-width:0; }
.azn-link{ position:relative; display:inline-flex; align-items:center; gap:8px; height:100%; padding:0 14px; color:var(--az-mute); text-decoration:none; font:600 14px/1 var(--az-font); letter-spacing:-.005em; white-space:nowrap; transition:color .18s ease; }
.azn-link svg{ opacity:.85; }
.azn-link:hover,.azn-link:focus-visible{ color:var(--az-text); }
.azn-link[aria-current="page"]{ color:var(--az-text); }
.azn-link[aria-current="page"] > svg:first-child{ color:var(--az-yellow); opacity:1; }
.azn-link[aria-current="page"]::after{ content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:2px; background:var(--az-yellow); }
.azn-caret{ display:inline-flex; opacity:.6; margin-left:-2px; }
.azn-soon{ font:600 9.5px/1 var(--az-font); font-style:normal; letter-spacing:.08em; text-transform:uppercase; color:var(--az-mute); border:1px solid var(--az-line2); border-radius:4px; padding:3px 5px; }
.azn-right{ display:flex; align-items:center; gap:10px; margin-left:auto; flex:0 0 auto; }
.azn-user{ display:flex; align-items:center; min-height:40px; }
.azn-icon-btn{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:10px; border:1px solid var(--az-line2); background:transparent; color:var(--az-text); cursor:pointer; }
.azn-icon-btn:hover{ border-color:rgba(var(--az-yellow-rgb),.5); }
.azn-burger{ display:none; }

/* Time Building dropdown */
.azn-dd{ position:relative; height:100%; display:flex; }
.azn-menu{ position:absolute; top:calc(100% + 1px); left:0; width:340px; padding:8px; background:var(--az-s1); border:1px solid var(--az-line2); border-top:2px solid var(--az-yellow); box-shadow:0 30px 60px -20px rgba(0,0,0,.9); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .16s ease, transform .16s ease, visibility .16s; }
.azn-dd:hover .azn-menu,.azn-dd:focus-within .azn-menu,.azn-dd.azn-open .azn-menu{ opacity:1; visibility:visible; transform:none; }
.azn-menu a{ display:flex; gap:12px; align-items:flex-start; padding:11px 12px; color:var(--az-text); text-decoration:none; border-radius:8px; }
.azn-menu a:hover,.azn-menu a:focus-visible,.azn-menu a[aria-current="page"]{ background:var(--az-s2); outline:none; }
.azn-menu a b{ display:block; font:600 14px/1.2 var(--az-font); }
.azn-menu a small{ display:block; margin-top:3px; color:var(--az-mute); font:500 12px/1.35 var(--az-font); }
.azn-menu a[aria-current="page"] b{ color:var(--az-yellow); }
.azn-mi-icon{ display:inline-grid; place-items:center; width:32px; height:32px; flex:0 0 auto; border:1px solid var(--az-line2); border-radius:8px; color:var(--az-yellow); }
.azn-menu-head{ flex-direction:column; gap:2px !important; border-bottom:1px solid var(--az-line); border-radius:8px 8px 0 0 !important; margin-bottom:4px; }
.azn-menu-head span{ font:700 13px/1 var(--az-display); letter-spacing:.08em; text-transform:uppercase; }

/* account chip from /az-app.js lives in the navigation */
#azNav #azChip{ position:relative; top:auto; right:auto; bottom:auto; z-index:auto; opacity:1; transform:none; box-shadow:none; background:var(--az-s1); }

/* tablet: condensed */
@media (max-width:1180px){
  .azn-inner{ gap:20px; padding:0 20px; }
  .azn-link{ padding:0 10px; }
  .azn-link > svg:first-child{ display:none; }
  .azn-soon{ display:none; }
}
/* phones and small tablets: logo + account + menu button */
@media (max-width:860px){
  .azn-inner{ padding:0 14px; gap:12px; }
  .azn-links{ display:none; }
  .azn-burger{ display:inline-grid; }
  .azn-logo{ height:40px; padding:4px 9px; }
}

/* mobile drawer */
.azn-drawer{ position:fixed; inset:0; z-index:2147482500; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-family:var(--az-font); }
.azn-drawer[hidden]{ display:none; }
.azn-drawer-panel{ position:absolute; top:0; right:0; bottom:0; width:min(360px,88vw); background:var(--az-bg); border-left:1px solid var(--az-line2); display:flex; flex-direction:column; overflow-y:auto; padding:0 18px calc(24px + env(safe-area-inset-bottom,0px)); }
.azn-drawer-head{ height:var(--az-nav-h); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--az-line); margin-bottom:12px; flex:0 0 auto; }
.azn-dlink{ display:flex; align-items:center; gap:12px; padding:14px 10px; color:var(--az-text); text-decoration:none; font:600 16px/1.2 var(--az-font); border-radius:8px; }
.azn-dlink svg{ color:var(--az-mute); }
.azn-dlink:hover{ background:var(--az-s1); }
.azn-dlink[aria-current="page"]{ background:var(--az-s1); box-shadow:inset 2px 0 0 var(--az-yellow); }
.azn-dlink[aria-current="page"] svg{ color:var(--az-yellow); }
.azn-dlink .azn-soon{ display:inline-block; margin-left:auto; }
.azn-dgroup{ margin:0 0 8px 20px; padding-left:12px; border-left:1px solid var(--az-line2); }
.azn-dsub{ font-size:15px; padding:11px 10px; color:#d8d8d8; }

/* ---------------- Time Building tool bar ---------------- */
.aztb{ position:sticky; top:var(--az-nav-h); z-index:999; height:var(--az-tb-h); background:rgba(10,10,10,.94); border-bottom:1px solid var(--az-line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font-family:var(--az-font); }
.aztb-inner{ height:100%; max-width:1440px; margin:0 auto; padding:0 28px; display:flex; align-items:center; gap:16px; }
.aztb-title{ flex:0 0 auto; color:var(--az-text); text-decoration:none; font:700 12px/1 var(--az-display); letter-spacing:.14em; text-transform:uppercase; }
.aztb-title[aria-current="page"]{ color:var(--az-yellow); }
.aztb-sep{ width:1px; height:18px; background:var(--az-line2); flex:0 0 auto; }
.aztb-tabs{ display:flex; align-items:center; gap:2px; height:100%; overflow-x:auto; scrollbar-width:none; }
.aztb-tabs::-webkit-scrollbar{ display:none; }
.aztb-tab{ position:relative; display:inline-flex; align-items:center; gap:7px; height:100%; padding:0 13px; color:var(--az-mute); text-decoration:none; font:600 13px/1 var(--az-font); white-space:nowrap; }
.aztb-tab:hover{ color:var(--az-text); }
.aztb-tab[aria-current="page"]{ color:var(--az-text); }
.aztb-tab[aria-current="page"] svg{ color:var(--az-yellow); }
.aztb-tab[aria-current="page"]::after{ content:""; position:absolute; left:13px; right:13px; bottom:-1px; height:2px; background:var(--az-yellow); }
@media (max-width:860px){
  .aztb-inner{ padding:0 8px; gap:8px; }
  .aztb-title,.aztb-sep{ display:none; }
  .aztb-tabs{ width:100%; justify-content:space-between; }
  .aztb-tab{ padding:0 10px; gap:6px; font-size:12.5px; }
  .aztb-tab[aria-current="page"]::after{ left:10px; right:10px; }
}
@media (max-width:400px){ .aztb-tab svg{ display:none; } }

/* ---------------- existing Time Building pages under the shared navigation ---------------- */
/* Fly */
html[data-az-page="fly"] .aflyzon-vuelo > .top-bar{ display:none; }
/* Publish */
html[data-az-page="publish"] body > header.navbar{ display:none; }
/* My Flight */
html[data-az-page="my-flight"] body > header.header{ display:none; }
/* Profile: its fixed top bar is replaced; the section sidebar sits below the navigation */
html[data-az-page="profile"] body > header.topbar{ display:none; }
html[data-az-page="profile"] body > .app{ padding-top:0; }
html[data-az-page="profile"] .sidebar{ top:var(--az-top) !important; height:calc(100vh - var(--az-top)) !important; bottom:auto !important; }
html[data-az-page="profile"] .page-header #mobileMenu{ display:inline-flex; flex-direction:row; align-items:center; width:auto; height:40px; gap:8px; padding:0 14px; margin:0 0 16px; color:var(--az-text); font:600 13px/1 var(--az-font); }
/* Chat: full-height app below the navigation */
html[data-az-page="chat"] .app > header.topbar{ display:none; }
html[data-az-page="chat"] .app{ height:calc(100vh - var(--az-top)); }
@media (max-width:800px){
  html[data-az-page="chat"]{ --az-tb-h:0px; }
  html[data-az-page="chat"] .aztb{ display:none; }
  html[data-az-page="chat"] .azn{ position:fixed; left:0; right:0; top:var(--az-vv-top,0px); }
  html[data-az-page="chat"] .app{ top:calc(var(--az-vv-top,0px) + var(--az-top)); height:calc(var(--az-vv-height,100vh) - var(--az-top)); }
}

/* ---------------- new pages: Home, Time Building, coming soon ---------------- */
body.azp{ margin:0; background:var(--az-bg); color:var(--az-text); font-family:var(--az-font); -webkit-font-smoothing:antialiased; }
.azp *{ box-sizing:border-box; }
.azp-wrap{ max-width:1240px; margin:0 auto; padding:0 28px; }
.azp-eyebrow{ display:inline-flex; align-items:center; gap:10px; margin:0 0 22px; color:var(--az-mute); font:600 12px/1 "JetBrains Mono","Space Grotesk",monospace; letter-spacing:.18em; text-transform:uppercase; }
.azp-dot{ width:7px; height:7px; border-radius:50%; background:var(--az-yellow); box-shadow:0 0 12px rgba(var(--az-yellow-rgb),.7); }
.azp h1,.azp h2,.azp h3{ font-family:var(--az-display); margin:0; letter-spacing:-.035em; }
.azp h1 em,.azp h2 em{ font-style:normal; color:var(--az-yellow); }
.azp h2{ font-size:clamp(30px,4vw,48px); line-height:1.05; max-width:780px; }
.azh-lead{ max-width:560px; margin:26px 0 0; color:#cfcfcf; font:400 18px/1.6 var(--az-font); }
.azh-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.azp-btn{ display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 24px; border-radius:6px; text-decoration:none; font:700 15px/1 var(--az-font); letter-spacing:-.01em; transition:transform .18s ease, background-color .18s ease, border-color .18s ease; }
.azp-btn:hover{ transform:translateY(-1px); }
.azp-btn-primary{ background:var(--az-yellow); color:#050505; }
.azp-btn-primary:hover{ background:#fff35a; }
.azp-btn-ghost{ border:1px solid var(--az-line2); color:var(--az-text); background:rgba(255,255,255,.03); }
.azp-btn-ghost:hover{ border-color:rgba(255,255,255,.4); }

/* Home hero */
.azh-hero{ position:relative; min-height:calc(100vh - var(--az-nav-h)); min-height:calc(100svh - var(--az-nav-h)); display:flex; flex-direction:column; justify-content:center; overflow:hidden; isolation:isolate; }
/* hero background: video with its poster underneath, darkened for legible text */
.azh-hero-art{ position:absolute; inset:0; z-index:-1; overflow:hidden; background:#050505 url("/images/home-hangar-poster.jpg") center / cover no-repeat; }
.azh-hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.azh-hero-art::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,5,5,.86) 0%,rgba(5,5,5,.62) 38%,rgba(5,5,5,.22) 70%,rgba(5,5,5,.12) 100%),linear-gradient(0deg,#050505 0%,rgba(5,5,5,0) 32%),linear-gradient(180deg,rgba(5,5,5,.45) 0%,rgba(5,5,5,0) 22%); }
@media (max-width:860px){ .azh-hero-art{ background-image:url("/images/home-hangar-poster-720.jpg"); } .azh-hero-art::after{ background:linear-gradient(0deg,#050505 0%,rgba(5,5,5,.55) 45%,rgba(5,5,5,.6) 100%); } }
.azh-hero-inner{ width:100%; padding-top:72px; padding-bottom:120px; }
.azh-hero h1{ font-size:clamp(64px,10vw,148px); line-height:.9; font-weight:700; }
.azh-hero-strip{ position:absolute; left:0; right:0; bottom:34px; display:flex; gap:34px; color:#7d7d7d; font:600 11.5px/1 "JetBrains Mono","Space Grotesk",monospace; letter-spacing:.2em; text-transform:uppercase; }
.azh-hero-strip span{ padding-top:14px; border-top:1px solid var(--az-line2); }
.azh-hero-strip .azh-live{ color:var(--az-text); border-top-color:var(--az-yellow); }

/* ecosystem */
.azh-eco{ padding:120px 0 110px; border-top:1px solid var(--az-line); }
.azh-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:18px; margin-top:52px; }
.azh-main,.azh-card,.aztbp-card{ position:relative; display:flex; flex-direction:column; background:var(--az-s1); border:1px solid var(--az-line); border-radius:4px; color:var(--az-text); text-decoration:none; }
.azh-main{ padding:38px; border-color:rgba(var(--az-yellow-rgb),.35); background:linear-gradient(180deg,#141414,#0d0d0d); }
.azh-main::before{ content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:2px; background:var(--az-yellow); }
.azh-main h3{ font-size:clamp(34px,4vw,52px); line-height:1; margin-top:30px; }
.azh-tag{ margin:10px 0 0; color:var(--az-yellow); font:600 15px/1.3 var(--az-font); }
.azh-main > p:not(.azh-tag),.azh-card > p:not(.azh-tag),.aztbp-card p{ margin:14px 0 0; color:var(--az-mute); font:400 15px/1.6 var(--az-font); }
.azh-main .azp-btn{ align-self:flex-start; margin-top:auto; }
.azh-main .azh-tools{ margin-bottom:30px; }
.azh-card-top{ display:flex; align-items:center; justify-content:space-between; }
.azh-card-icon{ display:inline-grid; place-items:center; width:46px; height:46px; border:1px solid var(--az-line2); border-radius:4px; color:var(--az-yellow); }
.azh-status{ color:var(--az-mute); font:600 10.5px/1 "JetBrains Mono","Space Grotesk",monospace; letter-spacing:.16em; text-transform:uppercase; }
.azh-status-live{ color:var(--az-yellow); }
.azh-tools{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.azh-tool{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--az-line2); border-radius:4px; color:var(--az-text); text-decoration:none; font:600 13.5px/1 var(--az-font); }
.azh-tool svg{ color:var(--az-mute); }
.azh-tool:hover{ border-color:rgba(var(--az-yellow-rgb),.55); }
.azh-tool:hover svg{ color:var(--az-yellow); }
.azh-future{ display:grid; gap:18px; }
/* future products: compact rows next to the main Time Building card */
.azh-card{ display:grid; grid-template-columns:46px 1fr; column-gap:20px; align-content:start; padding:24px 26px; transition:border-color .18s ease, background-color .18s ease; }
.azh-card:hover{ border-color:var(--az-line2); background:#141414; }
.azh-card .azh-card-top{ display:contents; }
.azh-card .azh-card-icon{ grid-column:1; grid-row:1 / span 3; color:#d0d0d0; }
.azh-card .azh-status{ position:absolute; top:26px; right:26px; }
.azh-card h3{ grid-column:2; font-size:22px; margin-top:2px; }
.azh-card .azh-tag,.azh-card > p{ grid-column:2; }
.azh-card > p:not(.azh-tag){ margin-top:8px !important; font-size:14px !important; }

/* steps */
.azh-steps{ padding:110px 0; border-top:1px solid var(--az-line); background:#080808; }
.azh-steps ol{ list-style:none; margin:52px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--az-line2); }
.azh-steps li{ padding:30px 28px 10px 0; }
.azh-steps li + li{ padding-left:28px; border-left:1px solid var(--az-line); }
.azh-steps li b{ color:var(--az-yellow); font:600 13px/1 "JetBrains Mono",monospace; letter-spacing:.1em; }
.azh-steps h3{ font-size:24px; margin-top:18px; }
.azh-steps li p{ color:var(--az-mute); font:400 15px/1.6 var(--az-font); margin:10px 0 0; }

.azh-final{ padding:110px 0; border-top:1px solid var(--az-line); text-align:center; }
.azh-final h2{ margin:0 auto 32px; }

/* footer */
.azp-footer{ border-top:1px solid var(--az-line); padding:44px 0; }
.azp-footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; }
.azp-footer p{ margin:10px 0 0; color:var(--az-mute); font:500 13px/1 var(--az-font); }
.azp-footer nav{ display:flex; flex-wrap:wrap; gap:22px; }
.azp-footer nav a{ color:var(--az-mute); text-decoration:none; font:600 13px/1 var(--az-font); }
.azp-footer nav a:hover{ color:var(--az-text); }
.azp-footer small{ color:#6d6d6d; font:500 12px/1 var(--az-font); }

/* Time Building overview */
.aztbp-hero{ padding:96px 0 56px; background:radial-gradient(ellipse at 80% 0%,rgba(var(--az-yellow-rgb),.06),transparent 55%); }
.aztbp-hero h1{ font-size:clamp(44px,6.5vw,88px); line-height:.95; max-width:900px; }
.aztbp-tools{ padding:0 0 110px; }
.aztbp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.aztbp-card{ padding:28px; min-height:250px; transition:border-color .18s ease, transform .18s ease; }
.aztbp-card:hover{ border-color:rgba(var(--az-yellow-rgb),.5); transform:translateY(-2px); }
.aztbp-card h3{ font-size:28px; margin-top:22px; }
.aztbp-num{ position:absolute; top:28px; right:28px; color:#5c5c5c; font:600 12px/1 "JetBrains Mono",monospace; letter-spacing:.1em; }
.aztbp-go{ display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:22px; color:var(--az-yellow); font:600 14px/1 var(--az-font); }

/* coming soon */
.azcs{ min-height:calc(100vh - var(--az-nav-h) - 140px); display:flex; align-items:center; padding:90px 0; background:radial-gradient(ellipse at 70% 30%,rgba(var(--az-yellow-rgb),.05),transparent 50%); }
.azcs-icon{ width:62px; height:62px; margin-bottom:30px; }
.azcs h1{ font-size:clamp(46px,7vw,96px); line-height:.95; max-width:900px; }
.azcs-status{ margin:22px 0 0; color:var(--az-text); font:600 14px/1.4 "JetBrains Mono",monospace; letter-spacing:.06em; }

@media (max-width:980px){
  .azh-grid{ grid-template-columns:1fr; }
  .aztbp-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px){
  .azp-wrap{ padding:0 18px; }
  .azh-hero-inner{ padding-top:56px; padding-bottom:110px; }
  .azh-lead{ font-size:16px; }
  .azh-hero-strip{ gap:16px; bottom:24px; font-size:10px; letter-spacing:.14em; }
  .azh-eco,.azh-steps,.azh-final{ padding:76px 0; }
  .azh-main{ padding:26px 22px; }
  .azh-steps ol{ grid-template-columns:1fr; }
  .azh-steps li,.azh-steps li + li{ padding:24px 0; border-left:0; border-bottom:1px solid var(--az-line); }
  .aztbp-grid{ grid-template-columns:1fr; }
  .aztbp-hero{ padding:64px 0 40px; }
  .azp-btn{ height:50px; padding:0 20px; }
  .azp-footer-inner{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){ .azp-btn,.aztbp-card,.azn-menu{ transition:none; } }