/* ============================================================================
   Sree ecosystem — shared static styles
   Base reset + link/selection styling + animation keyframes + hover utilities.
   Hover classes here replace the design prototype's runtime `style-hover`
   attribute so the site needs no framework/runtime to render.
   ============================================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Roboto",system-ui,sans-serif;color:#1f2937;background:#fffaf3;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#cc5500;text-decoration:none}
a:hover{color:#ff3b01}
::selection{background:rgba(255,153,20,.24)}
img{max-width:100%}

/* ---- keyframes (union across all pages) ---- */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes dash{to{stroke-dashoffset:-32}}
@keyframes tickerScroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes logoPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,59,1,.22)}50%{transform:scale(1.05);box-shadow:0 0 0 9px rgba(255,59,1,0)}}
@keyframes dotBlink{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes chipBreathe{0%,100%{opacity:.72;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ---- hover utilities (exact values from the prototype `style-hover`) ---- */
.hv-t1{transition:transform .16s}
.hv-t1:hover{transform:translateY(-1px)}
.hv-t2{transition:transform .16s,box-shadow .16s}
.hv-t2:hover{transform:translateY(-2px)}
.hv-navcta{transition:filter .16s,transform .16s}
.hv-navcta:hover{filter:brightness(1.05);transform:translateY(-1px)}
.hv-cta-primary{transition:transform .18s,box-shadow .18s}
.hv-cta-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(255,80,10,.36)}
.hv-outline{transition:border-color .18s,color .18s}
.hv-outline:hover{border-color:#ff9914;color:#cc5500}
.hv-ghost{transition:background .18s}
.hv-ghost:hover{background:rgba(255,255,255,.22)}
.hv-dark-btn{transition:background .18s}
.hv-dark-btn:hover{background:#3a2418}
.hv-link{transition:color .18s}
.hv-link:hover{color:#ff3b01}
.hv-arrow{transition:gap .18s,color .18s}
.hv-arrow:hover{gap:14px;color:#ff3b01}
.hv-card{transition:transform .18s cubic-bezier(.2,0,0,1),box-shadow .18s,border-color .18s}
.hv-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(124,45,18,.11);border-color:#ffcf95}
.hv-card-lg{transition:transform .18s,box-shadow .18s,border-color .18s}
.hv-card-lg:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(124,45,18,.11);border-color:#ffcf95}
.hv-dark-card{transition:border-color .2s,background .2s}
.hv-dark-card:hover{border-color:rgba(255,153,20,.5);background:rgba(255,255,255,.07)}

/* ecosystem card: top accent bar reveals on card hover */
.eco-card{transition:transform .18s cubic-bezier(.2,0,0,1),box-shadow .18s,border-color .18s}
.eco-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(124,45,18,.11);border-color:#ffcf95}
.eco-bar{opacity:0;transition:opacity .2s}
.eco-card:hover .eco-bar{opacity:1}

/* ---- site header / mobile nav ---- */
.nav-toggle{
  display:none;
  flex:none;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  padding:0;
  border:none;
  border-radius:11px;
  background:transparent;
  cursor:pointer;
  overflow:hidden;
  transition:transform .16s,box-shadow .16s;
}
.nav-toggle img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.site-header.nav-open .nav-toggle{
  box-shadow:0 0 0 2px rgba(255,153,20,.35);
  transform:scale(1.04);
}
body.nav-menu-open{overflow:hidden}

.header-end{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
}

/* ---- responsive: collapse grids + mobile navigation ---- */
@media (max-width:900px){
  .grid-2,.grid-hero,.grid-legal{grid-template-columns:1fr !important}
  .grid-3{grid-template-columns:1fr !important}
  .grid-4{grid-template-columns:repeat(2,1fr) !important}
  .grid-5{grid-template-columns:repeat(2,1fr) !important}
  .grid-legal>div:first-child{position:static !important}

  .header-inner{
    flex-wrap:wrap !important;
    height:auto !important;
    min-height:70px;
    padding-top:14px !important;
    padding-bottom:14px !important;
    align-items:center !important;
    row-gap:0;
  }
  .header-logo{
    flex:1;
    min-width:0;
  }
  .header-end{
    flex:none;
    margin-left:auto;
    gap:8px;
  }
  .nav-toggle{display:flex}
  .nav-actions{
    flex:none;
    margin-left:0;
  }
  .nav-links{
    display:none !important;
    order:10;
    width:100%;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:6px 0 2px;
    margin-top:12px;
    border-top:1px solid rgba(124,45,18,.09);
  }
  .nav-links a{
    display:block;
    padding:13px 4px !important;
    font-size:15px !important;
    border-bottom:1px solid rgba(124,45,18,.06);
    color:#17110e !important;
  }
  .nav-links a:last-child{border-bottom:none}
  .site-header.nav-open .nav-links{display:flex !important}
  .nav-actions .nav-signin{display:none}
  .nav-actions > a,
  .nav-actions a.hv-navcta{
    padding:9px 14px !important;
    font-size:13px !important;
    white-space:nowrap;
  }
}
@media (max-width:560px){
  .grid-4,.grid-5{grid-template-columns:1fr !important}
  .header-inner{padding-left:16px !important;padding-right:16px !important}
  .header-logo span{font-size:17px !important}
  .nav-actions > a,
  .nav-actions a.hv-navcta{
    padding:8px 12px !important;
    font-size:12px !important;
  }
}