{"id":10,"date":"2026-06-18T20:17:43","date_gmt":"2026-06-18T20:17:43","guid":{"rendered":"https:\/\/rocreativeai.com\/?page_id=10"},"modified":"2026-06-24T04:05:40","modified_gmt":"2026-06-24T04:05:40","slug":"toolkit","status":"publish","type":"page","link":"https:\/\/rocreativeai.com\/toolkit\/","title":{"rendered":"Toolkit"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nRO Toolkit \u2014 AI Creative Tools by Rosita Cabrera<\/title>\n<meta name=\"description\" content=\"12 production-grade HTML tools built for AI creatives. Lighting Designer, Prompt Breakdown Card, Camera Move Builder and more \u2014 built by a 25-year design veteran.\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@400;700;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&family=DM+Mono:wght@400&display=swap\" rel=\"stylesheet\">\n<style>\n\/* \u2500\u2500 RESET & ROOT \u2500\u2500 *\/\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}\n\n:root {\n --bg:#080A0F; --card:#0D1117; --surface:#111820; --border:#1E2A38;\n --cyan:#00E5FF; --cyan-bg:rgba(0,229,255,0.07); --cyan-border:rgba(0,229,255,0.22);\n --orange:#FF6B35; --orange-bg:rgba(255,107,53,0.08); --orange-border:rgba(255,107,53,0.25);\n --purple:#A78BFA; --purple-bg:rgba(167,139,250,0.08); --purple-border:rgba(167,139,250,0.25);\n --green:#34D399; --green-bg:rgba(52,211,153,0.08); --green-border:rgba(52,211,153,0.25);\n --amber:#FBBF24; --amber-bg:rgba(251,191,36,0.08); --amber-border:rgba(251,191,36,0.25);\n --pink:#F472B6; --pink-bg:rgba(244,114,182,0.08); --pink-border:rgba(244,114,182,0.25);\n --white:#F0F4F8; --muted: #a3b5c1; --muted2: #718999;\n --fd:'Orbitron',monospace; --fb:'DM Sans',sans-serif; --fm:'DM Mono',monospace;\n}\n\nhtml { scroll-behavior:smooth; }\nbody {\n background:var(--bg); color:var(--white); font-family:var(--fb);\n overflow-x:hidden; -webkit-font-smoothing:antialiased;\n}\n\nbody::before {\n content:''; position:fixed; inset:0;\n background-image:\n linear-gradient(var(--border) 1px,transparent 1px),\n linear-gradient(90deg,var(--border) 1px,transparent 1px);\n background-size:44px 44px; opacity:0.18; pointer-events:none; z-index:0;\n}\n\n\/* \u2500\u2500 NAV \u2500\u2500 *\/\nnav {\n position:fixed; top:0; left:0; right:0; z-index:100;\n display:flex; align-items:center; justify-content:space-between;\n padding: 52px; height:64px;\n background:rgba(8,10,15,0.88); backdrop-filter:blur(16px);\n border-bottom:1px solid var(--border);\n animation:fadeDown 0.5s ease both;\n}\n.nav-brand { display:flex; align-items:center; gap:12px; text-decoration:none; }\n.nav-logo {\n font-family: var(--fd); font-size:32px; font-weight: 900;\n color: var(--white); letter-spacing: -0.02em; line-height: 1;\n}\n.nav-logo span { color:var(--cyan); }\n.nav-sep { width:1px; height:20px; background:var(--border); }\n.nav-brand-title { font-family: var(--fd); font-size:14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); }\n.nav-brand-sub { font-family: var(--fd); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }\n.nav-links { display:flex; align-items:center; gap:4px; }\n.nav-link {\n font-family:var(--fd); font-size:12px; letter-spacing:0.15em; text-transform:uppercase;\n color:var(--muted); text-decoration:none; padding:8px 12px;\n border:1px solid transparent; border-radius:3px; transition:all 0.2s;\n}\n.nav-link:hover { color:var(--white); border-color:var(--border); }\n.nav-link.active { color:var(--cyan); border-color:var(--cyan-border); background:var(--cyan-bg); }\n.nav-cta {\n font-family:var(--fd); font-size:12px; letter-spacing:0.15em; text-transform:uppercase;\n color:#080A0F; background:var(--cyan); text-decoration:none;\n padding:9px 16px; border-radius:3px; font-weight:700; transition:opacity 0.2s;\n}\n.nav-cta:hover { opacity:0.85; }\n\n\/* \u2500\u2500 LAYOUT \u2500\u2500 *\/\n.container { max-width:1100px; margin:0 auto; padding:0 48px; }\nsection { position:relative; z-index:1; }\n\n\/* \u2500\u2500 HERO \u2500\u2500 *\/\n.page-hero {\n padding:120px 0 80px; border-bottom:1px solid var(--border);\n position:relative; overflow:hidden;\n}\n.hero-glow {\n position:absolute; top:-20%; right:-5%;\n width:600px; height:600px;\n background:radial-gradient(circle, rgba(0,229,255,0.07) 0%, transparent 65%);\n pointer-events:none;\n}\n.hero-inner {\n display:grid; grid-template-columns:1fr 360px; gap:60px; align-items:end;\n}\n.hero-eyebrow {\n display:flex; align-items:center; gap:10px; margin-bottom:24px;\n animation:fadeUp 0.5s ease 0.05s both;\n}\n.eyebrow-dot { width:5px; height:5px; border-radius:50%; background:var(--cyan); animation:pulse 2s ease-in-out infinite; }\n.eyebrow-text { font-family:var(--fd); font-size:14px; letter-spacing:0.22em; text-transform:uppercase; color:var(--cyan); }\n.page-title {\n font-family:var(--fd); font-size:clamp(32px,4vw,52px); font-weight:900;\n line-height:1.05; letter-spacing:-0.02em; color:var(--white); margin-bottom:8px;\n animation:fadeUp 0.5s ease 0.1s both;\n}\n.page-title span { color:var(--cyan); }\n.page-subtitle {\n font-family:var(--fd); font-size:14px; letter-spacing:0.18em; text-transform:uppercase;\n color:var(--muted); margin-bottom:24px;\n animation:fadeUp 0.5s ease 0.15s both;\n}\n.page-desc {\n font-size:15px; line-height:1.75; color:var(--white); font-weight:300; max-width:540px;\n animation:fadeUp 0.5s ease 0.2s both;\n}\n.page-desc strong { color:var(--cyan); font-weight:500; }\n\n\/* \u2500\u2500 FILTER BAR \u2500\u2500 *\/\n.filter-bar {\n display:flex; align-items:center; gap:8px; margin-top:40px; flex-wrap:wrap;\n animation:fadeUp 0.5s ease 0.25s both;\n}\n.filter-label { font-family:var(--fd); font-size:14px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-right:4px; }\n.filter-btn {\n font-family:var(--fd); font-size:14px; letter-spacing:0.12em; text-transform:uppercase;\n padding:10px 14px; border-radius:3px; border:1px solid var(--border);\n background:transparent; color:var(--muted); cursor:pointer; transition:all 0.18s;\n}\n.filter-btn:hover { border-color:var(--cyan-border); color:var(--cyan); }\n.filter-btn.active { background:var(--cyan-bg); border-color:var(--cyan-border); color:var(--cyan); }\n\n\/* \u2500\u2500 HERO STATS \u2500\u2500 *\/\n.hero-stats-card {\n background:var(--card); border:1px solid var(--border); border-radius:10px; overflow:hidden;\n animation:fadeUp 0.5s ease 0.2s both;\n}\n.hsc-top { padding:20px; border-bottom:1px solid var(--border); background:var(--surface); }\n.hsc-label { font-family:var(--fd); font-size:14px;; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }\n.hsc-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }\n.hsc-stat { }\n.hsc-val { font-family:var(--fd); font-size:22px; font-weight:900; color:var(--white); line-height:1; }\n.hsc-val span { color:var(--cyan); }\n.hsc-lbl { font-family:var(--fd); font-size:14px;; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-top:4px; }\n.hsc-body { padding:16px 20px; }\n.hsc-items { display:flex; flex-direction:column; gap:8px; }\n.hsc-item { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--muted); }\n.hsc-item-dot { width:4px; height:4px; border-radius:50%; background:var(--cyan); flex-shrink:0; }\n.hsc-footer { padding:12px 20px; border-top:1px solid var(--border); }\n.hsc-cta {\n display:block; background:var(--cyan); color:#080A0F; text-decoration:none;\n text-align:center; font-family:var(--fd); font-size:14px; letter-spacing:0.16em;\n text-transform:uppercase; font-weight:700; padding:11px; border-radius:4px;\n transition:opacity 0.15s; width:100%;\n}\n.hsc-cta:hover { opacity:0.85; }\n\n\/* \u2500\u2500 SECTION STRUCTURE \u2500\u2500 *\/\n.slabel {\n font-family:var(--fd); font-size:14px; letter-spacing:0.22em; text-transform:uppercase;\n color:var(--muted); margin-bottom:14px; display:flex; align-items:center; gap:10px;\n}\n.slabel::after { content:''; flex:1; height:1px; background:var(--border); }\n\n\/* \u2500\u2500 FREE TOOL SPOTLIGHT \u2500\u2500 *\/\n.free-section { padding:80px 0 60px; }\n\n.spotlight-card {\n background:var(--card); border:1px solid var(--cyan-border); border-radius:12px;\n overflow:hidden; display:grid; grid-template-columns:1fr 420px;\n position:relative;\n}\n.spotlight-card::before {\n content:''; position:absolute; top:0; left:0; right:0; height:2px;\n background:linear-gradient(90deg, transparent, var(--cyan) 50%, transparent);\n}\n\n.sc-left { padding:40px 44px; }\n.sc-free-badge {\n display:inline-flex; align-items:center; gap:10px;\n background:var(--cyan-bg); border:1px solid var(--cyan-border);\n border-radius:3px; padding:5px 12px; margin-bottom:24px;\n}\n.sc-free-dot { width:5px; height:5px; border-radius:50%; background:var(--cyan); animation:pulse 2s ease-in-out infinite; }\n.sc-free-text { font-family:var(--fd); font-size:14px;; letter-spacing:0.18em; text-transform:uppercase; color:var(--cyan); }\n\n.sc-num { font-family:var(--fd); font-size:14px;; font-weight:700; letter-spacing:0.1em; color:var(--muted); margin-bottom:8px; }\n.sc-name { font-family:var(--fd); font-size:clamp(20px,2.4vw,28px); font-weight:900; color:var(--white); margin-bottom:8px; letter-spacing:-0.01em; }\n.sc-tagline { font-family:var(--fd); font-size:14px; letter-spacing:0.18em; text-transform:uppercase; color:var(--cyan); margin-bottom:20px; }\n.sc-desc { font-size:14px; line-height:1.75; color:var(--muted); font-weight:300; margin-bottom:28px; }\n\n.sc-features { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:32px; }\n.sc-feat {\n display:flex; align-items:flex-start; gap:8px; padding:10px 12px;\n background:var(--surface); border-radius:5px; border:1px solid var(--border);\n}\n.sc-feat-dot { width:4px; height:4px; border-radius:50%; background:var(--cyan); flex-shrink:0; margin-top:5px; }\n.sc-feat-text { font-size:14px; color:var(--white); line-height:1.4; }\n\n.sc-actions { display:flex; gap:10px; }\n.btn-primary {\n display:inline-flex; align-items:center; gap:10px;\n background:var(--cyan); color:#080A0F; text-decoration:none;\n font-family:var(--fd); font-size:14px; letter-spacing:0.16em; text-transform:uppercase;\n font-weight:700; padding:13px 24px; border-radius:4px; border:none; cursor:pointer;\n transition:opacity 0.15s, transform 0.15s;\n}\n.btn-primary:hover { opacity:0.88; transform:translateY(-1px); }\n.btn-secondary {\n display:inline-flex; align-items:center; gap:10px;\n background:transparent; color:var(--white); text-decoration:none;\n font-family:var(--fd); font-size:14px; letter-spacing:0.16em; text-transform:uppercase;\n font-weight:400; padding:13px 24px; border-radius:4px; border:1px solid var(--border);\n transition:all 0.18s; cursor:pointer;\n}\n.btn-secondary:hover { border-color:var(--cyan-border); color:var(--cyan); }\n\n\/* TOOL PREVIEW (right side of spotlight) *\/\n.sc-right {\n background:var(--surface); border-left:1px solid var(--border);\n padding:0; overflow:hidden; display:flex; flex-direction:column;\n}\n.sc-preview-bar {\n display:flex; align-items:center; justify-content:space-between;\n padding:14px 20px; border-bottom:1px solid var(--border); background:var(--card);\n}\n.sc-preview-title { font-family:var(--fd); font-size:14px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }\n.sc-preview-badge {\n font-family:var(--fd); font-size:14px;; letter-spacing:0.12em; text-transform:uppercase;\n background:var(--cyan-bg); border:1px solid var(--cyan-border); border-radius:2px;\n padding:3px 8px; color:var(--cyan);\n}\n.sc-preview-body { padding:20px; flex:1; }\n.prompt-preview-text {\n font-family:var(--fm); font-size:14px; line-height:1.8; margin-bottom:16px;\n background:var(--card); border:1px solid var(--border); border-radius:5px;\n padding:14px 16px;\n}\n.pp-s { color:var(--cyan); }\n.pp-a { color:var(--purple); }\n.pp-st { color:var(--orange); }\n.pp-c { color:var(--green); }\n.pp-l { color:var(--amber); }\n.pp-m { color:var(--pink); }\n.legend-row { display:flex; flex-wrap:wrap; gap:6px; }\n.legend-chip {\n display:flex; align-items:center; gap:5px; padding:4px 9px;\n border-radius:3px; border:1px solid; font-family:var(--fd);\n font-size:14px;; letter-spacing:0.12em; text-transform:uppercase;\n}\n.lc-dot { width:4px; height:4px; border-radius:50%; }\n.sc-preview-footer {\n padding:14px 20px; border-top:1px solid var(--border); background:var(--card);\n}\n.spf-input {\n width:100%; background:var(--surface); border:1px solid var(--border); border-radius:4px;\n padding:9px 12px; font-family:var(--fm); font-size:14px; color:var(--muted);\n font-style:italic; cursor:default;\n}\n\n\/* \u2500\u2500 MEMBER TOOLS GRID \u2500\u2500 *\/\n.tools-section { padding:60px 0 80px; }\n\n.tools-header {\n display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px;\n}\n.th-left { }\n.th-title { font-family:var(--fd); font-size:clamp(20px,2.4vw,28px); font-weight:900; color:var(--white); margin-bottom:6px; }\n.th-title span { color:var(--cyan); }\n.th-sub { font-size:13px; color:var(--muted); font-weight:300; }\n.th-right { text-align:right; }\n.th-count { font-family:var(--fd); font-size:28px; font-weight:900; color:var(--muted2); }\n.th-count-lbl { font-family:var(--fd); font-size:14px;; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-top:2px; }\n\n.tools-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }\n\n.tool-card {\n background:var(--card); border:1px solid var(--border); border-radius:10px;\n overflow:hidden; transition:transform 0.2s, border-color 0.2s;\n display:flex; flex-direction:column;\n opacity:0; transform:translateY(24px);\n transition:opacity 0.5s ease, transform 0.5s ease, border-color 0.2s;\n}\n.tool-card.visible { opacity:1; transform:translateY(0); }\n.tool-card:hover { border-color:var(--c, var(--cyan-border)); }\n\n.tc-accent { height:3px; width:100%; }\n.tc-head { padding:18px 20px 0; display:flex; align-items:flex-start; justify-content:space-between; }\n.tc-num { font-family:var(--fd); font-size:14px; font-weight:700; letter-spacing:0.1em; opacity:0.5; }\n.tc-badge {\n font-family:var(--fd); font-size:14px;; letter-spacing:0.12em; text-transform:uppercase;\n padding:3px 8px; border-radius:2px; border:1px solid;\n}\n.tc-body { padding:14px 20px 18px; flex:1; }\n.tc-name { font-family:var(--fd); font-size:14px;; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:8px; }\n.tc-desc { font-size:14px; color:var(--muted); line-height:1.65; font-weight:300; margin-bottom:16px; }\n.tc-features { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }\n.tc-feat { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--muted); line-height:1.4; }\n.tc-feat-dot { width:4px; height:4px; border-radius:50%; flex-shrink:0; margin-top:4px; }\n.tc-month { font-family:var(--fd); font-size:14px;; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted2); padding:6px 10px; background:var(--surface); border-radius:3px; display:inline-block; }\n.tc-footer {\n padding:12px 20px; border-top:1px solid var(--border); background:var(--surface);\n display:flex; align-items:center; justify-content:space-between;\n}\n.tc-link { font-family:var(--fd); font-size:14px;; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); text-decoration:none; }\n.tc-arrow { color:var(--muted); font-size:14px; transition:transform 0.2s, color 0.2s; }\n.tool-card:hover .tc-arrow { transform:translateX(4px); }\n.tool-card:hover .tc-link { color:var(--cyan); }\n.tool-card:hover .tc-arrow { color:var(--cyan); }\n\n\/* coming soon card *\/\n.tool-card.coming { opacity:0.45; }\n.tool-card.coming:hover { opacity:0.6; border-color:var(--border); }\n.tool-card.coming .tc-arrow { display:none; }\n\n\/* \u2500\u2500 BUNDLE CARD \u2500\u2500 *\/\n.bundle-section { padding:0 0 80px; }\n\n.bundle-card {\n background:var(--card); border:1px solid var(--border); border-radius:12px;\n overflow:hidden; position:relative;\n}\n.bundle-card::before {\n content:''; position:absolute; top:0; left:0; right:0; height:1px;\n background:linear-gradient(90deg, var(--orange), var(--cyan), var(--purple));\n}\n.bundle-inner { display:grid; grid-template-columns:1fr 1fr; }\n.bundle-left { padding:40px 44px; border-right:1px solid var(--border); }\n.bundle-eyebrow {\n display:inline-flex; align-items:center; gap:10px;\n background:var(--orange-bg); border:1px solid var(--orange-border);\n border-radius:3px; padding:4px 10px; margin-bottom:20px;\n}\n.be-text { font-family:var(--fd); font-size:14px;; letter-spacing:0.16em; text-transform:uppercase; color:var(--orange); }\n.bundle-title { font-family:var(--fd); font-size:clamp(18px,2.2vw,24px); font-weight:900; color:var(--white); margin-bottom:8px; letter-spacing:-0.01em; }\n.bundle-sub { font-size:13px; color:var(--muted); line-height:1.7; font-weight:300; margin-bottom:28px; }\n.bundle-includes { display:flex; flex-direction:column; gap:10px; margin-bottom:32px; }\n.bi-item { display:flex; align-items:center; gap:12px; }\n.bi-num { font-family:var(--fd); font-size:14px; font-weight:700; color:var(--muted2); min-width:20px; }\n.bi-name { font-size:13px; color:var(--white); font-weight:400; }\n.bi-type { font-family:var(--fm); font-size:14px;; color:var(--muted); margin-left:auto; }\n.bundle-actions { display:flex; gap:10px; flex-wrap:wrap; }\n\n.bundle-right { padding:40px 44px; display:flex; flex-direction:column; justify-content:center; }\n.bundle-price-row { display:flex; align-items:baseline; gap:12px; margin-bottom:8px; }\n.bundle-price { font-family:var(--fd); font-size:56px; font-weight:900; color:var(--white); line-height:1; }\n.bundle-was { font-family:var(--fd); font-size:18px; color:var(--muted); text-decoration:line-through; }\n.bundle-save {\n font-family:var(--fd); font-size:14px; letter-spacing:0.14em; text-transform:uppercase;\n background:var(--orange-bg); border:1px solid var(--orange-border); border-radius:3px;\n padding:4px 10px; color:var(--orange); display:inline-block; margin-bottom:16px;\n}\n.bundle-note { font-size:13px; color:var(--muted); font-weight:300; line-height:1.65; margin-bottom:28px; }\n.bundle-value-props { display:flex; flex-direction:column; gap:8px; }\n.bvp-row { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); }\n.bvp-dot { width:4px; height:4px; border-radius:50%; background:var(--green); flex-shrink:0; }\n\n\/* \u2500\u2500 HOW IT WORKS \u2500\u2500 *\/\n.how-section { padding:80px 0; border-top:1px solid var(--border); }\n\n.how-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:48px; }\n.how-step {\n padding:28px 24px; border-right:1px solid var(--border); position:relative;\n}\n.how-step:last-child { border-right:none; }\n.how-arrow {\n position:absolute; right:-10px; top:36px; z-index:2;\n width:20px; height:20px; background:var(--bg); border-radius:50%;\n display:flex; align-items:center; justify-content:center;\n font-size:14px; color:var(--muted);\n}\n.how-step:last-child .how-arrow { display:none; }\n.hs-num { font-family:var(--fd); font-size:36px; font-weight:900; color:var(--muted2); line-height:1; margin-bottom:16px; }\n.hs-title { font-family:var(--fd); font-size:14px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--white); margin-bottom:8px; }\n.hs-desc { font-size:14px; color:var(--muted); line-height:1.65; font-weight:300; }\n\n\/* \u2500\u2500 TESTIMONIAL BAND \u2500\u2500 *\/\n.testimonial-band { padding:80px 0; border-top:1px solid var(--border); background:var(--card); }\n.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }\n.testi-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:24px; }\n.testi-quote { font-size:13px; color:var(--white); line-height:1.7; font-weight:300; margin-bottom:16px; font-style:italic; }\n.testi-quote::before { content:'\"'; color:var(--cyan); font-size:18px; font-style:normal; display:block; margin-bottom:4px; }\n.testi-author { display:flex; align-items:center; gap:10px; }\n.testi-avatar {\n width:32px; height:32px; border-radius:50%;\n display:flex; align-items:center; justify-content:center;\n font-family:var(--fd); font-size:14px;; font-weight:700; flex-shrink:0;\n}\n.testi-name { font-family:var(--fd); font-size:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--white); }\n.testi-role { font-size:14px; color:var(--muted); margin-top:2px; }\n\n\/* \u2500\u2500 FAQ \u2500\u2500 *\/\n.faq-section { padding:80px 0; border-top:1px solid var(--border); }\n.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:48px; }\n.faq-item { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:22px 24px; cursor:pointer; transition:border-color 0.2s; }\n.faq-item:hover { border-color:var(--cyan-border); }\n.faq-q { font-family:var(--fd); font-size:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--white); margin-bottom:10px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }\n.faq-chevron { font-size:18px; color:var(--muted); flex-shrink:0; }\n.faq-a { font-size:14px; color:var(--muted); line-height:1.7; font-weight:300; }\n\n\/* \u2500\u2500 CTA FOOTER \u2500\u2500 *\/\n.cta-footer { padding:100px 0; border-top:1px solid var(--border); position:relative; overflow:hidden; }\n.cta-glow {\n position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);\n width:700px; height:350px;\n background:radial-gradient(ellipse, rgba(0,229,255,0.06) 0%, transparent 65%);\n pointer-events:none;\n}\n.cta-inner { text-align:center; position:relative; z-index:1; }\n.cta-title { font-family:var(--fd); font-size:clamp(24px,3vw,40px); font-weight:900; color:var(--white); margin-bottom:14px; letter-spacing:-0.01em; line-height:1.1; }\n.cta-title span { color:var(--cyan); }\n.cta-sub { font-size:15px; color:var(--muted); font-weight:300; margin-bottom:36px; max-width:460px; margin-left:auto; margin-right:auto; line-height:1.7; }\n.cta-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }\n\n\/* \u2500\u2500 FOOTER \u2500\u2500 *\/\nfooter {\n border-top:1px solid var(--border); padding:60px 0 36px; position:relative; z-index:1;\n}\n.footer-grid { display:grid; grid-template-columns:240px 1fr 1fr 1fr; gap:60px; margin-bottom:48px; }\n.footer-logo { font-family:var(--fd); font-size:24px; font-weight:900; color:var(--white); margin-bottom:12px; }\n.footer-logo span { color:var(--cyan); }\n.footer-tagline { font-size:14px; color:var(--muted); line-height:1.65; font-weight:300; margin-bottom:18px; }\n.footer-socials { display:flex; gap:6px; }\n.footer-social {\n font-family:var(--fd); font-size:14px;; letter-spacing:0.1em; text-transform:uppercase;\n color:var(--muted); text-decoration:none; padding:5px 9px;\n border:1px solid var(--border); border-radius:3px; transition:all 0.2s;\n}\n.footer-social:hover { border-color:var(--cyan-border); color:var(--cyan); }\n.footer-col-title { font-family:var(--fd); font-size:14px; letter-spacing:0.18em; text-transform:uppercase; color:var(--white); margin-bottom:14px; }\n.footer-links { display:flex; flex-direction:column; gap:9px; }\n.footer-link { font-size:14px; color:var(--muted); text-decoration:none; font-weight:300; transition:color 0.2s; }\n.footer-link:hover { color:var(--white); }\n.footer-bottom { padding-top:28px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }\n.footer-copy { font-size:14px; color:var(--muted); font-weight:300; }\n.footer-made { font-family:var(--fd); font-size:14px;; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted2); }\n\n\/* \u2500\u2500 ANIMATIONS \u2500\u2500 *\/\n@keyframes fadeDown { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }\n@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }\n@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.65)} }\n\n.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.65s ease, transform 0.65s ease; }\n.reveal.visible { opacity:1; transform:translateY(0); }\n\n\/* \u2500\u2500 SCROLLBAR \u2500\u2500 *\/\n::-webkit-scrollbar{width:5px;}\n::-webkit-scrollbar-track{background:var(--bg);}\n::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}\n\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n@media(max-width:960px){\n nav{padding:0 24px;} .nav-links{display:none;} .container{padding:0 24px;}\n .hero-inner{grid-template-columns:1fr;} .hero-stats-card{display:none;}\n .spotlight-card{grid-template-columns:1fr;} .sc-right{display:none;}\n .tools-grid{grid-template-columns:1fr 1fr;}\n .bundle-inner{grid-template-columns:1fr;}\n .bundle-right{border-top:1px solid var(--border);}\n .how-grid{grid-template-columns:1fr 1fr;}\n .how-step{border-bottom:1px solid var(--border);}\n .testimonials-grid{grid-template-columns:1fr;}\n .faq-grid{grid-template-columns:1fr;}\n .footer-grid{grid-template-columns:1fr 1fr;}\n}\n@media(max-width:600px){\n .tools-grid{grid-template-columns:1fr;}\n .how-grid{grid-template-columns:1fr;}\n .footer-grid{grid-template-columns:1fr;}\n .sc-features{grid-template-columns:1fr;}\n}\n<\/style>\n<\/head>\n<body>\n\n<!-- NAV -->\n<nav>\n <a href=\"https:\/\/rocreativeai.com\/\" class=\"nav-brand\">\n <div class=\"nav-logo\">R<span>O<\/span><\/div>\n <div class=\"nav-sep\"><\/div>\n <div>\n <div class=\"nav-brand-title\">Rosita Cabrera<\/div>\n <div class=\"nav-brand-sub\">AI Creative \u00b7 Designer<\/div>\n <\/div>\n <\/a>\n <div class=\"nav-links\">\n <a href=\"https:\/\/rocreativeai.com\/\" class=\"nav-link\">Home<\/a>\n <a href=\"https:\/\/rocreativeai.com\/toolkit\/\" class=\"nav-link active\">Toolkit<\/a>\n <a href=\"prompt-packs.html\" class=\"nav-link\">Prompts<\/a>\n <a href=\"index.html#about\" class=\"nav-link\">About<\/a>\n <a href=\"index.html#youtube\" class=\"nav-link\">YouTube<\/a>\n <a href=\"membership.html\" class=\"nav-cta\">Join the Circle<\/a>\n <\/div>\n<\/nav>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!-- PAGE HERO -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"page-hero\">\n <div class=\"hero-glow\"><\/div>\n <div class=\"container\">\n <div class=\"hero-inner\">\n <div>\n <div class=\"hero-eyebrow\">\n <div class=\"eyebrow-dot\"><\/div>\n <span class=\"eyebrow-text\">RO Creator Toolkit \u00b7 12 HTML Tools<\/span>\n <\/div>\n <h1 class=\"page-title\">Tools built for<br><span>AI creatives<\/span><\/h1>\n <p class=\"page-subtitle\">Interactive \u00b7 Copy-ready \u00b7 Designed from 25 years of craft<\/p>\n <p class=\"page-desc\">\n Every tool in the RO system is built the same way \u2014 with a <strong>designer's eye<\/strong>,\n not a developer's checkbox. Color-coded, prompt-aware, and ready to drop straight into\n Higgsfield. One new tool drops every month for Inner Circle members.\n <\/p>\n <div class=\"filter-bar\">\n <span class=\"filter-label\">Show:<\/span>\n <button class=\"filter-btn active\" onclick=\"filterTools('all',this)\">All tools<\/button>\n <button class=\"filter-btn\" onclick=\"filterTools('free',this)\">Free<\/button>\n <button class=\"filter-btn\" onclick=\"filterTools('member',this)\">Member<\/button>\n <button class=\"filter-btn\" onclick=\"filterTools('coming',this)\">Coming soon<\/button>\n <\/div>\n <\/div>\n <div class=\"hero-stats-card\">\n <div class=\"hsc-top\">\n <div class=\"hsc-label\">Toolkit at a glance<\/div>\n <div class=\"hsc-stats\">\n <div class=\"hsc-stat\">\n <div class=\"hsc-val\">12<\/div>\n <div class=\"hsc-lbl\">Total tools<\/div>\n <\/div>\n <div class=\"hsc-stat\">\n <div class=\"hsc-val\">1<span>+<\/span><\/div>\n <div class=\"hsc-lbl\">Free tool<\/div>\n <\/div>\n <div class=\"hsc-stat\">\n <div class=\"hsc-val\">11<\/div>\n <div class=\"hsc-lbl\">Member tools<\/div>\n <\/div>\n <div class=\"hsc-stat\">\n <div class=\"hsc-val\">1<\/div>\n <div class=\"hsc-lbl\">Drop \/ month<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"hsc-body\">\n <div class=\"hsc-items\">\n <div class=\"hsc-item\"><div class=\"hsc-item-dot\"><\/div>All tools open in any browser<\/div>\n <div class=\"hsc-item\"><div class=\"hsc-item-dot\"><\/div>WordPress Elementor compatible<\/div>\n <div class=\"hsc-item\"><div class=\"hsc-item-dot\"><\/div>Full RO brand system \u2014 Orbitron + DM Mono<\/div>\n <div class=\"hsc-item\"><div class=\"hsc-item-dot\"><\/div>One-click prompt copy to clipboard<\/div>\n <div class=\"hsc-item\"><div class=\"hsc-item-dot\"><\/div>Yours to keep \u2014 download forever<\/div>\n <\/div>\n <\/div>\n <div class=\"hsc-footer\">\n <a href=\"membership.html\" class=\"hsc-cta\">Join to unlock all tools \u2192<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!-- FREE TOOL SPOTLIGHT -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"free-section\">\n <div class=\"container\">\n <div class=\"slabel reveal\">Start here \u2014 free tool<\/div>\n <div class=\"spotlight-card reveal\" data-access=\"free\">\n <div class=\"sc-left\">\n <div class=\"sc-free-badge\">\n <div class=\"sc-free-dot\"><\/div>\n <span class=\"sc-free-text\">100% free \u00b7 No sign-up required<\/span>\n <\/div>\n <div class=\"sc-num\" style=\"color:var(--cyan);\">Tool 01 of 12<\/div>\n <div class=\"sc-name\">Prompt Breakdown Card<\/div>\n <div class=\"sc-tagline\">The 6-part Higgsfield formula \u00b7 interactive \u00b7 color-coded<\/div>\n <p class=\"sc-desc\">\n Every great Higgsfield prompt has six components: Subject, Action, Style, Camera, Lighting, and Mood.\n This tool breaks them apart, color-codes them, explains why each one matters, and lets you\n build your own prompt live \u2014 then copy it with one click. It's the foundation everything else is built on.\n <\/p>\n <div class=\"sc-features\">\n <div class=\"sc-feat\"><div class=\"sc-feat-dot\"><\/div><div class=\"sc-feat-text\">Interactive 6-component prompt anatomy<\/div><\/div>\n <div class=\"sc-feat\"><div class=\"sc-feat-dot\"><\/div><div class=\"sc-feat-text\">Legend toggles \u2014 dim any component<\/div><\/div>\n <div class=\"sc-feat\"><div class=\"sc-feat-dot\"><\/div><div class=\"sc-feat-text\">Live prompt builder with color output<\/div><\/div>\n <div class=\"sc-feat\"><div class=\"sc-feat-dot\"><\/div><div class=\"sc-feat-text\">One-click copy to clipboard<\/div><\/div>\n <div class=\"sc-feat\"><div class=\"sc-feat-dot\"><\/div><div class=\"sc-feat-text\">Works as YouTube on-screen overlay<\/div><\/div>\n <div class=\"sc-feat\"><div class=\"sc-feat-dot\"><\/div><div class=\"sc-feat-text\">Full RO brand \u2014 opens in any browser<\/div><\/div>\n <\/div>\n <div class=\"sc-actions\">\n <a href=\"ro-prompt-breakdown.html\" class=\"btn-primary\" target=\"_blank\">Open free tool \u2192<\/a>\n <a href=\"membership.html\" class=\"btn-secondary\">Get all 12 tools<\/a>\n <\/div>\n <\/div>\n <div class=\"sc-right\">\n <div class=\"sc-preview-bar\">\n <span class=\"sc-preview-title\">Live tool preview<\/span>\n <span class=\"sc-preview-badge\">Interactive<\/span>\n <\/div>\n <div class=\"sc-preview-body\">\n <div class=\"prompt-preview-text\">\n <span class=\"pp-s\">A Latina woman in her 40s, elegant and confident,<\/span>\n <span class=\"pp-a\"> walks slowly through a neon-lit city street at night,<\/span>\n <span class=\"pp-st\"> cinematic film style, shot on 35mm,<\/span>\n <span class=\"pp-c\"> slow push-in dolly, shallow depth of field,<\/span>\n <span class=\"pp-l\"> dramatic side lighting with cyan and amber neon reflections,<\/span>\n <span class=\"pp-m\"> moody, mysterious, empowered.<\/span>\n <\/div>\n <div class=\"legend-row\">\n <div class=\"legend-chip\" style=\"background:var(--cyan-bg);border-color:var(--cyan-border);color:var(--cyan);\"><div class=\"lc-dot\" style=\"background:var(--cyan);\"><\/div>Subject<\/div>\n <div class=\"legend-chip\" style=\"background:var(--purple-bg);border-color:var(--purple-border);color:var(--purple);\"><div class=\"lc-dot\" style=\"background:var(--purple);\"><\/div>Action<\/div>\n <div class=\"legend-chip\" style=\"background:var(--orange-bg);border-color:var(--orange-border);color:var(--orange);\"><div class=\"lc-dot\" style=\"background:var(--orange);\"><\/div>Style<\/div>\n <div class=\"legend-chip\" style=\"background:var(--green-bg);border-color:var(--green-border);color:var(--green);\"><div class=\"lc-dot\" style=\"background:var(--green);\"><\/div>Camera<\/div>\n <div class=\"legend-chip\" style=\"background:var(--amber-bg);border-color:var(--amber-border);color:var(--amber);\"><div class=\"lc-dot\" style=\"background:var(--amber);\"><\/div>Lighting<\/div>\n <div class=\"legend-chip\" style=\"background:var(--pink-bg);border-color:var(--pink-border);color:var(--pink);\"><div class=\"lc-dot\" style=\"background:var(--pink);\"><\/div>Mood<\/div>\n <\/div>\n <\/div>\n <div class=\"sc-preview-footer\">\n <div class=\"spf-input\">Build your own \u2192 fill the fields below and click Generate<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!-- ALL TOOLS GRID -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"tools-section\">\n <div class=\"container\">\n <div class=\"tools-header reveal\">\n <div class=\"th-left\">\n <div class=\"slabel\" style=\"margin-bottom:10px;\">Member tools<\/div>\n <div class=\"th-title\">Unlock the full<br><span>RO system<\/span><\/div>\n <div class=\"th-sub\">One new tool every month \u00b7 Inner Circle members only<\/div>\n <\/div>\n <div class=\"th-right\">\n <div class=\"th-count\" id=\"toolCount\">11<\/div>\n <div class=\"th-count-lbl\">Member tools<\/div>\n <\/div>\n <\/div>\n\n <div class=\"tools-grid\" id=\"toolsGrid\">\n\n <!-- Tool 02 \u2014 Lighting Designer -->\n <div class=\"tool-card\" data-access=\"member\" data-month=\"1\" style=\"--c:var(--amber-border);\">\n <div class=\"tc-accent\" style=\"background:linear-gradient(90deg,var(--amber),transparent);\"><\/div>\n <div class=\"tc-head\">\n <span class=\"tc-num\" style=\"color:var(--amber);\">02<\/span>\n <span class=\"tc-badge\" style=\"color:var(--amber);border-color:var(--amber-border);background:var(--amber-bg);\">Live now<\/span>\n <\/div>\n <div class=\"tc-body\">\n <div class=\"tc-name\" style=\"color:var(--amber);\">Lighting Designer<\/div>\n <div class=\"tc-desc\">Visual compass direction picker + color temperature slider + source selector. Get the exact lighting prompt language Higgsfield responds to.<\/div>\n <div class=\"tc-features\">\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--amber);\"><\/div>Compass direction picker \u2014 click to place light<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--amber);\"><\/div>Color temperature from 2700K to 5500K<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--amber);\"><\/div>9 classic presets \u2014 Rembrandt, Neon Rim, Golden Hour<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--amber);\"><\/div>Live scene preview + generated prompt<\/div>\n <\/div>\n <div class=\"tc-month\">Month 1 drop<\/div>\n <\/div>\n <div class=\"tc-footer\">\n <a href=\"membership.html\" class=\"tc-link\">Members only \u2014 join to access<\/a>\n <span class=\"tc-arrow\">\u2192<\/span>\n <\/div>\n <\/div>\n\n <!-- Tool 03 \u2014 Camera Move Builder -->\n <div class=\"tool-card\" data-access=\"member\" data-month=\"2\" style=\"--c:var(--purple-border);\">\n <div class=\"tc-accent\" style=\"background:linear-gradient(90deg,var(--purple),transparent);\"><\/div>\n <div class=\"tc-head\">\n <span class=\"tc-num\" style=\"color:var(--purple);\">03<\/span>\n <span class=\"tc-badge\" style=\"color:var(--purple);border-color:var(--purple-border);background:var(--purple-bg);\">Month 2<\/span>\n <\/div>\n <div class=\"tc-body\">\n <div class=\"tc-name\" style=\"color:var(--purple);\">Camera Move Builder<\/div>\n <div class=\"tc-desc\">Choose your movement type, speed, and angle \u2014 outputs the exact cinematic camera language that Higgsfield responds to best.<\/div>\n <div class=\"tc-features\">\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--purple);\"><\/div>Movement selector \u2014 dolly, orbit, crane, handheld<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--purple);\"><\/div>Speed + angle combiner<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--purple);\"><\/div>Director language output<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--purple);\"><\/div>Depth of field pairing<\/div>\n <\/div>\n <div class=\"tc-month\">Month 2 drop<\/div>\n <\/div>\n <div class=\"tc-footer\">\n <a href=\"membership.html\" class=\"tc-link\">Members only<\/a>\n <span class=\"tc-arrow\">\u2192<\/span>\n <\/div>\n <\/div>\n\n <!-- Tool 04 \u2014 AI Influencer Builder -->\n <div class=\"tool-card\" data-access=\"member\" data-month=\"3\" style=\"--c:var(--green-border);\">\n <div class=\"tc-accent\" style=\"background:linear-gradient(90deg,var(--green),transparent);\"><\/div>\n <div class=\"tc-head\">\n <span class=\"tc-num\" style=\"color:var(--green);\">04<\/span>\n <span class=\"tc-badge\" style=\"color:var(--green);border-color:var(--green-border);background:var(--green-bg);\">Month 3<\/span>\n <\/div>\n <div class=\"tc-body\">\n <div class=\"tc-name\" style=\"color:var(--green);\">AI Influencer Builder<\/div>\n <div class=\"tc-desc\">Build a complete AI character \u2014 appearance, personality, niche, and posting style \u2014 and get the prompts to generate them consistently across any scene.<\/div>\n <div class=\"tc-features\">\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--green);\"><\/div>Full persona generator with output prompt<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--green);\"><\/div>Appearance + personality + niche fields<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--green);\"><\/div>Consistency notes for repeat generation<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--green);\"><\/div>Scene variation suggestions<\/div>\n <\/div>\n <div class=\"tc-month\">Month 3 drop<\/div>\n <\/div>\n <div class=\"tc-footer\">\n <a href=\"membership.html\" class=\"tc-link\">Members only<\/a>\n <span class=\"tc-arrow\">\u2192<\/span>\n <\/div>\n <\/div>\n\n <!-- Tool 05 \u2014 Scene Mood Generator -->\n <div class=\"tool-card\" data-access=\"member\" data-month=\"4\" style=\"--c:var(--pink-border);\">\n <div class=\"tc-accent\" style=\"background:linear-gradient(90deg,var(--pink),transparent);\"><\/div>\n <div class=\"tc-head\">\n <span class=\"tc-num\" style=\"color:var(--pink);\">05<\/span>\n <span class=\"tc-badge\" style=\"color:var(--pink);border-color:var(--pink-border);background:var(--pink-bg);\">Month 4<\/span>\n <\/div>\n <div class=\"tc-body\">\n <div class=\"tc-name\" style=\"color:var(--pink);\">Scene Mood Generator<\/div>\n <div class=\"tc-desc\">Choose an emotional tone and get a curated set of mood words, color palette suggestions, and lighting direction \u2014 all calibrated to that feeling.<\/div>\n <div class=\"tc-features\">\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--pink);\"><\/div>12 emotional tone presets<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--pink);\"><\/div>Matching color palettes per mood<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--pink);\"><\/div>Lighting direction pairing<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--pink);\"><\/div>3-word mood phrase output<\/div>\n <\/div>\n <div class=\"tc-month\">Month 4 drop<\/div>\n <\/div>\n <div class=\"tc-footer\">\n <a href=\"membership.html\" class=\"tc-link\">Members only<\/a>\n <span class=\"tc-arrow\">\u2192<\/span>\n <\/div>\n <\/div>\n\n <!-- Tool 06 \u2014 Style Reference Finder -->\n <div class=\"tool-card\" data-access=\"member\" data-month=\"5\" style=\"--c:var(--orange-border);\">\n <div class=\"tc-accent\" style=\"background:linear-gradient(90deg,var(--orange),transparent);\"><\/div>\n <div class=\"tc-head\">\n <span class=\"tc-num\" style=\"color:var(--orange);\">06<\/span>\n <span class=\"tc-badge\" style=\"color:var(--orange);border-color:var(--orange-border);background:var(--orange-bg);\">Month 5<\/span>\n <\/div>\n <div class=\"tc-body\">\n <div class=\"tc-name\" style=\"color:var(--orange);\">Style Reference Finder<\/div>\n <div class=\"tc-desc\">Pick a visual style era or genre \u2014 noir, cyberpunk, renaissance, editorial \u2014 and get the exact style prompt language with film stock and era references.<\/div>\n <div class=\"tc-features\">\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--orange);\"><\/div>20+ visual style presets<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--orange);\"><\/div>Film stock + era references<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--orange);\"><\/div>Director + cinematographer language<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--orange);\"><\/div>Color grade suggestions<\/div>\n <\/div>\n <div class=\"tc-month\">Month 5 drop<\/div>\n <\/div>\n <div class=\"tc-footer\">\n <a href=\"membership.html\" class=\"tc-link\">Members only<\/a>\n <span class=\"tc-arrow\">\u2192<\/span>\n <\/div>\n <\/div>\n\n <!-- Tool 07 \u2014 Thumbnail Designer -->\n <div class=\"tool-card\" data-access=\"member\" data-month=\"6\" style=\"--c:var(--cyan-border);\">\n <div class=\"tc-accent\" style=\"background:linear-gradient(90deg,var(--cyan),transparent);\"><\/div>\n <div class=\"tc-head\">\n <span class=\"tc-num\" style=\"color:var(--cyan);\">07<\/span>\n <span class=\"tc-badge\" style=\"color:var(--cyan);border-color:var(--cyan-border);background:var(--cyan-bg);\">Month 6<\/span>\n <\/div>\n <div class=\"tc-body\">\n <div class=\"tc-name\" style=\"color:var(--cyan);\">Thumbnail Designer<\/div>\n <div class=\"tc-desc\">Generate Higgsfield image prompts specifically optimized for YouTube thumbnails \u2014 with composition guides, emotion direction, and contrast tips.<\/div>\n <div class=\"tc-features\">\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--cyan);\"><\/div>Thumbnail composition presets<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--cyan);\"><\/div>Emotion-driven face direction guide<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--cyan);\"><\/div>Color contrast + text overlay tips<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--cyan);\"><\/div>16:9 composition output<\/div>\n <\/div>\n <div class=\"tc-month\">Month 6 drop<\/div>\n <\/div>\n <div class=\"tc-footer\">\n <a href=\"membership.html\" class=\"tc-link\">Members only<\/a>\n <span class=\"tc-arrow\">\u2192<\/span>\n <\/div>\n <\/div>\n\n <!-- Tools 08\u201312 coming soon -->\n <div class=\"tool-card coming\" data-access=\"coming\" style=\"--c:var(--border);\">\n <div class=\"tc-accent\" style=\"background:var(--border);\"><\/div>\n <div class=\"tc-head\"><span class=\"tc-num\" style=\"color:var(--muted);\">08<\/span><\/div>\n <div class=\"tc-body\">\n <div class=\"tc-name\" style=\"color:var(--muted);\">Brand Campaign Planner<\/div>\n <div class=\"tc-desc\">Input brand colors, tone, and audience \u2014 outputs a full 5-scene AI video campaign structure with prompts for each scene.<\/div>\n <div class=\"tc-features\">\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--muted);\"><\/div>Brand input fields<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--muted);\"><\/div>5-scene campaign structure<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--muted);\"><\/div>Scene-by-scene prompt output<\/div>\n <\/div>\n <div class=\"tc-month\">Month 7 \u00b7 Coming soon<\/div>\n <\/div>\n <div class=\"tc-footer\"><span class=\"tc-link\">Join to be notified<\/span><\/div>\n <\/div>\n\n <div class=\"tool-card coming\" data-access=\"coming\" style=\"--c:var(--border);\">\n <div class=\"tc-accent\" style=\"background:var(--border);\"><\/div>\n <div class=\"tc-head\"><span class=\"tc-num\" style=\"color:var(--muted);\">09<\/span><\/div>\n <div class=\"tc-body\">\n <div class=\"tc-name\" style=\"color:var(--muted);\">Prompt A\/B Tester<\/div>\n <div class=\"tc-desc\">Enter a base prompt, swap one variable at a time, generate 4 test variations \u2014 teaches systematic prompt iteration the way a designer thinks.<\/div>\n <div class=\"tc-features\">\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--muted);\"><\/div>Base prompt input<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--muted);\"><\/div>Variable swap per component<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--muted);\"><\/div>Side-by-side variation output<\/div>\n <\/div>\n <div class=\"tc-month\">Month 8 \u00b7 Coming soon<\/div>\n <\/div>\n <div class=\"tc-footer\"><span class=\"tc-link\">Join to be notified<\/span><\/div>\n <\/div>\n\n <div class=\"tool-card coming\" data-access=\"coming\" style=\"--c:var(--border);\">\n <div class=\"tc-accent\" style=\"background:var(--border);\"><\/div>\n <div class=\"tc-head\"><span class=\"tc-num\" style=\"color:var(--muted);\">10\u201312<\/span><\/div>\n <div class=\"tc-body\">\n <div class=\"tc-name\" style=\"color:var(--muted);\">+ 3 more tools<\/div>\n <div class=\"tc-desc\">Content Batch Planner, Storytelling Arc Builder, and the full-year Season Planner. Drops monthly through Month 12.<\/div>\n <div class=\"tc-features\">\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--muted);\"><\/div>Content Batch Planner \u2014 7-day generator<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--muted);\"><\/div>Storytelling Arc Builder \u2014 3-act structure<\/div>\n <div class=\"tc-feat\"><div class=\"tc-feat-dot\" style=\"background:var(--muted);\"><\/div>Season Planner \u2014 52-week content grid<\/div>\n <\/div>\n <div class=\"tc-month\">Months 9\u201312 \u00b7 Coming soon<\/div>\n <\/div>\n <div class=\"tc-footer\"><span class=\"tc-link\">Join the Inner Circle<\/span><\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!-- BUNDLE CARD -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"bundle-section\">\n <div class=\"container\">\n <div class=\"slabel reveal\">Best value<\/div>\n <div class=\"bundle-card reveal\">\n <div class=\"bundle-inner\">\n <div class=\"bundle-left\">\n <div class=\"bundle-eyebrow\"><span class=\"be-text\">\u26a1 RO Creator Toolkit \u2014 One download<\/span><\/div>\n <div class=\"bundle-title\">Everything you need<br>to start creating<\/div>\n <p class=\"bundle-sub\">The first three tools, the brand kit, and the prompt formula cheat sheet \u2014 bundled into one download. Yours to keep forever, no subscription required.<\/p>\n <div class=\"bundle-includes\">\n <div class=\"bi-item\">\n <span class=\"bi-num\" style=\"color:var(--cyan);\">01<\/span>\n <span class=\"bi-name\">Prompt Breakdown Card<\/span>\n <span class=\"bi-type\">HTML tool<\/span>\n <\/div>\n <div class=\"bi-item\">\n <span class=\"bi-num\" style=\"color:var(--amber);\">02<\/span>\n <span class=\"bi-name\">Lighting Designer<\/span>\n <span class=\"bi-type\">HTML tool<\/span>\n <\/div>\n <div class=\"bi-item\">\n <span class=\"bi-num\" style=\"color:var(--orange);\">03<\/span>\n <span class=\"bi-name\">Image Caption Builder<\/span>\n <span class=\"bi-type\">HTML tool<\/span>\n <\/div>\n <div class=\"bi-item\">\n <span class=\"bi-num\" style=\"color:var(--purple);\">04<\/span>\n <span class=\"bi-name\">RO Brand Kit PDF<\/span>\n <span class=\"bi-type\">Design guide<\/span>\n <\/div>\n <div class=\"bi-item\">\n <span class=\"bi-num\" style=\"color:var(--green);\">05<\/span>\n <span class=\"bi-name\">6-Part Prompt Formula Cheat Sheet<\/span>\n <span class=\"bi-type\">Reference PDF<\/span>\n <\/div>\n <\/div>\n <div class=\"bundle-actions\">\n <a href=\"#\" class=\"btn-primary\">Download Toolkit \u2014 $47 \u2192<\/a>\n <a href=\"membership.html\" class=\"btn-secondary\">Or join for all 12 \u2192<\/a>\n <\/div>\n <\/div>\n <div class=\"bundle-right\">\n <div class=\"bundle-price-row\">\n <div class=\"bundle-price\">$47<\/div>\n <div class=\"bundle-was\">$94<\/div>\n <\/div>\n <div class=\"bundle-save\">Save 50% \u00b7 One-time purchase<\/div>\n <p class=\"bundle-note\">Pay once and it's yours forever. No subscription. No expiry. Download, open in a browser, and start building prompts immediately.<\/p>\n <div class=\"bundle-value-props\">\n <div class=\"bvp-row\"><div class=\"bvp-dot\"><\/div>Instant download after purchase<\/div>\n <div class=\"bvp-row\"><div class=\"bvp-dot\"><\/div>Works in Chrome, Firefox, Safari, Edge<\/div>\n <div class=\"bvp-row\"><div class=\"bvp-dot\"><\/div>WordPress Elementor compatible<\/div>\n <div class=\"bvp-row\"><div class=\"bvp-dot\"><\/div>Embed as YouTube on-screen overlay<\/div>\n <div class=\"bvp-row\"><div class=\"bvp-dot\"><\/div>No ongoing fee \u2014 yours to keep<\/div>\n <div class=\"bvp-row\"><div class=\"bvp-dot\"><\/div>2.9% Stripe fee only \u2014 no platform cut<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!-- HOW IT WORKS -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"how-section\">\n <div class=\"container\">\n <div class=\"slabel reveal\">How the toolkit works<\/div>\n <div class=\"how-grid reveal\">\n <div class=\"how-step\">\n <div class=\"how-arrow\">\u2192<\/div>\n <div class=\"hs-num\" style=\"color:var(--cyan);\">01<\/div>\n <div class=\"hs-title\">Download or join<\/div>\n <div class=\"hs-desc\">Buy the Starter Toolkit ($47) for immediate access to the first three tools, or join the Inner Circle ($19\/mo) to unlock all 12 as they drop each month.<\/div>\n <\/div>\n <div class=\"how-step\">\n <div class=\"how-arrow\">\u2192<\/div>\n <div class=\"hs-num\" style=\"color:var(--amber);\">02<\/div>\n <div class=\"hs-title\">Open in browser<\/div>\n <div class=\"hs-desc\">Every tool is a standalone HTML file. Double-click to open in Chrome, Firefox, or Safari \u2014 no installation, no account, no internet required after download.<\/div>\n <\/div>\n <div class=\"how-step\">\n <div class=\"how-arrow\">\u2192<\/div>\n <div class=\"hs-num\" style=\"color:var(--purple);\">03<\/div>\n <div class=\"hs-title\">Build your prompt<\/div>\n <div class=\"hs-desc\">Use the interactive controls \u2014 direction compass, temperature slider, source selector \u2014 to design your lighting setup. The prompt generates in real time.<\/div>\n <\/div>\n <div class=\"how-step\">\n <div class=\"hs-num\" style=\"color:var(--green);\">04<\/div>\n <div class=\"hs-title\">Copy into Higgsfield<\/div>\n <div class=\"hs-desc\">Hit Copy \u2014 the full prompt goes to your clipboard, color components and all. Paste directly into Higgsfield text-to-video or image-to-video and generate.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!-- TESTIMONIALS -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"testimonial-band\">\n <div class=\"container\">\n <div class=\"slabel reveal\">What creators are saying<\/div>\n <div class=\"testimonials-grid\">\n <div class=\"testi-card reveal\">\n <div class=\"testi-quote\">The Lighting Designer completely changed how I prompt for AI video. I went from guessing to knowing exactly what I wanted \u2014 and Higgsfield delivered it the first time.<\/div>\n <div class=\"testi-author\">\n <div class=\"testi-avatar\" style=\"background:var(--cyan-bg);color:var(--cyan);border:1px solid var(--cyan-border);\">MR<\/div>\n <div>\n <div class=\"testi-name\">Maria R.<\/div>\n <div class=\"testi-role\">Content Creator \u00b7 Miami<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"testi-card reveal\">\n <div class=\"testi-quote\">As a graphic designer, RO's approach clicks immediately. She explains why each component matters \u2014 not just what to type. That's the difference between a tool and an education.<\/div>\n <div class=\"testi-author\">\n <div class=\"testi-avatar\" style=\"background:var(--orange-bg);color:var(--orange);border:1px solid var(--orange-border);\">DK<\/div>\n <div>\n <div class=\"testi-name\">David K.<\/div>\n <div class=\"testi-role\">Graphic Designer \u00b7 New York<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"testi-card reveal\">\n <div class=\"testi-quote\">I've been using AI tools for a year and never got results like this. The color-coded prompt breakdown made me realize I was missing three of the six components every time.<\/div>\n <div class=\"testi-author\">\n <div class=\"testi-avatar\" style=\"background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-border);\">SL<\/div>\n <div>\n <div class=\"testi-name\">Sofia L.<\/div>\n <div class=\"testi-role\">AI Creative \u00b7 Barcelona<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!-- FAQ -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"faq-section\">\n <div class=\"container\">\n <div class=\"slabel reveal\">Common questions<\/div>\n <div class=\"faq-grid\">\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">What software do I need to use the tools? <span class=\"faq-chevron\">\u2193<\/span><\/div>\n <div class=\"faq-a\">None. Every tool is a standalone HTML file that opens directly in any web browser \u2014 Chrome, Firefox, Safari, or Edge. No installation, no account, no app. Download the file, double-click, and it opens.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">Do the tools work without internet? <span class=\"faq-chevron\">\u2193<\/span><\/div>\n <div class=\"faq-a\">Yes \u2014 once downloaded, the tools work fully offline. The only exception is the Google Fonts (Orbitron + DM Mono) which load from the internet. The functionality works without them, just with a different font.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">Can I use these with other AI tools? <span class=\"faq-chevron\">\u2193<\/span><\/div>\n <div class=\"faq-a\">Yes, In GPT2 Image, Adobe FireFly, Free Pik AI, VEO, Sora, Seedance 2, and others. It renders prompts with full interactivity. Each tool can be used for prompt testing, learning, and building content for image or video creation.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">Do the tools work with Higgsfield specifically? <span class=\"faq-chevron\">\u2193<\/span><\/div>\n <div class=\"faq-a\">Every tool in the RO system is built around the exact prompt structure Higgsfield responds to \u2014 the 6-part formula (Subject, Action, Style, Camera, Lighting, Mood) that RO developed through hundreds of real generations.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">What's the difference between the Toolkit and the membership? <span class=\"faq-chevron\">\u2193<\/span><\/div>\n <div class=\"faq-a\">The Toolkit ($47) is a one-time purchase of the first three tools plus supporting PDFs \u2014 yours forever. The Inner Circle ($19\/mo founding rate up to the first 25 memberships)And then $39\/mo and gives you all current tools plus one new tool and one new prompt pack every month, plus live sessions and community.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">Can I use the prompt output tools make for commercial work? <span class=\"faq-chevron\">\u2193<\/span><\/div>\n <div class=\"faq-a\">Yes. The prompts you generate with RO tools are yours to use however you like \u2014 commercial, client, personal. The tools are prompt generators, not content creators. What Higgsfield produces with those prompts is subject to Higgsfield's own terms.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!-- CTA FOOTER -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"cta-footer\">\n <div class=\"cta-glow\"><\/div>\n <div class=\"container\">\n <div class=\"cta-inner reveal\">\n <h2 class=\"cta-title\">Start with the<br><span>free tool today.<\/span><\/h2>\n <p class=\"cta-sub\">No sign-up. No download required. Open the Prompt Breakdown Card in your browser and build your first prompt in under two minutes.<\/p>\n <div class=\"cta-actions\">\n <a href=\"ro-prompt-breakdown.html\" class=\"btn-primary\" target=\"_blank\">Open free tool \u2192<\/a>\n <a href=\"membership.html\" class=\"btn-secondary\">Join the Inner Circle \u2014 $19\/mo<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- FOOTER -->\n<footer>\n <div class=\"container\">\n <div class=\"footer-grid\">\n <div>\n <div class=\"footer-logo\">R<span>O<\/span><\/div>\n <p class=\"footer-tagline\">25 years of design craft meets the new frontier of AI creation. Building in real time.<\/p>\n <div class=\"footer-socials\">\n <a href=\"#\" class=\"footer-social\">YT<\/a>\n <a href=\"#\" class=\"footer-social\">IG<\/a>\n <a href=\"#\" class=\"footer-social\">TK<\/a>\n <a href=\"#\" class=\"footer-social\">LI<\/a>\n <\/div>\n <\/div>\n <div>\n <div class=\"footer-col-title\">Toolkit<\/div>\n <div class=\"footer-links\">\n <a href=\"#\" class=\"footer-link\">Prompt Breakdown Card \u2014 Free<\/a>\n <a href=\"#\" class=\"footer-link\">Lighting Designer<\/a>\n <a href=\"#\" class=\"footer-link\">Camera Move Builder<\/a>\n <a href=\"#\" class=\"footer-link\">AI Influencer Builder<\/a>\n <a href=\"#\" class=\"footer-link\">All 12 Tools \u2192<\/a>\n <\/div>\n <\/div>\n <div>\n <div class=\"footer-col-title\">Prompt Packs<\/div>\n <div class=\"footer-links\">\n <a href=\"prompt-packs.html\" class=\"footer-link\">Pack 01 \u00b7 Cinematic Portraits \u2014 $27<\/a>\n <a href=\"prompt-packs.html\" class=\"footer-link\">Pack 02 \u00b7 AI Influencer Kit<\/a>\n <a href=\"prompt-packs.html\" class=\"footer-link\">All Packs<\/a>\n <a href=\"membership.html\" class=\"footer-link\">All Packs \u2014 Inner Circle Included<\/a>\n <\/div>\n <\/div>\n <div>\n <div class=\"footer-col-title\">RO<\/div>\n <div class=\"footer-links\">\n <a href=\"index.html\" class=\"footer-link\">Home<\/a>\n <a href=\"index.html#about\" class=\"footer-link\">About<\/a>\n <a href=\"membership.html\" class=\"footer-link\">Membership \u2014 $19\/mo<\/a>\n <a href=\"#\" class=\"footer-link\">1-on-1 Coaching \u2014 $200\/hr<\/a>\n <a href=\"#\" class=\"footer-link\">YouTube Channel<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"footer-bottom\">\n <p class=\"footer-copy\">\u00a92026 Rosita Cabrera \u00b7 All rights reserved \u00b7 rositacabrera.com<\/p>\n <p class=\"footer-made\">RO \u00b7 AI Creative \u00b7 AI Tools \u00b7 Higgsfield<\/p>\n <\/div>\n <\/div>\n<\/footer>\n\n<script>\n\/* \u2500\u2500 SCROLL REVEAL \u2500\u2500 *\/\nvar obs = new IntersectionObserver(function(entries) {\n entries.forEach(function(e) {\n if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); }\n });\n}, { threshold: 0.1, rootMargin:'0px 0px -30px 0px' });\ndocument.querySelectorAll('.reveal').forEach(function(el){ obs.observe(el); });\n\n\/* \u2500\u2500 TOOL CARDS STAGGER \u2500\u2500 *\/\nvar cardObs = new IntersectionObserver(function(entries) {\n entries.forEach(function(e) {\n if (e.isIntersecting) {\n var cards = e.target.querySelectorAll('.tool-card');\n cards.forEach(function(card, i) {\n setTimeout(function() { card.classList.add('visible'); }, i * 80);\n });\n cardObs.unobserve(e.target);\n }\n });\n}, { threshold: 0.05 });\nvar grid = document.getElementById('toolsGrid');\nif (grid) cardObs.observe(grid);\n\n\/* \u2500\u2500 FILTER \u2500\u2500 *\/\nfunction filterTools(type, btn) {\n document.querySelectorAll('.filter-btn').forEach(function(b){ b.classList.remove('active'); });\n btn.classList.add('active');\n var cards = document.querySelectorAll('#toolsGrid .tool-card, .spotlight-card');\n var count = 0;\n cards.forEach(function(card) {\n var access = card.getAttribute('data-access');\n var show = type === 'all' || access === type;\n card.style.display = show ? '' : 'none';\n if (show && card.getAttribute('data-access') === 'member') count++;\n });\n var tc = document.getElementById('toolCount');\n if (tc && type !== 'all') tc.innerText = count;\n else if (tc) tc.innerText = '11';\n}\n\n\/* \u2500\u2500 NAV ACTIVE \u2500\u2500 *\/\ndocument.querySelectorAll('.nav-link').forEach(function(l){\n if (l.getAttribute('href') === 'toolkit.html') l.classList.add('active');\n});\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>RO Toolkit \u2014 AI Creative Tools by Rosita Cabrera RO Rosita Cabrera AI Creative \u00b7 Designer Home Toolkit Prompts About YouTube Join the Circle RO Creator Toolkit \u00b7 12 HTML Tools Tools built forAI creatives Interactive \u00b7 Copy-ready \u00b7 Designed from 25 years of craft Every tool in the RO system is built the same…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rocreativeai.com\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rocreativeai.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rocreativeai.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rocreativeai.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rocreativeai.com\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":14,"href":"https:\/\/rocreativeai.com\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":155,"href":"https:\/\/rocreativeai.com\/wp-json\/wp\/v2\/pages\/10\/revisions\/155"}],"wp:attachment":[{"href":"https:\/\/rocreativeai.com\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}