/* ============================================
   AskMAE.ai™ — Design Tokens
   ============================================ */
:root{
	
  --mae: #1a0e4b;
  --maeblend: #080718;
  --maelight: #a08fe8;
  --maedark: #0f0a1d;
  --gold-mae: #b09c63;
  --tan: #a0825a;
  --beige: #ccbca6;
  --charcoal: #2e2e2e;
  --steel: #dadada;
  --ink: #1c1c1c;
  --reiki: #fffdee;
  --sunshine: #fcd581;
  --canvas: #fcfbfa;
  --jesus: #5a3696;
  --lilac: #c7b5ec;
  --turquoise: #00ccff;
  --muted:#c9d0ff; /* palest purple for ghost */
  --base:#04040d; /* blackish */
  --base-2:#080718; /* blackish purple maybe */
  --accent:#6041b9; /* bright purple */
  --accent-2:#8f7dff; /* light bright purple */
	
  --void: #100819; 
  --purple-deep: #1a0e4b; /* #241040 */
  --purple-royal: #5a3696; /* #4E2489 */
  --purple-glow: #a08fe8; /* #7C4DCC */
  --gold: #C9982F; /* #C9982F */
  --gold-bright: #EFC463;
  --ivory: #F6F2EA; /* #F6F2EA */
  --lavender-mute: #A493C4;
  --line: rgba(246,242,234,0.10);
  --line-bright: rgba(239,196,99,0.35);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', Menlo, monospace;

  --radius: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--void);
  color:var(--ivory);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold-bright);
  display:flex;
  align-items:center;
  gap:0.6em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--gold-bright);
  display:inline-block;
}

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

section{padding:110px 0;}
@media (max-width:768px){ section{padding:64px 0;} }

h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.12; color:var(--ivory);}
h1{font-size:clamp(36px);}
h2{font-size:clamp(1.9rem, 3.4vw, 2.9rem); margin-bottom:18px; font-weight:600;}
h2 em{font-style:italic; color:var(--gold-bright);}
p{color:var(--lavender-mute); max-width:640px;}
.section-head{margin-bottom:56px;}
.section-head p{margin-top:14px;}

:focus-visible{outline:2px solid var(--gold-bright); outline-offset:3px;}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 28px;
  font-family:var(--font-mono);
  font-size:0.82rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn-gold{ background:var(--gold-bright); color:var(--void); font-weight:600; }
.btn-gold:hover{ transform:translateY(-2px); background:#fff2cf; }
.btn-ghost{ border-color:var(--line-bright); color:var(--ivory); }
.btn-ghost:hover{ border-color:var(--gold-bright); color:var(--gold-bright); transform:translateY(-2px); }

/* ============================================
   Header / Nav
   ============================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  border-bottom:1px solid var(--line);
  background:rgba(16,8,25,0.72);
  backdrop-filter:blur(14px);
  transition:border-color 0.3s var(--ease);
}

/* ============================================
   Hero + terminal boot sequence
   ============================================ */
.hero{
  min-height:100vh;
  display:flex; align-items:center;
  position:relative;
  /* padding-top:140px; */
  background:
    radial-gradient(ellipse 900px 500px at 80% -10%, rgba(124,77,204,0.35), transparent 21%),
    radial-gradient(ellipse 700px 500px at 0% 100%, rgba(201,152,47,0.14), transparent 60%),
    var(--void);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 800px 500px at 60% 20%, black, transparent 75%);
  opacity:0.5;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center;
}
@media (max-width:960px){ .hero-grid{grid-template-columns:1fr;} }

.hero-two{
  min-height:100vh;
  display:flex; align-items:center;
  position:relative;
  padding-top:140px;
  background:
    radial-gradient(ellipse 900px 500px at 80% -10%, rgba(124,77,204,0.35), transparent 60%),
    radial-gradient(ellipse 700px 500px at 0% 100%, rgba(201,152,47,0.14), transparent 60%),
    var(--void);
  overflow:hidden;
}
.hero-two::before{
  content:"";
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 800px 500px at 60% 20%, black, transparent 75%);
  opacity:0.5;
}
.hero-two-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center;
}
@media (max-width:960px){ .hero-two-grid{grid-template-columns:1fr;} }

.terminal{
  font-family:var(--font-mono); font-size:0.86rem; color:var(--gold-bright);
  min-height:1.4em; margin-bottom:22px;
}
.terminal .caret{display:inline-block; width:8px; height:1em; background:var(--gold-bright); margin-left:3px; vertical-align:-2px; animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

.hero h1{font-size:clamp(2.4rem, 5vw, 4.1rem); margin-bottom:22px;}
.hero h1 .line2{display:block; color:var(--gold-bright); font-style:italic;}
.hero p.lede{font-size:1.08rem; color:var(--lavender-mute); max-width:520px; margin-bottom:34px;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:52px;}

.hero-stats{display:flex; gap:38px; flex-wrap:wrap;}
.hero-stat .num{font-family:var(--font-display); font-size:1.9rem; color:var(--ivory); font-weight:600;}
.hero-stat .label{font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-bright); margin-top:4px;}

/* Signature: OS stack diagram */
.os-stack{
  position:relative;
  border:1px solid var(--line-bright);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(78,36,137,0.25), rgba(16,8,25,0.6));
  padding:22px;
  backdrop-filter:blur(6px);
}
.os-stack .stack-title{font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--lavender-mute); margin-bottom:16px; display:flex; justify-content:space-between;}
.os-stack .stack-title span.dot{color:var(--gold-bright);}
.stack-layer{
  border:1px solid var(--line);
  border-radius:6px;
  padding:16px 18px;
  margin-bottom:10px;
  cursor:default;
  transition:border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
  background:rgba(255,255,255,0.02);
}
.stack-layer:last-child{margin-bottom:0;}
.stack-layer:hover{border-color:var(--gold-bright); transform:translateX(4px); background:rgba(239,196,99,0.06);}
.stack-layer .layer-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}
.stack-layer .layer-name{font-family:var(--font-display); font-weight:600; font-size:1.05rem;}
.stack-layer .layer-tag{font-family:var(--font-mono); font-size:0.65rem; color:var(--gold-bright); letter-spacing:0.06em;}
.stack-layer .layer-desc{font-size:0.86rem; color:var(--lavender-mute); max-width:none;}
.stack-verticals{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:4px;}
.stack-verticals .v-chip{
  border:1px solid var(--line); border-radius:5px; padding:10px 8px; text-align:center;
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.03em; color:var(--lavender-mute);
  transition:border-color 0.3s, color 0.3s;
}
.stack-verticals .v-chip:hover{border-color:var(--gold-bright); color:var(--gold-bright);}

/* ============================================
   Marquee / trust strip
   ============================================ */
.trust-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:20px 0; overflow:hidden; white-space:nowrap;
}
.trust-track{display:inline-flex; gap:64px; animation:scroll-left 28s linear infinite;}
.trust-track span{font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--lavender-mute);}
@keyframes scroll-left{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ============================================
   Verticals (cards)
   ============================================ */
.verticals-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:920px){ .verticals-grid{grid-template-columns:1fr;} }
.v-card{
  border:1px solid var(--line); border-radius:8px; padding:32px 28px;
  background:linear-gradient(180deg, rgba(78,36,137,0.10), transparent);
  transition:border-color 0.35s var(--ease), transform 0.35s var(--ease);
  reveal:true;
}
.v-card:hover{border-color:var(--line-bright); transform:translateY(-6px);}
.v-card .v-num{font-family:var(--font-mono); color:var(--gold-bright); font-size:0.78rem; letter-spacing:0.08em;}
.v-card h3{font-size:1.4rem; margin:14px 0 10px;}
.v-card p{font-size:0.92rem; margin-bottom:18px;}
.v-card .v-tam{
  font-family:var(--font-mono); font-size:0.78rem; color:var(--ivory);
  border-top:1px solid var(--line); padding-top:14px; display:flex; justify-content:space-between;
}
.v-card .v-tam .amt{color:var(--gold-bright); font-weight:600;}

/* TAM total bar */
.tam-total{
  margin-top:44px; border:1px solid var(--line-bright); border-radius:8px; padding:26px 30px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  background:rgba(239,196,99,0.05);
}
.tam-total .label{font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--lavender-mute);}
.tam-total .amount{font-family:var(--font-display); font-size:2.4rem; color:var(--gold-bright); font-weight:600;}

/* ============================================
   Products / accordion
   ============================================ */
.accordion{border-top:1px solid var(--line);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-trigger{
  width:100%; background:none; border:none; color:var(--ivory); text-align:left;
  display:flex; justify-content:space-between; align-items:center;
  padding:24px 4px; cursor:pointer; font-family:var(--font-display); font-size:1.15rem; font-weight:600;
  gap:20px;
}
.acc-trigger .tag{font-family:var(--font-mono); font-size:0.68rem; color:var(--gold-bright); margin-right:14px; letter-spacing:0.08em;}
.acc-trigger .icon{font-family:var(--font-mono); color:var(--gold-bright); font-size:1.3rem; flex-shrink:0; transition:transform 0.3s var(--ease);}
.acc-item.active .icon{transform:rotate(45deg);}
.acc-panel{max-height:0; overflow:hidden; transition:max-height 0.4s var(--ease);}
.acc-panel-inner{padding:0 4px 26px; max-width:760px;}
.acc-panel-inner p{color:var(--lavender-mute); font-size:0.94rem;}

/* ============================================
   Team
   ============================================ */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:920px){ .team-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .team-grid{grid-template-columns:1fr;} }
.t-card{border:1px solid var(--line); border-radius:8px; padding:26px; transition:border-color 0.3s;}
.t-card:hover{border-color:var(--line-bright);}
.t-avatar{
  width:46px; height:46px; border-radius:50%; margin-bottom:16px;
  background:linear-gradient(135deg, var(--purple-royal), var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:var(--ivory); font-size:1.05rem;
}
.t-card h4{font-size:1.05rem; margin-bottom:2px;}
.t-card .role{font-family:var(--font-mono); font-size:0.7rem; color:var(--gold-bright); letter-spacing:0.05em; text-transform:uppercase;}

/* ============================================
   CTA / Contact
   ============================================ */
.cta{
  border-radius:14px; margin:0 auto; max-width:1180px;
  background:radial-gradient(ellipse 700px 400px at 20% 0%, rgba(124,77,204,0.4), var(--purple-deep));
  border:1px solid var(--line-bright);
  padding:70px 50px; text-align:center;
}
.cta h2{margin-bottom:16px;}
.cta p{margin:0 auto 34px; }
.cta-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.form-row{margin-bottom:18px;}
.form-row label{font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--lavender-mute); display:block; margin-bottom:8px;}
.form-row input, .form-row textarea, .form-row select{
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:5px;
  padding:13px 14px; color:var(--ivory); font-family:var(--font-body); font-size:0.95rem;
  transition:border-color 0.25s;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{border-color:var(--gold-bright); outline:none;}
.form-row textarea{resize:vertical; min-height:120px;}
.form-msg{font-family:var(--font-mono); font-size:0.82rem; margin-top:16px;}
.form-msg.ok{color:var(--gold-bright);}
.form-msg.err{color:#e08585;}

.contact-info .info-row{display:flex; gap:14px; margin-bottom:22px; align-items:flex-start;}
.contact-info .info-row .k{font-family:var(--font-mono); font-size:0.7rem; color:var(--gold-bright); text-transform:uppercase; letter-spacing:0.08em; width:90px; flex-shrink:0; padding-top:2px;}
.contact-info .info-row .v{color:var(--ivory); font-size:0.95rem;}

/* ============================================
   Footer
   ============================================ */
footer{border-top:0px solid var(--line); padding:30px 0 0px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px;}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr;} }
.footer-grid h5{font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--gold-bright); margin-bottom:16px;}
.footer-grid li{margin-bottom:10px;}
.footer-grid a{color:var(--lavender-mute); font-size:0.9rem; transition:color 0.25s;}
.footer-grid a:hover{color:var(--ivory);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  padding-top:10px; border-top:0px solid var(--line);
  font-family:var(--font-mono); font-size:0.72rem; color:var(--lavender-mute); letter-spacing:0.03em;
}

/* ============================================
   Reveal on scroll
   ============================================ */
[data-reveal]{opacity:0; transform:translateY(24px); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);}
[data-reveal].in-view{opacity:1; transform:translateY(0);}

/* Back to top */
.to-top{
  position:fixed; bottom:26px; right:26px; z-index:90;
  width:44px; height:44px; border-radius:50%;
  background:var(--gold-bright); color:var(--void);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity 0.3s, transform 0.3s;
  border:none; cursor:pointer;
}
.to-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}




/* ============================================
Previous Nav
============================================ */
.nav{
display:flex; align-items:center; justify-content:space-between;
padding:18px 24px; max-width:1180px; margin:0 auto;
}
.logo{
font-family:var(--font-display); font-weight:700; font-size:1.25rem;
letter-spacing:0.01em; color:var(--ivory); display:flex; align-items:baseline; gap:6px;
}
.logo .mark{color:var(--gold-bright); font-style:italic;}
.nav-links{display:flex; gap:34px; align-items:center;}
.nav-links a{
font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.05em;
text-transform:uppercase; color:var(--lavender-mute);
position:relative; padding-bottom:4px; transition:color 0.25s;
}
.nav-links a::after{
content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
background:var(--gold-bright); transition:width 0.3s var(--ease);
}
.nav-links a:hover{color:var(--ivory);}
.nav-links a:hover::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:18px;}
.nav-toggle{display:none; background:none; border:none; color:var(--ivory); font-size:1.6rem; cursor:pointer;}
@media (max-width:920px){
.nav-links{
position:fixed; top:64px; left:0; right:0; bottom:0;
background:var(--void); flex-direction:column; justify-content:flex-start;
padding:40px 24px; gap:26px; transform:translateX(100%);
transition:transform 0.4s var(--ease); border-top:1px solid var(--line);
}
.nav-links.open{transform:translateX(0);}
.nav-toggle{display:block;}
.nav-cta .btn-ghost{display:none;}
}

/* ============================================
Dropdown Menu
============================================ */
.dropdown { position: relative; }
.dropbtn { cursor: pointer; }
.dropdown-menu {
display: none;
position: absolute;
top: 100%; left: 0;
background: var(--purple-royal);
min-width: 200px;
list-style: none;
padding: 0.5rem 0;
z-index: 100;
}
.dropdown-menu li a {
display: block;
padding: 0.6rem 1rem;
color: var(--ivory);
white-space: nowrap;
}
.dropdown-menu li a:hover { background: var(--gold-bright); color: var(--void); }
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu { display: block; }



/* =======================================
   Terminal
=========================================*/

.terminal{ white-space: normal; overflow-wrap: break-word; }



/* =======================================
   Accordion
=========================================*/
  .askmae-accordion {
    max-width: 1100px;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
  }

  .askmae-accordion-item {
    border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  }

  .askMAE-accordion-btn {
    width: 100%;
    background: #0b0b0b;
    color: #f5f0e6;
    border: none;
    outline: none;
    text-align: left;
    padding: 20px 56px 20px 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    position: relative;
    transition: color 0.25s ease;
  }

  .askMAE-accordion-btn:hover,
  .askMAE-accordion-btn:focus {
    color: #d4af37;
  }

  .askMAE-accordion-btn::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    font-weight: 300;
    color: #d4af37;
    transition: transform 0.25s ease, content 0.25s ease;
  }

  .askMAE-accordion-btn.active::after {
    content: "–";
  }

  .askmae-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }

  .askmae-accordion-inner {
    padding: 0 0 24px 0;
    color: #e8e0d0;
    font-size: 1rem;
    line-height: 1.75;
  }

  .askmae-accordion-inner p {
    margin: 0;
  }

  .askmae-accordion-inner a {
    color: #d4af37;
    text-decoration: underline;
    font-weight: 600;
  }

  .askmae-accordion-inner a:hover {
    color: #f1d675;
  }

  @media (max-width: 768px) {
    .askMAE-accordion-btn {
      font-size: 1.08rem;
      padding: 18px 46px 18px 0;
    }

    .askMAE-accordion-btn::after {
      font-size: 1.65rem;
    }

    .askmae-accordion-inner {
      font-size: 0.98rem;
      line-height: 1.7;
    }
  }