/* FastIQ Design System — design tokens, base, components & decorative effects */

:root{
  /* Brand — orange */
  --fiq-orange:#FF5A00;
  --fiq-orange-600:#E84F00;
  --fiq-orange-400:#FF7A33;
  --fiq-orange-300:#FF9B5E;
  /* Neutrals — ink (dark surfaces) */
  --fiq-ink:#0A0A0A;
  --fiq-ink-800:#101010;
  --fiq-ink-700:#161616;
  --fiq-ink-600:#1E1E1E;
  /* Paper — cream (light surfaces) */
  --fiq-cream:#F0ECE3;
  --fiq-cream-200:#E7E1D4;
  --fiq-cream-300:#D9D2C2;
  /* Text */
  --fiq-on-dark:#F2EEE6;
  --fiq-on-dark-mut:#A7A199;
  --fiq-on-dark-dim:#6C6760;
  --fiq-on-cream:#0A0A0A;
  --fiq-on-cream-mut:#6E695F;
  /* Lines */
  --fiq-line:rgba(255,255,255,.08);
  --fiq-line-2:rgba(255,255,255,.14);
  --fiq-line-cream:rgba(10,10,10,.12);
  /* Type */
  --font-display:'Inter',system-ui,-apple-system,sans-serif;
  --font-sans:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{border-color:var(--fiq-line)}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--fiq-ink);color:var(--fiq-on-dark);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--fiq-orange);color:#0A0A0A}

/* Typography helpers */
.font-display{font-family:var(--font-display)}
.font-mono{font-family:var(--font-mono)}
.display-xl{font-family:var(--font-display);font-weight:900;letter-spacing:-.04em;line-height:.95}
.display-lg{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:1}
.eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.22em;font-size:11px}
.text-grad{background:linear-gradient(180deg,var(--fiq-on-dark),rgba(242,238,230,.45));-webkit-background-clip:text;background-clip:text;color:transparent}
.text-grad-orange{background:linear-gradient(120deg,var(--fiq-orange-300),var(--fiq-orange));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Custom scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--fiq-ink)}
::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--fiq-orange-600)}

/* Surfaces */
.surface-cream{background:var(--fiq-cream);color:var(--fiq-on-cream)}
.surface-cream *{border-color:var(--fiq-line-cream)}
.surface-ink{background:var(--fiq-ink-700)}

/* Geometry clip-paths (from the hexagonal icon language) */
.clip-hex{clip-path:polygon(50% 0%,93.301% 25%,93.301% 75%,50% 100%,6.699% 75%,6.699% 25%)}
.clip-hex-flat{clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)}
.clip-chamfer{clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.clip-chamfer-lg{clip-path:polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px)}
.clip-tag{clip-path:polygon(15% 0%,100% 0%,85% 100%,0% 100%)}
.clip-arrow{clip-path:polygon(20% 0%,100% 0%,80% 100%,0% 100%)}

/* Gradient hair-border card */
.grad-border{position:relative;border-radius:1.25rem;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 60%);padding:1px;overflow:hidden}
.grad-border-inner{position:relative;height:100%;border-radius:calc(1.25rem - 1px);background:var(--fiq-ink-700);overflow:hidden}

/* Top-edge shimmer line */
.shimmer-top{position:relative}
.shimmer-top::before{content:"";position:absolute;left:1.5rem;right:1.5rem;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,90,0,.5),transparent)}

/* Orange glow */
.glow-orange{box-shadow:0 0 24px rgba(255,90,0,.28)}
.glow-orange-sm{box-shadow:0 0 10px rgba(255,90,0,.5)}
.glow-soft{box-shadow:0 18px 45px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04)}

/* Cursor-tracking flashlight */
.flashlight{position:relative;overflow:hidden}
.flashlight::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,90,0,.12),transparent 45%);pointer-events:none;z-index:1}
.flashlight:hover::before{opacity:1}
.flashlight>*{position:relative;z-index:2}

/* Grain + dot-grid textures */
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.dotgrid{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:34px 34px}
.dotgrid-cream{background-image:linear-gradient(rgba(10,10,10,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,10,.05) 1px,transparent 1px);background-size:34px 34px}

/* Diagonal hatch (deck "expansão" bar) */
.hatch{background:repeating-linear-gradient(45deg,rgba(255,90,0,.28) 0,rgba(255,90,0,.28) 6px,transparent 6px,transparent 12px)}

/* Marquee */
.marquee{display:flex;width:max-content;animation:fiq-marquee 38s linear infinite}
.marquee-mask{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}

/* Sweep sheen */
.sweep{position:relative;overflow:hidden}
.sweep::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);animation:fiq-sweep 7s ease-in-out infinite}

/* Scroll-reveal (progressive enhancement; visible by default) */
.reveal{opacity:1}
.js .reveal{opacity:0;transform:translateY(22px);filter:blur(10px)}
.js .reveal.in{opacity:1;transform:none;filter:none;transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1),filter .7s ease}

/* Corner registration dots (section seams) */
.seam{position:relative}
.seam::before,.seam::after{content:"";position:absolute;width:3px;height:3px;border-radius:9999px;background:rgba(255,90,0,.45)}
.seam::before{top:-1px;left:-1px}
.seam::after{top:-1px;right:-1px}

/* Accordion chevron */
[data-accordion-trigger] svg{transition:transform .3s}
[data-accordion].is-open [data-accordion-trigger] svg{transform:rotate(180deg)}

/* Char slide-in eyebrow */
.char-wrap{display:inline-block;overflow:hidden;vertical-align:bottom}
.char-wrap>span{display:inline-block;animation:fiq-char-down .6s cubic-bezier(.16,1,.3,1) both}