/* ==========================================================================
   RYX SOFT — Design tokens
   ========================================================================== */
:root{
  --bg:            #0a0b0d;
  --bg-elevated:   #131519;
  --bg-card:       #16181d;
  --line:          #24272e;
  --ink:           #f4f5f7;
  --ink-dim:       #a7acb5;
  --ink-faint:     #6b7078;
  --orange:        #ff7a1f;
  --orange-2:      #ffab63;
  --orange-dim:    #4a2c14;

  --font-display: 'Archivo', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --container: 1240px;
  --transition: 220ms cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; line-height:1.08; letter-spacing:-0.01em; }
p{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--orange); color:#0a0b0d;
  padding:10px 16px; z-index:999; border-radius:0 0 8px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.section-head{
  max-width:var(--container); margin:0 auto; padding:0 24px 32px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(1.6rem,3vw,2.1rem); }
.section-head p{ color:var(--ink-dim); max-width:520px; margin-top:8px; }
.section-head span{ color:var(--orange); }
.see-all{ color:var(--orange); font-weight:600; white-space:nowrap; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:var(--radius-sm); font-weight:600; font-size:.95rem;
  border:1px solid transparent; transition:transform var(--transition), background var(--transition), border-color var(--transition);
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--orange); color:#0a0b0d; }
.btn-primary:hover{ background:var(--orange-2); }
.btn-outline{ border-color:rgba(255,255,255,.28); color:var(--ink); }
.btn-outline:hover{ border-color:var(--ink); background:rgba(255,255,255,.05); }
.btn-outline-light{ border:1px solid rgba(255,255,255,.4); color:#fff; }
.btn-outline-light:hover{ background:rgba(255,255,255,.1); }
.btn-block{ width:100%; }

/* ==========================================================================
   Topbar + Header
   ========================================================================== */
.topbar{ background:#050506; border-bottom:1px solid var(--line); font-size:.78rem; color:var(--ink-faint); }
.topbar-inner{
  max-width:var(--container); margin:0 auto; padding:7px 24px;
  display:flex; justify-content:space-between;
}
@media (max-width:640px){ .topbar-contact{ display:none; } }

.header{ position:sticky; top:0; z-index:60; background:rgba(10,11,13,.88); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.header-inner{
  max-width:var(--container); margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo{
  font-family:var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:.02em;
  display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap;
}
.logo-x{ color:var(--orange); }
.logo small{ font-family:var(--font-body); font-weight:600; font-size:.55rem; letter-spacing:.32em; color:var(--ink-dim); align-self:center; }

.nav{ display:flex; align-items:center; gap:30px; font-size:.92rem; font-weight:500; }
.nav > a{ color:var(--ink-dim); transition:color var(--transition); padding:6px 0; }
.nav > a:hover{ color:var(--ink); }
.nav-drop{ position:relative; }
.nav-drop-btn{ background:none; border:none; color:var(--ink-dim); font:inherit; display:flex; align-items:center; gap:6px; padding:6px 0; }
.nav-drop-btn:hover{ color:var(--ink); }
.nav-drop-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px);
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-sm);
  min-width:200px; padding:8px; opacity:0; pointer-events:none; transition:opacity var(--transition), transform var(--transition);
  box-shadow:0 20px 40px rgba(0,0,0,.4);
}
.nav-drop:hover .nav-drop-menu{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav-drop-menu a{ display:block; padding:9px 12px; border-radius:6px; color:var(--ink-dim); font-size:.88rem; }
.nav-drop-menu a:hover{ background:var(--bg-card); color:var(--ink); }

.header-actions{ display:flex; align-items:center; gap:6px; }
.icon-btn{
  background:none; border:none; color:var(--ink); width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; position:relative; transition:background var(--transition);
}
.icon-btn:hover{ background:var(--bg-card); }
.cart-count{
  position:absolute; top:2px; right:2px; background:var(--orange); color:#0a0b0d;
  font-size:.62rem; font-weight:800; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.hamburger span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }

.search-panel{ max-height:0; overflow:hidden; transition:max-height var(--transition); border-bottom:1px solid transparent; }
.search-panel.open{ max-height:90px; border-color:var(--line); }
.search-panel-inner{ max-width:var(--container); margin:0 auto; padding:18px 24px; display:flex; align-items:center; gap:14px; color:var(--ink-dim); }
.search-panel-inner input{
  flex:1; background:none; border:none; color:var(--ink); font-size:1.05rem; font-family:inherit;
}
.search-panel-inner input:focus{ outline:none; }
.search-panel-inner button{ background:none; border:none; color:var(--ink-dim); font-size:1.4rem; }

@media (max-width:960px){
  .nav{ display:none; }
  .hamburger{ display:flex; }
  .header.nav-open .nav{
    display:flex; position:fixed; inset:0 0 0 auto; top:var(--header-h,0); width:78%; max-width:340px; height:100vh;
    background:var(--bg-elevated); flex-direction:column; align-items:flex-start; padding:28px 26px; gap:6px;
    border-left:1px solid var(--line); z-index:70; overflow-y:auto;
  }
  .header.nav-open .nav-drop{ width:100%; }
  .header.nav-open .nav-drop-menu{ position:static; transform:none; opacity:1; pointer-events:auto; display:none; box-shadow:none; width:100%; margin-top:4px; }
  .header.nav-open .nav-drop.open .nav-drop-menu{ display:block; }
  .header.nav-open .nav > a, .header.nav-open .nav-drop-btn{ width:100%; padding:12px 4px; border-bottom:1px solid var(--line); justify-content:space-between; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; background:#000 radial-gradient(ellipse at 75% 40%, #1a1305 0%, #000 62%); }
.hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.85; }
.hero-gradient{ position:absolute; inset:0; background:linear-gradient(90deg, #000 8%, rgba(0,0,0,.75) 38%, rgba(0,0,0,.15) 70%), linear-gradient(0deg, #000 0%, transparent 30%); }
.hero-inner{ position:relative; max-width:var(--container); margin:0 auto; padding:100px 24px 60px; width:100%; }
.hero-copy{ max-width:640px; }
.hero-copy h1{ font-size:clamp(2.4rem,5.6vw,4.2rem); font-weight:800; color:#fff; }
.hero-copy h1 span{ color:var(--orange); }
.hero-copy p{ margin-top:20px; font-size:1.12rem; color:#d8dae0; max-width:460px; }
.hero-cta{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero-badges{ display:flex; gap:28px; flex-wrap:wrap; margin-top:52px; }
.hero-badges li{ display:flex; align-items:center; gap:9px; font-size:.82rem; color:#c7cad0; font-weight:500; }
.hero-badges svg{ color:var(--orange); flex-shrink:0; }

@media (max-width:640px){
  .hero{ min-height:80vh; }
  .hero-badges{ gap:16px 22px; }
}

/* ==========================================================================
   Category strip
   ========================================================================== */
.cat-strip{ background:var(--bg-elevated); border-bottom:1px solid var(--line); padding:0 0; }
.cat-strip-inner{
  max-width:var(--container); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line);
  border-left:1px solid var(--line); border-right:1px solid var(--line);
}
.cat-card{
  background:var(--bg-elevated); padding:26px 16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  transition:background var(--transition);
}
.cat-card:hover{ background:var(--bg-card); }
.cat-card img{ width:56px; height:56px; object-fit:cover; border-radius:12px; background:var(--bg-card); }
.cat-card span{ font-weight:600; font-size:.88rem; }
.cat-card small{ color:var(--orange); font-size:.74rem; opacity:0; transition:opacity var(--transition); }
.cat-card:hover small{ opacity:1; }

@media (max-width:900px){ .cat-strip-inner{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .cat-strip-inner{ grid-template-columns:repeat(2,1fr); } }

/* ==========================================================================
   Finder
   ========================================================================== */
.finder{ max-width:var(--container); margin:88px auto; padding:0 24px; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.finder-copy h2{ font-size:clamp(1.7rem,3.4vw,2.3rem); }
.finder-copy h2 span{ color:var(--orange); }
.finder-copy p{ color:var(--ink-dim); margin-top:14px; max-width:460px; }
.finder-form{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:28px; }
.finder-form select{
  grid-column:span 1; background:var(--bg-card); border:1px solid var(--line); color:var(--ink);
  padding:13px 14px; border-radius:var(--radius-sm); font-family:inherit; font-size:.92rem; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a7acb5' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.finder-form button{ grid-column:1/-1; margin-top:6px; }
.brands-row{ margin-top:36px; }
.brands-label{ display:block; font-size:.72rem; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:14px; }
.brands-logos{ display:flex; flex-wrap:wrap; gap:22px; }
.brands-logos span{ font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--ink-faint); }
.finder-visual img{ border-radius:var(--radius-lg); width:100%; }

@media (max-width:900px){
  .finder{ grid-template-columns:1fr; }
  .finder-visual{ order:-1; }
}
@media (max-width:520px){ .finder-form{ grid-template-columns:1fr; } }

/* ==========================================================================
   Products
   ========================================================================== */
.products{ max-width:var(--container); margin:88px auto; padding:0 24px; }
.products-track-wrap{ position:relative; }
.products-track{
  display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:8px;
  scrollbar-width:none;
}
.products-track::-webkit-scrollbar{ display:none; }

.product-card{
  flex:0 0 260px; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; display:flex; flex-direction:column; transition:border-color var(--transition), transform var(--transition);
}
.product-card:hover{ border-color:#3a3f48; transform:translateY(-3px); }
.product-media{ position:relative; aspect-ratio:1/1; background:linear-gradient(160deg,#1b1d22,#101114); display:flex; align-items:center; justify-content:center; }
.product-media img{ width:100%; height:100%; object-fit:cover; }
.product-tag{
  position:absolute; top:10px; left:10px; background:var(--orange); color:#0a0b0d;
  font-size:.66rem; font-weight:800; padding:4px 9px; border-radius:20px; text-transform:uppercase; letter-spacing:.03em;
}
.product-tag.alt{ background:#2a6df0; color:#fff; }
.product-body{ padding:16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product-name{ font-size:.92rem; font-weight:600; line-height:1.35; min-height:2.6em; }
.product-price{ margin-top:auto; }
.product-price strong{ font-size:1.12rem; font-weight:800; }
.product-price small{ display:block; color:var(--ink-faint); font-size:.72rem; margin-top:2px; }
.product-add{
  margin-top:10px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:transparent; border:1px solid var(--line); color:var(--ink); border-radius:var(--radius-sm);
  padding:10px; font-weight:600; font-size:.85rem; transition:background var(--transition), border-color var(--transition);
}
.product-add:hover{ background:var(--orange); border-color:var(--orange); color:#0a0b0d; }

.track-nav{
  position:absolute; top:40%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%;
  background:var(--bg-elevated); border:1px solid var(--line); color:var(--ink); font-size:1.3rem;
  display:flex; align-items:center; justify-content:center; z-index:5;
}
.track-nav.prev{ left:-21px; } .track-nav.next{ right:-21px; }
@media (max-width:700px){ .track-nav{ display:none; } }

/* ==========================================================================
   Tech banner
   ========================================================================== */
.tech-banner{ background:var(--bg-elevated); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:80px 0; }
.tech-banner-inner{
  max-width:var(--container); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:.9fr 1fr; grid-template-rows:auto auto; gap:40px 56px;
}
.tech-copy{ grid-column:1; grid-row:1; align-self:center; }
.tech-copy h2{ font-size:clamp(1.6rem,3vw,2.1rem); max-width:420px; }
.tech-copy p{ color:var(--ink-dim); margin:16px 0 26px; max-width:400px; }
.tech-image{ grid-column:2; grid-row:1/3; }
.tech-image img{ border-radius:var(--radius-lg); width:100%; height:100%; object-fit:cover; }
.tech-list{ grid-column:1; grid-row:2; display:flex; flex-direction:column; gap:18px; }
.tech-list li{ display:flex; gap:14px; }
.tech-list svg{ color:var(--orange); flex-shrink:0; margin-top:2px; }
.tech-list strong{ display:block; font-size:.95rem; margin-bottom:2px; }
.tech-list span{ color:var(--ink-dim); font-size:.85rem; }

@media (max-width:860px){
  .tech-banner-inner{ grid-template-columns:1fr; }
  .tech-image{ grid-column:1; grid-row:1; }
  .tech-copy{ grid-column:1; grid-row:2; }
  .tech-list{ grid-column:1; grid-row:3; }
}

/* ==========================================================================
   Solutions
   ========================================================================== */
.solutions{ max-width:var(--container); margin:88px auto; padding:0 24px; }
.solutions-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.solution-card{ position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/3; }
.solution-card img{ width:100%; height:100%; object-fit:cover; transition:transform 400ms ease; }
.solution-card:hover img{ transform:scale(1.06); }
.solution-overlay{
  position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.88) 10%, rgba(0,0,0,.1) 65%);
  padding:22px; display:flex; flex-direction:column; justify-content:flex-end;
}
.solution-overlay h3{ font-size:1.15rem; color:#fff; }
.solution-overlay p{ color:#c9ccd2; font-size:.85rem; margin-top:6px; }
.solution-overlay span{ color:var(--orange); font-size:.82rem; font-weight:600; margin-top:12px; }

@media (max-width:800px){ .solutions-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   About / stats
   ========================================================================== */
.about{ position:relative; padding:110px 24px; overflow:hidden; }
.about-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.about-overlay{ position:absolute; inset:0; background:linear-gradient(100deg, #000 20%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.25) 100%); }
.about-inner{ position:relative; max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
.eyebrow{ color:var(--orange); font-weight:700; font-size:.82rem; letter-spacing:.06em; }
.about-copy h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); color:#fff; margin-top:10px; max-width:480px; }
.about-copy p{ color:#c7cad0; margin:18px 0 28px; max-width:460px; }
.about-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.about-stats div{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-md); padding:22px 16px; text-align:center; backdrop-filter:blur(6px); }
.about-stats strong{ display:block; font-family:var(--font-display); font-size:2rem; font-weight:800; color:var(--orange); }
.about-stats span{ font-size:.76rem; color:#c7cad0; }

@media (max-width:860px){ .about-inner{ grid-template-columns:1fr; } }

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-elevated); }
.trust-inner{ max-width:var(--container); margin:0 auto; padding:34px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.trust-inner > div{ display:flex; align-items:center; gap:12px; }
.trust-inner svg{ color:var(--orange); flex-shrink:0; }
.trust-inner strong{ display:block; font-size:.88rem; }
.trust-inner span{ color:var(--ink-faint); font-size:.76rem; }
@media (max-width:760px){ .trust-inner{ grid-template-columns:repeat(2,1fr); } }

/* ==========================================================================
   SEO block
   ========================================================================== */
.seo-block{ max-width:900px; margin:80px auto; padding:0 24px; }
.seo-block h2{ font-size:1.4rem; margin-bottom:16px; }
.seo-block p{ color:var(--ink-dim); font-size:.92rem; margin-top:12px; }
.seo-block strong{ color:var(--ink); font-weight:600; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ background:#050506; border-top:1px solid var(--line); }
.footer-top{
  max-width:var(--container); margin:0 auto; padding:64px 24px 40px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:40px;
}
.footer-brand p{ color:var(--ink-faint); font-size:.85rem; margin:16px 0 20px; max-width:280px; }
.logo-footer{ font-size:1.4rem; }
.social-row{ display:flex; gap:10px; }
.social-row a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-dim); transition:border-color var(--transition), color var(--transition); }
.social-row a:hover{ border-color:var(--orange); color:var(--orange); }

.footer-col{ display:flex; flex-direction:column; gap:11px; }
.footer-col h4{ font-size:.82rem; color:var(--ink); margin-bottom:6px; }
.footer-col a, .footer-col span{ color:var(--ink-faint); font-size:.85rem; }
.footer-col a:hover{ color:var(--orange); }

.news-form{ display:flex; margin-top:6px; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.news-form input{ flex:1; background:none; border:none; padding:12px 14px; color:var(--ink); font-family:inherit; font-size:.85rem; min-width:0; }
.news-form input:focus{ outline:none; }
.news-form button{ background:var(--orange); color:#0a0b0d; border:none; padding:0 16px; font-weight:700; font-size:.85rem; }

.footer-bottom{
  border-top:1px solid var(--line); max-width:var(--container); margin:0 auto; padding:22px 24px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  color:var(--ink-faint); font-size:.78rem;
}
.payments{ display:flex; gap:14px; font-weight:700; letter-spacing:.02em; }

@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }

/* ==========================================================================
   Cart drawer
   ========================================================================== */
.cart-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity var(--transition); z-index:80; }
.cart-overlay.open{ opacity:1; pointer-events:auto; }

.cart-drawer{
  position:fixed; top:0; right:0; height:100vh; width:100%; max-width:400px; background:var(--bg-elevated);
  border-left:1px solid var(--line); transform:translateX(100%); transition:transform var(--transition);
  z-index:90; display:flex; flex-direction:column;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-head{ display:flex; justify-content:space-between; align-items:center; padding:20px 22px; border-bottom:1px solid var(--line); }
.cart-head button{ background:none; border:none; color:var(--ink); font-size:1.6rem; line-height:1; }
.cart-items{ flex:1; overflow-y:auto; padding:18px 22px; display:flex; flex-direction:column; gap:16px; }
.cart-empty{ color:var(--ink-faint); text-align:center; margin-top:40px; font-size:.9rem; }

.cart-item{ display:flex; gap:12px; }
.cart-item img{ width:64px; height:64px; border-radius:10px; object-fit:cover; background:var(--bg-card); flex-shrink:0; }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-info h5{ font-size:.85rem; font-weight:600; margin:0 0 4px; }
.cart-item-price{ color:var(--orange); font-weight:700; font-size:.85rem; }
.cart-item-qty{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.cart-item-qty button{ width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--ink); font-size:.9rem; display:flex; align-items:center; justify-content:center; }
.cart-item-remove{ background:none; border:none; color:var(--ink-faint); font-size:.75rem; margin-top:8px; text-decoration:underline; }

.cart-foot{ padding:20px 22px; border-top:1px solid var(--line); }
.cart-total-row{ display:flex; justify-content:space-between; margin-bottom:14px; font-size:.95rem; }

/* ==========================================================================
   Toast
   ========================================================================== */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); z-index:100;
  background:var(--ink); color:#0a0b0d; padding:13px 22px; border-radius:30px; font-weight:600; font-size:.86rem;
  opacity:0; pointer-events:none; transition:opacity var(--transition), transform var(--transition);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes heroFadeUp{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes floatY{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,122,31,.45); }
  50%{ box-shadow:0 0 0 10px rgba(255,122,31,0); }
}
@keyframes ticketShine{
  0%{ background-position:-200% 0; }
  100%{ background-position:200% 0; }
}

.hero-copy h1{ animation:heroFadeUp 800ms cubic-bezier(.16,1,.3,1) both; }
.hero-copy p{ animation:heroFadeUp 800ms cubic-bezier(.16,1,.3,1) 120ms both; }
.hero-cta{ animation:heroFadeUp 800ms cubic-bezier(.16,1,.3,1) 220ms both; }
.hero-badges{ animation:heroFadeUp 800ms cubic-bezier(.16,1,.3,1) 320ms both; }
.hero-bg{ animation:fadeIn 1200ms ease both; }

.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.35) 45%, transparent 70%);
  background-size:200% 100%; background-position:-200% 0; pointer-events:none;
}
.btn-primary:hover::after{ animation:ticketShine 1100ms ease; }

.cart-btn{ transition:background var(--transition), transform 220ms ease; }
.cart-count{ transition:transform 260ms cubic-bezier(.34,1.56,.64,1); }
.cart-bump{ animation:pulseGlow 700ms ease; }
.cart-bump .cart-count{ transform:scale(1.35); }

.cat-card img{ transition:transform 420ms cubic-bezier(.16,1,.3,1); }
.cat-card:hover img{ transform:scale(1.08) rotate(-1deg); }

.finder-visual img{ animation:floatY 6s ease-in-out infinite; }

.about-stats div{ transition:transform var(--transition), border-color var(--transition); }
.about-stats div:hover{ transform:translateY(-4px); border-color:rgba(255,122,31,.5); }

.social-row a, .icon-btn{ transition:background var(--transition), color var(--transition), transform var(--transition); }
.icon-btn:active{ transform:scale(.9); }

/* Scroll reveal */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 700ms cubic-bezier(.16,1,.3,1), transform 700ms cubic-bezier(.16,1,.3,1); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger.is-visible > *{ animation:heroFadeUp 650ms cubic-bezier(.16,1,.3,1) both; }
.reveal-stagger.is-visible > *:nth-child(1){ animation-delay:0ms; }
.reveal-stagger.is-visible > *:nth-child(2){ animation-delay:80ms; }
.reveal-stagger.is-visible > *:nth-child(3){ animation-delay:160ms; }
.reveal-stagger.is-visible > *:nth-child(4){ animation-delay:240ms; }
.reveal-stagger.is-visible > *:nth-child(5){ animation-delay:320ms; }
.reveal-stagger.is-visible > *:nth-child(6){ animation-delay:400ms; }

.header{ transition:box-shadow 260ms ease, background 260ms ease; }
.header.scrolled{ box-shadow:0 10px 30px rgba(0,0,0,.35); }

.search-empty{ color:var(--ink-faint); text-align:center; padding:60px 24px; grid-column:1/-1; }

/* ==========================================================================
   Extra motion — micro-interações
   ========================================================================== */

/* Botões: leve elevação + sombra ao passar o mouse */
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(255,122,31,.35); }
.btn-outline:hover, .btn-outline-light:hover{ transform:translateY(-2px); }

/* Logo: leve "respiração" no X ao passar o mouse */
.logo-x{ display:inline-block; transition:transform 320ms cubic-bezier(.34,1.56,.64,1), text-shadow 320ms ease; }
.logo:hover .logo-x{ transform:scale(1.18) rotate(-6deg); text-shadow:0 0 14px rgba(255,122,31,.65); }

/* Nav: sublinhado animado */
.nav > a{ position:relative; }
.nav > a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--orange);
  transition:right 260ms cubic-bezier(.16,1,.3,1);
}
.nav > a:hover::after{ right:0; }

/* Ícones do header: pop ao passar o mouse / clicar */
.icon-btn:hover{ transform:translateY(-2px) scale(1.06); }
.cart-btn:hover{ transform:translateY(-2px) scale(1.08) rotate(-4deg); }

/* Setas do carrossel de produtos */
.track-nav{ transition:background var(--transition), transform 200ms ease, border-color var(--transition); }
.track-nav:hover{ transform:translateY(-50%) scale(1.1); }
.track-nav:active{ transform:translateY(-50%) scale(.92); }

/* Cards de produto: leve rotação 3D suave + zoom na imagem */
.product-card{ will-change:transform; }
.product-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.45); }
.product-media img{ transition:transform 520ms cubic-bezier(.16,1,.3,1); }
.product-card:hover .product-media img{ transform:scale(1.08); }
.product-tag{ animation:tagPop 480ms cubic-bezier(.34,1.56,.64,1) both; }

/* Botão "Adicionar": pulso de confirmação quando clicado */
.product-add{ position:relative; overflow:hidden; }
.product-add.added-pulse{ animation:addPulse 480ms ease; }
.product-add.added-pulse svg{ animation:addCheckSpin 480ms ease; }

/* Categoria: cards sobem levemente */
.cat-card{ transition:background var(--transition), transform 260ms ease; }
.cat-card:hover{ transform:translateY(-4px); }

/* Soluções: leve zoom + overlay subindo */
.solution-card{ overflow:hidden; }
.solution-overlay{ transition:transform 420ms cubic-bezier(.16,1,.3,1); }
.solution-card:hover .solution-overlay{ transform:translateY(-6px); }
.solution-card:hover img{ transform:scale(1.06); }

/* Item do carrinho: entra deslizando quando adicionado/renderizado */
.cart-item{ animation:cartItemIn 380ms cubic-bezier(.16,1,.3,1) both; }
.cart-item-qty button{ transition:background var(--transition), transform 160ms ease; }
.cart-item-qty button:active{ transform:scale(.85); }
.cart-item-remove{ transition:color var(--transition); }

/* Drawer do carrinho: pequeno "respiro" elástico ao abrir */
.cart-drawer.open{ animation:drawerPop 420ms cubic-bezier(.2,.9,.3,1.15); }

/* Toast mais vivo */
.toast{ transition:opacity 320ms ease, transform 320ms cubic-bezier(.2,.9,.3,1.2); }

/* Contadores da seção "Sobre" com leve escala ao entrar em foco */
.about-stats strong{ display:inline-block; }

/* Card de produto "voando" até o carrinho */
.fly-to-cart{
  position:fixed; z-index:999; object-fit:cover; pointer-events:none;
  border-radius:var(--radius-md); box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 0 2px rgba(255,122,31,.35);
  transition:
    left 750ms cubic-bezier(.42,0,.2,1),
    top 750ms cubic-bezier(.55,-0.4,.3,1.3),
    width 750ms cubic-bezier(.42,0,.2,1),
    height 750ms cubic-bezier(.42,0,.2,1),
    opacity 750ms ease 250ms,
    transform 750ms cubic-bezier(.42,0,.2,1),
    border-radius 750ms ease;
  will-change: left, top, width, height, transform, opacity;
}

/* Trilha "poeira de energia" atrás do card voador */
.fly-spark{
  position:fixed; z-index:998; width:8px; height:8px; border-radius:50%;
  background:var(--orange); pointer-events:none; opacity:.9;
  box-shadow:0 0 10px 2px rgba(255,122,31,.8);
  animation:sparkFade 600ms ease forwards;
}

@keyframes tagPop{
  0%{ transform:scale(0); opacity:0; }
  70%{ transform:scale(1.15); opacity:1; }
  100%{ transform:scale(1); }
}
@keyframes addPulse{
  0%{ background:var(--bg-card); border-color:var(--line); }
  35%{ background:var(--orange); border-color:var(--orange); color:#0a0b0d; transform:scale(1.04); }
  100%{ transform:scale(1); }
}
@keyframes addCheckSpin{
  0%{ transform:rotate(0) scale(1); }
  50%{ transform:rotate(180deg) scale(1.3); }
  100%{ transform:rotate(360deg) scale(1); }
}
@keyframes cartItemIn{
  from{ opacity:0; transform:translateX(24px) scale(.96); }
  to{ opacity:1; transform:translateX(0) scale(1); }
}
@keyframes drawerPop{
  0%{ transform:translateX(100%); }
  70%{ transform:translateX(-1.5%); }
  100%{ transform:translateX(0); }
}
@keyframes sparkFade{
  0%{ transform:translate(0,0) scale(1); opacity:.9; }
  100%{ transform:translate(var(--sx,0), var(--sy,0)) scale(0); opacity:0; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  .hero-copy h1, .hero-copy p, .hero-cta, .hero-badges, .hero-bg, .finder-visual img{ animation:none !important; }
  .fly-to-cart, .fly-spark{ display:none !important; }
}