/* Final consolidated stylesheet — replace css/style.css with this file.
   Purpose: robust visuals + mobile behaviors, burger, FAQ, hero, chatbot.
*/

/* Design tokens */
:root{
  --primary: #0a66ff;
  --primary-600: #074dd6;
  --ink: #0f1724;
  --muted: #667085;
  --bg: #f9fafc;
  --line: #e2e6ed;
  --shadow: 0 10px 30px rgba(7,77,214,0.06);
  --card-shadow: 0 6px 18px rgba(10,102,255,0.06);
  --radius: 12px;
  --touch: 48px;
  --content-max: 1180px;
  --min-pad: 20px;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  font-size:16px;
  -webkit-text-size-adjust:100%;
}

/* Typography */
h1,h2,h3,h4{font-family:"Merriweather",Georgia,serif;margin:0 0 .5rem;color:var(--ink)}
h2{font-size:clamp(1.4rem,1.1rem + 1.6vw,2.1rem)}
p{margin:.35rem 0 .85rem;color:var(--muted)}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-600);text-decoration:underline}
.muted{color:var(--muted)}

/* Layout */
.container{max-width:var(--content-max);margin:0 auto;padding:0 20px}
.inner{max-width:1100px;margin:0 auto}
.section{padding:clamp(20px,4.5vw,64px) 0}

/* Header */
header{position:sticky;top:0;z-index:90;background:#fff;border-bottom:1px solid var(--line);backdrop-filter:saturate(140%) blur(6px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:48px;height:48px;border-radius:10px;overflow:hidden;flex:0 0 48px;display:inline-flex;align-items:center;justify-content:center}
.logo img{width:100%;height:100%;object-fit:contain}
.brand-title{font-weight:700;font-size:1rem}

/* Desktop nav */
nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0;align-items:center}
nav a{color:var(--ink);font-weight:600;padding:10px 8px;border-radius:8px}
nav a:hover{background:var(--bg)}

/* Burger (mobile) */
.burger{
  display:none;
  width:48px;height:48px;padding:8px;border-radius:10px;border:1px solid var(--line);
  background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:6px;box-sizing:border-box;
}
.burger:focus{outline:3px solid rgba(10,102,255,0.12);outline-offset:3px}
.burger span{display:block!important;width:24px!important;height:2px!important;background:var(--ink)!important;border-radius:2px!important;transition:transform .22s ease,opacity .22s ease}

/* burger hover */
.burger:hover{background:var(--bg)}

/* open -> X */
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0;transform:scaleX(0.6)}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* show burger at small widths */
@media(max-width:980px){
  .burger{display:inline-flex!important}
  nav ul{display:none}
}

/* mobile menu */
.mobile-menu{display:none;border-top:1px solid var(--line);background:#fff}
.mobile-menu.show{display:block;animation:slideDown .22s ease}
@keyframes slideDown{from{transform:translateY(-6px);opacity:0}to{transform:translateY(0);opacity:1}}
.mobile-menu a{display:block;padding:12px 18px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mobile-menu a:hover{background:var(--bg);color:var(--primary)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border-radius:10px;font-weight:700;border:2px solid var(--primary);background:var(--primary);color:#fff;min-height:var(--touch);cursor:pointer;text-decoration:none;box-shadow:var(--shadow)}
.btn--ghost{background:#fff;color:var(--primary);border:2px solid var(--primary)}
.btn:hover{transform:translateY(-2px)}

/* Hero full-bleed video and overlay */
.hero-fullbleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);position:relative;overflow:hidden;background:#000;border-bottom:1px solid var(--line)}
.hero-fullbleed video{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/9}
.hero-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;background:linear-gradient(180deg,rgba(0,0,0,0.25),rgba(0,0,0,0.55));color:#fff}
.hero-overlay h1{font-family:"Merriweather",serif;font-size:clamp(1.8rem,1.2rem+2.2vw,2.8rem);line-height:1.05;margin:0 0 .5rem;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.hero-overlay p{max-width:760px;color:rgba(255,255,255,.95);margin-bottom:1rem}

/* Force hide overlay for touch/smaller screens (strong selectors late) */
@media only screen and (max-width:1024px),(hover:none) and (pointer:coarse){
  .hero-fullbleed .hero-overlay,.hero .hero-overlay,.hero-overlay{
    display:none!important;opacity:0!important;visibility:hidden!important;height:0!important;max-height:0!important;overflow:hidden!important;pointer-events:none!important;
  }
  .hero-fullbleed video{height:62vh!important;aspect-ratio:auto!important;object-fit:cover!important}
  .mobile-apply{display:none!important}
}

/* Grid & cards */
.grid{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.span-4{grid-column:span 4}
.span-6{grid-column:span 6}
.card{border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:16px;box-shadow:var(--card-shadow);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 6px 26px rgba(10,102,255,0.08)}

/* Team */
.person{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:flex-start}
.avatar{width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* Card-image grid */
.card-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:stretch;margin-top:12px}
.card-img{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);background:#fff;box-shadow:var(--card-shadow);display:flex;flex-direction:column;min-height:220px}
.card-img .media{width:100%;height:160px;object-fit:cover;display:block}
.card-img .overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:18px;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,0.55) 100%);color:#fff;opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.card-img:hover .overlay,.card-img:focus-within .overlay{opacity:1;transform:translateY(0)}
.card-img .card-body{padding:14px;display:flex;gap:10px;align-items:center;justify-content:space-between}

/* mobile overlay behavior */
@media(max-width:820px){
  .card-img .media{height:130px}
  .card-img .overlay{position:relative;inset:auto;background:transparent;color:var(--ink);opacity:1;transform:none;padding:12px;align-items:flex-start;pointer-events:auto}
  .card-img .overlay .learn{background:var(--primary);color:#fff}
  .card-img .card-body{padding-top:6px}
}

/* FAQ accordion */
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:var(--card-shadow);overflow:hidden;transition:all .3s ease}
.faq-question{width:100%;text-align:left;padding:14px 16px;font-weight:700;font-size:1rem;color:var(--ink);background:#fff;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-question::after{content:'+';font-weight:900;font-size:1.2rem;color:var(--primary);transition:transform .25s ease}
.faq-item.active .faq-question::after{content:'−'}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .25s ease;padding:0 16px}
.faq-item.active .faq-answer{max-height:400px;padding:12px 16px 16px}

/* Chatbot */
#chatbot{position:fixed;bottom:20px;right:20px;z-index:9999}
#chat-toggle{width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;border:none;font-size:26px;cursor:pointer;box-shadow:0 6px 24px rgba(10,102,255,0.3)}
#chat-window{position:absolute;bottom:80px;right:0;width:360px;max-height:520px;display:none;flex-direction:column;background:#fff;border-radius:16px;border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,0.15);overflow:hidden}
#chat-window.active{display:flex}
.chat-header{background:var(--primary);color:#fff;padding:12px 14px;display:flex;align-items:center;justify-content:space-between}
.chat-header button{background:rgba(255,255,255,0.18);color:#fff;border:none;font-size:20px;width:32px;height:32px;border-radius:50%;cursor:pointer}
#chat-body{flex:1;padding:14px;overflow-y:auto;background:#fafbff;display:flex;flex-direction:column;gap:10px}
.bot-msg,.user-msg{padding:10px 12px;border-radius:12px;max-width:85%}
.bot-msg{background:#fff;border:1px solid var(--line);align-self:flex-start}
.user-msg{background:var(--primary);color:#fff;align-self:flex-end}

/* to-top */
.to-top{position:fixed;right:16px;bottom:110px;z-index:50;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--primary);display:none;align-items:center;justify-content:center}
.to-top.show{display:flex}

/* Responsive grid adjustments */
@media(max-width:820px){
  .grid{grid-template-columns:repeat(6,1fr)}
  .span-4,.span-6{grid-column:span 6}
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .mobile-apply{display:block}
  body{padding-bottom:84px}
  .logo{width:44px;height:44px}
  .brand-title{font-size:.95rem}
  .btn{padding:12px 16px}
}

/* tiny screens */
@media(max-width:480px){
  .hero-fullbleed video{height:60vh}
  .brand-title{font-size:.92rem}
  .container{padding-left:20px;padding-right:20px}
}

/* Updated video display rules: show full landscape without zoom/crop,
   center video, limit height so it looks natural on tall/short screens.
   Keep rest of stylesheet intact (only hero/video related rules shown here).
*/

/* Hero container (keeps full-bleed behavior) */
.hero-fullbleed {
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  position:relative;
  overflow:hidden;
  background:#000;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;        /* center video vertically */
  justify-content:center;    /* center horizontally */
  padding:0;
}

/* Video - prefer contain (no cropping), maintain aspect, centered.
   Use max-height to avoid overly tall video on small screens. */
.hero-fullbleed video,
.hero-media video {
  width: 100%;
  height: auto;              /* do not force cover — keep original aspect */
  max-height: 72vh;         /* cap height so it doesn't take whole page */
  object-fit: contain;      /* show full horizontal video without zoom */
  display:block;
  background: #000;         /* letterbox color */
  margin: 0 auto;
}

/* On very wide desktop screens allow the video to be taller if needed */
@media (min-width:1400px){
  .hero-fullbleed video,
  .hero-media video {
    max-height: 76vh;
  }
}

/* On very small screens slightly increase max-height so it remains visible */
@media (max-width:480px){
  .hero-fullbleed video,
  .hero-media video {
    max-height: 65vh;
  }
}

/* Keep overlay hidden on touch devices (unchanged) */
@media only screen and (max-width:1024px), (hover:none) and (pointer:coarse) {
  .hero-fullbleed .hero-overlay,
  .hero .hero-overlay,
  .hero-overlay {
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    height:0 !important;
    max-height:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }
}

/* If your layout relies on aspect-ratio fallback rules, ensure they don't override the new behavior:
   (these rules are intentionally specific so they beat older rules) */
.hero-fullbleed video[style] { object-fit: contain !important; height: auto !important; max-height: 72vh !important; }

/* (Everything else in your existing CSS remains untouched.) */


/* REVIEW BUBBLE SCROLLER */
.review-scroller {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 20px 0;
}

.review-track {
  display: flex;
  gap: 18px;
  animation: scrollReviews 45s linear infinite;
  width: max-content;
}

.bubble {
  background: #fff;
  border: 1px solid var(--line);
  padding: 14px 18px;
  border-radius: 18px;
  font-size: 15px;
  color: #444;
  max-width: 320px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

@keyframes scrollReviews {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Responsive */
@media (max-width: 600px) {
  .bubble {
    max-width: 240px;
    font-size: 14px;
  }
  .review-track {
    animation-duration: 60s;
  }
}

/* (Everything else in your existing CSS remains untouched.) */

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.video {
  position: relative;
  width: 100%;
  padding-top: 178%; /* your 9:16 ratio */
  overflow: hidden;
  border-radius: 8px; /* optional */
}

.video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile layout */
@media (max-width: 620px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}


/* VIDEO GRID — make vertical videos smaller */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  justify-items: center;   /* center the smaller videos */
}

.video-grid video {
  width: 100%;
  max-width: 280px;        /* <-- adjust size here */
  height: auto;            /* keep aspect ratio */
  object-fit: contain;
  border-radius: 12px;
}
}