/* 10 US Tech Inc. — Insights shared styles (Rev 6.6)
   Tokens and components mirrored from index.html Rev 6.4 design system. */
:root{
  --bg-base:#0a0907; --bg-surface:#100f0d; --bg-card:#161412; --bg-footer:#141210; --bg-media:#0e0c0a;
  --border-subtle:rgba(255,248,230,0.07); --border-medium:rgba(255,248,230,0.13); --border-accent:rgba(212,160,60,0.55);
  --text-primary:#f0ebe0; --text-muted:#5a544a; --text-body:#8a8070; --text-tertiary:#524c42;
  --accent:#d4a03c; --accent-bright:#e8b84e; --accent-glow:rgba(212,160,60,0.18); --accent-subtle:rgba(212,160,60,0.08);
  --success:#3d9e5c; --error:#b83c38;
  --font-sans:'Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',monospace;
  --text-h1:clamp(32px,4.2vw,52px); --text-h2:clamp(24px,2.6vw,34px);
  --text-body-size:16px; --text-sm:14px; --text-label:11px;
  --tracking-tight:-0.03em; --leading-relaxed:1.65;
  --r-md:10px; --r-lg:16px; --r-xl:20px;
  --ease-out:cubic-bezier(0.16,1,0.3,1); --dur-fast:150ms; --dur-base:220ms; --dur-enter:600ms;
  --grain-opacity:0.04;
}
@font-face{font-family:'Inter';src:url('/fonts/inter-var-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jbmono-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg-base);color:var(--text-body);font-family:var(--font-sans);font-size:var(--text-body-size);line-height:var(--leading-relaxed);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:var(--grain-opacity);mix-blend-mode:overlay;background-size:128px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");}
h1,h2,h3,h4{color:var(--text-primary);letter-spacing:var(--tracking-tight);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1360px;margin:0 auto;padding:0 40px;}
.narrow{max-width:720px;margin:0 auto;}
.section-label{font-family:var(--font-mono);font-size:13px;color:var(--accent);letter-spacing:0.06em;display:block;margin-bottom:16px;}
.reveal{opacity:0;transform:translateY(20px);transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out);}
.reveal.visible{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;}.reveal{opacity:1;transform:none;}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:600;font-family:var(--font-sans);color:var(--text-primary);background:var(--bg-card);border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:box-shadow var(--dur-base) ease,border-color var(--dur-base) ease,transform var(--dur-fast) var(--ease-out);}
.btn-primary{border-color:var(--accent);box-shadow:0 0 8px rgba(212,160,60,0.55),0 0 20px rgba(212,160,60,0.25),0 0 40px rgba(212,160,60,0.10);}
.btn-primary:hover{border-color:var(--accent-bright);transform:translateY(-1px);box-shadow:0 0 10px rgba(212,160,60,0.75),0 0 28px rgba(212,160,60,0.40),0 0 55px rgba(212,160,60,0.18);}
.btn-secondary{border-color:var(--border-medium);}
.btn-secondary:hover{border-color:rgba(255,248,230,0.28);background:rgba(255,255,255,0.03);}
.btn-sm{padding:8px 18px;font-size:13px;}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:background var(--dur-base) ease,border-color var(--dur-base) ease;}
.nav.scrolled{background:rgba(10,9,7,0.80);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid var(--border-subtle);}
.nav-inner{max-width:1360px;margin:0 auto;padding:16px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.nav-logo{display:flex;align-items:baseline;gap:7px;font-weight:800;font-size:18px;color:var(--text-primary);letter-spacing:-0.02em;}
.nav-logo .mono-tag{font-family:var(--font-mono);font-size:10px;color:var(--accent);letter-spacing:0.14em;}
.nav-links{display:flex;gap:26px;align-items:center;}
.nav-links a{color:var(--text-body);font-size:14px;font-weight:500;transition:color var(--dur-fast) ease;}
.nav-links a:hover{color:var(--text-primary);}
.nav-links a.active{color:var(--text-primary);}
.hamburger{display:none;background:none;border:1px solid var(--border-medium);border-radius:var(--r-md);padding:8px 10px;color:var(--text-primary);cursor:pointer;}
.hamburger svg{width:20px;height:20px;display:block;}
.drawer{display:none;}
@media(max-width:900px){
  .nav-links{display:none;}
  .hamburger{display:block;}
  .drawer{display:block;position:fixed;top:60px;left:0;right:0;z-index:199;background:rgba(10,9,7,0.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle);transform:translateY(-120%);transition:transform 300ms var(--ease-out);padding:12px 0 24px;}
  .drawer.open{transform:translateY(0);}
  .drawer a{display:block;padding:12px 40px;color:var(--text-body);font-size:16px;}
  .drawer a:hover{color:var(--text-primary);}
  .wrap{padding:0 24px;}
}

/* Cards (index grid) */
.card{background:var(--bg-card);border:none;border-radius:var(--r-lg);box-shadow:inset 0 1px 0 rgba(255,248,230,0.08),0 4px 24px rgba(0,0,0,0.45);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) ease;}
.card:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,248,230,0.10),0 12px 40px rgba(0,0,0,0.55);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:980px){.grid-3{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.grid-3{grid-template-columns:1fr;}}
.grid-3>*{min-width:0;}
.ins-card{padding:26px 24px;display:flex;flex-direction:column;}
.ins-tag{font-family:var(--font-mono);font-size:11px;color:var(--accent);letter-spacing:0.05em;margin-bottom:14px;}
.ins-card h2,.ins-card h3{font-size:17px;font-weight:600;line-height:1.4;margin-bottom:12px;}
.ins-card p{font-size:var(--text-sm);margin-bottom:16px;}
.ins-read{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);margin-top:auto;}
a.ins-card:hover .ins-read{color:var(--accent);}

/* Article layout */
.page-head{padding:170px 0 60px;}
.article-meta{font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary);letter-spacing:0.05em;display:flex;gap:14px;flex-wrap:wrap;margin-top:22px;}
.article-meta .sep{color:var(--text-muted);}
h1.article-title{font-size:var(--text-h1);font-weight:700;line-height:1.12;max-width:880px;}
.article-body{padding:20px 0 110px;}
.article-body h2{font-size:var(--text-h2);font-weight:700;line-height:1.2;margin:56px 0 18px;}
.article-body h3{font-size:19px;font-weight:600;margin:38px 0 14px;}
.article-body p{margin-bottom:22px;}
.article-body p strong,.article-body li strong{color:var(--text-primary);font-weight:600;}
.article-body ul,.article-body ol{margin:0 0 22px 22px;}
.article-body li{margin-bottom:10px;}
.article-body blockquote{border-left:2px solid var(--accent);padding:6px 0 6px 22px;margin:32px 0;color:var(--text-primary);font-size:18px;line-height:1.55;}
.article-body .callout{background:var(--bg-card);border-radius:var(--r-lg);box-shadow:inset 0 1px 0 rgba(255,248,230,0.08);padding:24px 26px;margin:34px 0;}
.article-body .callout .ins-tag{margin-bottom:10px;}
.article-body .callout p:last-child{margin-bottom:0;}
.article-body a{color:var(--accent);border-bottom:1px solid rgba(212,160,60,0.35);transition:border-color var(--dur-fast) ease;}
.article-body a:hover{border-color:var(--accent-bright);}
.article-cta{background:var(--bg-surface);border-radius:var(--r-xl);padding:44px 40px;margin-top:70px;text-align:left;}
.article-cta h2{margin:0 0 12px;font-size:var(--text-h2);}
.article-cta p{max-width:560px;}
.article-cta .btn{margin-top:10px;}
.crumbs{font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary);letter-spacing:0.05em;margin-bottom:26px;}
.crumbs a{color:var(--text-tertiary);transition:color var(--dur-fast) ease;}
.crumbs a:hover{color:var(--accent);}
.crumbs .sep{margin:0 8px;color:var(--text-muted);}

/* Prev/next + back links */
.article-nav{display:flex;justify-content:space-between;gap:20px;margin-top:56px;padding-top:32px;border-top:1px solid var(--border-subtle);font-size:var(--text-sm);flex-wrap:wrap;}
.article-nav a{color:var(--text-body);transition:color var(--dur-fast) ease;max-width:46%;}
.article-nav a:hover{color:var(--text-primary);}
.article-nav .lbl{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);display:block;margin-bottom:6px;letter-spacing:0.06em;}

/* Footer */
.footer-wrapper{padding:0 24px 24px;background:var(--bg-base);}
.footer-panel{background:var(--bg-footer);border-radius:var(--r-xl);box-shadow:inset 0 1px 0 rgba(255,248,230,0.06);padding:48px 48px 24px;max-width:1360px;margin:0 auto;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.f-brand p{font-size:var(--text-sm);max-width:280px;margin-top:14px;}
.footer-panel h4{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;color:var(--text-tertiary);text-transform:uppercase;margin-bottom:16px;}
.footer-panel ul{list-style:none;}
.footer-panel li{margin-bottom:10px;}
.footer-panel li a{color:var(--text-body);font-size:14px;transition:color var(--dur-fast) ease;}
.footer-panel li a:hover{color:var(--text-primary);}
.status-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;color:var(--success);margin-top:22px;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 8px rgba(61,158,92,0.7);flex:0 0 8px;}
.footer-bottom{border-top:1px solid var(--border-subtle);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--text-tertiary);}
.arch-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;}
@media(min-width:1600px){.wrap,.nav-inner,.footer-panel{max-width:1520px;}}