/* ═══════════════════════════════════════════════════════════════════════ WHIZTEC homepage — below-the-fold styles (deferred). Extracted from index.php's inline block for LCP: the inline block keeps only critical above-the-fold CSS (vars, themes, a11y, nav, hero, drawer, responsive). This file is loaded async via media="print" + nonce'd onload flip (see index.php ) and cached with 1-year immutable. ═══════════════════════════════════════════════════════════════════════ */ /* ── Success Vignettes ── */ .outcomes-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:2.5rem; text-align:left; } .outcome-card { background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:1.6rem; display:flex; flex-direction:column; gap:.75rem; transition:border-color .25s,box-shadow .25s; } .outcome-card:hover { border-color:rgba(47,128,255,.3); box-shadow:0 12px 40px rgba(0,0,0,.25); } .outcome-link { display:inline-flex; align-items:center; gap:.45rem; margin-top:.25rem; font-size:.85rem; font-weight:700; color:#FF6B00; text-decoration:none; } .outcome-link:hover { text-decoration:underline; } .outcome-link i { font-size:.7rem; transition:transform .18s; } .outcome-link:hover i { transform:translateX(3px); } .outcome-tag { font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); display:flex; align-items:center; gap:.4rem; } .outcome-metric { font-size:2.2rem; font-weight:900; letter-spacing:-.03em; background:linear-gradient(135deg,var(--blue),var(--teal)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; } .outcome-metric-sub { font-size:.72rem; color:var(--muted); margin-top:-.4rem; } .outcome-desc { font-size:.78rem; color:var(--muted); line-height:1.7; flex:1; } .outcome-modules { display:flex; gap:.4rem; flex-wrap:wrap; } .outcome-modules span { font-size:.58rem; font-weight:700; padding:.18rem .52rem; border-radius:100px; border:1px solid rgba(47,128,255,.25); color:var(--blue); background:rgba(47,128,255,.07); } [data-theme="light"] .outcome-card { box-shadow:0 4px 16px rgba(15,23,42,.05); } /* ── About / Our Story ── */ .about-milestones { display:flex; flex-direction:column; gap:0; } .milestone { padding:.9rem 0 .9rem 1.2rem; border-left:2px solid rgba(255,255,255,.08); position:relative; } .milestone::before { content:''; position:absolute; left:-5px; top:1.1rem; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); } .milestone.active::before { background:var(--teal); border-color:var(--teal); box-shadow:0 0 8px rgba(0,212,170,.4); } .milestone.active { border-left-color:var(--teal); } .milestone-year { font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.25rem; } .milestone.active .milestone-year { color:var(--teal); } .milestone-text { font-size:.8rem; color:var(--muted); line-height:1.65; } [data-theme="light"] .milestone { border-left-color:rgba(15,23,42,.1); } [data-theme="light"] .milestone::before { background:rgba(15,23,42,.1); border-color:rgba(15,23,42,.2); } /* ── Platform Evolution Timeline ── */ .evo-header { text-align:center; max-width:680px; margin:0 auto; padding-bottom:3.5rem; } .evo-quote-block { margin-top:1.6rem; padding:1rem 1.3rem; border-left:3px solid #FF6B2B; background:rgba(255,107,43,.05); border-radius:0 10px 10px 0; display:inline-block; max-width:560px; text-align:left; } .evo-quote-text { font-size:.86rem; font-style:italic; color:var(--muted); line-height:1.7; } /* Era tabs */ .evo-tabs { display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; max-width:1080px; margin:0 auto 2.4rem; padding:0 1rem; } .evo-tab { background:var(--bg2); border:1.5px solid var(--border); border-radius:14px; padding:.7rem 1.1rem; cursor:pointer; transition:border-color .2s,transform .15s,background .2s; font-family:inherit; color:inherit; text-align:center; min-width:0; flex:0 1 auto; display:flex; flex-direction:column; align-items:center; gap:.1rem; } .evo-tab:hover { border-color:rgba(255,107,0,.4); transform:translateY(-1px); } .evo-tab.active { background:rgba(255,107,0,.08); border-color:#FF6B00; } .evo-tab-label { font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .evo-tab.active .evo-tab-label { color:#FF6B00; } .evo-tab-years { font-size:.78rem; font-weight:700; color:var(--text); } [data-theme="light"] .evo-tab { background:#fff; border-color:rgba(10,37,64,.12); } [data-theme="light"] .evo-tab.active { background:rgba(255,107,0,.06); border-color:#FF6B00; } /* Era panels — only the active one is visible */ .evo-era-panel { display:none; } .evo-era-panel.active { display:block; } .evo-timeline { position:relative; max-width:1080px; margin:0 auto; padding:0 2rem 2rem; } .evo-spine { position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); background:linear-gradient(to bottom,transparent 0%,rgba(47,128,255,.3) 4%,rgba(47,128,255,.5) 25%,rgba(0,212,170,.45) 50%,rgba(139,92,246,.45) 70%,rgba(255,107,43,.6) 88%,rgba(255,107,43,.2) 97%,transparent 100%); } .evo-era-divider { position:relative; display:flex; align-items:center; justify-content:center; margin:3rem 0 1.8rem; z-index:2; } .evo-era-divider::before,.evo-era-divider::after { content:''; flex:1; height:1px; background:var(--border); } .evo-era-divider::before { margin-right:1rem; } .evo-era-divider::after { margin-left:1rem; } .evo-era-pill { background:var(--bg2); border:1px solid var(--border); border-radius:100px; padding:.42rem 1.1rem; text-align:center; white-space:nowrap; } .evo-era-label { display:block; font-size:.55rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); } .evo-era-years { display:block; font-size:.7rem; font-weight:700; color:var(--text); margin-top:.1rem; } .evo-row { display:grid; grid-template-columns:1fr 44px 1fr; align-items:center; margin-bottom:1.6rem; } .evo-row-l .evo-card-col { grid-column:1; padding-right:1.3rem; } .evo-row-l .evo-node-col { grid-column:2; display:flex; justify-content:center; } .evo-row-l .evo-empty { grid-column:3; } .evo-row-r .evo-empty { grid-column:1; } .evo-row-r .evo-node-col { grid-column:2; display:flex; justify-content:center; } .evo-row-r .evo-card-col { grid-column:3; padding-left:1.3rem; } .evo-node { width:13px; height:13px; border-radius:50%; border:2px solid rgba(255,255,255,.2); background:var(--bg); z-index:3; position:relative; flex-shrink:0; } .en-cargo { border-color:#2F80FF; box-shadow:0 0 10px rgba(47,128,255,.55); } .en-marine { border-color:#00D4AA; box-shadow:0 0 10px rgba(0,212,170,.55); } .en-erp { border-color:#8B5CF6; box-shadow:0 0 10px rgba(139,92,246,.55); } .en-ai { border-color:#FF6B2B; box-shadow:0 0 10px rgba(255,107,43,.55); } .en-today { border-color:#FF6B2B; background:#FF6B2B; width:17px; height:17px; box-shadow:0 0 18px rgba(255,107,43,.7); } .en-found { border-color:rgba(255,255,255,.4); box-shadow:0 0 8px rgba(255,255,255,.15); } .evo-card { background:var(--bg2); border:1px solid var(--border); border-radius:13px; padding:1.2rem 1.35rem; transition:border-color .22s,box-shadow .22s,transform .2s; } .evo-card:hover { transform:translateY(-2px); box-shadow:0 14px 38px rgba(0,0,0,.22); } .ec-cargo { border-top:2px solid #2F80FF; } .ec-cargo:hover { border-color:rgba(47,128,255,.55); } .ec-marine { border-top:2px solid #00D4AA; } .ec-marine:hover { border-color:rgba(0,212,170,.55); } .ec-erp { border-top:2px solid #8B5CF6; } .ec-erp:hover { border-color:rgba(139,92,246,.55); } .ec-ai { border-top:2px solid #FF6B2B; } .ec-ai:hover { border-color:rgba(255,107,43,.55); } .ec-today { border-top:2px solid #FF6B2B; background:linear-gradient(135deg,rgba(255,107,43,.06),transparent 55%); } .ec-found { border-top:2px solid rgba(255,255,255,.18); } .evo-card-head { display:flex; align-items:center; gap:.5rem; margin-bottom:.55rem; flex-wrap:wrap; } .evo-yr { font-size:.6rem; font-weight:800; letter-spacing:.07em; padding:.14rem .52rem; border-radius:100px; } .ey-cargo { background:rgba(47,128,255,.14); color:#2F80FF; } .ey-marine { background:rgba(0,212,170,.12); color:#00D4AA; } .ey-erp { background:rgba(139,92,246,.12); color:#8B5CF6; } .ey-ai { background:rgba(255,107,43,.12); color:#FF6B2B; } .ey-today { background:rgba(255,107,43,.15); color:#FF6B2B; } .ey-found { background:rgba(255,255,255,.08); color:var(--text); } .evo-badge { font-size:.53rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.13rem .48rem; border-radius:100px; } .eb-cargo { background:rgba(47,128,255,.12); color:#2F80FF; border:1px solid rgba(47,128,255,.28); } .eb-marine { background:rgba(0,212,170,.1); color:#00D4AA; border:1px solid rgba(0,212,170,.28); } .eb-erp { background:rgba(139,92,246,.1); color:#8B5CF6; border:1px solid rgba(139,92,246,.28); } .eb-ai { background:rgba(255,107,43,.1); color:#FF6B2B; border:1px solid rgba(255,107,43,.28); } .evo-card-title { font-size:.88rem; font-weight:700; color:var(--text); line-height:1.35; margin-bottom:.48rem; } .evo-card-body { font-size:.75rem; color:var(--muted); line-height:1.72; margin-bottom:.65rem; } .evo-tags { display:flex; gap:.26rem; flex-wrap:wrap; } .evo-tag { font-size:.51rem; font-weight:600; padding:.1rem .4rem; border-radius:100px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:var(--muted); } .evo-scale { max-width:1080px; margin:3rem auto 0; padding:0 2rem; } .evo-scale-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-top:1.1rem; } .evo-scale-card { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:1.1rem; text-align:center; } .evo-scale-num { font-size:1.85rem; font-weight:900; line-height:1; } .evo-scale-lbl { font-size:.6rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; margin-top:.2rem; } .evo-powers { max-width:1080px; margin:2.2rem auto 0; padding:0 2rem; } .evo-powers-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.45rem; margin-top:.9rem; } .evo-power-item { font-size:.71rem; color:var(--muted); padding:.42rem .65rem; background:rgba(255,255,255,.025); border:1px solid var(--border); border-radius:8px; display:flex; align-items:center; gap:.4rem; } .evo-power-item i { font-size:.58rem; color:#FF6B2B; flex-shrink:0; } [data-theme="light"] .evo-card,.evo-scale-card { box-shadow:0 3px 12px rgba(15,23,42,.05); } @media(max-width:800px) { .evo-row { grid-template-columns:26px 1fr; } .evo-row-l .evo-card-col,.evo-row-r .evo-card-col { grid-column:2; padding:0 0 0 .9rem; } .evo-row-l .evo-node-col,.evo-row-r .evo-node-col { grid-column:1; } .evo-row-l .evo-empty,.evo-row-r .evo-empty { display:none; } .evo-spine { left:12px; } .evo-scale-grid,.evo-powers-grid { grid-template-columns:repeat(2,1fr); } } /* ── Life at WHIZTEC ── */ .life-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:2.5rem; text-align:left; } .life-card { background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:1.4rem; display:flex; flex-direction:column; gap:.75rem; transition:border-color .25s,transform .2s; } .life-card:hover { border-color:rgba(139,92,246,.35); transform:translateY(-3px); } .life-icon { width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(109,40,217,.12)); border:1px solid rgba(139,92,246,.25); display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--purple); flex-shrink:0; } .life-title { font-size:.88rem; font-weight:700; color:var(--text); } .life-desc { font-size:.74rem; color:var(--muted); line-height:1.65; } [data-theme="light"] .life-card { box-shadow:0 4px 16px rgba(15,23,42,.04); } @media(max-width:900px) { .life-grid{grid-template-columns:repeat(2,1fr);} .outcomes-grid{grid-template-columns:1fr;} } .btn-primary { background:#FF6B00; color:#fff; padding:.85rem 2rem; border-radius:8px; font-size:.9rem; font-weight:700; letter-spacing:.02em; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; box-shadow:0 8px 24px rgba(255,107,0,.35); transition:transform .18s,box-shadow .18s,filter .18s; } .btn-primary:hover { filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 12px 30px rgba(255,107,0,.5); } [data-theme="dark"] .btn-primary { background:#E65F00; box-shadow:0 8px 24px rgba(230,95,0,.35); } [data-theme="grey"] .btn-primary { background:#E65F00; box-shadow:0 8px 24px rgba(230,95,0,.3); } .btn-ghost { background:rgba(255,255,255,.06); color:rgba(255,255,255,.82); padding:.85rem 2rem; border-radius:8px; font-size:.9rem; font-weight:600; border:1.5px solid rgba(255,255,255,.25); cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; transition:background .2s,border-color .2s,color .2s,transform .15s; text-decoration:none; backdrop-filter:blur(8px); } .btn-ghost:hover { background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.5); color:#fff; transform:translateY(-2px); } [data-theme="light"] .btn-ghost { background:transparent; color:#0A2540; border-color:rgba(10,37,64,.28); backdrop-filter:none; } [data-theme="light"] .btn-ghost:hover { background:rgba(10,37,64,.05); border-color:#0A2540; color:#0A2540; transform:translateY(-2px); } /* Hero ghost always white — hero stays dark in light mode */ [data-theme="light"] .hero .btn-ghost { background:transparent; color:#0A2540; border-color:rgba(10,37,64,.28); } [data-theme="light"] .hero .btn-ghost:hover { background:rgba(10,37,64,.05); border-color:#0A2540; color:#0A2540; } .hero-scroll-hint { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.4rem; font-size:.6rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.25); opacity:0; animation:fade-scroll-hint .6s 1.8s forwards; } .scroll-arrow { width:22px;height:22px;border:1.5px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;animation:bounce-y 2s ease-in-out infinite; } @keyframes bounce-y { 0%,100%{transform:translateY(0);}50%{transform:translateY(5px);} } @keyframes fade-scroll-hint { to{opacity:1;} } /* ─── SHARED SECTION ───────────────────────────────────────────────── */ .section { padding:6rem clamp(1.5rem,4vw,2rem); } .section-center { text-align:center; } .container { max-width:1280px; margin:0 auto; padding:0 clamp(1.5rem,4vw,2rem); } .section-heading { font-size:clamp(1.9rem,4vw,3.2rem); font-weight:900; line-height:1.12; letter-spacing:-.025em; color:var(--text); margin-bottom:1rem; } .section-sub { font-size:1rem; color:var(--muted); max-width:540px; margin:0 auto 3.5rem; line-height:1.7; } .section-bg2 { background:var(--bg2); } .section-dark { background:var(--bg3); } /* ─── PRODUCTS GRID ────────────────────────────────────────────────── */ .products-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; } .product-card { background:var(--bg2); border:1px solid var(--border); border-radius:20px; padding:2rem; position:relative; overflow:hidden; transition:border-color .3s,transform .25s,box-shadow .3s; } .product-card[data-accent="orange"]{--card-accent:var(--orange);} .product-card[data-accent="blue"]{--card-accent:var(--blue);} .product-card[data-accent="green"]{--card-accent:var(--green);} .product-card[data-accent="purple"]{--card-accent:var(--purple);} .product-card:hover { transform:translateY(-4px); border-color:var(--card-accent); box-shadow:0 0 30px rgba(0,0,0,.3),0 0 0 1px var(--card-accent); } .product-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.2rem; } .product-icon { width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem; } .product-icon.orange{background:rgba(237,124,47,.12);color:var(--orange);border:1px solid rgba(237,124,47,.2);} .product-icon.blue{background:rgba(0,116,200,.12);color:var(--blue);border:1px solid rgba(0,116,200,.2);} .product-icon.green{background:rgba(34,197,94,.12);color:var(--green);border:1px solid rgba(34,197,94,.2);} .product-icon.purple{background:rgba(139,92,246,.12);color:var(--purple);border:1px solid rgba(139,92,246,.2);} .product-badge { font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.25rem .65rem;border-radius:100px;display:inline-flex;align-items:center;gap:.35rem; } .badge-live{background:rgba(34,197,94,.15);color:var(--green);border:1px solid rgba(34,197,94,.3);} .badge-soon{background:rgba(255,255,255,.05);color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.1);} .product-name { display:block;font-size:1.7rem;font-weight:800;font-family:'Raleway',system-ui,sans-serif;letter-spacing:.04em;line-height:1;margin-bottom:.45rem;text-decoration:none;cursor:pointer;transition:opacity .2s; } a.product-name:hover { opacity:.82; } a.product-name:hover .suffix-orange,a.product-name:hover .suffix-green,a.product-name:hover .suffix-purple,a.product-name:hover .whiz { text-decoration:underline;text-underline-offset:3px; } .product-name .whiz{color:var(--blue);} .product-name .suffix-orange{color:var(--orange);} .product-name .suffix-green{color:var(--green);} .product-name .suffix-purple{color:var(--purple);} .product-tagline{font-size:.8rem;color:var(--muted);margin-bottom:1rem;} .product-module-count{font-size:.72rem;font-weight:700;color:var(--card-accent);margin-bottom:1rem;} .product-tags{display:flex;flex-wrap:wrap;gap:.4rem;} .product-tag{font-size:.62rem;font-weight:600;letter-spacing:.03em;padding:.22rem .6rem;border-radius:100px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.55);} .product-learnmore{margin-top:1.1rem;display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:800;color:var(--card-accent);text-decoration:none;transition:gap .2s,opacity .2s;align-self:flex-start;} .product-learnmore:hover{gap:.7rem;} .product-learnmore i{font-size:.7rem;} /* ─── STATS BAND ───────────────────────────────────────────────────── */ .stats-band { background:var(--bg3);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:4rem 2rem; } .stats-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:900px;margin:0 auto;text-align:center; } .stat-number { font-size:clamp(2.8rem,5vw,4.5rem);font-weight:900;letter-spacing:-.03em;line-height:1;background:linear-gradient(135deg,#fff 30%,rgba(255,255,255,.5));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.4rem; } .stat-label { font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); } /* ─── INDUSTRY CAPABILITY GRID ────────────────────────────────────── */ .indcap-section { background:var(--bg); padding:5rem clamp(1.5rem,5vw,80px) 6rem; } .indcap-header { max-width:1280px; margin:0 auto 2.8rem; } .indcap-grid { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; } .indcap-card { background:rgba(15,23,42,.65); border:1px solid rgba(255,255,255,.06); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-radius:14px; padding:1.3rem 1.2rem; display:flex; flex-direction:column; gap:.65rem; transition:transform .25s,border-color .25s,box-shadow .25s; } /* Orange highlight used in section headings */ .hl-orange { color:#FF6B00; } .indcap-card:hover { transform:translateY(-4px); border-color:rgba(37,99,235,.38); box-shadow:0 16px 48px rgba(0,0,0,.25); } .indcap-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; background:rgba(47,128,255,.1); border:1px solid rgba(47,128,255,.18); color:var(--blue); flex-shrink:0; } .indcap-title { font-size:.9rem; font-weight:700; color:var(--text); } .indcap-desc { font-size:.74rem; color:var(--muted); line-height:1.65; } [data-theme="light"] .indcap-section { background:var(--bg3); } [data-theme="light"] .indcap-card { background:rgba(255,255,255,.8); border-color:rgba(15,23,42,.07); box-shadow:0 4px 16px rgba(15,23,42,.04); } [data-theme="light"] .indcap-card:hover { border-color:rgba(37,99,235,.28); box-shadow:0 16px 48px rgba(15,23,42,.1); } /* ─── INDUSTRIES GRID ──────────────────────────────────────────────── */ .industries-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem; } .industry-card { background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:1.6rem;display:flex;flex-direction:column;gap:.9rem;transition:border-color .25s,transform .2s; } .industry-card:hover { border-color:rgba(139,92,246,.35);transform:translateY(-3px); } .industry-icon-pill { width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,rgba(139,92,246,.25),rgba(109,40,217,.18));border:1px solid rgba(139,92,246,.25);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--purple); } .industry-name { font-size:.92rem;font-weight:700;color:var(--text); } .industry-desc { font-size:.76rem;color:var(--muted);line-height:1.55; } /* ─── TWO COL ──────────────────────────────────────────────────────── */ .two-col { display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center; } .feature-list { display:flex;flex-direction:column;gap:1.8rem; } .feature-item { display:flex;gap:1rem;align-items:flex-start; } .feature-icon { width:42px;height:42px;border-radius:12px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.2);display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--purple);flex-shrink:0; } .feature-title { font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:.25rem; } .feature-desc { font-size:.78rem;color:var(--muted);line-height:1.55; } .big-headline { font-size:clamp(2.2rem,4.5vw,3.8rem);font-weight:900;line-height:1.1;letter-spacing:-.03em;color:var(--text); } .checklist { list-style:none;display:flex;flex-direction:column;gap:.9rem;margin-top:1.8rem; } .checklist li { display:flex;align-items:center;gap:.7rem;font-size:.85rem;color:var(--text); } .checklist li i { color:var(--teal);font-size:.85rem;flex-shrink:0; } /* ─── COUNTRY / EDI ────────────────────────────────────────────────── */ .country-grid { display:flex;flex-wrap:wrap;gap:.55rem; } .country-pill { background:rgba(0,116,200,.1);border:1px solid rgba(0,116,200,.2);color:rgba(255,255,255,.7);font-size:.68rem;font-weight:600;letter-spacing:.03em;padding:.3rem .8rem;border-radius:100px;transition:background .2s,border-color .2s,color .2s; } .country-pill:hover { background:rgba(0,116,200,.22);border-color:rgba(0,116,200,.45);color:#fff; } .edi-desc { font-size:1rem;color:var(--muted);max-width:560px;margin:0 auto 2.8rem;line-height:1.7; } .edi-badges { display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem; } .edi-badge { background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:.45rem 1.1rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.6);display:inline-flex;align-items:center;gap:.45rem;transition:border-color .2s,color .2s; } .edi-badge:hover { border-color:rgba(0,212,170,.4);color:var(--teal); } .edi-badge i { font-size:.5rem;color:var(--teal); } .check-list { list-style:none;display:flex;flex-direction:column;gap:.8rem;margin-top:1.5rem; } .check-list li { display:flex;align-items:flex-start;gap:.65rem;font-size:.85rem;color:var(--muted); } .check-list li i { color:var(--teal);margin-top:.15rem;flex-shrink:0; } /* ─── QUOTE / CTA ──────────────────────────────────────────────────── */ .quote-section { background:var(--bg3);padding:7rem 2rem;text-align:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border); } .quote-text { font-size:clamp(1.8rem,4vw,3.4rem);font-weight:900;line-height:1.15;letter-spacing:-.025em;color:var(--text);max-width:820px;margin:0 auto; } .cta-section { padding:7rem 2rem;text-align:center; } .cta-actions { display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.5rem; } .btn-outline-orange { background:transparent;color:var(--orange);padding:.85rem 2rem;border-radius:8px;font-size:.9rem;font-weight:700;border:1.5px solid var(--orange);cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;transition:background .2s,color .2s,transform .15s;text-decoration:none; } .btn-outline-orange:hover { background:var(--orange);color:#fff;transform:translateY(-2px); } /* ─── OPX WIDGET ───────────────────────────────────────────────────── */ .opx-section { padding:7rem 2rem; } .opx-phase { transition:opacity .28s,transform .28s; } .opx-hidden { display:none !important; } .opx-entry-headline { font-size:clamp(2rem,5vw,3.2rem);font-weight:900;line-height:1.15;letter-spacing:-.03em;text-align:center;margin:1rem 0 1.1rem; } .opx-entry-sub { color:var(--muted);font-size:.92rem;max-width:460px;margin:0 auto 2rem;line-height:1.8;text-align:center; } .opx-begin { font-size:1rem;padding:1rem 2.2rem; } .opx-alt-link { margin-top:1.1rem;font-size:.8rem;color:var(--muted); } .opx-alt-link a { color:var(--teal);text-decoration:none; } .opx-alt-link a:hover { text-decoration:underline; } .opx-step-label { font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);text-align:center;margin-bottom:.55rem; } .opx-question { font-size:clamp(1.2rem,3vw,1.75rem);font-weight:800;text-align:center;margin:0 0 2rem;color:var(--text);letter-spacing:-.02em; } .opx-tiles { display:grid;gap:.8rem;max-width:920px;margin:0 auto; } .opx-tiles-3 { grid-template-columns:repeat(3,1fr); } .opx-tiles-5 { grid-template-columns:repeat(5,1fr); } .opx-tile { background:var(--bg2);border:1.5px solid var(--border);border-radius:14px;padding:1.15rem 1rem 1.05rem;cursor:pointer;text-align:center;transition:border-color .18s,background .18s,transform .15s;display:flex;flex-direction:column;align-items:center;gap:.4rem; } .opx-tile:hover { border-color:rgba(0,212,170,.35);background:rgba(0,212,170,.04);transform:translateY(-3px); } .opx-tile-active { border-color:var(--teal)!important;background:rgba(0,212,170,.1)!important;transform:translateY(-3px); } .opx-tile-icon { width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.95rem;background:rgba(0,212,170,.1);color:var(--teal);margin-bottom:.1rem;flex-shrink:0; } .opx-tile-active .opx-tile-icon { background:rgba(0,212,170,.2); } .opx-tile-title { font-size:.83rem;font-weight:800;color:var(--text);line-height:1.25; } .opx-tile-sub { font-size:.65rem;color:var(--muted);line-height:1.4; } .opx-step-header { display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:.15rem;position:relative; } .opx-back { background:none;border:none;color:var(--muted);font-size:.78rem;cursor:pointer;position:absolute;left:0;padding:.3rem .5rem;border-radius:6px;transition:color .15s,background .15s;display:flex;align-items:center;gap:.35rem; } .opx-back:hover { color:var(--text);background:rgba(255,255,255,.05); } .opx-dots { display:flex;justify-content:center;gap:.55rem;margin-top:2.2rem; } .opx-dot { width:8px;height:8px;border-radius:50%;background:var(--border);transition:background .2s,width .22s,border-radius .22s; } .opx-dot-active { background:var(--teal);width:22px;border-radius:4px; } .opx-dot-done { background:rgba(0,212,170,.35); } .opx-response { display:grid;grid-template-columns:1fr 370px;gap:3.5rem;max-width:980px;margin:0 auto;text-align:left;align-items:start; } .opx-response-headline { font-size:clamp(1.35rem,2.8vw,2rem);font-weight:900;letter-spacing:-.025em;color:var(--text);margin:.4rem 0 1rem;line-height:1.2; } .opx-response-body { color:var(--muted);font-size:.88rem;line-height:1.85;margin-bottom:1.4rem; } .opx-check-list { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.65rem; } .opx-check-list li { display:flex;align-items:flex-start;gap:.6rem;color:var(--muted);font-size:.84rem;line-height:1.55; } .opx-check-list li i { color:var(--teal);font-size:.72rem;margin-top:.22rem;flex-shrink:0; } .opx-engage-card { background:linear-gradient(135deg,rgba(139,92,246,.1),rgba(0,212,170,.06));border:1px solid rgba(139,92,246,.22);border-radius:18px;padding:1.8rem 1.5rem;text-align:center;position:sticky;top:7rem; } .opx-engage-icon { width:52px;height:52px;border-radius:14px;margin:0 auto .9rem;background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(0,212,170,.14));display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--purple); } .opx-engage-kicker { font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--purple);margin-bottom:.6rem; } .opx-engage-body { font-size:.8rem;color:var(--muted);line-height:1.75;margin-bottom:1.3rem; } .opx-final-cta { width:100%;font-size:.78rem;padding:.85rem 1rem;white-space:normal;line-height:1.45; } .opx-next-steps { margin:1rem 0 .6rem;text-align:left;padding:.8rem 1rem;background:rgba(255,255,255,.04);border-radius:10px;border:1px solid rgba(255,255,255,.07); } .opx-next-label { font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin-bottom:.45rem; } .opx-next-list { margin:0;padding-left:1.1rem; } .opx-next-list li { font-size:.72rem;color:var(--muted);line-height:1.8; } .opx-restart { margin-top:.9rem;font-size:.7rem; } .opx-restart a { color:var(--muted);text-decoration:none; } .opx-restart a:hover { color:var(--text); } .opx-why-rec { margin-top:1.4rem;padding:.7rem .9rem;background:rgba(255,255,255,.03);border-radius:10px;border:1px solid rgba(255,255,255,.07); } .opx-why-label { font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin-bottom:.45rem; } .opx-why-tags { display:flex;flex-wrap:wrap;gap:.4rem; } .opx-why-tag { font-size:.68rem;font-weight:600;padding:.22rem .65rem;border-radius:20px;background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.3);color:var(--purple); } .opx-why-tag-persona { background:rgba(0,212,170,.1);border-color:rgba(0,212,170,.3);color:var(--teal); } /* ─── ENGAGE MODAL ─────────────────────────────────────────────────── */ .engage-modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:1100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;padding:1rem; } .engage-modal-overlay.open { opacity:1;pointer-events:all; } .engage-modal-box { background:#0f1c2e;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:2.2rem 2rem;max-width:600px;width:100%;position:relative;transform:translateY(20px);transition:transform .28s;max-height:92vh;overflow-y:auto; } .engage-modal-overlay.open .engage-modal-box { transform:translateY(0); } .engage-modal-close { position:absolute;top:1rem;right:1rem;background:rgba(255,255,255,.07);border:none;border-radius:8px;color:var(--muted);width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.85rem;transition:background .15s; } .engage-modal-close:hover { background:rgba(255,255,255,.14);color:#fff; } /* ── Dynamic demo qualification controls ── */ .ef-phone-row { display:flex;gap:.4rem; } .ef-phone-row #engage-phone-cc { max-width:11rem;flex:0 0 auto; } .ef-phone-row #engage-phone-d { flex:1 1 auto;min-width:0; } .engage-hint { font-size:.7rem;margin-top:.3rem;color:var(--muted);min-height:.9rem; } .engage-hint.ok { color:#3ddc97; } .engage-hint.err { color:#ff6b6b; } .ef-chips { display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.15rem; } .ef-chip { display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .8rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;cursor:pointer;font-size:.8rem;color:var(--muted);background:rgba(255,255,255,.03);transition:border-color .15s,color .15s,background .15s;user-select:none; } .ef-chip:hover { border-color:var(--orange,#FF6B00); } .ef-chip input { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; } .ef-chip.checked { border-color:var(--orange,#FF6B00);color:#fff;background:rgba(255,107,0,.12); } .ef-client-banner { margin-bottom:.4rem;padding:.9rem 1rem;border:1px solid rgba(255,107,0,.32);background:rgba(255,107,0,.08);border-radius:12px; } .ef-client-banner h4 { margin:0 0 .3rem;font-size:.95rem;font-weight:800; } .ef-client-banner p { margin:0 0 .6rem;font-size:.8rem;color:var(--muted);line-height:1.6; } .engage-invalid { border-color:#ff6b6b !important;box-shadow:0 0 0 1px rgba(255,107,107,.4); } .ef-chips.invalid { outline:1px solid #ff6b6b;outline-offset:4px;border-radius:10px; } #engage-demo-err { display:none; } #engage-demo-err.show { display:block; } .engage-modal-label { font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--teal);margin-bottom:.45rem; } .engage-modal-title { font-size:1.35rem;font-weight:900;letter-spacing:-.02em;margin-bottom:.4rem; } .engage-modal-sub { font-size:.82rem;color:var(--muted);margin-bottom:1.5rem;line-height:1.7; } .engage-form { display:flex;flex-direction:column;gap:.85rem; } .engage-form-row { display:grid;grid-template-columns:1fr 1fr;gap:.85rem; } .engage-field label { font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:.32rem; } .engage-field input,.engage-field select,.engage-field textarea { width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.65rem .85rem;color:var(--text);font-size:.87rem;font-family:inherit;outline:none;transition:border-color .15s;box-sizing:border-box; } .engage-field input:focus,.engage-field select:focus,.engage-field textarea:focus { border-color:var(--teal); } .engage-field select option { background:#0f1c2e; } .engage-field textarea { resize:vertical;min-height:76px; } .engage-submit { background:var(--orange);color:#fff;border:none;border-radius:10px;padding:.9rem 1.5rem;font-size:.9rem;font-weight:700;cursor:pointer;width:100%;transition:background .2s,transform .15s;margin-top:.25rem;font-family:inherit; } .engage-submit:hover { background:#d46a22;transform:translateY(-1px); } .engage-submit:disabled { opacity:.6;cursor:default;transform:none; } .engage-req { color:var(--orange);font-style:normal; } .engage-privacy { text-align:center;font-size:.63rem;color:var(--muted);opacity:.55;margin-top:.6rem;line-height:1.6; } .engage-select-prompt { text-align:center;padding:1.6rem 1rem;color:var(--muted);font-size:.8rem;border:1px dashed var(--border);border-radius:10px;margin-bottom:.6rem;line-height:1.7; } .engage-select-prompt i { display:block;font-size:1.1rem;margin-bottom:.4rem;opacity:.45; } [data-theme="light"] .engage-select-prompt { border-color:rgba(15,23,42,.15);color:rgba(15,23,42,.4); } .engage-investor-note { background:rgba(47,128,255,.08);border:1px solid rgba(47,128,255,.2);border-radius:8px;padding:.7rem .95rem;font-size:.72rem;color:rgba(240,244,250,.72);line-height:1.6;margin-bottom:.85rem;display:flex;gap:.55rem;align-items:flex-start; } .engage-investor-note i { color:var(--blue);margin-top:.08rem;flex-shrink:0; } [data-theme="light"] .engage-investor-note { background:rgba(37,99,235,.06);border-color:rgba(37,99,235,.18);color:rgba(15,23,42,.62); } .engage-success { text-align:center;padding:2.5rem 1rem; } .engage-success i { font-size:2.5rem;color:var(--teal);display:block;margin-bottom:1rem; } .engage-success h3 { margin-bottom:.5rem;font-size:1.2rem; } .engage-success p { color:var(--muted);font-size:.85rem;line-height:1.75; } .engage-success-steps { display:flex;flex-direction:column;gap:.4rem;margin-top:1.2rem;text-align:left;border-top:1px solid var(--border);padding-top:1.1rem; } .engage-success-step { display:flex;align-items:center;gap:.55rem;font-size:.77rem;color:var(--muted); } .engage-success-step i { color:var(--teal);font-size:.7rem;flex-shrink:0; } .hp-field { position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none; } /* ─── PURPOSE CHIPS ────────────────────────────────────────────────── */ .engage-purpose-row { display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem; } .engage-purpose-chip { display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .85rem; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12); border-radius:20px;font-size:.76rem;font-weight:600;color:rgba(255,255,255,.6); cursor:pointer;transition:background .18s,color .18s,border-color .18s; font-family:inherit;white-space:nowrap; } .engage-purpose-chip:hover { background:rgba(255,255,255,.11);color:#fff;border-color:rgba(255,255,255,.25); } .engage-purpose-chip.active { background:var(--blue);color:#fff;border-color:var(--blue); } .engage-purpose-chip i { font-size:.7rem; } /* ─── MAP LIGHTBOX ─────────────────────────────────────────────────── */ .map-expand-btn { background:none; border:none; padding:0; cursor:zoom-in; display:block; width:100%; position:relative; } .map-expand-hint { position:absolute; top:.6rem; right:.6rem; background:rgba(0,0,0,.5); color:rgba(255,255,255,.7); font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.28rem .65rem; border-radius:6px; display:flex; align-items:center; gap:.35rem; pointer-events:none; backdrop-filter:blur(6px); } .map-expand-hint i { font-size:.62rem; } .map-lightbox { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.88); display:flex; align-items:center; justify-content:center; padding:1.5rem; opacity:0; pointer-events:none; transition:opacity .25s; } .map-lightbox.open { opacity:1; pointer-events:all; } .map-lightbox-inner { position:relative; max-width:min(1200px,100%); width:100%; } .map-lightbox-inner svg { width:100%; height:auto; display:block; } .map-lightbox-close { position:absolute; top:-2.5rem; right:0; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:#fff; border-radius:8px; padding:.38rem .75rem; font-size:.8rem; cursor:pointer; display:flex; align-items:center; gap:.4rem; transition:background .15s; } .map-lightbox-close:hover { background:rgba(255,255,255,.2); } /* ─── FOOTER ───────────────────────────────────────────────────────── */ .site-footer { background:var(--bg3);border-top:1px solid var(--border);padding:4.5rem 2rem 2.5rem; } .footer-grid { max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.6fr repeat(5,minmax(0,1fr));gap:2.2rem;padding-bottom:3rem;border-bottom:1px solid var(--border); } .footer-logo { font-size:1.78rem;font-weight:800;font-family:'Raleway',system-ui,sans-serif;letter-spacing:.04em;margin-bottom:.6rem; } .footer-logo .whiz { color:#FF6B2B; } .footer-logo .tec { color:#fff; } [data-theme="light"] .footer-logo .tec { color:var(--text); } .footer-tagline { font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:.8rem; } .footer-desc { font-size:.77rem;color:var(--muted);line-height:1.65;margin-bottom:1.2rem; } .footer-social { display:flex;gap:.55rem;margin-top:.2rem; } .footer-social a { display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.48);font-size:.82rem;transition:all .2s;text-decoration:none; } .footer-social a:hover { transform:translateY(-2px);border-color:transparent;color:#fff; } .footer-social a[aria-label="LinkedIn"]:hover { background:#0A66C2; } .footer-social a[aria-label="X / Twitter"]:hover { background:#0f1117;border-color:rgba(255,255,255,.15); } .footer-social a[aria-label="Instagram"]:hover { background:linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); } .footer-social a[aria-label="YouTube"]:hover { background:#FF0000; } [data-theme="light"] .footer-social a { background:rgba(10,22,40,.06);border-color:rgba(10,22,40,.12);color:rgba(10,22,40,.45); } [data-theme="light"] .footer-social a:hover { color:#fff;border-color:transparent; } .footer-col-heading { font-size:.65rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:1rem; } .footer-links { display:flex;flex-direction:column;gap:.55rem; } .footer-links a { font-size:.8rem;color:rgba(255,255,255,.5);transition:color .2s; } .footer-links a:hover { color:#fff; } .footer-bottom { max-width:1100px;margin:2rem auto 0;display:flex;align-items:center;justify-content:space-between;font-size:.72rem;color:rgba(255,255,255,.28);flex-wrap:wrap;gap:.5rem; } .footer-bottom a { color:rgba(255,255,255,.38);transition:color .2s; } .footer-bottom a:hover { color:rgba(255,255,255,.65); } .footer-legal-links { display:flex;gap:1.2rem;flex-wrap:wrap; } /* ─── AI TRANSFORMATION SECTION ─────────────────────────────────── */ .xform-section { background:linear-gradient(180deg,#06101F 0%,#0A1A33 50%,#06101F 100%); padding:6rem clamp(1.5rem,5vw,2rem) 6.5rem; position:relative; overflow:hidden; color:#E8EEF8; } .xform-section::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black 20%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black 20%,transparent 100%); pointer-events:none; } .xform-wrap { max-width:1280px; margin:0 auto; position:relative; } .xform-head { text-align:center; margin-bottom:3.5rem; } .xform-eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.62rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:#00D4AA; background:rgba(0,212,170,.08); border:1px solid rgba(0,212,170,.25); padding:.32rem .85rem; border-radius:100px; margin-bottom:1.1rem; } .xform-eyebrow .dot { width:6px; height:6px; border-radius:50%; background:#00D4AA; animation:pulse-dot 2s ease-in-out infinite; } .xform-headline { font-size:clamp(2rem,4.4vw,3.4rem); font-weight:900; letter-spacing:-.025em; line-height:1.08; color:#fff; max-width:920px; margin:0 auto .9rem; } .xform-headline .hl-orange { color:#FF6B00; } .xform-sub { font-size:.95rem; color:rgba(232,238,248,.62); max-width:680px; margin:0 auto; line-height:1.7; } /* Before / Arrow / After split */ .xform-split { display:grid; grid-template-columns:1fr 56px 1fr; gap:1.4rem; align-items:stretch; margin-bottom:4rem; } .xform-pane { background:rgba(8,18,35,.55); border:1px solid rgba(255,255,255,.07); border-radius:18px; padding:1.6rem 1.5rem; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); position:relative; } .xform-pane-title { font-size:.62rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; margin-bottom:1.2rem; display:flex; align-items:center; gap:.5rem; } .xform-pane.before .xform-pane-title { color:rgba(248,113,113,.85); } .xform-pane.after .xform-pane-title { color:#FF6B00; } .xform-pane.before .xform-pane-title .pip { width:8px; height:8px; border-radius:2px; background:rgba(248,113,113,.7); } .xform-pane.after .xform-pane-title .pip { width:8px; height:8px; border-radius:2px; background:#FF6B00; animation:glow-orange 2.4s ease-in-out infinite; } @keyframes glow-orange { 0%,100%{box-shadow:0 0 0 0 rgba(255,107,0,.6);} 50%{box-shadow:0 0 0 6px rgba(255,107,0,0);} } .xform-items { display:flex; flex-direction:column; gap:.55rem; } .xform-item { display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05); border-radius:10px; font-size:.82rem; font-weight:600; transition:transform .4s,opacity .4s,border-color .4s; opacity:0; transform:translateY(8px); } .xform-section.in-view .xform-item { opacity:1; transform:translateY(0); } .xform-pane.before .xform-item { color:rgba(248,200,200,.78); } .xform-pane.before .xform-item i { color:#f87171; font-size:.85rem; width:18px; text-align:center; opacity:.85; } .xform-pane.after .xform-item { color:rgba(232,238,248,.92); border-color:rgba(0,212,170,.18); background:rgba(0,212,170,.04); } .xform-pane.after .xform-item i { color:#00D4AA; font-size:.85rem; width:18px; text-align:center; } .xform-section.in-view .xform-pane .xform-item:nth-child(1){transition-delay:.1s;} .xform-section.in-view .xform-pane .xform-item:nth-child(2){transition-delay:.18s;} .xform-section.in-view .xform-pane .xform-item:nth-child(3){transition-delay:.26s;} .xform-section.in-view .xform-pane .xform-item:nth-child(4){transition-delay:.34s;} .xform-section.in-view .xform-pane .xform-item:nth-child(5){transition-delay:.42s;} .xform-section.in-view .xform-pane .xform-item:nth-child(6){transition-delay:.50s;} /* Middle arrow column with animated bot dots */ .xform-bridge { display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; } .xform-bridge-line { width:2px; flex:1; background:linear-gradient(180deg,transparent 0%,rgba(0,212,170,.4) 20%,rgba(0,116,200,.45) 50%,rgba(255,107,0,.4) 80%,transparent 100%); position:relative; min-height:120px; } .xform-bridge-line::after { content:''; position:absolute; left:-3px; top:0; width:8px; height:8px; border-radius:50%; background:#00D4AA; box-shadow:0 0 10px #00D4AA; animation:xform-flow 2.4s ease-in-out infinite; } @keyframes xform-flow { 0%{top:0;background:#00D4AA;box-shadow:0 0 10px #00D4AA;} 50%{background:#0074C8;box-shadow:0 0 12px #0074C8;} 100%{top:calc(100% - 8px);background:#FF6B00;box-shadow:0 0 14px #FF6B00;} } .xform-bridge-icon { width:42px; height:42px; border-radius:50%; background:rgba(255,107,0,.12); border:1.5px solid rgba(255,107,0,.4); display:flex; align-items:center; justify-content:center; color:#FF6B00; font-size:1.05rem; margin:1rem 0; animation:pulse-dot 2.4s ease-in-out infinite; } /* Pipeline */ .xform-pipeline { background:rgba(8,18,35,.55); border:1px solid rgba(255,255,255,.07); border-radius:18px; padding:1.8rem 1.6rem; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); margin-bottom:4rem; position:relative; } .xform-pipeline-title { font-size:.62rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:rgba(232,238,248,.55); margin-bottom:1.6rem; text-align:center; } .xform-pipeline-flow { display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; } .xform-stage { display:flex; flex-direction:column; align-items:center; gap:.5rem; flex:1; min-width:90px; } .xform-stage-node { width:52px; height:52px; border-radius:14px; background:rgba(0,116,200,.1); border:1.5px solid rgba(0,116,200,.4); display:flex; align-items:center; justify-content:center; color:#0074C8; font-size:1.1rem; position:relative; transition:all .4s; } .xform-section.in-view .xform-stage-node { animation:stage-pop .8s ease-out both; } .xform-section.in-view .xform-stage:nth-child(odd) .xform-stage-node { animation-delay:0s; } .xform-section.in-view .xform-stage:nth-child(1) .xform-stage-node { animation-delay:.1s; } .xform-section.in-view .xform-stage:nth-child(3) .xform-stage-node { animation-delay:.2s; } .xform-section.in-view .xform-stage:nth-child(5) .xform-stage-node { animation-delay:.3s; } .xform-section.in-view .xform-stage:nth-child(7) .xform-stage-node { animation-delay:.4s; } .xform-section.in-view .xform-stage:nth-child(9) .xform-stage-node { animation-delay:.5s; } .xform-section.in-view .xform-stage:nth-child(11) .xform-stage-node { animation-delay:.6s; } .xform-section.in-view .xform-stage:nth-child(13) .xform-stage-node { animation-delay:.7s; } @keyframes stage-pop { 0%{transform:scale(.4);opacity:0;} 60%{transform:scale(1.1);opacity:1;} 100%{transform:scale(1);opacity:1;} } .xform-stage-label { font-size:.7rem; font-weight:700; color:rgba(232,238,248,.78); text-align:center; } .xform-arrow { color:rgba(0,116,200,.45); font-size:.85rem; flex-shrink:0; opacity:0; animation:xform-arrow 4s linear infinite; } .xform-section.in-view .xform-arrow { animation:xform-arrow 4s linear infinite .6s; } @keyframes xform-arrow { 0%{opacity:0;transform:translateX(-4px);} 30%{opacity:1;transform:translateX(0);} 70%{opacity:1;} 100%{opacity:0;transform:translateX(4px);} } /* KPI grid */ .xform-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:.95rem; } .xform-kpi { background:rgba(8,18,35,.6); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:1.25rem 1.15rem; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:transform .25s,border-color .25s,box-shadow .25s; } .xform-kpi:hover { transform:translateY(-3px); border-color:rgba(255,107,0,.35); box-shadow:0 12px 36px rgba(0,0,0,.25); } .xform-kpi-num { font-size:2rem; font-weight:900; letter-spacing:-.025em; line-height:1; background:linear-gradient(135deg,#FF6B00 0%,#FFA259 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .xform-kpi-label { font-size:.78rem; font-weight:700; color:#E8EEF8; margin-top:.4rem; line-height:1.35; } .xform-kpi-sub { font-size:.7rem; color:rgba(232,238,248,.5); margin-top:.35rem; line-height:1.5; } /* ─── Light mode overrides ─── */ [data-theme="light"] .xform-section { background:linear-gradient(180deg,#FFFFFF 0%,#EBF0F7 50%,#FFFFFF 100%); color:#0A2540; } [data-theme="light"] .xform-section::before { background-image:linear-gradient(rgba(10,37,64,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(10,37,64,.035) 1px,transparent 1px); } [data-theme="light"] .xform-headline { color:#0A2540; } [data-theme="light"] .xform-sub { color:rgba(10,37,64,.62); } [data-theme="light"] .xform-pane { background:rgba(255,255,255,.85); border-color:rgba(10,37,64,.1); box-shadow:0 8px 28px rgba(10,37,64,.06); } [data-theme="light"] .xform-pane.before .xform-pane-title { color:#dc2626; } [data-theme="light"] .xform-pane.before .xform-pane-title .pip { background:#dc2626; } [data-theme="light"] .xform-item { background:rgba(10,37,64,.025); border-color:rgba(10,37,64,.06); } [data-theme="light"] .xform-pane.before .xform-item { color:#7a1212; background:rgba(220,38,38,.04); border-color:rgba(220,38,38,.12); } [data-theme="light"] .xform-pane.before .xform-item i { color:#dc2626; } [data-theme="light"] .xform-pane.after .xform-item { color:#0A2540; background:rgba(0,116,200,.04); border-color:rgba(0,116,200,.18); } [data-theme="light"] .xform-pane.after .xform-item i { color:#0074C8; } [data-theme="light"] .xform-bridge-icon { background:rgba(255,107,0,.08); border-color:rgba(255,107,0,.45); color:#FF6B00; } [data-theme="light"] .xform-pipeline { background:rgba(255,255,255,.9); border-color:rgba(10,37,64,.1); box-shadow:0 8px 28px rgba(10,37,64,.06); } [data-theme="light"] .xform-pipeline-title { color:rgba(10,37,64,.5); } [data-theme="light"] .xform-stage-node { background:rgba(0,116,200,.08); border-color:rgba(0,116,200,.35); color:#0074C8; } [data-theme="light"] .xform-stage-label { color:#0A2540; } [data-theme="light"] .xform-arrow { color:rgba(0,116,200,.55); } [data-theme="light"] .xform-kpi { background:rgba(255,255,255,.9); border-color:rgba(10,37,64,.1); box-shadow:0 4px 14px rgba(10,37,64,.04); } [data-theme="light"] .xform-kpi:hover { border-color:rgba(255,107,0,.5); box-shadow:0 12px 36px rgba(255,107,0,.12); } [data-theme="light"] .xform-kpi-label { color:#0A2540; } [data-theme="light"] .xform-kpi-sub { color:rgba(10,37,64,.55); } @media (max-width:980px) { .xform-split { grid-template-columns:1fr; } .xform-bridge { flex-direction:row; min-height:auto; padding:1rem 0; } .xform-bridge-line { width:auto; height:2px; flex:1; background:linear-gradient(90deg,transparent 0%,rgba(0,212,170,.4) 20%,rgba(0,116,200,.45) 50%,rgba(255,107,0,.4) 80%,transparent 100%); min-height:0; } .xform-bridge-line::after { display:none; } .xform-bridge-icon { margin:0 1rem; } .xform-kpis { grid-template-columns:repeat(2,1fr); } .xform-pipeline-flow { flex-direction:column; gap:.9rem; align-items:stretch; } .xform-stage { flex-direction:row; justify-content:flex-start; gap:1rem; } .xform-arrow { transform:rotate(90deg); align-self:center; } } @media (max-width:560px) { .xform-kpis { grid-template-columns:1fr; } } @media (prefers-reduced-motion: reduce) { .xform-section *, .xform-section *::before, .xform-section *::after { animation:none !important; transition:none !important; } .xform-section .xform-item { opacity:1; transform:none; } } /* ─── FAQ accordion ─────────────────────────────────────────────── */ .faq-list { margin-top:2rem; display:flex; flex-direction:column; gap:.7rem; text-align:left; } .faq-item { background:var(--bg2); border:1px solid var(--border); border-radius:12px; overflow:hidden; transition:border-color .2s; } .faq-item:hover { border-color:rgba(255,107,0,.35); } .faq-item[open] { border-color:rgba(255,107,0,.5); } .faq-item summary { cursor:pointer; padding:1rem 1.2rem; font-size:.95rem; font-weight:700; color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:1rem; list-style:none; } .faq-item summary::-webkit-details-marker { display:none; } .faq-chev { color:var(--orange); font-size:.78rem; transition:transform .25s; flex-shrink:0; } .faq-item[open] .faq-chev { transform:rotate(180deg); } .faq-body { padding:0 1.2rem 1.1rem; font-size:.88rem; color:var(--muted); line-height:1.7; } .faq-body strong { color:var(--text); } [data-theme="light"] .faq-item { background:#fff; } /* ─── MEETING CALENDAR (wzcal) ─────────────────────────────────── */ .wzcal { display:flex; flex-direction:column; gap:1rem; } .wzcal-pick { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:flex-start; } .wzcal-cal, .wzcal-slots { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:1rem 1.1rem; } [data-theme="light"] .wzcal-cal, [data-theme="light"] .wzcal-slots { background:#fff; border-color:rgba(10,37,64,.12); } .wzcal-cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; } .wzcal-cal-title { font-weight:800; font-size:.95rem; letter-spacing:.01em; } .wzcal-nav { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:inherit; width:30px; height:30px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.75rem; } .wzcal-nav:hover { background:rgba(255,255,255,.12); } .wzcal-nav:disabled { opacity:.35; cursor:not-allowed; } [data-theme="light"] .wzcal-nav { background:rgba(10,37,64,.04); border-color:rgba(10,37,64,.12); } [data-theme="light"] .wzcal-nav:hover { background:rgba(10,37,64,.1); } .wzcal-dow { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.4); text-align:center; padding:.35rem 0 .25rem; } [data-theme="light"] .wzcal-dow { color:rgba(10,37,64,.45); } .wzcal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; } .wzcal-day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:600; border-radius:7px; border:1px solid transparent; cursor:pointer; transition:all .15s; background:transparent; color:inherit; font-family:inherit; } .wzcal-day.empty { visibility:hidden; } .wzcal-day.unavail { opacity:.22; cursor:not-allowed; pointer-events:none; } .wzcal-day.avail { background:rgba(0,116,200,.08); color:#7BB3E0; border-color:rgba(0,116,200,.2); } [data-theme="light"] .wzcal-day.avail { background:rgba(0,116,200,.08); color:#0074C8; border-color:rgba(0,116,200,.22); } .wzcal-day.avail:hover { background:rgba(0,116,200,.18); border-color:#0074C8; transform:translateY(-1px); } .wzcal-day.today { outline:1.5px solid rgba(255,107,0,.45); outline-offset:-1.5px; } .wzcal-day.selected { background:#0074C8 !important; color:#fff !important; border-color:#0074C8 !important; transform:none; } .wzcal-tz { margin-top:.7rem; font-size:.72rem; color:rgba(255,255,255,.45); display:flex; align-items:center; gap:.35rem; } [data-theme="light"] .wzcal-tz { color:rgba(10,37,64,.55); } .wzcal-tz i { font-size:.7rem; } .wzcal-slots-title { font-size:.78rem; font-weight:700; margin-bottom:.7rem; opacity:.85; } .wzcal-slots-list { display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; max-height:300px; overflow-y:auto; padding-right:.2rem; } .wzcal-slot { padding:.5rem .4rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:inherit; font-size:.82rem; font-weight:600; border-radius:7px; cursor:pointer; transition:all .15s; font-family:inherit; text-align:center; } .wzcal-slot:hover { background:rgba(0,116,200,.15); border-color:#0074C8; transform:translateY(-1px); } [data-theme="light"] .wzcal-slot { background:#F4F7FB; border-color:rgba(10,37,64,.12); color:#0A2540; } [data-theme="light"] .wzcal-slot:hover { background:rgba(0,116,200,.08); border-color:#0074C8; } .wzcal-slots-empty { color:rgba(255,255,255,.45); font-size:.82rem; padding:1rem .3rem; text-align:center; grid-column:1/-1; } [data-theme="light"] .wzcal-slots-empty { color:rgba(10,37,64,.5); } .wzcal-slots-loading { padding:1rem; text-align:center; opacity:.6; grid-column:1/-1; } /* Step 2 — confirm details */ .wzcal-summary { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.8rem 1rem; background:rgba(0,116,200,.08); border:1px solid rgba(0,116,200,.3); border-radius:10px; margin-bottom:1rem; } [data-theme="light"] .wzcal-summary { background:rgba(0,116,200,.06); border-color:rgba(0,116,200,.3); } .wzcal-summary-when { display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:.9rem; } .wzcal-summary-when i { color:#0074C8; } .wzcal-change { background:transparent; border:none; color:#0074C8; font-weight:700; cursor:pointer; font-size:.8rem; text-decoration:underline; font-family:inherit; } .wzcal-change:hover { color:#FF6B00; } @media (max-width:760px) { .wzcal-pick { grid-template-columns:1fr; } .wzcal-slots-list { grid-template-columns:repeat(4,1fr); max-height:none; } } @media (max-width:480px) { .wzcal-slots-list { grid-template-columns:repeat(3,1fr); } } /* ── RTL overrides (replaces the former PHP $isRTL ternaries) ─────────── */ [dir="rtl"] .opx-back { left:auto; right:0; } [dir="rtl"] .opx-response { text-align:right; } [dir="rtl"] .opx-next-steps { text-align:right; } [dir="rtl"] .opx-next-list { padding-left:0; padding-right:1.1rem; } [dir="rtl"] .engage-modal-close { right:auto; left:1rem; } [dir="rtl"] .engage-success-steps { text-align:right; }