/* ============================================================
   AJUA LABS — DESIGN TOKENS
   Source: Ajualabs Design System v2.0 (colors_and_type.css)
   ============================================================ */

:root {
  --canvas:        #F8F8F5;
  --white:         #FFFFFF;
  --stone:         #D8D8D2;
  --stone-soft:    #EEEEE8;
  --ink:           #3D3D42;
  --ink-muted:     #888888;
  --midnight:      #252A31;
  --midnight-deep: #1A1E24;
  --midnight-line: #333A42;

  --emerald:        #097957;
  --emerald-mid:    #0D9966;
  --seafoam:        #64C2A6;
  --seafoam-light:  #B2E2D4;
  --seafoam-wash:   #E6F6F1;

  --ember:          #F5A623;
  --ember-doux:     #FAD07A;
  --ember-wash:     #FEF3DC;

  --rose:           #E94E77;
  --rose-wash:      #FAD0DA;
  --rose-deep:      #A0234A;

  --font-display:   'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:      'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:      'JetBrains Mono', 'Courier New', ui-monospace, monospace;

  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  20px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(37, 42, 49, 0.05);
  --shadow-md: 0 2px 8px rgba(37, 42, 49, 0.06), 0 1px 2px rgba(37, 42, 49, 0.04);
  --shadow-lg: 0 8px 24px rgba(37, 42, 49, 0.08), 0 2px 4px rgba(37, 42, 49, 0.04);
  --marker-ring: 0 0 0 1px rgba(0, 0, 0, 0.10), 0 0 0 3px #fff, 0 2px 8px rgba(0, 0, 0, 0.22);

  --header-h: 72px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--canvas);font-family:var(--font-body);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--emerald);text-decoration:none}
a:hover{color:var(--emerald-mid)}
img{max-width:100%}
::selection{background:var(--seafoam-light)}

.t-eyebrow{font-family:var(--font-mono);font-weight:400;text-transform:uppercase;letter-spacing:0.08em;color:var(--emerald)}

@keyframes wv{0%,100%{transform:scaleY(.32)}50%{transform:scaleY(1)}}

/* ============================================================
   MAP / PRODUCT-SURFACE COMPONENTS
   Source: Ajualabs Design System v2.0 (map-demo.css)
   ============================================================ */

.marker-sq{display:grid;place-items:center;border-radius:8px;box-shadow:var(--marker-ring);cursor:pointer;transition:transform .12s ease}
.marker-sq i,.marker-sq svg{stroke-width:1.75}
.marker-agent{width:22px;height:22px;border-radius:6px;background:#E6F6F1;color:#64C2A6}
.marker-store{width:26px;height:26px;border-radius:8px;background:#FAD0DA;color:#A0234A;border:2px solid rgba(37,42,49,.18)}

.mpop{min-width:190px;border-radius:10px;overflow:hidden;box-shadow:var(--shadow-lg);background:#fff}
.mpop-head{background:var(--midnight);padding:9px 12px}
.mpop-type{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--seafoam)}
.mpop-name{font-size:13px;font-weight:600;color:var(--canvas);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpop-body{background:#fff}
.mpop-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:5px 12px;border-top:.5px solid var(--stone-soft)}
.mpop-row:first-child{border-top:0}
.mpop-label{font-size:11px;color:var(--ink-muted)}
.mpop-val{font-size:12px;font-weight:500;color:var(--midnight);text-align:right}

.mbadge{font-family:var(--font-mono);font-size:10px;font-weight:600;border-radius:var(--r-pill);padding:2px 8px;display:inline-block}
.mb-active{background:var(--seafoam-wash);color:var(--emerald)}
.mb-event{background:var(--ember-wash);color:#8A5A00}
.mb-field{background:var(--rose-wash);color:var(--rose-deep)}

/* ============================================================
   HEADER
   ============================================================ */

.site-header{position:sticky;top:0;z-index:50;background:rgba(37,42,49,0.92);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);border-bottom:1px solid var(--midnight-line)}
.site-header-inner{max-width:1180px;margin:0 auto;height:var(--header-h);padding:0 40px;display:flex;align-items:center;gap:32px}
.site-logo{display:flex;align-items:center;flex:none}
.site-logo img{height:22px;width:auto;object-fit:contain;display:block}
.site-nav{display:flex;align-items:center;gap:28px;margin-left:8px}
.site-nav a{font-size:14px;font-weight:500;color:var(--seafoam-light)}
.site-nav a:hover{color:var(--canvas)}
.site-header-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.btn-primary{background:var(--ember);color:var(--midnight);padding:11px 22px;border-radius:var(--r-sm);font-size:14px;font-weight:700;display:inline-block}
.btn-primary:hover{background:var(--ember-doux);color:var(--midnight)}
.nav-toggle{display:none;background:none;border:0;padding:8px;margin-left:auto;cursor:pointer}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:22px;height:1.5px;background:var(--canvas);position:relative;transition:transform .15s ease,opacity .15s ease}
.nav-toggle span::before{position:absolute;top:-7px}
.nav-toggle span::after{position:absolute;top:7px}

@media (max-width:860px){
  .site-header-inner{padding:0 20px;gap:16px}
  .site-nav{position:fixed;top:var(--header-h);left:0;right:0;background:var(--midnight);border-bottom:1px solid var(--midnight-line);flex-direction:column;align-items:flex-start;gap:0;padding:8px 20px 16px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease}
  .site-nav.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
  .site-nav a{padding:12px 0;width:100%;border-bottom:0.5px solid var(--midnight-line)}
  .site-header-cta .btn-primary{padding:9px 16px;font-size:13px}
  .nav-toggle{display:block}
}

/* ============================================================
   RESPONSIVE LAYOUT OVERRIDES
   Sections keep their original inline styling; only the specific
   fixed-width / fixed-column rules that break small viewports are
   pulled into classes here.
   ============================================================ */

.hero-frame{max-width:1180px;margin:40px auto -78px;position:relative}
.hero-frame-inner{position:relative;width:100%;aspect-ratio:1106/491;border:1px solid var(--midnight-line);border-radius:var(--r-xl);overflow:hidden;background:var(--midnight-deep)}
.hero-frame-mobile{position:absolute;width:220px;pointer-events:none;right:4.16%;top:13.4%;transform:scale(0.9);transform-origin:top right}

@media (max-width:900px){
  .hero-frame-mobile{transform:scale(0.63)}
  .mpop{transform:scale(0.7)}
  .hero-marker{transform:scale(0.7)}
}
@media (max-width:640px){
  .hero-frame{margin-bottom:-40px}
  .hero-frame-mobile{transform:scale(0.4)}
  .mpop{transform:scale(0.44)}
  .hero-marker{transform:scale(0.44)}
}
@media (max-width:480px){
  .hero-frame-mobile{transform:scale(0.3)}
  .mpop{transform:scale(0.33)}
  .hero-marker{transform:scale(0.33)}
}

.grid-2-420{display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:center}
.grid-2-320{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start}
.grid-usecases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-team{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cta-row{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.loop-banner{height:288px}

@media (max-width:900px){
  .grid-2-420{grid-template-columns:1fr;gap:32px}
  .grid-2-420 img{max-height:360px!important}
  .grid-usecases{grid-template-columns:1fr}
  .loop-banner{height:220px}
}
@media (max-width:800px){
  .grid-2-320{grid-template-columns:1fr;gap:20px}
}
@media (max-width:640px){
  .loop-banner{height:160px}
}
@media (max-width:700px){
  .grid-team{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .grid-team{grid-template-columns:1fr}
}

@media (max-width:640px){
  section{padding-left:20px!important;padding-right:20px!important}
  #hero{padding-top:32px!important}
  #problem{padding-top:52px!important}
  #solution{padding-top:64px!important}
  #loop{padding-top:52px!important}
  #cases{padding-top:52px!important}
  #cta{padding-top:48px!important}
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer{background:var(--midnight-deep);color:var(--seafoam-light);border-top:1px solid var(--midnight-line);padding:56px 40px 32px}
.site-footer-inner{max-width:1080px;margin:0 auto}
.site-footer-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:32px;border-bottom:0.5px solid var(--midnight-line)}
.site-footer-brand{display:flex;align-items:center}
.site-footer-brand img{height:20px;width:auto;object-fit:contain}
.site-footer-legal{font-size:12px;line-height:1.6;color:#8a93a0;max-width:320px}
.site-footer-links{display:flex;gap:24px;flex-wrap:wrap}
.site-footer-links a{font-size:13px;color:var(--seafoam-light)}
.site-footer-links a:hover{color:var(--canvas)}
.site-footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;font-family:var(--font-mono);font-size:11px;color:#6b7686}

@media (max-width:640px){
  .site-footer{padding:40px 20px 24px}
  .site-footer-top{flex-direction:column}
}

/* ============================================================
   LEGAL PAGES (privacy policy, terms of service)
   ============================================================ */

.legal-main{max-width:760px;margin:0 auto;padding:72px 40px 120px}
.legal-h1{font-family:var(--font-display);font-size:clamp(28px,5vw,40px);font-weight:500;letter-spacing:-0.02em;color:var(--midnight);margin:16px 0 0}
.legal-updated{font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-muted);margin:14px 0 0}
.legal-h2{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--midnight);margin:40px 0 0}
.legal-h3{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--midnight);margin:24px 0 0}
.legal-p{font-size:15px;line-height:1.7;color:var(--ink);margin:12px 0 0}
.legal-ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.legal-ul li{display:flex;gap:10px;align-items:baseline;font-size:15px;line-height:1.6;color:var(--ink)}
.legal-ul li::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--emerald);flex:none;transform:translateY(-1px)}
.legal-p strong{font-weight:600;color:var(--midnight)}

@media (max-width:640px){
  .legal-main{padding:48px 20px 80px}
}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:0.5px solid var(--stone)}
.faq-item:first-child{border-top:0.5px solid var(--stone)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;padding:22px 0;font-size:17px;font-weight:600;color:var(--midnight);line-height:1.35}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--emerald)}
.faq-item summary::after{content:"";flex:none;margin-left:auto;width:11px;height:11px;margin-top:6px;border-right:1.5px solid var(--ink-muted);border-bottom:1.5px solid var(--ink-muted);transform:rotate(45deg);transition:transform .2s ease}
.faq-item[open] summary::after{transform:rotate(-135deg);border-color:var(--emerald)}
.faq-item summary .faq-num{font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--emerald);padding-top:5px;flex:none}
.faq-answer{font-size:15px;line-height:1.65;color:var(--ink);margin:0 0 24px;padding-left:38px;max-width:660px}
@media (max-width:640px){
  .faq-item summary{font-size:15.5px;gap:12px}
  .faq-answer{padding-left:0;font-size:14.5px}
}
@media (max-width:860px){
  .faq-wrap{grid-template-columns:1fr;gap:32px}
}

.team-link{display:block;color:var(--canvas)}
.team-link:hover{color:var(--seafoam)}
.team-link:hover img{border-color:var(--seafoam)}