/* ═══════════════════════════════════════════════════════════════
   Inar Guide — front-page.css  (v1.1)
   Extracted from front-page.php inline <style> block.
   Enqueued via functions.php: add_action('wp_enqueue_scripts') with is_front_page()
   ═══════════════════════════════════════════════════════════════ */

/* ══ Design Tokens ══ */
:root {
  --ig-bg:       #faf9f7;
  --ig-surface:  #ffffff;
  --ig-dark:     #0f1117;
  --ig-dark-2:   #161820;
  --ig-dark-3:   #1c1e27;
  --ig-border:   #e8e6e1;
  --ig-border-dark: rgba(255,255,255,0.1);

  --ig-text:     #18181b;
  --ig-muted:    #52525b;
  --ig-faint:    #71717a;

  --ig-inv:        #f4f3f1;
  --ig-inv-muted:  #c4c6d0;
  --ig-inv-faint:  #8b8f9e;

  --ig-accent:        #c2410c;
  --ig-accent-hover:  #9a3412;
  --ig-accent-bright: #ea580c;
  --ig-accent-dim:    rgba(194,65,12,0.09);
  --ig-accent-border: rgba(194,65,12,0.28);
  --ig-accent-light:  #fff7ed;

  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s5:1.25rem; --s6:1.5rem; --s8:2rem; --s10:2.5rem;
  --s12:3rem; --s16:4rem;

  --t-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --t-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --t-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --t-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --t-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --t-2xl:clamp(1.75rem,1rem + 2vw,2.75rem);

  --font-display:'Cabinet Grotesk','Arial Black',sans-serif;
  --font-body:'Satoshi','Helvetica Neue',sans-serif;

  --r-sm:.375rem; --r-md:.5rem; --r-lg:.75rem; --r-xl:1rem; --r-full:9999px;
  --sh-sm:0 1px 3px rgba(0,0,0,.06);
  --sh-md:0 4px 14px rgba(0,0,0,.09);
  --sh-lg:0 12px 36px rgba(0,0,0,.13);
  --tr:180ms cubic-bezier(.16,1,.3,1);
  --wide:1200px; --default:960px;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:64px}
body{font-family:var(--font-body);font-size:var(--t-base);color:var(--ig-text);background:var(--ig-bg);line-height:1.6;min-height:100dvh}
img,svg{display:block;max-width:100%;height:auto}
a,button,[role="button"]{transition:color var(--tr),background var(--tr),border-color var(--tr),box-shadow var(--tr),transform var(--tr)}
ul[role="list"]{list-style:none}
button{cursor:pointer;background:none;border:none}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance;line-height:1.1}
::selection{background:var(--ig-accent-dim);color:var(--ig-text)}
:focus-visible{outline:2px solid var(--ig-accent);outline-offset:3px;border-radius:var(--r-sm)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── Layout helpers ── */
.ig-wrap{max-width:var(--wide);margin-inline:auto;padding-inline:clamp(var(--s4),3vw,var(--s10))}
.ig-wrap--narrow{max-width:var(--default);margin-inline:auto;padding-inline:clamp(var(--s4),3vw,var(--s10))}
.ig-section{padding-block:clamp(var(--s8),4vw,var(--s12))}

/* ── Section headings ── */
.ig-section-title{font-family:var(--font-display);font-size:var(--t-xl);font-weight:800;color:var(--ig-text);margin-bottom:var(--s6)}
.ig-section-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s6);flex-wrap:wrap}
.ig-section-row .ig-section-title{margin-bottom:0}
.ig-link{font-size:var(--t-sm);font-weight:600;color:var(--ig-accent)}
.ig-link:hover{color:var(--ig-accent-hover)}

/* ══ HEADER ══ */
.ig-header{position:sticky;top:0;z-index:100;background:var(--ig-dark);border-bottom:1px solid var(--ig-border-dark);height:58px;display:flex;align-items:center}
.ig-header-inner{display:flex;align-items:center;gap:var(--s5);width:100%}
.ig-logo{display:flex;align-items:center;gap:var(--s2);text-decoration:none;flex-shrink:0}
.ig-logo-icon{width:30px;height:30px;background:var(--ig-accent);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ig-logo-text{font-family:var(--font-display);font-size:var(--t-base);font-weight:800;color:var(--ig-inv);letter-spacing:-.01em}
.ig-logo-text em{color:var(--ig-accent-bright);font-style:normal}
.ig-nav{display:flex;align-items:center;gap:var(--s1);margin-left:auto}
.ig-nav a{font-size:var(--t-sm);font-weight:500;color:var(--ig-inv-muted);padding:var(--s2) var(--s3);border-radius:var(--r-md);white-space:nowrap}
.ig-nav a:hover{color:var(--ig-inv);background:rgba(255,255,255,.07)}
.ig-nav-cta{background:var(--ig-accent)!important;color:#fff!important;padding:var(--s2) var(--s4)!important;font-weight:700!important;border-radius:var(--r-full)!important}
.ig-nav-cta:hover{background:var(--ig-accent-hover)!important;transform:translateY(-1px)}
.ig-hamburger{display:none;flex-direction:column;gap:5px;padding:var(--s2);border-radius:var(--r-md);color:var(--ig-inv-muted);cursor:pointer;background:none;border:none;margin-left:auto}
.ig-hamburger span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px}

/* ══ HERO ══ */
.ig-hero{background:var(--ig-dark);padding:clamp(var(--s6),3vw,var(--s10)) 0}
.ig-hero h1{font-family:var(--font-display);font-size:var(--t-2xl);font-weight:900;color:var(--ig-inv);letter-spacing:-.03em;line-height:1.05;margin-bottom:var(--s3)}
.ig-hero h1 strong{color:var(--ig-accent-bright)}
.ig-hero-sub{font-size:var(--t-sm);color:var(--ig-inv-muted);max-width:52ch;margin-bottom:var(--s5);line-height:1.65}
.ig-hero-search{display:flex;max-width:580px;background:var(--ig-dark-3);border:1px solid var(--ig-border-dark);border-radius:var(--r-xl);padding:var(--s2);transition:border-color var(--tr),box-shadow var(--tr)}
.ig-hero-search:focus-within{border-color:var(--ig-accent-bright);box-shadow:0 0 0 3px rgba(194,65,12,.18)}
.ig-hero-search input{flex:1;background:none;border:none;outline:none;padding:var(--s2) var(--s4);font-family:var(--font-body);font-size:var(--t-sm);color:var(--ig-inv)!important;caret-color:var(--ig-accent-bright);-webkit-text-fill-color:var(--ig-inv)}
.ig-hero-search input::placeholder{color:#a8abbe}
.ig-hero-search button{flex-shrink:0;height:40px;padding:0 var(--s5);background:var(--ig-accent);color:#fff;border:none;border-radius:var(--r-lg);font-family:var(--font-body);font-size:var(--t-sm);font-weight:700;cursor:pointer;display:flex;align-items:center;gap:var(--s2)}
.ig-hero-search button:hover{background:var(--ig-accent-hover)}

/* ══ STATS BAR ══ */
.ig-stats{background:var(--ig-dark-2);border-bottom:1px solid var(--ig-border-dark);padding:var(--s3) 0}
.ig-stats-inner{display:flex;align-items:center;gap:var(--s8);overflow-x:auto;scrollbar-width:none}
.ig-stats-inner::-webkit-scrollbar{display:none}
.ig-stat{display:flex;align-items:center;gap:var(--s3);flex-shrink:0}
.ig-stat-num{font-family:var(--font-display);font-size:var(--t-lg);font-weight:800;color:var(--ig-accent-bright);line-height:1}
.ig-stat-label{font-size:var(--t-xs);color:var(--ig-inv-muted);line-height:1.3;font-weight:500}
.ig-stat-sep{width:1px;height:24px;background:var(--ig-border-dark);flex-shrink:0}

/* ══ BRANDS ══ */
.ig-top-brands{overflow-x:auto;scrollbar-width:none;padding-bottom:var(--s2);margin-bottom:var(--s6)}
.ig-top-brands::-webkit-scrollbar{display:none}
.ig-top-brands-inner{display:flex;gap:var(--s3);width:max-content}
.ig-brand-chip{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4);background:var(--ig-surface);border:1px solid var(--ig-border);border-radius:var(--r-full);text-decoration:none;white-space:nowrap;box-shadow:var(--sh-sm)}
.ig-brand-chip:hover{border-color:var(--ig-accent-border);transform:translateY(-2px);background:var(--ig-accent-light)}
.ig-brand-chip img{width:20px;height:20px;object-fit:contain}
.ig-brand-chip-name{font-size:var(--t-sm);font-weight:600;color:var(--ig-text)}
.ig-brand-chip-count{font-size:10px;font-weight:700;color:var(--ig-accent);background:var(--ig-accent-dim);border-radius:var(--r-full);padding:1px 6px;margin-left:2px}
.ig-brands-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:var(--s3)}
.ig-brand-card{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--ig-surface);border:1px solid var(--ig-border);border-radius:var(--r-lg);text-decoration:none;box-shadow:var(--sh-sm)}
.ig-brand-card:hover{border-color:var(--ig-accent-border);box-shadow:var(--sh-md);transform:translateY(-2px)}
.ig-brand-logo{width:34px;height:34px;border-radius:var(--r-md);background:var(--ig-bg);border:1px solid var(--ig-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.ig-brand-logo img{width:18px;height:18px;object-fit:contain}
.ig-brand-name{font-size:var(--t-sm);font-weight:600;color:var(--ig-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-brand-count{font-size:var(--t-xs);color:var(--ig-muted)}

/* ══ HOW IT WORKS ══ */
.ig-hiw{background:var(--ig-dark);padding-block:clamp(var(--s8),4vw,var(--s12))}
.ig-hiw-title{font-family:var(--font-display);font-size:var(--t-xl);font-weight:800;color:var(--ig-inv);margin-bottom:var(--s6)}
.ig-hiw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
.ig-hiw-step{position:relative;padding:var(--s6);background:var(--ig-dark-3);border:1px solid var(--ig-border-dark);border-radius:var(--r-xl)}
.ig-hiw-step:hover{border-color:var(--ig-accent-border)}
.ig-hiw-num{font-family:var(--font-display);font-size:2.5rem;font-weight:900;color:rgba(194,65,12,.18);line-height:1;margin-bottom:var(--s3);letter-spacing:-.04em}
.ig-hiw-step-title{font-family:var(--font-display);font-size:var(--t-base);font-weight:700;color:var(--ig-inv);margin-bottom:var(--s2)}
.ig-hiw-step-desc{font-size:var(--t-sm);color:var(--ig-inv-muted);line-height:1.6}
.ig-hiw-step-link{display:inline-flex;align-items:center;gap:4px;margin-top:var(--s4);font-size:var(--t-xs);font-weight:700;color:var(--ig-accent-bright)}
.ig-hiw-step-link:hover{color:#fff}

/* ══ LATEST FIRMWARE ══ */
.ig-fw-list{display:flex;flex-direction:column;border:1px solid var(--ig-border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm)}
.ig-fw-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s4);padding:var(--s3) var(--s5);background:var(--ig-surface);border-bottom:1px solid var(--ig-border);text-decoration:none}
.ig-fw-row:last-child{border-bottom:none}
.ig-fw-row:hover{background:var(--ig-accent-light)}
.ig-fw-row:hover .ig-fw-dl{background:var(--ig-accent);color:#fff;border-color:transparent}
.ig-fw-icon{width:38px;height:38px;border-radius:var(--r-md);background:var(--ig-bg);border:1px solid var(--ig-border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ig-fw-icon img{width:20px;height:20px;object-fit:contain}
.ig-fw-title-text{font-size:var(--t-sm);font-weight:600;color:var(--ig-text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52ch}
.ig-fw-meta{display:flex;align-items:center;flex-wrap:wrap;gap:0}
.ig-fw-tag{font-size:var(--t-xs);color:var(--ig-faint)}
.ig-fw-tag+.ig-fw-tag::before{content:'·';padding:0 var(--s2);color:var(--ig-faint)}
.ig-fw-dl{flex-shrink:0;height:32px;padding:0 var(--s3);border-radius:var(--r-full);border:1px solid var(--ig-accent-border);background:var(--ig-accent-dim);color:var(--ig-accent);font-size:var(--t-xs);font-weight:700;display:flex;align-items:center;gap:var(--s2);transition:background var(--tr),color var(--tr),border-color var(--tr)}

/* ══ LOAD MORE ══ */
.ig-load-more-wrap{text-align:center;margin-top:var(--s6)}
.ig-load-more{height:44px;padding:0 var(--s8);border-radius:var(--r-full);border:1px solid var(--ig-border);background:var(--ig-surface);color:var(--ig-muted);font-family:var(--font-body);font-size:var(--t-sm);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s2);box-shadow:var(--sh-sm)}
.ig-load-more:hover{border-color:var(--ig-accent-border);color:var(--ig-accent);background:var(--ig-accent-light)}
.ig-load-more:disabled{opacity:.5;cursor:not-allowed}

/* ══ FOOTER ══ */
.ig-footer{background:var(--ig-dark);border-top:1px solid var(--ig-border-dark);padding-block:clamp(var(--s10),4vw,var(--s12))}
.ig-footer-grid{display:grid;grid-template-columns:1.5fr 1.2fr 1fr;gap:var(--s10);margin-bottom:var(--s10)}
.ig-footer-logo{display:flex;align-items:center;gap:var(--s2);text-decoration:none;margin-bottom:var(--s4)}
.ig-footer-desc{font-size:var(--t-sm);color:var(--ig-inv-muted);line-height:1.65;max-width:28ch;margin-bottom:var(--s3)}
.ig-footer-note{font-size:var(--t-xs);color:var(--ig-inv-muted);line-height:1.5;max-width:30ch}
.ig-footer-col-title{font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ig-inv);margin-bottom:var(--s2)}
.ig-footer-col-sub{font-size:var(--t-xs);color:var(--ig-inv-muted);margin-bottom:var(--s4);line-height:1.5}
.ig-footer-links{display:flex;flex-direction:column;gap:var(--s2)}
.ig-footer-links a{font-size:var(--t-sm);color:var(--ig-inv-muted);transition:color var(--tr)}
.ig-footer-links a:hover{color:var(--ig-accent-bright)}
.ig-footer-bottom{border-top:1px solid var(--ig-border-dark);padding-top:var(--s5);display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.ig-footer-bottom p{font-size:var(--t-xs);color:var(--ig-inv-muted)}
.ig-footer-legal{display:flex;gap:var(--s5)}
.ig-footer-legal a{font-size:var(--t-xs);color:var(--ig-inv-muted);transition:color var(--tr)}
.ig-footer-legal a:hover{color:var(--ig-accent-bright)}

/* ══ RESPONSIVE ══ */
@media(max-width:768px){
  .ig-nav{display:none}
  .ig-hamburger{display:flex}
  .ig-hiw-grid{grid-template-columns:1fr}
  .ig-footer-grid{grid-template-columns:1fr 1fr;gap:var(--s8)}
  .ig-fw-title-text{max-width:26ch}
}
@media(max-width:600px){
  .ig-footer-grid{grid-template-columns:1fr}
  .ig-fw-row{padding:var(--s3) var(--s4)}
}
@media(max-width:480px){
  .ig-hero h1{letter-spacing:-.02em}
  .ig-hiw-grid{grid-template-columns:1fr}
}

/* ── Mobile drawer ── */
.ig-drawer{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.75)}
.ig-drawer.open{display:flex;justify-content:flex-end}
.ig-drawer-panel{width:min(300px,85vw);background:var(--ig-dark-2);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s2);overflow-y:auto}
.ig-drawer-close{align-self:flex-end;color:var(--ig-inv-muted);padding:var(--s2);margin-bottom:var(--s2)}
.ig-drawer-panel a{font-size:var(--t-base);font-weight:500;color:var(--ig-inv-muted);padding:var(--s3) var(--s4);border-radius:var(--r-md);text-decoration:none}
.ig-drawer-panel a:hover{color:var(--ig-inv);background:rgba(255,255,255,.07)}