A production website designed to your brand, bound to your content types, and launched on managed hosting with AI surfaces built in.
Hand us a design.
We run the whole website.
Zarton AI turns a finished design into a live, content-managed site — bound to your content, hosted, and wired to OpenAI, Anthropic, and Gemini. Backed by 25+ years of full-stack engineering.
One platform · three frontier model providers
Everything a service business needs, run for you.
Pick the work you need — we design, build, bind, and keep it running. Each service is priced up front, with no surprise invoices.
Optimize your Service Level Agreements with expert support and continuous tuning. We help reduce breaches, improve compliance, and align your SLAs with business objectives through proactive monitoring and data-driven refinement.
Comprehensive SLA audit and gap analysis, Real-time performance monitoring dashboard, Automated breach prevention alerting, Monthly compliance reporting, Quarterly business reviews, Parameter optimization recommendations, Escalation procedure refinement, Dedicated SLA success manager
Professional content migration services using Crawl4Ai technology, static data handling, and API integrations to seamlessly transfer your digital assets between platforms while preserving data integrity and SEO value.
AI-powered content crawling with Crawl4Ai, Static file and asset migration, REST and GraphQL API integration, SEO preservation and redirect mapping, Metadata extraction and transformation, Quality assurance and validation testing, Rollback procedures and risk mitigation, Post-migration support and monitoring
The right brain for every job.
We route each request to the provider that does it best — and you pay for what you use. No lock-in, no juggling three subscriptions.
OpenAI
GPT-class models power customer chat, quote drafts, and on-brand product copy — tuned to your voice.
Anthropic
Claude handles long documents, SOP drafting, and careful reasoning for SLA tickets and policy-sensitive replies.
Google Gemini
Gemini reads photos, scanned receipts, and documents — turning them into clean, structured data and search.
A CMS that does the work, not just the pages.
Beyond a page editor. Every Zarton AI site ships with content modeling, AI surfaces, and a headless API that hands off cleanly to humans.
On-brand copy in one click
Service pages, posts, and replies drafted from your real catalog and past work — review and publish instantly.
Structured content types
Model services, FAQs, portfolios, and pages once — reuse them across every page and your headless API.
Flows for booking & follow-up
Turn a chat into a quote, a quote into an invoice, and a thank-you into a review request — synced to your tools.
Usage caps & guardrails
Set hard spend limits on AI and API usage so a busy month never turns into a surprise bill.
Sites we designed, built, and still run.
A sample of service businesses now running on Zarton AI — from first design to live, content-managed sites.
DynamoElectric Inc: Full-Stack Digital Transformation for Commercial Electrical Services
DynamoElectric Inc, a leading Los Angeles commercial electrical contractor, partnered with us for a complete digital transformation featuring AI-powered chat, automated inquiry response, integrated booking, dynamic estimating tools, and enterprise-grade headless infrastructure.
When DynamoElectric Inc, one of Los Angeles's premier commercial electrical contractors, approached us with a vision to revolutionize their digital presence and operational efficiency, we knew this would be a flagship partnership. The result is a comprehensive, enterprise-grade solution that has transformed how they engage with clients, manage inquiries, and scale their business operations.
The Challenge: Modernizing a Traditional Industry
Commercial electrical services represent a critical yet often underdigitized sector. DynamoElectric Inc recognized that their existing digital infrastructure wasn't keeping pace with client expectations or their own growth trajectory. They needed a solution that would automate time-consuming processes, provide instant client engagement, streamline booking and estimating workflows, and leverage artificial intelligence to enhance decision-making across their organization.
The leadership team at DynamoElectric Inc understood that modern commercial clients—property managers, general contractors, and facility directors—expect immediate responses and seamless digital experiences. They weren't willing to settle for incremental improvements; they wanted a complete digital transformation.
Our Solution: An Integrated Digital Ecosystem
We deployed our most comprehensive service package for DynamoElectric Inc, building a headless architecture that provides unmatched flexibility and performance. This approach decouples the frontend presentation layer from the backend content management and business logic, enabling rapid updates and seamless integration with their existing workflows.
Intelligent Chat Integration
Our AI-powered chat system serves as the first point of contact for website visitors at DynamoElectricinc.com. Unlike basic chatbots that frustrate users with rigid scripted responses, our solution understands natural language queries about commercial electrical services, from panel upgrades and lighting retrofits to emergency power systems and code compliance questions. The chat system qualifies leads in real-time, capturing essential project details before routing inquiries to the appropriate team member.
Auto-Response Inquiry Management
Time is critical in the commercial electrical industry, where project timelines are often compressed and contractors are selected based on responsiveness. Our auto-response system ensures that every inquiry receives an immediate, personalized acknowledgment, complete with relevant service information and clear next steps. This system operates around the clock, ensuring DynamoElectric Inc never misses an opportunity, regardless of when a potential client reaches out.
Streamlined Booking System
Scheduling site visits, consultations, and service appointments previously required extensive back-and-forth communication. Our integrated booking platform allows clients to view real-time availability, select convenient time slots, and receive automatic confirmations. The system synchronizes with DynamoElectric's internal scheduling tools, eliminating double-bookings and reducing administrative overhead.
Dynamic Estimator Tool
Perhaps the most transformative component of our implementation is the custom estimating solution. Commercial electrical projects involve complex variables—square footage, existing infrastructure, code requirements, material costs, and labor considerations. Our estimator tool walks clients through a guided process, collecting project specifications and generating preliminary estimates that set appropriate expectations while protecting DynamoElectric Inc's pricing integrity. This tool has dramatically reduced the time between initial inquiry and formal proposal delivery.
Backend AI Intelligence
Behind the scenes, artificial intelligence continuously analyzes patterns in client inquiries, project types, and seasonal demand fluctuations. These insights inform marketing strategies, staffing decisions, and service expansion opportunities. The AI layer also enhances search functionality, content recommendations, and personalization across the digital experience.
Infrastructure Excellence
DynamoElectric Inc operates on our top-tier hosting infrastructure, ensuring enterprise-grade performance, security, and reliability. The headless architecture means their website loads with exceptional speed, directly impacting user experience and search engine rankings. Our infrastructure team provides proactive monitoring, automatic scaling during traffic spikes, and comprehensive backup protocols.
Results and Impact
Since launching this integrated solution, DynamoElectric Inc has experienced remarkable improvements across key performance indicators. Response times to inquiries have decreased by over 85 percent, while lead capture rates have increased substantially. The booking system has reduced scheduling-related phone calls by approximately 60 percent, freeing administrative staff to focus on higher-value activities.
Most importantly, DynamoElectric Inc has positioned itself as a technology-forward leader in the Los Angeles commercial electrical market. Their digital presence now reflects the same professionalism and innovation they bring to every electrical project.
A Partnership Built for Growth
Our relationship with DynamoElectric Inc exemplifies what's possible when a forward-thinking client partners with a comprehensive digital solutions provider. We continue to refine and enhance their platform, introducing new features and optimizations as technology evolves and their business grows. This is more than a vendor relationship—it's a strategic partnership driving measurable business outcomes in the commercial electrical industry.
Built for service-led businesses.
Simple subscriptions. Pay only for the AI you use.
Every plan includes a monthly bundle of AI credits across all three providers. Go over and you pay as you go — never blocked, never surprised.
Starter Plan
Launch your AI-powered website with the Starter Plan. Includes managed hosting, SSL, five content types, multi-model AI routing, and 50,000 monthly AI credits.
- 1 website, up to 5 content types
- OpenAI · Anthropic · Gemini routing
- AI authoring & chat
- Managed hosting + SSL
- Community support
- Includes 50K AI credits / mo
The Starter Plan is the ideal entry point for individuals and small teams ready to harness the power of AI-driven content management. Designed with simplicity and efficiency in mind, this subscription tier delivers everything you need to launch and manage a professional website without complexity or compromise.
What's Included
With the Starter Plan, you gain access to a fully managed hosting environment complete with SSL certification, ensuring your website is secure, fast, and always available. Create and organise your content using up to five custom content types, giving you the flexibility to structure your site exactly how you envision it.
Intelligent AI Integration
Our platform seamlessly integrates with leading AI providers including OpenAI, Anthropic, and Google Gemini. Smart routing technology automatically selects the optimal model for each task, maximising quality while minimising latency. The built-in AI authoring tools and conversational chat interface streamline your content creation workflow, helping you produce compelling copy faster than ever before.
Generous AI Credits
Every Starter subscription includes 50,000 AI credits per month—more than enough to power your content creation, editing, and optimisation tasks. Whether you're drafting blog posts, refining product descriptions, or generating creative concepts, you'll have the resources to work confidently.
Perfect For
The Starter Plan suits freelancers, solo entrepreneurs, bloggers, and small business owners who need a single website with robust capabilities. It's also an excellent choice for teams evaluating our platform before scaling to higher tiers.
Begin your AI-powered content journey today with a plan built for productivity, security, and growth.
starter-plan12026-06-02 13:44:00Rostom Sahakian9999
Growth Subscription Plan
Efficiently manage bookings and content with our Growth plan, offering 250K AI credits and top-tier support.
- 250K AI credits / mo
- Includes everything in Starter
- 3 websites, unlimited content types
- Automation flows & webhooks
- Headless API + CRM / calendar sync
- Priority email & chat support
Designed for busy service teams, our Growth Subscription Plan is the ideal solution for managing steady bookings and content creation. This plan comes packed with 250K AI credits per month, providing ample resources for businesses ready to scale. Enjoy all the features of our Starter plan plus three websites with unlimited content types, allowing for expansive and innovative content management. Streamline your workflow with automation flows and webhooks, and enhance connectivity with our Headless API, including CRM and calendar sync. With priority email and chat support, your team will never be left in the dark.
growth-subscription-plan12026-06-02 13:43:00Rostom Sahakian100
Scale SaaS CMS Subscription Plan
Optimize your brand's digital presence with our Scale SaaS CMS plan, offering extensive features for $200/month.
- asas
- asasqwwqwq
Our Scale plan is crafted for agencies and multi-location brands requiring extensive support and advanced features. At just $200 per month, this plan includes 600K AI credits monthly, allowing you to drive innovation and transform digital experiences. You will enjoy everything offered in the Growth package alongside the capability to manage up to 10 websites and team roles efficiently. We ensure peace of mind with a robust SLA featuring response and uptime guarantees. Our dedicated specialist facilitates seamless onboarding and provides custom integrations and data management, empowering your business to scale effortlessly.
scale-saas-cms-subscription-plan12026-06-02 13:43:00Rostom Sahakian
From design to live in four steps.
You bring a design and your content. We do the rest — and stay on to keep it earning its keep.
Import a design
Drop in a design or point us at your existing site. We parse the layout and structure automatically.
Bind your content
We map the design to your content types and fill it with your records — services, FAQs, portfolio, pages.
Wire the AI
Chat, authoring, and automations are tuned to your catalog and tone, routed across all three providers.
Go live & grow
Publish on managed hosting. Pay-as-you-go for light use, or move to an SLA when AI gets mission-critical.
A Fresno team, 25 years deep in the web.
Zarton AI is built by full-stack and enterprise engineers in Fresno, California, with more than two decades shipping production software. We turned that experience into a CMS that does the heavy lifting — so service businesses get an enterprise-grade site without an enterprise team.
Enterprise-grade
Architecture and security from 25+ years of enterprise work.
Full-stack, in-house
Design, build, hosting, and AI — one accountable team.
Plain-English pricing
Flat subscriptions plus usage, with caps you control.
People behind the AI
Real engineers on support and SLAs — AI never answers alone.
Fresno, California
Serving service businesses nationwide · hello@zartonai.com · (559) 555-0142
SOC 2-aligned
Hardened hosting & access controls
Encrypted
TLS in transit, encrypted at rest
No lock-in
Export content & headless API
99.9% uptime
Managed hosting & global CDN
Questions, answered.
Each plan includes a monthly bundle of AI credits. If you exceed it, additional AI and API calls are billed as pay-as-you-go credits — and you can set a hard monthly cap so spend never runs away.
When choosing an AI model, it's essential to understand the options available with platforms like OpenAI, Anthropic, and Google Gemini. Each offers unique artificial intelligence models tailored for different applications.
OpenAI: Known for its powerful language models like GPT, OpenAI provides advanced capabilities for natural language processing, code assistance, and more.
Anthropic: This company focuses on designing AI systems with a special emphasis on safety and reliability. Their models are tailored for use in secure applications where ethical considerations are paramount.
Google Gemini: Recently introduced, Google Gemini emphasizes scalability and integration, offering a flexible ecosystem for deploying AI models in cloud environments efficiently.
Each platform's models have unique strengths. OpenAI excels in creativity and comprehensive language understanding. Anthropic prioritizes safety, making it ideal for sensitive applications. Meanwhile, Google Gemini shines in environments needing scalable solutions and superior integration.
AI Models1No, you don't need a developer to launch your website with us! We take care of importing your design, connecting it seamlessly to your content, and managing the hosting. This ensures you can focus on your business while we handle the technical aspects. Plus, our intuitive visual editor empowers you to make day-to-day updates easily. If you ever feel stuck or need extra support, our friendly team in Fresno is just a call away, ready to lend a hand. Embrace the freedom of launching without technical barriers!
Website Launch FAQs1Let's put your site to work.
Start free, import a design, and watch it go live — bound to your content with AI built in. Talk to a real engineer in Fresno whenever you need one.
Products
One CMS. Two ways in. Zero rebuilds.
However a site arrives — as a fresh design or a live URL — Zartonai lands it in the same structured CMS, wired to your content and ready to publish. Here's exactly how each path works.
Style it in Claude Design. We wire it to your content.
Zartonai exports a spec pack: your brand tokens, your content schema, sample records, and pre-tagged starter pages. Style it however you like in Claude Design — then bring it back. We validate, bind, and build draft pages automatically.
- 1
Export a spec pack
Theme contract, content schema, sample data, and pre-tagged starter HTML — one file.
- 2
Style freely in Claude Design
Lay out and brand it any way you want. Keep the data-cms-* tags; reference brand values as tokens.
- 3
Drop it back in
The conformance gate checks the tokens and bindings before anything binds.
- 4
Auto-bind & draft
Every tagged element wires to a field; we generate draft pages filled with your records.
<!-- keep every data-cms-* attribute --> <section data-cms-repeater="blog-post" data-cms-limit="6"> <article> <img data-cms-bind-attr="src:item.featured_image"> <h3 data-cms-bind="item.title"></h3> <p data-cms-bind="item.excerpt"></p> <a data-cms-link="detail">Read →</a> </article> </section> // referenced as tokens, never hardcoded color: var(--brand-color-primary, #0e1f3e);
Already have a site? We'll bring it in for you.
Give us your URL. Zartonai crawls every page, extracts the design, copy, and images, and classifies the content into your types. You review each mapped field, fix anything, and generate a draft site — no manual migration.
- 1
Point us at your URL
We crawl the whole site with Crawl4AI — pages, assets, and structure.
- 2
Classify into content types
Each page is sorted into Blog Post, Service, Business Info, FAQ, and more.
- 3
Review every field
Confirm the mapping field-by-field; nudge anything the classifier got wrong.
- 4
Generate a draft site
We assemble draft pages on your theme, ready to edit and publish.
Both paths land in the same CMS.
Import is just the on-ramp. What you operate every day is a structured, multi-tenant content platform.
Content types
Typed fields with required rules, media, and relationships.
AI editor
Draft, rewrite, translate and generate images inline.
Theme tokens
Brand as editable tokens applied to every bound page.
Managed hosting
SSL, CDN, staging, backups and one-click publish.
Usage meter
One meter for AI, crawls and imports — with caps.
Roles & tenants
Many sites, many editors, scoped permissions.
TTS & media
Auto alt text, audio versions, and an asset library.
Lead & flows
Forms, chat capture and automations that hand off to humans.
See your design bound to live content.
Start free and run either path end-to-end. Import a Claude Design layout or crawl your current site — and watch it become an editable, publishable website.
products
1
2026-06-01 15:49:00
Rostom Sahakian
/* === site-modular/styles.css === */ /* =================================================================== Zartonai — marketing site shared styles Brand tokens mirror zai-theme.json (navy / orange / blue, warm paper) =================================================================== */ :root{ /* ===== THEME CONTRACT — mirrors zai-theme.json (the <script id="zai-theme"> block in each page). Edit these to re-brand the whole site; everything below derives from them. ===== */ --brand-color-primary:#0e1f3e; --brand-color-primary-contrast:#ffffff; --brand-color-secondary:#1e5bb8; --brand-color-accent:#e85d2c; --brand-color-background:#0e1f3e; --brand-color-surface:#ffffff; --brand-color-text:#ffffff; --brand-color-muted:#6b7891; --brand-color-border:#e6e2d8; --brand-color-success:#1f8a5b; --brand-color-warning:#e8a317; --brand-color-danger:#d63031; --brand-font-display:Space Grotesk, system-ui, sans-serif; --brand-font-body:DM Sans, system-ui, sans-serif; --brand-font-mono:"JetBrains Mono", ui-monospace, monospace; --brand-font-scale:1.25; --brand-radius-sm:4px; --brand-radius-md:8px; --brand-radius-lg:16px; --brand-radius-pill:9999px; --brand-spacing-container:72rem; --brand-spacing-section-y:5rem; --brand-spacing-gap:1.5rem; --brand-shadow-sm:0 1px 2px rgba(14,31,62,.06); --brand-shadow-md:0 1px 0 rgba(14,31,62,.04), 0 10px 30px -12px rgba(14,31,62,.18); --brand-shadow-lg:0 24px 60px -20px rgba(14,31,62,.30); /* ===== SEMANTIC TOKENS — derived from the contract above (hex = fallback) ===== */ --ink: var(--brand-color-primary, #0E1F3E); --ink-2:#1A2B4A; --ink-soft:#3a4a66; --mute: var(--brand-color-muted, #6b7891); --faint:#9aa3b4; --line: var(--brand-color-border, #E6E2D8); --line-2:#D8D3C4; --paper:#F7F4ED; --paper-2:#EFEAE0; --card: var(--brand-color-surface, #FFFFFF); --blue: var(--brand-color-secondary, #1E5BB8); --blue-deep:#0E2C66; --blue-tint:#EAF1FB; --blue-line:#DCE4F2; --orange: var(--brand-color-accent, #E85D2C); --orange-deep:#cf4c1d; --orange-tint:#FCEFE7; --green: var(--brand-color-success, #1F8A5B); --amber: var(--brand-color-warning, #E8A317); --red: var(--brand-color-danger, #D63031); --font-display: var(--brand-font-display, 'Space Grotesk', system-ui, sans-serif); --font-body: var(--brand-font-body, 'DM Sans', system-ui, sans-serif); --font-mono: var(--brand-font-mono, 'JetBrains Mono', ui-monospace, monospace); --radius:14px; --radius-lg:18px; --shadow: var(--brand-shadow-md, 0 1px 0 rgba(14,31,62,.04), 0 10px 30px -12px rgba(14,31,62,.18)); --shadow-lg: var(--brand-shadow-lg, 0 24px 60px -20px rgba(14,31,62,.30)); } *{box-sizing:border-box} html{scroll-behavior:smooth} html,body{margin:0;padding:0} body{ font-family:var(--font-body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; font-size:16px; line-height:1.55; } h1,h2,h3,h4{font-family:var(--font-display); letter-spacing:-0.02em; color:var(--ink); margin:0; text-wrap:balance} h1{font-size:clamp(40px, 5.6vw, 72px); line-height:1.02; font-weight:600} h2{font-size:clamp(29px, 3.5vw, 46px); line-height:1.07; font-weight:600} h3{font-size:22px; font-weight:600; line-height:1.2} p{margin:0; text-wrap:pretty} a{color:inherit; text-decoration:none} img{display:block; max-width:100%} ::selection{background:rgba(232,93,44,.18)} .mono{font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; text-transform:uppercase} .container{max-width:1240px; margin:0 auto; padding:0 28px} .narrow{max-width:920px} @media (max-width:640px){ .container{padding:0 20px} } .accent{color:var(--orange)} .accent-blue{color:var(--blue)} .italic{font-style:italic; font-weight:500} /* ============ BUTTONS ============ */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; font-family:var(--font-body); font-weight:500; font-size:15px; border:1px solid transparent; cursor:pointer; transition:all .15s ease; white-space:nowrap; } .btn-ghost{color:var(--ink); background:transparent} .btn-ghost:hover{background:rgba(14,31,62,.06)} .btn-primary{background:var(--ink); color:#fff} .btn-primary:hover{background:#000} .btn-outline{border-color:var(--line-2); color:var(--ink); background:transparent} .btn-outline:hover{border-color:var(--ink); background:#fff} .btn-orange{background:var(--orange); color:#fff} .btn-orange:hover{background:var(--orange-deep)} .btn-lg{padding:14px 24px; font-size:16px} /* ============ NAV ============ */ .nav-wrap{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:rgba(247,244,237,.82); border-bottom:1px solid transparent; transition:border-color .2s} .nav-wrap.scrolled{border-bottom-color:var(--line)} .nav{display:flex; align-items:center; justify-content:space-between; height:72px} .brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-0.01em} .brand img{width:32px; height:32px; display:block} .brand .dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--orange); transform:translateY(-10px)} .nav-links{display:flex; align-items:center; gap:34px} .nav-links a{color:var(--ink-soft); font-size:15px; font-weight:500; position:relative; padding:6px 0} .nav-links a:hover{color:var(--ink)} .nav-links a.active{color:var(--ink)} .nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--orange); border-radius:2px} .nav-cta{display:flex; align-items:center; gap:10px} .menu-btn{display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line-2); background:transparent; align-items:center; justify-content:center; cursor:pointer; padding:0} .menu-btn span{display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition:transform .2s} .menu-btn span::before,.menu-btn span::after{content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink); transition:transform .2s} .menu-btn span::before{top:-5px} .menu-btn span::after{top:5px} .menu-btn.open span{background:transparent} .menu-btn.open span::before{transform:translateY(5px) rotate(45deg)} .menu-btn.open span::after{transform:translateY(-5px) rotate(-45deg)} .mobile-menu{display:none; position:fixed; inset:72px 0 0 0; z-index:40; background:var(--paper); padding:20px 28px 40px; flex-direction:column; border-top:1px solid var(--line); overflow-y:auto} .mobile-menu a{display:block; padding:18px 0; font-family:var(--font-display); font-weight:500; font-size:22px; color:var(--ink); border-bottom:1px solid var(--line)} .mobile-menu a:last-of-type{border-bottom:0} .mobile-menu .actions{display:flex; gap:10px; margin-top:24px; flex-direction:column} .mobile-menu.open{display:flex} @media (max-width: 940px){ .nav-links, .nav-cta{display:none} .menu-btn{display:flex} } /* ============ SECTIONS ============ */ section{padding:96px 0} @media (max-width:640px){ section{padding:64px 0} } .section-head{max-width:760px; margin-bottom:56px} .section-head.center{margin-left:auto; margin-right:auto; text-align:center} .section-head .mono{color:var(--orange); margin-bottom:14px; display:block} .section-head p{color:var(--ink-soft); font-size:18px; margin-top:16px} .eyebrow{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ink-soft); font-size:13px; font-weight:500} .eyebrow .pulse{width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 0 rgba(232,93,44,.5); animation:pulse 1.8s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,93,44,.5)}70%{box-shadow:0 0 0 8px rgba(232,93,44,0)}100%{box-shadow:0 0 0 0 rgba(232,93,44,0)}} /* ============ GENERIC CARD ============ */ .card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px} /* ============ MARQUEE ============ */ .marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0; background:#fff; overflow:hidden} .marquee-label{font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mute); text-align:center; margin-bottom:18px} .marquee-track{display:flex; gap:48px; flex-wrap:wrap; justify-content:center; align-items:center} .marquee-track span{font-family:var(--font-display); font-weight:500; font-size:20px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:10px} .marquee-track span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--line-2)} /* ============ PROCESS (navy) ============ */ .process{background:var(--ink); color:#fff} .process h2, .process h3{color:#fff} .process .section-head p{color:#bcc5d5} .process .section-head .mono{color:var(--orange)} .step-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px} @media (max-width:980px){ .step-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .step-grid{grid-template-columns:1fr} } .step{padding:24px; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); display:flex; flex-direction:column; gap:14px; background:rgba(255,255,255,.02)} .step-num{font-family:var(--font-mono); font-size:12px; color:var(--orange)} .step h3{font-size:19px} .step p{color:#bcc5d5; font-size:14.5px} /* ============ CTA BAND ============ */ .cta-band{background:#fff; border:1px solid var(--line); border-radius:20px; padding:56px; display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; position:relative; overflow:hidden} @media (max-width:860px){ .cta-band{grid-template-columns:1fr; padding:36px} } .cta-band h2{font-size:clamp(28px,3.5vw,40px)} .cta-band p{color:var(--ink-soft); margin-top:14px; max-width:520px} .cta-band .actions{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap} .cta-band .visual{height:220px; border-radius:14px; background:linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 60%, var(--orange) 130%); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center} .cta-band .visual img{width:55%; opacity:.92; filter:drop-shadow(0 10px 30px rgba(0,0,0,.3))} /* ============ FOOTER ============ */ footer{padding:60px 0 40px; border-top:1px solid var(--line); margin-top:60px} .foot-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px} @media (max-width:780px){ .foot-grid{grid-template-columns:1fr 1fr; gap:32px} } @media (max-width:480px){ .foot-grid{grid-template-columns:1fr} } .foot h4{font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:0.1em; color:var(--mute); font-weight:500; margin-bottom:14px} .foot ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px} .foot a{color:var(--ink-soft); font-size:14.5px} .foot a:hover{color:var(--ink)} .foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--mute); font-size:13px} .slash{display:inline-block; color:var(--line-2); margin:0 8px} /* ============ PILL TAGS ============ */ .pill{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; padding:5px 10px; border-radius:999px; background:var(--paper); color:var(--ink-soft); display:inline-block} .pill.orange{background:var(--orange); color:#fff} .pill.blue{background:var(--blue-tint); color:var(--blue)} .pill.green{background:rgba(31,138,91,.12); color:var(--green)} /* ============ CODE / PANEL CHROME (shared mock styling) ============ */ .panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden} .panel-head{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--paper)} .panel-head .dots{display:flex; gap:6px} .panel-head .dots i{width:9px; height:9px; border-radius:50%; background:var(--line-2); display:block} .panel-head .url{font-family:var(--font-mono); font-size:12px; color:var(--mute); margin-left:6px} /* === site-modular/styles.css === */ /* =================================================================== Zartonai — marketing site shared styles Brand tokens mirror zai-theme.json (navy / orange / blue, warm paper) =================================================================== */ :root{ /* ===== THEME CONTRACT — mirrors zai-theme.json (the <script id="zai-theme"> block in each page). Edit these to re-brand the whole site; everything below derives from them. ===== */ --brand-color-primary:#0e1f3e; --brand-color-primary-contrast:#ffffff; --brand-color-secondary:#1e5bb8; --brand-color-accent:#e85d2c; --brand-color-background:#0e1f3e; --brand-color-surface:#ffffff; --brand-color-text:#ffffff; --brand-color-muted:#6b7891; --brand-color-border:#e6e2d8; --brand-color-success:#1f8a5b; --brand-color-warning:#e8a317; --brand-color-danger:#d63031; --brand-font-display:Space Grotesk, system-ui, sans-serif; --brand-font-body:DM Sans, system-ui, sans-serif; --brand-font-mono:"JetBrains Mono", ui-monospace, monospace; --brand-font-scale:1.25; --brand-radius-sm:4px; --brand-radius-md:8px; --brand-radius-lg:16px; --brand-radius-pill:9999px; --brand-spacing-container:72rem; --brand-spacing-section-y:5rem; --brand-spacing-gap:1.5rem; --brand-shadow-sm:0 1px 2px rgba(14,31,62,.06); --brand-shadow-md:0 1px 0 rgba(14,31,62,.04), 0 10px 30px -12px rgba(14,31,62,.18); --brand-shadow-lg:0 24px 60px -20px rgba(14,31,62,.30); /* ===== SEMANTIC TOKENS — derived from the contract above (hex = fallback) ===== */ --ink: var(--brand-color-primary, #0E1F3E); --ink-2:#1A2B4A; --ink-soft:#3a4a66; --mute: var(--brand-color-muted, #6b7891); --faint:#9aa3b4; --line: var(--brand-color-border, #E6E2D8); --line-2:#D8D3C4; --paper:#F7F4ED; --paper-2:#EFEAE0; --card: var(--brand-color-surface, #FFFFFF); --blue: var(--brand-color-secondary, #1E5BB8); --blue-deep:#0E2C66; --blue-tint:#EAF1FB; --blue-line:#DCE4F2; --orange: var(--brand-color-accent, #E85D2C); --orange-deep:#cf4c1d; --orange-tint:#FCEFE7; --green: var(--brand-color-success, #1F8A5B); --amber: var(--brand-color-warning, #E8A317); --red: var(--brand-color-danger, #D63031); --font-display: var(--brand-font-display, 'Space Grotesk', system-ui, sans-serif); --font-body: var(--brand-font-body, 'DM Sans', system-ui, sans-serif); --font-mono: var(--brand-font-mono, 'JetBrains Mono', ui-monospace, monospace); --radius:14px; --radius-lg:18px; --shadow: var(--brand-shadow-md, 0 1px 0 rgba(14,31,62,.04), 0 10px 30px -12px rgba(14,31,62,.18)); --shadow-lg: var(--brand-shadow-lg, 0 24px 60px -20px rgba(14,31,62,.30)); } *{box-sizing:border-box} html{scroll-behavior:smooth} html,body{margin:0;padding:0} body{ font-family:var(--font-body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; font-size:16px; line-height:1.55; } h1,h2,h3,h4{font-family:var(--font-display); letter-spacing:-0.02em; color:var(--ink); margin:0; text-wrap:balance} h1{font-size:clamp(40px, 5.6vw, 72px); line-height:1.02; font-weight:600} h2{font-size:clamp(29px, 3.5vw, 46px); line-height:1.07; font-weight:600} h3{font-size:22px; font-weight:600; line-height:1.2} p{margin:0; text-wrap:pretty} a{color:inherit; text-decoration:none} img{display:block; max-width:100%} ::selection{background:rgba(232,93,44,.18)} .mono{font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; text-transform:uppercase} .container{max-width:1240px; margin:0 auto; padding:0 28px} .narrow{max-width:920px} @media (max-width:640px){ .container{padding:0 20px} } .accent{color:var(--orange)} .accent-blue{color:var(--blue)} .italic{font-style:italic; font-weight:500} /* ============ BUTTONS ============ */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; font-family:var(--font-body); font-weight:500; font-size:15px; border:1px solid transparent; cursor:pointer; transition:all .15s ease; white-space:nowrap; } .btn-ghost{color:var(--ink); background:transparent} .btn-ghost:hover{background:rgba(14,31,62,.06)} .btn-primary{background:var(--ink); color:#fff} .btn-primary:hover{background:#000} .btn-outline{border-color:var(--line-2); color:var(--ink); background:transparent} .btn-outline:hover{border-color:var(--ink); background:#fff} .btn-orange{background:var(--orange); color:#fff} .btn-orange:hover{background:var(--orange-deep)} .btn-lg{padding:14px 24px; font-size:16px} /* ============ NAV ============ */ .nav-wrap{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:rgba(247,244,237,.82); border-bottom:1px solid transparent; transition:border-color .2s} .nav-wrap.scrolled{border-bottom-color:var(--line)} .nav{display:flex; align-items:center; justify-content:space-between; height:72px} .brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-0.01em} .brand img{width:32px; height:32px; display:block} .brand .dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--orange); transform:translateY(-10px)} .nav-links{display:flex; align-items:center; gap:34px} .nav-links a{color:var(--ink-soft); font-size:15px; font-weight:500; position:relative; padding:6px 0} .nav-links a:hover{color:var(--ink)} .nav-links a.active{color:var(--ink)} .nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--orange); border-radius:2px} .nav-cta{display:flex; align-items:center; gap:10px} .menu-btn{display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line-2); background:transparent; align-items:center; justify-content:center; cursor:pointer; padding:0} .menu-btn span{display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition:transform .2s} .menu-btn span::before,.menu-btn span::after{content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink); transition:transform .2s} .menu-btn span::before{top:-5px} .menu-btn span::after{top:5px} .menu-btn.open span{background:transparent} .menu-btn.open span::before{transform:translateY(5px) rotate(45deg)} .menu-btn.open span::after{transform:translateY(-5px) rotate(-45deg)} .mobile-menu{display:none; position:fixed; inset:72px 0 0 0; z-index:40; background:var(--paper); padding:20px 28px 40px; flex-direction:column; border-top:1px solid var(--line); overflow-y:auto} .mobile-menu a{display:block; padding:18px 0; font-family:var(--font-display); font-weight:500; font-size:22px; color:var(--ink); border-bottom:1px solid var(--line)} .mobile-menu a:last-of-type{border-bottom:0} .mobile-menu .actions{display:flex; gap:10px; margin-top:24px; flex-direction:column} .mobile-menu.open{display:flex} @media (max-width: 940px){ .nav-links, .nav-cta{display:none} .menu-btn{display:flex} } /* ============ SECTIONS ============ */ section{padding:96px 0} @media (max-width:640px){ section{padding:64px 0} } .section-head{max-width:760px; margin-bottom:56px} .section-head.center{margin-left:auto; margin-right:auto; text-align:center} .section-head .mono{color:var(--orange); margin-bottom:14px; display:block} .section-head p{color:var(--ink-soft); font-size:18px; margin-top:16px} .eyebrow{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ink-soft); font-size:13px; font-weight:500} .eyebrow .pulse{width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 0 rgba(232,93,44,.5); animation:pulse 1.8s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,93,44,.5)}70%{box-shadow:0 0 0 8px rgba(232,93,44,0)}100%{box-shadow:0 0 0 0 rgba(232,93,44,0)}} /* ============ GENERIC CARD ============ */ .card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px} /* ============ MARQUEE ============ */ .marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0; background:#fff; overflow:hidden} .marquee-label{font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mute); text-align:center; margin-bottom:18px} .marquee-track{display:flex; gap:48px; flex-wrap:wrap; justify-content:center; align-items:center} .marquee-track span{font-family:var(--font-display); font-weight:500; font-size:20px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:10px} .marquee-track span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--line-2)} /* ============ PROCESS (navy) ============ */ .process{background:var(--ink); color:#fff} .process h2, .process h3{color:#fff} .process .section-head p{color:#bcc5d5} .process .section-head .mono{color:var(--orange)} .step-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px} @media (max-width:980px){ .step-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .step-grid{grid-template-columns:1fr} } .step{padding:24px; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); display:flex; flex-direction:column; gap:14px; background:rgba(255,255,255,.02)} .step-num{font-family:var(--font-mono); font-size:12px; color:var(--orange)} .step h3{font-size:19px} .step p{color:#bcc5d5; font-size:14.5px} /* ============ CTA BAND ============ */ .cta-band{background:#fff; border:1px solid var(--line); border-radius:20px; padding:56px; display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; position:relative; overflow:hidden} @media (max-width:860px){ .cta-band{grid-template-columns:1fr; padding:36px} } .cta-band h2{font-size:clamp(28px,3.5vw,40px)} .cta-band p{color:var(--ink-soft); margin-top:14px; max-width:520px} .cta-band .actions{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap} .cta-band .visual{height:220px; border-radius:14px; background:linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 60%, var(--orange) 130%); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center} .cta-band .visual img{width:55%; opacity:.92; filter:drop-shadow(0 10px 30px rgba(0,0,0,.3))} /* ============ FOOTER ============ */ footer{padding:60px 0 40px; border-top:1px solid var(--line); margin-top:60px} .foot-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px} @media (max-width:780px){ .foot-grid{grid-template-columns:1fr 1fr; gap:32px} } @media (max-width:480px){ .foot-grid{grid-template-columns:1fr} } .foot h4{font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:0.1em; color:var(--mute); font-weight:500; margin-bottom:14px} .foot ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px} .foot a{color:var(--ink-soft); font-size:14.5px} .foot a:hover{color:var(--ink)} .foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--mute); font-size:13px} .slash{display:inline-block; color:var(--line-2); margin:0 8px} /* ============ PILL TAGS ============ */ .pill{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; padding:5px 10px; border-radius:999px; background:var(--paper); color:var(--ink-soft); display:inline-block} .pill.orange{background:var(--orange); color:#fff} .pill.blue{background:var(--blue-tint); color:var(--blue)} .pill.green{background:rgba(31,138,91,.12); color:var(--green)} /* ============ CODE / PANEL CHROME (shared mock styling) ============ */ .panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden} .panel-head{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--paper)} .panel-head .dots{display:flex; gap:6px} .panel-head .dots i{width:9px; height:9px; border-radius:50%; background:var(--line-2); display:block} .panel-head .url{font-family:var(--font-mono); font-size:12px; color:var(--mute); margin-left:6px} /* === site-modular/styles.css === */ /* =================================================================== Zartonai — marketing site shared styles Brand tokens mirror zai-theme.json (navy / orange / blue, warm paper) =================================================================== */ :root{ /* ===== THEME CONTRACT — mirrors zai-theme.json (the <script id="zai-theme"> block in each page). Edit these to re-brand the whole site; everything below derives from them. ===== */ --brand-color-primary:#0e1f3e; --brand-color-primary-contrast:#ffffff; --brand-color-secondary:#1e5bb8; --brand-color-accent:#e85d2c; --brand-color-background:#0e1f3e; --brand-color-surface:#ffffff; --brand-color-text:#ffffff; --brand-color-muted:#6b7891; --brand-color-border:#e6e2d8; --brand-color-success:#1f8a5b; --brand-color-warning:#e8a317; --brand-color-danger:#d63031; --brand-font-display:Space Grotesk, system-ui, sans-serif; --brand-font-body:DM Sans, system-ui, sans-serif; --brand-font-mono:"JetBrains Mono", ui-monospace, monospace; --brand-font-scale:1.25; --brand-radius-sm:4px; --brand-radius-md:8px; --brand-radius-lg:16px; --brand-radius-pill:9999px; --brand-spacing-container:72rem; --brand-spacing-section-y:5rem; --brand-spacing-gap:1.5rem; --brand-shadow-sm:0 1px 2px rgba(14,31,62,.06); --brand-shadow-md:0 1px 0 rgba(14,31,62,.04), 0 10px 30px -12px rgba(14,31,62,.18); --brand-shadow-lg:0 24px 60px -20px rgba(14,31,62,.30); /* ===== SEMANTIC TOKENS — derived from the contract above (hex = fallback) ===== */ --ink: var(--brand-color-primary, #0E1F3E); --ink-2:#1A2B4A; --ink-soft:#3a4a66; --mute: var(--brand-color-muted, #6b7891); --faint:#9aa3b4; --line: var(--brand-color-border, #E6E2D8); --line-2:#D8D3C4; --paper:#F7F4ED; --paper-2:#EFEAE0; --card: var(--brand-color-surface, #FFFFFF); --blue: var(--brand-color-secondary, #1E5BB8); --blue-deep:#0E2C66; --blue-tint:#EAF1FB; --blue-line:#DCE4F2; --orange: var(--brand-color-accent, #E85D2C); --orange-deep:#cf4c1d; --orange-tint:#FCEFE7; --green: var(--brand-color-success, #1F8A5B); --amber: var(--brand-color-warning, #E8A317); --red: var(--brand-color-danger, #D63031); --font-display: var(--brand-font-display, 'Space Grotesk', system-ui, sans-serif); --font-body: var(--brand-font-body, 'DM Sans', system-ui, sans-serif); --font-mono: var(--brand-font-mono, 'JetBrains Mono', ui-monospace, monospace); --radius:14px; --radius-lg:18px; --shadow: var(--brand-shadow-md, 0 1px 0 rgba(14,31,62,.04), 0 10px 30px -12px rgba(14,31,62,.18)); --shadow-lg: var(--brand-shadow-lg, 0 24px 60px -20px rgba(14,31,62,.30)); } *{box-sizing:border-box} html{scroll-behavior:smooth} html,body{margin:0;padding:0} body{ font-family:var(--font-body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; font-size:16px; line-height:1.55; } h1,h2,h3,h4{font-family:var(--font-display); letter-spacing:-0.02em; color:var(--ink); margin:0; text-wrap:balance} h1{font-size:clamp(40px, 5.6vw, 72px); line-height:1.02; font-weight:600} h2{font-size:clamp(29px, 3.5vw, 46px); line-height:1.07; font-weight:600} h3{font-size:22px; font-weight:600; line-height:1.2} p{margin:0; text-wrap:pretty} a{color:inherit; text-decoration:none} img{display:block; max-width:100%} ::selection{background:rgba(232,93,44,.18)} .mono{font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; text-transform:uppercase} .container{max-width:1240px; margin:0 auto; padding:0 28px} .narrow{max-width:920px} @media (max-width:640px){ .container{padding:0 20px} } .accent{color:var(--orange)} .accent-blue{color:var(--blue)} .italic{font-style:italic; font-weight:500} /* ============ BUTTONS ============ */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; font-family:var(--font-body); font-weight:500; font-size:15px; border:1px solid transparent; cursor:pointer; transition:all .15s ease; white-space:nowrap; } .btn-ghost{color:var(--ink); background:transparent} .btn-ghost:hover{background:rgba(14,31,62,.06)} .btn-primary{background:var(--ink); color:#fff} .btn-primary:hover{background:#000} .btn-outline{border-color:var(--line-2); color:var(--ink); background:transparent} .btn-outline:hover{border-color:var(--ink); background:#fff} .btn-orange{background:var(--orange); color:#fff} .btn-orange:hover{background:var(--orange-deep)} .btn-lg{padding:14px 24px; font-size:16px} /* ============ NAV ============ */ .nav-wrap{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:rgba(247,244,237,.82); border-bottom:1px solid transparent; transition:border-color .2s} .nav-wrap.scrolled{border-bottom-color:var(--line)} .nav{display:flex; align-items:center; justify-content:space-between; height:72px} .brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-0.01em} .brand img{width:32px; height:32px; display:block} .brand .dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--orange); transform:translateY(-10px)} .nav-links{display:flex; align-items:center; gap:34px} .nav-links a{color:var(--ink-soft); font-size:15px; font-weight:500; position:relative; padding:6px 0} .nav-links a:hover{color:var(--ink)} .nav-links a.active{color:var(--ink)} .nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--orange); border-radius:2px} .nav-cta{display:flex; align-items:center; gap:10px} .menu-btn{display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line-2); background:transparent; align-items:center; justify-content:center; cursor:pointer; padding:0} .menu-btn span{display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition:transform .2s} .menu-btn span::before,.menu-btn span::after{content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink); transition:transform .2s} .menu-btn span::before{top:-5px} .menu-btn span::after{top:5px} .menu-btn.open span{background:transparent} .menu-btn.open span::before{transform:translateY(5px) rotate(45deg)} .menu-btn.open span::after{transform:translateY(-5px) rotate(-45deg)} .mobile-menu{display:none; position:fixed; inset:72px 0 0 0; z-index:40; background:var(--paper); padding:20px 28px 40px; flex-direction:column; border-top:1px solid var(--line); overflow-y:auto} .mobile-menu a{display:block; padding:18px 0; font-family:var(--font-display); font-weight:500; font-size:22px; color:var(--ink); border-bottom:1px solid var(--line)} .mobile-menu a:last-of-type{border-bottom:0} .mobile-menu .actions{display:flex; gap:10px; margin-top:24px; flex-direction:column} .mobile-menu.open{display:flex} @media (max-width: 940px){ .nav-links, .nav-cta{display:none} .menu-btn{display:flex} } /* ============ SECTIONS ============ */ section{padding:96px 0} @media (max-width:640px){ section{padding:64px 0} } .section-head{max-width:760px; margin-bottom:56px} .section-head.center{margin-left:auto; margin-right:auto; text-align:center} .section-head .mono{color:var(--orange); margin-bottom:14px; display:block} .section-head p{color:var(--ink-soft); font-size:18px; margin-top:16px} .eyebrow{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ink-soft); font-size:13px; font-weight:500} .eyebrow .pulse{width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 0 rgba(232,93,44,.5); animation:pulse 1.8s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,93,44,.5)}70%{box-shadow:0 0 0 8px rgba(232,93,44,0)}100%{box-shadow:0 0 0 0 rgba(232,93,44,0)}} /* ============ GENERIC CARD ============ */ .card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px} /* ============ MARQUEE ============ */ .marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0; background:#fff; overflow:hidden} .marquee-label{font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mute); text-align:center; margin-bottom:18px} .marquee-track{display:flex; gap:48px; flex-wrap:wrap; justify-content:center; align-items:center} .marquee-track span{font-family:var(--font-display); font-weight:500; font-size:20px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:10px} .marquee-track span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--line-2)} /* ============ PROCESS (navy) ============ */ .process{background:var(--ink); color:#fff} .process h2, .process h3{color:#fff} .process .section-head p{color:#bcc5d5} .process .section-head .mono{color:var(--orange)} .step-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px} @media (max-width:980px){ .step-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .step-grid{grid-template-columns:1fr} } .step{padding:24px; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); display:flex; flex-direction:column; gap:14px; background:rgba(255,255,255,.02)} .step-num{font-family:var(--font-mono); font-size:12px; color:var(--orange)} .step h3{font-size:19px} .step p{color:#bcc5d5; font-size:14.5px} /* ============ CTA BAND ============ */ .cta-band{background:#fff; border:1px solid var(--line); border-radius:20px; padding:56px; display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; position:relative; overflow:hidden} @media (max-width:860px){ .cta-band{grid-template-columns:1fr; padding:36px} } .cta-band h2{font-size:clamp(28px,3.5vw,40px)} .cta-band p{color:var(--ink-soft); margin-top:14px; max-width:520px} .cta-band .actions{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap} .cta-band .visual{height:220px; border-radius:14px; background:linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 60%, var(--orange) 130%); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center} .cta-band .visual img{width:55%; opacity:.92; filter:drop-shadow(0 10px 30px rgba(0,0,0,.3))} /* ============ FOOTER ============ */ footer{padding:60px 0 40px; border-top:1px solid var(--line); margin-top:60px} .foot-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px} @media (max-width:780px){ .foot-grid{grid-template-columns:1fr 1fr; gap:32px} } @media (max-width:480px){ .foot-grid{grid-template-columns:1fr} } .foot h4{font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:0.1em; color:var(--mute); font-weight:500; margin-bottom:14px} .foot ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px} .foot a{color:var(--ink-soft); font-size:14.5px} .foot a:hover{color:var(--ink)} .foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--mute); font-size:13px} .slash{display:inline-block; color:var(--line-2); margin:0 8px} /* ============ PILL TAGS ============ */ .pill{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; padding:5px 10px; border-radius:999px; background:var(--paper); color:var(--ink-soft); display:inline-block} .pill.orange{background:var(--orange); color:#fff} .pill.blue{background:var(--blue-tint); color:var(--blue)} .pill.green{background:rgba(31,138,91,.12); color:var(--green)} /* ============ CODE / PANEL CHROME (shared mock styling) ============ */ .panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden} .panel-head{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--paper)} .panel-head .dots{display:flex; gap:6px} .panel-head .dots i{width:9px; height:9px; border-radius:50%; background:var(--line-2); display:block} .panel-head .url{font-family:var(--font-mono); font-size:12px; color:var(--mute); margin-left:6px}
Pricing
A flat plan. Usage on top. No surprises.
Every plan includes a monthly credit allowance. Go over and you're billed pay-as-you-go — but only up to the cap you set. Hit the cap and overages pause, not your site.
Solo
One website for an owner-operator testing the waters.
Included each month- 1 website · 1 editor
- 2,000 AI credits
- 1 site crawl · 1 design import
- Managed hosting + SSL
- Community support
Growth
For a growing service business with steady publishing.
Included each month- 3 websites · 5 editors
- 15,000 AI credits
- 5 site crawls · 5 design imports
- Staging + one-click rollback
- Automation flows
- Priority email & chat support
Scale
For agencies running many client sites from one console.
Included each month- 15 websites · unlimited editors
- 60,000 AI credits
- 25 site crawls · 25 design imports
- Roles, tenants & client handoff
- White-label publishing
- Priority support + onboarding
Enterprise & SLA
Volume credit pricing, a named specialist, guaranteed response times, custom integrations, SSO, and quarterly reviews. For teams where the site has to just work.
One meter. Everything you use, at a clear rate.
AI calls, site crawls, and design imports all draw from a single credit balance. Burn through your monthly allowance and you simply pay for what's extra — never more than your cap.
Your overage cap, your call
Set a hard ceiling per workspace. We alert early and stop before it's ever exceeded.
Pricing, answered.
What exactly is a credit?+
What happens when I hit my cap?+
Do unused credits roll over?+
Can I change plans or my cap anytime?+
How does billing work for agencies?+
Is there a free trial?+
Start free. Cap your spend. Scale when ready.
Run a design import or crawl your site on the house, set a cap you're comfortable with, and only pay for what you actually use.
pricing
1
2026-06-01 15:47:00
Rostom Sahakian
/* === site-modular/styles.css === */ /* =================================================================== Zartonai — marketing site shared styles Brand tokens mirror zai-theme.json (navy / orange / blue, warm paper) =================================================================== */ :root{ /* ===== THEME CONTRACT — mirrors zai-theme.json (the <script id="zai-theme"> block in each page). Edit these to re-brand the whole site; everything below derives from them. ===== */ --brand-color-primary:#0e1f3e; --brand-color-primary-contrast:#ffffff; --brand-color-secondary:#1e5bb8; --brand-color-accent:#e85d2c; --brand-color-background:#0e1f3e; --brand-color-surface:#ffffff; --brand-color-text:#ffffff; --brand-color-muted:#6b7891; --brand-color-border:#e6e2d8; --brand-color-success:#1f8a5b; --brand-color-warning:#e8a317; --brand-color-danger:#d63031; --brand-font-display:Space Grotesk, system-ui, sans-serif; --brand-font-body:DM Sans, system-ui, sans-serif; --brand-font-mono:"JetBrains Mono", ui-monospace, monospace; --brand-font-scale:1.25; --brand-radius-sm:4px; --brand-radius-md:8px; --brand-radius-lg:16px; --brand-radius-pill:9999px; --brand-spacing-container:72rem; --brand-spacing-section-y:5rem; --brand-spacing-gap:1.5rem; --brand-shadow-sm:0 1px 2px rgba(14,31,62,.06); --brand-shadow-md:0 1px 0 rgba(14,31,62,.04), 0 10px 30px -12px rgba(14,31,62,.18); --brand-shadow-lg:0 24px 60px -20px rgba(14,31,62,.30); /* ===== SEMANTIC TOKENS — derived from the contract above (hex = fallback) ===== */ --ink: var(--brand-color-primary, #0E1F3E); --ink-2:#1A2B4A; --ink-soft:#3a4a66; --mute: var(--brand-color-muted, #6b7891); --faint:#9aa3b4; --line: var(--brand-color-border, #E6E2D8); --line-2:#D8D3C4; --paper:#F7F4ED; --paper-2:#EFEAE0; --card: var(--brand-color-surface, #FFFFFF); --blue: var(--brand-color-secondary, #1E5BB8); --blue-deep:#0E2C66; --blue-tint:#EAF1FB; --blue-line:#DCE4F2; --orange: var(--brand-color-accent, #E85D2C); --orange-deep:#cf4c1d; --orange-tint:#FCEFE7; --green: var(--brand-color-success, #1F8A5B); --amber: var(--brand-color-warning, #E8A317); --red: var(--brand-color-danger, #D63031); --font-display: var(--brand-font-display, 'Space Grotesk', system-ui, sans-serif); --font-body: var(--brand-font-body, 'DM Sans', system-ui, sans-serif); --font-mono: var(--brand-font-mono, 'JetBrains Mono', ui-monospace, monospace); --radius:14px; --radius-lg:18px; --shadow: var(--brand-shadow-md, 0 1px 0 rgba(14,31,62,.04), 0 10px 30px -12px rgba(14,31,62,.18)); --shadow-lg: var(--brand-shadow-lg, 0 24px 60px -20px rgba(14,31,62,.30)); } *{box-sizing:border-box} html{scroll-behavior:smooth} html,body{margin:0;padding:0} body{ font-family:var(--font-body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; font-size:16px; line-height:1.55; } h1,h2,h3,h4{font-family:var(--font-display); letter-spacing:-0.02em; color:var(--ink); margin:0; text-wrap:balance} h1{font-size:clamp(40px, 5.6vw, 72px); line-height:1.02; font-weight:600} h2{font-size:clamp(29px, 3.5vw, 46px); line-height:1.07; font-weight:600} h3{font-size:22px; font-weight:600; line-height:1.2} p{margin:0; text-wrap:pretty} a{color:inherit; text-decoration:none} img{display:block; max-width:100%} ::selection{background:rgba(232,93,44,.18)} .mono{font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; text-transform:uppercase} .container{max-width:1240px; margin:0 auto; padding:0 28px} .narrow{max-width:920px} @media (max-width:640px){ .container{padding:0 20px} } .accent{color:var(--orange)} .accent-blue{color:var(--blue)} .italic{font-style:italic; font-weight:500} /* ============ BUTTONS ============ */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; font-family:var(--font-body); font-weight:500; font-size:15px; border:1px solid transparent; cursor:pointer; transition:all .15s ease; white-space:nowrap; } .btn-ghost{color:var(--ink); background:transparent} .btn-ghost:hover{background:rgba(14,31,62,.06)} .btn-primary{background:var(--ink); color:#fff} .btn-primary:hover{background:#000} .btn-outline{border-color:var(--line-2); color:var(--ink); background:transparent} .btn-outline:hover{border-color:var(--ink); background:#fff} .btn-orange{background:var(--orange); color:#fff} .btn-orange:hover{background:var(--orange-deep)} .btn-lg{padding:14px 24px; font-size:16px} /* ============ NAV ============ */ .nav-wrap{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:rgba(247,244,237,.82); border-bottom:1px solid transparent; transition:border-color .2s} .nav-wrap.scrolled{border-bottom-color:var(--line)} .nav{display:flex; align-items:center; justify-content:space-between; height:72px} .brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-0.01em} .brand img{width:32px; height:32px; display:block} .brand .dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--orange); transform:translateY(-10px)} .nav-links{display:flex; align-items:center; gap:34px} .nav-links a{color:var(--ink-soft); font-size:15px; font-weight:500; position:relative; padding:6px 0} .nav-links a:hover{color:var(--ink)} .nav-links a.active{color:var(--ink)} .nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--orange); border-radius:2px} .nav-cta{display:flex; align-items:center; gap:10px} .menu-btn{display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line-2); background:transparent; align-items:center; justify-content:center; cursor:pointer; padding:0} .menu-btn span{display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition:transform .2s} .menu-btn span::before,.menu-btn span::after{content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink); transition:transform .2s} .menu-btn span::before{top:-5px} .menu-btn span::after{top:5px} .menu-btn.open span{background:transparent} .menu-btn.open span::before{transform:translateY(5px) rotate(45deg)} .menu-btn.open span::after{transform:translateY(-5px) rotate(-45deg)} .mobile-menu{display:none; position:fixed; inset:72px 0 0 0; z-index:40; background:var(--paper); padding:20px 28px 40px; flex-direction:column; border-top:1px solid var(--line); overflow-y:auto} .mobile-menu a{display:block; padding:18px 0; font-family:var(--font-display); font-weight:500; font-size:22px; color:var(--ink); border-bottom:1px solid var(--line)} .mobile-menu a:last-of-type{border-bottom:0} .mobile-menu .actions{display:flex; gap:10px; margin-top:24px; flex-direction:column} .mobile-menu.open{display:flex} @media (max-width: 940px){ .nav-links, .nav-cta{display:none} .menu-btn{display:flex} } /* ============ SECTIONS ============ */ section{padding:96px 0} @media (max-width:640px){ section{padding:64px 0} } .section-head{max-width:760px; margin-bottom:56px} .section-head.center{margin-left:auto; margin-right:auto; text-align:center} .section-head .mono{color:var(--orange); margin-bottom:14px; display:block} .section-head p{color:var(--ink-soft); font-size:18px; margin-top:16px} .eyebrow{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ink-soft); font-size:13px; font-weight:500} .eyebrow .pulse{width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 0 rgba(232,93,44,.5); animation:pulse 1.8s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,93,44,.5)}70%{box-shadow:0 0 0 8px rgba(232,93,44,0)}100%{box-shadow:0 0 0 0 rgba(232,93,44,0)}} /* ============ GENERIC CARD ============ */ .card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px} /* ============ MARQUEE ============ */ .marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0; background:#fff; overflow:hidden} .marquee-label{font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mute); text-align:center; margin-bottom:18px} .marquee-track{display:flex; gap:48px; flex-wrap:wrap; justify-content:center; align-items:center} .marquee-track span{font-family:var(--font-display); font-weight:500; font-size:20px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:10px} .marquee-track span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--line-2)} /* ============ PROCESS (navy) ============ */ .process{background:var(--ink); color:#fff} .process h2, .process h3{color:#fff} .process .section-head p{color:#bcc5d5} .process .section-head .mono{color:var(--orange)} .step-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px} @media (max-width:980px){ .step-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .step-grid{grid-template-columns:1fr} } .step{padding:24px; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); display:flex; flex-direction:column; gap:14px; background:rgba(255,255,255,.02)} .step-num{font-family:var(--font-mono); font-size:12px; color:var(--orange)} .step h3{font-size:19px} .step p{color:#bcc5d5; font-size:14.5px} /* ============ CTA BAND ============ */ .cta-band{background:#fff; border:1px solid var(--line); border-radius:20px; padding:56px; display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; position:relative; overflow:hidden} @media (max-width:860px){ .cta-band{grid-template-columns:1fr; padding:36px} } .cta-band h2{font-size:clamp(28px,3.5vw,40px)} .cta-band p{color:var(--ink-soft); margin-top:14px; max-width:520px} .cta-band .actions{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap} .cta-band .visual{height:220px; border-radius:14px; background:linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 60%, var(--orange) 130%); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center} .cta-band .visual img{width:55%; opacity:.92; filter:drop-shadow(0 10px 30px rgba(0,0,0,.3))} /* ============ FOOTER ============ */ footer{padding:60px 0 40px; border-top:1px solid var(--line); margin-top:60px} .foot-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px} @media (max-width:780px){ .foot-grid{grid-template-columns:1fr 1fr; gap:32px} } @media (max-width:480px){ .foot-grid{grid-template-columns:1fr} } .foot h4{font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:0.1em; color:var(--mute); font-weight:500; margin-bottom:14px} .foot ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px} .foot a{color:var(--ink-soft); font-size:14.5px} .foot a:hover{color:var(--ink)} .foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--mute); font-size:13px} .slash{display:inline-block; color:var(--line-2); margin:0 8px} /* ============ PILL TAGS ============ */ .pill{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; padding:5px 10px; border-radius:999px; background:var(--paper); color:var(--ink-soft); display:inline-block} .pill.orange{background:var(--orange); color:#fff} .pill.blue{background:var(--blue-tint); color:var(--blue)} .pill.green{background:rgba(31,138,91,.12); color:var(--green)} /* ============ CODE / PANEL CHROME (shared mock styling) ============ */ .panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden} .panel-head{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--paper)} .panel-head .dots{display:flex; gap:6px} .panel-head .dots i{width:9px; height:9px; border-radius:50%; background:var(--line-2); display:block} .panel-head .url{font-family:var(--font-mono); font-size:12px; color:var(--mute); margin-left:6px} /* === site-modular/styles.css === */ /* =================================================================== Zartonai — marketing site shared styles Brand tokens mirror zai-theme.json (navy / orange / blue, warm paper) =================================================================== */ :root{ /* ===== THEME CONTRACT — mirrors zai-theme.json (the <script id="zai-theme"> block in each page). Edit these to re-brand the whole site; everything below derives from them. ===== */ --brand-color-primary:#0e1f3e; --brand-color-primary-contrast:#ffffff; --brand-color-secondary:#1e5bb8; --brand-color-accent:#e85d2c; --brand-color-background:#0e1f3e; --brand-color-surface:#ffffff; --brand-color-text:#ffffff; --brand-color-muted:#6b7891; --brand-color-border:#e6e2d8; --brand-color-success:#1f8a5b; --brand-color-warning:#e8a317; --brand-color-danger:#d63031; --brand-font-display:Space Grotesk, system-ui, sans-serif; --brand-font-body:DM Sans, system-ui, sans-serif; --brand-font-mono:"JetBrains Mono", ui-monospace, monospace; --brand-font-scale:1.25; --brand-radius-sm:4px; --brand-radius-md:8px; --brand-radius-lg:16px; --brand-radius-pill:9999px; --brand-spacing-container:72rem; --brand-spacing-section-y:5rem; --brand-spacing-gap:1.5rem; --brand-shadow-sm:0 1px 2px rgba(14,31,62,.06); --brand-shadow-md:0 1px 0 rgba(14,31,62,.04), 0 10px 30px -12px rgba(14,31,62,.18); --brand-shadow-lg:0 24px 60px -20px rgba(14,31,62,.30); /* ===== SEMANTIC TOKENS — derived from the contract above (hex = fallback) ===== */ --ink: var(--brand-color-primary, #0E1F3E); --ink-2:#1A2B4A; --ink-soft:#3a4a66; --mute: var(--brand-color-muted, #6b7891); --faint:#9aa3b4; --line: var(--brand-color-border, #E6E2D8); --line-2:#D8D3C4; --paper:#F7F4ED; --paper-2:#EFEAE0; --card: var(--brand-color-surface, #FFFFFF); --blue: var(--brand-color-secondary, #1E5BB8); --blue-deep:#0E2C66; --blue-tint:#EAF1FB; --blue-line:#DCE4F2; --orange: var(--brand-color-accent, #E85D2C); --orange-deep:#cf4c1d; --orange-tint:#FCEFE7; --green: var(--brand-color-success, #1F8A5B); --amber: var(--brand-color-warning, #E8A317); --red: var(--brand-color-danger, #D63031); --font-display: var(--brand-font-display, 'Space Grotesk', system-ui, sans-serif); --font-body: var(--brand-font-body, 'DM Sans', system-ui, sans-serif); --font-mono: var(--brand-font-mono, 'JetBrains Mono', ui-monospace, monospace); --radius:14px; --radius-lg:18px; --shadow: var(--brand-shadow-md, 0 1px 0 rgba(14,31,62,.04), 0 10px 30px -12px rgba(14,31,62,.18)); --shadow-lg: var(--brand-shadow-lg, 0 24px 60px -20px rgba(14,31,62,.30)); } *{box-sizing:border-box} html{scroll-behavior:smooth} html,body{margin:0;padding:0} body{ font-family:var(--font-body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; font-size:16px; line-height:1.55; } h1,h2,h3,h4{font-family:var(--font-display); letter-spacing:-0.02em; color:var(--ink); margin:0; text-wrap:balance} h1{font-size:clamp(40px, 5.6vw, 72px); line-height:1.02; font-weight:600} h2{font-size:clamp(29px, 3.5vw, 46px); line-height:1.07; font-weight:600} h3{font-size:22px; font-weight:600; line-height:1.2} p{margin:0; text-wrap:pretty} a{color:inherit; text-decoration:none} img{display:block; max-width:100%} ::selection{background:rgba(232,93,44,.18)} .mono{font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; text-transform:uppercase} .container{max-width:1240px; margin:0 auto; padding:0 28px} .narrow{max-width:920px} @media (max-width:640px){ .container{padding:0 20px} } .accent{color:var(--orange)} .accent-blue{color:var(--blue)} .italic{font-style:italic; font-weight:500} /* ============ BUTTONS ============ */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; font-family:var(--font-body); font-weight:500; font-size:15px; border:1px solid transparent; cursor:pointer; transition:all .15s ease; white-space:nowrap; } .btn-ghost{color:var(--ink); background:transparent} .btn-ghost:hover{background:rgba(14,31,62,.06)} .btn-primary{background:var(--ink); color:#fff} .btn-primary:hover{background:#000} .btn-outline{border-color:var(--line-2); color:var(--ink); background:transparent} .btn-outline:hover{border-color:var(--ink); background:#fff} .btn-orange{background:var(--orange); color:#fff} .btn-orange:hover{background:var(--orange-deep)} .btn-lg{padding:14px 24px; font-size:16px} /* ============ NAV ============ */ .nav-wrap{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:rgba(247,244,237,.82); border-bottom:1px solid transparent; transition:border-color .2s} .nav-wrap.scrolled{border-bottom-color:var(--line)} .nav{display:flex; align-items:center; justify-content:space-between; height:72px} .brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-0.01em} .brand img{width:32px; height:32px; display:block} .brand .dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--orange); transform:translateY(-10px)} .nav-links{display:flex; align-items:center; gap:34px} .nav-links a{color:var(--ink-soft); font-size:15px; font-weight:500; position:relative; padding:6px 0} .nav-links a:hover{color:var(--ink)} .nav-links a.active{color:var(--ink)} .nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--orange); border-radius:2px} .nav-cta{display:flex; align-items:center; gap:10px} .menu-btn{display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line-2); background:transparent; align-items:center; justify-content:center; cursor:pointer; padding:0} .menu-btn span{display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition:transform .2s} .menu-btn span::before,.menu-btn span::after{content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink); transition:transform .2s} .menu-btn span::before{top:-5px} .menu-btn span::after{top:5px} .menu-btn.open span{background:transparent} .menu-btn.open span::before{transform:translateY(5px) rotate(45deg)} .menu-btn.open span::after{transform:translateY(-5px) rotate(-45deg)} .mobile-menu{display:none; position:fixed; inset:72px 0 0 0; z-index:40; background:var(--paper); padding:20px 28px 40px; flex-direction:column; border-top:1px solid var(--line); overflow-y:auto} .mobile-menu a{display:block; padding:18px 0; font-family:var(--font-display); font-weight:500; font-size:22px; color:var(--ink); border-bottom:1px solid var(--line)} .mobile-menu a:last-of-type{border-bottom:0} .mobile-menu .actions{display:flex; gap:10px; margin-top:24px; flex-direction:column} .mobile-menu.open{display:flex} @media (max-width: 940px){ .nav-links, .nav-cta{display:none} .menu-btn{display:flex} } /* ============ SECTIONS ============ */ section{padding:96px 0} @media (max-width:640px){ section{padding:64px 0} } .section-head{max-width:760px; margin-bottom:56px} .section-head.center{margin-left:auto; margin-right:auto; text-align:center} .section-head .mono{color:var(--orange); margin-bottom:14px; display:block} .section-head p{color:var(--ink-soft); font-size:18px; margin-top:16px} .eyebrow{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ink-soft); font-size:13px; font-weight:500} .eyebrow .pulse{width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 0 rgba(232,93,44,.5); animation:pulse 1.8s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,93,44,.5)}70%{box-shadow:0 0 0 8px rgba(232,93,44,0)}100%{box-shadow:0 0 0 0 rgba(232,93,44,0)}} /* ============ GENERIC CARD ============ */ .card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px} /* ============ MARQUEE ============ */ .marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0; background:#fff; overflow:hidden} .marquee-label{font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mute); text-align:center; margin-bottom:18px} .marquee-track{display:flex; gap:48px; flex-wrap:wrap; justify-content:center; align-items:center} .marquee-track span{font-family:var(--font-display); font-weight:500; font-size:20px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:10px} .marquee-track span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--line-2)} /* ============ PROCESS (navy) ============ */ .process{background:var(--ink); color:#fff} .process h2, .process h3{color:#fff} .process .section-head p{color:#bcc5d5} .process .section-head .mono{color:var(--orange)} .step-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px} @media (max-width:980px){ .step-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .step-grid{grid-template-columns:1fr} } .step{padding:24px; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); display:flex; flex-direction:column; gap:14px; background:rgba(255,255,255,.02)} .step-num{font-family:var(--font-mono); font-size:12px; color:var(--orange)} .step h3{font-size:19px} .step p{color:#bcc5d5; font-size:14.5px} /* ============ CTA BAND ============ */ .cta-band{background:#fff; border:1px solid var(--line); border-radius:20px; padding:56px; display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; position:relative; overflow:hidden} @media (max-width:860px){ .cta-band{grid-template-columns:1fr; padding:36px} } .cta-band h2{font-size:clamp(28px,3.5vw,40px)} .cta-band p{color:var(--ink-soft); margin-top:14px; max-width:520px} .cta-band .actions{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap} .cta-band .visual{height:220px; border-radius:14px; background:linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 60%, var(--orange) 130%); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center} .cta-band .visual img{width:55%; opacity:.92; filter:drop-shadow(0 10px 30px rgba(0,0,0,.3))} /* ============ FOOTER ============ */ footer{padding:60px 0 40px; border-top:1px solid var(--line); margin-top:60px} .foot-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px} @media (max-width:780px){ .foot-grid{grid-template-columns:1fr 1fr; gap:32px} } @media (max-width:480px){ .foot-grid{grid-template-columns:1fr} } .foot h4{font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:0.1em; color:var(--mute); font-weight:500; margin-bottom:14px} .foot ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px} .foot a{color:var(--ink-soft); font-size:14.5px} .foot a:hover{color:var(--ink)} .foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--mute); font-size:13px} .slash{display:inline-block; color:var(--line-2); margin:0 8px} /* ============ PILL TAGS ============ */ .pill{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; padding:5px 10px; border-radius:999px; background:var(--paper); color:var(--ink-soft); display:inline-block} .pill.orange{background:var(--orange); color:#fff} .pill.blue{background:var(--blue-tint); color:var(--blue)} .pill.green{background:rgba(31,138,91,.12); color:var(--green)} /* ============ CODE / PANEL CHROME (shared mock styling) ============ */ .panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden} .panel-head{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--paper)} .panel-head .dots{display:flex; gap:6px} .panel-head .dots i{width:9px; height:9px; border-radius:50%; background:var(--line-2); display:block} .panel-head .url{font-family:var(--font-mono); font-size:12px; color:var(--mute); margin-left:6px} /* === site-modular/styles.css === */ /* =================================================================== Zartonai — marketing site shared styles Brand tokens mirror zai-theme.json (navy / orange / blue, warm paper) =================================================================== */ :root{ /* ===== THEME CONTRACT — mirrors zai-theme.json (the <script id="zai-theme"> block in each page). Edit these to re-brand the whole site; everything below derives from them. ===== */ --brand-color-primary:#0e1f3e; --brand-color-primary-contrast:#ffffff; --brand-color-secondary:#1e5bb8; --brand-color-accent:#e85d2c; --brand-color-background:#0e1f3e; --brand-color-surface:#ffffff; --brand-color-text:#ffffff; --brand-color-muted:#6b7891; --brand-color-border:#e6e2d8; --brand-color-success:#1f8a5b; --brand-color-warning:#e8a317; --brand-color-danger:#d63031; --brand-font-display:Space Grotesk, system-ui, sans-serif; --brand-font-body:DM Sans, system-ui, sans-serif; --brand-font-mono:"JetBrains Mono", ui-monospace, monospace; --brand-font-scale:1.25; --brand-radius-sm:4px; --brand-radius-md:8px; --brand-radius-lg:16px; --brand-radius-pill:9999px; --brand-spacing-container:72rem; --brand-spacing-section-y:5rem; --brand-spacing-gap:1.5rem; --brand-shadow-sm:0 1px 2px rgba(14,31,62,.06); --brand-shadow-md:0 1px 0 rgba(14,31,62,.04), 0 10px 30px -12px rgba(14,31,62,.18); --brand-shadow-lg:0 24px 60px -20px rgba(14,31,62,.30); /* ===== SEMANTIC TOKENS — derived from the contract above (hex = fallback) ===== */ --ink: var(--brand-color-primary, #0E1F3E); --ink-2:#1A2B4A; --ink-soft:#3a4a66; --mute: var(--brand-color-muted, #6b7891); --faint:#9aa3b4; --line: var(--brand-color-border, #E6E2D8); --line-2:#D8D3C4; --paper:#F7F4ED; --paper-2:#EFEAE0; --card: var(--brand-color-surface, #FFFFFF); --blue: var(--brand-color-secondary, #1E5BB8); --blue-deep:#0E2C66; --blue-tint:#EAF1FB; --blue-line:#DCE4F2; --orange: var(--brand-color-accent, #E85D2C); --orange-deep:#cf4c1d; --orange-tint:#FCEFE7; --green: var(--brand-color-success, #1F8A5B); --amber: var(--brand-color-warning, #E8A317); --red: var(--brand-color-danger, #D63031); --font-display: var(--brand-font-display, 'Space Grotesk', system-ui, sans-serif); --font-body: var(--brand-font-body, 'DM Sans', system-ui, sans-serif); --font-mono: var(--brand-font-mono, 'JetBrains Mono', ui-monospace, monospace); --radius:14px; --radius-lg:18px; --shadow: var(--brand-shadow-md, 0 1px 0 rgba(14,31,62,.04), 0 10px 30px -12px rgba(14,31,62,.18)); --shadow-lg: var(--brand-shadow-lg, 0 24px 60px -20px rgba(14,31,62,.30)); } *{box-sizing:border-box} html{scroll-behavior:smooth} html,body{margin:0;padding:0} body{ font-family:var(--font-body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; font-size:16px; line-height:1.55; } h1,h2,h3,h4{font-family:var(--font-display); letter-spacing:-0.02em; color:var(--ink); margin:0; text-wrap:balance} h1{font-size:clamp(40px, 5.6vw, 72px); line-height:1.02; font-weight:600} h2{font-size:clamp(29px, 3.5vw, 46px); line-height:1.07; font-weight:600} h3{font-size:22px; font-weight:600; line-height:1.2} p{margin:0; text-wrap:pretty} a{color:inherit; text-decoration:none} img{display:block; max-width:100%} ::selection{background:rgba(232,93,44,.18)} .mono{font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; text-transform:uppercase} .container{max-width:1240px; margin:0 auto; padding:0 28px} .narrow{max-width:920px} @media (max-width:640px){ .container{padding:0 20px} } .accent{color:var(--orange)} .accent-blue{color:var(--blue)} .italic{font-style:italic; font-weight:500} /* ============ BUTTONS ============ */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; font-family:var(--font-body); font-weight:500; font-size:15px; border:1px solid transparent; cursor:pointer; transition:all .15s ease; white-space:nowrap; } .btn-ghost{color:var(--ink); background:transparent} .btn-ghost:hover{background:rgba(14,31,62,.06)} .btn-primary{background:var(--ink); color:#fff} .btn-primary:hover{background:#000} .btn-outline{border-color:var(--line-2); color:var(--ink); background:transparent} .btn-outline:hover{border-color:var(--ink); background:#fff} .btn-orange{background:var(--orange); color:#fff} .btn-orange:hover{background:var(--orange-deep)} .btn-lg{padding:14px 24px; font-size:16px} /* ============ NAV ============ */ .nav-wrap{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:rgba(247,244,237,.82); border-bottom:1px solid transparent; transition:border-color .2s} .nav-wrap.scrolled{border-bottom-color:var(--line)} .nav{display:flex; align-items:center; justify-content:space-between; height:72px} .brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-0.01em} .brand img{width:32px; height:32px; display:block} .brand .dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--orange); transform:translateY(-10px)} .nav-links{display:flex; align-items:center; gap:34px} .nav-links a{color:var(--ink-soft); font-size:15px; font-weight:500; position:relative; padding:6px 0} .nav-links a:hover{color:var(--ink)} .nav-links a.active{color:var(--ink)} .nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--orange); border-radius:2px} .nav-cta{display:flex; align-items:center; gap:10px} .menu-btn{display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line-2); background:transparent; align-items:center; justify-content:center; cursor:pointer; padding:0} .menu-btn span{display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition:transform .2s} .menu-btn span::before,.menu-btn span::after{content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink); transition:transform .2s} .menu-btn span::before{top:-5px} .menu-btn span::after{top:5px} .menu-btn.open span{background:transparent} .menu-btn.open span::before{transform:translateY(5px) rotate(45deg)} .menu-btn.open span::after{transform:translateY(-5px) rotate(-45deg)} .mobile-menu{display:none; position:fixed; inset:72px 0 0 0; z-index:40; background:var(--paper); padding:20px 28px 40px; flex-direction:column; border-top:1px solid var(--line); overflow-y:auto} .mobile-menu a{display:block; padding:18px 0; font-family:var(--font-display); font-weight:500; font-size:22px; color:var(--ink); border-bottom:1px solid var(--line)} .mobile-menu a:last-of-type{border-bottom:0} .mobile-menu .actions{display:flex; gap:10px; margin-top:24px; flex-direction:column} .mobile-menu.open{display:flex} @media (max-width: 940px){ .nav-links, .nav-cta{display:none} .menu-btn{display:flex} } /* ============ SECTIONS ============ */ section{padding:96px 0} @media (max-width:640px){ section{padding:64px 0} } .section-head{max-width:760px; margin-bottom:56px} .section-head.center{margin-left:auto; margin-right:auto; text-align:center} .section-head .mono{color:var(--orange); margin-bottom:14px; display:block} .section-head p{color:var(--ink-soft); font-size:18px; margin-top:16px} .eyebrow{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ink-soft); font-size:13px; font-weight:500} .eyebrow .pulse{width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 0 rgba(232,93,44,.5); animation:pulse 1.8s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,93,44,.5)}70%{box-shadow:0 0 0 8px rgba(232,93,44,0)}100%{box-shadow:0 0 0 0 rgba(232,93,44,0)}} /* ============ GENERIC CARD ============ */ .card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px} /* ============ MARQUEE ============ */ .marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0; background:#fff; overflow:hidden} .marquee-label{font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mute); text-align:center; margin-bottom:18px} .marquee-track{display:flex; gap:48px; flex-wrap:wrap; justify-content:center; align-items:center} .marquee-track span{font-family:var(--font-display); font-weight:500; font-size:20px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:10px} .marquee-track span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--line-2)} /* ============ PROCESS (navy) ============ */ .process{background:var(--ink); color:#fff} .process h2, .process h3{color:#fff} .process .section-head p{color:#bcc5d5} .process .section-head .mono{color:var(--orange)} .step-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px} @media (max-width:980px){ .step-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .step-grid{grid-template-columns:1fr} } .step{padding:24px; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); display:flex; flex-direction:column; gap:14px; background:rgba(255,255,255,.02)} .step-num{font-family:var(--font-mono); font-size:12px; color:var(--orange)} .step h3{font-size:19px} .step p{color:#bcc5d5; font-size:14.5px} /* ============ CTA BAND ============ */ .cta-band{background:#fff; border:1px solid var(--line); border-radius:20px; padding:56px; display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; position:relative; overflow:hidden} @media (max-width:860px){ .cta-band{grid-template-columns:1fr; padding:36px} } .cta-band h2{font-size:clamp(28px,3.5vw,40px)} .cta-band p{color:var(--ink-soft); margin-top:14px; max-width:520px} .cta-band .actions{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap} .cta-band .visual{height:220px; border-radius:14px; background:linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 60%, var(--orange) 130%); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center} .cta-band .visual img{width:55%; opacity:.92; filter:drop-shadow(0 10px 30px rgba(0,0,0,.3))} /* ============ FOOTER ============ */ footer{padding:60px 0 40px; border-top:1px solid var(--line); margin-top:60px} .foot-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px} @media (max-width:780px){ .foot-grid{grid-template-columns:1fr 1fr; gap:32px} } @media (max-width:480px){ .foot-grid{grid-template-columns:1fr} } .foot h4{font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:0.1em; color:var(--mute); font-weight:500; margin-bottom:14px} .foot ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px} .foot a{color:var(--ink-soft); font-size:14.5px} .foot a:hover{color:var(--ink)} .foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--mute); font-size:13px} .slash{display:inline-block; color:var(--line-2); margin:0 8px} /* ============ PILL TAGS ============ */ .pill{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; padding:5px 10px; border-radius:999px; background:var(--paper); color:var(--ink-soft); display:inline-block} .pill.orange{background:var(--orange); color:#fff} .pill.blue{background:var(--blue-tint); color:var(--blue)} .pill.green{background:rgba(31,138,91,.12); color:var(--green)} /* ============ CODE / PANEL CHROME (shared mock styling) ============ */ .panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden} .panel-head{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--paper)} .panel-head .dots{display:flex; gap:6px} .panel-head .dots i{width:9px; height:9px; border-radius:50%; background:var(--line-2); display:block} .panel-head .url{font-family:var(--font-mono); font-size:12px; color:var(--mute); margin-left:6px}
Home
Zarton AI turns a finished design into a live, content-managed site — bound to your content, hosted, and wired to OpenAI, Anthropic, and Gemini. Backed by 25+ years of full-stack engineering. One platform · three frontier model providers Pick the work you need — we design, build, bind, and keep it running. Each service is priced up front, with no surprise invoices. A production website designed to your brand, bound to your content types, and launched on managed hosting with AI surfaces built in. Design, content migration, AI chat, hosting We route each request to the provider that does it best — and you pay for what you use. No lock-in, no juggling three subscriptions. GPT-class models power customer chat, quote drafts, and on-brand product copy — tuned to your voice. Claude handles long documents, SOP drafting, and careful reasoning for SLA tickets and policy-sensitive replies. Gemini reads photos, scanned receipts, and documents — turning them into clean, structured data and search. Beyond a page editor. Every Zarton AI site ships with content modeling, AI surfaces, and a headless API that hands off cleanly to humans. Service pages, posts, and replies drafted from your real catalog and past work — review and publish instantly. Model services, FAQs, portfolios, and pages once — reuse them across every page and your headless API. Turn a chat into a quote, a quote into an invoice, and a thank-you into a review request — synced to your tools. Set hard spend limits on AI and API usage so a busy month never turns into a surprise bill. A sample of service businesses now running on Zarton AI — from first design to live, content-managed sites. An AI quoting flow that turns customer chats into drafted estimates, synced straight to the owner's CRM. Every plan includes a monthly bundle of AI credits across all three providers. Go over and you pay as you go — never blocked, never surprised. Launch your AI-powered website with managed hosting, SSL, five content types, multi-model AI routing, and 50,000 monthly AI credits. You bring a design and your content. We do the rest — and stay on to keep it earning its keep. Drop in a design or point us at your existing site. We parse the layout and structure automatically. We map the design to your content types and fill it with your records — services, FAQs, portfolio, pages. Chat, authoring, and automations are tuned to your catalog and tone, routed across all three providers. Publish on managed hosting. Pay-as-you-go for light use, or move to an SLA when AI gets mission-critical. Zarton AI is built by full-stack and enterprise engineers in Fresno, California, with more than two decades shipping production software. We turned that experience into a CMS that does the heavy lifting — so service businesses get an enterprise-grade site without an enterprise team. Architecture and security from 25+ years of enterprise work. Design, build, hosting, and AI — one accountable team. Flat subscriptions plus usage, with caps you control. Real engineers on support and SLAs — AI never answers alone. Serving service businesses nationwide · hello@zartonai.com · (559) 555-0142 Hardened hosting & access controls TLS in transit, encrypted at rest Export content & headless API Managed hosting & global CDN Start free, import a design, and watch it go live — bound to your content with AI built in. Talk to a real engineer in Fresno whenever you need one.Hand us a design.
We run the whole website.Everything a service business needs, run for you.
The right brain for every job.
OpenAI
Anthropic
Google Gemini
A CMS that does the work, not just the pages.
On-brand copy in one click
Structured content types
Flows for booking & follow-up
Usage caps & guardrails
Sites we designed, built, and still run.
Same-day quoting site
Built for service-led businesses.
Simple subscriptions. Pay only for the AI you use.
Starter Plan
Choose planSKUFrom design to live in four steps.
Import a design
Bind your content
Wire the AI
Go live & grow
A Fresno team, 25 years deep in the web.
Enterprise-grade
Full-stack, in-house
Plain-English pricing
People behind the AI
Fresno, California
SOC 2-aligned
Encrypted
No lock-in
99.9% uptime
Questions, answered.
Let's put your site to work.
/
1
1
2026-05-22 16:19:00
Rostom Sahakian
1
/* === zartonai-home-v2/styles.css === */ /* ============================================================================ Zarton AI — "Editorial Technical" light brand system Warm paper · ink near-black · single bold vermilion accent Newsreader (display serif) · DM Sans (body) · JetBrains Mono (labels) Every value flows from --brand-* tokens (see #zai-theme in header.html). ============================================================================ */ :root { /* ---- canonical brand tokens (mirror of #zai-theme) ---- */ --brand-color-primary: #1b1a16; --brand-color-primary-contrast: #ffffff; --brand-color-secondary: #2f5fce; --brand-color-accent: #e8502c; --brand-color-background: #f6f3ec; --brand-color-surface: #ffffff; --brand-color-text: #1b1a16; --brand-color-muted: #76705f; --brand-color-border: #e5ddcd; --brand-color-success: #1f8a5b; --brand-color-warning: #b9791a; --brand-color-danger: #c8402a; --brand-font-display: "Newsreader", Georgia, "Times New Roman", serif; --brand-font-body: "DM Sans", system-ui, -apple-system, sans-serif; --brand-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; --brand-font-scale: 1.25; --brand-radius-sm: 3px; --brand-radius-md: 7px; --brand-radius-lg: 14px; --brand-radius-pill: 9999px; --brand-spacing-container: 74rem; --brand-spacing-section-y: 5.5rem; --brand-spacing-gap: 1.5rem; --brand-shadow-sm: 0 1px 2px rgba(27,26,22,.05); --brand-shadow-md: 0 1px 0 rgba(27,26,22,.04), 0 14px 34px -18px rgba(27,26,22,.16); --brand-shadow-lg: 0 30px 70px -28px rgba(27,26,22,.28); /* ---- working aliases ---- */ --paper: var(--brand-color-background, #f6f3ec); --paper-2: #efe9dd; /* faint warm panel */ --surface: var(--brand-color-surface, #ffffff); --ink: var(--brand-color-text, #1b1a16); --ink-soft: #423f37; --muted: var(--brand-color-muted, #76705f); --line: var(--brand-color-border, #e5ddcd); --line-2: #d8cfba; /* stronger hairline */ --accent: var(--brand-color-accent, #e8502c); --accent-deep: #c5401f; --accent-tint: #fbe7df; --blue: var(--brand-color-secondary, #2f5fce); /* dark band (ink) surfaces */ --band-ink: #1b1a16; --band-ink-2: #24221d; --on-ink: #f4f1ea; --on-ink-soft: #b3ac9c; --on-ink-line: rgba(244,241,234,.14); --container: var(--brand-spacing-container, 74rem); --r-sm: var(--brand-radius-sm,3px); --r-md: var(--brand-radius-md,7px); --r-lg: var(--brand-radius-lg,14px); --sp-y: clamp(3.75rem, 7vw, var(--brand-spacing-section-y, 5.5rem)); } /* density toggle (Tweaks) */ body.density-compact { --sp-y: clamp(3.25rem, 6vw, 5rem); } body.density-comfy { --sp-y: clamp(4.5rem, 9vw, 7rem); } /* ----------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--brand-font-body); background: var(--paper); color: var(--ink); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; } ::selection { background: var(--accent); color: #fff; } /* visually-hidden */ .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------- structure */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); } .section { padding-block: var(--sp-y); position: relative; } .section-sm { padding-block: clamp(2rem, 4vw, 3rem); } main > .section + .section { border-top: 1px solid var(--line); } /* ------------------------------------------------------------ typography */ h1, h2, h3, h4 { font-family: var(--brand-font-display); font-weight: 500; line-height: 1.04; letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; } h1 { font-size: clamp(2.7rem, 6.4vw, 5.1rem); font-weight: 400; letter-spacing: -0.022em; } h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); letter-spacing: -0.018em; } h3 { font-size: 1.32rem; font-weight: 600; letter-spacing: -0.01em; } p { text-wrap: pretty; } .ital { font-style: italic; font-weight: 400; } .accent-word { color: var(--accent); font-style: italic; } .underline-accent { box-shadow: inset 0 -0.08em 0 var(--accent-tint), inset 0 -0.16em 0 var(--accent); } .mono { font-family: var(--brand-font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* eyebrow */ .eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--brand-font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); } .eyebrow .tick { width: 22px; height: 1px; background: var(--accent); display: inline-block; } .eyebrow.on-ink { color: var(--on-ink-soft); } /* section head */ .section-head { max-width: 40rem; } .section-head .eyebrow { margin-bottom: 1.1rem; } .section-head h2 { margin-bottom: .85rem; } .section-head .sub { color: var(--muted); font-size: 1.075rem; line-height: 1.62; max-width: 38rem; } .section-head.center { text-align: center; max-width: 44rem; } .section-head.center .eyebrow { justify-content: center; } .section-head.center .sub { margin-inline: auto; } /* ---------------------------------------------------------------- buttons */ .btn { --bg: var(--ink); --fg: #fff; --bd: var(--ink); display: inline-flex; align-items: center; gap: .5rem; background: var(--bg); color: var(--fg); border: 1px solid var(--bd); padding: .72rem 1.25rem; border-radius: var(--r-sm); font-family: var(--brand-font-body); font-weight: 600; font-size: .94rem; letter-spacing: .005em; line-height: 1; transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease; white-space: nowrap; } .btn .arr { transition: transform .22s ease; } .btn:hover { transform: translateY(-1px); } .btn:hover .arr { transform: translateX(3px); } .btn:active { transform: translateY(0); } .btn-primary { --bg: var(--ink); --fg: #fff; --bd: var(--ink); } .btn-primary:hover { box-shadow: 0 10px 26px -12px rgba(27,26,22,.5); } .btn-accent { --bg: var(--accent); --fg: #fff; --bd: var(--accent); } .btn-accent:hover { --bg: var(--accent-deep); --bd: var(--accent-deep); } .btn-outline { --bg: transparent; --fg: var(--ink); --bd: var(--line-2); } .btn-outline:hover { --bd: var(--ink); background: var(--surface); } .btn-ghost { --bg: transparent; --fg: var(--ink-soft); --bd: transparent; padding-inline: .6rem; } .btn-ghost:hover { --fg: var(--ink); background: transparent; } .btn-light { --bg: #fff; --fg: var(--ink); --bd: #fff; } .btn-light:hover { box-shadow: 0 12px 30px -14px rgba(0,0,0,.5); } .btn-lg { padding: .95rem 1.6rem; font-size: 1rem; } /* ============================================================ HEADER */ .site-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s ease, background .25s ease; } .site-header.scrolled { border-bottom-color: var(--line); background: color-mix(in srgb, var(--paper) 94%, transparent); } .site-header .nav { display: flex; align-items: center; gap: 1.5rem; height: 70px; } .brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--brand-font-display); } .brand img { width: 30px; height: 30px; object-fit: contain; } .brand span { font-size: 1.28rem; letter-spacing: -.01em; color: var(--ink); } .brand b { font-weight: 600; } .brand .ai { color: var(--accent); font-style: italic; font-weight: 500; } .nav-links { display: flex; gap: 1.5rem; margin-left: auto; } .nav-links a { font-size: .92rem; font-weight: 500; color: var(--ink-soft); position: relative; padding-block: .35rem; } .nav-links a::after { content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0; background: var(--accent); transition: width .22s ease; } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { width: 100%; } .nav-actions { display: flex; align-items: center; gap: .5rem; margin-left: .25rem; } .menu-btn { display: none; width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: var(--r-sm); position: relative; } .menu-btn span, .menu-btn span::before, .menu-btn span::after { content:""; position:absolute; left:50%; top:50%; width:17px; height:1.6px; background: var(--ink); transform: translate(-50%,-50%); transition: .25s; } .menu-btn span::before { transform: translate(-50%,-7px); } .menu-btn span::after { transform: translate(-50%,5px); } .menu-btn.open span { background: transparent; } .menu-btn.open span::before { transform: translate(-50%,-50%) rotate(45deg); } .menu-btn.open span::after { transform: translate(-50%,-50%) rotate(-45deg); } .mobile-menu { display: none; position: fixed; inset: 70px 0 auto 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 1rem clamp(20px,5vw,48px) 1.6rem; flex-direction: column; gap: .25rem; z-index: 55; } .mobile-menu.open { display: flex; } .mobile-menu a { padding: .8rem .25rem; font-weight: 500; border-bottom: 1px solid var(--line); } .mobile-menu .m-actions { display: flex; gap: .6rem; margin-top: 1rem; } .mobile-menu .m-actions .btn { flex: 1; justify-content: center; } /* ================================================================ HERO */ .hero { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3.5rem, 6vw, 5rem); position: relative; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; } .pill-badge { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--brand-font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); padding: .42rem .75rem; border-radius: var(--brand-radius-pill); } .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); position: relative; } .pulse::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--accent); opacity:.5; animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0%{transform:scale(.7);opacity:.6} 100%{transform:scale(2.1);opacity:0} } .hero h1 { margin: 1.4rem 0 0; } .hero .lead { margin-top: 1.4rem; font-size: 1.16rem; line-height: 1.6; color: var(--ink-soft); max-width: 33rem; } .cta-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; } .trust { display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem; margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } .trust-item { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--muted); font-weight: 500; } .trust-item .ok { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-deep); font-size: .62rem; font-weight: 700; } /* hero product panel */ .hero-visual { position: relative; } .logo-deco { position: absolute; width: 168px; opacity: .07; right: -26px; top: -54px; transform: rotate(8deg); pointer-events: none; } .panel { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--brand-shadow-md); overflow: hidden; position: relative; z-index: 1; } .panel-head { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); background: var(--paper-2); } .traffic { display: flex; gap: 6px; } .traffic i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); } .traffic i:first-child { background: var(--accent); } .panel-head .url { font-family: var(--brand-font-mono); font-size: .72rem; color: var(--muted); letter-spacing: .02em; } .panel-body { padding: 1.1rem; display: flex; flex-direction: column; gap: .8rem; background: linear-gradient(var(--surface), var(--surface)); } .chat { display: flex; gap: .65rem; align-items: flex-start; } .av { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-family: var(--brand-font-mono); font-size: .82rem; font-weight: 600; flex: none; } .av.u { background: var(--paper-2); color: var(--ink-soft); border: 1px solid var(--line); } .av.a { background: var(--ink); color: #fff; } .bubble { background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px 12px 12px 12px; padding: .6rem .8rem; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); } .bubble.a { background: var(--surface); border-color: var(--line-2); color: var(--ink); } .bubble strong { color: var(--ink); font-weight: 600; } .typing { display: inline-flex; gap: 4px; padding: .15rem 0; } .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.3s infinite; } .typing i:nth-child(2){ animation-delay:.2s } .typing i:nth-child(3){ animation-delay:.4s } @keyframes blink { 0%,60%,100%{opacity:.25} 30%{opacity:1} } .float-card { position: absolute; right: -14px; bottom: -28px; width: 224px; z-index: 2; background: var(--ink); color: var(--on-ink); border-radius: var(--r-md); padding: .85rem .95rem; box-shadow: var(--brand-shadow-lg); } .float-card .mono { color: var(--on-ink-soft); display: block; margin-bottom: .6rem; } .flow-step { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 500; color: var(--on-ink-soft); } .flow-step.done { color: var(--on-ink); } .flow-step .ico { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: .6rem; background: var(--on-ink-line); color: var(--on-ink-soft); } .flow-step.done .ico { background: var(--accent); color: #fff; } .flow-line { width: 1px; height: 9px; background: var(--on-ink-line); margin-left: 7.5px; } /* hero minimal variant (Tweaks) */ body.hero-minimal .hero-visual { display: none; } body.hero-minimal .hero-grid { grid-template-columns: 1fr; max-width: 52rem; } body.hero-minimal .hero .lead { max-width: 40rem; font-size: 1.25rem; } /* ============================================================== LOGOS */ .logos { padding-block: clamp(1.5rem, 3vw, 2.2rem); border-top: 1px solid var(--line); } .logos .label { margin-bottom: 1rem; } .logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; } .lw { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .96rem; color: var(--ink-soft); } .gl { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-family: var(--brand-font-mono); font-size: .82rem; font-weight: 700; color: #fff; } .gl.gpt { background: #10a37f; } .gl.cla { background: #d97757; } .gl.gem { background: #4079ee; } /* ============================================================== STATS */ .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); } .stat { padding: 1.6rem 1.4rem; border-right: 1px solid var(--line); } .stat:last-child { border-right: 0; } .stat .num { font-family: var(--brand-font-display); font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 400; line-height: 1; letter-spacing: -.02em; color: var(--ink); display: block; } .stat .num .u { color: var(--accent); } .stat .lbl { display: block; margin-top: .7rem; font-size: .85rem; color: var(--muted); line-height: 1.45; } /* =========================================================== BANDS */ .band-ink { background: var(--band-ink); color: var(--on-ink); border-top: 1px solid var(--ink) !important; } .band-ink h1,.band-ink h2,.band-ink h3,.band-ink h4 { color: var(--on-ink); } .band-ink .sub { color: var(--on-ink-soft); } .band-paper { background: var(--paper-2); } .dots { position: relative; } .dots::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image: radial-gradient(var(--on-ink-line) 1px, transparent 1px); background-size: 22px 22px; } .dots .container { position: relative; } /* ============================================== generic grids/cards */ .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; } .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); } /* SERVICES */ .svc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .svc:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--brand-shadow-md); } .svc .media { aspect-ratio: 16/10; overflow: hidden; background: var(--paper-2); border-bottom: 1px solid var(--line); } .svc .media img { width: 100%; height: 100%; object-fit: cover; } .svc .body { padding: 1.15rem 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .65rem; flex: 1; } .svc-head h3 a:hover { color: var(--accent); } .meta { display: flex; flex-wrap: wrap; gap: .45rem; } .chip { font-family: var(--brand-font-mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; padding: .28rem .55rem; border: 1px solid var(--line); border-radius: var(--brand-radius-pill); color: var(--muted); } .chip.price { color: var(--accent-deep); border-color: var(--accent-tint); background: var(--accent-tint); } .svc .excerpt { font-size: .94rem; color: var(--ink-soft); line-height: 1.55; } .svc-foot { margin-top: auto; padding-top: .4rem; } .svc-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; color: var(--ink); } .svc-link:hover { color: var(--accent); } .svc-link:hover .arr { transform: translateX(3px); } .svc-link .arr { transition: transform .2s ease; } /* AI MODELS */ .model-card { background: var(--band-ink-2); border: 1px solid var(--on-ink-line); border-radius: var(--r-md); padding: 1.4rem; display: flex; flex-direction: column; gap: .6rem; transition: transform .2s ease, border-color .2s ease; } .model-card:hover { transform: translateY(-3px); border-color: rgba(244,241,234,.3); } .model-card .top { display: flex; align-items: center; justify-content: space-between; } .glyph { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font-family: var(--brand-font-mono); font-weight: 700; color: #fff; } .glyph.gpt { background: #10a37f; } .glyph.cla { background: #d97757; } .glyph.gem { background: #4079ee; } .model-card .badge { font-family: var(--brand-font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-soft); border: 1px solid var(--on-ink-line); padding: .26rem .5rem; border-radius: var(--brand-radius-pill); } .model-card h3 { color: var(--on-ink); margin-top: .3rem; } .model-card p { font-size: .94rem; color: var(--on-ink-soft); line-height: 1.55; } .tag-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; } .tag { font-family: var(--brand-font-mono); font-size: .66rem; letter-spacing: .06em; color: var(--on-ink-soft); border: 1px solid var(--on-ink-line); border-radius: var(--brand-radius-pill); padding: .22rem .5rem; } /* FEATURES */ .feat { padding: 1.4rem 1.3rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); display: flex; flex-direction: column; gap: .55rem; transition: transform .2s ease, box-shadow .2s ease; } .feat:hover { transform: translateY(-3px); box-shadow: var(--brand-shadow-md); } .feat .ico { width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: var(--r-sm); display: grid; place-items: center; color: var(--accent); } .feat .ico svg { width: 21px; height: 21px; stroke: currentColor; } .feat .mono { margin-top: .3rem; } .feat h3 { font-size: 1.12rem; } .feat p { font-size: .92rem; color: var(--ink-soft); line-height: 1.55; } /* PORTFOLIO / WORK */ .work-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; } .work { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .work:hover { transform: translateY(-3px); box-shadow: var(--brand-shadow-md); border-color: var(--line-2); } .work .media { aspect-ratio: 16/11; overflow: hidden; background: var(--paper-2); border-bottom: 1px solid var(--line); } .work .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .work:hover .media img { transform: scale(1.04); } .work .body { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .work .client { font-family: var(--brand-font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep); } .work h3 { font-size: 1.22rem; font-weight: 600; } .work .excerpt { font-size: .92rem; color: var(--ink-soft); line-height: 1.55; } .work-foot { margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; font-size: .82rem; color: var(--muted); } .work-foot a { font-weight: 600; color: var(--ink); display: inline-flex; gap: .35rem; align-items: center; } .work-foot a:hover { color: var(--accent); } .work-foot a:hover .arr { transform: translateX(3px); } .work-foot .arr { transition: transform .2s ease; } /* INDUSTRIES */ .ind-wrap { display: flex; flex-wrap: wrap; gap: .6rem; } .ind { display: inline-flex; align-items: center; gap: .55rem; padding: .58rem .9rem; border: 1px solid var(--on-ink-line); border-radius: var(--brand-radius-pill); font-size: .9rem; font-weight: 500; color: var(--on-ink); } .ind .d { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* ============================================================ PRICING */ .pricing-band { background: var(--paper-2); } .toggle { display: inline-flex; gap: .25rem; margin: 1.4rem auto 0; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--brand-radius-pill); padding: .25rem; } .toggle button { padding: .5rem 1.05rem; border-radius: var(--brand-radius-pill); font-size: .86rem; font-weight: 600; color: var(--muted); } .toggle button.active { background: var(--ink); color: #fff; } .toggle .save { font-family: var(--brand-font-mono); font-size: .6rem; letter-spacing: .08em; color: var(--accent-deep); margin-left: .35rem; } .toggle button.active .save { color: #ffb59c; } .price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem; margin-top: 2.6rem; } .price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.7rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .55rem; position: relative; } /* highlight the middle plan when there are exactly three (survives CMS import) */ .price-card:nth-child(2):nth-last-child(2) { border-color: var(--ink); box-shadow: var(--brand-shadow-md); } .price-card .ptag { display: none; position: absolute; top: -.85rem; left: 1.5rem; font-family: var(--brand-font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; background: var(--accent); color: #fff; border-radius: var(--brand-radius-pill); padding: .25rem .6rem; } .price-card:nth-child(2):nth-last-child(2) .ptag { display: inline-block; } .price-card:nth-child(2):nth-last-child(2) .btn { --bg: var(--ink); --fg: #fff; --bd: var(--ink); } .price-card:nth-child(2):nth-last-child(2) .btn:hover { --bg: #000; --bd: #000; } .price-card h3 { font-family: var(--brand-font-body); font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; } .price { display: flex; align-items: flex-end; gap: .1rem; font-family: var(--brand-font-display); } .price .cur { font-size: 1.4rem; color: var(--muted); margin-bottom: .4rem; } .price > span:not(.cur) { font-size: 3.1rem; font-weight: 400; line-height: .9; letter-spacing: -.02em; } .price small { font-family: var(--brand-font-body); font-size: .8rem; color: var(--muted); font-weight: 500; margin-bottom: .45rem; margin-left: .15rem; } .price-card .desc { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; } .price-card .credits { font-family: var(--brand-font-mono); font-size: .72rem; letter-spacing: .03em; color: var(--accent-deep); background: var(--accent-tint); border-radius: var(--r-sm); padding: .4rem .6rem; align-self: flex-start; } .price-card ul, .price-card .feat-list { list-style: none; padding: 0; margin: .4rem 0 1.1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .price-card li { position: relative; padding-left: 1.3rem; font-size: .9rem; color: var(--ink-soft); line-height: 1.4; } .price-card li::before { content:"+"; position: absolute; left: 0; top: -1px; color: var(--accent); font-weight: 700; } .price-card .price-foot { margin-top: auto; } .price-card .btn { width: 100%; justify-content: center; } .btn-outline-dark { --bg: transparent; --fg: var(--ink); --bd: var(--line-2); } .btn-outline-dark:hover { --bd: var(--ink); background: var(--paper-2); } .payg-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem 1rem; margin-top: 1.8rem; font-size: .86rem; color: var(--muted); } .payg-note b { color: var(--ink); font-weight: 600; } .payg-note .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); } /* pricing rows variant (Tweaks) */ body.pricing-rows .price-grid { grid-template-columns: 1fr; max-width: 46rem; margin-inline: auto; } body.pricing-rows .price-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; } body.pricing-rows .price-card ul { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; gap: .4rem 1.2rem; } body.pricing-rows .price-card .btn { width: auto; } /* ============================================================== PROCESS */ .steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border-top: 1px solid var(--line-2); } .step { padding: 1.6rem 1.4rem 1.6rem 0; border-right: 1px solid var(--line); position: relative; } .step:last-child { border-right: 0; } .step::before { content:""; position: absolute; top: -1px; left: 0; width: 34px; height: 2px; background: var(--accent); } .step .n { font-family: var(--brand-font-mono); font-size: .68rem; letter-spacing: .14em; color: var(--muted); } .step h3 { font-size: 1.18rem; margin: .8rem 0 .5rem; } .step p { font-size: .9rem; color: var(--ink-soft); line-height: 1.55; } /* ============================================================== ABOUT + MAP */ .about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } .about-grid .body > p { margin-top: 1.1rem; color: var(--on-ink-soft); font-size: 1.04rem; line-height: 1.62; max-width: 34rem; } .about-points { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.5rem; margin-top: 1.9rem; } .about-point { display: flex; gap: .8rem; } .about-point .ic { width: 38px; height: 38px; border: 1px solid var(--on-ink-line); border-radius: var(--r-sm); display: grid; place-items: center; color: var(--accent); flex: none; } .about-point .ic svg { width: 19px; height: 19px; stroke: currentColor; } .about-point h4 { font-family: var(--brand-font-body); font-weight: 700; font-size: .98rem; color: var(--on-ink); } .about-point p { font-size: .85rem; color: var(--on-ink-soft); line-height: 1.45; margin-top: .2rem; } .map-card { position: relative; aspect-ratio: 4/3.4; border: 1px solid var(--on-ink-line); border-radius: var(--r-lg); overflow: hidden; background: var(--band-ink-2); } .map-tex { position: absolute; inset: 0; opacity: .9; background: radial-gradient(120% 90% at 70% 20%, rgba(232,80,44,.14), transparent 60%), repeating-linear-gradient(0deg, transparent 0 27px, var(--on-ink-line) 27px 28px), repeating-linear-gradient(90deg, transparent 0 27px, var(--on-ink-line) 27px 28px); } .grid-lines { position: absolute; inset: 0; } .map-card .pin { position: absolute; left: 50%; top: 46%; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); transform: translate(-50%,-50%); box-shadow: 0 0 0 4px rgba(232,80,44,.25); } .map-card .pin::after { content:""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid var(--accent); animation: pulse 2.6s ease-out infinite; } .map-card .addr { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1.1rem; background: rgba(20,19,16,.78); backdrop-filter: blur(6px); border: 1px solid var(--on-ink-line); border-radius: var(--r-md); padding: .9rem 1rem; } .map-card .addr h4 { font-family: var(--brand-font-display); color: var(--on-ink); font-size: 1.1rem; margin: .25rem 0; } .map-card .addr p { font-size: .8rem; color: var(--on-ink-soft); line-height: 1.5; } /* ============================================================== BADGES */ .badge-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.1rem; } .trust-badge { display: flex; gap: .8rem; align-items: flex-start; padding: 1.1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .trust-badge .ic { width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--accent); flex: none; } .trust-badge .ic svg { width: 19px; height: 19px; stroke: currentColor; } .trust-badge h4 { font-family: var(--brand-font-body); font-weight: 700; font-size: .94rem; } .trust-badge p { font-size: .82rem; color: var(--muted); margin-top: .15rem; line-height: 1.4; } /* ================================================================ FAQ */ .faq-wrap { max-width: 50rem; margin-inline: auto; border-top: 1px solid var(--on-ink-line); } .faq-item { border-bottom: 1px solid var(--on-ink-line); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem .25rem; text-align: left; font-family: var(--brand-font-display); font-size: 1.18rem; font-weight: 500; color: var(--on-ink); } .faq-q:hover { color: #fff; } .faq-q .pm { position: relative; width: 16px; height: 16px; flex: none; } .faq-q .pm::before, .faq-q .pm::after { content:""; position: absolute; left: 50%; top: 50%; background: var(--accent); transition: transform .25s ease; } .faq-q .pm::before { width: 14px; height: 1.8px; transform: translate(-50%,-50%); } .faq-q .pm::after { width: 1.8px; height: 14px; transform: translate(-50%,-50%); } .faq-item.open .faq-q .pm::after { transform: translate(-50%,-50%) scaleY(0); } .faq-a { overflow: hidden; max-height: 0; transition: max-height .3s ease; } .faq-item.open .faq-a { max-height: 420px; } .faq-a .inner { padding: 0 .25rem 1.3rem; color: var(--on-ink-soft); font-size: .98rem; line-height: 1.62; max-width: 44rem; } .faq-a .inner :where(p){ margin-bottom: .6rem; } /* ================================================================ CTA */ .cta-band { background: var(--ink); color: var(--on-ink); border-radius: var(--r-lg); padding: clamp(2.4rem, 5vw, 4rem); position: relative; overflow: hidden; } .cta-band::before { content:""; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(232,80,44,.32), transparent 65%); } .cta-inner { position: relative; max-width: 38rem; } .cta-band h2 { color: #fff; } .cta-band p { color: var(--on-ink-soft); font-size: 1.08rem; line-height: 1.6; margin-top: 1rem; } .cta-band .cta-row { margin-top: 1.8rem; } /* ============================================================== FOOTER */ .site-footer { background: var(--band-ink); color: var(--on-ink-soft); border-top: 1px solid var(--ink); padding-block: 3.2rem 2rem; } .foot-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 2rem; } .foot-brand .brand span { color: var(--on-ink); } .foot-brand .brand .ai { color: var(--accent); } .foot-brand > p { margin-top: 1rem; font-size: .9rem; line-height: 1.6; max-width: 28rem; color: var(--on-ink-soft); } .social { display: flex; gap: .5rem; margin-top: 1.2rem; } .social a { width: 36px; height: 36px; border: 1px solid var(--on-ink-line); border-radius: var(--r-sm); display: grid; place-items: center; color: var(--on-ink-soft); transition: .2s; } .social a svg { width: 16px; height: 16px; } .social a:hover { color: #fff; border-color: var(--accent); background: rgba(232,80,44,.16); } .foot-col h5 { font-family: var(--brand-font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-soft); margin-bottom: 1rem; } .foot-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .6rem; } .foot-col a { font-size: .9rem; color: var(--on-ink); opacity: .82; } .foot-col a:hover { opacity: 1; color: var(--accent); } .foot-bottom { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; justify-content: space-between; align-items: center; margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--on-ink-line); font-size: .82rem; color: var(--on-ink-soft); } .foot-bottom a { color: var(--on-ink-soft); } .foot-bottom a:hover { color: var(--accent); } /* ============================================================== reveal */ body.anim .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; } body.anim .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { body.anim .reveal { opacity: 1 !important; transform: none !important; transition: none; } .pulse::after, .map-card .pin::after, .typing i { animation: none !important; } } /* ============================================================== responsive */ @media (max-width: 980px) { .nav-links, .nav-actions .desktop { display: none; } .menu-btn { display: block; } .nav-actions { margin-left: auto; } .hero-grid { grid-template-columns: 1fr; } .hero-visual { max-width: 30rem; margin-top: .5rem; } .about-grid { grid-template-columns: 1fr; } .grid-4, .badge-row { grid-template-columns: repeat(2,1fr); } .steps { grid-template-columns: repeat(2,1fr); } .step { border-bottom: 1px solid var(--line); padding-right: 1.4rem; padding-left: 1.4rem; } .step:nth-child(2n) { border-right: 0; } } @media (max-width: 720px) { body { font-size: 16px; } .grid-3, .work-grid, .price-grid, .stats-grid, .about-points { grid-template-columns: 1fr; } .stat { border-right: 0; border-bottom: 1px solid var(--line); } .stat:last-child { border-bottom: 0; } .grid-4, .badge-row { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .step { border-right: 0; } .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } .float-card { display: none; } } @media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
Welcome
Create stunning websites, capture leads, automate workflows, and manage your entire business—all from one intelligent platform built for growth.
No credit card required
•14-day free trial
•Cancel anytime
Trusted by 2,500+ growing businesses Find the perfect plan for your needs. All plans include our core features with different limits and capabilities.
See how ZartonAi stacks up against piecing together multiple expensive tools. One platform, one price, unlimited potential.
No hidden fees. No surprises. Start free and scale as you grow.
Perfect for getting started Best for growing businesses For large organizations
Join 15,000+ entrepreneurs receiving weekly insights on automation, AI, and scaling your business. No spam, unsubscribe anytime.
Build Websites. Automate Everything.
"ZartonAi replaced 5 different tools for us. We built our entire client portal, automated onboarding, and cut our setup time by 80%. It's the backbone of our agency now."
Compare Our Plans
Features Websites 1 5 Unlimited AI Generations 100/mo 1,000/mo Unlimited Team Members 1 5 Unlimited Priority Support Custom Integrations Get Started Get Started Contact Sales
Stop Juggling Multiple Tools.
Simplify Everything.
Features Traditional Tools Website Builder $29/mo (Webflow) Email Marketing $49/mo (Mailchimp) CRM & Lead Management $79/mo (HubSpot) Automation Workflows $39/mo (Zapier) AI Content Generation $20/mo (ChatGPT Plus) Analytics Dashboard $59/mo (Mixpanel) Total Monthly Cost $49/mo $275/mo
Choose Your Growth Plan
Starter
Get Started Free
Pro
Start Free Trial
Enterprise
Contact Sales
Get Growth Tips & Updates
welcome
1
2026-05-17 19:29:00
Rostom Sahakian
default
1
