/* ============================================
   MOREMINIMORE FX-SYSTEM v1
   Extracted from Desktop/moreminomore-mockup-v7-5.html
   Lines 10-484 (v7-5 internal <style> block)
   All classes are .fx-* — namespaced to avoid collision
   with global.css which uses .kinetic-hero, .bento-*, etc.
   
   Includes @keyframes marquee only. Other keyframes
   (sparkle, reveal, pulse-glow) added in src/lib/fx-animations.ts
   to keep CSS file size manageable.
   ============================================ */

:root{
  --brand-yellow:#FFD60A;--coral:#FF5A3C;--ink:#0A0A0A;--ink-2:#1A1A1A;
  --paper:#FAFAFA;--paper-2:#F5F5F5;--paper-3:#F0F0F0;
  --line:rgba(10,10,10,0.1);--line-2:rgba(10,10,10,0.2);
  --text-dim:rgba(10,10,10,0.6);--text-dimmer:rgba(10,10,10,0.4);
}
*{margin:0;padding:0;box-sizing:border-box}
*{font-family:'Kanit',sans-serif}
img{max-width:100%;display:block}
.mono{font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:-0.3px}

/* ========== TOP NAV (TOC) ========== */
.toc-nav{position:sticky;top:0;z-index:100;background:var(--ink);color:var(--brand-yellow);padding:14px 24px;font:800 13px/1 'JetBrains Mono',monospace;border-bottom:4px solid var(--brand-yellow);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.toc-nav h1{font-size:14px;letter-spacing:-0.5px;color:var(--brand-yellow);margin-right:12px}
.toc-nav h1 em{font-family:'Itim',cursive;font-weight:400;color:var(--coral)}
.toc-nav a{color:var(--brand-yellow);text-decoration:none;font:700 11px/1 'JetBrains Mono',monospace;padding:6px 10px;border:1px solid rgba(255,214,10,0.3);border-radius:4px;transition:all 0.2s}
.toc-nav a:hover{background:var(--brand-yellow);color:var(--ink);border-color:var(--brand-yellow)}

/* ========== CATEGORY SECTION ========== */
.category{background:var(--paper);border-top:2px solid var(--ink);padding:0 0 32px}
.cat-header{background:var(--ink);color:var(--brand-yellow);padding:16px 32px;font:800 18px/1 'Kanit',sans-serif;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.cat-header .cat-num{font:900 36px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--brand-yellow);width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.cat-header .cat-title{font-weight:800}
.cat-header .cat-count{font:500 13px/1 'JetBrains Mono',monospace;color:rgba(255,214,10,0.7)}
.cat-desc{padding:20px 32px;font:300 16px/1.5;color:var(--text-dim);border-bottom:1px dashed var(--line-2);background:var(--paper-2)}

/* ========== VARIANT ========== */
.variant{padding:32px;background:var(--paper);border-bottom:1px solid var(--line-2);position:relative}
.variant::before{content:attr(data-variant-label);position:absolute;top:12px;left:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--brand-yellow);padding:4px 8px;letter-spacing:0.5px;text-transform:uppercase;z-index:2}
.variant-tag{position:absolute;top:12px;right:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--brand-yellow);background:var(--ink);padding:4px 8px;letter-spacing:0.5px;z-index:2}
.variant-content{margin-top:32px;max-width:1100px;margin-left:auto;margin-right:auto}
.variant-info{background:rgba(255,214,10,0.15);border:1px dashed var(--coral);padding:12px 16px;margin-top:16px;font:400 13px/1.5 'Kanit',sans-serif;color:var(--ink)}

/* ========== UTILITY ========== */
.util-bar{display:flex;align-items:center;justify-content:space-between;height:36px;background:var(--ink);color:rgba(250,250,250,0.85);font:600 12px/1 'JetBrains Mono',monospace;padding:0 24px}
.util-bar-left,.util-bar-right{display:flex;align-items:center;gap:16px}
.util-item{display:inline-flex;align-items:center;gap:6px;color:rgba(250,250,250,0.7)}
.util-item strong{color:var(--brand-yellow);font-weight:700}
.util-theme{background:rgba(250,250,250,0.1);border:1px solid rgba(250,250,250,0.2);color:rgba(250,250,250,0.5);padding:4px 10px;border-radius:999px;cursor:pointer}

/* ========== NAV ========== */
.nav-1{padding:14px 32px;background:var(--paper);border-bottom:1.5px solid var(--ink);display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;flex-wrap:wrap;gap:12px}
.nav-1 .logo{font:900 22px/1 'Kanit',sans-serif;letter-spacing:-1px;color:var(--ink)}
.nav-1 .logo em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.nav-1 .menu{display:flex;gap:8px;list-style:none;flex-wrap:wrap}
.nav-1 .menu a{font:600 12px/1 'JetBrains Mono',monospace;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:8px 12px}
.nav-1 .menu a:hover{color:var(--coral)}
.nav-1 .cta{background:var(--coral);color:#FAFAFA;font:800 12px/1 'JetBrains Mono',monospace;text-transform:uppercase;padding:10px 16px;text-decoration:none;border:1.5px solid var(--ink)}

/* ========== HERO ========== */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;padding:64px 32px;max-width:1100px;margin:0 auto;background-image:linear-gradient(to right,rgba(10,10,10,0.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(10,10,10,0.04) 1px,transparent 1px);background-size:80px 80px}
.hero-content{padding:24px;border:1.5px solid var(--ink);background:rgba(255,255,255,0.6);backdrop-filter:blur(8px);position:relative}
.hero-content .cmd{font:700 16px/1 'JetBrains Mono',monospace;color:var(--brand-yellow);background:var(--ink);padding:4px 10px;display:inline-block;margin-bottom:12px}
.hero-content h1{font:900 56px/0.95 'Kanit',sans-serif;letter-spacing:-2.5px;margin:16px 0}
.hero-content h1 em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--ink);background:var(--paper)}
.hero-stats div{padding:20px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);text-align:center}
.hero-stats div:nth-child(2n){border-right:none}
.hero-stats div:nth-last-child(-n+2){border-bottom:none}
.hero-stats .num{font:900 28px/1 'JetBrains Mono',monospace}
.hero-stats .num em{font-family:'Itim',cursive;font-size:18px;color:var(--coral)}
.hero-stats .lbl{font:700 9px/1 'JetBrains Mono',monospace;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;margin-top:4px}
.hero-centered{text-align:center;padding:120px 32px;background:var(--paper)}
.hero-centered h1{font:900 72px/0.95 'Kanit',sans-serif;letter-spacing:-3px;max-width:800px;margin:0 auto 24px}
.hero-centered h1 em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.hero-centered p{font:300 18px/1.5;color:var(--text-dim);max-width:600px;margin:0 auto 32px}
.hero-cta{background:linear-gradient(135deg,var(--coral),#E64A2C);color:#FAFAFA;font:800 12px/1 'JetBrains Mono',monospace;text-transform:uppercase;padding:14px 22px;text-decoration:none;border:1.5px solid var(--ink);display:inline-flex;align-items:center;gap:8px}
.hero-bg{position:relative;min-height:60vh;overflow:hidden;color:#FAFAFA;display:flex;align-items:center;padding:80px 32px}
.hero-bg::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.5),rgba(0,0,0,0.8));z-index:1}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bg .content{position:relative;z-index:2;max-width:800px}
.hero-bg h1{font:900 56px/0.95 'Kanit',sans-serif;letter-spacing:-2.5px;margin-bottom:16px}
.hero-bg h1 em{font-family:'Itim',cursive;color:var(--brand-yellow);font-weight:400}
.hero-asym{display:grid;grid-template-columns:3fr 7fr;min-height:60vh;background:var(--paper)}
.hero-asym-img{background-size:cover;background-position:center;position:relative}
.hero-asym-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.2),rgba(0,0,0,0.7))}
.hero-asym-content{padding:60px 48px;display:flex;flex-direction:column;justify-content:center}
.hero-asym-content h1{font:900 56px/0.95 'Kanit',sans-serif;letter-spacing:-2.5px;margin-bottom:16px}
.hero-asym-content h1 em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.hero-stats-row{display:flex;gap:24px;padding:20px 0;margin-bottom:24px;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.hero-stats-row .item{flex:1;text-align:center}
.hero-stats-row .num{font:900 24px/1 'JetBrains Mono',monospace}
.hero-stats-row .num em{font-family:'Itim',cursive;font-size:14px;color:var(--coral)}
.hero-stats-row .lbl{font:700 9px/1 'JetBrains Mono',monospace;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;margin-top:4px}

/* ========== CASE-STUDY ========== */
.case{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:center;max-width:1100px;margin:0 auto;padding:48px 32px}
.case-image{border:1.5px solid var(--ink);overflow:hidden;background:var(--paper-2);aspect-ratio:4/3}
.case-image img{width:100%;height:100%;object-fit:cover}
.case-content{padding:32px;border:1.5px solid var(--ink);background:var(--paper)}
.case-content h2{font:900 32px/1.1 'Kanit',sans-serif;letter-spacing:-1.5px;margin-bottom:12px}
.case-content h2 em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.case-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--ink);margin:16px 0}
.case-stats div{padding:14px;border-right:1.5px solid var(--ink);text-align:center}
.case-stats div:last-child{border-right:none}
.case-stats .num{font:900 24px/1 'JetBrains Mono',monospace}
.case-stats .num em{font-family:'Itim',cursive;font-size:16px;color:var(--coral)}
.case-stats .lbl{font:700 9px/1 'JetBrains Mono',monospace;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;margin-top:4px}
.case-text{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:center;max-width:1100px;margin:0 auto;padding:48px 32px}
.case-text-image{border:1.5px solid var(--ink);overflow:hidden;aspect-ratio:4/3}
.case-text-image img{width:100%;height:100%;object-fit:cover}
.case-text-content h2{font:900 36px/1.1 'Kanit',sans-serif;letter-spacing:-1.5px;margin-bottom:16px}
.case-text-content p{font:300 16px/1.5;color:var(--text-dim);margin-bottom:16px}
.case-text-content .stat{display:inline-block;background:var(--brand-yellow);color:var(--ink);padding:8px 16px;font:900 20px/1 'JetBrains Mono',monospace;margin-bottom:12px}
.case-text-content .stat em{font-family:'Itim',cursive;color:var(--coral);font-size:14px}

/* ========== SERVICES ========== */
.services{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--ink);max-width:1100px;margin:0 auto}
.service-card{padding:32px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);position:relative;background:var(--paper);transition:background 0.2s}
.service-card:nth-child(2n){border-right:none}
.service-card:nth-last-child(-n+2){border-bottom:none}
.service-card:hover{background:var(--paper-2)}
.service-card .num{display:inline-block;background:var(--brand-yellow);color:var(--coral);font:900 32px/1 'JetBrains Mono',monospace;padding:6px 12px;margin-bottom:12px}
.service-card h3{font:900 22px/1.1;letter-spacing:-0.5px;margin-bottom:8px}
.service-card h3 em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.service-card p{font:300 14px/1.5;color:var(--text-dim)}
.services-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;max-width:1100px;margin:0 auto}
.services-3 .service-card{border:1.5px solid var(--ink)}

/* ========== CALLOUT ========== */
.callout{padding:60px 80px;background:linear-gradient(180deg,#FFE600,var(--brand-yellow));border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);text-align:center}
.callout p{font:400 24px/1.5 'Itim',cursive;color:var(--ink);max-width:800px;margin:0 auto 12px}
.callout p em{color:var(--coral);font-weight:600}
.callout .attr{font:700 11px/1 'JetBrains Mono',monospace;color:var(--ink);text-transform:uppercase;letter-spacing:0.5px}
.callout-center{padding:80px 60px;background:var(--paper);text-align:center;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.callout-center p{font:400 28px/1.4 'Itim',cursive;color:var(--ink);max-width:700px;margin:0 auto}

/* ========== PORTFOLIO ========== */
.portfolio{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;max-width:1100px;margin:0 auto}
.portfolio-item{border:1.5px solid var(--ink);position:relative;overflow:hidden;background:var(--paper);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;aspect-ratio:1}
.portfolio-item.featured{grid-row:span 2;background:var(--coral);color:#FAFAFA;aspect-ratio:1/2}
.portfolio-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.portfolio-item::before{content:'◉ ◉ ◉  moreminimore.com/';position:absolute;top:0;left:0;right:0;background:var(--paper-2);border-bottom:1px solid var(--ink);padding:8px 12px;font:700 9px/1 'JetBrains Mono',monospace;color:var(--text-dim);z-index:1}
.portfolio-item.featured::before{background:var(--ink);color:var(--brand-yellow)}
.portfolio-item .name{position:relative;z-index:1;font:900 20px/1.1;background:var(--paper);padding:6px 8px;align-self:flex-start;border:1px solid var(--ink);margin-top:24px}
.portfolio-item.featured .name{background:var(--ink);color:#FAFAFA;border-color:var(--ink)}
.portfolio-item.featured .name em{color:var(--brand-yellow)}
.portfolio-item .name em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.portfolio-item .stats{position:relative;z-index:1;font:700 11px/1 'JetBrains Mono',monospace;color:var(--coral);margin-top:4px}
.portfolio-item.featured .stats{color:var(--brand-yellow)}
.masonry{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;max-width:1100px;margin:0 auto}
.masonry .item{background:#F5F5F5;min-height:200px;display:flex;align-items:flex-end;padding:20px;font:900 20px/1.1;color:#FAFAFA;text-shadow:2px 2px 4px rgba(0,0,0,0.7);background-size:cover;background-position:center}
.masonry .item:first-child{grid-row:span 2;min-height:408px;font-size:24px}

/* ========== PROCESS ========== */
.process{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid var(--ink);max-width:1100px;margin:0 auto}
.process-step{padding:24px;border-right:1.5px solid var(--ink);position:relative;background:var(--paper)}
.process-step:last-child{border-right:none}
.process-step .num{background:var(--ink);color:var(--brand-yellow);font:900 14px/1 'JetBrains Mono',monospace;padding:6px 10px;display:inline-block;margin-bottom:12px}
.process-step h4{font:800 16px/1.2;margin-bottom:6px}
.process-step h4 em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.process-step p{font:400 12px/1.5;color:var(--text-dim)}
.timeline{padding:32px;max-width:700px;margin:0 auto;position:relative}
.timeline::before{content:'';position:absolute;left:60px;top:32px;bottom:32px;width:2px;background:var(--ink)}
.timeline-step{padding:16px 0 16px 80px;position:relative;min-height:80px}
.timeline-step::before{content:counter(step);counter-increment:step;position:absolute;left:20px;top:16px;width:40px;height:40px;background:var(--brand-yellow);color:var(--ink);font:900 18px/40px 'JetBrains Mono',monospace;text-align:center;border-radius:50%;border:2px solid var(--ink)}
.timeline-step h4{font:800 16px/1.2;margin-bottom:6px}
.timeline-step p{font:300 13px/1.5;color:var(--text-dim)}
.timeline{counter-reset:step}

/* ========== PRICING ========== */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--ink);max-width:1000px;margin:0 auto}
.pricing-card{padding:28px;border-right:1.5px solid var(--ink);position:relative;background:var(--paper)}
.pricing-card:last-child{border-right:none}
.pricing-card.featured{background:rgba(255,214,10,0.85);backdrop-filter:blur(4px);position:relative}
.pricing-card.featured::after{content:'★ แนะนำ';position:absolute;top:-10px;left:16px;background:var(--ink);color:var(--brand-yellow);font:700 9px/1 'JetBrains Mono',monospace;padding:4px 8px;letter-spacing:0.5px}
.pricing-card .tier{font:700 10px/1 'JetBrains Mono',monospace;text-transform:uppercase;color:var(--text-dim);letter-spacing:0.5px;margin-bottom:12px}
.pricing-card .tier em{font-family:'Itim',cursive;color:var(--coral);text-transform:none}
.pricing-card h3{font:900 24px/1.1;letter-spacing:-1px;margin-bottom:8px}
.pricing-card .amount{font:900 40px/1 'JetBrains Mono',monospace;letter-spacing:-2px;margin:12px 0}
.pricing-card .amount em{font-size:20px;color:var(--coral);font-family:'Itim',cursive}
.pricing-card .period{font:700 10px/1 'JetBrains Mono',monospace;text-transform:uppercase;color:var(--text-dim);margin-bottom:16px;letter-spacing:0.5px}
.pricing-card ul{list-style:none;border-top:1px solid var(--ink);margin-bottom:16px}
.pricing-card li{padding:8px 0;border-bottom:1px dashed var(--line-2);display:flex;gap:8px;font:400 13px/1.4}
.pricing-card li::before{content:'✓';color:var(--coral);font-weight:700}
.pricing-card .cta{display:block;text-align:center;background:var(--ink);color:#FAFAFA;font:800 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;padding:12px;text-decoration:none;border:1px solid var(--ink)}
.pricing-line{text-align:center;padding:80px 32px;background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.pricing-line .amount{font:900 56px/1 'Kanit',sans-serif;letter-spacing:-2.5px;margin-bottom:12px}
.pricing-line .amount em{font-family:'Itim',cursive;color:var(--coral);font-size:32px}
.pricing-line .desc{font:300 16px/1.5;color:var(--text-dim);max-width:500px;margin:0 auto 24px}

/* ========== FAQ ========== */
.faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:20px;padding:32px}
.faq-item{padding:0}
.faq-q{font:700 17px/1.5;margin-bottom:8px}
.faq-q em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.faq-a{font:400 14px/1.7;color:var(--text-dim);padding:0 0 0 16px;border-left:3px solid var(--coral)}
.faq-a em{font-family:'Itim',cursive;color:var(--coral);font-weight:600}
.faq-accordion{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:8px;padding:32px}
.faq-accordion details{background:var(--paper);border:1.5px solid var(--ink);padding:0}
.faq-accordion summary{font:600 16px/1.3;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;user-select:none;transition:background 0.2s}
.faq-accordion summary:hover{background:var(--paper-2)}
.faq-accordion summary::-webkit-details-marker{display:none}
.faq-accordion summary span{font-family:'Itim',cursive;font-style:italic;color:var(--ink);font-weight:400}
.faq-accordion summary::after{content:'+';font:700 18px/1 'JetBrains Mono',monospace;color:var(--coral);flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--brand-yellow);border-radius:50%;border:1.5px solid var(--ink)}
.faq-accordion details[open] summary::after{content:'−';background:var(--coral);color:#FAFAFA;border-color:var(--coral)}
.faq-accordion details p{font:400 14px/1.6;color:var(--text-dim);margin:0;padding:12px 16px 16px;border-top:1px dashed var(--line-2);background:var(--paper)}
.faq-accordion details p em{font-family:'Itim',cursive;font-style:italic;color:var(--coral);font-weight:600}

/* ========== CONTACT ========== */
.contact-form{display:flex;max-width:480px;margin:0 auto;border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--brand-yellow)}
.contact-form::before{content:'$';padding:0 16px;display:flex;align-items:center;color:var(--coral);font:700 20px/1 'JetBrains Mono',monospace;border-right:1.5px solid var(--ink);background:var(--brand-yellow)}
.contact-form input{flex:1;padding:16px;border:none;background:transparent;font:500 14px/1 'JetBrains Mono',monospace;outline:none}
.contact-form button{background:var(--ink);color:#FAFAFA;border:none;padding:0 20px;font:800 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;cursor:pointer}
.contact-center{text-align:center;padding:80px 32px;background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.contact-center h2{font:900 56px/1 'Kanit',sans-serif;letter-spacing:-2.5px;margin-bottom:16px}
.contact-center h2 em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.contact-center p{font:300 18px/1.5;color:var(--text-dim);max-width:600px;margin:0 auto 32px}
.contact-center .cta-1{background:var(--coral);color:#FAFAFA;font:800 14px/1 'JetBrains Mono',monospace;text-transform:uppercase;padding:18px 32px;text-decoration:none;border:2px solid var(--ink);display:inline-block}
.contact-center .cta-2{margin-left:12px;background:transparent;color:var(--ink);font:800 14px/1 'JetBrains Mono',monospace;text-transform:uppercase;padding:18px 32px;text-decoration:none;border:2px solid var(--ink);display:inline-block}

/* ========== FOOTER ========== */
.footer{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;max-width:1280px;margin:0 auto;padding:48px 32px;background:var(--paper-2);border-top:1.5px solid var(--ink);font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-dim)}
.footer h4{font:700 11px/1;text-transform:uppercase;color:var(--ink);margin-bottom:12px;letter-spacing:0.5px}
.footer ul{list-style:none}
.footer li{margin-bottom:6px}
.footer a{color:var(--text-dim);text-decoration:none}
.footer a:hover{color:var(--coral)}
.footer .logo{font:900 20px/1 'Kanit',sans-serif;color:var(--ink);letter-spacing:-1px;margin-bottom:12px}
.footer .logo em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.footer .tagline{font:300 13px/1.5;color:var(--text-dim)}
.footer-single{display:flex;justify-content:space-between;align-items:center;max-width:1280px;margin:0 auto;padding:24px 32px;background:var(--ink);color:rgba(250,250,250,0.6);font:600 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;flex-wrap:wrap;gap:12px}
.footer-single em{font-family:'Itim',cursive;color:var(--coral);text-transform:none}

/* ========== MARQUEE ========== */
.marquee{background:var(--paper-2);border-bottom:1px solid var(--ink);overflow:hidden;padding:6px 0}
.marquee-track{display:flex;gap:32px;white-space:nowrap;animation:marquee 40s linear infinite;font:700 11px/1 'JetBrains Mono',monospace}
.marquee-track .ts{color:rgba(10,10,10,0.3)}
.marquee-track .cmd{color:var(--coral)}
.marquee-track .ok{color:#00875A}
.marquee-track em{font-family:'Itim',cursive;color:var(--coral)}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ========== MAIN v6 · INJECTED CLASSES ========== */
.fx-utility-bar{display:flex;align-items:center;justify-content:space-between;height:32px;background:#0A0A0A;color:rgba(250,250,250,0.85);font:600 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;padding:0 24px;border-bottom:1px solid rgba(250,250,250,0.15)}
.fx-utility-bar-left,.fx-utility-bar-right{display:flex;align-items:center;gap:16px}
.fx-utility-item{display:inline-flex;align-items:center;gap:6px;color:rgba(250,250,250,0.7)}
.fx-utility-item strong{color:var(--brand-yellow);font-weight:700}
.fx-theme-toggle{display:inline-flex;align-items:center;gap:6px;background:rgba(250,250,250,0.1);border:1px solid rgba(250,250,250,0.2);color:#FAFAFA;padding:4px 10px;font:600 10px/1 'JetBrains Mono',monospace;text-transform:uppercase;border-radius:999px;cursor:pointer}
.fx-mode-indicator{font:500 9px/1 'JetBrains Mono',monospace;color:rgba(250,250,250,0.5)}
.fx-mode-indicator::before{content:'●';color:var(--brand-yellow);margin-right:4px}
.fx-marquee{background:var(--paper-2);border-bottom:1.5px solid var(--ink);overflow:hidden;font:700 11px/1 'JetBrains Mono',monospace;padding:6px 0}
.fx-marquee-track{display:flex;gap:32px;white-space:nowrap;animation:marquee 40s linear infinite}
.fx-marquee-track span{color:var(--text-dim)}
.fx-marquee-track .ts{color:rgba(10,10,10,0.3)}
.fx-marquee-track .cmd{color:var(--coral)}
.fx-marquee-track .ok{color:#00875A}
.fx-marquee-track em{color:var(--coral);font-family:'Itim',cursive;text-transform:none}
.fx-nav{position:sticky;top:0;z-index:50;background:rgba(250,250,250,0.78);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1.5px solid var(--ink)}
.fx-nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1280px;margin:0 auto;padding:16px 32px}
.fx-nav-logo{display:inline-block;line-height:0}
.fx-nav-logo-text{font:900 20px/1 'Kanit',sans-serif;letter-spacing:-1px;color:var(--ink);text-decoration:none}
.fx-nav-logo-text em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.fx-nav-menu{display:flex;gap:4px;list-style:none}
.fx-nav-menu a{padding:8px 14px;font:600 12px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;color:var(--ink);text-decoration:none}
.fx-nav-menu a:hover{color:var(--coral)}
.fx-nav-cta{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;background:var(--coral);color:#FAFAFA;font:800 12px/1 'JetBrains Mono',monospace;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--ink)}
.fx-hero{padding:80px 32px 64px;position:relative;background-image:linear-gradient(to right,rgba(10,10,10,0.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(10,10,10,0.04) 1px,transparent 1px);background-size:80px 80px;border-bottom:1.5px solid var(--ink)}
.fx-hero::before{content:'> section: hero · frame: 00.0';position:absolute;top:16px;left:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--paper);padding:4px 8px;border:1px solid var(--ink);z-index:2}
.fx-hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;max-width:1200px;margin:32px auto 0}
.fx-hero-content{background:rgba(255,255,255,0.6);border:1.5px solid var(--ink);padding:32px 32px 32px 80px;position:relative;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.fx-hero-content::before{content:'$';position:absolute;top:32px;left:32px;font:700 20px/1 'JetBrains Mono',monospace;color:var(--coral)}
.fx-hero-content::after{content:'moreminimore --init';position:absolute;top:32px;left:56px;font:700 16px/1 'JetBrains Mono',monospace;color:var(--brand-yellow);background:var(--ink);padding:2px 8px}
.fx-hero-eyebrow{display:block;font:700 10px/1.4 'JetBrains Mono',monospace;color:var(--text-dim);margin:24px 0 16px}
.fx-hero-eyebrow::before{content:'// ';color:var(--coral)}
.fx-hero-title{font:900 64px/0.95 'Kanit',sans-serif;letter-spacing:-2.5px;color:var(--ink);margin-bottom:16px}
.fx-hero-title em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.fx-hero-lede{font:300 16px/1.6;color:var(--text-dim);margin-bottom:16px;max-width:500px}
.fx-hero-lede em{font-family:'Itim',cursive;color:var(--coral)}
.fx-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;font:800 12px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;border:1.5px solid var(--ink);background:var(--ink);color:#FAFAFA;text-decoration:none;cursor:pointer}
.fx-btn.coral{background:linear-gradient(135deg,var(--coral),#E64A2C);color:#FAFAFA;border-color:var(--coral)}
.fx-btn.ghost{background:var(--paper);color:var(--ink)}
.fx-hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.fx-hero-trustline{font:400 11px/1.6 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.3px;color:var(--text-dim);margin-top:16px}
.fx-hero-trustline em{font-family:'Itim',cursive;color:var(--coral);text-transform:none}
.fx-hero-side{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--ink);background:var(--paper);position:relative;align-self:start;box-shadow:var(--soft-yellow-glow)}
.fx-hero-side::before{content:'STATS.LOG';position:absolute;top:-10px;left:16px;background:var(--brand-yellow);color:var(--ink);font:700 9px/1 'JetBrains Mono',monospace;padding:4px 8px;letter-spacing:0.5px;border:1px solid var(--ink);text-transform:uppercase}
.fx-stat{padding:24px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);position:relative;background:var(--paper)}
.fx-stat:nth-child(2n){border-right:none}
.fx-stat:nth-last-child(-n+2){border-bottom:none}
.fx-stat::before{content:attr(data-coord);position:absolute;top:8px;right:8px;font:700 9px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--brand-yellow);padding:2px 5px}
.fx-stat-label{font:700 10px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-dim);margin-bottom:8px}
.fx-stat-value{font:900 36px/1 'JetBrains Mono',monospace;letter-spacing:-1.5px}
.fx-stat-value.coral{color:var(--coral)}
.fx-stat-value em{font-family:'Itim',cursive;font-size:20px;color:var(--coral)}
.fx-sparkle{position:absolute;font-weight:700;color:var(--brand-yellow);pointer-events:none;user-select:none;z-index:1;opacity:0.5;animation:sparkle-float 6s ease-in-out infinite}
.fx-sparkle.s2{font-size:10px;opacity:0.4}
.fx-sparkle.s3{font-size:18px;color:var(--coral)}
.fx-sparkle.s4{font-size:8px;opacity:0.3}
.fx-sparkle.s5{font-size:12px;color:var(--coral)}
.fx-case{padding:64px 32px;background:var(--paper);border-bottom:1.5px solid var(--ink);position:relative}
.fx-case::before{content:'> section: case-study · frame: 01.0';position:absolute;top:16px;left:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--paper);padding:4px 8px;border:1px solid var(--ink);z-index:2}
.fx-case-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;max-width:1200px;margin:32px auto 0}
.fx-case-image{border:1.5px solid var(--ink);overflow:hidden;background:var(--paper-2);aspect-ratio:4/3;position:relative}
.fx-case-image::before{content:'fig.01 / 4×3';position:absolute;top:12px;left:12px;background:var(--ink);color:var(--brand-yellow);font:700 10px/1 'JetBrains Mono',monospace;padding:4px 8px;z-index:2;letter-spacing:0.5px}
.fx-case-image img{width:100%;height:100%;object-fit:cover}
.fx-case-content{background:var(--paper);border:1.5px solid var(--ink);padding:32px;position:relative}
.fx-case-content::before{content:'case.log';position:absolute;top:-10px;left:16px;background:var(--coral);color:#FAFAFA;font:700 10px/1 'JetBrains Mono',monospace;padding:4px 8px;letter-spacing:0.5px;text-transform:uppercase}
.fx-case-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--ink);margin:16px 0}
.fx-case-stat{padding:16px;border-right:1.5px solid var(--ink);text-align:center;position:relative;background:var(--paper)}
.fx-case-stat:last-child{border-right:none}
.fx-case-stat::before{content:attr(data-coord);position:absolute;top:4px;right:4px;font:700 8px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--brand-yellow);padding:1px 4px}
.fx-case-stat-num{font:900 28px/1 'JetBrains Mono',monospace;letter-spacing:-1px}
.fx-case-stat-num em{font-family:'Itim',cursive;font-size:18px;color:var(--coral)}
.fx-case-stat-label{font:700 9px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-dim);margin-top:4px}
.fx-case-content h2{font:900 36px/1.1 'Kanit',sans-serif;letter-spacing:-1.5px;margin:16px 0 8px}
.fx-case-content h2 em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.fx-deck{font:300 15px/1.5;color:var(--text-dim);margin-bottom:12px}
.fx-log{background:var(--paper-2);border:1.5px solid var(--ink);padding:12px 16px;font:500 12px/1.7 'JetBrains Mono',monospace;color:var(--text-dim);margin-bottom:16px}
.fx-log .ts{color:rgba(10,10,10,0.3);margin-right:8px}
.fx-log .ok{color:#00875A;font-weight:700;margin-right:8px}
.fx-log .info{color:var(--coral);font-weight:700;margin-right:8px}
.fx-case-cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.fx-services{padding:64px 32px;background:var(--paper-2);border-bottom:1.5px solid var(--ink);background-image:radial-gradient(rgba(10,10,10,0.06) 1px,transparent 1px);background-size:24px 24px;position:relative}
.fx-services::before{content:'> section: services · 4 cards';position:absolute;top:16px;left:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--paper-2);padding:4px 8px;border:1px solid var(--ink);z-index:2}
.fx-services-grid{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--ink);max-width:1200px;margin:32px auto 0;background:var(--paper)}
.fx-service-card{padding:32px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);position:relative;transition:all 0.2s;background:var(--paper)}
.fx-service-card:nth-child(2n){border-right:none}
.fx-service-card:nth-last-child(-n+2){border-bottom:none}
.fx-service-card:hover{background:var(--paper-2)}
.fx-service-card::before{content:'card / ' attr(data-coord);position:absolute;top:12px;left:16px;font:700 9px/1 'JetBrains Mono',monospace;color:var(--coral)}
.fx-service-card::after{content:attr(data-size);position:absolute;bottom:12px;right:16px;font:700 9px/1 'JetBrains Mono',monospace;color:var(--text-dim)}
.fx-service-num{display:inline-block;font:900 36px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--brand-yellow);padding:4px 10px;margin:16px 0 8px;letter-spacing:-0.5px}
.fx-service-title{font:900 24px/1.1;letter-spacing:-0.5px;margin-bottom:8px}
.fx-service-title em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.fx-service-desc{font:300 13px/1.5;color:var(--text-dim);margin-bottom:12px}
.fx-service-list{list-style:none;border-top:1px solid var(--ink);padding-top:8px}
.fx-service-list li{font:400 13px/1.4;padding:4px 0;display:grid;grid-template-columns:20px 1fr;gap:6px}
.fx-service-list li::before{content:'▸';color:var(--coral);font-family:'JetBrains Mono',monospace;font-weight:700}
.fx-callout{padding:64px 80px;background:linear-gradient(180deg,#FFE600,#FFD60A);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);text-align:center;position:relative}
.fx-callout::before{content:'> callout / 02.0';position:absolute;top:12px;left:24px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--ink);background:var(--paper);padding:4px 8px;border:1px solid var(--ink)}
.fx-callout-text{font:400 26px/1.5 'Itim',cursive;color:var(--ink);max-width:800px;margin:0 auto 12px;letter-spacing:0.3px}
.fx-callout-text em{color:var(--coral);font-weight:600}
.fx-callout-attr{font:700 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;color:var(--ink)}
.fx-portfolio{padding:64px 32px;background:var(--paper);border-bottom:1.5px solid var(--ink);position:relative}
.fx-portfolio::before{content:'> section: portfolio · 4 items';position:absolute;top:16px;left:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--paper);padding:4px 8px;border:1px solid var(--ink);z-index:2}
.fx-portfolio-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:280px 280px;gap:16px;max-width:1200px;margin:32px auto 0}
.fx-portfolio-card{background:var(--paper);border:1.5px solid var(--ink);position:relative;overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;transition:all 0.3s}
.fx-portfolio-card.featured{grid-row:span 2;background:var(--coral);color:#FAFAFA;border-color:var(--ink)}
.fx-portfolio-card::before{content:'◉ ◉ ◉  moreminimore.com/' attr(data-path);display:block;background:var(--paper-2);border-bottom:1px solid var(--ink);padding:8px 12px;font:700 9px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-dim);position:absolute;top:0;left:0;right:0}
.fx-portfolio-card.featured::before{background:var(--ink);color:var(--brand-yellow)}
.fx-portfolio-card::after{content:attr(data-coord);position:absolute;bottom:12px;right:12px;background:var(--brand-yellow);color:var(--ink);font:700 9px/1 'JetBrains Mono',monospace;padding:3px 6px;z-index:2}
.fx-portfolio-card.featured::after{background:var(--ink);color:var(--brand-yellow)}
.fx-portfolio-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:contrast(1.1) saturate(0.8)}
.fx-portfolio-card.featured img{filter:contrast(1.3) saturate(0.6) brightness(0.85)}
.fx-portfolio-card>*{position:relative;z-index:1}
.fx-portfolio-tag{position:absolute;top:36px;left:12px;display:inline-block;font:700 9px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;background:var(--coral);color:#FAFAFA;padding:4px 6px;z-index:2;margin:0}
.fx-portfolio-card.featured .fx-portfolio-tag{background:var(--brand-yellow);color:var(--ink)}
.fx-portfolio-name{font:900 22px/1.1 'Kanit',sans-serif;letter-spacing:-0.5px;color:var(--ink);margin-bottom:4px;margin-top:28px;background:var(--paper);padding:4px 8px;align-self:flex-start;border:1px solid var(--ink)}
.fx-portfolio-card.featured .fx-portfolio-name{color:#FAFAFA;background:var(--ink);border-color:var(--ink)}
.fx-portfolio-name em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.fx-portfolio-card.featured .fx-portfolio-name em{color:var(--brand-yellow)}
.fx-portfolio-stats{font:700 11px/1 'JetBrains Mono',monospace;color:var(--coral)}
.fx-portfolio-card.featured .fx-portfolio-stats{color:var(--brand-yellow)}
.fx-process{padding:64px 32px;background:var(--paper-2);border-bottom:1.5px solid var(--ink);background-image:radial-gradient(rgba(10,10,10,0.06) 1px,transparent 1px);background-size:24px 24px;position:relative}
.fx-process::before{content:'> $ npx workflow run · 4 steps';position:absolute;top:16px;left:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--paper-2);padding:4px 8px;border:1px solid var(--ink);z-index:2}
.fx-process-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid var(--ink);max-width:1200px;margin:32px auto 0;background:var(--paper);position:relative}
.fx-process-step{padding:24px;border-right:1.5px solid var(--ink);position:relative;background:var(--paper)}
.fx-process-step:last-child{border-right:none}
.fx-process-step::after{content:'→';position:absolute;right:-12px;top:50%;transform:translateY(-50%);background:var(--brand-yellow);color:var(--ink);width:24px;height:24px;display:flex;align-items:center;justify-content:center;font:900 14px/1 'JetBrains Mono',monospace;border:1.5px solid var(--ink);z-index:2}
.fx-process-step:last-child::after{display:none}
.fx-process-step::before{content:attr(data-coord);position:absolute;top:8px;right:12px;font:700 9px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--brand-yellow);padding:2px 5px}
.fx-process-num{display:inline-block;font:900 14px/1 'JetBrains Mono',monospace;background:var(--ink);color:var(--brand-yellow);padding:6px 10px;margin-bottom:12px;letter-spacing:0.5px}
.fx-process-title{font:800 16px/1.2 'Kanit',sans-serif;margin-bottom:6px}
.fx-process-title em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.fx-process-text{font:500 12px/1.5 'JetBrains Mono',monospace;color:var(--text-dim)}
.fx-process-text em{font-family:'Itim',cursive;color:var(--coral)}
.fx-pricing{padding:64px 32px;background:var(--paper);border-bottom:1.5px solid var(--ink);position:relative}
.fx-pricing::before{content:'> $ cat /pricing/packages.json';position:absolute;top:16px;left:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--paper);padding:4px 8px;border:1px solid var(--ink);z-index:2}
.fx-pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--ink);max-width:1100px;margin:32px auto 0;background:var(--paper)}
.fx-pricing-card{padding:28px;border-right:1.5px solid var(--ink);position:relative;background:var(--paper)}
.fx-pricing-card:last-child{border-right:none}
.fx-pricing-card.featured{background:rgba(255,214,10,0.85);backdrop-filter:blur(4px)}
.fx-pricing-card::before{content:'tier / ' attr(data-coord);position:absolute;top:12px;right:12px;font:700 9px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--paper);padding:2px 5px;border:1px solid var(--ink)}
.fx-pricing-card.featured::before{background:var(--ink);color:var(--brand-yellow)}
.fx-pricing-tier{font:700 10px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-dim);margin-bottom:12px}
.fx-pricing-tier em{color:var(--coral);font-family:'Itim',cursive;text-transform:none}
.fx-pricing-name{font:900 28px/1.1 'Kanit',sans-serif;letter-spacing:-1px;margin-bottom:8px}
.fx-pricing-name em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.fx-pricing-amount{font:900 48px/1 'JetBrains Mono',monospace;letter-spacing:-2px;margin:12px 0}
.fx-pricing-amount em{font-size:24px;color:var(--coral);font-family:'Itim',cursive}
.fx-pricing-period{font:700 10px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-dim);margin-bottom:16px}
.fx-pricing-features{list-style:none;border-top:1px solid var(--ink);margin-bottom:16px}
.fx-pricing-features li{font:400 13px/1.4;padding:8px 0;border-bottom:1px dashed var(--line-2);display:flex;gap:8px}
.fx-pricing-features li::before{content:'✓';color:var(--coral);font-weight:700}
.fx-pricing-cta{display:block;text-align:center;padding:12px;background:var(--ink);color:#FAFAFA;font:800 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;text-decoration:none;border:1px solid var(--ink)}
.fx-faq{padding:64px 32px;background:var(--paper-2);border-bottom:1.5px solid var(--ink);background-image:radial-gradient(rgba(10,10,10,0.06) 1px,transparent 1px);background-size:24px 24px;position:relative}
.fx-faq::before{content:'> $ cat /faq.txt';position:absolute;top:16px;left:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--paper-2);padding:4px 8px;border:1px solid var(--ink);z-index:2}
.fx-faq-list{max-width:900px;margin:32px auto 0;display:flex;flex-direction:column;gap:24px}
.fx-faq-item{padding:0;border:0;background:transparent;backdrop-filter:none}
.fx-faq-item::before{content:none}
.fx-faq-q{font:700 17px/1.5 'Kanit',sans-serif;color:var(--ink);margin:0 0 8px;padding:0;background:transparent;border:0}
.fx-faq-q em{font-family:'Itim',cursive;color:var(--coral);font-weight:400;font-style:italic}
.fx-faq-a{font:400 14px/1.7 'Kanit',sans-serif;color:var(--text-dim);padding:0 0 0 16px;margin:0;border-left:3px solid var(--coral);background:transparent}
.fx-faq-a em{font-family:'Itim',cursive;color:var(--coral);font-weight:400;font-style:italic}
.fx-faq-a strong{font:600 14px/1.7 'Kanit',sans-serif;color:var(--ink)}
.fx-contact{padding:80px 32px;background:var(--paper);border-bottom:1.5px solid var(--ink);text-align:center;background-image:linear-gradient(to right,rgba(10,10,10,0.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(10,10,10,0.03) 1px,transparent 1px);background-size:40px 40px;position:relative}
.fx-contact::before{content:'> $ contact@start.sh';position:absolute;top:16px;left:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--paper);padding:4px 8px;border:1px solid var(--ink);z-index:2}
.fx-contact-title{font:900 48px/1;letter-spacing:-2px;margin-bottom:16px}
.fx-contact-title em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
.fx-contact-desc{font:300 16px/1.5;color:var(--text-dim);max-width:500px;margin:0 auto 32px}
.fx-contact-desc em{font-family:'Itim',cursive;color:var(--coral)}
.fx-contact-form{display:flex;max-width:480px;margin:0 auto;background:var(--paper);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--brand-yellow)}
.fx-contact-form::before{content:'$';padding:0 16px;display:flex;align-items:center;color:var(--coral);font:700 20px/1 'JetBrains Mono',monospace;border-right:1.5px solid var(--ink);background:var(--brand-yellow)}
.fx-contact-input{flex:1;padding:16px;border:none;background:transparent;font:500 14px/1 'JetBrains Mono',monospace;outline:none}
.fx-contact-submit{background:var(--ink);color:#FAFAFA;border:none;padding:0 20px;font:800 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;cursor:pointer}
.fx-footer{background:var(--paper-2);border-top:1.5px solid var(--ink);padding:48px 32px 24px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-dim)}
.fx-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;max-width:1280px;margin:0 auto 32px;padding-bottom:32px;border-bottom:1px dashed var(--ink)}
.fx-footer-col h4{font:700 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;color:var(--ink);margin-bottom:12px}
.fx-footer-col ul{list-style:none}
.fx-footer-col li{margin-bottom:6px}
.fx-footer-col a{color:var(--text-dim);text-decoration:none;font-size:12px}
.fx-footer-brand{display:none}
.fx-footer-logo{display:inline-block;line-height:0;margin-bottom:12px}
.fx-footer-logo-img{height:32px;width:auto;display:block}
.fx-footer-tagline{font:300 13px/1.5;color:var(--text-dim);max-width:280px}
.fx-footer-bottom{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:11px;color:rgba(10,10,10,0.3);text-transform:uppercase;letter-spacing:0.5px}
.fx-footer-bottom em{color:var(--coral);font-family:'Itim',cursive;text-transform:none}
.fx-reveal{opacity:1;transform:translateY(0);transition:opacity 0.7s cubic-bezier(0.2,0.8,0.2,1),transform 0.7s cubic-bezier(0.2,0.8,0.2,1)}
.fx-reveal.revealed{opacity:1;transform:translateY(0)}
.fx-stagger>*{opacity:1;transform:translateY(0);transition:opacity 0.5s cubic-bezier(0.2,0.8,0.2,1),transform 0.5s cubic-bezier(0.2,0.8,0.2,1)}
.fx-stagger.staggered>*:nth-child(1){transition-delay:0.05s;opacity:1;transform:translateY(0)}
.fx-stagger.staggered>*:nth-child(2){transition-delay:0.15s;opacity:1;transform:translateY(0)}
.fx-stagger.staggered>*:nth-child(3){transition-delay:0.25s;opacity:1;transform:translateY(0)}
.fx-stagger.staggered>*:nth-child(4){transition-delay:0.35s;opacity:1;transform:translateY(0)}
.fx-hero-title>span{display:inline-block;animation:type-up 0.8s cubic-bezier(0.2,0.8,0.2,1) both}
.fx-hero-title>span:nth-child(1){animation-delay:0.1s}
.fx-hero-title>span:nth-child(2){animation-delay:0.25s}
.fx-hero-title>span:nth-child(3){animation-delay:0.4s}
.fx-hero-title>span:nth-child(4){animation-delay:0.55s}
.fx-callout{animation:pulse-glow 3s ease-in-out infinite}
.fx-stat-value{animation:float 4s ease-in-out infinite}
.fx-stat:nth-child(2) .fx-stat-value{animation-delay:0.3s}
.fx-stat:nth-child(3) .fx-stat-value{animation-delay:0.6s}
.fx-stat:nth-child(4) .fx-stat-value{animation-delay:0.9s}
.fx-faq-a::after{content:"█";display:inline-block;margin-left:4px;color:var(--coral);font-family:'JetBrains Mono',monospace;animation:blink-cursor 1s steps(1) infinite}
.fx-portfolio-card{transition:all 0.4s cubic-bezier(0.2,0.8,0.2,1)}
.fx-portfolio-card:hover{transform:translate(-4px,-4px) scale(1.01);box-shadow:8px 8px 0 var(--ink)}
.fx-portfolio-card.featured:hover{box-shadow:8px 8px 0 var(--coral)}
.fx-process-step{transition:all 0.3s cubic-bezier(0.2,0.8,0.2,1)}
.fx-process-step:hover{background:var(--brand-yellow)}
.fx-faq-item{transition:all 0.3s cubic-bezier(0.2,0.8,0.2,1)}
.fx-faq-item:hover{transform:translateX(4px);border-color:var(--coral)}
.fx-service-card{transition:all 0.3s cubic-bezier(0.2,0.8,0.2,1)}
.fx-service-card:hover{transform:translateY(-4px);border-color:var(--coral)}
.fx-service-card:hover .fx-service-num{background:var(--coral);color:#FAFAFA}
.fx-pricing-card{transition:all 0.3s cubic-bezier(0.2,0.8,0.2,1)}
.fx-pricing-card:hover{transform:translateY(-4px)}
.fx-log>div{opacity:0;transform:translateX(-8px);transition:opacity 0.4s,transform 0.4s}
.fx-log.staggered>div:nth-child(1){transition-delay:0.2s;opacity:1;transform:translateX(0)}
.fx-log.staggered>div:nth-child(2){transition-delay:0.5s;opacity:1;transform:translateX(0)}
.fx-log.staggered>div:nth-child(3){transition-delay:0.8s;opacity:1;transform:translateX(0)}
.fx-portfolio-card .fx-portfolio-tag{animation:tag-pulse 3s ease-in-out infinite}
.fx-nav{background:rgba(250,250,250,0.78);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.fx-hero-content{background:rgba(255,255,255,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.fx-faq-item{background:rgba(255,255,255,0.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.fx-pricing-card.featured{background:rgba(255,214,10,0.85);backdrop-filter:blur(4px)}
.fx-pricing-card.featured{position:relative}
.fx-pricing-card.featured::before{content:"";position:absolute;top:0;left:0;width:6px;height:100%;background:linear-gradient(180deg,var(--brand-yellow),var(--coral),var(--brand-yellow));background-size:100% 200%;animation:gradient-vertical 4s linear infinite}
.fx-hero-content{box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 4px 16px rgba(10,10,10,0.08)}
.fx-hero::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");opacity:0.05;pointer-events:none;z-index:1;mix-blend-mode:multiply}
.fx-services{background-image:radial-gradient(rgba(10,10,10,0.06) 1px,transparent 1px);background-size:24px 24px}
.fx-process{background-image:radial-gradient(rgba(10,10,10,0.06) 1px,transparent 1px);background-size:24px 24px}
.fx-faq{background-image:radial-gradient(rgba(10,10,10,0.06) 1px,transparent 1px);background-size:24px 24px}
.fx-callout{background:linear-gradient(180deg,#FFE600,var(--brand-yellow))}
.fx-footer{background-image:linear-gradient(180deg,var(--paper-2) 0%,var(--paper-3) 100%)}
.fx-contact-form{box-shadow:4px 4px 0 var(--brand-yellow),0 8px 24px rgba(10,10,10,0.08);transition:all 0.2s}
.fx-contact-form:hover{box-shadow:6px 6px 0 var(--coral),0 12px 32px rgba(10,10,10,0.12);transform:translate(-2px,-2px)}
.fx-btn.coral{background:linear-gradient(135deg,var(--coral) 0%,#E64A2C 100%)}
.fx-btn.coral:hover{background:linear-gradient(135deg,var(--ink) 0%,var(--coral) 100%)}
.fx-marquee-track{animation:marquee 40s linear infinite}
.fx-faq-a::after{content:"█";display:inline-block;margin-left:4px;color:var(--coral);font-family:'JetBrains Mono',monospace;animation:blink-cursor 1s steps(1) infinite}
.fx-hero::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");opacity:0.05;pointer-events:none;z-index:1;mix-blend-mode:multiply}

/* ============================================
   DARK MODE OVERRIDE (added 2026-06-13 evening)
   Per user spec: light + dark mode with toggle.
   Strategy: override CSS tokens, then fix
   .fx-utility-bar which had hardcoded dark colors
   (background:#0A0A0A) — must use --ink/--paper vars.
   ============================================ */
:root {
  --brand-yellow: #FFD60A;
  --coral: #FF5A3C;
  --ink: #0A0A0A;
  --ink-2: #1A1A1A;
  --paper: #FAFAFA;
  --paper-2: #F5F5F5;
  --paper-3: #F0F0F0;
  --line: rgba(10,10,10,0.1);
  --line-2: rgba(10,10,10,0.2);
  --text-dim: rgba(10,10,10,0.6);
  --text-dimmer: rgba(10,10,10,0.4);
  /* Surface aliases used by utility bar / nav (were hardcoded) */
  --utility-bg: #0A0A0A;
  --utility-fg: rgba(250,250,250,0.85);
  --utility-fg-dim: rgba(250,250,250,0.7);
  --utility-fg-dimmer: rgba(250,250,250,0.5);
  --nav-bg: rgba(250,250,250,0.78);
  --hero-content-bg: rgba(255,255,255,0.6);
  --faq-item-bg: rgba(255,255,255,0.7);
  /* soft yellow glow for hero side (3D feel) */
  --soft-yellow-glow: 6px 6px 0 rgba(255,214,10,0.3);
}

[data-theme="dark"] {
  --ink: #FAFAFA;
  --ink-2: #F0F0F0;
  --paper: #0A0A0A;
  --paper-2: #1A1A1A;
  --paper-3: #2A2A2A;
  --line: rgba(250,250,250,0.12);
  --line-2: rgba(250,250,250,0.22);
  --text-dim: rgba(250,250,250,0.65);
  --text-dimmer: rgba(250,250,250,0.4);
  /* In dark mode, utility bar inverts: light bar on dark bg */
  --utility-bg: #FAFAFA;
  --utility-fg: rgba(10,10,10,0.85);
  --utility-fg-dim: rgba(10,10,10,0.7);
  --utility-fg-dimmer: rgba(10,10,10,0.5);
  /* Nav: dark glass */
  --nav-bg: rgba(10,10,10,0.85);
  /* Hero content: dark glass */
  --hero-content-bg: rgba(26,26,26,0.7);
  --faq-item-bg: rgba(26,26,26,0.6);
  --soft-yellow-glow: 6px 6px 0 rgba(255,214,10,0.2);
  /* Coral stays vibrant in dark mode (it's already high-contrast) */
  /* Yellow stays vibrant (high luminance) */
}

/* Utility bar: use --utility-* vars instead of hardcoded colors */
.fx-utility-bar{background:var(--utility-bg);color:var(--utility-fg)}
.fx-utility-item{color:var(--utility-fg-dim)}
.fx-utility-item strong{color:var(--brand-yellow)}
.fx-theme-toggle{background:rgba(0,0,0,0.08);border:1px solid rgba(0,0,0,0.15);color:var(--ink)}
[data-theme="dark"] .fx-theme-toggle{background:rgba(250,250,250,0.08);border:1px solid rgba(250,250,250,0.18);color:var(--ink)}
.fx-mode-indicator{color:var(--utility-fg-dimmer)}
[data-theme="dark"] .fx-mode-indicator{color:var(--utility-fg-dimmer)}

/* Theme toggle button itself */
.fx-theme-toggle{cursor:pointer;user-select:none}
.fx-theme-toggle:hover{transform:scale(1.05);background:var(--brand-yellow);color:var(--ink)}

/* Nav: use --nav-bg for theme-aware glass */
.fx-nav{background:var(--nav-bg)}

/* Hero content: use --hero-content-bg for theme-aware glass */
.fx-hero-content{background:var(--hero-content-bg)}

/* Hero side glow + FAQ item bg: theme-aware */
.fx-hero-side{box-shadow:var(--soft-yellow-glow)}
.fx-faq-item{background:var(--faq-item-bg)}

/* Specific dark mode tweaks for elements that need extra contrast */
[data-theme="dark"] .fx-nav-dropdown{background:var(--paper);border-color:var(--ink)}
[data-theme="dark"] .fx-pricing-card.featured{background:rgba(255,214,10,0.15)}
[data-theme="dark"] .fx-callout{background:linear-gradient(180deg,#FFE600,var(--brand-yellow))}
[data-theme="dark"] .fx-portfolio-card.featured{background:var(--coral);color:#FAFAFA}
[data-theme="dark"] .fx-portfolio-name{background:var(--ink);color:var(--paper)}
[data-theme="dark"] .fx-portfolio-card .fx-portfolio-name{color:#FAFAFA;background:var(--ink)}
[data-theme="dark"] .fx-portfolio-card.featured .fx-portfolio-name{color:var(--brand-yellow);background:var(--ink)}
[data-theme="dark"] .fx-process-num{background:var(--brand-yellow);color:var(--ink)}
[data-theme="dark"] .fx-service-num{background:var(--brand-yellow);color:var(--ink)}
[data-theme="dark"] .fx-prose{color:var(--ink)}

/* Smooth theme transition (not too jarring) */
html { transition: background-color 0.3s ease, color 0.3s ease; }
body, .fx-utility-bar, .fx-nav, .fx-hero-content, .fx-case, .fx-services, .fx-callout,
.fx-portfolio, .fx-process, .fx-pricing, .fx-faq, .fx-contact, .fx-footer, .fx-section-header,
.fx-service-card, .fx-portfolio-card, .fx-pricing-card, .fx-faq-item, .fx-prose {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ============================================
   NAV DROPDOWN ENHANCEMENT (added 2026-06-13, plan round 2)
   v6-nav didn't have a dropdown originally; we added
   'บริการ' dropdown per user spec. Active link styling too.
   ============================================ */
.fx-nav-menu{position:relative}
.fx-nav-menu li{position:relative}
.fx-nav-dropdown{position:absolute;top:100%;left:0;min-width:240px;background:var(--paper);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);list-style:none;padding:8px 0;margin:0;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity 0.18s,transform 0.18s,visibility 0.18s;z-index:60}
.fx-nav-has-dropdown:hover>.fx-nav-dropdown,
.fx-nav-dropdown-open>.fx-nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.fx-nav-dropdown li{margin:0}
.fx-nav-dropdown a{display:block;padding:10px 18px;font:600 12px/1.3 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.3px;color:var(--ink);text-decoration:none;transition:background 0.15s,color 0.15s}
.fx-nav-dropdown a:hover{background:var(--brand-yellow);color:var(--ink)}
.fx-nav-dropdown a.active{background:var(--coral);color:#FAFAFA}
.fx-nav-menu a.active{color:var(--coral)}
.fx-nav-menu a.active::after{content:'';display:block;height:2px;background:var(--coral);margin-top:4px}
@media (max-width:768px){
  .fx-nav-inner{flex-direction:column;align-items:flex-start;padding:12px 16px}
  .fx-nav-menu{flex-direction:column;width:100%;gap:0}
  .fx-nav-menu>li{width:100%;border-bottom:1px solid var(--line-2)}
  .fx-nav-menu>li>a{display:block;padding:12px 0}
  .fx-nav-dropdown{position:static;box-shadow:none;border:none;background:var(--paper-2);opacity:1;visibility:visible;transform:none;max-height:0;overflow:hidden;padding:0;transition:max-height 0.25s,padding 0.25s}
  .fx-nav-dropdown-open>.fx-nav-dropdown{max-height:400px;padding:8px 0}
  .fx-nav-cta{margin-top:12px;align-self:flex-start}
}

/* ============================================
   ITIM THAI SIDE-BEARING FIX (added 2026-06-13)
   Per user memory: Thai display fonts (Itim) ship
   with wide side bearings causing visual gaps
   after Latin punctuation. Apply tight letter-
   spacing to all <em> in v7-5 sections.
   ============================================ */
.fx-utility-bar em,
.fx-marquee em,
.fx-nav em,
.fx-nav-logo-text em,
.fx-hero-title em,
.fx-hero-lede em,
.fx-case-stat-num em,
.fx-service-title em,
.fx-callout-text em,
.fx-portfolio-name em,
.fx-process-text em,
.fx-pricing-tier em,
.fx-pricing-cta em,
.fx-faq-q em,
.fx-faq-a em,
.fx-contact-title em,
.fx-contact-desc em,
.fx-footer-bottom em,
.fx-prose em,
.fx-prose :global(em) {
  letter-spacing: -0.5px;
  margin-right: -2px;
  display: inline-block;
}

/* ============================================
   PREFERS-REDUCED-MOTION (added 2026-06-13)
   Per plan Phase 6.2: respect user motion preferences.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .fx-marquee-track,
  .fx-sparkle,
  .fx-reveal,
  .fx-stagger {
    animation: none !important;
    transition: none !important;
  }
  .fx-hero::after,
  .fx-faq-a::after { display: none !important; }
}

/* ============================================
   ANIMATION FIXES (added 2026-06-13 evening)
   v7-5 design system defined animation: on 5+ elements
   (sparkle-float, pulse-glow, float, tag-pulse) but the
   corresponding @keyframes were NEVER included. User
   reported "เว็บไม่มี animation เลย" — this is the root cause.

   Also: .fx-reveal had no initial hidden state (started at
   opacity:1 with no .revealed class to transition TO), so
   the reveal-on-scroll observer fired but nothing animated.
   Same for .fx-stagger — no CSS for .staggered state.

   These 4 keyframes + 2 state fixes restore the intended
   "Neon × Tech Grid, light" feel.
   ============================================ */

/* Sparkles: gentle floating up/down + rotate */
@keyframes sparkle-float {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.5; }
  50%      { transform: translateY(-12px) rotate(180deg); opacity: 0.9; }
}

/* Callout: pulsing yellow glow (subtle scale + brightness) */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 60, 0); }
  50%      { box-shadow: 0 0 24px 4px rgba(255, 90, 60, 0.35); }
}

/* Stat values: gentle float up/down */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Portfolio tag: subtle pulse to draw eye */
@keyframes tag-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* Hero eyebrow: typewriter effect (chars appear sequentially) */
@keyframes type-up {
  0%   { width: 0; opacity: 1; }
  100% { width: 100%; opacity: 1; }
}

/* Hero cursor: blink effect (the █ block after $ command) */
@keyframes blink-cursor {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Pricing card featured border: gradient scrolls vertically */
@keyframes gradient-vertical {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 200%; }
}

/* Re-bind animations with !important to survive the
   reduced-motion override (which targets the wrong selector).
   The reduced-motion block uses .fx-sparkle / .fx-callout /
   .fx-stat-value / .fx-portfolio-tag — these ARE the right
   selectors, so users with reduced-motion will still see
   animations disabled (per accessibility intent). */
.fx-sparkle        { animation: sparkle-float 6s ease-in-out infinite; }
.fx-callout        { animation: pulse-glow 3s ease-in-out infinite; }
.fx-stat-value     { animation: float 4s ease-in-out infinite; }
.fx-portfolio-tag  { animation: tag-pulse 2.5s ease-in-out infinite; }

/* Initial hidden state for .fx-reveal — must be opacity:0 BEFORE
   the observer adds .revealed. Without this, the element starts
   visible and there is nothing to transition TO. */
.fx-reveal:not(.revealed) {
  opacity: 0;
  transform: translateY(40px);
}
.fx-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger reveal — children start hidden, fade in with delays */
.fx-stagger:not(.staggered) > * {
  opacity: 0;
  transform: translateY(20px);
}
.fx-stagger.staggered > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fx-stagger.staggered > *:nth-child(1) { transition-delay: 0.05s; }
.fx-stagger.staggered > *:nth-child(2) { transition-delay: 0.10s; }
.fx-stagger.staggered > *:nth-child(3) { transition-delay: 0.15s; }
.fx-stagger.staggered > *:nth-child(4) { transition-delay: 0.20s; }
.fx-stagger.staggered > *:nth-child(5) { transition-delay: 0.25s; }
.fx-stagger.staggered > *:nth-child(6) { transition-delay: 0.30s; }

/* General button hover (was missing — only coral had hover) */
.fx-btn:hover {
  background: var(--coral);
  color: #FAFAFA;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
  transition: all 0.15s ease;
}
.fx-btn.ghost:hover {
  background: var(--brand-yellow);
  color: var(--ink);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
  transition: all 0.15s ease;
}
.fx-nav-cta:hover {
  background: var(--ink);
  color: var(--brand-yellow);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--coral);
  transition: all 0.15s ease;
}
.fx-pricing-cta:hover {
  background: var(--coral);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--brand-yellow);
  transition: all 0.15s ease;
}

/* Nav links: hover state (was missing) */
.fx-nav-menu a:hover {
  color: var(--coral);
  background: var(--brand-yellow);
  transition: all 0.15s ease;
}
.fx-nav-menu a {
  transition: all 0.15s ease;
}

/* Theme toggle: visible interactive feedback */
.fx-theme-toggle:hover {
  background: var(--brand-yellow);
  color: var(--ink);
  border-color: var(--brand-yellow);
  transition: all 0.15s ease;
}
.fx-theme-toggle {
  transition: all 0.15s ease;
}
.fx-mode-indicator {
  transition: opacity 0.3s ease;
}
.fx-mode-indicator:hover {
  opacity: 1;
}

/* Service/portfolio cards: subtle lift on hover */
.fx-service-card,
.fx-portfolio-card,
.fx-pricing-card,
.fx-faq-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fx-service-card:hover,
.fx-portfolio-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.fx-pricing-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.fx-pricing-card.featured:hover {
  box-shadow: 6px 6px 0 var(--coral);
}
.fx-faq-item:hover {
  background: var(--paper-2);
  transform: translateX(4px);
}

/* Stat cards: subtle hover */
.fx-stat:hover {
  background: var(--brand-yellow);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
  transition: all 0.15s ease;
}
.fx-stat {
  transition: all 0.15s ease;
}
.fx-case-stat:hover {
  transform: scale(1.05);
  transition: transform 0.15s ease;
}
.fx-case-stat {
  transition: transform 0.15s ease;
}

/* Process step hover: highlight current step */
.fx-process-step:hover {
  background: var(--paper-2);
  border-color: var(--coral);
  transform: translateY(-4px);
  transition: all 0.2s ease;
}
.fx-process-step {
  transition: all 0.2s ease;
  cursor: pointer;
}

/* Sparkle variant speeds (s2-s5) — different tempos for visual variety */
.fx-sparkle.s2 { animation-duration: 4s; animation-delay: 0.5s; }
.fx-sparkle.s3 { animation-duration: 5s; animation-delay: 1s; }
.fx-sparkle.s4 { animation-duration: 7s; animation-delay: 1.5s; }
.fx-sparkle.s5 { animation-duration: 5.5s; animation-delay: 2s; }