/* ============ Nean — Brand Stylesheet (v2: single-primary, light/dark) ============ */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap'); :root{ /* ---- Single primary hue (Warm Amber), full derived scale ---- */ --primary-50:#FFF4ED; --primary-100:#FFE6D5; --primary-200:#FFC9A8; --primary-300:#FFA470; --primary-400:#FB7B3D; --primary-500:#EA580C; --primary-600:#C2410C; --primary-700:#9A3412; --primary-800:#7C2D12; --primary-900:#431407; /* ---- Semantic tokens: LIGHT ---- */ --bg:#FFFDFB; --bg-alt:#FBF6F1; --surface:#FFFFFF; --border:#EBDFD4; --border-strong:#DCCBBA; --text:#241A12; --text-soft:#55483C; --text-faint:#8A7A6B; --primary:var(--primary-500); --primary-hover:var(--primary-600); --primary-tint:var(--primary-50); --primary-tint-strong:var(--primary-100); --primary-strong:var(--primary-700); --on-primary:#FFFFFF; --focus-ring:rgba(234,88,12,.35); /* ---- Ink surface: used for big full-bleed blocks (hero/CTA/pain), same in both themes ---- */ --ink-surface:#241B15; --ink-surface-border:rgba(255,255,255,.08); --shadow-sm:0 2px 8px rgba(66,40,20,.06); --shadow-md:0 16px 40px -16px rgba(66,40,20,.22); --shadow-lg:0 30px 60px -20px rgba(66,40,20,.28); --tag-positive-bg:rgba(34,142,86,.12); --tag-positive-text:#1F8A57; --tag-urgent-bg:rgba(220,38,38,.12); --tag-urgent-text:#DC2626; --max-width:1160px; --radius:16px; } /* ---- Dark mode ---- Follows the visitor's system preference automatically, but can be overridden by the manual toggle in the nav (sets data-theme on and remembers the choice in localStorage — see js/site.js). */ :root[data-theme="dark"]{ --bg:#17110E; --bg-alt:#1D1611; --surface:#241B15; --border:#3A2C21; --border-strong:#4E3A2A; --text:#F5EDE6; --text-soft:#C6B5A6; --text-faint:#8B7969; --primary:var(--primary-400); --primary-hover:var(--primary-300); --primary-tint:rgba(251,123,61,.14); --primary-tint-strong:rgba(251,123,61,.24); --primary-strong:var(--primary-300); --on-primary:#241207; --focus-ring:rgba(251,123,61,.35); --ink-surface:#0D0906; --ink-surface-border:rgba(255,255,255,.08); --shadow-sm:0 2px 8px rgba(0,0,0,.3); --shadow-md:0 16px 40px -16px rgba(0,0,0,.5); --shadow-lg:0 30px 60px -20px rgba(0,0,0,.6); --tag-positive-bg:rgba(34,197,94,.16); --tag-positive-text:#4ADE80; --tag-urgent-bg:rgba(248,113,113,.16); --tag-urgent-text:#F87171; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#17110E; --bg-alt:#1D1611; --surface:#241B15; --border:#3A2C21; --border-strong:#4E3A2A; --text:#F5EDE6; --text-soft:#C6B5A6; --text-faint:#8B7969; --primary:var(--primary-400); --primary-hover:var(--primary-300); --primary-tint:rgba(251,123,61,.14); --primary-tint-strong:rgba(251,123,61,.24); --primary-strong:var(--primary-300); --on-primary:#241207; --focus-ring:rgba(251,123,61,.35); --ink-surface:#0D0906; --ink-surface-border:rgba(255,255,255,.08); --shadow-sm:0 2px 8px rgba(0,0,0,.3); --shadow-md:0 16px 40px -16px rgba(0,0,0,.5); --shadow-lg:0 30px 60px -20px rgba(0,0,0,.6); --tag-positive-bg:rgba(34,197,94,.16); --tag-positive-text:#4ADE80; --tag-urgent-bg:rgba(248,113,113,.16); --tag-urgent-text:#F87171; } } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--text); font-family:'IBM Plex Sans', sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .3s ease, color .3s ease; } h1,h2,h3,h4,h5{ font-family:'Sora', sans-serif; color:var(--text); margin:0; letter-spacing:-0.01em; line-height:1.2; } p{margin:0;} a{color:inherit; text-decoration:none;} img{max-width:100%; display:block;} .wrap{max-width:var(--max-width); margin:0 auto; padding:0 32px;} /* ---------- Reveal-on-scroll ---------- */ .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;} .reveal.visible{opacity:1; transform:translateY(0);} .reveal-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;} .reveal-stagger.visible > *{opacity:1; transform:translateY(0);} .reveal-stagger.visible > *:nth-child(1){transition-delay:.05s;} .reveal-stagger.visible > *:nth-child(2){transition-delay:.15s;} .reveal-stagger.visible > *:nth-child(3){transition-delay:.25s;} .reveal-stagger.visible > *:nth-child(4){transition-delay:.35s;} .reveal-stagger.visible > *:nth-child(5){transition-delay:.45s;} .reveal-stagger.visible > *:nth-child(6){transition-delay:.55s;} /* ---------- Buttons ---------- */ .btn{ font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:15px; padding:14px 28px; border-radius:10px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; white-space:nowrap; } .btn-primary{background:var(--primary); color:var(--on-primary);} .btn-primary:hover{background:var(--primary-hover); transform:translateY(-2px); box-shadow:var(--shadow-md);} .btn-outline{background:transparent; color:var(--text); border:1.5px solid var(--border-strong);} .btn-outline:hover{border-color:var(--text-soft);} .btn-outline-light{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.3);} .btn-outline-light:hover{border-color:rgba(255,255,255,.55);} /* ---------- Nav ---------- */ .site-nav{ position:fixed; top:0; left:0; right:0; z-index:100; background:transparent; border-bottom:1px solid transparent; transition:background .3s ease, border-color .3s ease, box-shadow .3s ease, padding .3s ease; padding:22px 0; } .site-nav.scrolled{ background:var(--surface); backdrop-filter:blur(10px); border-bottom-color:var(--border); box-shadow:var(--shadow-sm); padding:14px 0; } .nav-inner{ max-width:var(--max-width); margin:0 auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; position:relative; } .nav-logo{ font-family:'Sora',sans-serif; font-weight:700; font-size:22px; color:var(--text); display:inline-flex; align-items:center; gap:0; line-height:1; text-decoration:none; } .nav-logo span{color:var(--primary);} /* Logo icon — mask-based so color is pure CSS */ .nav-logo .logo-icon, .footer-logo .logo-icon{ display:inline-block; flex-shrink:0; -webkit-mask-image:url('/images/icon.svg'); mask-image:url('/images/icon.svg'); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; background-color:var(--primary); width:28px; height:28px; margin-right:0.2em; } [data-theme="dark"] .nav-logo .logo-icon, [data-theme="dark"] .footer-logo .logo-icon{ background-color:var(--primary-400); } @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .nav-logo .logo-icon, :root:not([data-theme="light"]) .footer-logo .logo-icon{background-color:var(--primary-400);} } .nav-links{display:flex; align-items:center; gap:20px;} .nav-links-center{ display:flex; gap:30px; font-size:15px; font-weight:500; color:var(--text); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } .nav-links-center a{position:relative; padding:4px 0;} .nav-links-center a::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--primary); transition:width .25s ease; } .nav-links-center a:hover::after{width:100%;} .nav-links a:not(.btn){ font-size:15px; font-weight:500; color:var(--text); position:relative; padding:4px 0; } .nav-links a:not(.btn)::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--primary); transition:width .25s ease; } .nav-links a:not(.btn):hover::after{width:100%;} .nav-hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; } .nav-hamburger span{width:24px; height:2px; background:var(--text); border-radius:2px; transition:transform .25s ease, opacity .25s ease;} .nav-mobile{ display:none; flex-direction:column; gap:18px; padding:20px 32px 28px; background:var(--surface); border-bottom:1px solid var(--border); } .nav-mobile.open{display:flex;} .nav-mobile a:not(.btn){font-size:16px; font-weight:500; color:var(--text);} /* ---------- Dark mode toggle ---------- */ .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--text); cursor:pointer; flex-shrink:0; transition:border-color .2s ease, background .2s ease, transform .2s ease; } .theme-toggle:hover{border-color:var(--text-soft); transform:translateY(-1px);} .theme-toggle svg{width:18px; height:18px; display:block;} .theme-toggle .icon-sun{display:none;} .theme-toggle .icon-moon{display:block;} :root[data-theme="dark"] .theme-toggle .icon-sun{display:block;} :root[data-theme="dark"] .theme-toggle .icon-moon{display:none;} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block;} :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none;} } /* ---------- Section shells ---------- */ section{padding:96px 0;} .section-alt{background:var(--bg-alt);} .section-head{max-width:640px; margin:0 0 56px;} .section-head.center{margin:0 auto 56px; text-align:center;} .section-label{ display:inline-block; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--primary-strong); margin-bottom:14px; } .section-title{font-size:clamp(28px,3.4vw,38px); font-weight:700; margin-bottom:16px;} .section-sub{font-size:17px; color:var(--text-soft);} .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--primary-strong); background:var(--primary-tint); padding:7px 16px; border-radius:20px; margin-bottom:22px; } .eyebrow-dot{width:6px; height:6px; border-radius:50%; background:var(--primary); display:inline-block;} /* ---------- Hero (Option A: centered, rich AI-in-action animation) ---------- */ .hero{padding:168px 0 96px; background:var(--bg-alt);} .hero-shell{ text-align:center; } .hero-shell h1{ font-size:clamp(32px,4.4vw,44px); font-weight:800; color:var(--text); max-width:760px; margin:0 auto 18px; letter-spacing:-0.02em; line-height:1.3; } .hero-shell p.lead{font-size:17px; color:var(--text-soft); max-width:560px; margin:0 auto 34px;} .hero-ctas{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:52px;} .hero-sources{display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:20px;} .source-chip{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--text-soft); background:var(--surface); border:1px solid var(--border); padding:7px 15px; border-radius:999px; transition:color .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease, transform .35s ease; } .source-chip .ic{font-size:14px;} .source-chip.active{ color:var(--primary-strong); border-color:var(--primary-300); background:var(--primary-tint); box-shadow:0 0 0 4px var(--primary-tint-strong); transform:translateY(-1px); } .chatdemo{max-width:920px; margin:0 auto;} .chatdemo-window{ background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-lg); overflow:hidden; text-align:left; display:flex; flex-direction:column; height:460px; } .chatdemo-dots{display:flex; gap:6px; padding:18px 22px; border-bottom:1px solid var(--border); flex-shrink:0;} .chatdemo-dots span{width:10px; height:10px; border-radius:50%; background:var(--border-strong);} .chatdemo-typing{ display:flex; gap:5px; background:var(--bg-alt); padding:12px 16px; border-radius:14px 14px 14px 4px; width:fit-content; } .chatdemo-typing span{width:7px; height:7px; border-radius:50%; background:var(--text-faint); animation:chatBounce 1s infinite ease-in-out;} .chatdemo-typing span:nth-child(2){animation-delay:.15s;} .chatdemo-typing span:nth-child(3){animation-delay:.3s;} .chatdemo-inputbar{ display:flex; align-items:center; gap:10px; padding:18px 22px; border-top:1px solid var(--border); background:var(--surface); flex-shrink:0; } .chatdemo-typed{font-size:15px; color:var(--text); white-space:nowrap; overflow:hidden;} .chatdemo-placeholder{font-size:15px; color:var(--text-faint);} .chatdemo-cursor{display:inline-block; width:2px; height:17px; background:var(--primary); animation:chatBlink 1s step-end infinite; vertical-align:middle; margin-left:1px;} .chatdemo-inputrow{flex:1; display:flex; align-items:center; min-width:0;} .chatdemo-send{ width:38px; height:38px; border-radius:50%; background:var(--primary); color:var(--on-primary); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; } .hero-body{flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:14px; overflow:hidden; justify-content:flex-end; text-align:left;} .hero-query{ align-self:flex-end; max-width:78%; background:var(--primary); color:var(--on-primary); padding:12px 20px; border-radius:16px 16px 4px 16px; font-size:15px; font-weight:500; opacity:0; transform:translateY(8px); animation:chatIn .4s ease forwards; } .hero-response{align-self:stretch; opacity:0; transform:translateY(8px); animation:chatIn .4s ease forwards;} .hero-response.leaving, .hero-query.leaving{animation:chatOut .4s ease forwards;} .resp-card{background:var(--bg-alt); border:1px solid var(--border); border-radius:16px; padding:24px 28px;} .resp-card-title{font-family:'Sora',sans-serif; font-size:15px; font-weight:700; color:var(--text); margin-bottom:18px;} .resp-row{display:flex; align-items:center; gap:13px; margin-bottom:14px;} .resp-row:last-child{margin-bottom:0;} .resp-avatar{ width:32px; height:32px; border-radius:50%; background:var(--primary-tint-strong); color:var(--primary-strong); font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .resp-name{font-size:14px; font-weight:600; color:var(--text); width:92px; flex-shrink:0;} .risk-bar{flex:1; height:8px; background:var(--border); border-radius:4px; overflow:hidden;} .risk-bar span{display:block; height:100%; background:var(--primary); border-radius:4px; width:0; transition:width 1s ease;} .risk-pct{font-size:13.5px; font-weight:700; color:var(--text-soft); width:40px; text-align:right; flex-shrink:0;} .chart-bars{display:flex; align-items:flex-end; gap:12px; height:130px; margin-bottom:16px;} .chart-bar{flex:1; background:var(--primary-tint-strong); border-radius:6px 6px 0 0; height:0; transition:height 1s cubic-bezier(.2,.8,.2,1);} .chart-bar.emph{background:var(--primary);} .chart-caption{font-size:14px; font-weight:600; color:var(--primary-strong);} .resp-text{font-size:14.5px; color:var(--text-soft); margin:0 0 16px; line-height:1.6;} .tag-row{display:flex; gap:10px; flex-wrap:wrap;} .tag{font-size:12.5px; font-weight:700; padding:5px 13px; border-radius:999px; display:inline-block;} .tag-positive{background:var(--tag-positive-bg); color:var(--tag-positive-text);} .tag-neutral{background:var(--border); color:var(--text-soft);} .tag-urgent{background:var(--tag-urgent-bg); color:var(--tag-urgent-text);} .resp-card-product{display:flex; gap:19px; align-items:center;} .product-thumb{width:64px; height:64px; border-radius:14px; background:var(--primary-tint-strong); display:flex; align-items:center; justify-content:center; font-size:30px; flex-shrink:0;} .product-info{flex:1;} .product-name{font-size:15px; font-weight:700; color:var(--text); margin-bottom:9px;} .hero-footnote{margin-top:26px; font-size:13px; color:var(--text-faint);} @keyframes chatIn{ to{opacity:1; transform:translateY(0);} } @keyframes chatOut{ to{opacity:0; transform:translateY(-8px);} } @keyframes chatBounce{ 0%,80%,100%{transform:translateY(0); opacity:.5;} 40%{transform:translateY(-4px); opacity:1;} } @keyframes chatBlink{ 50%{opacity:0;} } /* ---------- Core Philosophy ---------- */ .pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:8px; } .pillar-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:36px 30px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .pillar-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--border-strong);} .pillar-icon{ width:52px; height:52px; border-radius:14px; background:var(--primary-tint); color:var(--primary-strong); display:flex; align-items:center; justify-content:center; margin-bottom:22px; } .pillar-icon i{width:24px; height:24px;} .pillar-card h3{font-size:19px; font-weight:700; margin-bottom:12px;} .pillar-card p{font-size:16px; color:var(--text-soft); line-height:1.7;} /* ---------- Services ---------- */ .services-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:8px; } .service-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:34px 32px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .service-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--border-strong);} .service-icon{ width:48px; height:48px; border-radius:12px; background:var(--primary-tint); color:var(--primary-strong); display:flex; align-items:center; justify-content:center; margin-bottom:20px; } .service-icon i{width:22px; height:22px;} .service-card h3{font-size:18px; font-weight:700; margin-bottom:8px;} .service-card > p{font-size:15.5px; color:var(--text-soft); margin-bottom:20px; line-height:1.6;} .service-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;} .service-list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--text); font-weight:400; line-height:1.6; } .service-list li::before{ content:''; flex:none; width:6px; height:6px; border-radius:50%; background:var(--primary); margin-top:9px; } /* ---------- How It Works ---------- */ .steps-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:8px; position:relative; } .step-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px 26px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; position:relative; } .step-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--border-strong);} .step-card::after{ content:''; position:absolute; top:56px; right:-24px; width:24px; height:1px; background:var(--border-strong); display:none; } .step-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;} .step-num{font-family:'Sora',sans-serif; font-size:14px; font-weight:700; color:var(--text-faint); letter-spacing:.04em;} .step-icon{ width:44px; height:44px; border-radius:12px; background:var(--primary-tint); color:var(--primary-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .step-icon i{width:20px; height:20px;} .step-card h3{font-size:18px; font-weight:700; margin-bottom:10px;} .step-card p{font-size:15px; color:var(--text-soft); line-height:1.65;} /* ---------- Technology ---------- */ .tech-list{display:flex; flex-direction:column; margin-top:8px;} .tech-row{ display:grid; grid-template-columns:280px 1fr; gap:40px; padding:32px 0; border-bottom:1px solid var(--border); } .tech-row:first-child{padding-top:8px;} .tech-row:last-child{border-bottom:none; padding-bottom:8px;} .tech-head{display:flex; gap:16px; align-items:flex-start;} .tech-icon{ width:44px; height:44px; border-radius:12px; background:var(--primary-tint); color:var(--primary-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .tech-icon i{width:20px; height:20px;} .tech-head h3{font-size:18px; font-weight:700; margin-bottom:6px; line-height:1.3;} .tech-head p{font-size:14px; color:var(--text-soft); line-height:1.55;} .tech-tags{display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start;} .tech-tags span{ font-size:14px; font-weight:600; color:var(--text); background:var(--surface); border:1px solid var(--border); padding:9px 17px; border-radius:10px; transition:border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease; } .tech-tags span:hover{border-color:var(--primary-300); color:var(--primary-strong); background:var(--primary-tint); transform:translateY(-1px);} /* ---------- Pricing ---------- */ .pricing-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:8px; align-items:stretch; } .price-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:38px 36px; display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .price-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);} .price-card.featured{border-color:var(--primary-300); box-shadow:var(--shadow-md); position:relative;} .price-icon{ width:48px; height:48px; border-radius:12px; background:var(--primary-tint); color:var(--primary-strong); display:flex; align-items:center; justify-content:center; margin-bottom:22px; } .price-icon i{width:22px; height:22px;} .price-card.featured .price-icon{background:var(--primary); color:var(--on-primary);} .price-badge{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--primary-strong); margin-bottom:10px;} .price-card h3{font-size:22px; font-weight:700; margin-bottom:14px;} .price-card > p{font-size:15.5px; color:var(--text-soft); line-height:1.65; margin-bottom:22px;} .price-list{list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:13px; flex:1;} .price-list li{ display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--text); font-weight:400; line-height:1.55; } .price-list li::before{ content:'✓'; flex:none; color:var(--primary-strong); font-weight:700; font-size:14px; margin-top:1px; } .price-cta{ font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:14.5px; letter-spacing:.02em; display:inline-flex; align-items:center; gap:6px; align-self:flex-start; padding:14px 26px; border-radius:10px; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; } .price-cta-outline{color:var(--text); border:1.5px solid var(--border-strong); background:transparent;} .price-cta-outline:hover{border-color:var(--text-soft);} .price-cta-primary{background:var(--primary); color:var(--on-primary);} .price-cta-primary:hover{background:var(--primary-hover); transform:translateY(-2px); box-shadow:var(--shadow-md);} .trust-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:24px; } .trust-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px 24px; text-align:center; } .trust-icon{ width:40px; height:40px; border-radius:10px; background:var(--primary-tint); color:var(--primary-strong); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; } .trust-icon i{width:18px; height:18px;} .trust-card h4{font-size:16px; font-weight:700; margin-bottom:8px;} .trust-card p{font-size:14px; color:var(--text-soft); line-height:1.55;} /* ---------- CTA Banner ---------- */ .cta-banner{background:var(--ink-surface); padding:88px 0;} /* When a CTA banner sits directly above the footer, both use the same flat ink-surface color and would otherwise merge into one seamless block — add a faint seam so the boundary between the two sections stays visible. */ .cta-banner + .site-footer{border-top:1px solid rgba(255,255,255,.1); padding-top:63px;} .cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; } .cta-text{max-width:620px;} .cta-label{color:var(--primary-300);} .cta-title{ font-family:'Sora',sans-serif; font-size:clamp(26px,3.2vw,36px); font-weight:700; color:#fff; margin-bottom:14px; letter-spacing:-0.01em; line-height:1.25; } .cta-sub{font-size:16px; color:rgba(255,255,255,.68); line-height:1.65;} .cta-ctas{display:flex; gap:14px; flex-wrap:wrap; flex-shrink:0;} /* ---------- Contact / Booking ---------- */ .contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; margin-top:8px; align-items:start; } .contact-info h3{font-size:19px; font-weight:700; margin-bottom:22px;} .contact-checklist{list-style:none; margin:0 0 36px; padding:0; display:flex; flex-direction:column; gap:20px;} .contact-checklist li{display:flex; align-items:flex-start; gap:14px; font-size:15.5px; color:var(--text-soft); line-height:1.55;} .contact-checklist li i{ width:38px; height:38px; border-radius:10px; background:var(--primary-tint); color:var(--primary-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .contact-checklist li i{width:38px; height:38px; padding:9px; box-sizing:border-box;} .contact-direct{border-top:1px solid var(--border); padding-top:24px;} .contact-direct-label{font-size:13.5px; color:var(--text-faint); margin-bottom:8px;} .contact-direct-link{ display:inline-flex; align-items:center; gap:9px; font-size:16px; font-weight:600; color:var(--text); transition:color .2s ease; } .contact-direct-link i{width:18px; height:18px; color:var(--primary-strong);} .contact-direct-link:hover{color:var(--primary-strong);} .contact-form{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:36px; display:flex; flex-direction:column; gap:20px; box-shadow:var(--shadow-sm); } .form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;} .form-field{display:flex; flex-direction:column; gap:8px;} .form-field label{font-size:13.5px; font-weight:600; color:var(--text-soft);} .form-field input, .form-field select, .form-field textarea{ font-family:'IBM Plex Sans',sans-serif; font-size:15px; color:var(--text); background:var(--bg); border:1.5px solid var(--border); border-radius:10px; padding:12px 14px; width:100%; transition:border-color .2s ease, box-shadow .2s ease; } .form-field input::placeholder, .form-field textarea::placeholder{color:var(--text-faint);} .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--primary-300); box-shadow:0 0 0 4px var(--focus-ring); } .form-field textarea{resize:vertical; min-height:96px;} .form-field select{appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7A6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:38px; } .form-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;} .form-submit{justify-content:center; width:100%; position:relative; margin-top:4px;} .form-submit-spinner{ display:none; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite; } .contact-form.submitting .form-submit-spinner{display:inline-block;} .contact-form.submitting .form-submit-label{opacity:.85;} .contact-form.submitting .form-submit{pointer-events:none; opacity:.85;} @keyframes spin{ to{transform:rotate(360deg);} } .form-status{font-size:14px; text-align:center; margin-top:-6px; min-height:20px;} .form-status.success{color:#1F8A57;} .form-status.error{color:#DC2626;} /* ---------- Footer ---------- */ .site-footer{background:var(--ink-surface); color:rgba(255,255,255,.7); padding:64px 0 28px;} .footer-inner{ max-width:var(--max-width); margin:0 auto; padding:0 32px; display:grid; grid-template-columns:1.3fr 0.8fr 0.8fr; gap:40px; margin-bottom:44px; } .footer-logo{font-family:'Sora',sans-serif; font-weight:700; font-size:25px; color:#fff; margin-bottom:16px; display:inline-flex; align-items:center; gap:0; line-height:1; text-decoration:none;} .footer-logo .logo-icon{width:32px; height:32px; margin-right:0.2em; background-color:var(--primary-400);} .footer-logo span{color:var(--primary-400);} .footer-tagline{font-size:16px; line-height:1.6; color:rgba(255,255,255,.55); max-width:300px; margin-bottom:20px;} .footer-col-label{font-size:14.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.85); margin-bottom:18px;} .footer-col-links{display:flex; flex-direction:column; gap:13px;} .footer-col-links a{font-size:16px; color:rgba(255,255,255,.6); transition:color .2s ease;} .footer-col-links a:hover{color:#fff;} .footer-bottom{ max-width:var(--max-width); margin:0 auto; padding:24px 32px 0; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; align-items:center; font-size:14.5px; color:rgba(255,255,255,.45); } /* ---------- Responsive ---------- */ @media (max-width:980px){ .nav-links{display:none;} .nav-links-center{display:none;} .nav-hamburger{display:flex;} .hero{padding-top:140px;} .footer-inner{grid-template-columns:1fr 1fr;} .pillars{grid-template-columns:1fr;} .services-grid{grid-template-columns:1fr;} .steps-row{grid-template-columns:1fr 1fr;} .pricing-grid{grid-template-columns:1fr;} .trust-row{grid-template-columns:1fr;} .tech-row{grid-template-columns:1fr; gap:18px;} .contact-grid{grid-template-columns:1fr; gap:40px;} } @media (max-width:760px){ .hero-shell h1{font-size:30px;} .chatdemo-window{height:420px;} } @media (max-width:640px){ .wrap, .nav-inner, .footer-inner, .footer-bottom{padding-left:20px; padding-right:20px;} section{padding:64px 0;} .footer-inner{grid-template-columns:1fr; gap:32px;} .footer-bottom{flex-direction:column; gap:10px; text-align:center;} .steps-row{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} .contact-form{padding:26px;} .cta-inner{flex-direction:column; align-items:flex-start;} } /* ============================================================ LOCATIONS PAGE ============================================================ */ .locations-hero{padding:172px 0 64px; background:var(--bg-alt);} .locations-hero .section-head{max-width:760px;} .locations-hero .section-title{font-size:clamp(32px,4.2vw,46px);} /* The hero and the section that follows both use the tinted bg-alt surface — without a seam they read as one long, undifferentiated block. */ .locations-hero + .section-alt{border-top:1px solid var(--border);} .engage-model{padding-top:88px; padding-bottom:96px;} .model-flow{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:start; gap:0 18px; margin-top:8px; } .model-step{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px 26px; text-align:center; box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease; } .model-step:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);} .model-icon{ width:56px; height:56px; border-radius:14px; background:var(--primary-tint); color:var(--primary-strong); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; } .model-icon i{width:26px; height:26px;} .model-tag{ display:inline-block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--primary-strong); background:var(--primary-tint); padding:5px 12px; border-radius:20px; margin-bottom:14px; } .model-step h3{font-size:18px; font-weight:700; margin-bottom:10px;} .model-step p{font-size:14.5px; color:var(--text-soft); line-height:1.6;} .model-arrow{ display:flex; align-items:center; justify-content:center; color:var(--border-strong); padding-top:60px; } .model-arrow i{width:22px; height:22px;} .locations-grid-section{padding-bottom:96px;} .location-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:8px;} .location-card{ background:var(--surface); border:1px solid var(--border); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .location-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--border-strong);} .location-media{aspect-ratio:4/3; overflow:hidden; background:var(--bg-alt);} .location-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;} .location-card:hover .location-media img{transform:scale(1.04);} .location-body{padding:26px 28px 30px;} .location-body h3{font-size:22px; font-weight:700; margin-bottom:4px;} .location-country{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--primary-strong); margin-bottom:14px; } .location-body > p:last-of-type{font-size:15px; color:var(--text-soft); line-height:1.6;} .location-link{ display:inline-block; margin-top:14px; font-size:14.5px; font-weight:700; color:var(--primary-strong); } .location-link:hover{text-decoration:underline;} /* Responsive: locations */ @media (max-width:980px){ .model-flow{grid-template-columns:1fr; gap:18px;} .model-arrow{display:none;} .location-grid{grid-template-columns:1fr;} } @media (max-width:640px){ .locations-hero{padding-top:140px;} } /* ============================================================ CITY LANDING PAGES (AI Consulting Sydney/Melbourne/Auckland) ============================================================ */ .source-note{font-size:12.5px; color:var(--text-faint); line-height:1.6; margin-top:14px;} .location-grid.cols-2{grid-template-columns:repeat(2,1fr); max-width:760px; margin-left:auto; margin-right:auto;} .location-media-remote{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; background:var(--ink-surface); } .location-media-remote i{width:56px; height:56px; color:var(--primary); stroke-width:1.5;} .region-label{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--text-faint); margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--border); } .region-group{margin-bottom:40px;} .region-group:last-child{margin-bottom:0;} .region-group .location-grid{margin-top:0;} /* When 3 cards in a region group, keep 3-col; when 2 cards, use 2-col centered */ .location-grid.cols-region-3{grid-template-columns:repeat(3,1fr);} .location-grid.cols-region-2{grid-template-columns:repeat(2,1fr); max-width:760px; margin-left:auto; margin-right:auto;} @media (max-width:980px){ .location-grid.cols-region-3{grid-template-columns:1fr;} .location-grid.cols-region-2{grid-template-columns:1fr;} } .city-model-recap{margin-top:8px;} .city-model-note{text-align:center; font-size:15px; color:var(--text-soft); margin-top:28px;} .city-model-note a{color:var(--primary-strong); font-weight:600;} .faq-list{display:flex; flex-direction:column; gap:14px; max-width:760px; margin:0 auto;} .faq-item{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:24px 28px; } .faq-item h3{font-size:16.5px; font-weight:700; margin-bottom:8px;} .faq-item p{font-size:15px; color:var(--text-soft); line-height:1.7; margin:0;} @media (max-width:640px){ .location-grid.cols-2{grid-template-columns:1fr;} } /* ============================================================ BLOG — landing page + article template ============================================================ */ /* ---------- Blog landing: header ---------- */ .blog-header{padding:172px 0 64px; background:var(--bg-alt);} .blog-header .section-head{max-width:720px; margin:0 0 0;} .blog-header .section-title{font-size:clamp(32px,4.2vw,46px);} /* ---------- Blog landing: featured post ---------- */ .blog-featured{padding:56px 0 0;} .featured-card{ display:grid; grid-template-columns:1.05fr 1fr; gap:0; align-items:stretch; background:var(--surface); border:1px solid var(--border); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-md); transition:transform .3s ease, box-shadow .3s ease; } .featured-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);} .featured-card .featured-media{position:relative; min-height:280px;} .featured-card .featured-media img{width:100%; height:100%; object-fit:cover; display:block;} .featured-card .featured-body{padding:44px 46px; display:flex; flex-direction:column; justify-content:center;} .featured-tag{ align-self:flex-start; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--primary-strong); background:var(--primary-tint); padding:6px 14px; border-radius:20px; margin-bottom:16px; } .featured-body h2{font-size:clamp(22px,2.6vw,30px); font-weight:700; margin-bottom:14px; line-height:1.3;} .featured-body p{font-size:15.5px; color:var(--text-soft); line-height:1.65; margin-bottom:22px;} .featured-meta{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-faint); margin-bottom:22px;} .featured-meta .dot{width:3px; height:3px; border-radius:50%; background:var(--text-faint);} .featured-link{display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--primary-strong);} .featured-link i{width:16px; height:16px; transition:transform .2s ease;} .featured-card:hover .featured-link i{transform:translateX(3px);} /* ---------- Blog landing: grid of post cards ---------- */ .blog-grid-section{padding:56px 0 96px;} .blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:8px;} .post-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .post-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--border-strong);} .post-card .post-media{aspect-ratio:16/10; overflow:hidden; background:var(--bg-alt);} .post-card .post-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;} .post-card:hover .post-media img{transform:scale(1.04);} .post-card .post-body{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1;} .post-tag{ align-self:flex-start; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--primary-strong); background:var(--primary-tint); padding:5px 12px; border-radius:20px; margin-bottom:14px; } .post-card h3{font-size:18px; font-weight:700; margin-bottom:10px; line-height:1.35;} .post-card p{font-size:14.5px; color:var(--text-soft); line-height:1.6; margin-bottom:18px; flex:1;} .post-foot{display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--text-faint); border-top:1px solid var(--border); padding-top:16px;} .post-read{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--primary-strong);} .post-read i{width:14px; height:14px;} /* ---------- Article template ---------- */ .article-header{padding:168px 0 0; background:var(--bg-alt);} .article-header .wrap{max-width:820px;} .article-crumb{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-faint); margin-bottom:26px;} .article-crumb a{color:var(--text-soft); font-weight:600;} .article-crumb a:hover{color:var(--primary-strong);} .article-tag{ display:inline-block; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--primary-strong); background:var(--primary-tint); padding:6px 14px; border-radius:20px; margin-bottom:20px; } .article-header h1{font-size:clamp(30px,4.2vw,46px); font-weight:800; line-height:1.25; margin-bottom:20px;} .article-deck{font-size:18px; color:var(--text-soft); line-height:1.6; max-width:680px; margin-bottom:30px;} .article-meta{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-faint); padding-bottom:40px;} .article-meta .dot{width:3px; height:3px; border-radius:50%; background:var(--text-faint);} .article-hero-media{padding:0 0 0;} .article-hero-media img{ width:100%; display:block; aspect-ratio:16/8; object-fit:cover; border-radius:20px; margin-top:-64px; box-shadow:var(--shadow-lg); position:relative; z-index:2; } .article-hero-media .wrap{max-width:980px;} .article-body{padding:80px 0 40px;} .article-body .wrap{max-width:720px;} .article-body > .wrap > *{margin-bottom:26px;} .article-body h2{font-size:26px; font-weight:700; margin-top:20px; margin-bottom:18px; line-height:1.35;} .article-body h3{font-size:20px; font-weight:700; margin-top:8px; margin-bottom:14px;} .article-body p{font-size:17px; color:var(--text-soft); line-height:1.8;} .article-body p.lede{font-size:19.5px; color:var(--text); line-height:1.65; font-weight:500;} .article-body ul, .article-body ol{padding-left:22px; display:flex; flex-direction:column; gap:12px; font-size:16.5px; color:var(--text-soft); line-height:1.7;} .article-body li strong, .article-body p strong{color:var(--text); font-weight:600;} .article-body a{color:var(--primary-strong); font-weight:600; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px;} .article-body a:hover{text-decoration-color:var(--primary-strong);} .article-body a.btn, .article-cta a.btn{text-decoration:none; color:var(--on-primary);} /* Definition / callout boxes */ .callout{ border-radius:16px; padding:28px 30px; border:1px solid var(--border); background:var(--bg-alt); display:flex; gap:18px; align-items:flex-start; } .callout-icon{ width:40px; height:40px; border-radius:11px; background:var(--primary-tint); color:var(--primary-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .callout-icon i{width:19px; height:19px;} .callout-body h4{font-family:'Sora',sans-serif; font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--primary-strong); margin-bottom:8px;} .callout-body p{font-size:15.5px; color:var(--text); line-height:1.7; margin:0;} .callout-body p + p{margin-top:10px;} /* Ink (dark) callout — for the single most important insight in a post */ .callout-ink{background:var(--ink-surface); border:none;} .callout-ink .callout-icon{background:rgba(251,123,61,.16); color:var(--primary-300);} .callout-ink .callout-body h4{color:var(--primary-300);} .callout-ink .callout-body p{color:rgba(255,255,255,.82);} /* Pull quote */ .pull-quote{ border-left:3px solid var(--primary); padding:6px 0 6px 28px; margin:8px 0; } .pull-quote p{font-family:'Sora',sans-serif; font-size:22px; font-weight:600; color:var(--text); line-height:1.5; margin:0;} .pull-quote cite{display:block; font-family:'IBM Plex Sans',sans-serif; font-style:normal; font-size:14px; color:var(--text-faint); margin-top:12px;} /* Stat strip */ .stat-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;} .stat-box{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px 20px; text-align:center;} .stat-box .num{font-family:'Sora',sans-serif; font-size:30px; font-weight:800; color:var(--primary-strong); line-height:1;} .stat-box .label{font-size:13px; color:var(--text-soft); margin-top:8px; line-height:1.5;} /* Comparison table */ .compare-wrap{overflow-x:auto; border-radius:14px; border:1px solid var(--border);} .compare-table{width:100%; border-collapse:collapse; font-size:15px; background:var(--surface); min-width:520px;} .compare-table th, .compare-table td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; line-height:1.55;} .compare-table th{ font-family:'Sora',sans-serif; font-size:13.5px; font-weight:700; color:var(--text); background:var(--bg-alt); text-transform:uppercase; letter-spacing:.04em; } .compare-table td{color:var(--text-soft);} .compare-table tr:last-child td{border-bottom:none;} .compare-table td:first-child, .compare-table th:first-child{color:var(--text); font-weight:600;} /* Numbered process list (for "how it works"-style steps within a post) */ .article-steps{display:flex; flex-direction:column; gap:0;} .article-step{display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--border);} .article-steps .article-step:last-child{border-bottom:none; padding-bottom:0;} .article-steps .article-step:first-child{padding-top:0;} .article-step-num{ font-family:'Sora',sans-serif; font-weight:800; font-size:15px; color:var(--primary-strong); background:var(--primary-tint); width:36px; height:36px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .article-step-body h4{font-size:16.5px; font-weight:700; margin-bottom:6px;} .article-step-body p{font-size:15px; color:var(--text-soft); line-height:1.65; margin:0;} /* Key takeaways box */ .takeaways{background:var(--bg-alt); border:1px solid var(--border); border-radius:18px; padding:34px 38px;} .takeaways h3{font-size:18px; font-weight:700; margin-bottom:20px; display:flex; align-items:center; gap:10px;} .takeaways h3 i{width:20px; height:20px; color:var(--primary-strong);} .takeaways ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;} .takeaways li{display:flex; align-items:flex-start; gap:13px; font-size:15.5px; color:var(--text); line-height:1.6;} .takeaways li i{width:20px; height:20px; color:var(--primary-strong); flex-shrink:0; margin-top:1px;} /* Post-footer CTA */ .article-cta{background:var(--ink-surface); border-radius:20px; padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;} .article-cta h3{color:#fff; font-size:22px; font-weight:700; margin-bottom:8px;} .article-cta p{color:rgba(255,255,255,.68); font-size:15px; max-width:440px; margin:0;} /* Related posts */ .related{padding:20px 0 96px;} .related .section-head{margin-bottom:36px;} .related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;} /* Responsive: blog */ @media (max-width:980px){ .featured-card{grid-template-columns:1fr;} .featured-card .featured-media{min-height:220px;} .blog-grid{grid-template-columns:1fr 1fr;} .related-grid{grid-template-columns:1fr 1fr;} .stat-strip{grid-template-columns:1fr;} .article-cta{flex-direction:column; align-items:flex-start;} } @media (max-width:760px){ .article-hero-media img{margin-top:-40px;} } @media (max-width:640px){ .blog-header{padding-top:140px;} .article-header{padding-top:140px;} .blog-grid{grid-template-columns:1fr;} .related-grid{grid-template-columns:1fr;} .featured-body{padding:30px 26px;} .takeaways{padding:26px 24px;} .article-cta{padding:32px 28px;} .pull-quote p{font-size:19px;} }