/* Haroon AI Automation — four complete visual directions */
.theme-bar{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);font-size:11px;flex-wrap:wrap}.theme-bar>span{letter-spacing:.13em;font-size:9px;font-weight:700}.theme-bar button{border:1px solid var(--line);border-radius:20px;padding:6px 14px;background:transparent;color:var(--ink);font-size:11px}.theme-bar button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.brandmark{letter-spacing:-.04em}.brand{letter-spacing:.035em}.hero h1 em{font-style:normal}.hero h1{font-weight:800}.workflow-thumb{height:120px}.nav{border-bottom:0}.portrait img{filter:saturate(.8)}
html[data-design="midnight"]{--ink:#f4f1e9;--muted:#b5bdcc;--paper:#0c1424;--line:#29344a;--lime:#edc675;--dark:#111e34;--white:#152136;--green:#edc675;color-scheme:dark}
[data-design="midnight"] body{background:radial-gradient(ellipse at 85% 12%,#26355688,transparent 36%),var(--paper)}
[data-design="midnight"] .hero{gap:60px;padding-top:88px;padding-bottom:94px}
[data-design="midnight"] .hero h1{font-size:clamp(50px,5.8vw,80px);letter-spacing:-.06em;line-height:1.08}
[data-design="midnight"] .hero h1 em{color:#edc675;font-family:Manrope,Arial,sans-serif}
[data-design="midnight"] .brandmark{background:#edc675;color:#0c1424;border-radius:10px}
[data-design="midnight"] .primary{background:#edc675;color:#101929;box-shadow:0 8px 24px #0002}
[data-design="midnight"] .primary:hover{background:#f7dba3}
[data-design="midnight"] .nav-cta{border-color:#667084;color:#f6e4be}
[data-design="midnight"] .dot{background:#edc675}
[data-design="midnight"] .workflow-art{background-color:#121f34;background-image:radial-gradient(#34425c .7px,transparent .7px);border-color:#46516a;box-shadow:12px 16px 0 #19263d;border-radius:14px;transform:rotate(1deg)}
[data-design="midnight"] .art-top,[data-design="midnight"] .art-bottom,[data-design="midnight"] .tiny{color:#b8c4d9}
[data-design="midnight"] .diagram-node{background:#1c2a42;border-color:#3a4961;color:#f4f1e9}
[data-design="midnight"] .diagram-node small{color:#aebdd3}
[data-design="midnight"] .node-icon{background:#233550;border-color:#415675;color:#edc675}
[data-design="midnight"] .highlighted{background:#edc675;color:#142039;border-color:#edc675}
[data-design="midnight"] .highlighted small,[data-design="midnight"] .n8n-label{color:#35445e}
[data-design="midnight"] .highlighted .node-icon{background:#15253b;color:#edc675;border-color:#35445e}
[data-design="midnight"] .connector{background:#9d8456}
[data-design="midnight"] .connector:after{color:#d5b778}
[data-design="midnight"] .sample-tabs button{color:#d5dded;border-color:#4a5770}
[data-design="midnight"] .sample-tabs button.selected{background:#edc675;color:#152039}
[data-design="midnight"] .mini-avatar{background:#26354b;border-color:#54617a;color:#edc675}
[data-design="midnight"] .stack-strip{background:#111c2e}
[data-design="midnight"] .stack-strip strong{color:#b9c7dc}
[data-design="midnight"] .stack-strip span{color:#a0aec1}
[data-design="midnight"] .card{background:linear-gradient(145deg,#17253b,#111d31);border-color:#2c3b55;border-radius:12px;border-top:2px solid #9f885a}
[data-design="midnight"] .card:hover{border-color:#edc675;box-shadow:0 15px 30px #0003}
[data-design="midnight"] .card-top{color:#c3af82}
[data-design="midnight"] .project-num{color:#9cadc8}
[data-design="midnight"] .card-bottom{border-color:#33405a;color:#edc675}
[data-design="midnight"] .tags span{background:#213149;color:#d7dfeb;border-color:#344763}
[data-design="midnight"] .search input{background:#152238;color:#f4f1e9;border-color:#40516b}
[data-design="midnight"] .filters button{color:#c6cddc}
[data-design="midnight"] .filters button.active{background:#edc675;color:#142039}
[data-design="midnight"] .results-meta{color:#a8b5cb}
[data-design="midnight"] .services-band{background:#141f31;border-block:1px solid #33415b}
[data-design="midnight"] .services-band .eyebrow,[data-design="midnight"] .service-grid article>span{color:#edc675}
[data-design="midnight"] .service-grid p{color:#b9c6da}
[data-design="midnight"] .service-grid article{border-color:#64708a}
[data-design="midnight"] .portrait{background:#1f2f47;border:1px solid #43546d}
[data-design="midnight"] .portrait>span{color:#d2bd90}
[data-design="midnight"] .process-grid article{border-color:#66728a}
[data-design="midnight"] .process-grid article>span{color:#edc675}
[data-design="midnight"] .contact-section{background:linear-gradient(120deg,#213551,#0e192b);border-block:1px solid #3a4960}
[data-design="midnight"] .contact-section .eyebrow{color:#edc675}
[data-design="midnight"] .contact-section p:not(.eyebrow){color:#b9c6da}
[data-design="midnight"] .lime{color:#142039}
[data-design="midnight"] .use-case{background:#1c2b40;border-color:#edc675}
[data-design="midnight"] .flow-steps li,[data-design="midnight"] .workflow-preview{background:#17253b}
[data-design="midnight"] .flow-steps li>span{background:#31415a;color:#edc675}
[data-design="midnight"] .status-note,[data-design="midnight"] .demo-slot{background:#1b2a40;border-color:#42536e}
[data-design="midnight"] .demo-icon{color:#edc675;border-color:#b49c69}
[data-design="midnight"] .features li:before{color:#edc675}
html[data-design="ivory"]{--ink:#143f41;--muted:#576b69;--paper:#fcfaf5;--line:#d4dfd9;--lime:#eac19d;--dark:#104c4c;--white:#fff;--green:#187775;color-scheme:light}
[data-design="ivory"] body{background:var(--paper)}
[data-design="ivory"] .nav{height:108px}
[data-design="ivory"] .brandmark{background:#104c4c;color:#fcfaf5;border-radius:50%}
[data-design="ivory"] .hero{grid-template-columns:1.15fr 1fr;gap:75px;padding-block:75px 100px}
[data-design="ivory"] .hero h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(54px,6vw,84px);letter-spacing:-.06em;line-height:1.06}
[data-design="ivory"] .hero h1 em{font-style:italic;color:#248b84}
[data-design="ivory"] .workflow-art{background-color:#e6f0e9;background-image:radial-gradient(#aacac1 .7px,transparent .7px);border:1px solid #a8c9bd;border-radius:90px 16px 16px 16px;padding-top:38px;box-shadow:15px 15px 0 #eee5d7;transform:rotate(-1deg)}
[data-design="ivory"] .art-title{font-family:Georgia,serif;font-size:29px;font-weight:400}
[data-design="ivory"] .highlighted{background:#104c4c}
[data-design="ivory"] .highlighted .node-icon{background:#206463;color:#f3cba9;border-color:#4f8d88}
[data-design="ivory"] .n8n-label{color:#f3cba9}
[data-design="ivory"] .stack-strip{background:#f0eee7}
[data-design="ivory"] .button{border-radius:2px}
[data-design="ivory"] .primary{background:#104c4c;color:#fff}
[data-design="ivory"] .section h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(38px,4vw,54px)}
[data-design="ivory"] .card{border-radius:2px;padding:28px;border-color:#c8d8d2;background:#fffefb}
[data-design="ivory"] .card:hover{border-color:#187775;box-shadow:7px 7px 0 #dcece5}
[data-design="ivory"] .card h3{font-family:Georgia,serif;font-weight:400;font-size:25px;letter-spacing:-.025em}
[data-design="ivory"] .card-top .arrow{border-radius:2px;background:#e9f1ec;color:#187775}
[data-design="ivory"] .tags span{background:#eef4ef;border-color:#d6e2da;color:#38625a;border-radius:2px}
[data-design="ivory"] .card-bottom{color:#187775}
[data-design="ivory"] .services-band{background:#104c4c}
[data-design="ivory"] .services-band h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(38px,4vw,54px)}
[data-design="ivory"] .service-grid p{color:#c4ddd4}
[data-design="ivory"] .service-grid article>span{color:#f3cba9}
[data-design="ivory"] .services-band .eyebrow{color:#c4ddd4}
[data-design="ivory"] .portrait{background:#eee5d7;border-radius:60px 5px 5px 5px;padding:14px}
[data-design="ivory"] .portrait img{border-radius:50px 2px 2px 2px}
[data-design="ivory"] .contact-section{background:#e8efe7;color:#143f41;border-top:1px solid #b8ccc1}
[data-design="ivory"] .contact-section h2{font-family:Georgia,serif;font-weight:400}
[data-design="ivory"] .contact-section h2 em{color:#248b84}
[data-design="ivory"] .contact-section .eyebrow{color:#187775}
[data-design="ivory"] .contact-section p:not(.eyebrow){color:#506b65}
[data-design="ivory"] .contact-section .lime{background:#104c4c;color:white}
[data-design="ivory"] .project-hero h1{font-family:Georgia,serif;font-weight:400}
[data-design="ivory"] .use-case{background:#e6f0e9;border-color:#187775}
[data-design="ivory"] .flow-steps li{border-radius:2px;background:#fffefb}
@media(max-width:760px){[data-design] .hero{grid-template-columns:1fr;gap:40px;padding-block:45px 60px}[data-design] .hero h1{font-size:54px}[data-design] .workflow-art{transform:none;box-shadow:6px 8px 0 #23365033}[data-design="ivory"] .nav{height:80px}.theme-bar{gap:8px}.theme-bar>span{width:100%;text-align:center}.theme-bar button{font-size:10px}[data-design="ivory"] .card{padding:22px}}

html[data-design="violet"]{--ink:#f4f1e9;--muted:#b5bdcc;--paper:#100d20;--line:#39304f;--lime:#c6acff;--dark:#201637;--white:#211b36;--green:#c6acff;color-scheme:dark}
[data-design="violet"] body{background:radial-gradient(ellipse at 85% 12%,#26355688,transparent 36%),var(--paper)}
[data-design="violet"] .hero{gap:60px;padding-top:88px;padding-bottom:94px}
[data-design="violet"] .hero h1{font-size:clamp(50px,5.8vw,80px);letter-spacing:-.06em;line-height:1.08}
[data-design="violet"] .hero h1 em{color:#c6acff;font-family:Manrope,Arial,sans-serif}
[data-design="violet"] .brandmark{background:#c6acff;color:#100d20;border-radius:10px}
[data-design="violet"] .primary{background:#c6acff;color:#101929;box-shadow:0 8px 24px #0002}
[data-design="violet"] .primary:hover{background:#f7dba3}
[data-design="violet"] .nav-cta{border-color:#667084;color:#f6e4be}
[data-design="violet"] .dot{background:#c6acff}
[data-design="violet"] .workflow-art{background-color:#1c1430;background-image:radial-gradient(#34425c .7px,transparent .7px);border-color:#46516a;box-shadow:12px 16px 0 #19263d;border-radius:14px;transform:rotate(1deg)}
[data-design="violet"] .art-top,[data-design="violet"] .art-bottom,[data-design="violet"] .tiny{color:#b8c4d9}
[data-design="violet"] .diagram-node{background:#1c2a42;border-color:#3a4961;color:#f4f1e9}
[data-design="violet"] .diagram-node small{color:#aebdd3}
[data-design="violet"] .node-icon{background:#233550;border-color:#415675;color:#c6acff}
[data-design="violet"] .highlighted{background:#c6acff;color:#201136;border-color:#c6acff}
[data-design="violet"] .highlighted small,[data-design="violet"] .n8n-label{color:#35445e}
[data-design="violet"] .highlighted .node-icon{background:#15253b;color:#c6acff;border-color:#35445e}
[data-design="violet"] .connector{background:#9d8456}
[data-design="violet"] .connector:after{color:#d5b778}
[data-design="violet"] .sample-tabs button{color:#d5dded;border-color:#4a5770}
[data-design="violet"] .sample-tabs button.selected{background:#c6acff;color:#152039}
[data-design="violet"] .mini-avatar{background:#26354b;border-color:#54617a;color:#c6acff}
[data-design="violet"] .stack-strip{background:#19132a}
[data-design="violet"] .stack-strip strong{color:#b9c7dc}
[data-design="violet"] .stack-strip span{color:#a0aec1}
[data-design="violet"] .card{background:linear-gradient(145deg,#251c3b,#17112b);border-color:#2c3b55;border-radius:12px;border-top:2px solid #9f885a}
[data-design="violet"] .card:hover{border-color:#c6acff;box-shadow:0 15px 30px #0003}
[data-design="violet"] .card-top{color:#c3af82}
[data-design="violet"] .project-num{color:#9cadc8}
[data-design="violet"] .card-bottom{border-color:#33405a;color:#c6acff}
[data-design="violet"] .tags span{background:#213149;color:#d7dfeb;border-color:#344763}
[data-design="violet"] .search input{background:#152238;color:#f4f1e9;border-color:#40516b}
[data-design="violet"] .filters button{color:#c6cddc}
[data-design="violet"] .filters button.active{background:#c6acff;color:#201136}
[data-design="violet"] .results-meta{color:#a8b5cb}
[data-design="violet"] .services-band{background:#1d1530;border-block:1px solid #33415b}
[data-design="violet"] .services-band .eyebrow,[data-design="violet"] .service-grid article>span{color:#c6acff}
[data-design="violet"] .service-grid p{color:#b9c6da}
[data-design="violet"] .service-grid article{border-color:#64708a}
[data-design="violet"] .portrait{background:#1f2f47;border:1px solid #43546d}
[data-design="violet"] .portrait>span{color:#d2bd90}
[data-design="violet"] .process-grid article{border-color:#66728a}
[data-design="violet"] .process-grid article>span{color:#c6acff}
[data-design="violet"] .contact-section{background:linear-gradient(120deg,#382254,#120e24);border-block:1px solid #3a4960}
[data-design="violet"] .contact-section .eyebrow{color:#c6acff}
[data-design="violet"] .contact-section p:not(.eyebrow){color:#b9c6da}
[data-design="violet"] .lime{color:#201136}
[data-design="violet"] .use-case{background:#1c2b40;border-color:#c6acff}
[data-design="violet"] .flow-steps li,[data-design="violet"] .workflow-preview{background:#251c3b}
[data-design="violet"] .flow-steps li>span{background:#31415a;color:#c6acff}
[data-design="violet"] .status-note,[data-design="violet"] .demo-slot{background:#1b2a40;border-color:#42536e}
[data-design="violet"] .demo-icon{color:#c6acff;border-color:#b49c69}
[data-design="violet"] .features li:before{color:#c6acff}

html[data-design="pearl"]{--ink:#153259;--muted:#5b6d83;--paper:#f5f8ff;--line:#d6e1f3;--lime:#bad4ff;--dark:#174eaf;--white:#fff;--green:#2463d4;color-scheme:light}
[data-design="pearl"] body{background:var(--paper)}
[data-design="pearl"] .nav{height:108px}
[data-design="pearl"] .brandmark{background:#174eaf;color:#f5f8ff;border-radius:50%}
[data-design="pearl"] .hero{grid-template-columns:1.15fr 1fr;gap:75px;padding-block:75px 100px}
[data-design="pearl"] .hero h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(54px,6vw,84px);letter-spacing:-.06em;line-height:1.06}
[data-design="pearl"] .hero h1 em{font-style:italic;color:#2463d4}
[data-design="pearl"] .workflow-art{background-color:#eaf1ff;background-image:radial-gradient(#aacac1 .7px,transparent .7px);border:1px solid #a8c9bd;border-radius:90px 16px 16px 16px;padding-top:38px;box-shadow:15px 15px 0 #dce8fc;transform:rotate(-1deg)}
[data-design="pearl"] .art-title{font-family:Georgia,serif;font-size:29px;font-weight:400}
[data-design="pearl"] .highlighted{background:#174eaf}
[data-design="pearl"] .highlighted .node-icon{background:#206463;color:#f3cba9;border-color:#4f8d88}
[data-design="pearl"] .n8n-label{color:#f3cba9}
[data-design="pearl"] .stack-strip{background:#f0eee7}
[data-design="pearl"] .button{border-radius:2px}
[data-design="pearl"] .primary{background:#174eaf;color:#fff}
[data-design="pearl"] .section h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(38px,4vw,54px)}
[data-design="pearl"] .card{border-radius:2px;padding:28px;border-color:#d5e1f4;background:#ffffff}
[data-design="pearl"] .card:hover{border-color:#2463d4;box-shadow:7px 7px 0 #dcece5}
[data-design="pearl"] .card h3{font-family:Georgia,serif;font-weight:400;font-size:25px;letter-spacing:-.025em}
[data-design="pearl"] .card-top .arrow{border-radius:2px;background:#e9f1ec;color:#2463d4}
[data-design="pearl"] .tags span{background:#edf3ff;border-color:#d6e2da;color:#335d96;border-radius:2px}
[data-design="pearl"] .card-bottom{color:#2463d4}
[data-design="pearl"] .services-band{background:#174eaf}
[data-design="pearl"] .services-band h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(38px,4vw,54px)}
[data-design="pearl"] .service-grid p{color:#c4ddd4}
[data-design="pearl"] .service-grid article>span{color:#f3cba9}
[data-design="pearl"] .services-band .eyebrow{color:#c4ddd4}
[data-design="pearl"] .portrait{background:#dce8fc;border-radius:60px 5px 5px 5px;padding:14px}
[data-design="pearl"] .portrait img{border-radius:50px 2px 2px 2px}
[data-design="pearl"] .contact-section{background:#e7efff;color:#153259;border-top:1px solid #b8ccc1}
[data-design="pearl"] .contact-section h2{font-family:Georgia,serif;font-weight:400}
[data-design="pearl"] .contact-section h2 em{color:#2463d4}
[data-design="pearl"] .contact-section .eyebrow{color:#2463d4}
[data-design="pearl"] .contact-section p:not(.eyebrow){color:#526b8d}
[data-design="pearl"] .contact-section .lime{background:#174eaf;color:white}
[data-design="pearl"] .project-hero h1{font-family:Georgia,serif;font-weight:400}
[data-design="pearl"] .use-case{background:#eaf1ff;border-color:#2463d4}
[data-design="pearl"] .flow-steps li{border-radius:2px;background:#ffffff}

/* Royal Violet: centered studio presentation and rounded cards. */
[data-design="violet"] body{background:radial-gradient(ellipse at 50% 8%,#5b329b55,transparent 35%),var(--paper)}
[data-design="violet"] .hero{grid-template-columns:1fr;text-align:center;max-width:1050px;gap:48px;padding-top:72px}
[data-design="violet"] .hero-copy{max-width:850px;margin:auto}
[data-design="violet"] .hero h1{font-size:clamp(50px,6.3vw,88px);letter-spacing:-.065em}
[data-design="violet"] .hero .intro{margin-inline:auto;max-width:650px}
[data-design="violet"] .hero .actions,[data-design="violet"] .hero-byline{justify-content:center}
[data-design="violet"] .workflow-art{width:min(100%,620px);margin:auto;text-align:left;transform:none;border-radius:28px;box-shadow:0 24px 80px #0004}
[data-design="violet"] .card{border-radius:24px;border-top:1px solid #65517f;background:linear-gradient(145deg,#2c2042,#171126)}
[data-design="violet"] .card:hover{transform:translateY(-5px);box-shadow:0 18px 45px #0004}
[data-design="violet"] .primary{border-radius:40px;background:linear-gradient(110deg,#cbb1ff,#aabfff);color:#211334}
[data-design="violet"] .brandmark{border-radius:18px;background:#c6acff}
[data-design="violet"] .portrait{border-radius:28px;overflow:hidden}
/* Pearl & Blue: crisp sans-serif, blue details and a bright workspace feel. */
[data-design="pearl"] .hero h1,[data-design="pearl"] .section h2,[data-design="pearl"] .services-band h2,[data-design="pearl"] .contact-section h2,[data-design="pearl"] .project-hero h1,[data-design="pearl"] .card h3{font-family:Manrope,Arial,sans-serif;font-weight:750;letter-spacing:-.045em}
[data-design="pearl"] .hero h1 em{font-style:normal}
[data-design="pearl"] .hero{gap:55px;padding-block:85px}
[data-design="pearl"] .brandmark{border-radius:12px}
[data-design="pearl"] .workflow-art{border-radius:18px;transform:none;background-color:#edf3ff;box-shadow:0 20px 70px #2c65bb18;border-color:#c4d7f5;background-image:radial-gradient(#a9c4f3 .7px,transparent .7px)}
[data-design="pearl"] .art-title{font-family:Manrope,Arial,sans-serif;font-weight:700}
[data-design="pearl"] .card{border-radius:16px;border-color:#d4e1f5;box-shadow:0 6px 24px #20519c06}
[data-design="pearl"] .card:hover{box-shadow:0 15px 40px #20519c18;border-color:#2463d4}
[data-design="pearl"] .card h3{font-size:24px}
[data-design="pearl"] .button{border-radius:10px}
[data-design="pearl"] .stack-strip{background:#eaf1fd}
[data-design="pearl"] .portrait,[data-design="pearl"] .portrait img{border-radius:20px}
[data-design="pearl"] .portrait{background:#e2ecfc}
[data-design="pearl"] .status-note,[data-design="pearl"] .demo-slot,[data-design="pearl"] .use-case{background:#eaf1ff;border-color:#adc8f4}
@media(max-width:760px){[data-design="violet"] .hero,[data-design="pearl"] .hero{grid-template-columns:1fr;padding-block:45px 60px;gap:36px}[data-design="violet"] .hero h1,[data-design="pearl"] .hero h1{font-size:48px}[data-design="pearl"] .nav{height:80px}.theme-bar button{min-height:36px}}