/* Shared styles and enhanced UI/UX
   - Bring in smooth defaults and utility overrides
   - Add responsive layout helpers, hero animations fallback
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Oswald:wght@200..700&display=swap');
:root{--bg-main:#F5F5F5;--color-main:#2D3A42;--color-secondary:#4A5568;--color-border:#E5E7EB;--bg-accent:#00A896;--bg-dark-section:#2D3A42;--color-dark-section-text:#F5F5F5;--color-dark-section-secondary:#A0AEC0;--color-secondary-button-text:#4A5568}
.dark{--bg-main:#111827;--color-main:#E5E7EB;--color-secondary:#A0AEC0;--color-border:#374151;--bg-dark-section:#1F2937;--color-dark-section-text:#E5E7EB;--color-dark-section-secondary:#A0AEC0;--color-secondary-button-text:#E5E7EB}
*{box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:var(--bg-main);color:var(--color-main);min-height:100vh;margin:0;transition:background .35s,color .35s}
.stud-logo{font-family:'Oswald',sans-serif;color:var(--color-main);transition:color .25s}
/* Shared nav restored */
.nav{display:flex;gap:1rem;align-items:center}
.nav a{color:var(--color-main);text-decoration:none;padding:.5rem .5rem;border-radius:.35rem;position:relative;transition:color .3s ease}
.nav a:hover{color:var(--bg-accent)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--bg-accent);transition:width .3s cubic-bezier(.25,.8,.25,1)}
.nav a:hover::after,.nav a.active-nav::after{width:100%}

/* Desktop / Mobile split navigation */
.desktop-bar{display:flex;align-items:center;justify-content:space-between;height:68px}
.mobile-bar{display:none;align-items:center;justify-content:space-between;height:68px}
.nav-desktop{display:flex;gap:1rem;align-items:center}
.nav-mobile{display:none}
.mobile-toggle{display:none}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;padding:.55rem;border-radius:999px;color:var(--color-main);cursor:pointer;transition:color .3s,background .3s}
.theme-toggle:hover{color:var(--bg-accent)}
@keyframes menuSlide{0%{opacity:0;transform:translateX(-18px)}55%{opacity:1;transform:translateX(6px)}100%{opacity:1;transform:translateX(0)}}
@media(max-width:760px){
  .desktop-bar{display:none}
  .mobile-bar{display:flex}
  .mobile-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--color-border);border-radius:10px;background:var(--bg-main);color:var(--color-main);cursor:pointer;transition:color .3s,border-color .3s}
  .mobile-toggle i{transition:transform .3s ease}
  .mobile-toggle[aria-expanded="true"] i{transform:rotate(180deg)}
  .mobile-toggle:hover{color:var(--bg-accent);border-color:var(--bg-accent)}
  .nav-mobile.open{display:flex;flex-direction:column;position:absolute;top:68px;left:0;right:0;background:var(--bg-main);padding:.6rem 0 .75rem;border-bottom:1px solid var(--color-border);box-shadow:0 24px 46px rgba(0,0,0,.14);gap:.25rem;z-index:110;animation:menuSlide .3s cubic-bezier(.25,.8,.25,1) forwards;max-height:calc(100vh - 68px);overflow-y:auto}
  .nav-mobile.open a{padding:.65rem .95rem;border-radius:.5rem}
  .nav-mobile.open a:hover{background:var(--color-border);color:var(--bg-accent)}
}
@media(max-width:760px){body.dark .nav-mobile.open{background:var(--bg-dark-section);border-color:var(--color-border)}body.dark .mobile-toggle{background:var(--bg-dark-section);color:var(--color-main)}body.dark .nav-mobile.open a:hover{background:var(--color-border)}}

/* Backdrop for mobile menu */
.menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;z-index:100;transition:opacity .25s ease}
.menu-backdrop.show{opacity:1;pointer-events:auto}
body.dark .menu-backdrop{background:rgba(0,0,0,.55)}
.header{position:sticky;top:0;z-index:105;background:var(--bg-main);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(11,15,22,.06);border-bottom:1px solid var(--color-border)}
/* Header layout helpers */
.header .container{position:relative}
.header-right{display:flex;align-items:center;gap:1rem}
.header-actions{display:flex;align-items:center;gap:.5rem}
/* Animated color-changing bar at the very top of header */
.header::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-top-left-radius:2px;border-top-right-radius:2px;background:linear-gradient(90deg,#00A896,#06b6d4,#6366f1,#a855f7,#f59e0b,#ef4444,#00A896);background-size:400% 100%;animation:studColorBar 10s linear infinite}
@keyframes studColorBar{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.page{padding:2.5rem 1rem}
.hero{min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:3rem 1rem}
.hero h1{font-family:'Oswald',sans-serif;font-weight:800;letter-spacing:.02em;margin:0}
.stud-accent{color:var(--bg-accent)}
.btn{display:inline-block;padding:.85rem 1.25rem;border-radius:.6rem;font-weight:700;cursor:pointer}
.btn-primary{background:var(--bg-accent);color:var(--color-main);box-shadow:0 8px 30px rgba(0,168,150,.12);transition:transform .28s,box-shadow .28s}
.btn-primary:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,168,150,.18)}
.grid{display:grid;gap:1.25rem}
@media(min-width:768px){.grid-md-2{grid-template-columns:1fr 1fr}}
/* subtle card */
.card{background:var(--bg-main);border:1px solid var(--color-border);padding:1.25rem;border-radius:1rem;transition:transform .35s,box-shadow .35s}
.card:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(2,6,23,.08)}
/* image styles */
.img-rounded{width:100%;height:auto;border-radius:.9rem;border:1px solid var(--color-border);box-shadow:0 18px 40px rgba(2,6,23,.06)}
/* navigation active state */
.active-nav{color:var(--bg-accent);font-weight:800;border-bottom:2px solid var(--bg-accent)}
/* responsive container */
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
/* Swatch */
.color-swatch{width:44px;height:44px;border-radius:999px;border:2px solid rgba(0,0,0,.08);cursor:pointer;transition:transform .18s,box-shadow .18s}
.color-swatch.selected{transform:scale(1.12);box-shadow:0 8px 20px rgba(0,0,0,.12)}
/* Animated reveal helpers (GSAP handled, but keeping defaults for no-js) */
.reveal { visibility: hidden; } /* GSAP will handle visibility */

/* Micro-interactions & Hover States */
.btn-primary {
  background: var(--bg-accent);
  color: var(--color-main);
  box-shadow: 0 8px 30px rgba(0, 168, 150, 0.12);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s;
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(255,255,255,0.1);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-primary:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 168, 150, 0.25);
}

.btn-primary:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Navigation removed globally */

.card {
  background: var(--bg-main);
  border: 1px solid var(--color-border);
  padding: 1.25rem;
  border-radius: 1rem;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.15);
  border-color: var(--bg-accent);
}

.color-swatch {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}

.color-swatch:hover {
  transform: scale(1.25);
  z-index: 10;
}

/* Footer */
.footer{padding:2rem 1rem;text-align:center;border-top:1px solid var(--color-border);color:var(--color-secondary)}

/* Mobile friendly tweaks */
@media(max-width:640px){.hero h1{font-size:2.25rem}.btn{padding:.6rem .9rem}}

/* General mobile layout adjustments */
@media(max-width:780px){
  .page{padding:1.25rem .75rem}
  .card{padding:1rem}
  .container{padding:0 .75rem}
  .footer{padding:1.25rem .75rem}
  .hero{min-height:48vh;padding:2rem 0}
  .hero h1{font-size:clamp(1.6rem,7vw,2.4rem)}
  .hero p{font-size:.95rem}
  .stud-accent{font-size:1rem}
}

/* Product unified layout additions */
.product-gallery img{object-fit:cover}
/* Keep two images side-by-side for medium variant at all widths */
.product-gallery.medium{display:grid;grid-template-columns:repeat(2,1fr);justify-content:center;align-items:start;gap:1rem;max-width:760px;margin:0 auto}
.product-gallery.medium img{width:100%;max-width:340px;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--color-border);border-radius:.9rem;box-shadow:0 8px 22px rgba(2,6,23,.05);margin:0 auto}
@media(max-width:780px){
  .product-gallery:not(.medium){grid-template-columns:1fr;}
  .product-gallery.medium{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .product-gallery.medium{gap:.75rem;max-width:100%;}
  .product-gallery.medium img{max-width:100%;}
}

/* Removed menu toggle & overlay styles */

/* Contact grid responsive stacking */
@media(max-width:560px){
  .contact-grid{grid-template-columns:1fr !important}
}
@media(max-width:760px){body.dark .nav.open{background:var(--bg-dark-section);border-color:var(--color-border)}body.dark .mobile-toggle{background:var(--bg-dark-section);color:var(--color-main)}body.dark .nav.open a:hover{background:var(--color-border)}}
.card[data-product]{overflow:hidden}
.card[data-product] h2{font-family:'Oswald',sans-serif;letter-spacing:.03em}
.card[data-product] ul li{display:flex;align-items:center;font-size:.95rem}