/* ==========================================================================
   AI-first solutions page
   Extends the tokens declared in styles.css (--cream, --charcoal, --orange…)
   ========================================================================== */

.ai-page { --ai-dark: linear-gradient(120deg, rgba(18,18,18,.99), rgba(34,28,25,.98) 55%, rgba(30,29,24,.99)); }

/* --- Shared node diagram styling (hero + ecosystem map) ------------------ */
.flowmap, .ecomap { display:block; width:100%; height:auto; overflow:visible; }
.flowmap .wire, .ecomap .wire { fill:none; stroke:rgba(23,23,23,.22); stroke-width:1.25; stroke-linecap:round; }
.flowmap .node rect, .ecomap .node rect { fill:rgba(255,252,247,.86); stroke:rgba(23,23,23,.16); stroke-width:1; }
.flowmap .node text, .ecomap .node text { fill:var(--charcoal); font-family:var(--sans); font-size:14px; font-weight:600; text-anchor:middle; }
.flowmap .node-top rect, .ecomap .node-top rect { fill:var(--charcoal); stroke:none; }
.flowmap .node-top text, .ecomap .node-top text { fill:var(--cream); font-size:12px; font-weight:700; letter-spacing:.12em; }
.flowmap .node-core rect, .ecomap .node-core rect { fill:var(--orange); stroke:none; }
.flowmap .node-core text, .ecomap .node-core text { fill:#fff; font-size:16px; font-weight:700; letter-spacing:.16em; }
.flowmap .node-leaf rect, .ecomap .node-leaf rect { fill:transparent; stroke:rgba(23,23,23,.22); stroke-dasharray:3 4; }
.flowmap .node-leaf text, .ecomap .node-leaf text { fill:#6b625c; font-size:13px; font-weight:500; }
.flowmap .particles circle, .ecomap .particles circle { fill:var(--orange); }
.flowmap .core-glow { animation:ai-breathe 4.4s ease-in-out infinite; transform-origin:210px 202px; }
.flowmap .node-app rect { animation:ai-nodepulse 3.8s ease-in-out infinite; }
.flowmap .node-app:nth-of-type(2) rect { animation-delay:.9s; }

@keyframes ai-breathe { 0%,100% { opacity:.5; transform:scale(.94); } 50% { opacity:1; transform:scale(1.06); } }
@keyframes ai-nodepulse { 0%,100% { stroke:rgba(23,23,23,.16); } 50% { stroke:rgba(217,92,50,.42); } }

/* --- 01. Hero ------------------------------------------------------------ */
.ai-hero { position:relative; overflow:hidden; padding:clamp(132px,13vw,182px) 0 clamp(72px,8vw,116px); background:linear-gradient(135deg,#f9ede0 0%,var(--cream) 45%,#f8dfc5 100%); }
.ai-hero::before { content:""; position:absolute; inset:auto -12% -42% 46%; height:72%; border-radius:50%; background:radial-gradient(circle,rgba(217,92,50,.12),transparent 68%); pointer-events:none; }
.ai-hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; gap:clamp(40px,6vw,88px); }
.ai-hero-title { margin:0; font-family:var(--hero-sans); font-size:clamp(52px,7.4vw,124px); font-weight:500; line-height:.88; letter-spacing:.005em; }
.ai-hero-title .hero-line { display:block; will-change:transform; }
/* The two lines drift apart slightly as the visitor scrolls (see ai.js). */
.ai-hero-title .hero-line { transform:translateX(var(--shift, 0px)); }
.ai-hero-title .hero-line-b { color:var(--orange); font-family:var(--serif); font-weight:400; letter-spacing:-.01em; }
.ai-hero-intro { margin-top:34px; max-width:560px; }
.ai-hero-intro p { color:#4a4340; font-size:clamp(16px,1.4vw,20px); line-height:1.6; }
.ai-hero-intro .hero-actions { justify-content:flex-start; margin-top:32px; }
.ai-hero-visual { position:relative; }
/* keep the whole chain inside the first screen */
.ai-hero-visual .flowmap { width:auto; max-width:100%; max-height:min(52vh,420px); margin:0 auto; }
.flowmap-caption { margin:20px auto 0; max-width:44ch; text-align:center; color:#6b625c; font-size:13px; line-height:1.6; }

.ai-page .hero-line { animation:ai-enter .75s both; }
.ai-page .hero-line-b { animation-delay:.12s; }
@keyframes ai-enter { from { opacity:0; transform:translateY(22px); } to { opacity:1; } }

/* --- 02. AI is already inside Zoho -------------------------------------- */
.ai-inside { color:var(--cream); background:var(--ai-dark); }
.ai-inside .section-heading h2 { font-family:var(--hero-sans); font-weight:500; text-transform:none; }
.ai-inside .section-heading h2 em { color:var(--orange); font-family:var(--serif); font-weight:400; letter-spacing:0; }
.ai-inside-body { max-width:620px; margin:40px auto 0; text-align:center; }
.ai-inside-reply { text-align:left; }
.ai-inside .lead { color:#d9d1c9; line-height:1.65; }
.ai-inside-reply { margin-top:40px; padding-left:24px; border-left:2px solid rgba(217,92,50,.5); }
.ai-inside-question { color:#b0a89e; }
.ai-inside-reply .ai-highlight { margin-top:18px; }
.ai-highlight { margin:34px 0 0; font-family:var(--hero-sans); font-size:clamp(30px,3.6vw,54px); font-weight:500; line-height:1.02; letter-spacing:.005em; }
.ai-highlight em { color:var(--orange); font-family:var(--serif); font-weight:400; letter-spacing:0; }
/* the diagram sits on a dark panel, so invert its neutrals */
.ai-inside .ecomap .wire { stroke:rgba(255,252,247,.22); }
.ai-inside .ecomap .node rect { fill:rgba(255,252,247,.07); stroke:rgba(255,252,247,.22); }
.ai-inside .ecomap .node text { fill:var(--cream); }
.ai-inside .ecomap .node-top rect { fill:var(--cream); }
.ai-inside .ecomap .node-top text { fill:var(--charcoal); }
.ai-inside .ecomap .node-core rect { fill:var(--orange); }
.ai-inside .ecomap .node-leaf rect { fill:none; stroke:rgba(255,252,247,.26); }
.ai-inside .ecomap .node-leaf text { fill:#c9c1ba; }

/* --- 03. Where should AI be? -------------------------------------------- */
.ai-question { background:rgba(247,241,232,.92); }
.ai-ask { max-width:1100px; }
.ask-line { margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--hero-sans); font-weight:500; letter-spacing:.005em; line-height:.94; }
.ask-label { color:var(--orange); font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.ask-line-strike .ask-quote { position:relative; display:inline-block; color:#8d867f; font-size:clamp(26px,3.6vw,54px); }
.ask-line-strike .ask-quote::after { content:""; position:absolute; left:0; top:52%; width:0; height:2px; background:rgba(141,134,127,.75); transition:width .9s ease .25s; }
.ai-ask.is-visible .ask-line-strike .ask-quote::after { width:100%; }
.ask-line-hero { margin-top:clamp(26px,3vw,44px); }
.ask-line-hero .ask-quote { font-size:clamp(42px,7vw,110px); }
.ask-quote em { color:var(--orange); font-family:var(--serif); font-weight:400; letter-spacing:0; }

.workflow-stage { margin-top:clamp(48px,6vw,80px); padding:clamp(22px,3vw,34px); border:1px solid rgba(255,255,255,.8); border-radius:26px; background:linear-gradient(135deg,rgba(243,212,193,.5),rgba(255,252,247,.5)); box-shadow:0 24px 46px rgba(103,73,47,.12),inset 0 1px 0 rgba(255,255,255,.72); backdrop-filter:blur(20px); }
.workflow-switch { display:inline-flex; gap:6px; padding:5px; border:1px solid rgba(23,23,23,.12); border-radius:999px; background:rgba(255,252,247,.72); }
.workflow-tab { padding:10px 20px; border:0; border-radius:999px; background:transparent; font:inherit; font-size:13px; font-weight:700; color:#6b625c; cursor:pointer; transition:background .25s, color .25s; }
.workflow-tab.is-active { background:var(--orange); color:#fff; }
.workflow-panels { position:relative; margin-top:clamp(26px,3vw,38px); }
.workflow-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:stretch; gap:14px; }
.workflow-list[hidden] { display:none; }
.workflow-step { position:relative; flex:1 1 160px; min-height:96px; display:flex; align-items:flex-end; padding:18px 18px 16px; border:1px solid rgba(23,23,23,.14); border-radius:14px; background:rgba(255,252,247,.86); font-size:15px; font-weight:600; line-height:1.25; opacity:0; transform:translateY(12px); transition:opacity .45s ease, transform .45s ease, border-color .3s, background .3s; }
.workflow-list.is-active .workflow-step { opacity:1; transform:none; }
.workflow-list.is-active .workflow-step:nth-child(2) { transition-delay:.09s; }
.workflow-list.is-active .workflow-step:nth-child(3) { transition-delay:.18s; }
.workflow-list.is-active .workflow-step:nth-child(4) { transition-delay:.27s; }
.workflow-list.is-active .workflow-step:nth-child(5) { transition-delay:.36s; }
.workflow-step + .workflow-step::before { content:""; position:absolute; left:-14px; top:50%; width:14px; height:1px; background:rgba(23,23,23,.26); }
.step-dot { position:absolute; left:18px; top:18px; width:8px; height:8px; border-radius:50%; background:rgba(23,23,23,.28); }
.workflow-step-core { border-color:rgba(217,92,50,.42); background:linear-gradient(145deg,rgba(253,227,211,.92),rgba(255,252,247,.86)); }
.workflow-step-core .step-dot { background:var(--orange); box-shadow:0 0 0 5px rgba(217,92,50,.16); }

.ai-question-copy { margin-top:clamp(48px,6vw,78px); max-width:760px; }
.ai-question-copy .lead + .lead { margin-top:16px; }
.ai-statement { margin:36px 0 0; font-family:var(--hero-sans); font-size:clamp(26px,3.4vw,48px); font-weight:500; line-height:1.04; letter-spacing:.005em; }
.ai-statement em { color:var(--orange); font-family:var(--serif); font-weight:400; letter-spacing:0; }

/* --- 04. From intelligence to action ------------------------------------ */
.ai-action { background:rgba(238,230,220,.9); }
.ai-action .section-heading h2 { font-family:var(--hero-sans); font-weight:500; text-transform:none; }
.ai-action .section-heading h2 em { color:var(--orange); font-family:var(--serif); font-weight:400; letter-spacing:0; }
.cap-grid { position:relative; margin-top:clamp(56px,6vw,86px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
/* faint connecting lines behind the tiles */
.cap-grid::before { content:""; position:absolute; inset:8% 12%; border:1px dashed rgba(23,23,23,.14); border-radius:28px; pointer-events:none; }
.cap-hub { position:absolute; left:50%; top:50%; z-index:2; transform:translate(-50%,-50%); padding:13px 28px; border-radius:999px; background:var(--orange); color:#fff; font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; box-shadow:0 0 0 10px rgba(217,92,50,.12),0 14px 30px rgba(217,92,50,.28); animation:ai-hub 5s ease-in-out infinite; }
@keyframes ai-hub { 0%,100% { box-shadow:0 0 0 10px rgba(217,92,50,.1),0 14px 30px rgba(217,92,50,.24); } 50% { box-shadow:0 0 0 18px rgba(217,92,50,.06),0 14px 34px rgba(217,92,50,.3); } }
.cap-tile { position:relative; z-index:1; padding:30px 28px 32px; border:1px solid rgba(255,255,255,.82); border-radius:18px; background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,252,247,.72)); box-shadow:0 17px 32px rgba(89,64,45,.1),inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter:blur(14px); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.cap-tile:hover { transform:translateY(-6px) scale(1.02); border-color:rgba(217,92,50,.34); box-shadow:0 26px 46px rgba(89,64,45,.16); }
.cap-tile.is-hot { border-color:rgba(217,92,50,.4); }
.cap-index { position:absolute; right:24px; top:24px; font-family:var(--serif); font-size:22px; color:rgba(23,23,23,.26); line-height:1; }
.cap-icon { width:30px; height:30px; color:var(--orange); }
.cap-tile h3 { margin:20px 0 10px; font-size:clamp(23px,2.2vw,30px); line-height:1.05; letter-spacing:-.03em; }
.cap-tile p { margin:0; max-width:34ch; color:#5d5752; font-size:15px; line-height:1.55; }

/* --- 05. Make your business AI-ready ------------------------------------ */
.ai-ready { position:relative; overflow:hidden; background:var(--peach); }
.ai-ready::before, .ai-ready::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(217,92,50,.25); pointer-events:none; }
.ai-ready::before { width:620px; height:620px; right:-200px; bottom:-330px; }
.ai-ready::after { width:380px; height:380px; right:6%; bottom:-290px; }
.ai-ready > .container { position:relative; z-index:1; }
.ai-ready .section-heading h2 { font-family:var(--hero-sans); font-weight:500; text-transform:none; }
.ai-ready .section-heading h2 em { color:var(--orange); font-family:var(--serif); font-weight:400; letter-spacing:0; }
.shift-grid { margin:clamp(50px,6vw,76px) auto 0; max-width:900px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(20px,4vw,46px); }
.shift-column { padding:28px 30px; border:1px solid rgba(23,23,23,.14); border-radius:18px; background:rgba(255,252,247,.6); }
.shift-column ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; font-family:var(--hero-sans); font-size:clamp(18px,1.9vw,24px); font-weight:500; letter-spacing:-.02em; }
.shift-label { margin:0 0 16px; color:var(--orange); font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.shift-less { color:#7d766f; }
.shift-more { border-color:rgba(217,92,50,.34); background:rgba(255,252,247,.92); box-shadow:0 18px 34px rgba(103,73,47,.1); }
.shift-arrow { position:relative; display:block; width:52px; height:1px; background:rgba(23,23,23,.3); }
.shift-arrow::after { content:""; position:absolute; right:0; top:50%; width:9px; height:9px; margin-top:-5px; border-top:1px solid rgba(23,23,23,.5); border-right:1px solid rgba(23,23,23,.5); transform:rotate(45deg); }
.ai-position { margin:0 auto 0; max-width:22ch; text-align:center; font-family:var(--hero-sans); font-size:clamp(30px,4.4vw,66px); font-weight:500; line-height:.98; letter-spacing:.005em; }
.ai-position em { color:var(--orange); font-family:var(--serif); font-weight:400; letter-spacing:0; }
.ai-cta { margin:clamp(44px,5vw,66px) auto 0; max-width:720px; text-align:center; }
.ai-cta h3 { margin:0 0 24px; font-family:var(--hero-sans); font-size:clamp(22px,2.4vw,32px); font-weight:500; line-height:1.1; letter-spacing:-.02em; }
.ai-cta .hero-actions { justify-content:center; margin-top:0; }
.ai-cta-sub { margin:22px 0 0; color:#5d5752; font-size:15px; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width:1080px) {
  .ai-hero-inner { grid-template-columns:1fr; gap:52px; }
  .ai-hero-visual { max-width:460px; margin:0 auto; width:100%; }
  .cap-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cap-hub { position:static; transform:none; display:block; width:max-content; margin:0 auto 8px; grid-column:1 / -1; }
  .cap-grid::before { display:none; }
}
@media (max-width:900px) {
  .workflow-step { flex:1 1 100%; min-height:0; align-items:center; }
  .workflow-step + .workflow-step::before { left:50%; top:-14px; width:1px; height:14px; }
  .step-dot { position:static; margin-right:12px; flex:0 0 auto; }
}
@media (max-width:640px) {
  .ai-hero { padding-top:112px; }
  .ai-hero-title { font-size:clamp(40px,12vw,62px); }
  .ai-hero-title .hero-line { transform:none !important; }
  .ai-hero-intro .hero-actions .button { width:100%; justify-content:center; }
  .ai-hero-intro .hero-actions { gap:16px; }
  .ai-highlight { font-size:clamp(28px,9vw,40px); }
  .ask-line-strike .ask-quote { font-size:clamp(26px,8vw,38px); }
  .ask-line-hero .ask-quote { font-size:clamp(34px,11vw,52px); }
  .workflow-stage { padding:18px; border-radius:20px; }
  .workflow-switch { display:flex; width:100%; }
  .workflow-tab { flex:1 1 0; padding:10px 8px; }
  .cap-grid { grid-template-columns:1fr; }
  .cap-tile { padding:26px 24px 28px; }
  .shift-grid { grid-template-columns:1fr; gap:16px; }
  .shift-arrow { width:1px; height:34px; margin:0 auto; }
  .shift-arrow::after { right:auto; left:50%; top:auto; bottom:0; margin:0 0 0 -5px; transform:rotate(135deg); }
  .ai-position { max-width:none; }
}
@media (prefers-reduced-motion: reduce) {
  .flowmap .core-glow, .flowmap .node-app rect, .cap-hub, .ai-page .hero-line { animation:none !important; }
  .flowmap .particles, .ecomap .particles { display:none; }
  .ai-hero-title .hero-line { transform:none !important; }
  .ask-line-strike .ask-quote::after { transition:none; }
}