/* ============================================================
   IFFYSHOP.COM — shared stylesheet (Homepage / Products / Contact)
   Design language: dark, institutional, single accent, minimal motion.
   ============================================================ */

:root{
  --bg:#0A0D13;
  --panel:#10141C;
  --panel-alt:#151A24;
  --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.05);
  --text:#F2F4F7;
  --muted:#8D96A6;
  --gold:#C9A461;
  --gold-dim:rgba(201,164,97,.12);
  --radius:12px;
  --radius-sm:8px;
  --maxw:1240px;
  --nav-h:72px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:600;
  letter-spacing:-0.02em;
  margin:0 0 .6em;
  color:var(--text);
}
p{margin:0 0 1em; color:var(--text);}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit;}
img,svg{max-width:100%; display:block;}
.mono{font-family:'IBM Plex Mono',monospace;}

/* ============ LAYOUT UTILITIES ============ */
.section{max-width:var(--maxw); margin:0 auto; padding:9vh 6vw;}
.section-head{max-width:680px; margin-bottom:4.5vh;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  color:var(--gold);
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:1rem;
}
.section-sub{color:var(--muted); font-size:1.02rem; max-width:560px;}
.text-link{color:var(--gold); font-weight:500; border-bottom:1px solid transparent; transition:border-color .2s ease;}
.text-link:hover{border-color:var(--gold);}
.hairline{border:none; border-top:1px solid var(--line); margin:0;}

/* buttons — flat, no glow, no shine sweep */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.8rem;
  border-radius:100px;
  font-weight:500; font-size:.94rem;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-solid{background:var(--gold); color:#0A0D13;}
.btn-solid:hover{background:#dcb87c;}
.btn-ghost{border:1px solid var(--line); color:var(--text);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}
.btn-text{color:var(--muted);}
.btn-text:hover{color:var(--text);}

/* ============ ACCESSIBILITY / MOTION ============ */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}

/* single, restrained reveal-on-scroll — no loops, no parallax */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* ============ NAV ============ */
#site-nav{
  position:sticky; top:0; left:0; right:0; z-index:200;
  height:var(--nav-h);
  background:rgba(10,13,19,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; height:100%;
  padding:0 6vw;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.nav-logo{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem;
  display:flex; align-items:center; gap:.55rem;
}
.nav-logo span{color:var(--gold);}
.nav-links{display:flex; gap:2.2rem; flex:1; justify-content:center;}
.nav-links a{font-size:.9rem; color:var(--muted); transition:color .2s ease;}
.nav-links a:hover, .nav-links a.active{color:var(--text);}
.nav-cta{padding:.6rem 1.4rem; font-size:.85rem;}
#nav-toggle{display:none; width:30px; height:20px; flex-direction:column; justify-content:space-between;}
#nav-toggle span{display:block; height:1.5px; background:var(--text); border-radius:2px;}

#mobile-menu{
  display:none;
  position:fixed; top:var(--nav-h); left:0; right:0; bottom:0;
  background:var(--bg);
  flex-direction:column; gap:1.4rem;
  padding:2.5rem 6vw;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:190;
}
#mobile-menu.open{opacity:1; transform:translateY(0); pointer-events:auto;}
#mobile-menu a{font-size:1.2rem; color:var(--text);}

/* ============ HERO (homepage) ============ */
#hero{
  max-width:var(--maxw); margin:0 auto;
  padding:8vh 6vw 6vh;
  display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center;
}
.hero-copy .eyebrow{display:flex; align-items:center; gap:.6rem;}
.eyebrow-dot{width:6px; height:6px; border-radius:50%; background:var(--gold); display:inline-block;}
.hero-title{font-size:clamp(2.2rem, 4.6vw, 3.6rem); line-height:1.08; margin-bottom:1.2rem;}
.hero-title .accent{color:var(--gold);}
.hero-sub{color:var(--muted); font-size:1.1rem; max-width:480px;}
.hero-actions{display:flex; gap:1rem; margin-top:1.6rem; flex-wrap:wrap;}
.hero-visual{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2rem;
}
.hero-visual svg{width:100%; height:auto;}

/* ============ STACK DIAGRAM (signature element) ============ */
.stack-node-label{font-family:'IBM Plex Mono',monospace; font-size:11px; fill:var(--muted); letter-spacing:.04em;}
.stack-node-title{font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:600; fill:var(--text);}
.stack-line{stroke:var(--line); stroke-width:1;}
.stack-line-draw{
  stroke-dasharray:400; stroke-dashoffset:400;
  animation:drawLine 1.4s ease forwards;
}
@keyframes drawLine{to{stroke-dashoffset:0;}}
.stack-dot{fill:var(--gold);}
.stack-box{fill:var(--panel-alt); stroke:var(--line); stroke-width:1;}

/* ============ TRUST BAR ============ */
.trust-bar{border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:var(--panel);}
.trust-inner{
  max-width:var(--maxw); margin:0 auto; padding:3vh 6vw;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem;
}
.trust-stat{display:flex; flex-direction:column; gap:.2rem;}
.trust-num{font-size:1.7rem; color:var(--gold); font-weight:500;}
.trust-num .suffix{font-size:1rem; margin-left:.1rem;}
.trust-label{font-size:.76rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase;}
.trust-divider{width:1px; height:32px; background:var(--line);}

/* ============ CARD GRIDS (audiences / pillars / catalog / featured) ============ */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem;}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.9rem 1.6rem;
  transition:border-color .2s ease;
}
.card:hover{border-color:rgba(201,164,97,.35);}
.card h3{font-size:1.08rem;}
.card p{color:var(--muted); font-size:.92rem; margin-bottom:0;}

.icon-badge{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:10px;
  background:var(--gold-dim); color:var(--gold);
  margin-bottom:1.1rem;
}
.icon-badge svg{width:20px; height:20px;}

.card-tag{
  display:inline-block; color:var(--gold); font-size:.82rem;
  margin-bottom:1rem; padding:.25rem .65rem;
  border:1px solid var(--line); border-radius:100px;
}

/* ============ TABS (products page) ============ */
.tabs{display:flex; gap:.4rem; margin-bottom:2.6rem; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.tab-btn{
  padding:.85rem 1.5rem; color:var(--muted); font-size:.92rem; font-weight:500;
  border-bottom:2px solid transparent; transform:translateY(1px);
  transition:color .2s ease, border-color .2s ease;
}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--gold); border-color:var(--gold);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ============ INFOGRAPHICS (products page) ============ */
.infographic{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2.4rem;
  margin-top:1rem;
}
.infographic-title{font-size:1.2rem; margin-bottom:.4rem;}
.infographic-sub{color:var(--muted); font-size:.92rem; margin-bottom:2rem; max-width:520px;}
.flow-row{display:flex; align-items:center; gap:0; overflow-x:auto; padding-bottom:.5rem;}
.flow-step{
  flex:1 1 0; min-width:150px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.8rem;
  padding:0 .5rem;
}
.flow-step .icon-badge{margin-bottom:0;}
.flow-step h4{font-size:.95rem; margin:0;}
.flow-step p{font-size:.82rem; color:var(--muted); margin:0;}
.flow-arrow{flex:0 0 auto; color:var(--line); font-size:1.4rem; margin:0 -.2rem;}

/* ============ FEATURED PRODUCTS (homepage teaser) ============ */
.featured-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;}
.featured-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem; transition:border-color .2s ease;
}
.featured-card:hover{border-color:rgba(201,164,97,.35);}
.featured-visual{
  width:100%; aspect-ratio:4/3; border-radius:var(--radius-sm);
  background:var(--panel-alt); border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.2rem; color:var(--gold);
}
.featured-visual svg{width:38%; height:38%;}
.featured-card h3{font-size:1rem; margin-bottom:.3rem;}
.featured-card p{font-size:.88rem; color:var(--muted); margin-bottom:0;}

/* ============ TESTIMONIALS ============ */
.testimonial-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem;}
.testimonial-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem;}
.testimonial-card p{font-size:1rem; color:var(--text);}
.testimonial-author{display:flex; align-items:center; gap:.7rem; margin-top:1.2rem;}
.author-avatar{
  width:34px; height:34px; border-radius:50%; background:var(--gold-dim); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:.74rem; border:1px solid rgba(201,164,97,.3);
}
.author-name{font-weight:500; font-size:.9rem;}
.author-loc{color:var(--muted); font-size:.78rem; display:block;}

/* ============ FAQ ============ */
.faq-list{display:flex; flex-direction:column; gap:.7rem;}
.faq-item{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.1rem 1.4rem;}
.faq-item summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:'Space Grotesk',sans-serif; font-size:.98rem; font-weight:600;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-icon{flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:1px solid var(--line); position:relative;}
.faq-icon::before,.faq-icon::after{content:''; position:absolute; background:var(--gold); top:50%; left:50%; transform:translate(-50%,-50%);}
.faq-icon::before{width:8px; height:1.3px;}
.faq-icon::after{width:1.3px; height:8px; transition:opacity .2s ease;}
.faq-item[open] .faq-icon::after{opacity:0;}
.faq-item p{color:var(--muted); font-size:.9rem; margin:.9rem 0 0;}

/* ============ STEPS (how it works) ============ */
.steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;}
.step-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem;}
.step-num{display:block; color:var(--gold); font-size:1.4rem; opacity:.6; margin-bottom:.8rem;}
.step-card h3{font-size:1.05rem;}
.step-card p{color:var(--muted); font-size:.9rem; margin-bottom:0;}

/* ============ PARTNER STRIP (static, no marquee) ============ */
.partner-strip{
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  background:var(--panel);
}
.partner-inner{
  max-width:var(--maxw); margin:0 auto; padding:2.6vh 6vw;
  display:flex; align-items:center; justify-content:center; gap:2.4rem; flex-wrap:wrap;
}
.partner-label{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.partner-badge{font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:.06em; font-size:.98rem; color:var(--text);}

/* ============ CTA ============ */
.cta-box{
  text-align:center; padding:6vh 6vw;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
}
.cta-box p{color:var(--muted); max-width:480px; margin:0 auto 1.8rem;}
.cta-actions{display:flex; justify-content:center; gap:1rem; flex-wrap:wrap;}

/* ============ CONTACT PAGE ============ */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem;}
.contact-info-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:2rem;}
.contact-info-card h3{font-size:1rem; margin-bottom:1.4rem;}
.contact-details{display:flex; flex-direction:column; gap:1.2rem; margin-bottom:1.6rem;}
.contact-details li{font-size:.98rem;}
.contact-details .label{display:block; color:var(--gold); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.3rem;}
.contact-details a:hover{color:var(--gold);}
.map-frame{border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line); height:220px;}
.map-frame iframe{width:100%; height:100%; border:0; filter:grayscale(.3) invert(.92) contrast(.9);}

.contact-form{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:2rem; display:flex; flex-direction:column; gap:1.1rem;}
.contact-form label{display:flex; flex-direction:column; gap:.5rem; font-size:.85rem; color:var(--muted);}
.contact-form input, .contact-form textarea, .contact-form select{
  background:var(--panel-alt); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.8rem 1rem; color:var(--text); font-family:inherit; font-size:.95rem; resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{border-color:var(--gold); outline:none;}
.form-note{color:var(--gold); font-size:.86rem; min-height:1.2em; margin:0;}

/* ============ PRODUCT PHOTO TILES ============ */
.photo-tile{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
}
.photo-tile.light{background:#F4F1EC;}
.photo-tile.dark{background:var(--panel-alt);}
.photo-tile img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-tile.ratio-4-3{aspect-ratio:4/3;}
.photo-tile.ratio-16-9{aspect-ratio:16/9;}
.photo-tile.ratio-1-1{aspect-ratio:1/1;}
.photo-caption{font-size:.78rem; color:var(--muted); margin-top:.6rem; text-align:center;}

/* ============ IMAGE + TEXT SECTION ============ */
.split-section{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;}
.split-section.reverse{direction:rtl;}
.split-section.reverse > *{direction:ltr;}
.split-copy p{color:var(--muted);}

@media (max-width:900px){
  .split-section{grid-template-columns:1fr;}
}

/* ============ HERO PHOTO VARIANT ============ */
.hero-photo-frame{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  background:var(--panel-alt);
}
.hero-photo-frame img{width:100%; height:100%; object-fit:cover; display:block;}

/* ============ PAGE HEADER (products / contact) ============ */
.page-header{max-width:var(--maxw); margin:0 auto; padding:7vh 6vw 3vh;}
.page-header h1{font-size:clamp(1.9rem, 4vw, 2.8rem); margin-bottom:.8rem;}
.page-header p{color:var(--muted); max-width:600px; font-size:1.05rem;}

/* ============ FOOTER ============ */
#site-footer{border-top:1px solid var(--line); padding:6vh 6vw 3vh;}
.footer-top{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:3vh;}
.footer-brand p{color:var(--muted); max-width:280px; margin-top:.9rem;}
.footer-links h4, .footer-contact h4{
  font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:.9rem;
}
.footer-links a{display:block; color:var(--muted); margin-bottom:.65rem; font-size:.9rem;}
.footer-links a:hover{color:var(--text);}
.footer-contact p{color:var(--muted); font-size:.9rem;}
.footer-bottom{max-width:var(--maxw); margin:0 auto; border-top:1px solid var(--line); padding-top:1.6rem; color:var(--muted); font-size:.84rem;}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  #hero{grid-template-columns:1fr; gap:2rem;}
  .grid-3, .grid-4, .featured-grid, .testimonial-grid, .steps-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr; gap:2rem;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .trust-inner{justify-content:center;}
  .trust-divider{display:none;}
}
@media (max-width:760px){
  .nav-links{display:none;}
  .nav-cta{display:none;}
  #nav-toggle{display:flex;}
  #mobile-menu{display:flex;}
  .grid-3, .grid-4, .featured-grid, .testimonial-grid, .steps-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr; gap:1.6rem;}
  .flow-row{flex-direction:column;}
  .flow-arrow{transform:rotate(90deg); margin:.3rem 0;}
}