:root{
  --page-bg: #0d0d0d;
  --nav-bg: #1a1a1a;
  --primary: #6C63FF;
  --mint: #2EF7A0;
  --muted: #cfd6df;
  --card: #0f0f14;
  --glass: rgba(255,255,255,0.02);
}

/* base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--page-bg);font-family:Inter,system-ui,Arial;color:var(--muted)}
.container{max-width:1180px;margin:0 auto;padding:0 18px}

/* header grid: left | center | right */
.site-header{background:var(--nav-bg);position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(255,255,255,0.03)}
.header-wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 0;position:relative}

/* left logo */
.brand-logo{height:70px;object-fit:contain;;background:transparent;padding:6px}

/* center nav (desktop) */
.center{display:flex;justify-content:center}
.nav-list{display:flex;gap:12px;list-style:none;padding:0;margin:0;align-items:center}
.nav-item{position:relative}

/* ensure hover area is comfortable and remove white bubble */
.nav-link{
  color:var(--muted);
  text-decoration:none;
  padding:10px 14px;     /* slightly larger hit area */
  border-radius:8px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:8px;
  /* no background here on hover to avoid white/bubble effect */
  transition: transform .18s cubic-bezier(.2,.9,.28,1);
}
.nav-link:hover{
  transform: translateY(-3px); /* small lift, optional */
  /* NO background: keeps hover clean on dark background */
}

/* arrow rotation */
.arrow{display:inline-block;transition:transform .32s cubic-bezier(.2,.9,.28,1);font-size:12px;color:var(--muted)}
.nav-item.dropdown:hover > .nav-link .arrow{transform:rotate(180deg)}

/* ---------------- STABLE DROPDOWN (KEEP THIS) ---------------- */

/* base dropdown style (hidden by default, but ready for transition) */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);     /* small gap visually */
  left: 0;
  min-width: 220px;
  background: linear-gradient(180deg,#0b0b0d,#121217);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);

  /* visibility technique for stable hover */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.9,.28,1), visibility 180ms;
  pointer-events: none;
}

/* show when parent is hovered OR when menu itself is hovered */
.nav-item:hover .dropdown-menu,
.nav-item .dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* dropdown links */
.dropdown-menu a{display:block;padding:10px 12px;color:var(--muted);text-decoration:none;border-radius:8px}
.dropdown-menu a:hover{background:rgba(108,99,255,0.06)}



/* make sure the nav item is the positioning context */
.nav-item {
  position: relative;
  display: block;            /* ensures the li covers its contents */
  /* optional: adjust stacking context for overlapping menus */
  z-index: 10;
}

/* base dropdown style (hidden by default, ready for transition) */
.dropdown-menu {
  position: absolute;
  top: 100%;                 /* sit directly below the toggle (no gap) */
  left: 0;
  min-width: 220px;
  background: linear-gradient(180deg,#0b0b0d,#121217);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);

  /* initial (hidden) visual state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);     /* used for smooth entrance */
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.9,.28,1), visibility 160ms;
  pointer-events: none;
  z-index: 100;                    /* keeps menu above other content */
}

/* stable show rules:
   - when hovering the parent (.nav-item)
   - when keyboard-focus is inside (.nav-item:focus-within)
   - when hovering the menu itself (so moving into the menu keeps it open)
*/
.nav-item:hover > .dropdown-menu,
.nav-item:focus-within > .dropdown-menu,
.nav-item > .dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* slight highlight on the toggle when the menu is active (optional) */
.nav-item:hover > .nav-link,
.nav-item:focus-within > .nav-link {
  background: rgba(255,255,255,0.02);
}

/* dropdown links */
.dropdown-menu a {
  display: block;
  padding: 10px 12px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 8px;
}
.dropdown-menu a:hover {
  background: rgba(108,99,255,0.06);
  color: var(--text);
}

/* Accessibility note: ensure the toggle and menu are children of the same .nav-item
   Example HTML structure expected:
   <li class="nav-item">
     <a class="nav-link" href="#">Solutions <span class="arrow">▾</span></a>
     <ul class="dropdown-menu"> ... </ul>
   </li>
*/


/* ---------------- BUTTONS (KEEP & FINAL HOVER) -------------- */

/* common button base */
.right{display:flex;align-items:center;gap:10px}
.btn{padding:8px 14px;border-radius:12px;text-decoration:none;font-weight:800;display:inline-block}
.btn-shop{background:linear-gradient(90deg,var(--primary), #9b8bff);color:#fff;box-shadow:0 10px 30px rgba(108,99,255,0.14)}
.btn-login{background:linear-gradient(90deg,var(--mint), #9bffca);color:#042;box-shadow:0 10px 30px rgba(46,247,160,0.08)}

/* final hover: purple bg, black text, strong glow */
.btn-shop, 
.btn-login {
  position: relative;
  overflow: hidden;
  transition: all 0.28s ease;
}

/* hover state applies same purple + black text for both */
.btn-shop:hover,
.btn-login:hover {
  background: #6C63FF !important;   /* pure purple background */
  color: #000 !important;           /* black text */
  transform: translateY(-3px);
  box-shadow: 0 0 25px rgba(108, 99, 255, 0.9), 0 0 40px rgba(108, 99, 255, 0.4);
}

/* soft glow layer */
.btn-shop::after,
.btn-login::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(120, 90, 255, 0.28);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.btn-shop:hover::after,
.btn-login:hover::after {
  opacity: 1;
}

/* ---------------- MOBILE CENTER MENU (keep) ------------------ */

.burger{display:none;position:absolute;right:12px;top:10px;background:transparent;border:0;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.burger-lines{position:relative;display:block;width:22px;height:2px;background:var(--muted);border-radius:2px}
.burger-lines::before,.burger-lines::after{content:'';position:absolute;left:0;right:0;height:2px;background:var(--muted);border-radius:2px}
.burger-lines::before{top:-7px}
.burger-lines::after{bottom:-7px}

.center-menu{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .22s ease;z-index:200;opacity:0}
.center-menu[aria-hidden="false"]{opacity:1;pointer-events:auto}
.center-menu::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.6));backdrop-filter: blur(4px)}
.center-menu-card{position:relative;width:92%;max-width:420px;background:linear-gradient(180deg,#0b0b0f,#0f1014);border-radius:14px;padding:18px;transform:scale(.7);opacity:0;transition:transform .32s cubic-bezier(.2,.9,.28,1),opacity .22s ease}
.center-menu[aria-hidden="false"] .center-menu-card{transform:scale(1);opacity:1}
.close-x{position:absolute;right:12px;top:8px;background:transparent;border:0;color:var(--muted);font-size:28px}

/* mobile nav: collapsible sublists */
.mobile-nav-list{list-style:none;padding:0;margin:6px 0 0 0;display:flex;flex-direction:column;gap:8px}
.mobile-item{display:flex;flex-direction:column}
.mobile-link{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:10px;background:transparent;color:var(--muted);text-decoration:none;border:0;font-weight:800;cursor:pointer}
.mobile-arrow{transition:transform .28s cubic-bezier(.2,.9,.28,1);margin-left:8px}
.mobile-sub{list-style:none;padding-left:10px;margin:6px 0 0 0;display:none;flex-direction:column;gap:6px}
.mobile-sub a{padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--muted);display:block}
.mobile-sub a:hover{background:rgba(108,99,255,0.04)}
.mobile-item.open > .mobile-link .mobile-arrow{transform:rotate(180deg)}
.mobile-item.open > .mobile-sub{display:flex}
.menu-btn{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;font-weight:800;text-align:center}
.menu-btn.shop{background:linear-gradient(90deg,var(--primary), #9b8bff);color:#fff}
.menu-btn.login{background:linear-gradient(90deg,var(--mint), #9bffca);color:#042}

/* demo content */
.main-content{padding:30px 0}
.card{background:transparent;border-radius:12px;padding:18px}
.muted{color:var(--muted)}


/* responsive */
@media (max-width:980px){
  .nav-list{display:none}
  .right{display:none}
  .burger{display:flex}
  .header-wrap{grid-template-columns:auto 1fr 48px}
  .brand-logo{height:44px}
}



/* scroll-to-top: show/hide via class, reduced-motion support, focus ring */
#scrollTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #6C63FF, #9D8CFF);
  color: #fff;
  border-radius: 50%;
  display: none;               /* default hidden */
  justify-content: center;
  align-items: center;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  z-index: 9999;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  opacity: 0;
  pointer-events: none;
}

/* class to show the button */
#scrollTopBtn.visible {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* hover + active */
#scrollTopBtn:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,0.4); }

/* keyboard focus ring for accessibility */
#scrollTopBtn:focus {
  outline: 3px solid rgba(108,99,255,0.18);
  outline-offset: 4px;
  border-radius: 50%;
}

/* respects reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  #scrollTopBtn, #scrollTopBtn.visible { transition: none; transform: none; }
}



/* ---------- Footer: Glassmorphism Glow (Food + Automotive) ---------- */

:root{
  --fg-bg: rgba(255,255,255,0.02);
  --fg-panel: rgba(255,255,255,0.03);
  --fg-text: #d6dde2;
  --muted-dim: rgba(214,221,226,0.62);
  --teal: #00E0C7;   /* automotive accent */
  --orange: #FF7A45; /* food accent */
  --glass-border: rgba(255,255,255,0.04);
}

/* container spacing matches your existing .container */
.footer-glass{
  background: linear-gradient(180deg,#060607,#0a0a0c);
  color: var(--fg-text);
  padding: 56px 0 10px;
  border-top: 1px solid rgba(255,255,255,0.02);
  margin-top: 48px;
  font-size: 15px;
}

/* inner glass card */
.footer-glass-inner{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 26px;
  align-items: start;
  padding: 20px 18px;
  margin-bottom: 18px;
}

/* glass panel look for each column */
.fg-col{
  background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.01));
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 6px 30px rgba(2,6,12,0.6);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px) saturate(120%);
}

/* brand */
.fg-logo{ height:56px; object-fit:contain; display:block; margin-bottom:12px }
.fg-tag{ color:var(--teal); font-weight:800; margin:6px 0; font-size:1rem }
.fg-desc{ color:var(--muted-dim); margin:6px 0 10px; line-height:1.4 }
.fg-legal .muted{ color:var(--muted-dim); font-size:13px }

/* headings */
.fg-col h4{ color:var(--orange); margin:0 0 10px; font-size:18px }

/* nav list */
.fg-nav ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px }
.fg-nav a{ color:var(--fg-text); text-decoration:none; opacity:0.82 }
.fg-nav a:hover{ color:var(--orange); transform: translateX(6px); transition: .16s ease }

/* contact text */
.fg-contact p{ margin:6px 0; color:var(--muted-dim); font-size:0.95rem }

/* socials */
.fg-socials{ margin-top:12px; display:flex; gap:8px; align-items:center }
.s{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; text-decoration:none; color:#001; font-weight:800; font-size:14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.03); box-shadow: 0 6px 22px rgba(2,6,12,0.6);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.s-teal{ color: var(--teal); }
.s-orange{ color: var(--orange); }
.s:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 40px rgba(0,0,0,0.6), 0 6px 40px rgba(0,224,199,0.08);
}
.s.s-orange:hover{ box-shadow: 0 18px 40px rgba(0,0,0,0.6), 0 6px 40px rgba(255,122,69,0.08) }

/* newsletter */


.fg-news-form input{
  flex:1;
  padding:14px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.03);
  background: rgba(0,0,0,0.4);
  color:var(--fg-text);
  outline:none;
  font-size:1rem;      /* 🔥 MAKE EMAIL TEXT BIGGER */
  font-weight:500;     /* 🔥 SLIGHTLY THICKER TEXT */
  letter-spacing:0.3px;
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.01);
}

.fg-news-form input::placeholder{ color: rgba(214,221,226,0.45) }
.fg-news-form button{
  background: linear-gradient(90deg,var(--teal),var(--orange));
  border: none; padding:12px 18px; border-radius:999px; font-weight:800; color:#001;
  cursor:pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.fg-news-form button:hover{ transform: translateY(-3px); filter:brightness(1.03) }

/* message area */
.fg-msg{ margin-top:10px; color:var(--muted-dim); font-size:0.95rem }

/* bottom bar */
.footer-glass-bottom{ border-top:1px solid rgba(255,255,255,0.02); padding:14px 0; margin-top:10px }
.footer-glass-bottom p{ text-align:center; color:var(--muted-dim); margin:0 }



/* message styles */
.fg-msg { margin-top:10px; font-size:0.95rem; transition: all .18s ease; }

/* error / success states */
.fg-msg.error {
  color: #ff6b6b;
  background: rgba(255,107,107,0.04);
  padding:8px 12px;
  border-radius:8px;
  border:1px solid rgba(255,107,107,0.1);
}
.fg-msg.success {
  color: #7ef3b0;
  background: rgba(126,243,176,0.03);
  padding:8px 12px;
  border-radius:8px;
  border:1px solid rgba(126,243,176,0.06);
}

/* small animation to draw attention when error shows */
.fg-msg.shake {
  animation: shake 300ms linear;
}
@keyframes shake {
  0% { transform: translateX(0) }
  25% { transform: translateX(-6px) }
  50% { transform: translateX(6px) }
  75% { transform: translateX(-4px) }
  100% { transform: translateX(0) }
}


/* responsive */
@media (max-width:980px){
  .footer-glass-inner{ grid-template-columns: 1fr; gap:14px; padding: 12px 18px }
  .fg-col{ padding:12px }
  .fg-news-form{ flex-direction:row }
}

@media (max-width:480px){
  .fg-news-form{ flex-direction:column; align-items:stretch }
  .fg-news-form button{ width:100% }
  .s{ width:36px; height:36px }
}





/* hero middle secion*/


/* Hero: Food + Automotive Styles */
.hero-foauto {
  background: linear-gradient(180deg, #070707 0%, #0d0d0d 100%);
  color: #e6eef0;
  padding: 64px 0;
  margin-bottom: 26px;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 36px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

.hero-left h1 {
  font-size: 56px;
  line-height: 1.05;
  margin: 0 0 18px;
  color: #00E0C7; /* teal – automotive */
  font-weight: 800;
}

.hero-left .lead {
  font-size: 18px;
  color: rgba(207,214,223,0.82);
  max-width: 680px;
  margin-bottom: 22px;
}

/* Buttons */
.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.btn {
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}



/* Feature list */
.hero-features {
  list-style: none;
  display: flex;
  gap: 18px;
  padding: 0;
  margin: 0;
  color: rgba(207,214,223,0.78);
  font-weight: 700;
}
/* Primary button (teal → orange on hover) */
.btn.primary {
  background: linear-gradient(90deg, #00E0C7, #0fffe0);
  color: #001;
  transition: 0.3s ease;
}

.btn.primary:hover {
  background: linear-gradient(90deg, #FF7A45, #FF9C6B);
  color: #000;
}


/* Secondary button (orange → teal on hover) */
.btn.secondary {
  background: linear-gradient(90deg, #FF7A45, #FF9C6B);
  color: #101;
  transition: 0.3s ease;
}

.btn.secondary:hover {
  background: linear-gradient(90deg, #00E0C7, #0fffe0);
  color: #001;
}

/* Right-side image */
.hero-right {
  display: flex;
  justify-content: center;
}

.hero-art {
  width: 100%;
  max-width: 520px;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.04);
  object-fit: cover;
}

/* Responsive */
@media (max-width: 1100px) {
  .hero-inner {
    grid-template-columns: 1fr 420px;
  }
  .hero-left h1 {
    font-size: 46px;
  }
}

@media (max-width: 820px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .hero-left h1 {
    font-size: 38px;
  }
  .hero-art {
    width: 100%;
    max-width: 100%;
  }
  .hero-features {
    flex-direction: column;
    gap: 10px;
  }
}




/* Solutions: Food + Automotive grid */
.solutions-foodauto { padding: 48px 0; }
.solutions-title {
  text-align: center;
  font-size: 34px;
  color: #e8ffff;
  margin-bottom: 26px;
  text-shadow: 0 3px 18px rgba(0,224,199,0.06);
}

/* grid */
.solutions-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

/* card base */
.sol-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
  border-radius: 12px;
  padding: 22px;
  color: var(--muted);
  border: 1px solid rgba(0,224,199,0.06);
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  display:flex;
  flex-direction:column;
  gap:12px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* different accent for food / auto / hybrid */
.sol-card.food { border-color: rgba(255,122,69,0.06); }
.sol-card.auto { border-color: rgba(0,224,199,0.06); }
.sol-card.hybrid { border-color: linear-gradient(90deg, rgba(0,224,199,0.06), rgba(255,122,69,0.06)); }

/* top row with stackly mark + icon */
.sol-top{ display:flex; align-items:center; gap:12px; }
.stackly-mark{ width:36px; height:36px; color: rgba(255,255,255,0.12); flex:0 0 36px; }
.sol-icon{ width:44px; height:44px; color: var(--mint); flex:0 0 44px; }

/* override color for food icon */
.sol-card.food .sol-icon { color: #FF7A45; }
.sol-card.auto .sol-icon { color: #00E0C7; }
.sol-card.hybrid .sol-icon { color: #FFD38A; }

/* heading & text */
.sol-card h3{ margin:0; color:#e6fff9; font-size:16px; font-weight:800; }
.sol-card p{ margin:0; color: rgba(207,214,223,0.72); font-size:13px; line-height:1.4; }

/* CTA */
.sol-cta-wrap{ margin-top:auto; display:flex; justify-content:flex-start; }
.sol-btn{
  display:inline-block; padding:8px 12px; border-radius:10px; font-weight:800; text-decoration:none;
  border:1px solid rgba(0,224,199,0.12); background:transparent; color: #00E0C7;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
.sol-card.food .sol-btn{ color: #FF7A45; border-color: rgba(255,122,69,0.12); }

/* hover effect */
.sol-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 70px rgba(0,0,0,0.6);
  border-color: rgba(0,224,199,0.18);
}
.sol-card.food:hover{ border-color: rgba(255,122,69,0.16); }

/* sol-btn hover swaps to filled colored background with inverted text */
.sol-btn:hover{
  background: linear-gradient(90deg, #00E0C7, #12F7D0);
  color:#001;
  transform: translateY(-2px);
}
.sol-card.food .sol-btn:hover{
  background: linear-gradient(90deg, #FF7A45, #FF9C6B);
  color: #111;
}

/* responsive: two columns then one column */
@media (max-width: 1000px){
  .solutions-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .solutions-grid{ grid-template-columns: 1fr; }
  .sol-top{ gap:10px; }
  .stackly-mark{ width:30px; height:30px; }
  .sol-icon{ width:36px; height:36px; }
}






.sol-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Make your main service icon BIGGER */
.sol-icon {
  width: 64px;     /* increase size */
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0,0,0,0.5));
}

/* Make Stackly symbol slightly bigger too */
.stackly-mark {
  width: 48px;
  height: 48px;
  object-fit: contain;
  opacity: 0.95;
}



.hero-auto {
  text-align: center;
  padding: 120px 20px;
}

.auto-title {
  font-size: 48px;
  font-weight: 900;
  color: #d9fff7;
  text-shadow: 0 0 18px rgba(0, 255, 213, 0.6);
  margin-bottom: 20px;
}

.auto-desc {
  max-width: 800px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.6;
  color: #cfd6df;
  margin-bottom: 40px;
}

.auto-cta .auto-btn {
  display: inline-block;
  padding: 14px 32px;
  border: 2px solid #00e0c7;
  border-radius: 8px;
  color: #00e0c7;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.auto-cta .auto-btn:hover {
  background: #00e0c7;
  color: #021212;
  box-shadow: 0 0 20px #00e0c7;
}



/* ============================
   MOBILE RESPONSIVE FIXES
   ============================ */

/* Tablets & small desktops */
@media (max-width: 1024px) {
  .hero-auto {
    padding: 90px 18px;
  }
  
  .auto-title {
    font-size: 40px;
  }

  .auto-desc {
    font-size: 17px;
    max-width: 700px;
  }

  .auto-cta .auto-btn {
    padding: 12px 28px;
  }
}

/* Large phones & small tablets */
@media (max-width: 768px) {
  .hero-auto {
    padding: 70px 16px;
    text-align: center;
  }

  .auto-title {
    font-size: 34px;
    line-height: 1.2;
  }

  .auto-desc {
    font-size: 16px;
    max-width: 550px;
    margin-bottom: 30px;
  }

  .auto-cta .auto-btn {
    width: auto;
    padding: 12px 26px;
    font-size: 15px;
  }
}

/* Phones */
@media (max-width: 480px) {
  .hero-auto {
    padding: 50px 14px;
  }

  .auto-title {
    font-size: 28px;
  }

  .auto-desc {
    font-size: 15px;
    line-height: 1.55;
    padding: 0 6px;
  }

  .auto-cta .auto-btn {
    width: 100%;
    max-width: 260px;
    padding: 12px 20px;
    font-size: 14px;
    display: block;
    margin: 10px auto;
  }
}

/* Extra-small phones */
@media (max-width: 360px) {
  .hero-auto {
    padding: 40px 10px;
  }

  .auto-title {
    font-size: 24px;
  }

  .auto-desc {
    font-size: 14px;
  }
}



/* ---------- Sunset Neon Theme (card styles) ---------- */
    .why-section { padding: 64px 18px; background: linear-gradient(180deg,#041212,#071717); color:#e8e8e8; }
    .why-title { text-align:center; font-size:36px; color:#fff; margin-bottom:18px; text-shadow:0 6px 28px rgba(255,118,0,0.06); }
    .why-sub { text-align:center; color:rgba(240,240,240,0.75); max-width:920px; margin:0 auto 36px; }

    .why-grid {
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 26px;
      max-width:1180px;
      margin: 0 auto;
      align-items: stretch;
    }

    .why-card {
      background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015));
      border: 1.5px solid rgba(255, 118, 0, 0.16);
      border-radius: 14px;
      padding: 36px 22px;
      text-align: center;
      color: #e8e8e8;
      transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
      display:flex;
      flex-direction:column;
      gap:14px;
    }

    .why-card:hover {
      transform: translateY(-8px);
      border-color: rgba(255,118,0,0.42);
      box-shadow: 0 20px 60px rgba(255,118,0,0.06), inset 0 1px 0 rgba(255,255,255,0.02);
    }

    .why-top {
      display:flex; align-items:center; justify-content:center; gap:16px;
    }

    .stackly-mark {
      width:46px; height:46px; object-fit:contain; opacity:0.95;
      border-radius:8px; background:rgba(0,0,0,0.12); padding:6px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.6);
    }

    .why-icon {
      width:84px; height:84px; object-fit:contain;
      filter: drop-shadow(0 8px 20px rgba(255,118,0,0.12));
    }

    .why-card h3 {
      color:#FF6F61; font-size:20px; margin:6px 0 6px; font-weight:800;
      text-shadow: 0 6px 22px rgba(255,108,96,0.28);
    }

    .why-card p {
      color: rgba(240,240,240,0.78); font-size:14.5px; line-height:1.6; margin:0 0 8px;
      flex:1;
    }

    .why-cta {
      margin-top: 6px;
    }

    .why-cta .btn {
      display:inline-block; padding:10px 14px; border-radius:10px; font-weight:800;
      background: linear-gradient(90deg,#FF7A45,#FF9C6B); color:#081; text-decoration:none;
      border: none; box-shadow: 0 10px 30px rgba(255,122,69,0.08);
    }


    .why-icon {
  width: 70px;
  height: 70px;
  filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.5));
}

    /* Responsive */
    @media (max-width:1100px) {
      .why-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width:640px) {
      .why-grid { grid-template-columns: 1fr; }
      .why-card { padding: 26px 18px; text-align:left; }
      .why-top { justify-content:flex-start; }
    }





    .marquee {
    width: 100%;
    overflow: hidden;
    background: #000; /* change if needed */
    padding: 10px 0;
  }

  .marquee-content {
    display: flex;
    gap: 40px;
    /* animation speed — increase or decrease 20s */
    animation: scroll 20s linear infinite;
  }

  .marquee-content img {
    height: 80px;   /* change size if needed */
    width: auto;
    object-fit: contain;
  }

  @keyframes scroll {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }



  /* Restaurant Hero — scoped styles only (no root/body) */
.hero {
  /* theme variables scoped to the hero element */
  --bg-top: #2B2B2B;
  --bg-bottom: #1A1A1A;
  --heading: #FFB84C;    /* warm golden-orange */
  --subtext: #FFDCA8;    /* soft cream */
  --container-w: 1100px;

  padding: 110px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--bg-top), var(--bg-bottom));
  color: var(--subtext);
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* inner container */
.hero-inner {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  text-align: center;
  padding: 20px;
}

/* layout */
.hero-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* left column */
.hero-left {
  flex: 1 1 60%;
}

/* right column (preview) */
.hero-right {
  flex: 1 1 36%;
  display: flex;
  justify-content: center;
}

/* title and subtitle */
.hero-title {
  color: var(--heading);
  font-size: 56px;
  line-height: 1.02;
  font-weight: 800;
  text-shadow: 0 6px 30px rgba(255,184,76,0.12), 0 2px 8px rgba(0,0,0,0.6);
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}

.hero-sub {
  color: var(--subtext);
  font-size: 18px;
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
  opacity: 0.95;
}

/* preview card */
.preview-card {
  width: 320px;
  max-width: 100%;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 0 40px rgba(255,184,76,0.03);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
.preview-card img {
  width: 100%;
  display: block;
  border-radius: 12px;
  box-shadow: 0 12px 38px rgba(0,0,0,0.5);
}

/* CTAs */
.cta-row {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.btn-primary {
  background: linear-gradient(90deg,#FFB84C,#FF9B3B);
  color: #1a1a1a;
  box-shadow: 0 10px 30px rgba(255,184,76,0.14);
}

.btn-outline {
  background: transparent;
  border: 1px solid rgba(255,220,168,0.2);
  color: var(--subtext);
}

/* ====== RESPONSIVE ====== */
/* Large tablets / small desktops */
@media (max-width: 1024px) {
  .hero-title { font-size: 46px; }
  .hero-sub { font-size: 17px; }
  .hero-flex { gap: 20px; }
  .preview-card { width: 300px; }
}

/* Tablets / large phones */
@media (max-width: 768px) {
  .hero {
    padding: 80px 18px;
    min-height: auto;
  }
  .hero-title { font-size: 36px; }
  .hero-sub { font-size: 16px; }
  .hero-flex { flex-direction: column-reverse; align-items: center; text-align: center; }
  .hero-left { width: 100%; }
  .hero-right { width: 100%; margin-bottom: 8px; }
  .preview-card { width: 280px; }
  .cta-row { justify-content: center; }
}

/* Phones */
@media (max-width: 420px) {
  .hero { padding: 56px 16px; }
  .hero-title { font-size: 28px; }
  .hero-sub { font-size: 15px; padding: 0 6px; }
  .preview-card { width: 100%; max-width: 260px; }
  .btn { padding: 10px 14px; border-radius: 10px; font-size: 14px; }
}

/* Very small phones */
@media (max-width: 360px) {
  .hero-title { font-size: 24px; }
  .hero-sub { font-size: 14px; }
}



/* Grid wrapper */
.grid-9-section { padding: 28px 18px; font-family: Inter, Arial, sans-serif; }

/* grid: 3 / 2 / 1 columns */
.grid-9 {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1200px;
  margin: 0 auto;
}

/* card base */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 12px;
  padding: 16px;
  min-height: 150px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  color: #FFDCA8;
  border: 1px solid rgba(255,220,168,0.04);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

/* top row: icon + status */
.card-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
}

/* icon styling */
.icon svg { display:block; fill: none; stroke: currentColor; color: #FFB84C; opacity:0.98; }
.icon { width: 36px; height: 36px; display:flex; align-items:center; justify-content:center; }

/* status badges */
.status {
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 999px;
  font-weight:700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.status.new   { background: rgba(255,184,76,0.12); color: #FFB84C; }
.status.hot   { background: rgba(255,120,60,0.12); color: #FF8A2B; }
.status.beta  { background: rgba(167,216,255,0.06); color: #A7D8FF; }
.status.warning{ background: rgba(255,60,60,0.07); color: #FF6B6B; }
.status.info  { background: rgba(78,177,255,0.08); color: #4EB1FF; }
.status.stable { background: rgba(200,200,200,0.04); color: #DADADA; }
.status.live  { background: rgba(46,247,160,0.06); color: #2EF7A0; }

/* titles + text */
.card h3 {
  color: #FFB84C;
  font-size: 18px;
  margin: 10px 0 8px;
  font-weight:700;
}
.card p {
  color: rgba(255,220,168,0.95);
  font-size:14px;
  line-height:1.45;
  margin:0;
}

/* showcase image */
.card-showcase img {
  width:100%;
  border-radius:8px;
  margin-top:12px;
  display:block;
  object-fit:cover;
  max-height:160px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}

/* footer: CTA + small meta */
.card-foot {
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.card-cta {
  padding: 8px 12px;
  border-radius:10px;
  background: linear-gradient(90deg,#FFB84C,#FF9B3B);
  color:#1a1a1a;
  font-weight:700;
  text-decoration:none;
  font-size:13px;
  box-shadow: 0 8px 20px rgba(255,184,76,0.12);
}
.small-meta {
  color: rgba(255,220,168,0.7);
  font-size:12px;
}

/* hover lift */
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}

/* Responsive breakpoints */
@media (max-width: 920px) {
  .grid-9 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .grid-9 { grid-template-columns: 1fr; }
  .card { min-height: 120px; padding:12px; }
  .card h3 { font-size:16px; }
  .card p { font-size:13px; }
  .card-showcase img { max-height:120px; }
  .icon { width:32px; height:32px; }
}



/* About Section Layout */
.resto-about-section {
  padding: 60px 20px;
  font-family: Inter, Arial, sans-serif;
}

.resto-about-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Left Text */
.resto-about-left {
  flex: 1;
}

.resto-title {
  font-size: 36px;
  color: #FFB84C;
  font-weight: 800;
  margin-bottom: 16px;
}

.resto-para {
  color: #FFDCA8;
  line-height: 1.6;
  margin-bottom: 20px;
  font-size: 16px;
}

.resto-points li {
  color: #FFDCA8;
  margin-bottom: 8px;
  font-size: 15px;
}

/* Button */
.resto-btn {
  display: inline-block;
  margin-top: 18px;
  padding: 12px 20px;
  background: linear-gradient(90deg, #FFB84C, #FF9B3B);
  color: #1A1A1A;
  font-size: 16px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(255,184,76,0.18);
}

/* Right Image */
.resto-about-right {
  flex: 1;
  display: flex;
  justify-content: center;
}

.resto-about-right img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  object-fit: contain; /* full image without crop */
}

/* Responsive */
@media (max-width: 900px) {
  .resto-about-container {
    flex-direction: column;
    text-align: center;
  }

  .resto-about-right img {
    max-width: 90%;
  }

  .resto-title {
    font-size: 30px;
  }
}



/* --- Food Section Wrapper --- */
.food-section {
  width: 100%;
  padding: 100px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;

  background: linear-gradient(135deg, #0d0f10, #1a1f24);
  background-size: 200% 200%;
  animation: bgMove 8s ease infinite;

  border-radius: 20px;
}

/* Background animation */
@keyframes bgMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Content Box --- */
.food-content {
  max-width: 700px;
  color: #ffffff;
}

/* Heading */
.food-content h2 {
  font-size: 2.4rem;
  margin-bottom: 20px;
  font-weight: 700;
  background: linear-gradient(90deg, #ffbf47, #ff7e47);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Paragraph */
.food-content p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 30px;
  opacity: 0.85;
}

/* CTA Button */
.food-btn {
  display: inline-block;
  padding: 14px 28px;
  background: linear-gradient(90deg, #ff7e47, #ff4757);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  transition: 0.3s ease;
  box-shadow: 0 0 15px rgba(255, 87, 57, 0.4);
}

.food-btn:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 0 20px rgba(255, 87, 57, 0.7);
}





















.food-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  padding: 40px;
}

.food-card {
  background: #111;
  border-radius: 20px;
  padding: 18px;
  text-align: center;
  color: #fff;
  transition: 0.3s ease;
  border: 1px solid #2a2a2a;
  overflow: hidden;
  position: relative;
}

.food-card img {
  width: 100%;
  height: 300px;    /* Increased height for full look */
  object-fit: cover;  /* Ensures full image without distortion */
  border-radius: 14px;
  margin-bottom: 15px;
  transition: 0.4s ease;
}


/* Title */
.food-card h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
  font-weight: 600;
}

/* Hover Glow */
.food-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 20px rgba(255, 136, 0, 0.4);
  border-color: #ff8800;
}

/* Smooth rise on hover */
.food-card:hover img {
  transform: scale(1.05);
  transition: 0.4s ease;
}

/* ---------------------
   Responsive: tablet + phone
   --------------------- */

/* Tablet / small screens (2 columns) */
@media (max-width: 900px) {
  .food-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    padding: 28px;
  }

  .food-card {
    padding: 14px;
    border-radius: 16px;
  }

  .food-card img {
    height: 240px; /* slightly smaller for tablet */
  }

  .food-card h3 {
    font-size: 1.1rem;
  }
}

/* Mobile phones (single column) */
@media (max-width: 480px) {
  .food-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }

  .food-card {
    padding: 12px;
    border-radius: 14px;
    text-align: left; /* left align often reads better on mobile */
  }

  .food-card img {
    height: 180px; /* smaller image to reduce scrolling */
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .food-card h3 {
    font-size: 1rem;
    margin-bottom: 6px;
  }

  /* Make hover interactions less dramatic on touch devices */
  .food-card:hover {
    transform: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.5);
    border-color: #2a2a2a;
  }
}

/* Optional: reduce hover transitions on touch devices (better UX) */
@media (hover: none) and (pointer: coarse) {
  .food-card,
  .food-card img {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }
  .food-card:hover,
  .food-card:active {
    transform: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  }
}






.digital-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: 32px;
}

.dg-card {
  background: #111;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #2a2a2a;
  transition: 0.3s ease;
}

.dg-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.card-body {
  padding: 18px;
  color: #fff;
}

.card-body h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
}

.card-body p {
  margin: 0;
  opacity: 0.8;
}

/* Hover */
.dg-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 18px rgba(255, 136, 0, 0.4);
  border-color: #ff8800;
}

.dg-card:hover img {
  transform: scale(1.04);
  transition: 0.4s ease;
}

/* Responsive */
@media (max-width: 900px) {
  .digital-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .digital-grid {
    grid-template-columns: 1fr;
  }
}


/* -------------------------
   About Us — Styles (isolated)
   ------------------------- */

/* ===== HERO ===== */
.au-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  padding: 28px 18px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, rgba(6,8,10,0.6), rgba(6,8,10,0.6));
  color: #fff;
}

/* optional hero background using the local image (will sit behind the img tag if present) */
.au-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/mnt/data/A_photograph_features_a_freestanding_informational.png");
  background-size: cover;
  background-position: center;
  opacity: 0.12;            /* subtle texture */
  pointer-events: none;
  z-index: 0;
}

.au-hero-img {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(2,6,10,0.55);
}

/* hero content */
.au-hero-content {
  z-index: 2;
  padding: 12px 6px;
}
.au-hero-content h1 {
  margin: 0 0 8px 0;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: -0.2px;
}
.au-hero-content p {
  margin: 0;
  color: #e6e6e6;
  font-size: 1rem;
}

/* ===== GENERIC SECTION LAYOUT ===== */
.au-who,
.au-mission,
.au-vision,
.au-values,
.au-journey,
.au-commitment {
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border-radius: 12px;
  padding: 18px;
  margin-top: 18px;
  border: 1px solid rgba(255,255,255,0.03);
  color: #f5f5f5;
  box-shadow: 0 6px 18px rgba(2,6,10,0.45);
}

/* section headings */
.au-who h2,
.au-mission h2,
.au-vision h2,
.au-what h2,
.au-values h2,
.au-journey h2,
.au-commitment h2 {
  margin: 0 0 10px 0;
  font-size: 1.25rem;
  color: #fff;
}

/* paragraph styling */
.au-who p,
.au-mission p,
.au-vision p,
.au-journey p,
.au-commitment p {
  margin: 0;
  color: #d1d5d9;
  line-height: 1.55;
  font-size: 0.98rem;
}

/* ===== WHAT WE DO - GRID ===== */
.au-what { margin-top: 18px; }

.au-what-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 12px;
}

/* individual item */
.au-what-item {
  background: rgba(255,255,255,0.01);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 240px;
  border: 1px solid rgba(255,255,255,0.03);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s;
}

.au-what-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(2,6,10,0.6);
  border-color: rgba(255,126,47,0.18);
}

/* item image */
.au-what-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  flex-shrink: 0;
}

/* item title + text */
.au-what-item h3 {
  margin: 0;
  font-size: 1.02rem;
  color: #fff;
}
.au-what-item p {
  margin: 0;
  color: #cfd5d9;
  font-size: 0.95rem;
  line-height: 1.45;
  margin-top: auto;
}

/* ===== VALUES (list) ===== */
.au-values ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 18px;
}

.au-values li {
  background: rgba(255,255,255,0.01);
  padding: 10px 12px;
  border-radius: 8px;
  color: #e8eef2;
  border: 1px solid rgba(255,255,255,0.025);
  font-size: 0.95rem;
}

/* emphasize key */
.au-values li strong { color: #fff; }

/* ===== RESPONSIVE ===== */
@media (max-width: 980px) {
  .au-what-grid { grid-template-columns: repeat(2, 1fr); }
  .au-values ul { grid-template-columns: 1fr; }
  .au-hero-img { max-height: 260px; }
}

@media (max-width: 560px) {
  .au-what-grid { grid-template-columns: 1fr; }
  .au-hero-content h1 { font-size: 1.5rem; }
  .au-hero { padding: 18px 12px; }
  .au-hero-img { max-height: 200px; border-radius: 10px; }
  .au-hero::after { opacity: 0.08; }
}

/* small utilities (optional) */
.au-muted { color: #bfc7cc; font-size: 0.95rem; }
.au-cta { display:inline-block; background:#ff7e2f; color:#081010; padding:8px 12px; border-radius:8px; text-decoration:none; font-weight:600; }


/* ---------- ABOUT PAGE ALIGNED STYLES (isolated classes) ---------- */

/* outer wrap */
.au-page-wrap { max-width: 1200px; margin: 30px auto; padding: 0 18px; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial; color: #e6eef2; }

/* HERO */
.au-hero { margin-bottom: 28px; display:flex; justify-content:center; align-items:center; }
.au-hero-inner { width:100%; display:flex; flex-direction:column; align-items:center; gap:18px; }
.au-hero-img { width:100%; max-height:520px; object-fit:cover; border-radius:8px; box-shadow: 0 14px 40px rgba(0,0,0,0.6); display:block; }
.au-hero-copy { text-align:center; max-width:980px; }
.au-hero-copy h1 { margin: 0 0 8px; font-size: 36px; color:#00f0d1; letter-spacing:-0.5px; }
.au-hero-copy p { margin:0; color:#cfd8dc; font-size:16px; }

/* MISSION / VISION row (centered two cards) */
.au-mv-row { display:flex; justify-content:center; margin: 20px 0; }
.au-mv-inner { width:100%; max-width:980px; display:flex; gap:20px; justify-content:center; align-items:stretch; }
.au-mv-card { background: #0f1112; border: 1px solid rgba(255,255,255,0.03); padding:18px; border-radius:10px; flex:1; min-width:260px; box-shadow: 0 8px 20px rgba(0,0,0,0.5); transition: transform .22s ease, border-color .22s; }
.au-mv-card:hover { transform: translateY(-6px); border-color: rgba(0,240,209,0.12); }
.au-mv-card h3 { margin:0 0 8px; color:#00f0d1; font-size:18px; }
.au-mv-card p { margin:0; color:#d7dde0; line-height:1.5; }

/* WHAT WE DO section */
.au-what { margin-top: 18px; }
.au-section-title { text-align:center; color:#00f0d1; font-size:24px; margin: 8px 0 6px; }
.au-what-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:12px; }
.au-what-item { background:#0f1112; border-radius:10px; padding:12px; min-height:220px; display:flex; flex-direction:column; border:1px solid rgba(255,255,255,0.03); transition: transform .26s ease, box-shadow .26s; }
.au-what-item:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(0,0,0,0.55); border-color: rgba(0,240,209,0.14); }
.au-what-img { width:100%; height:120px; object-fit:cover; border-radius:6px; display:block; margin-bottom:12px; }
.au-what-item h4 { margin:0 0 8px; color:#fff; font-size:16px; }
.au-what-item p { margin:0; color:#cfd8dc; font-size:14px; line-height:1.45; margin-top:auto; }

/* VALUES */
.au-values { margin-top: 28px; text-align:center; }
.au-values-sub { color:#bfc7cc; margin:6px 0 12px; }
.au-values-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap:20px; justify-items:center; margin-top:12px; }
.au-value-card { background:#0f1112; width:100%; max-width:220px; border-radius:10px; padding:18px; border:1px solid rgba(255,255,255,0.03); box-shadow:0 10px 30px rgba(0,0,0,0.5); transition:transform .22s ease; text-align:center; }
.au-value-card:hover { transform: translateY(-6px); border-color: rgba(0,240,209,0.12); }
.au-value-ico { font-size:22px; color:#00f0d1; margin-bottom:10px; }
.au-value-card h5 { margin: 0 0 8px; color:#ffffff; font-size:15px; }
.au-value-card p { margin:0; color:#cfd8dc; font-size:13px; line-height:1.45; }

/* JOURNEY + COMMITMENT */
.au-journey-commit { display:flex; gap:20px; margin-top:28px; justify-content:center; align-items:flex-start; }
.au-journey, .au-commitment { background:#0f1112; border-radius:10px; padding:16px; border:1px solid rgba(255,255,255,0.03); width:100%; max-width:580px; box-shadow:0 8px 24px rgba(0,0,0,0.45); }
.au-journey h3, .au-commitment h3 { margin:0 0 8px; color:#00f0d1; }
.au-journey p, .au-commitment p { margin:0; color:#cfd8dc; line-height:1.55; }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .au-values-grid { grid-template-columns: repeat(3, 1fr); }
  .au-what-grid { grid-template-columns: repeat(2, 1fr); }
  .au-values-grid { gap:16px; }
}

@media (max-width: 760px) {
  .au-hero-img { max-height:320px; }
  .au-mv-inner { flex-direction:column; gap:12px; }
  .au-what-grid { grid-template-columns: 1fr; }
  .au-values-grid { grid-template-columns: repeat(2, 1fr); }
  .au-journey-commit { flex-direction:column; gap:12px; }
  .au-values-grid .au-value-card { max-width: 260px; }
}

@media (max-width: 420px) {
  .au-page-wrap { padding: 0 12px; }
  .au-values-grid { grid-template-columns: 1fr; }
  .au-hero-copy h1 { font-size:20px; }
  .au-hero-copy p { font-size:14px; }
}



/* ===== Career Hero Section ===== */
.career-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 90px 8%;
    background: linear-gradient(160deg, #0B0C10, #11131A, #0E1116);
    color: #E8EAED;
    gap: 30px;
}

.career-left h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
}

.career-left h1 span {
    color: #00D4FF;
    text-shadow: 0 0 18px #9F7CFF;
}

.career-left p {
    margin-top: 12px;
    font-size: 18px;
    color: #B0B3C3;
}

.explore-btn {
    margin-top: 25px;
    padding: 12px 32px;
    background: linear-gradient(135deg, #6A5BFF, #00D4FF);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
    transition: 0.3s ease-in-out;
}

.explore-btn:hover {
    box-shadow: 0 0 22px rgba(159, 124, 255, 0.6);
    transform: translateY(-3px);
}

/* Right Image Box */
.career-right img {
    width: 420px;
    border-radius: 14px;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
    transition: 0.3s ease-in-out;
}

.career-right img:hover {
    transform: scale(1.03);
    box-shadow: 0 0 30px rgba(106, 91, 255, 0.4);
}

/* Responsive Fix */
@media (max-width: 900px) {
    .career-hero {
        flex-direction: column;
        text-align: center;
    }

    .career-right img {
        width: 100%;
        max-width: 420px;
    }
}



.values-section {
    padding: 60px 6%;
    text-align: center;
    background: #0B0C10;
}

.values-subtext {
    color: #B0B3C3;
    font-size: 18px;
    margin-bottom: 40px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 35px;
}

.value-card {
    background: #11131A;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 0 15px rgba(106, 91, 255, 0.18);
    transition: 0.3s ease-in-out;
    text-align: center;
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.3);
}

.value-card img {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 18px;
}

.value-card h3 {
    color: #00D4FF;
    font-size: 14px;
    letter-spacing: 1.5px;
    font-weight: 600;
    margin-bottom: 6px;
}

.value-card h4 {
    font-size: 20px;
    color: #E8EAED;
    font-weight: 700;
    margin-bottom: 8px;
}

.value-card p {
    color: #B0B3C3;
    font-size: 15px;
}



.open-positions {
    padding: 70px 6%;
    background: #0B0C10;
    text-align: center;
}

.open-positions h2 {
    color: #00D4FF;
    font-size: 34px;
    margin-bottom: 10px;
    text-shadow: 0 0 12px #6A5BFF;
}

.open-sub {
    color: #B0B3C3;
    margin-bottom: 40px;
}

.positions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.job-card {
    background: #11131A;
    padding: 25px;
    border-radius: 14px;
    text-align: left;
    box-shadow: 0 0 15px rgba(106, 91, 255, 0.18);
    transition: 0.3s ease-in-out;
}

.job-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.3);
}

.job-card h3 {
    color: #E8EAED;
    font-size: 20px;
    margin-bottom: 8px;
}

.job-location {
    font-size: 14px;
    color: #00D4FF;
    margin-bottom: 10px;
}

.job-card p {
    color: #B0B3C3;
    margin-bottom: 15px;
}

.apply-btn {
    background: linear-gradient(135deg, #6A5BFF, #00D4FF);
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
}

.apply-btn:hover {
    box-shadow: 0 0 20px #6A5BFF;
    transform: translateY(-3px);
}


/* container */
.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* HERO */
.services-hero{
  padding: 60px 0 30px;
  background: linear-gradient(160deg, #0B0C10, #0E1116);
  text-align: center;
  color: #E8EAED;
}

.hero-title{
  font-size: 38px;
  margin: 0 0 8px;
  color: #00D4FF;
  text-shadow: 0 0 12px #6A5BFF;
}

.hero-sub{
  color: #B0B3C3;
  max-width: 900px;
  margin: 8px auto 0;
  font-size: 16px;
}

/* GRID */
.services-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
  padding: 50px 0 90px;
}

/* COLUMN */
.service-col{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section-title{
  color: #E8EAED;
  font-size: 22px;
  margin: 6px 0 6px;
  text-align: center;
  font-weight: 700;
}

/* CARD */
.service-card{
  background: #11131A;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(159,124,255,0.18);
  transition: .28s ease all;
  border: 1px solid rgba(255,255,255,0.03);
}

.service-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 18px 38px rgba(0,212,255,0.12);
}

/* IMAGE BLOCK */
.service-media{
  width: 100%;
  height: 170px;
  background: #0d0d0d;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}

.service-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* shows full image */
  transition: .28s;
  background: #000;      /* optional but makes it look clean */
}


.service-card:hover .service-media img{
  transform: scale(1.03);
}

/* TEXT */
.service-body{
  padding: 18px 18px 22px;
}

.service-body h3{
  color: #E8EAED;
  font-size: 17px;
  margin: 0 0 8px;
}

.service-body p{
  font-size: 14px;
  color: #B0B3C3;
  margin-bottom: 12px;
  line-height: 1.45;
}

.meta{
  color: #00D4FF;
  font-size: 13px;
  margin-bottom: 14px;
}

/* BUTTON */
.btn-outline{
  display:inline-block;
  padding:8px 14px;
  text-decoration:none;
  font-size:14px;
  color:#E8EAED;
  border-radius:10px;
  border:1px solid rgba(0,212,255,0.12);
  background: linear-gradient(135deg, rgba(106,91,255,0.06), rgba(0,212,255,0.03));
  transition: .2s ease;
}

.btn-outline:hover{
  box-shadow: 0 8px 22px rgba(0,212,255,0.12);
  transform: translateY(-3px);
}

/* MOBILE */
@media (max-width:900px){
  .services-grid{
    grid-template-columns: 1fr;
  }
}




.privacy-section{
  padding:60px 6%;
  background:#0B0C10;
  color:#E8EAED;
}

.privacy-box{
  background:#11131A;
  padding:40px;
  border-radius:14px;
  box-shadow:0 0 25px rgba(106,91,255,0.15);
}

.policy-title{
  font-size:34px;
  color:#00D4FF;
  text-align:center;
  text-shadow:0 0 12px #6A5BFF;
}

.policy-text{
  color:#B0B3C3;
  margin:12px 0 18px;
  line-height:1.6;
}

.sub-title{
  margin-top:35px;
  font-size:22px;
  color:#00D4FF;
  text-shadow:0 0 6px #6A5BFF;
}

.data-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
  margin:20px 0;
}

.data-card{
  background:#0F1014;
  padding:20px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.05);
  box-shadow:0 0 15px rgba(0,212,255,0.12);
}

.data-card h4{
  color:#00D4FF;
  margin-bottom:8px;
}

.policy-list{
  color:#B0B3C3;
  margin:10px 0 20px 20px;
  line-height:1.6;
}

@media(max-width:768px){
  .privacy-box{ padding:20px; }
}





  .faq-section { padding: 40px 6%; background: #0B0C10; color: #E8EAED; }
  .faq-container { max-width: 1100px; margin: 0 auto; }

  .faq-hero { text-align:center; margin-bottom: 24px; }
  .faq-hero img { max-width: 100px; display:block; margin: 0 auto 12px; filter: saturate(1.1); border-radius:8px; }
  .faq-hero h2 { color: #00D4FF; font-size: 28px; text-shadow: 0 0 8px #6A5BFF; margin: 6px 0; }
  .faq-hero p { color: #B0B3C3; margin: 0 0 8px; }

  .accordion { margin-top: 6px; }

  .faq-item { background:#11131A; border-radius:12px; margin-bottom:12px; border:1px solid rgba(255,255,255,0.03); box-shadow: 0 6px 18px rgba(159,124,255,0.06); overflow:hidden; }
  .faq-q {
    width:100%;
    text-align:left;
    padding:18px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    color: #E8EAED;
    font-weight:700;
    font-size:16px;
  }
  .faq-q:focus { outline: 3px solid rgba(0,212,255,0.12); outline-offset: 2px; }

  .q-text { display:block; flex:1; text-align:left; }
  .chev { background:#071014; color:#00D4FF; width:36px; height:36px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; box-shadow:0 6px 14px rgba(0,212,255,0.06); }

  .faq-a { padding: 0 20px 18px 20px; color:#B0B3C3; font-weight:400; line-height:1.6; }

  /* smooth open/close */
  .faq-a {
    transition: max-height 280ms ease, opacity 220ms ease, transform 220ms ease;
    will-change: max-height, opacity, transform;
  }

  /* small screens */
  @media (max-width:760px){
    .faq-q { padding:14px; font-size:15px; }
    .faq-a { padding: 0 14px 16px; font-size:14px; }
    .faq-hero img { max-width:80px; }
  }






/* Basic container */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Pricing section overall */
.pricing-section { padding: 56px 0; background: #0B0C10; color: #E8EAED; }
.pricing-title { text-align: center; color: #00D4FF; font-size: 32px; text-shadow: 0 0 10px #6A5BFF; margin-bottom: 6px; }
.pricing-sub { text-align: center; color: #B0B3C3; margin-bottom: 24px; }

/* controls: tabs + toggle */
.pricing-controls { display:flex; align-items:center; justify-content:center; gap:28px; margin-bottom:22px; flex-wrap:wrap; }
.industry-tabs { display:flex; gap:12px; }
.industry-tab {
  background: transparent; border: 1px solid rgba(255,255,255,0.04); color: #E8EAED; padding:8px 14px; border-radius:10px; cursor:pointer; font-weight:700;
}
.industry-tab.active { background: linear-gradient(135deg,#6A5BFF11,#00D4FF11); box-shadow: 0 10px 26px rgba(0,212,255,0.04); color:#00D4FF; border-color: rgba(0,212,255,0.14); }

/* billing toggle */
.billing-toggle { display:flex; align-items:center; gap:10px; color:#B0B3C3; font-weight:600; }
#billingSwitch { width:54px; height:28px; border-radius:999px; border:1px solid rgba(255,255,255,0.05); background:#0E1114; position:relative; cursor:pointer; }
#billingSwitch[aria-pressed="true"] { background: linear-gradient(135deg,#6A5BFF,#00D4FF); box-shadow:0 10px 22px rgba(0,212,255,0.12); border: none; }
.switch-knob { position:absolute; left:4px; top:3px; width:22px; height:22px; border-radius:6px; background:#071014; transition: all .22s ease; }
#billingSwitch[aria-pressed="true"] .switch-knob { left:28px; background:#fff; }

/* grid of plans wrapper */
.pricing-grid { display:block; }

/* plans container (only one industry's .plans visible at a time) */
.plans { display:flex; gap:18px; justify-content:center; align-items:stretch; margin-top:8px; flex-wrap:wrap; }
.plans:not(.active) { display:none; }

/* single plan card */
.plan {
  background:#11131A; border:1px solid rgba(255,255,255,0.03); border-radius:12px; padding:22px; width:320px; box-shadow: 0 8px 28px rgba(159,124,255,0.06);
  display:flex; flex-direction:column; justify-content:space-between;
}
.plan.featured { transform:translateY(-8px); box-shadow: 0 18px 44px rgba(0,212,255,0.08); border-color: rgba(0,212,255,0.08); }

.plan header h3 { margin:0; color:#E8EAED; font-size:18px; font-weight:800; }
.plan-sub { color:#B0B3C3; font-size:13px; margin-top:6px; }

/* price */
.price { display:flex; align-items:flex-end; gap:8px; margin:12px 0 10px; }
.amount { font-size:28px; font-weight:900; color:#E8EAED; }
.period { color:#B0B3C3; font-size:14px; }

/* features */
.features { list-style:none; padding:0; margin:12px 0; color:#B0B3C3; line-height:1.6; }
.features li::marker { color:#00D4FF; }

/* CTA */
.plan-cta { text-align:center; margin-top:6px; }
.btn-primary {
  display:inline-block; padding:10px 18px; background: linear-gradient(135deg,#6A5BFF,#00D4FF); color:#fff; border-radius:10px; text-decoration:none; font-weight:700;
  box-shadow:0 10px 22px rgba(0,212,255,0.08);
}

/* responsive */
@media (max-width:980px) {
  .plans { gap:16px; }
  .plan { width:100%; max-width:520px; margin:0 auto; }
  .pricing-controls { gap:12px; }
}
@media (max-width:520px) {
  .pricing-controls { flex-direction:column; gap:10px; }
}





.testimonials-section {
  padding: 50px 6%;
  background: #0B0C10;
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  gap: 20px;
  width: 100%;
  transition: transform 0.6s ease;
}

.testimonial-card {
  min-width: 300px;
  max-width: 330px;
  background: #11131A;
  padding: 20px;
  border-radius: 14px;
  color: #E8EAED;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 0 18px rgba(159,124,255,0.12);
}

.testimonial-card img {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 12px;
}

.testimonial-card h3 {
  margin: 6px 0;
  font-size: 19px;
}

.role {
  color: #00D4FF;
  font-size: 14px;
  margin-bottom: 10px;
}

blockquote {
  color: #B0B3C3;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

/* MOBILE RESPONSIVE */
@media (max-width: 600px) {
  .testimonial-card {
    min-width: 85%;
    margin-right: 10px;
  }
}




/* HERO SECTION */
.auto-hero {
  padding: 80px 6%;
  background: #0B0C10;
  color: #E8EAED;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.auto-hero-content {
  max-width: 600px;
}

.auto-hero h1 {
  font-size: 42px;
  margin-bottom: 16px;
  color: #00D4FF;
  text-shadow: 0 0 10px #6A5BFF;
}

.auto-hero p {
  font-size: 17px;
  color: #B0B3C3;
  line-height: 1.6;
  margin-bottom: 24px;
}

.auto-cta {
  display: inline-block;
  padding: 12px 28px;
  background: linear-gradient(135deg, #6A5BFF, #00D4FF);
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 0 18px rgba(0,212,255,0.14);
}

/* HERO IMAGE */
.auto-hero-img img {
  width: 450px;
  border-radius: 14px;
  box-shadow: 0 0 25px rgba(0,212,255,0.25);
}

/* MOBILE RESPONSIVE */
@media(max-width: 850px) {
  .auto-hero {
    flex-direction: column;
    text-align: center;
  }
  .auto-hero-img img {
    width: 100%;
    max-width: 420px;
  }
}




/* AUTOMOTIVE SERVICES SECTION */
.auto-services {
  padding: 70px 6%;
  background: #0B0C10;
  text-align: center;
  color: #E8EAED;
}

.service-title {
  font-size: 32px;
  color: #00D4FF;
  text-shadow: 0 0 10px #6A5BFF;
}

.service-sub {
  color: #B0B3C3;
  margin-top: 6px;
  margin-bottom: 40px;
}

/* GRID */
.auto-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

/* CARD */
.auto-service-card {
  background: #11131A;
  padding: 22px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 0 22px rgba(0,212,255,0.12);
  transition: 0.3s ease-in-out;
  text-align: left;
}

.auto-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 30px rgba(106,91,255,0.25);
}

.auto-service-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
}

.auto-service-card h3 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #E8EAED;
}

.auto-service-card p {
  color: #B0B3C3;
  font-size: 15px;
  line-height: 1.5;
}

/* MOBILE */
@media(max-width: 700px) {
  .auto-service-card {
    text-align: center;
  }
}




/* WHY CHOOSE US — CSS (dark theme, no :root variables) */

.why-section { background:#0B0C10; color:#E8EAED; padding:60px 6%; }
.why-top { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:26px; max-width:1200px; margin-left:auto; margin-right:auto; }
.why-intro h2 { font-size:28px; color:#00D4FF; text-shadow:0 0 8px #6A5BFF; margin:0 0 6px; }
.why-intro p { color:#B0B3C3; margin:0; line-height:1.6; max-width:760px; }
.why-cta { flex:0 0 auto; }

/* small primary CTA */
.btn-primary-small { display:inline-block; padding:10px 18px; border-radius:10px; background:linear-gradient(135deg,#6A5BFF,#00D4FF); color:#fff; text-decoration:none; font-weight:700; box-shadow:0 10px 26px rgba(0,212,255,0.06); }

/* cards grid */
.why-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:18px; max-width:1200px; margin:26px auto 18px; }

.why-card { background:#11131A; padding:18px; border-radius:12px; border:1px solid rgba(255,255,255,0.03); box-shadow:0 8px 20px rgba(159,124,255,0.04); transition: transform .22s ease, box-shadow .22s ease; display:flex; gap:12px; align-items:flex-start; }
.why-card:hover { transform: translateY(-8px); box-shadow:0 18px 44px rgba(0,212,255,0.06); }

.wc-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; flex:0 0 48px; border-radius:10px; background: linear-gradient(180deg, rgba(106,91,255,0.04), rgba(0,212,255,0.02)); }
.why-card h3 { margin:0 0 6px; font-size:16px; color:#E8EAED; }
.why-card p { margin:0; color:#B0B3C3; font-size:14px; line-height:1.5; }

/* stats */
.why-stats { display:flex; gap:18px; justify-content:center; margin-top:20px; max-width:920px; margin-left:auto; margin-right:auto; }
.stat { background:#0F1014; padding:14px 20px; border-radius:12px; text-align:center; border:1px solid rgba(255,255,255,0.03); width:180px; box-shadow:0 8px 18px rgba(0,212,255,0.04); }
.stat-number { font-size:20px; font-weight:900; color:#E8EAED; margin-bottom:6px; }
.stat-label { color:#B0B3C3; font-size:13px; }

/* responsive */
@media (max-width:980px) {
  .why-top { flex-direction:column; text-align:center; gap:12px; }
  .why-cta { order:2; }
  .why-intro p { max-width:100%; }
  .why-stats { flex-direction:column; gap:12px; width:100%; }
  .stat { width:100%; }
}

@media (max-width:640px) {
  .why-grid { gap:12px; }
  .why-card { padding:14px; gap:10px; }
  .wc-icon { width:44px; height:44px; }
}




/* SECTION 5 — USE CASES CSS (dark theme, responsive) */
.usecases-section { padding: 64px 6%; background: #0B0C10; color: #E8EAED; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 18px; }

.usecases-title { text-align:center; font-size:30px; color:#00D4FF; text-shadow:0 0 10px #6A5BFF; margin-bottom:6px; }
.usecases-sub { text-align:center; color:#B0B3C3; margin-bottom:28px; max-width:900px; margin-left:auto; margin-right:auto; }

/* grid */
.usecases-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

/* card */
.usecase-card {
  background:#11131A;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 10px 30px rgba(159,124,255,0.05);
  transition: transform .22s ease, box-shadow .22s ease;
}

.usecase-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 48px rgba(0,212,255,0.06);
}

.usecase-card img {
  width:100%;
  height:150px;
  object-fit:contain;
  display:block;
}

/* body */
.uc-body { padding:16px; display:flex; flex-direction:column; gap:10px; flex:1 1 auto; }
.uc-body h3 { margin:0; font-size:18px; color:#E8EAED; }
.uc-body p { margin:0; color:#B0B3C3; font-size:14px; line-height:1.5; flex:1 1 auto; }

/* link CTA */
.uc-link {
  display:inline-block;
  margin-top:6px;
  text-decoration:none;
  color:#E8EAED;
  background: linear-gradient(135deg,#6A5BFF,#00D4FF);
  padding:8px 12px;
  border-radius:10px;
  font-weight:700;
  width:fit-content;
}

/* responsive tweaks */
@media (max-width: 900px) {
  .usecase-card img { height:140px; }
}

@media (max-width: 640px) {
  .usecases-section { padding:42px 5%; }
  .usecase-card { border-radius:10px; }
  .usecase-card img { height:120px; }
  .uc-body h3 { font-size:16px; }
  .uc-body p { font-size:13.5px; }
}




/* BLOG PAGE */

.blog-section {
  padding: 70px 6%;
  background: #0B0C10;
  color: #E8EAED;
}

.blog-title {
  text-align: center;
  font-size: 32px;
  color: #00D4FF;
  text-shadow: 0 0 10px #6A5BFF;
  margin-bottom: 8px;
}

.blog-sub {
  text-align: center;
  color: #B0B3C3;
  max-width: 700px;
  margin: 0 auto 30px;
}

/* GRID */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

/* CARD */
.blog-card {
  background: #11131A;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 10px 30px rgba(0,212,255,0.08);
  transition: all 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(106,91,255,0.25);
}

.blog-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.blog-body {
  padding: 18px;
}

.blog-date {
  font-size: 13px;
  color: #00D4FF;
  display: block;
  margin-bottom: 6px;
}

.blog-card h3 {
  font-size: 18px;
  color: #E8EAED;
  margin-bottom: 10px;
}

.blog-card p {
  color: #B0B3C3;
  font-size: 14px;
  line-height: 1.5;
}

.blog-link {
  display: inline-block;
  margin-top: 10px;
  color: #00D4FF;
  font-weight: 700;
  text-decoration: none;
}

/* PAGINATION */
.blog-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.page-btn {
  padding: 8px 14px;
  border-radius: 10px;
  background: #11131A;
  border: 1px solid rgba(255,255,255,0.08);
  color: #E8EAED;
  text-decoration: none;
  font-weight: 600;
}

.page-btn.active,
.page-btn:hover {
  background: linear-gradient(135deg, #6A5BFF, #00D4FF);
  color: white;
  box-shadow: 0 4px 14px rgba(0,212,255,0.15);
}

/* MOBILE */
@media (max-width: 650px) {
  .blog-card img {
    height: 140px;
  }
}




/* CONTACT HERO */
.contact-hero {
  background: #0B0C10;
  padding: 60px 6%;
  color: #E8EAED;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.contact-left h1 {
  font-size: 38px;
  color: #00D4FF;
  text-shadow: 0 0 10px #6A5BFF;
}

.contact-left p {
  color: #B0B3C3;
  font-size: 16px;
  max-width: 480px;
  line-height: 1.6;
}

/* contact hero photo */
.contact-photo img {
  width: 380px;
  border-radius: 14px;
  box-shadow: 0 0 25px rgba(0,212,255,0.2);
}

/* MAP */
.contact-map iframe {
  width: 100%;
  height: 350px;
  border: none;
  margin-top: 20px;
}

/* FORM SECTION */
.contact-form-sec {
  background: #0B0C10;
  padding: 50px 6%;
}

.form-title {
  text-align: center;
  font-size: 30px;
  color: #00D4FF;
  text-shadow: 0 0 10px #6A5BFF;
  margin-bottom: 25px;
}

form {
  max-width: 680px;
  margin: 0 auto;
  background: #11131A;
  padding: 30px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 0 28px rgba(0,212,255,0.1);
}

.form-group {
  margin-bottom: 18px;
}

label {
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
}

input, textarea {
  width: 100%;
  padding: 12px;
  background: #0F1014;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  color: #E8EAED;
  font-size: 15px;
  outline: none;
}

textarea {
  height: 120px;
  resize: none;
}

.error-msg {
  color: #FF4E4E;
  font-size: 13px;
  margin-top: 4px;
  display: block;
  height: 16px;
}

/* Submit Button */
.contact-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #6A5BFF, #00D4FF);
  color: white;
  font-weight: 700;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  font-size: 16px;
}

.contact-btn:hover {
  box-shadow: 0 8px 20px rgba(0,212,255,0.2);
}

/* RESPONSIVE */
@media(max-width: 850px) {
  .contact-hero {
    flex-direction: column;
    text-align: center;
  }
  .contact-photo img {
    width: 100%;
    max-width: 340px;
  }
}


/* SECTION */
.cart-section {
  padding: 40px;
  background-color: white;
}

.cart-section h2 {
  text-align: center;
  font-size: 32px;
  margin-bottom: 35px;
  font-weight: 700;
  color: #1a1a1a;
}

/* GRID */
.cart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}

/* PRODUCT CARD */
.product {
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid #eee;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  text-align: center;
  transition: 0.25s ease;
}

.product:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.15);
}

/* PRODUCT IMAGE */
.prod-img {
  width: 100%;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  margin-bottom: 15px;
}

/* PRODUCT DETAILS */
.product h3 {
  font-size: 20px;
  margin-bottom: 5px;
  color: #222;
}

.product p {
  font-size: 14px;
  color: #6b6b6b;
}

.price {
  display: block;
  margin: 10px 0;
  font-size: 18px;
  font-weight: bold;
  color: #000;
}

/* ADD TO CART LINK */
.cart-btn {
  display: inline-block;
  background: #111;
  color: #fff;
  padding: 10px 18px;
  font-size: 15px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: 0.3s ease;
}

.cart-btn:hover {
  background: #333;
}

/* CATEGORY COLORS */
.food {
  border-top: 4px solid #ff5722;
}

.auto {
  border-top: 4px solid #2196f3;
}

/* RESPONSIVE */
@media (max-width: 500px) {
  .cart-section {
    padding: 20px;
  }
  .prod-img {
    height: 130px;
  }
}