/* Bremo Shared Components - Site-wide CSS */
@import url('https://fonts.adobe.com/fonts/circular');

/* Black strip behind fixed header so overscroll reveals black, not white */
html{background:#000}
main{background-clip:content-box !important}

/* Header */
header{position:fixed;inset:0 0 auto 0;z-index:50;background:#000}
.head-inner{margin:0 auto;max-width:1120px;padding:calc(env(safe-area-inset-top, 0px) + 14px) 18px 14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1}
.head-inner::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100vw;background:#000;z-index:-1}
.brandmark{font-weight:650;letter-spacing:-.035em;color:#fff;font-size:clamp(2.4rem, 3.8vw, 3.4rem);line-height:1;user-select:none;text-decoration:none}
.menu-btn{border:0;background:transparent;color:#fff;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;cursor:pointer}
.menu-btn:hover{background:transparent}

/* Dropdown */
.dropdown-shell{margin:0 auto;max-width:1120px;padding:20px 18px 12px 18px}
.dropdown-shell .dropdown{margin-left:auto}
.menu-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.44);z-index:49}
.dropdown{width:280px;border-radius:18px;background:rgba(250,248,255,.96);backdrop-filter:blur(14px);border:4px solid rgba(255,255,255,0.44);box-shadow:0 22px 70px rgba(0,0,0,.25);overflow:hidden;transform-origin:top right}
.dd-item{width:100%;text-align:left;padding:12px 14px;font-weight:600;font-size:14px;border:0;background:transparent;cursor:pointer;color:#111827}
.dd-item:hover{background:transparent}

/* Rainbow Router */
.rainbow-router{width:100%;display:flex;flex-direction:column;margin-top:0}
.rainbow-bar{width:100%;padding:44px 18px;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);text-decoration:none;position:relative;overflow:hidden;padding-left:max(18px, calc((100% - 1120px) / 2))}
.rainbow-bar:hover{padding:44px 18px;padding-left:max(18px, calc((100% - 1120px) / 2))}
.rainbow-bar:active{filter:none}
.rainbow-bar-label{font-size:clamp(1rem, 2vw, 1.3rem);font-weight:900;letter-spacing:-0.01em;position:relative;z-index:1;opacity:0;transition:opacity 2.8s cubic-bezier(0.25, 0.1, 0.25, 1)}
.rainbow-bar-label.visible{opacity:1}
.rainbow-bar:hover .rainbow-bar-label{transform:none}
@media (max-width: 640px){
  .rainbow-bar{padding:34px 16px}
  .rainbow-bar:hover{padding:34px 16px}
  .rainbow-bar-label{font-size:1rem}
}

/* Footer */
.site-footer{background:#000;color:#fff;padding:64px 18px 56px;width:100%}
.footer-inner{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer-brand{font-weight:750;font-size:clamp(2rem,3.5vw,2.8rem);letter-spacing:-0.035em;line-height:1;color:#fff}
.footer-right{text-align:right;display:flex;flex-direction:column;gap:6px}
.footer-right span{font-size:13px;color:#ffffff;font-weight:500}
.footer-right a{color:#ffffff;text-decoration:none}
@media (max-width:640px){
  .footer-inner{flex-direction:column;gap:16px}
  .footer-right{text-align:left}
}

/* AI Chat Widget */
.ai-chat-toggle{position:fixed;right:40px;bottom:40px;z-index:130;border:0;border-radius:24px 24px 4px 24px;padding:16px 24px;font-size:16px;background:#111827;color:#fff;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);cursor:pointer;opacity:.94;transition:transform 0.2s ease, box-shadow 0.2s ease}
.ai-chat-toggle:hover{transform:scale(1.05);box-shadow:0 12px 32px rgba(0,0,0,.3)}
.ai-chat-panel{position:fixed;right:40px;bottom:100px;z-index:130;width:min(360px,92vw);height:440px;background:#fff;border:4px solid #fff;border-radius:16px;display:none;flex-direction:column;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.08)}
.ai-chat-panel.show{display:flex}
.ai-chat-head{background:#111827;color:#fff;padding:10px 12px;font-weight:700;font-size:14px;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden}
.ai-chat-head::after{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);animation:headShimmer 12s ease-in-out infinite;animation-delay:3s}
@keyframes headShimmer{0%,18%{left:-100%}28%{left:150%}100%{left:150%}}
.ai-chat-log{flex:1;padding:10px;overflow:auto;background:#f9fafb;display:flex;flex-direction:column;gap:8px}
.ai-msg{max-width:86%;padding:8px 10px;border-radius:10px;font-size:14px;line-height:1.35;font-weight:600}
.ai-msg.bot{color:#fff;align-self:flex-start}
.ai-msg.me{background:#111827;color:#fff;align-self:flex-end}
@keyframes typeDot{0%,60%,100%{transform:translateY(0);opacity:0.35}30%{transform:translateY(-5px);opacity:1}}
.ai-chat-form{display:flex;gap:8px;padding:10px;border-top:1px solid #e5e7eb;background:#fff}
.ai-chat-form input{flex:1;padding:9px 10px;border:1px solid #d1d5db;border-radius:10px;font-size:16px}
.ai-chat-form button{border:0;background:#8b5cf6;color:#fff;border-radius:10px;padding:8px 18px;font-weight:700;cursor:pointer}

/* ===== Mobile Responsive (shared) ===== */
html{overflow-x:hidden}
body{-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}
@media (max-width: 640px){
  html,body{overflow-x:hidden}
  .ai-chat-toggle{right:16px;bottom:32px;min-height:56px;padding:18px 30px;font-size:18px;border-radius:28px 28px 4px 28px}
  .ai-chat-panel{right:8px;bottom:92px;width:calc(100vw - 16px);max-width:360px;height:min(420px,70vh)}
  .ai-chat-form input{min-height:44px;font-size:16px}
  .ai-chat-form button{min-height:44px;padding:10px 14px}
  .dropdown{width:calc(100vw - 36px);max-width:100%;border-radius:14px}
  .dd-item{min-height:56px;padding:18px 16px;font-size:15px}
  .rainbow-bar{padding:30px 16px}
  .rainbow-bar:hover{padding:30px 16px}
  .head-inner{padding:calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px 16px}
  .site-footer{padding:48px 16px 40px}
}
@media (hover: none) and (pointer: coarse){
  .menu-btn:hover{background:transparent}
  .dd-item:hover{background:transparent}
  .rainbow-bar:hover .rainbow-bar-label{transform:none}
}