get
the modern card-accordion look without markup changes.
============================================================ */
.faq{
max-width:820px;margin:0 auto;
display:flex;flex-direction:column;gap:.7rem;
}
.faq > details{
background:#fff;border:1px solid #e2e8f0;border-radius:14px;
overflow:hidden;transition:.2s border-color,.2s box-shadow,.2s transform;
}
.faq > details:hover{transform:translateY(-1px);box-shadow:0 14px 28px -16px rgba(15,23,48,.12)}
.faq > details[open]{
border-color:#186900;
box-shadow:0 18px 36px -18px rgba(15,23,48,.16);
}
.faq > details > summary{
display:flex;justify-content:space-between;align-items:center;gap:1rem;
padding:1.05rem 1.4rem;cursor:pointer;list-style:none;
font-weight:700;color:#0f1730;font-size:1rem;line-height:1.4;
position:relative;
}
.faq > details > summary::-webkit-details-marker{display:none}
.faq > details > summary::marker{content:""}
/* Chevron icon as pseudo-element so existing markup needs no change */
.faq > details > summary::after{
content:"";flex-shrink:0;
width:32px;height:32px;border-radius:50%;
background:#f5f7fb;
background-image:url("data:image/svg+xml;utf8,
");
background-position:center;background-repeat:no-repeat;
transition:.25s transform,.25s background-color;
}
.faq > details[open] > summary::after{
transform:rotate(180deg);
background-color:#186900;
background-image:url("data:image/svg+xml;utf8,
");
}
.faq > details > p,
.faq > details > div > p{
margin:0;padding:0 1.4rem 1.2rem;
color:#6b7693;font-size:.95rem;line-height:1.65;
}
@media(max-width:900px){
.faq-split{grid-template-columns:1fr;gap:2.5rem}
.faq-left{position:static;text-align:center}
.faq-illust{margin:0 auto}
}
/* === Sitemap === */
.sitemap-search{display:flex;gap:.5rem;max-width:520px;margin-top:1rem}
.sitemap-search input{
flex:1;padding:.7rem .9rem;border:1px solid var(--line);border-radius:10px;
font:inherit;background:#fff;outline:none;
}
.sitemap-search input:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(14,165,233,.18)}
.sitemap-jump{
background:var(--bg-alt);border:1px solid var(--line);border-radius:12px;
padding:1rem 1.2rem;display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;margin-bottom:2rem;
}
.sitemap-jump strong{color:var(--ink-2);margin-right:.3rem}
.sitemap-jump a{font-size:.9rem;color:var(--brand);background:#fff;border:1px solid var(--line);padding:.3rem .65rem;border-radius:999px}
.sitemap-jump a:hover{text-decoration:none;background:#eef2ff}
.sitemap-group{margin:0 0 2.5rem;scroll-margin-top:90px}
.sitemap-group h2{margin-bottom:.9rem;border-bottom:1px solid var(--line);padding-bottom:.5rem}
.page-list{
list-style:none;padding:0;margin:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem 1.25rem;
}
@media(max-width:900px){.page-list{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.page-list{grid-template-columns:1fr}}
.page-list a{
display:block;padding:.45rem .15rem;color:var(--ink-2);font-size:.93rem;
border-bottom:1px dashed transparent;
}
.page-list a:hover{color:var(--brand);border-bottom-color:var(--brand);text-decoration:none}
/* === Hero card-grid (homepage) === */
.hub-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem;
}
@media(max-width:900px){.hub-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.hub-grid{grid-template-columns:1fr}}
.hub-card{
display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:1.5rem;transition:.18s transform,.18s box-shadow,.18s border-color;color:var(--ink);
}
.hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#c7d2fe;text-decoration:none}
.hub-card .ic{
width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
background:var(--brand-grad);color:#fff;font-size:1.5rem;margin-bottom:1rem;
box-shadow:0 10px 22px -10px rgba(24,105,0,.35);
}
.hub-card .ic svg{width:26px;height:26px}
/* Per-card icon color variants for visual rhythm */
.hub-card .ic-blue {background:linear-gradient(135deg,#3b82f6,#1d4ed8);box-shadow:0 10px 22px -10px rgba(29,78,216,.4)}
.hub-card .ic-cyan {background:linear-gradient(135deg,#06b6d4,#0e7490);box-shadow:0 10px 22px -10px rgba(14,116,144,.4)}
.hub-card .ic-green {background:linear-gradient(135deg,#22c55e,#15803d);box-shadow:0 10px 22px -10px rgba(21,128,61,.4)}
.hub-card .ic-amber {background:linear-gradient(135deg,#fbbf24,#d97706);box-shadow:0 10px 22px -10px rgba(217,119,6,.4)}
.hub-card .ic-pink {background:linear-gradient(135deg,#ec4899,#be185d);box-shadow:0 10px 22px -10px rgba(190,24,93,.4)}
.hub-card .ic-purple {background:linear-gradient(135deg,#a855f7,#7c3aed);box-shadow:0 10px 22px -10px rgba(124,58,237,.4)}
.hub-card .ic-teal {background:linear-gradient(135deg,#14b8a6,#0d9488);box-shadow:0 10px 22px -10px rgba(13,148,136,.4)}
.hub-card .ic-orange {background:linear-gradient(135deg,#f97316,#c2410c);box-shadow:0 10px 22px -10px rgba(194,65,12,.4)}
.hub-card h3{margin:.25rem 0;font-size:1.15rem;color:var(--ink)}
.hub-card p{margin:0;color:var(--muted);font-size:.95rem}
.hub-card .more{display:inline-block;margin-top:.7rem;color:var(--brand);font-weight:600;font-size:.9rem}
/* ========================================================
SERVICES ZIGZAG (4-column service cards, alternating offset)
======================================================== */
.services-zig{position:relative;background:#fff;padding:5rem 0 6rem;overflow:hidden}
.services-head{margin-bottom:3rem;text-align:center}
.services-eyebrow{
display:inline-flex;align-items:center;gap:.6rem;
font-size:.78rem;font-weight:700;letter-spacing:.2em;color:#16a34a;
margin-bottom:1rem;text-transform:uppercase;
}
.se-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.6)}
.services-title{
font-size:clamp(1.7rem, 3.4vw, 2.8rem);font-weight:800;letter-spacing:-.02em;
line-height:1.15;color:#0f172a;margin:0;
}
.services-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem;
max-width:1280px;margin:0 auto;
}
.svc-card{
position:relative;display:block;
background:#fff;border-radius:18px;
padding:2.5rem 1.6rem 2rem;
text-align:center;
box-shadow:0 18px 40px -22px rgba(15,23,42,.12), 0 4px 14px -8px rgba(15,23,42,.06);
transition:.3s transform,.3s box-shadow;
overflow:hidden;isolation:isolate;
}
/* Zigzag: 2nd & 4th cards drop down, 6th & 8th drop down */
.svc-card:nth-child(even){transform:translateY(2rem)}
/* Decorative blobs in opposite corners */
.svc-blob{
position:absolute;width:130px;height:130px;border-radius:50%;
background:radial-gradient(circle, #dbeafe 0%, transparent 70%);
opacity:.7;z-index:0;pointer-events:none;
}
.svc-blob-tr{top:-40px;right:-40px}
.svc-blob-bl{bottom:-40px;left:-40px}
/* Alternate blob colors per card for visual rhythm */
.svc-card:nth-child(2) .svc-blob{background:radial-gradient(circle,#fce7f3 0%,transparent 70%)}
.svc-card:nth-child(3) .svc-blob{background:radial-gradient(circle,#dcfce7 0%,transparent 70%)}
.svc-card:nth-child(4) .svc-blob{background:radial-gradient(circle,#fef3c7 0%,transparent 70%)}
.svc-card:nth-child(5) .svc-blob{background:radial-gradient(circle,#ede9fe 0%,transparent 70%)}
.svc-card:nth-child(6) .svc-blob{background:radial-gradient(circle,#fee2e2 0%,transparent 70%)}
.svc-card:nth-child(7) .svc-blob{background:radial-gradient(circle,#cffafe 0%,transparent 70%)}
.svc-card:nth-child(8) .svc-blob{background:radial-gradient(circle,#dcfce7 0%,transparent 70%)}
.svc-card:hover{
transform:translateY(-6px);
box-shadow:0 28px 50px -22px rgba(15,23,42,.2), 0 8px 18px -8px rgba(34,197,94,.18);
text-decoration:none;
}
.svc-card:nth-child(even):hover{transform:translateY(calc(2rem - 6px))}
/* Centered circular icon - green-lime gradient with glow */
.svc-icon{
position:relative;z-index:1;
width:72px;height:72px;border-radius:50%;
background:linear-gradient(135deg,#22c55e 0%, #16a34a 50%, #15803d 100%);
color:#fff;display:grid;place-items:center;
margin:0 auto 1.5rem;
box-shadow:
0 14px 28px -10px rgba(34,197,94,.5),
0 0 0 8px rgba(34,197,94,.08),
inset 0 -3px 8px rgba(0,0,0,.1),
inset 0 3px 6px rgba(255,255,255,.25);
}
/* Per-card icon color variants for variety */
.svc-card:nth-child(2) .svc-icon{background:linear-gradient(135deg,#ec4899 0%, #db2777 50%, #be185d 100%);box-shadow:0 14px 28px -10px rgba(236,72,153,.5),0 0 0 8px rgba(236,72,153,.08),inset 0 -3px 8px rgba(0,0,0,.1),inset 0 3px 6px rgba(255,255,255,.25)}
.svc-card:nth-child(3) .svc-icon{background:linear-gradient(135deg,#06b6d4 0%, #0891b2 50%, #0e7490 100%);box-shadow:0 14px 28px -10px rgba(6,182,212,.5),0 0 0 8px rgba(6,182,212,.08),inset 0 -3px 8px rgba(0,0,0,.1),inset 0 3px 6px rgba(255,255,255,.25)}
.svc-card:nth-child(4) .svc-icon{background:linear-gradient(135deg,#f59e0b 0%, #d97706 50%, #b45309 100%);box-shadow:0 14px 28px -10px rgba(245,158,11,.5),0 0 0 8px rgba(245,158,11,.08),inset 0 -3px 8px rgba(0,0,0,.1),inset 0 3px 6px rgba(255,255,255,.25)}
.svc-card:nth-child(5) .svc-icon{background:linear-gradient(135deg,#a855f7 0%, #9333ea 50%, #7e22ce 100%);box-shadow:0 14px 28px -10px rgba(168,85,247,.5),0 0 0 8px rgba(168,85,247,.08),inset 0 -3px 8px rgba(0,0,0,.1),inset 0 3px 6px rgba(255,255,255,.25)}
.svc-card:nth-child(6) .svc-icon{background:linear-gradient(135deg,#ef4444 0%, #dc2626 50%, #b91c1c 100%);box-shadow:0 14px 28px -10px rgba(239,68,68,.5),0 0 0 8px rgba(239,68,68,.08),inset 0 -3px 8px rgba(0,0,0,.1),inset 0 3px 6px rgba(255,255,255,.25)}
.svc-card:nth-child(7) .svc-icon{background:linear-gradient(135deg,#0ea5e9 0%, #0284c7 50%, #0369a1 100%);box-shadow:0 14px 28px -10px rgba(14,165,233,.5),0 0 0 8px rgba(14,165,233,.08),inset 0 -3px 8px rgba(0,0,0,.1),inset 0 3px 6px rgba(255,255,255,.25)}
.svc-card:nth-child(8) .svc-icon{background:linear-gradient(135deg,#14b8a6 0%, #0d9488 50%, #0f766e 100%);box-shadow:0 14px 28px -10px rgba(20,184,166,.5),0 0 0 8px rgba(20,184,166,.08),inset 0 -3px 8px rgba(0,0,0,.1),inset 0 3px 6px rgba(255,255,255,.25)}
.svc-card h3{position:relative;z-index:1;margin:0 0 .65rem;font-size:1.15rem;color:#0f172a;font-weight:700;letter-spacing:-.01em}
.svc-card p{position:relative;z-index:1;margin:0 0 1rem;color:#64748b;font-size:.9rem;line-height:1.55}
.svc-link{
position:relative;z-index:1;display:inline-flex;align-items:center;gap:.4rem;
font-size:.85rem;font-weight:700;letter-spacing:.01em;
color:#16a34a;
}
.svc-link svg{transition:.2s transform}
.svc-card:hover .svc-link{color:#15803d}
.svc-card:hover .svc-link svg{transform:translateX(5px)}
/* Match link color to each card's icon gradient */
.svc-card:nth-child(2) .svc-link{color:#db2777}
.svc-card:nth-child(2):hover .svc-link{color:#be185d}
.svc-card:nth-child(3) .svc-link{color:#0891b2}
.svc-card:nth-child(3):hover .svc-link{color:#0e7490}
.svc-card:nth-child(4) .svc-link{color:#d97706}
.svc-card:nth-child(4):hover .svc-link{color:#b45309}
.svc-card:nth-child(5) .svc-link{color:#9333ea}
.svc-card:nth-child(5):hover .svc-link{color:#7e22ce}
.svc-card:nth-child(6) .svc-link{color:#dc2626}
.svc-card:nth-child(6):hover .svc-link{color:#b91c1c}
.svc-card:nth-child(7) .svc-link{color:#0284c7}
.svc-card:nth-child(7):hover .svc-link{color:#0369a1}
.svc-card:nth-child(8) .svc-link{color:#0d9488}
.svc-card:nth-child(8):hover .svc-link{color:#0f766e}
@media(max-width:1080px){
.services-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}
.svc-card:nth-child(even){transform:translateY(0)}
.svc-card:nth-child(4n-2),.svc-card:nth-child(4n){transform:translateY(2rem)}
.svc-card:nth-child(even):hover{transform:translateY(-6px)}
.svc-card:nth-child(4n-2):hover,.svc-card:nth-child(4n):hover{transform:translateY(calc(2rem - 6px))}
}
@media(max-width:600px){
.services-grid{grid-template-columns:1fr;gap:1.25rem}
.svc-card:nth-child(n){transform:none}
.svc-card:nth-child(n):hover{transform:translateY(-6px)}
}
/* Old orbit styles (kept for reference, hidden) */
.solutions-orbit{display:none}
.solutions-orbit-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.so-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35}
.so-blob-1{width:480px;height:480px;top:-180px;left:-200px;background:radial-gradient(circle,#dbeafe 0%, transparent 70%)}
.so-blob-2{width:440px;height:440px;bottom:-200px;right:-180px;background:radial-gradient(circle,#fef3c7 0%, transparent 70%)}
.so-dotgrid{
position:absolute;width:140px;height:140px;opacity:.22;
background-image:radial-gradient(rgba(15,23,42,.4) 1.2px, transparent 1.2px);
background-size:14px 14px;
}
.so-dotgrid-1{top:10%;right:3%}
.so-dotgrid-2{bottom:8%;left:2%}
.so-watermark{display:none}
.solutions-orbit .container{position:relative;z-index:1;max-width:1440px}
.solutions-orbit .section-head{margin-bottom:3.5rem}
.orbit-grid{
display:grid;grid-template-columns:1fr minmax(300px, 380px) 1fr;gap:2.5rem;
align-items:center;
}
.orbit-col{display:flex;flex-direction:column;gap:1.5rem}
.orbit-col-left .orbit-card:nth-child(even){margin-left:-3rem}
.orbit-col-right .orbit-card:nth-child(even){margin-right:-3rem}
/* Reference design: light tinted card, bigger size, gradient accents, HUGE watermark */
.orbit-card{
position:relative;display:block;
background:#f4f6ff;border:1px solid rgba(99,102,241,.08);
border-radius:18px;
padding:2rem 2.25rem 2rem 2.25rem;
box-shadow:0 16px 40px -24px rgba(15,23,42,.14);
transition:.3s transform,.3s box-shadow,.3s background,.3s border-color;
overflow:hidden;isolation:isolate;
min-height:170px;
}
/* Subtle dot pattern overlay (corner accent) */
.orbit-card::before{
content:"";position:absolute;top:0;right:0;width:140px;height:140px;z-index:0;opacity:.6;
background-image:radial-gradient(rgba(99,102,241,.22) 1.2px, transparent 1.2px);
background-size:12px 12px;
mask:radial-gradient(120px 120px at 100% 0%, #000 30%, transparent 70%);
-webkit-mask:radial-gradient(120px 120px at 100% 0%, #000 30%, transparent 70%);
}
/* Soft glow on hover */
.orbit-card::after{
content:"";position:absolute;inset:0;z-index:0;opacity:0;
background:linear-gradient(135deg, rgba(99,102,241,.05) 0%, rgba(34,197,94,.05) 100%);
transition:.3s opacity;
}
.orbit-card:hover{
transform:translateY(-6px);
box-shadow:0 30px 56px -22px rgba(99,102,241,.28), 0 8px 20px -8px rgba(15,23,42,.1);
background:#eef0ff;border-color:rgba(99,102,241,.18);
text-decoration:none;
}
.orbit-card:hover::after{opacity:1}
.orbit-col-left .orbit-card:nth-child(even):hover{transform:translateY(-6px)}
.orbit-col-right .orbit-card:nth-child(even):hover{transform:translateY(-6px)}
/* HUGE translucent number watermark inside each card */
.orbit-num{
position:absolute;right:1.25rem;bottom:-1.75rem;
font-size:7.5rem;font-weight:900;letter-spacing:-.06em;line-height:1;
color:rgba(99,102,241,.12);
font-family:'Inter',sans-serif;pointer-events:none;
z-index:0;
}
.orbit-ic{
position:relative;z-index:1;
width:54px;height:54px;border-radius:14px;
background:#fff;color:#4f46e5;
display:grid;place-items:center;margin-bottom:1.1rem;
box-shadow:0 12px 24px -10px rgba(99,102,241,.35), inset 0 0 0 1px rgba(99,102,241,.08);
}
.orbit-ic svg{width:24px;height:24px}
.orbit-card h3{position:relative;z-index:1;margin:0 0 .55rem;font-size:1.18rem;color:#0f172a;font-weight:700;letter-spacing:-.01em}
.orbit-card p{position:relative;z-index:1;margin:0 0 1rem;color:#64748b;font-size:.92rem;line-height:1.6;max-width:92%}
/* "Learn more" arrow at bottom of card */
.orbit-card .orbit-link{
position:relative;z-index:1;display:inline-flex;align-items:center;gap:.4rem;
color:#4f46e5;font-weight:600;font-size:.86rem;letter-spacing:.01em;
}
.orbit-card .orbit-link svg{transition:.2s transform}
.orbit-card:hover .orbit-link svg{transform:translateX(4px)}
/* Per-card icon color variants for visual rhythm */
.orbit-col-left .orbit-card:nth-child(1) .orbit-ic{color:#4f46e5;background:#fff}
.orbit-col-left .orbit-card:nth-child(2) .orbit-ic{color:#0891b2;background:#fff;box-shadow:0 12px 24px -10px rgba(8,145,178,.35), inset 0 0 0 1px rgba(8,145,178,.08)}
.orbit-col-left .orbit-card:nth-child(3) .orbit-ic{color:#16a34a;background:#fff;box-shadow:0 12px 24px -10px rgba(22,163,74,.3), inset 0 0 0 1px rgba(22,163,74,.08)}
.orbit-col-left .orbit-card:nth-child(4) .orbit-ic{color:#d97706;background:#fff;box-shadow:0 12px 24px -10px rgba(217,119,6,.3), inset 0 0 0 1px rgba(217,119,6,.08)}
.orbit-col-right .orbit-card:nth-child(1) .orbit-ic{color:#db2777;background:#fff;box-shadow:0 12px 24px -10px rgba(219,39,119,.3), inset 0 0 0 1px rgba(219,39,119,.08)}
.orbit-col-right .orbit-card:nth-child(2) .orbit-ic{color:#ca8a04;background:#fff;box-shadow:0 12px 24px -10px rgba(202,138,4,.3), inset 0 0 0 1px rgba(202,138,4,.08)}
.orbit-col-right .orbit-card:nth-child(3) .orbit-ic{color:#7c3aed;background:#fff;box-shadow:0 12px 24px -10px rgba(124,58,237,.32), inset 0 0 0 1px rgba(124,58,237,.08)}
.orbit-col-right .orbit-card:nth-child(4) .orbit-ic{color:#0d9488;background:#fff;box-shadow:0 12px 24px -10px rgba(13,148,136,.3), inset 0 0 0 1px rgba(13,148,136,.08)}
/* Center: vertical travel-tech card stack */
.orbit-center{position:relative;display:flex;justify-content:center;align-items:center;min-height:560px}
.orbit-circle{
position:absolute;width:380px;height:380px;border-radius:50%;
background:radial-gradient(circle at 30% 30%, #ecfdf5 0%, #f0fdf4 60%, transparent 100%);
z-index:0;
}
.ts-stack{
position:relative;z-index:1;width:300px;
display:flex;flex-direction:column;gap:14px;
animation:tsFloat 6s ease-in-out infinite;
}
@keyframes tsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* Common card style */
.ts-card{
background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:18px;
box-shadow:0 22px 40px -22px rgba(15,23,42,.22), 0 6px 14px -8px rgba(15,23,42,.08);
padding:1rem 1.1rem;
}
/* Top: AI Engine pill card */
.ts-card-top{
display:flex;align-items:center;gap:.85rem;
background:linear-gradient(135deg, #052e16 0%, #14532d 100%);
color:#fff;border-color:transparent;padding:.95rem 1.1rem;
box-shadow:0 18px 40px -18px rgba(20,83,45,.55);
position:relative;overflow:hidden;
}
.ts-card-top::before{
content:"";position:absolute;inset:0;
background:radial-gradient(160px 80px at 100% 0%, rgba(66,193,29,.35), transparent 60%);
pointer-events:none;
}
.ts-pulse{
width:10px;height:10px;border-radius:50%;background:#42c11d;flex-shrink:0;
box-shadow:0 0 0 0 rgba(66,193,29,.7);
animation:tsPulse 1.8s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes tsPulse{0%,100%{box-shadow:0 0 0 0 rgba(66,193,29,.6)}70%{box-shadow:0 0 0 10px rgba(66,193,29,0)}}
.ts-top-meta{flex:1;line-height:1.2;position:relative}
.ts-top-label{font-size:.92rem;font-weight:700;letter-spacing:-.01em}
.ts-top-status{font-size:.7rem;color:#bbf7d0;margin-top:2px;font-weight:500}
.ts-top-avatar{
width:36px;height:36px;border-radius:10px;
background:rgba(255,255,255,.12);color:#bef264;
display:grid;place-items:center;flex-shrink:0;backdrop-filter:blur(4px);
position:relative;
}
/* Middle: bookings dashboard card */
.ts-card-mid{padding:1.2rem 1.25rem 1rem}
.ts-mid-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}
.ts-mid-tag{
font-size:.65rem;font-weight:800;letter-spacing:.14em;color:#64748b;
background:#f1f5f9;padding:.2rem .55rem;border-radius:999px;
}
.ts-mid-trend{
font-size:.72rem;font-weight:700;color:#16a34a;
background:#dcfce7;padding:.2rem .55rem;border-radius:999px;
}
.ts-mid-num{
font-size:2.1rem;font-weight:800;letter-spacing:-.03em;line-height:1;color:#0f172a;
margin-top:.5rem;
}
.ts-mid-label{font-size:.78rem;color:#64748b;margin-top:.15rem;font-weight:500}
.ts-mid-chart{display:block;width:100%;height:60px;margin:.5rem -.4rem 0}
.ts-mid-pills{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
.ts-pill{
display:inline-flex;align-items:center;gap:.35rem;
font-size:.7rem;font-weight:600;color:#475569;
background:#f8fafc;padding:.3rem .6rem;border-radius:999px;
border:1px solid #e2e8f0;
}
.ts-pill-dot{width:6px;height:6px;border-radius:50%}
.ts-pill-dot-blue{background:#3b82f6}
.ts-pill-dot-orange{background:#f97316}
.ts-pill-dot-green{background:#22c55e}
/* Bottom: flight route card */
.ts-card-bot{padding:.95rem 1.1rem 1rem}
.ts-route{display:flex;align-items:center;gap:.5rem}
.ts-route-side{flex:1}
.ts-route-end{text-align:right}
.ts-route-code{font-size:1.05rem;font-weight:800;color:#0f172a;letter-spacing:.04em;line-height:1}
.ts-route-city{font-size:.72rem;color:#64748b;margin-top:.15rem;font-weight:500}
.ts-route-mid{position:relative;display:flex;align-items:center;justify-content:center}
.ts-plane{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);animation:tsPlane 6s ease-in-out infinite}
@keyframes tsPlane{0%,100%{transform:translate(-50%,-50%) rotate(45deg)}50%{transform:translate(-40%,-50%) rotate(45deg)}}
.ts-route-foot{
display:flex;justify-content:space-between;align-items:center;
margin-top:.7rem;padding-top:.65rem;border-top:1px dashed #e2e8f0;
font-size:.74rem;color:#64748b;font-weight:500;
}
.ts-route-price{font-weight:800;color:#186900;font-size:.92rem}
/* Floating AI chat bubbles */
.ai-bubble{
position:absolute;background:#fff;
border:1px solid #e5e7eb;border-radius:14px;
padding:.6rem .9rem;font-size:.78rem;font-weight:600;color:#0f172a;
box-shadow:0 14px 32px -16px rgba(15,23,42,.2);
display:inline-flex;align-items:center;gap:.5rem;
z-index:2;white-space:nowrap;
}
.ai-bubble-1{top:8%;right:-10%;animation:floatY 5s ease-in-out infinite}
.ai-bubble-2{bottom:14%;left:-12%;animation:floatY 6s ease-in-out infinite reverse}
.ai-bubble-dot{width:8px;height:8px;border-radius:50%;background:#42c11d;box-shadow:0 0 8px #42c11d}
.ai-bubble-spark{color:#fbbf24;font-size:1rem;line-height:1}
/* Decorative sparks/dots near robot */
.orbit-spark{
position:absolute;width:6px;height:6px;border-radius:50%;
background:#42c11d;box-shadow:0 0 12px rgba(66,193,29,.6);
}
.orbit-spark-1{top:8%;left:6%;background:#fbbf24;box-shadow:0 0 12px rgba(251,191,36,.6);animation:floatY 5s ease-in-out infinite}
.orbit-spark-2{top:42%;right:2%;background:#22d3ee;box-shadow:0 0 12px rgba(34,211,238,.6);animation:floatY 6s ease-in-out infinite reverse}
.orbit-spark-3{bottom:14%;left:12%;background:#42c11d;animation:floatY 7s ease-in-out infinite}
@media(max-width:1080px){
.orbit-grid{grid-template-columns:1fr minmax(260px,300px) 1fr;gap:1.5rem}
.ts-stack{width:260px}
.orbit-circle{width:320px;height:320px}
.orbit-card p{font-size:.85rem}
.orbit-col-left .orbit-card:nth-child(even){margin-left:-1.5rem}
.orbit-col-right .orbit-card:nth-child(even){margin-right:-1.5rem}
}
@media(max-width:860px){
.orbit-grid{grid-template-columns:1fr 1fr;gap:1rem}
.orbit-center{grid-column:1 / -1;order:-1;min-height:auto;margin-bottom:2rem}
.orbit-col-left .orbit-card:nth-child(even),
.orbit-col-right .orbit-card:nth-child(even){margin:0}
.ai-bubble-1{right:0}
.ai-bubble-2{left:0}
}
@media(max-width:520px){
.orbit-grid{grid-template-columns:1fr}
.ts-stack{width:240px}
.orbit-circle{width:280px;height:280px}
.ai-bubble{font-size:.7rem;padding:.45rem .7rem}
.ts-mid-num{font-size:1.7rem}
}
/* === Pricing === */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch;max-width:1180px;margin:0 auto}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr;gap:1.25rem}}
.price-card{
background:#fff;border:1px solid var(--line);border-radius:18px;padding:2rem 1.75rem;
position:relative;display:flex;flex-direction:column;gap:.7rem;
transition:.2s transform,.2s box-shadow,.2s border-color;
}
.price-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -18px rgba(15,23,42,.18);border-color:#cbd5e1}
.price-card.featured{
border:2px solid transparent;
background:linear-gradient(#fff,#fff) padding-box, var(--brand-grad) border-box;
box-shadow:0 20px 50px -18px rgba(24,105,0,.32);
}
.price-card.featured:hover{transform:translateY(-6px);box-shadow:0 28px 60px -18px rgba(24,105,0,.42)}
.price-card .badge{
position:absolute;top:-14px;left:50%;transform:translateX(-50%);
background:var(--brand-grad);color:#fff;
font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
padding:.45rem .9rem;border-radius:999px;
box-shadow:0 8px 18px -6px rgba(24,105,0,.5);
white-space:nowrap;
}
.price-icon{
width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
background:#eef9ec;color:var(--brand);font-size:1.6rem;margin-bottom:.5rem;
}
.price-card.featured .price-icon{background:var(--brand-grad);color:#fff}
.price-tier{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.price-name{font-size:1.3rem;font-weight:800;margin:.1rem 0 .25rem;color:var(--ink)}
.price-amount{display:flex;align-items:baseline;gap:.25rem;margin:.2rem 0 .35rem}
.price-amount .currency{font-size:1.15rem;color:var(--muted);font-weight:700;line-height:1}
.price-amount .num{font-size:2.6rem;font-weight:800;line-height:1;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em}
.price-amount .per{font-size:.92rem;color:var(--muted);font-weight:500;margin-left:.15rem}
.price-amount.custom .num{font-size:2rem}
.price-tagline{color:var(--ink-2);font-size:.94rem;line-height:1.55;margin:0 0 .5rem}
.price-divider{height:1px;background:var(--line);margin:.4rem 0}
.price-feats{list-style:none;padding:0;margin:.5rem 0 1rem;display:grid;gap:.65rem;flex:1}
.price-feats li{position:relative;padding-left:1.85rem;color:var(--ink-2);font-size:.92rem;line-height:1.5}
.price-feats li::before{
content:"";position:absolute;left:0;top:.2rem;width:18px;height:18px;border-radius:50%;
background:#dcfce7 url("data:image/svg+xml;utf8,
") center/11px no-repeat;
}
.price-card.featured .price-feats li::before{background:var(--brand) url("data:image/svg+xml;utf8,
") center/11px no-repeat}
.price-cta{margin-top:auto;display:grid;gap:.4rem}
.price-cta .btn{justify-content:center;width:100%}
.price-foot{font-size:.78rem;color:var(--muted);text-align:center;margin:0}
/* Pricing hero accents */
.pricing-billing{
display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border-radius:999px;
background:#dcfce7;color:#166534;font-size:.85rem;font-weight:600;margin-top:.6rem;
}
.pricing-billing .pulse{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
/* ========================================================
WHY ADIVAHA SECTION (split + laptop dashboard mockup)
======================================================== */
.why-section{
position:relative;overflow:hidden;
background:#fff;
padding:5rem 0 6rem;
}
.why-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;pointer-events:none;z-index:0}
.why-blob-pink{width:520px;height:520px;top:-180px;right:-160px;background:radial-gradient(circle,#bbf7d0 0%,transparent 70%)}
.why-blob-mint{width:480px;height:480px;bottom:-200px;left:-160px;background:radial-gradient(circle,#bef264 0%,transparent 70%)}
.why-grid{
position:relative;z-index:1;
display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:center;
}
/* Left copy */
.why-eyebrow{
display:inline-block;font-size:.95rem;font-weight:800;letter-spacing:.08em;
color:#f97316;margin-bottom:1rem;
}
.why-title{
font-size:clamp(2rem,4vw,3.2rem);font-weight:800;letter-spacing:-.02em;
line-height:1.1;color:#0a0a0a;margin:0 0 1.25rem;
}
.why-title-accent{color:var(--brand)}
.why-lede{color:#475569;font-size:1rem;line-height:1.7;margin:0 0 1.75rem;max-width:520px}
.why-lede a{color:var(--brand);font-weight:600}
.why-feats{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1.75rem;margin-bottom:2rem}
.why-feat{display:flex;align-items:flex-start;gap:.85rem}
.why-feat-ic{
flex-shrink:0;width:46px;height:46px;border-radius:10px;
display:grid;place-items:center;color:#fff;
box-shadow:0 8px 18px -8px rgba(15,23,42,.2);
}
.why-feat-ic-cyan{background:linear-gradient(135deg,#06b6d4,#0891b2)}
.why-feat-ic-purple{background:linear-gradient(135deg,#a855f7,#7c3aed)}
.why-feat-ic-orange{background:linear-gradient(135deg,#f97316,#ea580c)}
.why-feat-ic-pink{background:linear-gradient(135deg,#ec4899,#db2777)}
.why-feat-text h4{margin:0 0 .25rem;font-size:1rem;font-weight:700;color:#0f172a;letter-spacing:-.01em}
.why-feat-text p{margin:0;color:#64748b;font-size:.86rem;line-height:1.5}
.why-cta{
display:inline-flex;align-items:center;gap:.5rem;
padding:.95rem 2rem;border-radius:999px;
background:var(--brand-grad);color:#fff!important;font-weight:700;font-size:.95rem;
box-shadow:0 14px 28px -10px rgba(24,105,0,.45);
transition:.2s transform,.2s box-shadow;
}
.why-cta:hover{transform:translateY(-2px);box-shadow:0 18px 36px -10px rgba(24,105,0,.6);text-decoration:none}
/* === Laptop dashboard mockup === */
.laptop{position:relative;width:100%;max-width:620px;margin:0 auto;justify-self:end}
.laptop-screen{
position:relative;background:#fff;border-radius:14px 14px 4px 4px;
border:8px solid #1e293b;border-bottom:6px solid #1e293b;
overflow:hidden;
box-shadow:0 30px 60px -20px rgba(15,23,42,.35),0 10px 20px -8px rgba(15,23,42,.15);
}
.laptop-base{
height:18px;background:linear-gradient(180deg,#cbd5e1,#94a3b8);
border-radius:0 0 18px 18px;
width:108%;margin-left:-4%;position:relative;
}
.laptop-base::after{
content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
width:80px;height:6px;background:#64748b;border-radius:0 0 8px 8px;
}
.lp-bar{
display:flex;align-items:center;gap:.5rem;
background:#f1f5f9;padding:.5rem .8rem;border-bottom:1px solid #e2e8f0;
}
.lp-dot{width:10px;height:10px;border-radius:50%}
.lp-dot-r{background:#ef4444}.lp-dot-y{background:#fbbf24}.lp-dot-g{background:#22c55e}
.lp-title{margin-left:auto;font-size:.7rem;color:#64748b;font-weight:600;margin-right:auto}
.lp-body{padding:.85rem 1rem 1rem;background:#fff}
.lp-tabs{display:flex;gap:1.2rem;border-bottom:1px solid #e2e8f0;margin-bottom:.85rem}
.lp-tab{padding:.4rem 0;font-size:.72rem;font-weight:600;color:#94a3b8;position:relative}
.lp-tab-on{color:var(--brand)}
.lp-tab-on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand);border-radius:2px}
.lp-section-title{
display:flex;align-items:center;gap:.5rem;
font-size:.78rem;font-weight:700;color:#0f172a;margin-bottom:.7rem;
}
.lp-pill{
margin-left:auto;font-size:.62rem;font-weight:600;color:#64748b;
background:#f1f5f9;padding:.2rem .55rem;border-radius:999px;
}
.lp-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:.7rem}
.lp-stat{
background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:.55rem .65rem;
}
.lp-stat-label{font-size:.62rem;color:#64748b;font-weight:600;display:flex;justify-content:space-between;align-items:center;margin-bottom:.2rem}
.lp-stat-tag{font-size:.55rem;color:#94a3b8;font-weight:500}
.lp-stat-num{font-size:.92rem;font-weight:800;color:#0f172a;display:flex;align-items:baseline;gap:.35rem}
.lp-stat-trend{font-size:.58rem;font-weight:700;color:#16a34a}
.lp-stat-trend.up::before{content:"+"}
.lp-bars{display:flex;align-items:flex-end;gap:3px;height:22px;margin-top:.35rem}
.lp-bars span{flex:1;background:#3b82f6;border-radius:2px 2px 0 0;min-height:4px}
.lp-bars-green span{background:#22c55e}
.lp-bars-yellow span{background:#fbbf24}
.lp-bottom{display:grid;grid-template-columns:.85fr 1.15fr;gap:.6rem}
.lp-donut{
background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:.65rem;
display:flex;flex-direction:column;align-items:center;
}
.lp-donut-label{font-size:.62rem;color:#64748b;font-weight:600;align-self:flex-start}
.lp-donut-circle{position:relative;width:80px;height:80px;margin:.35rem 0}
.lp-donut-circle svg{width:100%;height:100%}
.lp-donut-num{
position:absolute;inset:0;display:grid;place-items:center;
font-size:.82rem;font-weight:800;color:#0f172a;
}
.lp-donut-foot{font-size:.6rem;color:#64748b;font-weight:600;margin-top:.2rem}
.lp-chart{
background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:.65rem;
display:flex;flex-direction:column;
}
.lp-chart-head{font-size:.7rem;color:#0f172a;font-weight:700;margin-bottom:.4rem}
.lp-chart-svg{display:block;width:100%;height:60px;flex:1}
.lp-chart-axis{display:flex;justify-content:space-between;font-size:.55rem;color:#94a3b8;margin-top:.25rem}
@media(max-width:960px){
.why-grid{grid-template-columns:1fr;gap:2.5rem}
.laptop{justify-self:center}
}
@media(max-width:560px){
.why-feats{grid-template-columns:1fr;gap:1.25rem}
.lp-stat-row{grid-template-columns:1fr}
.lp-bottom{grid-template-columns:1fr}
}
/* === API slider (full-width, autoplay, 2-col cards) === */
.api-slider-section{
position:relative;background:linear-gradient(120deg,#eef2ff 0%, #f1f5ff 50%, #ede9fe 100%);
padding:5rem 0 6rem;overflow:hidden;
}
.apis-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none}
.apis-blob-1{width:520px;height:520px;top:-180px;right:-160px;background:radial-gradient(circle,#dbeafe 0%,transparent 70%)}
.apis-blob-2{width:420px;height:420px;bottom:-160px;left:-160px;background:radial-gradient(circle,#e9d5ff 0%,transparent 70%)}
.api-slider-section > .container{position:relative;z-index:1;max-width:100%;padding:0 3rem}
.apis-head{
display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;
margin:0 auto 3rem;max-width:1280px;
}
.apis-head-left{max-width:720px}
.apis-eyebrow{
display:inline-block;font-size:.95rem;font-weight:700;color:#0f172a;margin-bottom:.85rem;
letter-spacing:.04em;
}
.apis-title{
font-size:clamp(2.2rem,4.4vw,3.8rem);font-weight:800;letter-spacing:-.02em;
line-height:1.1;color:#0a0a0a;margin:0 0 1rem;
}
.apis-lede{color:#475569;font-size:1rem;line-height:1.6;margin:0;max-width:600px}
.apis-lede a{color:#4f46e5;font-weight:600}
.apis-head-cta{
display:inline-flex;align-items:center;
padding:1rem 2rem;border-radius:999px;
background:#4f46e5;color:#fff!important;font-weight:700;font-size:.95rem;
box-shadow:0 14px 28px -10px rgba(79,70,229,.5);
transition:.2s transform,.2s box-shadow;white-space:nowrap;
}
.apis-head-cta:hover{transform:translateY(-2px);box-shadow:0 18px 34px -10px rgba(79,70,229,.65);text-decoration:none}
/* Slider takes full viewport width, header stays inside container */
.apis-slider{position:relative;margin-left:-3rem;margin-right:-3rem}
.apis-arrows{
position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);
display:flex;flex-direction:column;gap:.6rem;z-index:3;
}
.apis-arrow{
width:46px;height:46px;border-radius:50%;
background:#fff;border:1px solid #e2e8f0;color:#0f172a;cursor:pointer;
display:grid;place-items:center;
box-shadow:0 10px 22px -10px rgba(15,23,42,.18);
transition:.2s background,.2s color,.2s transform;
}
.apis-arrow:hover{background:#4f46e5;color:#fff;border-color:#4f46e5;transform:scale(1.06)}
.apis-track{
display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;
padding:1rem 5rem 1.5rem 5rem;scrollbar-width:none;
}
.apis-track::-webkit-scrollbar{display:none}
/* Vertical card: image on TOP, content BELOW */
.apis-card{
flex:0 0 calc((100% - 3rem)/3);
scroll-snap-align:start;
background:#fff;border-radius:20px;overflow:hidden;
box-shadow:0 18px 40px -22px rgba(15,23,42,.18);
text-decoration:none;color:inherit;
display:flex;flex-direction:column;
transition:.25s transform,.25s box-shadow;
}
.apis-card:hover{
transform:translateY(-6px);
box-shadow:0 28px 50px -22px rgba(79,70,229,.28);
text-decoration:none;
}
.apis-card-img{
height:200px;display:grid;place-items:center;position:relative;overflow:hidden;
}
.apis-card-img svg{width:88px;height:88px;opacity:.95;position:relative;z-index:1}
.apis-card-img::after{
content:"";position:absolute;inset:auto -20% -40% auto;width:200px;height:200px;
border-radius:50%;background:rgba(255,255,255,.1);pointer-events:none;
}
.apis-img-1{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.apis-img-2{background:linear-gradient(135deg,#f97316,#c2410c)}
.apis-img-3{background:linear-gradient(135deg,#a855f7,#7c3aed)}
.apis-img-4{background:linear-gradient(135deg,#22c55e,#15803d)}
.apis-img-5{background:linear-gradient(135deg,#06b6d4,#0e7490)}
.apis-img-6{background:linear-gradient(135deg,#ec4899,#be185d)}
.apis-img-7{background:linear-gradient(135deg,#fbbf24,#d97706)}
.apis-img-8{background:linear-gradient(135deg,#14b8a6,#0d9488)}
.apis-card-body{position:relative;padding:1.4rem 1.6rem 1.6rem;flex:1;display:flex;flex-direction:column;gap:.5rem}
.apis-card-ic{
position:absolute;top:-22px;right:1.4rem;
width:46px;height:46px;border-radius:12px;
background:#fff;color:#4f46e5;
display:grid;place-items:center;
box-shadow:0 10px 22px -10px rgba(15,23,42,.22);
border:1px solid rgba(79,70,229,.12);
}
.apis-card-ic-1{color:#1d4ed8}
.apis-card-ic-2{color:#c2410c}
.apis-card-ic-3{color:#7c3aed}
.apis-card-ic-4{color:#15803d}
.apis-card-ic-5{color:#0e7490}
.apis-card-ic-6{color:#be185d}
.apis-card-ic-7{color:#d97706}
.apis-card-ic-8{color:#0d9488}
.apis-card-body h3{margin:.5rem 0 .25rem;font-size:1.15rem;font-weight:800;color:#0f172a;letter-spacing:-.01em}
.apis-card-body p{margin:0;color:#64748b;font-size:.92rem;line-height:1.55;flex:1}
.apis-card-arrow{
align-self:flex-end;width:38px;height:38px;border-radius:50%;
background:#f1f5f9;color:#0f172a;
display:grid;place-items:center;margin-top:.85rem;
transition:.2s background,.2s color,.2s transform;
}
.apis-card:hover .apis-card-arrow{background:#4f46e5;color:#fff;transform:translateX(4px)}
@media(max-width:1080px){
.apis-card{flex:0 0 calc((100% - 1.5rem)/2)}
}
@media(max-width:720px){
.apis-head{grid-template-columns:1fr;gap:1.25rem}
.apis-track{padding:1rem 1.5rem 1.5rem 1.5rem}
.apis-slider{margin-left:-1.5rem;margin-right:-1.5rem}
.apis-arrows{position:static;flex-direction:row;transform:none;justify-content:center;margin-top:1rem;left:auto;padding:0 1.5rem}
.apis-card{flex:0 0 calc(100% - 3rem)}
}
/* === AI Split section (left header / right vertical service list with floating 3D card on active) === */
.ai-split-section{
position:relative;background:#f8f9fc;padding:5rem 0 6rem;overflow:hidden;
}
.ai-split-grid{
display:grid;grid-template-columns:1fr 1.05fr;gap:4rem;align-items:start;
max-width:1180px;margin:0 auto;
}
/* LEFT column */
.ai-split-left{position:relative;padding-top:2rem}
.ai-split-eyebrow{
display:inline-flex;align-items:center;gap:.6rem;
font-size:.78rem;font-weight:800;letter-spacing:.16em;
color:#7c3aed;margin-bottom:1.25rem;text-transform:uppercase;
}
.ai-split-eyebrow-line{
display:inline-block;width:30px;height:2px;background:#a78bfa;
}
.ai-split-title{
font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:800;letter-spacing:-.025em;
line-height:1.05;color:#0a0a0a;margin:0 0 1.5rem;
}
.ai-split-title-accent{position:relative;color:#0a0a0a;display:inline-block}
.ai-split-title-dot{
display:inline-block;width:14px;height:14px;border-radius:50%;
background:#f97316;margin-left:.25rem;vertical-align:baseline;
}
.ai-split-lede{
color:#64748b;font-size:1rem;line-height:1.7;margin:0 0 2rem;max-width:440px;
}
.ai-split-cta{
display:inline-flex;align-items:center;gap:.5rem;
padding:1rem 2rem;border-radius:999px;
background:#f97316;color:#fff!important;font-weight:700;font-size:.92rem;
box-shadow:0 14px 28px -10px rgba(249,115,22,.45);
transition:.2s transform,.2s box-shadow;
}
.ai-split-cta:hover{
transform:translateY(-2px);
box-shadow:0 18px 36px -10px rgba(249,115,22,.6);
text-decoration:none;
}
/* Background silhouette in left column (decorative shape - very subtle) */
.ai-split-silhouette{
position:absolute;left:-12%;bottom:-2rem;width:260px;height:320px;
z-index:0;opacity:.18;pointer-events:none;
}
.ai-split-silhouette svg{width:100%;height:100%}
.ai-split-left > *{position:relative;z-index:1}
/* RIGHT column: vertical list of services */
.ai-split-right{position:relative}
.ai-svc-list{
list-style:none;padding:0;margin:0;
display:flex;flex-direction:column;position:relative;
}
.ai-svc-item{
position:relative;border-bottom:1px solid #e2e8f0;
transition:.25s background,.25s border-color;
}
.ai-svc-item:first-child{border-top:1px solid #e2e8f0}
.ai-svc-item:hover{background:rgba(167,139,250,.06)}
/* Active state with peach tint (matches reference's orange-active row) */
.ai-svc-active{
background:#fff5ec;border-color:#fed7aa;
}
.ai-svc-active:hover{background:#fff5ec}
/* Link wrapper inside each item - holds icon, text, arrow */
.ai-svc-link{
display:flex;align-items:center;gap:1.25rem;
padding:1.5rem 1.25rem;text-decoration:none;color:inherit;
position:relative;z-index:2;
}
.ai-svc-link:hover{text-decoration:none;color:inherit}
.ai-svc-ic{
flex-shrink:0;width:56px;height:56px;border-radius:12px;
display:grid;place-items:center;color:#fff;
background:linear-gradient(135deg,#a78bfa,#7c3aed);
box-shadow:0 8px 18px -8px rgba(124,58,237,.4);
}
/* Per-icon color variants */
.ai-svc-ic-1{background:linear-gradient(135deg,#a78bfa,#7c3aed)} /* purple */
.ai-svc-ic-2{background:linear-gradient(135deg,#fb923c,#ea580c)} /* orange (active item) */
.ai-svc-ic-3{background:linear-gradient(135deg,#22c55e,#15803d)} /* green */
.ai-svc-ic-4{background:linear-gradient(135deg,#3b82f6,#1d4ed8)} /* blue */
.ai-svc-ic-5{background:linear-gradient(135deg,#ec4899,#db2777)} /* pink */
.ai-svc-ic-6{background:linear-gradient(135deg,#14b8a6,#0d9488)} /* teal */
.ai-svc-text{flex:1;min-width:0}
.ai-svc-text h3{
margin:0 0 .35rem;font-size:1.15rem;font-weight:800;color:#0a0a0a;letter-spacing:-.01em;
}
.ai-svc-text p{margin:0;color:#64748b;font-size:.9rem;line-height:1.5}
.ai-svc-arrow{
flex-shrink:0;width:36px;height:36px;border-radius:50%;
background:#fff;color:#0f172a;border:1px solid #e2e8f0;
display:grid;place-items:center;
transition:.2s background,.2s color,.2s transform;
}
.ai-svc-item:hover .ai-svc-arrow{background:#7c3aed;color:#fff;border-color:#7c3aed;transform:rotate(45deg)}
.ai-svc-active .ai-svc-arrow{background:#f97316;color:#fff;border-color:#f97316}
/* Floating 3D card overlay - hidden by default, shown only on hover/active */
.ai-svc-float{
position:absolute;right:-50px;top:50%;width:150px;height:150px;
z-index:5;pointer-events:none;
filter:drop-shadow(0 18px 30px rgba(15,23,42,.18));
opacity:0;visibility:hidden;
transform:translateY(-50%) translateX(20px) scale(.85);
transition:opacity .3s ease,transform .35s cubic-bezier(.34,1.56,.64,1),visibility 0s linear .3s;
}
.ai-svc-item:hover .ai-svc-float,
.ai-svc-active .ai-svc-float{
opacity:1;visibility:visible;
transform:translateY(-50%) translateX(0) scale(1);
animation:aiFloat 4s ease-in-out infinite 0.3s;
transition:opacity .3s ease,transform .35s cubic-bezier(.34,1.56,.64,1),visibility 0s linear 0s;
}
@keyframes aiFloat{
0%,100%{transform:translateY(-50%) translateX(0) scale(1) rotate(0)}
50%{transform:translateY(calc(-50% - 8px)) translateX(0) scale(1) rotate(2deg)}
}
.ai-svc-float svg{width:100%;height:auto;display:block}
/* Hide overflow on right column so floats don't push page width on desktop */
.ai-split-right{overflow:visible}
@media(max-width:900px){
.ai-split-grid{grid-template-columns:1fr;gap:2.5rem}
.ai-split-silhouette{display:none}
.ai-svc-float{display:none}
}
@media(max-width:600px){
.ai-svc-item{padding:1.25rem .75rem;gap:.85rem}
.ai-svc-ic{width:46px;height:46px;border-radius:10px}
.ai-svc-text h3{font-size:1.02rem}
.ai-svc-text p{font-size:.85rem}
.ai-svc-arrow{width:32px;height:32px}
}
/* === AI Steps section (alternating image/text rows with center number) === */
.ai-steps-section{
position:relative;background:#f8f9fc;padding:5rem 0 6rem;overflow:hidden;
}
.ai-steps-head{text-align:center;margin-bottom:4rem;max-width:780px;margin-left:auto;margin-right:auto}
.ai-steps-eyebrow{
display:inline-flex;align-items:center;gap:.5rem;
padding:.5rem 1rem;border-radius:999px;
background:rgba(167,139,250,.12);color:#7c3aed;
font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
margin-bottom:1.25rem;
}
.ai-steps-eyebrow-ic{
display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;border-radius:50%;
background:#7c3aed;color:#fff;
}
.ai-steps-eyebrow-ic svg{width:10px;height:10px}
.ai-steps-title{
font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:800;letter-spacing:-.02em;
line-height:1.1;color:#0a0a0a;margin:0 0 1rem;
}
.ai-steps-title-accent{color:#7c3aed}
.ai-steps-lede{color:#64748b;font-size:1rem;line-height:1.65;margin:0 auto;max-width:620px}
.ai-steps-list{
display:flex;flex-direction:column;gap:5rem;
max-width:1180px;margin:0 auto;
}
/* Each row: text-left | center-num | visual-right (or reversed) */
.ai-step-row{
display:grid;grid-template-columns:1fr 120px 1fr;gap:2rem;align-items:center;
}
.ai-step-reverse .ai-step-text{order:3}
.ai-step-reverse .ai-step-visual{order:1}
.ai-step-reverse .ai-step-num{order:2}
.ai-step-text{}
.ai-step-text h3{
margin:0 0 .85rem;font-size:clamp(1.6rem,2.6vw,2.2rem);
font-weight:800;color:#0a0a0a;letter-spacing:-.02em;line-height:1.15;
}
.ai-step-reverse .ai-step-text{text-align:left}
.ai-step:not(.ai-step-reverse) .ai-step-text{text-align:right}
.ai-step-text p{margin:0;color:#64748b;font-size:1rem;line-height:1.7;max-width:380px}
.ai-step:not(.ai-step-reverse) .ai-step-text p{margin-left:auto}
/* Big numbered circle in center column */
.ai-step-num{
width:90px;height:90px;border-radius:50%;
background:rgba(167,139,250,.15);
display:grid;place-items:center;justify-self:center;
font-size:1.6rem;font-weight:800;color:#cbd5e1;letter-spacing:-.02em;
border:1px solid rgba(167,139,250,.2);
}
/* Visual / illustration card */
.ai-step-visual{
border-radius:18px;padding:2rem 1.5rem;
display:grid;place-items:center;
box-shadow:0 18px 40px -22px rgba(15,23,42,.18);
}
.ai-step-visual svg{width:100%;height:auto;max-width:380px;display:block}
.ai-step-visual-purple{background:#ede9fe}
.ai-step-visual-pink{background:#fce7f3}
.ai-step-visual-green{background:#dcfce7}
.ai-step-visual-blue{background:#dbeafe}
.ai-step-visual-amber{background:#fef3c7}
@media(max-width:900px){
.ai-step-row{grid-template-columns:1fr;gap:1.5rem;text-align:center}
.ai-step-reverse .ai-step-text,
.ai-step:not(.ai-step-reverse) .ai-step-text{text-align:center}
.ai-step-reverse .ai-step-text,
.ai-step:not(.ai-step-reverse) .ai-step-text{order:2}
.ai-step-num{order:1}
.ai-step-visual{order:3}
.ai-step-text p{margin:0 auto}
.ai-steps-list{gap:3.5rem}
}
/* === API dark "Services we provide" style section === */
.api-dark-section{
position:relative;background:#0f1419;color:#fff;
padding:6rem 0;overflow:hidden;
}
.api-dark-section .container{position:relative;z-index:2}
/* Decorative blobs and shapes */
.ads-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;z-index:0}
.ads-blob-yellow{width:240px;height:240px;top:-80px;left:8%;background:radial-gradient(circle,#fbbf24 0%,transparent 70%)}
.ads-blob-purple{width:180px;height:180px;top:8%;left:18%;background:radial-gradient(circle,#a78bfa 0%,transparent 70%)}
.ads-dot{position:absolute;border-radius:50%;background:#a78bfa;z-index:1}
.ads-dot-1{width:12px;height:12px;top:8%;left:22%}
.ads-dot-2{width:14px;height:14px;top:34%;left:45%;background:#475569}
.ads-curve{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* Header (heading left, lede right) */
.ads-head{
display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:end;
margin-bottom:4rem;
}
.ads-eyebrow{
display:inline-flex;align-items:center;gap:.75rem;
font-size:.78rem;font-weight:700;letter-spacing:.16em;
color:#fff;margin-bottom:1rem;text-transform:uppercase;
}
.ads-eyebrow-line{display:inline-block;width:32px;height:2px;background:#bef264}
.ads-title{
font-size:clamp(2.4rem,5vw,4rem);font-weight:800;letter-spacing:-.025em;
line-height:1.05;color:#fff;margin:0;
}
.ads-lede{
color:rgba(255,255,255,.7);font-size:.95rem;line-height:1.7;
margin:0;max-width:380px;
}
/* 4-col grid (so 8 cards = 2 rows) */
.ads-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;
}
.ads-card{
display:block;text-decoration:none;color:#fff;
background:#1a1f26;border:1px solid rgba(255,255,255,.06);
border-radius:18px;padding:2rem 1.6rem 1.75rem;
transition:.25s transform,.25s background,.25s border-color;
}
.ads-card:hover{
transform:translateY(-5px);
background:#212830;border-color:rgba(190,242,100,.2);
text-decoration:none;
}
/* 3D-style colorful icon containers */
.ads-card-icon{
width:64px;height:64px;border-radius:50%;
display:grid;place-items:center;margin-bottom:1.25rem;
box-shadow:0 14px 28px -10px rgba(0,0,0,.4), inset 0 -4px 8px rgba(0,0,0,.15), inset 0 3px 6px rgba(255,255,255,.2);
}
.ads-card-icon svg{width:32px;height:32px;color:#fff}
/* Per-icon colored gradients (mimics 3D clay-style icons) */
.ads-icon-1{background:linear-gradient(135deg,#fbbf24,#f59e0b)} /* Flight - amber */
.ads-icon-2{background:linear-gradient(135deg,#fda4af,#f43f5e)} /* Hotel - rose */
.ads-icon-3{background:linear-gradient(135deg,#a78bfa,#8b5cf6)} /* Bus - purple */
.ads-icon-4{background:linear-gradient(135deg,#34d399,#10b981)} /* Excursions - green */
.ads-icon-5{background:linear-gradient(135deg,#60a5fa,#3b82f6)} /* Transfer - blue */
.ads-icon-6{background:linear-gradient(135deg,#f472b6,#db2777)} /* Insurance - pink */
.ads-icon-7{background:linear-gradient(135deg,#fb923c,#ea580c)} /* Forex - orange */
.ads-icon-8{background:linear-gradient(135deg,#22d3ee,#0891b2)} /* IP-Location - cyan */
.ads-card h3{
margin:0 0 .65rem;font-size:1.15rem;font-weight:700;color:#fff;letter-spacing:-.01em;
}
.ads-card p{
margin:0 0 1.25rem;color:rgba(255,255,255,.6);font-size:.9rem;line-height:1.6;
}
.ads-link{
display:inline-flex;align-items:center;gap:.4rem;
color:#fff;font-weight:600;font-size:.85rem;
transition:.2s color,.2s gap;
}
.ads-link svg{transition:.2s transform}
.ads-card:hover .ads-link{color:#bef264}
.ads-card:hover .ads-link svg{transform:translateX(4px)}
/* Override deep-links inside dark section */
.api-dark-section .deep-links{
background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);
color:rgba(255,255,255,.7);margin-top:2.5rem;
}
.api-dark-section .deep-links strong{color:#fff}
.api-dark-section .deep-links a{color:#bef264}
@media(max-width:1080px){
.ads-grid{grid-template-columns:repeat(2,1fr)}
.ads-head{grid-template-columns:1fr;gap:1.5rem}
}
@media(max-width:600px){
.ads-grid{grid-template-columns:1fr}
.api-dark-section{padding:4rem 0}
}
/* === API grid (HUGE watermark numbers + dividers, "How it works" style) === */
.api-grid-section{background:#fff;padding:5rem 0 6rem}
.apg-head{text-align:center;margin-bottom:3.5rem;max-width:780px;margin-left:auto;margin-right:auto}
.apg-eyebrow{
display:inline-block;font-size:.95rem;font-weight:700;color:#0f172a;
letter-spacing:.04em;margin-bottom:.85rem;
}
.apg-title{
font-size:clamp(1.9rem,3.6vw,3rem);font-weight:800;letter-spacing:-.02em;
line-height:1.15;color:#0a0a0a;margin:0 0 1rem;
}
.apg-title-accent{color:var(--brand)}
.apg-lede{color:#64748b;font-size:1rem;line-height:1.6;margin:0 auto;max-width:640px}
.apg-lede a{color:var(--brand);font-weight:600}
.apg-grid{
display:grid;grid-template-columns:repeat(4,1fr);
border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;
}
.apg-item{
position:relative;display:block;padding:2.5rem 1.75rem;
text-decoration:none;color:inherit;
transition:.25s background;
}
.apg-item:hover{background:#fafbfd;text-decoration:none}
/* Vertical divider between items (skip first of each row) */
.apg-item::before{
content:"";position:absolute;left:0;top:1.5rem;bottom:1.5rem;width:1px;background:#e2e8f0;
}
.apg-item:nth-child(4n+1)::before{display:none}
/* Horizontal divider between rows (only top row has bottom border) */
.apg-item:nth-child(-n+4){border-bottom:1px solid #e2e8f0}
.apg-num{
display:block;font-size:4rem;font-weight:800;letter-spacing:-.04em;line-height:1;
color:#cbd5e1;margin-bottom:1.25rem;font-family:'Inter',sans-serif;
}
.apg-item:hover .apg-num{color:var(--brand);transition:.25s color}
.apg-name{
margin:0 0 .65rem;font-size:1.3rem;font-weight:800;color:#0a0a0a;letter-spacing:-.01em;
}
.apg-desc{margin:0;color:#64748b;font-size:.92rem;line-height:1.6}
@media(max-width:1080px){
.apg-grid{grid-template-columns:repeat(2,1fr)}
.apg-item:nth-child(4n+1)::before{display:block}
.apg-item:nth-child(2n+1)::before{display:none}
.apg-item:nth-child(-n+6){border-bottom:1px solid #e2e8f0}
.apg-item:nth-child(-n+4){border-bottom:1px solid #e2e8f0}
}
@media(max-width:600px){
.apg-grid{grid-template-columns:1fr}
.apg-item::before{display:none!important}
.apg-item:not(:last-child){border-bottom:1px solid #e2e8f0}
}
/* === API panel === */
.api-section-wide{background:#fff;padding:5rem 0 6rem}
.api-panel-step{
position:absolute;left:-26px;top:84px;
width:52px;height:52px;border-radius:50%;
background:#fff;border:1px solid #e2e8f0;
display:grid;place-items:center;
box-shadow:0 8px 18px -8px rgba(15,23,42,.1);
}
.api-panel-step-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(24,105,0,.15)}
.api-panel-title{
font-size:clamp(1.4rem, 2.4vw, 2rem);font-weight:800;letter-spacing:-.01em;
line-height:1.25;color:#0f172a;text-align:center;margin:0 0 .75rem;
}
.api-panel-title-accent{color:var(--brand);margin-right:.4rem}
.api-panel-lede{
text-align:center;color:#64748b;font-size:1rem;line-height:1.6;
max-width:680px;margin:0 auto 2.5rem;
}
.api-panel-lede a{color:var(--brand);font-weight:600}
.api-panel-grid{
display:grid;grid-template-columns:repeat(4, 1fr);
gap:1.75rem 1.75rem;
}
.api-item{
display:flex;align-items:flex-start;gap:1rem;
text-decoration:none;color:inherit;
padding:1rem 1.1rem;border-radius:14px;
background:#fff;border:1px solid #e2e8f0;
transition:.25s transform,.25s box-shadow,.25s border-color;
}
.api-item:hover{
transform:translateY(-3px);
box-shadow:0 16px 32px -16px rgba(15,23,42,.16);
border-color:#cbd5e1;text-decoration:none;
}
.api-ic{
flex-shrink:0;width:46px;height:46px;border-radius:12px;
display:grid;place-items:center;color:#fff;
box-shadow:0 8px 16px -8px rgba(15,23,42,.25), inset 0 -2px 4px rgba(0,0,0,.12), inset 0 2px 4px rgba(255,255,255,.18);
}
.api-ic svg{width:24px;height:24px}
/* Per-API icon color variants */
.api-ic-1{background:linear-gradient(135deg,#3b82f6,#1d4ed8)} /* Flight - blue */
.api-ic-2{background:linear-gradient(135deg,#f97316,#c2410c)} /* Hotel - orange */
.api-ic-3{background:linear-gradient(135deg,#a855f7,#7c3aed)} /* Bus - purple */
.api-ic-4{background:linear-gradient(135deg,#22c55e,#15803d)} /* Excursions - green */
.api-ic-5{background:linear-gradient(135deg,#06b6d4,#0e7490)} /* Transfer - cyan */
.api-ic-6{background:linear-gradient(135deg,#ec4899,#be185d)} /* Insurance - pink */
.api-ic-7{background:linear-gradient(135deg,#fbbf24,#d97706)} /* Forex - amber */
.api-ic-8{background:linear-gradient(135deg,#14b8a6,#0d9488)} /* IP-Location - teal */
.api-item-text{flex:1;min-width:0}
.api-item-text h4{
margin:0 0 .25rem;font-size:1rem;font-weight:800;color:#0f172a;letter-spacing:-.01em;
}
.api-item-text p{margin:0;color:#64748b;font-size:.86rem;line-height:1.5}
@media(max-width:1200px){
.api-panel-grid{grid-template-columns:repeat(2, 1fr)}
}
@media(max-width:760px){
.api-panel{padding:2rem 1.25rem 2rem;border-radius:18px}
.api-panel-step{display:none}
.api-panel-grid{grid-template-columns:1fr;gap:1rem}
}
/* === Use cases === */
.use-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem}
@media(max-width:800px){.use-cases{grid-template-columns:1fr}}
.use-case{background:linear-gradient(135deg,#eef2ff,#f0f9ff);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;text-align:center}
.use-case h4{margin:.5rem 0 .35rem;color:var(--ink)}
.use-case .ic{font-size:2rem;color:var(--brand)}
/* === App store buttons === */
.store-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.store-btn{
display:inline-flex;align-items:center;gap:.6rem;background:#0b1224;color:#fff;
padding:.65rem 1.1rem;border-radius:10px;text-decoration:none;font-size:.9rem;
}
.store-btn:hover{background:#1e293b;text-decoration:none}
.store-btn small{display:block;font-size:.7rem;opacity:.7}
.store-btn strong{display:block;font-size:.95rem;font-weight:700}
.store-btn .ic{font-size:1.6rem}
/* === Long-form prose === */
.prose{max-width:820px;margin:0 auto}
.prose p{font-size:1rem;color:var(--ink-2)}
.prose h2{margin-top:2rem}
.prose h3{margin-top:1.4rem}
/* === Breadcrumbs === */
.breadcrumbs{padding:.85rem 0;font-size:.88rem;color:var(--muted)}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0}
.breadcrumbs li{display:flex;align-items:center}
.breadcrumbs li+li::before{content:"\203A";margin:0 .5rem;color:#94a3b8}
.breadcrumbs a{color:var(--ink-2);text-decoration:none}
.breadcrumbs a:hover{color:var(--brand);text-decoration:underline}
.breadcrumbs [aria-current="page"]{color:var(--ink);font-weight:600}
/* === Related grid (interlinking widget) === */
.related-block .related-grid{
list-style:none;padding:0;margin:0;
display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem 1rem;
}
@media(max-width:900px){.related-block .related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.related-block .related-grid{grid-template-columns:1fr}}
.related-block .related-grid a{
display:block;background:#fff;border:1px solid var(--line);border-radius:10px;
padding:.7rem .9rem;color:var(--ink-2);font-size:.92rem;font-weight:500;
transition:.12s border-color,.12s color,.12s transform;
}
.related-block .related-grid a:hover{
border-color:var(--brand);color:var(--brand);text-decoration:none;transform:translateX(2px);
}
/* === Industries (alternating cards + 2-col split header) === */
.ind-section{
position:relative;background:#fafbfd;
padding:5rem 0 6rem;overflow:hidden;
}
.ind-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none;z-index:0}
.ind-blob-1{width:480px;height:480px;top:-200px;left:-180px;background:radial-gradient(circle,#bbf7d0 0%,transparent 70%)}
.ind-blob-2{width:420px;height:420px;bottom:-180px;right:-180px;background:radial-gradient(circle,#bef264 0%,transparent 70%)}
.ind-section > .container{position:relative;z-index:1}
/* Header (split: heading left, lede + button right) */
.ind-head-split{
display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:end;
margin-bottom:3.5rem;
}
.ind-eyebrow{
display:inline-block;font-size:.85rem;font-weight:700;letter-spacing:.16em;
color:var(--brand);margin-bottom:1rem;text-transform:uppercase;
}
.ind-title{
font-size:clamp(2rem,3.8vw,3.2rem);font-weight:800;letter-spacing:-.02em;
line-height:1.15;color:#0a0a0a;margin:0;
}
.ind-title-accent{color:var(--brand)}
.ind-head-right{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
.ind-lede{color:#64748b;font-size:1rem;line-height:1.65;margin:0;max-width:520px}
.ind-cta{
display:inline-flex;align-items:center;
padding:.95rem 1.75rem;border-radius:999px;
background:var(--brand);color:#fff!important;font-weight:700;font-size:.92rem;
box-shadow:0 14px 28px -10px rgba(24,105,0,.45);
transition:.2s transform,.2s box-shadow;
}
.ind-cta:hover{transform:translateY(-2px);box-shadow:0 18px 36px -10px rgba(24,105,0,.6);text-decoration:none}
/* 5-card grid */
.ind-grid{
display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem;
}
.ind-card{
position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
background:#fff;border-radius:18px;padding:2rem 1.4rem 1.75rem;
box-shadow:0 18px 40px -22px rgba(15,23,42,.16), 0 4px 12px -6px rgba(15,23,42,.05);
transition:.25s transform,.25s box-shadow;
}
.ind-card:hover{transform:translateY(-6px);box-shadow:0 28px 50px -22px rgba(24,105,0,.25)}
/* Alternating dark green card */
.ind-card-dark{
background:linear-gradient(180deg,#0e3004 0%, #186900 50%, #22a83d 100%);
color:#fff;
}
.ind-card-dark .ind-card-title{color:#fff}
.ind-card-dark .ind-card-desc{color:rgba(255,255,255,.85)}
.ind-card-dark .ind-card-ic{color:#fff;background:rgba(255,255,255,.14)}
.ind-card-dark .ind-card-cta{color:#bef264;background:rgba(255,255,255,.12)}
.ind-card-dark .ind-card-cta:hover{background:rgba(255,255,255,.22);color:#fff}
.ind-card-ic{
width:60px;height:60px;border-radius:14px;
background:#e6f5dd;color:var(--brand);
display:grid;place-items:center;margin-bottom:1.1rem;
transition:.2s background,.2s color;
}
.ind-card-ic svg{width:30px;height:30px}
.ind-card-title{
margin:0 0 .65rem;font-size:1.15rem;font-weight:800;color:#0a0a0a;letter-spacing:-.01em;
}
.ind-card-desc{
margin:0 0 1.1rem;color:#64748b;font-size:.88rem;line-height:1.55;flex:1;
}
.ind-card-cta{
display:inline-flex;align-items:center;
padding:.55rem 1rem;border-radius:999px;
background:#e6f5dd;color:var(--brand)!important;font-weight:700;font-size:.82rem;
margin-top:auto;
transition:.2s background,.2s color;
}
.ind-card-cta:hover{background:var(--brand);color:#fff!important;text-decoration:none}
@media(max-width:1080px){
.ind-head-split{grid-template-columns:1fr;gap:1.5rem}
.ind-head-right{align-items:flex-start}
.ind-grid{grid-template-columns:repeat(3,1fr);gap:1rem}
.ind-card:nth-child(n+4){grid-column:span 1}
}
@media(max-width:760px){
.ind-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
.ind-grid{grid-template-columns:1fr}
}
/* === History timeline (Our achievement) === */
.hist-section{
position:relative;background:#fff;padding:5rem 0 6rem;overflow:hidden;
}
.hist-head{text-align:center;margin-bottom:3.5rem}
.hist-eyebrow{
display:inline-block;font-size:1rem;font-weight:800;letter-spacing:.04em;
color:#f97316;margin-bottom:.85rem;
}
.hist-title{
font-size:clamp(2rem,4.2vw,3.6rem);font-weight:800;letter-spacing:-.02em;
line-height:1.1;color:#0a0a0a;margin:0;
}
.hist-title-accent{color:var(--brand)}
.hist-timeline{
position:relative;display:flex;align-items:center;gap:1.25rem;
max-width:1280px;margin:0 auto;padding:0 1rem;
}
/* Carousel arrows */
.hist-arrow{
flex-shrink:0;width:42px;height:42px;border-radius:50%;
background:transparent;border:0;color:#0f172a;cursor:pointer;
display:grid;place-items:center;
transition:.2s background,.2s transform;
}
.hist-arrow:hover{background:#f1f5f9;transform:scale(1.05)}
.hist-track{
flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
position:relative;
}
.hist-step{
position:relative;text-align:center;padding:0 1rem;
}
.hist-year{
font-size:1.4rem;font-weight:800;color:#0f172a;letter-spacing:.02em;
margin-bottom:1.25rem;
}
/* Coral horizontal line with marker */
.hist-line{
position:relative;height:3px;background:#fca5a5;
margin:0 0 1.5rem;border-radius:2px;
}
.hist-mark{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:4px;height:18px;background:#f97316;border-radius:2px;
}
/* First step: line only on right side */
.hist-line-start{
background:linear-gradient(90deg, transparent 0%, transparent 50%, #fca5a5 50%, #fca5a5 100%);
}
.hist-line-start .hist-mark{left:50%}
/* Last step: line only on left side */
.hist-line-end{
background:linear-gradient(90deg, #fca5a5 0%, #fca5a5 50%, transparent 50%, transparent 100%);
}
.hist-line-end .hist-mark{left:50%}
.hist-step-title{
font-size:1.4rem;font-weight:800;color:#0a0a0a;letter-spacing:-.01em;
margin:0 0 .65rem;
}
.hist-step-desc{
color:#64748b;font-size:.92rem;line-height:1.6;
max-width:240px;margin:0 auto;
}
@media(max-width:960px){
.hist-track{grid-template-columns:repeat(2,1fr);gap:2rem 0}
.hist-line{display:none}
}
@media(max-width:560px){
.hist-track{grid-template-columns:1fr;gap:2.5rem 0}
.hist-arrow{display:none}
.hist-step{border-left:3px solid #fca5a5;padding-left:1.5rem;text-align:left}
.hist-step-desc{margin:0}
}
/* === Industries hero (dark green leadership-team-style cards) === */
.industries-hero{
position:relative;overflow:hidden;
padding:6rem 0 7rem;
background:linear-gradient(135deg, #052e16 0%, #14532d 45%, #166534 100%);
color:#fff;
}
/* Curved decorative blobs */
.ih-blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.ih-blob-1{
width:560px;height:560px;top:-200px;left:-200px;
background:radial-gradient(circle,rgba(74,222,128,.18) 0%, transparent 70%);
}
.ih-blob-2{
width:520px;height:520px;bottom:-260px;right:-160px;
background:radial-gradient(circle,rgba(190,242,100,.12) 0%, transparent 70%);
}
.ih-blob-3{
width:340px;height:340px;top:30%;left:42%;
background:radial-gradient(circle,rgba(34,197,94,.08) 0%, transparent 70%);
}
.industries-hero .container{position:relative;z-index:1}
/* Header */
.ih-head{text-align:center;max-width:780px;margin:0 auto 3.25rem}
.ih-eyebrow{
display:inline-flex;align-items:center;gap:.6rem;
font-size:.78rem;font-weight:700;letter-spacing:.2em;
color:#bef264;margin-bottom:1rem;text-transform:uppercase;
}
.ih-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:#bef264;box-shadow:0 0 8px rgba(190,242,100,.6)}
.ih-title{
font-size:clamp(1.9rem,3.6vw,3rem);font-weight:800;letter-spacing:-.02em;
line-height:1.18;color:#fff;margin:0 0 1rem;
}
.ih-lede{
color:rgba(255,255,255,.78);font-size:1rem;line-height:1.6;
max-width:640px;margin:0 auto;
}
/* Card grid */
.ih-grid{
display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem;
max-width:1300px;margin:0 auto;
}
/* Each card: image-area on top, white info card overlapping at bottom */
.ih-card{
position:relative;display:block;
border-radius:18px;overflow:visible;
text-decoration:none;color:#0f172a;
padding-bottom:5.5rem; /* leave space for the overlapping info card */
transition:.3s transform;
}
.ih-card:hover{transform:translateY(-6px);text-decoration:none}
/* Top image-area block (replacing person photo with gradient + icon) */
.ih-card-top{
position:relative;height:200px;border-radius:18px;
display:grid;place-items:center;
box-shadow:0 24px 50px -22px rgba(0,0,0,.55);
overflow:hidden;
}
.ih-card-top svg{width:96px;height:96px;color:rgba(255,255,255,.95);position:relative;z-index:1}
.ih-card-top::before{
content:"";position:absolute;inset:0;
background:radial-gradient(120% 80% at 30% 30%, rgba(255,255,255,.16) 0%, transparent 60%);
}
.ih-card-top::after{
content:"";position:absolute;inset:auto -40% -60% auto;width:240px;height:240px;
border-radius:50%;background:rgba(255,255,255,.06);
}
/* Five tonal variants — all brand-green family (different shades for visual rhythm) */
.ih-tone-1{background:linear-gradient(135deg,#0f4400 0%, #186900 60%, #22a83d 100%)}
.ih-tone-2{background:linear-gradient(135deg,#14532d 0%, #166534 50%, #15803d 100%)}
.ih-tone-3{background:linear-gradient(135deg,#365314 0%, #4d7c0f 50%, #65a30d 100%)}
.ih-tone-4{background:linear-gradient(135deg,#064e3b 0%, #047857 50%, #16a34a 100%)}
.ih-tone-5{background:linear-gradient(135deg,#1a2e05 0%, #365314 50%, #4d7c0f 100%)}
/* Bottom floating info card */
.ih-card-info{
position:absolute;left:1rem;right:1rem;bottom:0;
background:#fff;border-radius:14px;
padding:1.1rem 1.25rem 2.4rem;
box-shadow:0 18px 36px -18px rgba(0,0,0,.4);
text-align:center;
}
.ih-card-info h3{
margin:0 0 .35rem;font-size:1.05rem;font-weight:800;color:#0f172a;letter-spacing:-.01em;
}
.ih-card-info p{
margin:0;font-size:.8rem;color:#64748b;font-weight:500;line-height:1.4;
}
.ih-plus{
position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);
width:44px;height:44px;border-radius:50%;
background:#bef264;color:#052e16;
display:grid;place-items:center;
font-size:1.4rem;font-weight:700;line-height:1;
box-shadow:0 12px 24px -8px rgba(190,242,100,.6), 0 0 0 4px rgba(255,255,255,.08);
transition:.2s transform,.2s background;
}
.ih-card:hover .ih-plus{
transform:translateX(-50%) rotate(90deg);background:#fff;color:#052e16;
}
@media(max-width:1080px){
.ih-grid{grid-template-columns:repeat(3,1fr);max-width:860px}
.ih-card-top{height:180px}
.ih-card-top svg{width:88px;height:88px}
}
@media(max-width:680px){
.industries-hero{padding:4rem 0 5rem}
.ih-grid{grid-template-columns:repeat(2,1fr);gap:1rem;max-width:560px}
.ih-card-top{height:160px}
.ih-card-top svg{width:76px;height:76px}
}
@media(max-width:420px){
.ih-grid{grid-template-columns:1fr;max-width:340px}
.ih-card-top{height:170px}
.ih-card-top svg{width:84px;height:84px}
}
/* === Brand logo grid (white pills with real partner logos) === */
.brands-section{
position:relative;padding:5rem 0 6rem;background:#f3f6fb;overflow:hidden;
}
.brands-blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(40px)}
.brands-blob-1{width:600px;height:600px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.85) 0%, transparent 70%)}
.brands-blob-2{width:340px;height:340px;top:8%;right:5%;background:radial-gradient(circle,rgba(219,234,254,.6) 0%, transparent 70%)}
.brands-section .container{position:relative;z-index:1}
.brands-head{text-align:center;margin-bottom:3.5rem;max-width:760px;margin-left:auto;margin-right:auto}
.brands-title{
font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:800;letter-spacing:-.02em;
line-height:1.2;color:#0f172a;margin:0;
}
/* Centered grid with auto-flowing rows */
.brands-grid{
display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
gap:1.5rem 1.5rem;
max-width:1200px;margin:0 auto;
justify-items:center;
}
.brand-pill{
display:grid;place-items:center;
width:100%;max-width:220px;
background:#fff;border-radius:999px;
padding:1rem 1.5rem;height:88px;
box-shadow:0 14px 30px -18px rgba(15,23,42,.16), 0 3px 8px -4px rgba(15,23,42,.05);
transition:.25s transform,.25s box-shadow;
text-decoration:none;
}
.brand-pill:hover{
transform:translateY(-5px);
box-shadow:0 24px 44px -18px rgba(15,23,42,.22), 0 6px 14px -4px rgba(15,23,42,.1);
text-decoration:none;
}
.brand-pill svg,.brand-pill img{
display:block;width:auto;height:auto;
max-height:46px;max-width:160px;
object-fit:contain;
filter:grayscale(.15);transition:.2s filter,.2s transform;
}
.brand-pill:hover img,.brand-pill:hover svg{filter:grayscale(0);transform:scale(1.04)}
@media(max-width:1080px){
.brands-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:920px}
}
@media(max-width:840px){
.brands-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;max-width:680px}
.brand-pill{height:76px;padding:.85rem 1.25rem;max-width:200px}
.brand-pill img,.brand-pill svg{max-height:40px}
}
@media(max-width:540px){
.brands-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}
.brand-pill{height:68px;padding:.75rem 1rem;max-width:180px}
.brand-pill img,.brand-pill svg{max-height:36px}
}
/* === Inline-prose interlink bar === */
.deep-links{
background:linear-gradient(135deg,#eef2ff,#f0f9ff);border:1px solid #c7d2fe;border-radius:12px;
padding:1rem 1.25rem;display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center;
font-size:.9rem;margin:1.5rem 0;
}
.deep-links strong{color:var(--ink);margin-right:.4rem}
.deep-links a{color:var(--brand);font-weight:500}
.deep-links a:hover{text-decoration:underline}
/* === Footer CTA strip === */
.footer-cta{padding:3.5rem 0;background:linear-gradient(135deg, #0e3004 0%, #186900 60%, #2a8d0d 100%);color:#fff}
.footer-cta h2{color:#fff;margin:0 0 .25rem}
.footer-cta p{color:rgba(255,255,255,.85);margin:0}
.footer-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.footer-cta .btn-primary{background:#fff;color:var(--brand);box-shadow:none}
.footer-cta .btn-primary:hover{background:#f8fafc}
/* === Footer (full multi-column) === */
.site-footer{background:#0b1224;color:#cbd5e1;padding:3.5rem 0 0}
.site-footer h4,.site-footer h5{color:#fff;font-size:.95rem;margin:0 0 .85rem;letter-spacing:.02em}
.site-footer a{color:#cbd5e1}
.site-footer a:hover{color:#fff}
.footer-top{
display:grid;grid-template-columns:2fr 1.1fr 1.1fr 1.3fr;gap:2.5rem;
padding-bottom:2rem;border-bottom:1px solid #1f2a44;margin-bottom:2rem;
align-items:start;
}
@media(max-width:1100px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.footer-top{grid-template-columns:1fr;gap:1.75rem}}
.footer-brand .brand{display:inline-flex}
.footer-brand p{color:#94a3b8;margin-top:.85rem;max-width:38ch;font-size:.93rem;line-height:1.55}
.footer-info h4{display:flex;align-items:center;gap:.5rem;color:#fff;font-size:.95rem;margin:0 0 .65rem;font-weight:700}
.footer-info p{color:#cbd5e1;font-size:.9rem;line-height:1.6;margin:0}
.footer-info a{color:#cbd5e1}
.footer-info a:hover{color:#fff}
/* === Integrations hub (central node + branched lines + bubble logos) === */
.ihub-section{position:relative;background:#fff;padding:5rem 0 6rem;overflow:hidden}
.ihub-head{text-align:center;margin-bottom:3rem;max-width:760px;margin-left:auto;margin-right:auto}
.ihub-title{
font-size:clamp(1.9rem,3.6vw,3rem);font-weight:800;letter-spacing:-.02em;
line-height:1.15;color:#0a0a0a;margin:0 0 1rem;
}
.ihub-title-accent{color:var(--brand)}
.ihub-lede{color:#64748b;font-size:1rem;line-height:1.6;margin:0 auto;max-width:640px}
/* Stage holds the SVG (lines + center) and absolute-positioned bubbles */
.ihub-stage{
position:relative;width:100%;max-width:1200px;margin:0 auto;
aspect-ratio:1200 / 420;
}
.ihub-svg{display:block;width:100%;height:100%}
/* Logo bubbles positioned at SVG endpoints (~360 in viewBox = 86% of 420 height) */
.ihub-bubble{
position:absolute;top:73%;transform:translate(-50%,-50%);
width:120px;height:120px;border-radius:50%;
display:grid;place-items:center;
box-shadow:0 18px 40px -16px rgba(15,23,42,.18);
transition:.25s transform,.25s box-shadow;
}
.ihub-bubble:hover{transform:translate(-50%,calc(-50% - 6px));box-shadow:0 28px 50px -18px rgba(15,23,42,.28)}
.ihub-disc{
position:absolute;inset:0;border-radius:50%;z-index:0;
}
.ihub-logo{position:relative;z-index:1;width:54px;height:54px}
/* Pastel backgrounds per bubble */
.ihub-disc-1{background:#fef3c7} /* Mailchimp - cream */
.ihub-disc-2{background:#fee2e2} /* Airtable - pink */
.ihub-disc-3{background:#ffedd5} /* HubSpot - peach */
.ihub-disc-4{background:#dcfce7} /* Squarespace - mint */
.ihub-disc-5{background:#dbeafe} /* Zendesk - light blue */
.ihub-disc-6{background:#fee2e2} /* Zapier - light pink */
.ihub-disc-7{background:#cffafe} /* Calendly - cyan */
.ihub-disc-8{background:#ede9fe} /* Wix - lavender */
@media(max-width:900px){
.ihub-stage{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:2rem;padding:1rem 0 0}
.ihub-svg{display:none}
.ihub-bubble{position:static;transform:none;width:90px;height:90px}
.ihub-bubble:hover{transform:translateY(-4px)}
.ihub-stage::before{
content:"";display:block;width:80px;height:80px;border-radius:50%;
background:radial-gradient(circle,#e0eaff 0%, #fff 60%);
border:2px solid #bfd5ff;
}
/* Wrap bubbles into 4-col grid on tablet */
.ihub-stage{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;justify-items:center}
.ihub-stage::before{grid-column:1 / -1;justify-self:center;margin-bottom:1rem}
}
@media(max-width:520px){
.ihub-stage{grid-template-columns:repeat(3,1fr)}
.ihub-bubble{width:78px;height:78px}
.ihub-logo{width:44px;height:44px}
}
.footer-links{
display:grid;grid-template-columns:repeat(4,1fr) 1.2fr;gap:2rem 1.5rem;padding-bottom:2rem;
}
@media(max-width:1100px){.footer-links{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.footer-links{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.footer-links{grid-template-columns:1fr}}
.footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem;font-size:.88rem}
/* Trust profiles column */
.footer-col-trust a{
color:#cbd5e1;
transition:.18s color,.18s transform;
}
.footer-col-trust a:hover{color:#bef264;transform:translateX(2px);text-decoration:none}
.footer-seo{
border-top:1px solid #1f2a44;padding:1.5rem 0;display:flex;flex-wrap:wrap;
gap:.5rem 1rem;align-items:center;
}
.footer-seo strong{color:#fff;font-size:.88rem}
.footer-seo ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem .9rem}
.footer-seo li+li::before{content:"|";margin-right:.9rem;color:#475569}
.footer-seo a{color:#94a3b8;font-size:.85rem}
.footer-seo a:hover{color:#fff}
/* adivaha family of brands strip (favicons + names) */
.footer-family{
border-top:1px solid #1f2a44;padding:1.5rem 0;
display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;
}
.footer-family strong{color:#fff;font-size:.88rem;flex-shrink:0}
.footer-family ul{
list-style:none;padding:0;margin:0;
display:flex;flex-wrap:wrap;gap:.5rem .75rem;
}
.footer-family a{
display:inline-flex;align-items:center;gap:.5rem;
padding:.4rem .8rem;border-radius:999px;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
color:#cbd5e1;font-size:.85rem;font-weight:500;
transition:.18s background,.18s border-color,.18s color,.18s transform;
}
.footer-family a:hover{
background:rgba(190,242,100,.12);border-color:rgba(190,242,100,.25);
color:#fff;transform:translateY(-2px);text-decoration:none;
}
.footer-family img{
width:18px;height:18px;border-radius:4px;background:#fff;padding:1px;
flex-shrink:0;
}
.footer-bottom{margin-top:1rem;padding:1.25rem 0;border-top:1px solid #1f2a44;font-size:.85rem}
.footer-bottom .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;color:#94a3b8}
.footer-bottom a{color:#94a3b8}
.legal-links{font-size:.85rem}
/* ========== API page components ========== */
.api-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center}
@media(max-width:900px){.api-grid{grid-template-columns:1fr}}
/* Terminal-style code preview */
.code-card{
background:#0b1224;border:1px solid #1f2a44;border-radius:14px;overflow:hidden;
box-shadow:0 20px 50px -22px rgba(15,23,42,.5),0 8px 20px -10px rgba(24,105,0,.2);
}
.code-card .code-top{
display:flex;align-items:center;justify-content:space-between;
padding:.75rem 1rem;background:#111c34;border-bottom:1px solid #1f2a44;
}
.code-card .code-top .ttl{display:inline-flex;align-items:center;gap:.55rem;color:#cbd5e1;font-family:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;font-size:.85rem;font-weight:600}
.code-card .code-top .lng{color:#64748b;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.code-card .code-body{
padding:1.1rem 1.25rem;color:#e2e8f0;font-family:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
font-size:.85rem;line-height:1.7;overflow-x:auto;
}
.code-card .tk-c{color:#64748b;font-style:italic}
.code-card .tk-k{color:#22c55e;font-weight:600}
.code-card .tk-p{color:#94a3b8}
.code-card .tk-s{color:#fbbf24}
.code-card .tk-f{color:#86efac}
.code-card .tk-n{color:#f472b6}
.code-card .code-cursor{display:inline-block;width:8px;height:14px;background:#22c55e;vertical-align:middle;margin-left:4px;animation:codeBlink 1s steps(1) infinite}
@keyframes codeBlink{50%{opacity:0}}
/* API endpoint pills (small badges) */
.api-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-top:1rem}
@media(max-width:480px){.api-list{grid-template-columns:1fr}}
.api-pill{
display:flex;align-items:center;gap:.65rem;padding:.7rem .85rem;
background:#fff;border:1px solid var(--line);border-radius:12px;
transition:.15s transform,.15s border-color,.15s box-shadow;
}
.api-pill:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:0 8px 18px -10px rgba(24,105,0,.3)}
.api-pill .pic{
width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
background:#eef9ec;color:var(--brand);flex-shrink:0;
}
.api-pill .nm{font-weight:700;font-size:.92rem;color:var(--ink);line-height:1.1}
.api-pill .dc{font-size:.78rem;color:var(--muted);margin-top:2px}
/* SDK list (centered, wider) */
.sdk-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;
max-width:880px;margin:0 auto;
}
@media(max-width:720px){.sdk-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.sdk-grid{grid-template-columns:1fr}}
.sdk-grid .api-pill{padding:.85rem 1rem}
.sdk-grid .api-pill .dc{font-family:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;font-size:.74rem}
/* Tag chip used in feature cards */
.feature .tag{
display:inline-block;margin-top:.6rem;padding:.18rem .55rem;
background:#eef9ec;color:var(--brand);font-size:.72rem;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;border-radius:999px;
}
/* ========== MEGA MENU (Solutions dropdown) ========== */
/* .has-mega is static (not relative) so the mega-menu anchors to .site-header
instead of the trigger. This prevents off-screen overflow when the trigger
is positioned far-left (Solutions is the first nav item). */
.has-mega{position:static}
.has-mega > a{display:inline-flex;align-items:center;gap:.35rem}
.has-mega > a .mega-caret{transition:transform .2s;color:var(--muted)}
.has-mega:hover > a .mega-caret,
.has-mega:focus-within > a .mega-caret{transform:rotate(180deg);color:var(--brand)}
.mega-menu{
position:absolute;top:100%;left:50%;
transform:translateX(-50%) translateY(-6px);
width:min(1180px, calc(100vw - 2.5rem));
background:#fff;border:1px solid var(--line);border-radius:16px;
box-shadow:0 30px 60px -20px rgba(15,23,42,.18),0 8px 20px -12px rgba(15,23,42,.1);
opacity:0;visibility:hidden;
transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
z-index:60;pointer-events:none;
}
/* Invisible hover-bridge: cursor can move from trigger to dropdown without triggering :not(:hover) */
.mega-menu::before{
content:"";position:absolute;top:-18px;left:0;right:0;height:18px;background:transparent;
}
.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu,
.has-mega.mega-open .mega-menu{
opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto;
transition:opacity .18s ease,transform .18s ease,visibility 0s linear 0s;
}
/* Widen hover bridge: trigger has its own bridge below it so cursor doesn't fall
into the horizontal gap between trigger position and centered dropdown. */
.has-mega > a{position:relative}
.has-mega > a::after{
content:"";position:absolute;top:100%;left:-40px;right:-40px;height:30px;
background:transparent;pointer-events:none;
}
.has-mega:hover > a::after,
.has-mega.mega-open > a::after{pointer-events:auto}
.mega-cols{
padding:1.75rem;
display:grid;grid-template-columns:repeat(3,1fr) 1.1fr;gap:1.5rem 1.75rem;
}
@media(max-width:1080px){.mega-cols{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
@media(max-width:720px){.mega-cols{grid-template-columns:1fr;padding:1.25rem;gap:1rem}}
.mega-col h5{
font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted);margin:0 0 .9rem;padding-bottom:.55rem;border-bottom:1px solid var(--line);
}
.mega-col ul{list-style:none;padding:0;margin:0;display:grid;gap:.15rem}
.mega-col ul li a{
display:flex;align-items:flex-start;gap:.7rem;padding:.55rem .55rem;border-radius:10px;
color:var(--ink-2);transition:.15s background,.15s color;
}
.mega-col ul li a:hover{background:var(--bg-alt);color:var(--ink);text-decoration:none}
.mega-col .mega-ic{
width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
background:#eef9ec;font-size:1rem;flex-shrink:0;
transition:.15s background,.15s transform;
}
.mega-col ul li a:hover .mega-ic{background:var(--brand-grad);transform:scale(1.05)}
.mega-text{display:flex;flex-direction:column;gap:.05rem;line-height:1.3}
.mega-text .nm{font-weight:700;color:var(--ink);font-size:.93rem}
.mega-text .dc{font-size:.78rem;color:var(--muted)}
.mega-col ul li a:hover .nm{color:var(--brand)}
/* Feature column on the right */
.mega-feature{
background:linear-gradient(135deg,#0f3300 0%,#186900 60%,#2a8d0d 100%);
color:#fff;border-radius:14px;padding:1.5rem;
display:flex;flex-direction:column;justify-content:center;gap:.35rem;
position:relative;overflow:hidden;
}
.mega-feature::after{
content:"";position:absolute;inset:auto -40px -40px auto;width:180px;height:180px;
background:radial-gradient(circle,rgba(255,255,255,.18),transparent 60%);
}
.mega-feature-eyebrow{
display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:rgba(255,255,255,.85);background:rgba(255,255,255,.14);
padding:.25rem .55rem;border-radius:999px;width:fit-content;margin-bottom:.25rem;
}
.mega-feature h4{color:#fff;font-size:1.4rem;font-weight:800;margin:0;line-height:1.2}
.mega-feature p{color:rgba(255,255,255,.86);font-size:.88rem;margin:.4rem 0 .8rem;line-height:1.5}
.mega-feature .btn-primary{background:#fff;color:var(--brand);box-shadow:none;width:fit-content}
.mega-feature .btn-primary:hover{background:#f0fdf4;color:var(--brand)}
@media(max-width:1080px){.mega-feature{display:none}.mega-cols{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.mega-cols{grid-template-columns:1fr}}
/* On mobile (<= 960px), nav becomes drawer - reset mega-menu to inline */
@media(max-width:960px){
.has-mega{position:relative}
.mega-menu{
position:static;border:0;box-shadow:none;
opacity:1;visibility:visible;transform:none;pointer-events:auto;
background:transparent;
}
.mega-cols{padding:.5rem 0;gap:.75rem;grid-template-columns:1fr}
.mega-col h5{margin-bottom:.5rem;padding-bottom:.4rem}
.mega-feature{display:none}
}
/* ========================================================
SOLUTION SUB-PAGES (travel-agencies, dmc-software, erp,
gift-cards, loyalty, ai-automation, mobile-apps,
corporate-business). Custom classes from adivaha-site
markup get full styling here so all 8 pages beautify
from one place.
======================================================== */
/* ---------- Ambient hero blobs ---------- */
.amb-blobs{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.amb-blob{
position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;
animation:ambFloat 12s ease-in-out infinite;
}
.amb-blob.purple{background:radial-gradient(circle,#a78bfa 0%, transparent 65%)}
.amb-blob.blue {background:radial-gradient(circle,#22a83d 0%, transparent 65%)}
.amb-blob.cyan {background:radial-gradient(circle,#0ea5a3 0%, transparent 65%)}
.amb-blob.gold {background:radial-gradient(circle,#f5b942 0%, transparent 65%)}
.amb-blob.green {background:radial-gradient(circle,#22c55e 0%, transparent 65%)}
@keyframes ambFloat{
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(20px,-20px) scale(1.08)}
}
.page-hero{position:relative;overflow:hidden}
.page-hero > .container{position:relative;z-index:1}
/* ---------- Inline breadcrumb (single class, used inside hero) ---------- */
.page-hero .breadcrumb{
display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
font-size:.85rem;color:var(--muted);margin-bottom:1rem;
}
.page-hero .breadcrumb a{color:var(--ink-2)}
.page-hero .breadcrumb a:hover{color:var(--brand)}
.page-hero .breadcrumb span{color:var(--muted);font-weight:400}
/* ---------- Feature checklist with custom icons ---------- */
.feature-list{
list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:1rem;
}
.feature-list li{display:flex;gap:.85rem;align-items:flex-start}
.feature-list .check{
width:26px;height:26px;border-radius:8px;flex-shrink:0;
background:var(--brand-grad);color:#fff;display:grid;place-items:center;
margin-top:.15rem;box-shadow:0 4px 10px -4px rgba(24,105,0,.4);
}
.feature-list li strong{
display:block;color:var(--ink);font-weight:700;font-size:1rem;line-height:1.3;
}
.feature-list li span{
display:block;color:var(--muted);font-size:.92rem;line-height:1.55;margin-top:.15rem;
}
/* ---------- Dashboard mock (analytics preview card) ---------- */
.dashboard-mock{
background:#fff;border:1px solid var(--line);border-radius:18px;
box-shadow:0 30px 60px -25px rgba(15,23,42,.18),0 10px 25px -15px rgba(24,105,0,.15);
overflow:hidden;
}
.dm-top{
display:flex;align-items:center;justify-content:space-between;
padding:.85rem 1.1rem;background:var(--bg-alt);border-bottom:1px solid var(--line);
}
.dm-title{font-size:.85rem;font-weight:700;color:var(--ink-2)}
.dm-dots{display:flex;gap:.3rem}
.dm-dots span{width:9px;height:9px;border-radius:50%;background:#e5e7eb}
.dm-dots span:nth-child(1){background:#fca5a5}
.dm-dots span:nth-child(2){background:#fcd34d}
.dm-dots span:nth-child(3){background:#86efac}
.dashboard-mock .dm-stats{
display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
background:var(--line);
}
.dashboard-mock .dm-stat{background:#fff;padding:1.1rem 1rem}
.dashboard-mock .dm-stat .l{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dashboard-mock .dm-stat .v{font-size:1.45rem;font-weight:800;color:var(--ink);line-height:1.1;margin:.25rem 0 .15rem;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.dashboard-mock .dm-stat .d{font-size:.78rem;color:#16a34a;font-weight:600}
.dm-rows{display:grid;gap:1px;background:var(--line)}
.dm-row{
background:#fff;padding:.85rem 1.1rem;
display:flex;align-items:center;justify-content:space-between;gap:.75rem;
font-size:.88rem;
}
.dm-row .who{display:flex;align-items:center;gap:.65rem;color:var(--ink-2)}
.dm-row .av{
width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
font-size:.7rem;font-weight:800;color:#fff;letter-spacing:.04em;
background:linear-gradient(135deg,#186900,#42c11d);
}
.dm-row .badge{
font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:.22rem .55rem;border-radius:999px;
}
.dm-row .badge.ok{background:#dcfce7;color:#166534}
.dm-row .badge.pn{background:#fef3c7;color:#92400e}
.dm-row .badge.warn{background:#fee2e2;color:#991b1b}
/* ---------- Tag chip (used in feature cards on solution pages) ---------- */
.feature .tag{
display:inline-block;margin-top:.65rem;padding:.2rem .55rem;
background:#eef9ec;color:var(--brand);font-size:.7rem;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;border-radius:999px;
}
/* ---------- Split tweaks for solution pages (2-col with mock) ---------- */
.split-content{display:flex;flex-direction:column}
/* ---------- DMC card (used on dmc-software.php) ---------- */
.dmc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:900px){.dmc-grid{grid-template-columns:1fr}}
.dmc-card{
background:#fff;border:1px solid var(--line);border-radius:14px;
padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;
transition:.2s transform,.2s box-shadow;
}
.dmc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
/* ---------- Register/lead form section ---------- */
.register-section{background:var(--bg-alt)}
.register-card{
background:#fff;border:1px solid var(--line);border-radius:18px;
padding:2rem;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;
box-shadow:0 20px 50px -25px rgba(15,23,42,.15);
}
@media(max-width:900px){.register-card{grid-template-columns:1fr;gap:1.5rem;padding:1.5rem}}
.register-info{display:flex;flex-direction:column;gap:.75rem}
.register-info h2{margin:.25rem 0}
.register-points{list-style:none;padding:0;margin:.75rem 0 0;display:grid;gap:.6rem}
.register-points li{display:flex;align-items:flex-start;gap:.6rem;color:var(--ink-2);font-size:.94rem}
.register-points .ck{
width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:.15rem;
background:var(--brand-grad);color:#fff;display:grid;place-items:center;
}
.register-form{display:flex;flex-direction:column;gap:.85rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.form-field.full{grid-column:1 / -1}
.form-field label{
display:block;font-size:.78rem;font-weight:700;color:var(--ink-2);
margin-bottom:.3rem;letter-spacing:.02em;
}
.form-field input,.form-field select,.form-field textarea{
width:100%;border:1px solid var(--line);border-radius:10px;padding:.65rem .85rem;
font:inherit;color:var(--ink);background:#fff;transition:.15s border-color,.15s box-shadow;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(24,105,0,.15);
}
.form-field textarea{resize:vertical;min-height:90px}
.form-note{padding:.7rem .9rem;border-radius:10px;font-size:.9rem;font-weight:500;margin-bottom:.5rem}
.form-note.ok{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.form-note.err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
/* ---------- Stat-grid stretch on solution pages ---------- */
.split .stat-grid{align-content:start}
/* ---------- gold-text accent ---------- */
.gold-text{
background:linear-gradient(135deg,#f5b942 0%,#fcd34d 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* ========== Related resources grid (interlinking) ========== */
.related-grid{
list-style:none;padding:0;margin:0;display:grid;
grid-template-columns:repeat(2,1fr);gap:.6rem 1rem;
max-width:980px;margin:0 auto;
}
@media(max-width:600px){.related-grid{grid-template-columns:1fr}}
.related-grid li a{
display:block;padding:.85rem 1rem;background:#fff;border:1px solid var(--line);
border-radius:10px;color:var(--ink-2);font-size:.95rem;font-weight:500;
transition:.15s border-color,.15s background,.15s color,.15s transform;
}
.related-grid li a:hover{
border-color:var(--brand);background:#eef9ec;color:var(--brand);
transform:translateX(4px);text-decoration:none;
}
/* ===========================================
Q&A PORTAL (qa/) - blends with sitemap design
=========================================== */
/* Breadcrumb strip above QA shell */
.qa-page-breadcrumb{background:#fff;border-bottom:1px solid var(--line);padding:.85rem 0}
.qa-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .55rem;font-size:.9rem;color:var(--muted)}
.qa-crumbs li + li::before{content:"\203A";margin-right:.55rem;color:var(--muted)}
.qa-crumbs a{color:var(--ink-2)}
.qa-crumbs a:hover{color:var(--brand);text-decoration:none}
.qa-crumbs li[aria-current="page"]{color:var(--ink);font-weight:600}
/* QA shell - 3 column grid (no padding/gaps so panels touch) */
.qa-shell{padding:1rem 0 4rem;background:#fff}
.qa-shell-grid{
display:grid;grid-template-columns:260px 1fr 300px;
gap:0;align-items:start;
}
@media(max-width:1100px){
.qa-shell-grid{grid-template-columns:1fr;gap:1rem}
}
/* Reusable card (kept for backwards compat) */
.qa-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem}
/* ===== LEFT RAIL: dark "Ask" button + bullet category list ===== */
.qa-rail{background:transparent;border:0;min-height:0;padding:0}
.qa-rail-card{
padding:0;border:1px solid var(--line);border-radius:0;background:#fff;
overflow:hidden;
}
.qa-rail .qa-ask-btn,
.qa-ask-btn{
width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;
background:#1a1a1a;color:#fff;border:0;border-radius:0;padding:1.5rem 1rem;
font-size:1rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
cursor:pointer;transition:.15s background;
}
.qa-rail .qa-ask-btn:hover,.qa-ask-btn:hover{background:#000}
.qa-rail-toggle{display:none;width:100%;background:var(--bg-alt);border:0;border-bottom:1px solid var(--line);color:var(--ink);padding:.85rem 1rem;font-weight:600;cursor:pointer;text-align:left}
@media(max-width:1100px){.qa-rail-toggle{display:block}.qa-cat-list{display:none}.qa-cat-list.qa-cat-list-open{display:block}}
.qa-cat-head{display:none} /* "Topics" heading not used in this design */
.qa-cat-list{list-style:none;margin:0;padding:1rem 0 0;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.qa-cat-item{
display:flex;align-items:center;gap:.7rem;padding:.95rem 1.5rem;
color:var(--ink-2);border-radius:0;border-left:3px solid transparent;
font-size:.95rem;font-weight:500;transition:.15s background,.15s color,.15s border-color;
}
.qa-cat-item:hover{background:var(--bg-alt);color:var(--ink);text-decoration:none}
.qa-cat-item.active{background:var(--bg-alt);color:var(--ink);font-weight:600;border-left-color:var(--brand)}
/* Bullet point marker for each category */
.qa-cat-dot{width:6px;height:6px;border-radius:50%;background:#94a3b8;flex-shrink:0}
.qa-cat-item.active .qa-cat-dot{background:var(--brand)}
/* ===== CENTER COLUMN: question list ===== */
.qa-main-col,.qa-content,section.col-12.col-lg-7,section.col-12.col-lg-7.qa-center-card-cmnt{
min-width:0;background:#fff;padding:0 10px;
border:0;border-radius:16px;
box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.qa-center-card{background:transparent;border:0;border-radius:0;padding:0;margin:0;box-shadow:none}
/* Title row with eyebrow + Total chip on the right */
.qa-center-card-frst{
display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
align-items:flex-start;justify-content:space-between;
margin-bottom:1.5rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line);
}
.qa-center-card-frst > div:first-child{min-width:0;flex:1 1 280px}
.qa-center-card-frst > .text-muted{
flex-shrink:0;align-self:center;white-space:nowrap;
background:#dcfce7;color:var(--brand) !important;
padding:.55rem 1rem;border-radius:999px;
font-size:.85rem !important;font-weight:600;
}
.qa-center-card-frst > .text-muted b{font-weight:800;color:var(--brand);font-size:.95rem;margin-left:.15rem}
.qa-title{font-size:1.55rem;font-weight:800;color:var(--ink);margin:0 0 .35rem;letter-spacing:-.015em;line-height:1.2}
.qa-center-card .text-muted{color:var(--muted) !important;font-size:.94rem;line-height:1.5}
/* Search/filter toolbar - one beautiful inline row */
.qa-subcontrols{
display:flex;flex-wrap:wrap;gap:.6rem;align-items:stretch;
margin:0 0 1.5rem;padding:0;border-bottom:0;
background:var(--bg-alt);border:1px solid var(--line);border-radius:12px;
padding:.55rem;
}
.qa-subcontrols .form-select,
.qa-subcontrols .form-control{
border:1px solid transparent;border-radius:8px;padding:.65rem .9rem;
font-size:.92rem;color:var(--ink);background:#fff;box-shadow:none;min-width:0;
transition:.18s border-color,.18s box-shadow;
}
.qa-subcontrols .form-select:focus,
.qa-subcontrols .form-control:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(24,105,0,.12);outline:0}
/* Filter pill */
.qa-subcontrols #filterCategory{
max-width:none !important;width:auto;flex:0 0 auto;min-width:170px;
font-weight:600;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,
");
background-position:right .85rem center;background-repeat:no-repeat;background-size:14px;
padding-right:2.2rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;
}
/* Force search form to grow + drop the inline min-width */
.qa-subcontrols #searchForm{
display:flex;gap:.4rem;align-items:stretch;
flex:1 1 240px;min-width:0 !important;margin-left:auto;
}
.qa-subcontrols #searchForm .form-control{
flex:1 1 auto;min-width:0;margin-right:0 !important;
padding-left:2.4rem;
background-image:url("data:image/svg+xml;utf8,
");
background-position:.85rem center;background-repeat:no-repeat;background-size:16px;
}
.qa-subcontrols .btn-light{
background:linear-gradient(135deg,var(--brand) 0%,#22a83d 100%);color:#fff;border:0;
padding:.65rem 1.4rem;border-radius:8px;
font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;
flex-shrink:0;cursor:pointer;
box-shadow:0 6px 14px -6px rgba(24,105,0,.4);
transition:.18s transform,.18s box-shadow;
}
.qa-subcontrols .btn-light:hover{transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(24,105,0,.5);background:linear-gradient(135deg,#0f4500 0%,#186900 100%);color:#fff;filter:none}
@media(max-width:560px){
.qa-subcontrols{flex-direction:column}
.qa-subcontrols #filterCategory,.qa-subcontrols #searchForm{flex:1 1 100%;width:100%}
.qa-subcontrols #searchForm{margin-left:0}
}
/* Question list - card-style rows with hover + category badge top-right */
.qa-q-list{display:flex;flex-direction:column;gap:.7rem;margin-top:0}
.qa-q-item{
display:flex;flex-direction:column;gap:.55rem;padding:1.2rem 1.3rem;
background:#fff;border:1px solid var(--line);border-radius:12px;
transition:.2s transform,.2s box-shadow,.2s border-color;
position:relative;
}
.qa-q-item:hover{
transform:translateY(-2px);
border-color:var(--brand);
box-shadow:0 14px 28px -16px rgba(15,23,42,.16);
}
.qa-q-item:last-child{border-bottom:1px solid var(--line)}
.qa-q-main{display:flex;flex-direction:column;gap:.4rem}
.qa-q-title{
display:block;font-size:1.05rem;font-weight:700;color:var(--ink);line-height:1.4;
flex:1 1 auto;min-width:0;
}
.qa-q-title:hover{color:var(--brand);text-decoration:none}
/* Make the title-row flex container behave properly */
.qa-q-main > .d-flex{gap:.75rem !important;align-items:flex-start !important}
.qa-q-excerpt{
color:var(--muted);font-size:.92rem;line-height:1.55;margin:0;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.qa-q-meta{
display:flex;flex-wrap:wrap;gap:.6rem;color:var(--muted);font-size:.82rem;
align-items:center;margin-top:.5rem;padding-top:.7rem;border-top:1px solid var(--line);
}
.qa-q-meta .qa-tags{display:inline-flex;flex-wrap:wrap;gap:.35rem}
.qa-q-meta::before{
content:"";display:inline-block;width:28px;height:28px;border-radius:50%;
background:
url("data:image/svg+xml;utf8,
") center/65% no-repeat,
linear-gradient(135deg,#dcfce7,#bbf7d0);
margin-right:.3rem;flex-shrink:0;
}
@media(max-width:560px){
.qa-q-main > .d-flex{flex-direction:column}
}
/* Tag + category badge */
.qa-tag{
display:inline-flex;align-items:center;background:#eef9ec;color:var(--brand);
padding:.18rem .6rem;border-radius:999px;font-size:.76rem;font-weight:600;letter-spacing:.02em;
}
.qa-badge-cat{
display:none;align-items:center;
background:linear-gradient(135deg,var(--brand) 0%,#22a83d 100%);color:#fff;
padding:.32rem .8rem;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;
box-shadow:0 4px 10px -4px rgba(24,105,0,.35);
white-space:nowrap;
}
/* Voting */
.qa-vote{display:inline-flex;flex-direction:column;align-items:center;gap:.15rem;padding:.35rem .6rem;border-radius:12px;background:var(--bg-alt);border:1px solid var(--line);min-width:56px}
.qa-vote button{background:transparent;border:0;padding:.15rem .35rem;font-size:1.05rem;line-height:1;color:#94a3b8;cursor:pointer;border-radius:6px;transition:.15s color,.15s background}
.qa-vote button:hover{color:var(--brand);background:rgba(24,105,0,.08)}
.qa-vote button.active{color:var(--brand)}
.qa-vote-score{font-weight:700;font-size:1rem;color:var(--ink)}
/* Question detail body */
.qa-body-html{color:var(--ink-2);line-height:1.7}
.qa-body-html p{margin:0 0 1em}
.qa-body-html h1,.qa-body-html h2,.qa-body-html h3{margin:1.2em 0 .4em;color:var(--ink)}
.qa-body-html ul,.qa-body-html ol{padding-left:1.5rem;color:var(--ink-2);margin:0 0 1em}
.qa-body-html code{background:var(--bg-alt);padding:.1rem .35rem;border-radius:6px;font-size:.92em;color:#c2410c}
.qa-body-html pre{background:#0b1224;color:#e2e8f0;padding:1rem;border-radius:12px;overflow-x:auto}
.qa-body-html pre code{background:transparent;color:inherit;padding:0}
.qa-body-html blockquote{border-left:3px solid var(--brand);background:var(--bg-alt);padding:.8rem 1rem;border-radius:0 8px 8px 0;color:var(--ink-2);margin:0 0 1em}
.qa-answer{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem}
.qa-answer + .qa-answer{margin-top:1rem}
.qa-related-list{display:flex;flex-direction:column;gap:.6rem;margin-top:.8rem}
.qa-related-item{
display:flex;align-items:center;gap:.85rem;
padding:.95rem 1.1rem;
border:1px solid var(--line);border-radius:12px;background:#fff;
color:var(--ink-2);font-size:.95rem;line-height:1.45;font-weight:500;
text-decoration:none;position:relative;
transition:.22s transform,.22s box-shadow,.22s border-color,.22s background,.22s color;
}
/* Green circular "Q" badge prefix */
.qa-related-item::before{
content:"Q";flex-shrink:0;
width:32px;height:32px;border-radius:50%;
background:linear-gradient(135deg,#dcfce7 0%,#bbf7d0 100%);
color:var(--brand);font-weight:800;font-size:.92rem;
display:grid;place-items:center;
transition:.22s background,.22s color,.22s transform;
}
/* Animated chevron arrow on the right */
.qa-related-item::after{
content:"";flex-shrink:0;margin-left:auto;
width:22px;height:22px;border-radius:50%;
background:var(--bg-alt) center/12px no-repeat
url("data:image/svg+xml;utf8,
");
transition:.22s transform,.22s background-color;
}
.qa-related-item:hover{
background:#fff;border-color:var(--brand);color:var(--brand);
text-decoration:none;transform:translateY(-2px);
box-shadow:0 14px 28px -16px rgba(24,105,0,.22);
}
.qa-related-item:hover::before{
background:linear-gradient(135deg,var(--brand) 0%,#22a83d 100%);color:#fff;
transform:scale(1.05);
}
.qa-related-item:hover::after{
background-color:var(--brand);
background-image:url("data:image/svg+xml;utf8,
");
transform:translateX(3px);
}
/* ===== Question detail page (clean layout: title + breadcrumb + answer) ===== */
.qa-detail-block{margin:0 0 2rem}
.qa-detail-block:last-child{margin-bottom:0}
.qa-detail-title{font-size:1.45rem;line-height:1.35;text-transform:none;letter-spacing:0;font-weight:700;margin-bottom:.6rem}
.qa-answer-title{font-size:1.15rem;margin-bottom:1rem}
.qa-detail-breadcrumb{margin:0 0 .5rem;padding-left:1rem}
.qa-detail-breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.35rem;font-size:.88rem;color:var(--ink-2)}
.qa-detail-breadcrumb li{display:inline-flex;align-items:center}
.qa-detail-breadcrumb li + li::before{content:"/";margin:0 .5rem;color:#cbd5e1}
.qa-detail-breadcrumb a{color:var(--ink-2);text-decoration:none}
.qa-detail-breadcrumb a:hover{color:var(--brand)}
.qa-detail-breadcrumb [aria-current="page"]{color:var(--ink);font-weight:500}
/* ===== RIGHT RAIL: Hot Questions panel (light gray bg, bullet list) ===== */
.qa-aside-col{background:#f7f9fc;padding:1.6rem 1.4rem;min-height:0;border:0 solid var(--line);border-radius:0}
@media(max-width:1100px){.qa-aside-col{margin-top:1rem}}
.qa-right-card{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;position:static}
.qa-widget-title{
position:relative;font-size:1.05rem;font-weight:800;letter-spacing:.04em;
text-transform:uppercase;color:var(--ink);margin:0 0 1.25rem;padding-left:1rem;
}
.qa-widget-title::before{
content:"";position:absolute;left:0;top:.1em;bottom:.1em;width:4px;
background:#fbbf24;border-radius:2px;
}
.qa-hot{display:flex;flex-direction:column;gap:0;list-style:none;padding:0;margin:0}
.qa-hot a{
display:block;padding:.7rem 0 .7rem 1.2rem;border:0;background:transparent;
color:var(--ink-2);font-size:.92rem;font-weight:500;line-height:1.4;
position:relative;transition:.15s color;
}
.qa-hot a::before{
content:"";position:absolute;left:0;top:1.05em;width:5px;height:5px;
border-radius:50%;background:#94a3b8;
}
.qa-hot a:hover{color:var(--brand);text-decoration:none}
.qa-hot a:hover::before{background:var(--brand)}
/* Pagination */
.qa-pagination{display:flex;flex-wrap:wrap;gap:.25rem;margin:1.5rem 0 0;padding:0;list-style:none}
.qa-pagination .page-item{list-style:none}
.qa-pagination .page-link{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 .75rem;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink-2);font-weight:600;font-size:.9rem}
.qa-pagination .page-link:hover{background:var(--bg-alt);border-color:#d8def0;color:var(--ink);text-decoration:none}
.qa-pagination .page-item.active .page-link{background:var(--brand-grad);color:#fff;border-color:transparent}
.qa-pagination .page-item.disabled .page-link{background:#f8fafc;color:#cbd5e1;pointer-events:none}
/* Floating help fab */
.qa-fab{position:fixed;right:1.25rem;bottom:1.25rem;width:52px;height:52px;border-radius:50%;background:var(--brand-grad);color:#fff;border:0;font-size:1.4rem;font-weight:700;cursor:pointer;box-shadow:0 10px 24px rgba(24,105,0,.35);z-index:1050;transition:.15s transform}
.qa-fab:hover{transform:translateY(-2px)}
/* Modal */
.qa-modal{border:0;border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 60px rgba(15,23,42,.18)}
.qa-modal .modal-header{background:var(--bg-alt);border-bottom:1px solid var(--line);padding:1rem 1.25rem}
.qa-modal .modal-title{font-weight:700;color:var(--ink);font-size:1.05rem}
.qa-modal .modal-body{padding:1.5rem}
.qa-modal .modal-footer{background:var(--bg-alt);border-top:1px solid var(--line);padding:1rem 1.25rem}
.qa-modal .form-control,.qa-modal .form-select{border:1px solid var(--line);border-radius:10px;padding:.6rem .85rem}
.qa-modal .form-control:focus,.qa-modal .form-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(24,105,0,.12);outline:0}
.qa-modal .form-label{font-weight:600;color:var(--ink-2);font-size:.92rem}
/* Bootstrap col legacy compat - inside qa-shell-grid stack as cells */
.qa-shell-grid > .col-12,.qa-shell-grid > section.col-12,.qa-shell-grid > aside.col-12{width:100%;padding:0}
.qa-shell-grid .bg-gray-s,.qa-shell-grid .bg-whites{background:transparent !important;border-left:0 !important;padding:0 !important}
/* Toast green */
.toast.text-bg-success{background:linear-gradient(135deg,#186900 0%,#35a514 100%) !important;border:0;border-radius:12px;padding:.25rem}
/* ============================================================
GIFT CARDS PAGE - agenriver-style sections (gx-* namespace)
Hero, values, brands, about, services, portfolio, testimonials,
articles, CTA. Brand-green palette + warm gold accent.
============================================================ */
:root{
--gx-bg:#f7fbf6;
--gx-dark:#0b3a04;
--gx-dark-2:#0f2a05;
--gx-warm:#f5b942;
--gx-warm-2:#ef8a17;
--gx-pink:#ff7b9c;
--gx-blue:#2c8df7;
--gx-purple:#a78bfa;
}
.grad-light{background:linear-gradient(135deg,#a7f3d0 0%,#fef3c7 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gx-eyebrow{
display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
color:var(--brand);background:#eef9ec;padding:.35rem .8rem;border-radius:999px;margin-bottom:1rem;
}
.gx-eyebrow-light{color:#fef3c7;background:rgba(254,243,199,.12)}
.gx-btn{
display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:999px;
font-weight:700;font-size:.95rem;text-decoration:none;transition:.2s transform,.2s box-shadow,.2s background,.2s color;
}
.gx-btn:hover{text-decoration:none;transform:translateY(-2px)}
.gx-btn-primary{background:var(--brand-grad);color:#fff;box-shadow:0 10px 22px -10px rgba(24,105,0,.45)}
.gx-btn-primary:hover{box-shadow:0 16px 30px -12px rgba(24,105,0,.55);color:#fff}
.gx-btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.gx-btn-ghost:hover{background:var(--bg-alt);color:var(--ink)}
.gx-btn-outline-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.gx-btn-outline-light:hover{background:rgba(255,255,255,.1);color:#fff}
.gx-btn-lg{padding:1rem 1.6rem;font-size:1rem}
/* ---------- 1) HERO ---------- */
.gx-hero{
position:relative;overflow:hidden;
background:linear-gradient(135deg,#f0fdf4 0%,#fefce8 50%,#fff7ed 100%);
padding:4.5rem 0 5rem;
}
.gx-hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.gx-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55}
.gx-orb-a{width:480px;height:480px;background:radial-gradient(circle,#86efac,transparent 65%);top:-160px;left:-120px}
.gx-orb-b{width:420px;height:420px;background:radial-gradient(circle,#fcd34d,transparent 65%);top:30%;right:-120px;opacity:.45}
.gx-orb-c{width:380px;height:380px;background:radial-gradient(circle,#fda4af,transparent 65%);bottom:-160px;left:30%;opacity:.35}
.gx-hero-inner{
position:relative;z-index:1;
display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center;
}
.gx-h1{
font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-.02em;
margin:0 0 1.1rem;color:var(--ink);font-weight:800;
}
.gx-h1 em{font-style:normal;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gx-lede{font-size:1.06rem;line-height:1.65;color:var(--ink-2);margin:0 0 1.6rem;max-width:56ch}
.gx-hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:2rem}
.gx-hero-meta{
list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:1.6rem 2.2rem;
border-top:1px solid rgba(15,23,42,.08);padding-top:1.4rem;
}
.gx-hero-meta li{display:flex;flex-direction:column}
.gx-hero-meta strong{font-size:1.4rem;font-weight:800;color:var(--ink);line-height:1}
.gx-hero-meta span{font-size:.82rem;color:var(--muted);margin-top:.25rem}
.gx-hero-visual{position:relative;height:440px}
.gx-card{
position:absolute;width:280px;background:#fff;border-radius:18px;
padding:1.2rem 1.3rem;
box-shadow:0 24px 50px -20px rgba(15,23,42,.25),0 6px 14px -8px rgba(15,23,42,.12);
border:1px solid rgba(15,23,42,.06);
transition:.3s transform;
}
.gx-card-a{top:0;left:0;transform:rotate(-6deg);background:linear-gradient(135deg,#186900,#0b3a04);color:#fff;border:0}
.gx-card-b{top:90px;right:-10px;transform:rotate(4deg);background:linear-gradient(135deg,#f5b942,#ef8a17);color:#0b3a04;border:0}
.gx-card-c{bottom:20px;left:60px;transform:rotate(-2deg);background:linear-gradient(135deg,#fce7f3,#fff);color:var(--ink)}
.gx-hero-visual:hover .gx-card-a{transform:rotate(-8deg) translateY(-4px)}
.gx-hero-visual:hover .gx-card-b{transform:rotate(6deg) translateY(-4px)}
.gx-hero-visual:hover .gx-card-c{transform:rotate(-4deg) translateY(-4px)}
.gx-card-strip{height:6px;border-radius:3px;background:rgba(255,255,255,.5);margin-bottom:1rem}
.gx-card-strip.alt{background:rgba(11,58,4,.3)}
.gx-card-strip.alt2{background:linear-gradient(90deg,#ec4899,#a78bfa);opacity:.7}
.gx-card-brand{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-bottom:.4rem}
.gx-card-amt{font-size:1.8rem;font-weight:800;line-height:1;margin-bottom:1rem}
.gx-card-row{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;font-weight:600;opacity:.85}
@media(max-width:900px){
.gx-hero-inner{grid-template-columns:1fr;gap:2rem}
.gx-hero-visual{height:340px;max-width:380px;margin:0 auto}
.gx-card{width:240px;padding:1rem}
.gx-card-amt{font-size:1.5rem}
}
/* ---------- 2) CORE VALUES ---------- */
.gx-values{background:#fff}
.gx-values-head{text-align:center;max-width:720px;margin:0 auto 3rem}
.gx-values-head h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.15;margin:0;font-weight:800}
.gx-values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.gx-value{
background:#fff;border:1px solid var(--line);border-radius:18px;
padding:2rem 1.6rem;text-align:center;transition:.25s box-shadow,.25s transform,.25s border-color;
}
.gx-value:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(15,23,42,.18);border-color:transparent}
.gx-value-ic{
width:72px;height:72px;border-radius:18px;display:grid;place-items:center;
margin:0 auto 1.1rem;color:#fff;
}
.gx-value-ic-1{background:linear-gradient(135deg,#186900,#22a83d)}
.gx-value-ic-2{background:linear-gradient(135deg,#f5b942,#ef8a17)}
.gx-value-ic-3{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.gx-value h3{font-size:1.15rem;font-weight:700;margin:0 0 .55rem;color:var(--ink)}
.gx-value p{color:var(--muted);font-size:.94rem;line-height:1.6;margin:0}
@media(max-width:780px){.gx-values-grid{grid-template-columns:1fr;gap:1rem}}
/* ---------- 3) BRAND STRIP + video card ---------- */
.gx-brands{background:var(--gx-bg);padding:3rem 0}
.gx-brands-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:2.5rem;align-items:center}
.gx-brands-title{
font-size:.84rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);margin:0 0 1.1rem;
}
.gx-brand-marks{
list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;
}
.gx-brand-marks li{
font-family:'Inter',sans-serif;font-weight:800;font-size:1.05rem;
color:#94a3b8;letter-spacing:-.01em;text-transform:lowercase;
padding:.4rem .8rem;border-radius:8px;background:#fff;border:1px solid var(--line);
transition:.2s color,.2s border-color;
}
.gx-brand-marks li:hover{color:var(--brand);border-color:var(--brand)}
.gx-video-card{
display:flex;align-items:center;gap:1rem;padding:1.3rem 1.5rem;
background:linear-gradient(135deg,#0b3a04,#186900);color:#fff;border-radius:16px;
text-decoration:none;box-shadow:0 16px 30px -16px rgba(11,58,4,.4);
transition:.2s transform,.2s box-shadow;
}
.gx-video-card:hover{transform:translateY(-3px);box-shadow:0 22px 40px -18px rgba(11,58,4,.55);color:#fff;text-decoration:none}
.gx-play{
width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
background:#fff;color:var(--brand);flex-shrink:0;
}
.gx-video-text{display:flex;flex-direction:column;line-height:1.3}
.gx-video-text strong{font-weight:700;font-size:1.02rem}
.gx-video-text em{font-style:normal;font-size:.85rem;color:rgba(255,255,255,.78);margin-top:.15rem}
@media(max-width:840px){.gx-brands-grid{grid-template-columns:1fr;gap:1.5rem}}
/* ---------- 4) ABOUT / EXPERIENCE ---------- */
.gx-about{background:#fff}
.gx-about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:center}
.gx-about-visual{position:relative;border-radius:24px;overflow:visible}
.gx-about-photo{
border-radius:24px;overflow:hidden;
box-shadow:0 30px 60px -28px rgba(11,58,4,.35);
}
.gx-stat-badge{
position:absolute;bottom:-30px;right:-20px;
background:#fff;border-radius:18px;padding:1.2rem 1.4rem;
box-shadow:0 22px 44px -18px rgba(15,23,42,.22);
display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;
border:1px solid var(--line);min-width:200px;
}
.gx-stat-badge strong{font-size:2.4rem;font-weight:800;color:var(--brand);line-height:1}
.gx-stat-badge span{font-size:.88rem;color:var(--muted);line-height:1.4}
.gx-about-copy h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.15;margin:0 0 1rem;font-weight:800}
.gx-about-copy p{color:var(--ink-2);font-size:1rem;line-height:1.7;margin:0 0 1.4rem}
.gx-check-list{list-style:none;padding:0;margin:0 0 1.8rem}
.gx-check-list li{display:flex;align-items:flex-start;gap:.6rem;padding:.45rem 0;color:var(--ink-2);font-size:.95rem}
.gx-check-list li span{
width:22px;height:22px;border-radius:50%;background:#eef9ec;color:var(--brand);
display:grid;place-items:center;font-weight:800;font-size:.85rem;flex-shrink:0;margin-top:.15rem;
}
@media(max-width:880px){.gx-about-grid{grid-template-columns:1fr;gap:2.5rem}.gx-stat-badge{right:auto;left:50%;transform:translateX(-50%);bottom:-26px}}
/* ---------- 5) SERVICES ---------- */
.gx-services{background:var(--gx-bg)}
.gx-services-head{
display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:end;margin-bottom:2.5rem;
}
.gx-services-head h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.15;margin:.4rem 0 0;font-weight:800}
.gx-services-head > p{color:var(--muted);font-size:.98rem;line-height:1.65;margin:0}
.gx-services-head .gx-btn{justify-self:end;align-self:center}
@media(max-width:780px){.gx-services-head{grid-template-columns:1fr;gap:.8rem;align-items:start}}
.gx-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.gx-svc{
background:#fff;border-radius:18px;padding:0 0 1.6rem;text-decoration:none;color:inherit;
border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;
transition:.25s transform,.25s box-shadow,.25s border-color;
}
.gx-svc:hover{transform:translateY(-5px);box-shadow:0 26px 50px -24px rgba(15,23,42,.22);border-color:transparent;text-decoration:none;color:inherit}
.gx-svc-thumb{
height:160px;display:grid;place-items:center;color:#fff;position:relative;overflow:hidden;
}
.gx-svc-thumb::after{
content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.18),transparent 60%);
}
.gx-svc-thumb-1{background:linear-gradient(135deg,#186900,#22a83d)}
.gx-svc-thumb-2{background:linear-gradient(135deg,#f5b942,#ef8a17)}
.gx-svc-thumb-3{background:linear-gradient(135deg,#ec4899,#be185d)}
.gx-svc-thumb-4{background:linear-gradient(135deg,#2c8df7,#1d4ed8)}
.gx-svc-thumb-5{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.gx-svc-thumb-6{background:linear-gradient(135deg,#0ea5a3,#047857)}
.gx-svc h3{font-size:1.1rem;font-weight:700;margin:1.2rem 1.4rem .4rem;color:var(--ink)}
.gx-svc p{color:var(--muted);font-size:.92rem;line-height:1.55;margin:0 1.4rem 1rem}
.gx-svc-go{margin:auto 1.4rem 0;font-weight:700;color:var(--brand);font-size:.9rem}
@media(max-width:980px){.gx-svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gx-svc-grid{grid-template-columns:1fr}}
/* ---------- 6) PORTFOLIO ---------- */
.gx-portfolio{background:#fff}
.gx-portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.gx-pf{
position:relative;border-radius:20px;overflow:hidden;min-height:280px;
display:flex;align-items:flex-end;color:#fff;text-decoration:none;
transition:.3s transform;
}
.gx-pf::before{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.7) 100%);
z-index:1;
}
.gx-pf:hover{transform:translateY(-5px)}
.gx-pf-1{background:linear-gradient(135deg,#0b3a04 0%,#186900 100%)}
.gx-pf-2{background:linear-gradient(135deg,#7c2d12 0%,#ef8a17 100%)}
.gx-pf-3{background:linear-gradient(135deg,#581c87 0%,#a78bfa 100%)}
.gx-pf-4{background:linear-gradient(135deg,#155e75 0%,#0ea5a3 100%)}
.gx-pf-overlay{position:relative;z-index:2;padding:1.8rem 1.8rem 1.8rem;width:100%}
.gx-pf-tag{
display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
background:rgba(255,255,255,.18);padding:.3rem .7rem;border-radius:999px;margin-bottom:.8rem;
}
.gx-pf h3{color:#fff;font-size:1.4rem;font-weight:700;margin:0 0 .4rem;line-height:1.2}
.gx-pf p{color:rgba(255,255,255,.86);font-size:.93rem;line-height:1.55;margin:0}
@media(max-width:780px){.gx-portfolio-grid{grid-template-columns:1fr}}
/* ---------- 7) TESTIMONIALS (dark) ---------- */
.gx-testi{
background:linear-gradient(135deg,#0b3a04 0%,#0f2a05 60%,#1a1a1a 100%);
color:#fff;padding:5rem 0;position:relative;overflow:hidden;
}
.gx-testi::before{
content:"";position:absolute;top:-100px;right:-100px;width:400px;height:400px;
background:radial-gradient(circle,rgba(245,185,66,.18),transparent 65%);filter:blur(60px);
}
.gx-testi-head{text-align:center;max-width:720px;margin:0 auto 3rem;position:relative;z-index:1}
.gx-testi-head h2{color:#fff;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.15;margin:0;font-weight:800}
.gx-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;position:relative;z-index:1}
.gx-testi-card{
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
border-radius:18px;padding:2rem 1.6rem;backdrop-filter:blur(8px);margin:0;
display:flex;flex-direction:column;gap:1rem;transition:.25s transform,.25s background;
}
.gx-testi-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.09)}
.gx-quote{font-size:3.5rem;line-height:.6;color:var(--gx-warm);font-family:Georgia,serif}
.gx-testi-card blockquote{margin:0;font-size:.97rem;line-height:1.65;color:rgba(255,255,255,.92)}
.gx-testi-card figcaption{display:flex;align-items:center;gap:.8rem;margin-top:auto;padding-top:.5rem}
.gx-testi-card figcaption strong{display:block;color:#fff;font-weight:700;font-size:.95rem}
.gx-testi-card figcaption em{font-style:normal;color:rgba(255,255,255,.6);font-size:.83rem}
.gx-av{
width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#22a83d,#186900);
color:#fff;display:grid;place-items:center;font-weight:800;font-size:.95rem;flex-shrink:0;
}
.gx-av.sm{width:28px;height:28px;font-size:.7rem}
@media(max-width:980px){.gx-testi-grid{grid-template-columns:1fr;gap:1rem}}
/* ---------- 8) ARTICLES ---------- */
.gx-articles{background:var(--gx-bg)}
.gx-articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.gx-article{
background:#fff;border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;
border:1px solid var(--line);display:flex;flex-direction:column;
transition:.25s transform,.25s box-shadow,.25s border-color;
}
.gx-article:hover{transform:translateY(-4px);box-shadow:0 24px 48px -22px rgba(15,23,42,.18);border-color:transparent;text-decoration:none;color:inherit}
.gx-article-thumb{
height:180px;position:relative;display:flex;align-items:flex-start;padding:1rem;
}
.gx-article-thumb-1{background:linear-gradient(135deg,#186900,#22a83d)}
.gx-article-thumb-2{background:linear-gradient(135deg,#ef8a17,#f5b942)}
.gx-article-thumb-3{background:linear-gradient(135deg,#7c3aed,#a78bfa)}
.gx-article-date{
background:#fff;color:var(--ink);font-weight:800;font-size:.78rem;
padding:.4rem .7rem;border-radius:8px;letter-spacing:.06em;text-transform:uppercase;
}
.gx-article-body{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;flex:1}
.gx-article-cat{
font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--brand);margin-bottom:.7rem;
}
.gx-article-body h3{font-size:1.05rem;font-weight:700;margin:0 0 1rem;color:var(--ink);line-height:1.35}
.gx-article-meta{
display:flex;align-items:center;gap:.55rem;color:var(--muted);font-size:.83rem;margin-top:auto;
}
@media(max-width:980px){.gx-articles-grid{grid-template-columns:1fr;gap:1rem}}
/* ---------- 7) THREE GIFTING MOTIONS (split + dashboard) ---------- */
.gx-motions{background:#fff}
.gx-motions-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center}
.gx-motions-copy h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.15;margin:.4rem 0 1rem;font-weight:800}
.gx-motions-copy .gx-lede{font-size:1rem;line-height:1.65;color:var(--ink-2);margin:0 0 1.6rem;max-width:54ch}
.gx-motion-list{list-style:none;padding:0;margin:0 0 1.8rem;display:grid;gap:1rem}
.gx-motion-list li{display:flex;align-items:flex-start;gap:.85rem}
.gx-motion-list li > div{display:flex;flex-direction:column;gap:.2rem;line-height:1.45}
.gx-motion-list li strong{font-weight:700;color:var(--ink);font-size:1rem}
.gx-motion-list li span{color:var(--muted);font-size:.92rem}
.gx-motion-check{
width:28px;height:28px;border-radius:50%;background:var(--brand-grad);color:#fff;
display:grid;place-items:center;flex-shrink:0;margin-top:.15rem;
box-shadow:0 6px 14px -6px rgba(24,105,0,.45);
}
/* Dashboard mock */
.gx-dashboard{
background:#fff;border:1px solid var(--line);border-radius:20px;
padding:1.4rem;box-shadow:0 28px 60px -28px rgba(15,23,42,.22);
display:flex;flex-direction:column;gap:1.1rem;
}
.gx-dash-top{display:flex;justify-content:space-between;align-items:center;padding:.2rem .4rem .6rem;border-bottom:1px solid var(--line)}
.gx-dash-title{font-weight:700;color:var(--ink);font-size:.95rem}
.gx-dash-dots{display:flex;gap:.35rem}
.gx-dash-dots span{width:8px;height:8px;border-radius:50%;background:#e2e8f0}
.gx-dash-dots span:first-child{background:#fb7185}
.gx-dash-dots span:nth-child(2){background:#f5b942}
.gx-dash-dots span:last-child{background:#22c55e}
.gx-dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.gx-dash-stat{
background:var(--gx-bg);border-radius:12px;padding:.9rem 1rem;
display:flex;flex-direction:column;gap:.2rem;
}
.gx-dash-stat .l{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gx-dash-stat .v{font-size:1.5rem;font-weight:800;color:var(--ink);line-height:1}
.gx-dash-stat .d{font-size:.78rem;color:var(--muted);font-weight:600}
.gx-dash-stat .d.up{color:var(--brand)}
.gx-dash-rows{display:flex;flex-direction:column;gap:.55rem}
.gx-dash-row{
display:flex;justify-content:space-between;align-items:center;
padding:.7rem .9rem;background:#fff;border:1px solid var(--line);border-radius:10px;
}
.gx-dash-row .who{display:flex;align-items:center;gap:.65rem;font-size:.88rem;color:var(--ink-2);font-weight:500}
.gx-dash-row .av{
width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
font-size:.72rem;font-weight:800;color:#fff;flex-shrink:0;
}
.gx-dash-row .av-green{background:linear-gradient(135deg,#186900,#22a83d)}
.gx-dash-row .av-teal{background:linear-gradient(135deg,#14b8a6,#186900)}
.gx-dash-row .av-warm{background:linear-gradient(135deg,#f5b942,#ef4444)}
.gx-dash-badge{
font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
padding:.3rem .65rem;border-radius:999px;
}
.gx-dash-badge.ok{background:#dcfce7;color:#15803d}
.gx-dash-badge.warn{background:#fef3c7;color:#b45309}
@media(max-width:880px){.gx-motions-grid{grid-template-columns:1fr;gap:2rem}}
/* ---------- 8) FAQ ---------- */
.gx-faq{background:var(--gx-bg)}
.gx-faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:.8rem}
.gx-faq-item{
background:#fff;border:1px solid var(--line);border-radius:14px;
padding:0;overflow:hidden;transition:.2s box-shadow,.2s border-color;
}
.gx-faq-item[open]{border-color:var(--brand);box-shadow:0 12px 24px -12px rgba(15,23,42,.12)}
.gx-faq-item summary{
display:flex;justify-content:space-between;align-items:center;gap:1rem;
padding:1.1rem 1.4rem;font-weight:700;color:var(--ink);font-size:1rem;cursor:pointer;
list-style:none;
}
.gx-faq-item summary::-webkit-details-marker{display:none}
.gx-faq-ic{
width:32px;height:32px;border-radius:50%;background:#eef9ec;color:var(--brand);
display:grid;place-items:center;flex-shrink:0;transition:.25s transform,.25s background,.25s color;
}
.gx-faq-item[open] .gx-faq-ic{background:var(--brand);color:#fff;transform:rotate(180deg)}
.gx-faq-item p{margin:0;padding:0 1.4rem 1.2rem;color:var(--muted);font-size:.95rem;line-height:1.65}
/* ---------- 9) REGISTER (form section) ---------- */
.gx-register{
background:linear-gradient(135deg,#0b3a04 0%,#186900 60%,#0f2a05 100%);
padding:5rem 0;position:relative;overflow:hidden;
}
.gx-register::before{
content:"";position:absolute;top:-100px;right:-100px;width:420px;height:420px;
background:radial-gradient(circle,rgba(245,185,66,.22),transparent 65%);filter:blur(70px);
}
.gx-register::after{
content:"";position:absolute;bottom:-120px;left:-100px;width:380px;height:380px;
background:radial-gradient(circle,rgba(34,168,61,.25),transparent 65%);filter:blur(80px);
}
.gx-register-card{
position:relative;z-index:1;
display:grid;grid-template-columns:.95fr 1.1fr;gap:2.5rem;align-items:start;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
border-radius:24px;padding:2.5rem;backdrop-filter:blur(8px);
}
.gx-register-info h2{color:#fff;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.15;margin:.4rem 0 1rem;font-weight:800}
.gx-register-info p{color:rgba(255,255,255,.82);font-size:1rem;line-height:1.65;margin:0 0 1.4rem}
.gx-register-points{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.gx-register-points li{display:flex;align-items:center;gap:.7rem;color:rgba(255,255,255,.92);font-size:.95rem;font-weight:500}
.gx-rp-ic{
width:22px;height:22px;border-radius:50%;background:rgba(245,185,66,.18);color:#fef3c7;
display:grid;place-items:center;flex-shrink:0;
}
.gx-register-form{
background:#fff;border-radius:18px;padding:1.8rem;
box-shadow:0 28px 60px -22px rgba(0,0,0,.35);
}
.gx-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1rem;margin-bottom:1.2rem}
.gx-form-field{display:flex;flex-direction:column;gap:.4rem}
.gx-form-field.gx-full{grid-column:1 / -1}
.gx-form-field label{font-size:.84rem;font-weight:700;color:var(--ink-2);letter-spacing:.02em}
.gx-form-field input,
.gx-form-field select,
.gx-form-field textarea{
border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;
font:inherit;font-size:.94rem;color:var(--ink);background:#fff;
transition:.18s border-color,.18s box-shadow;
}
.gx-form-field input:focus,
.gx-form-field select:focus,
.gx-form-field textarea:focus{
outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(24,105,0,.12);
}
.gx-form-field textarea{resize:vertical;min-height:80px;font-family:inherit}
.gx-btn-block{width:100%;justify-content:center}
@media(max-width:880px){
.gx-register-card{grid-template-columns:1fr;padding:1.8rem;gap:2rem}
.gx-form-grid{grid-template-columns:1fr}
}
/* ============================================================
LOYALTY PAGE - Selo-inspired light/clean design (lo-* namespace)
Centered hero, alternating splits, illustration-led, soft cards.
============================================================ */
:root{
--lo-bg:#f8faf6;
--lo-ink:#0f172a;
--lo-ink-2:#334155;
--lo-muted:#64748b;
--lo-line:#e2e8f0;
}
.lo-section{padding:5rem 0}
@media(max-width:780px){.lo-section{padding:3.5rem 0}}
.lo-eyebrow{
display:inline-flex;align-items:center;gap:.5rem;
font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--brand);margin-bottom:1rem;
}
.lo-eyebrow::before{
content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);
}
.lo-h1,.lo-h2{color:var(--lo-ink);font-weight:800;letter-spacing:-.02em;margin:0}
.lo-h1{font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.05}
.lo-h2{font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.12}
.lo-h1-accent,.lo-h2-accent{
background:linear-gradient(135deg,#186900 0%,#22a83d 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.lo-btn{
display:inline-flex;align-items:center;gap:.5rem;
padding:.9rem 1.6rem;border-radius:999px;
font-weight:700;font-size:.94rem;text-decoration:none;
transition:.2s transform,.2s box-shadow,.2s background,.2s color;
}
.lo-btn:hover{text-decoration:none;transform:translateY(-2px)}
.lo-btn-primary{background:#186900;color:#fff;box-shadow:0 12px 24px -10px rgba(24,105,0,.45)}
.lo-btn-primary:hover{background:#0f4a00;color:#fff;box-shadow:0 18px 30px -12px rgba(24,105,0,.55)}
.lo-btn-ghost{background:#fff;color:var(--lo-ink);border:1.5px solid var(--lo-line)}
.lo-btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.lo-btn-text{background:transparent;color:var(--brand);padding:.9rem .4rem}
.lo-btn-text:hover{transform:translateX(3px);color:#0f4a00}
.lo-btn-block{width:100%;justify-content:center}
.lo-btn-lg{padding:1.05rem 1.9rem;font-size:1rem}
/* ---------- 1) HERO ---------- */
.lo-hero{
background:linear-gradient(180deg,#f8faf6 0%,#fff 100%);
padding:4.5rem 0 3rem;text-align:center;position:relative;overflow:hidden;
}
.lo-hero::before{
content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);
width:680px;height:680px;border-radius:50%;
background:radial-gradient(circle,rgba(34,168,61,.10),transparent 65%);
filter:blur(40px);
}
.lo-hero-inner{position:relative;z-index:1}
.lo-hero .lo-eyebrow{justify-content:center}
.lo-hero .lo-h1{max-width:920px;margin:0 auto 1.2rem}
.lo-lede{
max-width:720px;margin:0 auto 1.8rem;
font-size:1.06rem;line-height:1.65;color:var(--lo-muted);
}
.lo-hero-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-bottom:3rem}
.lo-hero-art{max-width:760px;margin:0 auto}
/* ---------- 2) TRUST STRIP ---------- */
.lo-trust{padding:3rem 0;background:#fff;border-top:1px solid var(--lo-line);border-bottom:1px solid var(--lo-line)}
.lo-trust-title{
text-align:center;margin:0 0 1.4rem;
font-size:.84rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lo-muted);
}
.lo-trust-marks{
list-style:none;padding:0;margin:0;
display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.4rem;
}
.lo-trust-marks li{
font-family:'Inter',sans-serif;font-weight:800;font-size:1.2rem;
color:#94a3b8;letter-spacing:-.01em;text-transform:lowercase;
transition:.2s color,.2s transform;
}
.lo-trust-marks li:hover{color:var(--brand);transform:translateY(-2px)}
/* ---------- 3) MISSION / 7) EARN-REDEEM (split) ---------- */
.lo-mission{background:#fff}
.lo-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.lo-split-reverse .lo-split-art{order:1}
.lo-split-reverse .lo-split-copy{order:2}
.lo-split-copy p{color:var(--lo-ink-2);font-size:1.02rem;line-height:1.7;margin:.8rem 0 1.4rem;max-width:54ch}
.lo-bullets{list-style:none;padding:0;margin:0 0 1.8rem;display:grid;gap:.8rem}
.lo-bullets li{display:flex;align-items:center;gap:.7rem;color:var(--lo-ink-2);font-weight:600;font-size:.96rem}
.lo-bullet-ic{
width:24px;height:24px;border-radius:50%;background:#dcfce7;color:var(--brand);
display:grid;place-items:center;flex-shrink:0;
}
.lo-feat-list{list-style:none;padding:0;margin:0 0 1.8rem;display:grid;gap:1rem}
.lo-feat-list li{display:flex;align-items:flex-start;gap:.85rem}
.lo-feat-list li > div{display:flex;flex-direction:column;gap:.18rem;line-height:1.45}
.lo-feat-list li strong{font-weight:700;color:var(--lo-ink);font-size:1rem}
.lo-feat-list li > div span{color:var(--lo-muted);font-size:.92rem}
.lo-feat-list .lo-bullet-ic{margin-top:.18rem}
.lo-split-art svg{display:block;width:100%;height:auto}
@media(max-width:880px){
.lo-split{grid-template-columns:1fr;gap:2.5rem}
.lo-split-reverse .lo-split-art{order:0}
.lo-split-reverse .lo-split-copy{order:1}
}
/* ---------- 4) SECONDARY CTA BAND ---------- */
.lo-cta-band{
background:var(--lo-bg);padding:4rem 0;text-align:center;
border-top:1px solid var(--lo-line);border-bottom:1px solid var(--lo-line);
}
.lo-cta-band .lo-h2{max-width:760px;margin:0 auto 1rem}
.lo-cta-band p{max-width:620px;margin:0 auto 1.6rem;color:var(--lo-muted);font-size:1rem;line-height:1.65}
/* ---------- Section heads ---------- */
.lo-head{text-align:center;max-width:720px;margin:0 auto 3rem}
.lo-head .lo-eyebrow{justify-content:center}
.lo-head p{margin:1rem 0 0;color:var(--lo-muted);font-size:1rem;line-height:1.65}
/* ---------- 5) SERVICES 4-COL (auto wraps) ---------- */
.lo-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.lo-svc{
background:#fff;border:1px solid var(--lo-line);border-radius:18px;
padding:1.8rem 1.6rem;text-align:left;
transition:.25s transform,.25s box-shadow,.25s border-color;
}
.lo-svc:hover{transform:translateY(-5px);box-shadow:0 24px 48px -22px rgba(15,23,42,.18);border-color:transparent}
.lo-svc-ic{
width:64px;height:64px;border-radius:16px;display:grid;place-items:center;
margin-bottom:1.2rem;color:#fff;
}
.lo-svc-ic-1{background:linear-gradient(135deg,#186900,#22a83d)}
.lo-svc-ic-2{background:linear-gradient(135deg,#f5b942,#ef8a17)}
.lo-svc-ic-3{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.lo-svc-ic-4{background:linear-gradient(135deg,#ec4899,#be185d)}
.lo-svc-ic-5{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.lo-svc-ic-6{background:linear-gradient(135deg,#0ea5a3,#047857)}
.lo-svc h3{margin:0 0 .55rem;font-size:1.15rem;font-weight:700;color:var(--lo-ink)}
.lo-svc p{margin:0;color:var(--lo-muted);font-size:.94rem;line-height:1.6}
@media(max-width:980px){.lo-svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.lo-svc-grid{grid-template-columns:1fr}}
/* ---------- 6) STATS ---------- */
.lo-stats-section{background:var(--lo-bg)}
.lo-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:1.5rem}
.lo-stat{
background:#fff;border:1px solid var(--lo-line);border-radius:14px;
padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:.2rem;
}
.lo-stat strong{font-size:2rem;font-weight:800;color:var(--brand);line-height:1}
.lo-stat span{font-size:.88rem;color:var(--lo-muted);font-weight:600}
/* ---------- Dashboard mock (re-styled within lo-* namespace) ---------- */
.lo-dashboard{
background:#fff;border:1px solid var(--lo-line);border-radius:20px;
padding:1.4rem;box-shadow:0 28px 60px -28px rgba(15,23,42,.22);
display:flex;flex-direction:column;gap:1.1rem;
}
.lo-dash-top{display:flex;justify-content:space-between;align-items:center;padding:.2rem .4rem .6rem;border-bottom:1px solid var(--lo-line)}
.lo-dash-title{font-weight:700;color:var(--lo-ink);font-size:.95rem}
.lo-dash-dots{display:flex;gap:.35rem}
.lo-dash-dots span{width:8px;height:8px;border-radius:50%;background:#e2e8f0}
.lo-dash-dots span:first-child{background:#fb7185}
.lo-dash-dots span:nth-child(2){background:#f5b942}
.lo-dash-dots span:last-child{background:#22c55e}
.lo-dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.lo-dash-stat{background:var(--lo-bg);border-radius:12px;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.2rem}
.lo-dash-stat .l{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lo-muted)}
.lo-dash-stat .v{font-size:1.4rem;font-weight:800;color:var(--lo-ink);line-height:1}
.lo-dash-stat .d{font-size:.78rem;color:var(--lo-muted);font-weight:600}
.lo-dash-stat .d.up{color:var(--brand)}
.lo-dash-rows{display:flex;flex-direction:column;gap:.55rem}
.lo-dash-row{
display:flex;justify-content:space-between;align-items:center;
padding:.7rem .9rem;background:#fff;border:1px solid var(--lo-line);border-radius:10px;
}
.lo-dash-row .who{display:flex;align-items:center;gap:.65rem;font-size:.88rem;color:var(--lo-ink-2);font-weight:500}
.lo-dash-row .av{
width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
font-size:.72rem;font-weight:800;color:#fff;flex-shrink:0;
}
.lo-dash-row .av-green{background:linear-gradient(135deg,#186900,#22a83d)}
.lo-dash-row .av-teal{background:linear-gradient(135deg,#14b8a6,#186900)}
.lo-dash-row .av-warm{background:linear-gradient(135deg,#f5b942,#ef4444)}
.lo-dash-badge{
font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
padding:.3rem .65rem;border-radius:999px;
}
.lo-dash-badge.ok{background:#dcfce7;color:#15803d}
.lo-dash-badge.warn{background:#fef3c7;color:#b45309}
/* ---------- 8) PRICING ---------- */
.lo-pricing-section{background:#fff}
.lo-pricing-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:center}
.lo-pricing-copy p{color:var(--lo-muted);font-size:1rem;line-height:1.65;margin:.8rem 0 1.4rem;max-width:42ch}
.lo-pricing-art{margin-top:1rem;max-width:380px}
.lo-plans{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.lo-plan{
position:relative;background:#fff;border:1px solid var(--lo-line);border-radius:20px;
padding:2rem 1.8rem;transition:.25s transform,.25s box-shadow;
}
.lo-plan:hover{transform:translateY(-4px);box-shadow:0 28px 50px -22px rgba(15,23,42,.18)}
.lo-plan-featured{
border-color:transparent;
background:linear-gradient(180deg,#fff 0%,#f0fdf4 100%);
box-shadow:0 24px 48px -20px rgba(24,105,0,.25);
}
.lo-plan-badge{
position:absolute;top:-12px;right:1.5rem;
background:var(--brand-grad);color:#fff;font-size:.72rem;font-weight:800;
letter-spacing:.08em;text-transform:uppercase;padding:.3rem .8rem;border-radius:999px;
}
.lo-plan-tag{
display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--brand);background:#dcfce7;padding:.35rem .75rem;border-radius:999px;
}
.lo-plan-price{display:flex;align-items:baseline;gap:.4rem;margin:1rem 0 .6rem;color:var(--lo-ink)}
.lo-plan-price strong{font-size:2.4rem;font-weight:800;line-height:1}
.lo-plan-price em{font-style:normal;color:var(--lo-muted);font-weight:600;font-size:.95rem}
.lo-plan p{color:var(--lo-muted);font-size:.95rem;line-height:1.55;margin:0 0 1.2rem}
.lo-plan-list{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;gap:.6rem}
.lo-plan-list li{display:flex;align-items:center;gap:.6rem;color:var(--lo-ink-2);font-size:.92rem}
.lo-tick{
width:20px;height:20px;border-radius:50%;background:#dcfce7;color:var(--brand);
display:grid;place-items:center;flex-shrink:0;
}
@media(max-width:880px){
.lo-pricing-grid{grid-template-columns:1fr;gap:2.5rem}
.lo-plans{grid-template-columns:1fr}
}
/* ---------- 9) TESTIMONIAL ---------- */
.lo-testi-section{background:var(--lo-bg)}
.lo-testi{
max-width:720px;margin:0 auto;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:1.2rem;
}
.lo-testi-av{
width:72px;height:72px;border-radius:50%;
background:linear-gradient(135deg,#186900,#22a83d);color:#fff;
display:grid;place-items:center;font-weight:800;font-size:1.4rem;
box-shadow:0 16px 30px -14px rgba(24,105,0,.5);
}
.lo-testi blockquote{
margin:0;font-size:1.25rem;line-height:1.55;color:var(--lo-ink);font-weight:500;
max-width:640px;
}
.lo-testi cite{font-style:normal;color:var(--lo-muted);font-size:.92rem;font-weight:600}
/* ---------- 10) FAQ ---------- */
.lo-faq-section{background:#fff}
.lo-faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:.8rem}
.lo-faq-item{
background:var(--lo-bg);border:1px solid var(--lo-line);border-radius:14px;
overflow:hidden;transition:.2s box-shadow,.2s border-color;
}
.lo-faq-item[open]{border-color:var(--brand);background:#fff;box-shadow:0 12px 24px -12px rgba(15,23,42,.12)}
.lo-faq-item summary{
display:flex;justify-content:space-between;align-items:center;gap:1rem;
padding:1.1rem 1.4rem;font-weight:700;color:var(--lo-ink);font-size:1rem;cursor:pointer;
list-style:none;
}
.lo-faq-item summary::-webkit-details-marker{display:none}
.lo-faq-ic{
width:32px;height:32px;border-radius:50%;background:#dcfce7;color:var(--brand);
display:grid;place-items:center;flex-shrink:0;
transition:.25s transform,.25s background,.25s color;
}
.lo-faq-item[open] .lo-faq-ic{background:var(--brand);color:#fff;transform:rotate(180deg)}
.lo-faq-item p{margin:0;padding:0 1.4rem 1.2rem;color:var(--lo-muted);font-size:.95rem;line-height:1.65}
/* ---------- 11) FINAL CTA ---------- */
.lo-final-cta{
background:linear-gradient(180deg,var(--lo-bg) 0%,#fff 100%);
text-align:center;padding:5rem 0;
}
.lo-final-cta .lo-h2{max-width:780px;margin:0 auto 1rem}
.lo-final-cta p{max-width:620px;margin:0 auto 1.8rem;color:var(--lo-muted);font-size:1rem;line-height:1.65}
/* Breadcrumbs hidden across all Solutions-menu pages (per request) */
.gx-breadcrumb,
.lo-breadcrumb,
.mb-breadcrumb,
.ag-breadcrumb,
.cb-breadcrumb,
.dm-breadcrumb{display:none !important}
/* ============================================================
MOBILE APPS PAGE - MobiCom-inspired design (mb-* namespace)
Phone mockups, App Store badges, app screens grid, dark CTA.
============================================================ */
:root{
--mb-bg:#f6f8fc;
--mb-ink:#0f172a;
--mb-ink-2:#334155;
--mb-muted:#64748b;
--mb-line:#e2e8f0;
--mb-accent:#186900;
--mb-accent-2:#22a83d;
}
.mb-section{padding:5rem 0}
@media(max-width:780px){.mb-section{padding:3.5rem 0}}
.mb-eyebrow{
display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--mb-accent);background:#dcfce7;padding:.4rem .8rem;border-radius:999px;margin-bottom:1rem;
}
.mb-eyebrow-light{color:#fef3c7;background:rgba(254,243,199,.14)}
.mb-h1,.mb-h2{color:var(--mb-ink);font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.1}
.mb-h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.mb-h2{font-size:clamp(1.7rem,3vw,2.6rem)}
.mb-h2-light{color:#fff}
.mb-h1 em,.mb-h2 em{
font-style:normal;
background:linear-gradient(135deg,var(--mb-accent) 0%,var(--mb-accent-2) 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.mb-h2-light em{
background:linear-gradient(135deg,#a7f3d0 0%,#fef3c7 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.mb-btn{
display:inline-flex;align-items:center;gap:.5rem;
padding:.9rem 1.6rem;border-radius:999px;font-weight:700;font-size:.94rem;
text-decoration:none;transition:.2s transform,.2s box-shadow;
}
.mb-btn:hover{text-decoration:none;transform:translateY(-2px)}
.mb-btn-primary{background:var(--mb-accent);color:#fff;box-shadow:0 12px 24px -10px rgba(24,105,0,.45)}
.mb-btn-primary:hover{color:#fff;background:#0f4a00;box-shadow:0 18px 30px -12px rgba(24,105,0,.55)}
/* ---- App Store / Google Play badges ---- */
.mb-store-badge{
display:inline-flex;align-items:center;gap:.7rem;
padding:.65rem 1.1rem;border-radius:12px;background:#0f172a;color:#fff;
text-decoration:none;transition:.2s transform,.2s background;
}
.mb-store-badge:hover{background:#000;color:#fff;text-decoration:none;transform:translateY(-2px)}
.mb-store-badge svg{width:24px;height:24px;flex-shrink:0}
.mb-store-badge span{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.mb-store-badge em{font-style:normal;font-size:.65rem;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.78);text-transform:uppercase}
.mb-store-badge strong{font-weight:700;font-size:.98rem;letter-spacing:.01em}
/* ---------- 1) HERO ---------- */
.mb-hero{
position:relative;overflow:hidden;
background:linear-gradient(135deg,#f0fdf4 0%,#fff 50%,#eff6ff 100%);
padding:3.5rem 0 4rem;
}
.mb-hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.mb-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.45}
.mb-blob-1{width:520px;height:520px;background:radial-gradient(circle,#86efac,transparent 65%);top:-180px;right:-140px}
.mb-blob-2{width:420px;height:420px;background:radial-gradient(circle,#fcd34d,transparent 65%);bottom:-160px;left:-120px;opacity:.35}
.mb-hero-grid{
position:relative;z-index:1;
display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;
}
.mb-hero-copy .mb-h1{margin-bottom:1.2rem;max-width:18ch}
.mb-lede{font-size:1.05rem;line-height:1.65;color:var(--mb-ink-2);margin:0 0 1.8rem;max-width:54ch}
.mb-hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.8rem}
.mb-hero-meta{display:flex;align-items:center;gap:1.5rem}
.mb-rating{display:flex;align-items:center;gap:.6rem;font-size:.92rem}
.mb-stars{color:#f59e0b;letter-spacing:.05em}
.mb-rating strong{font-size:1.05rem;color:var(--mb-ink);font-weight:800}
.mb-rating em{font-style:normal;color:var(--mb-muted)}
/* Hero phone mockup */
.mb-hero-art{position:relative;height:560px;display:flex;align-items:center;justify-content:center}
.mb-phone{
width:280px;height:560px;border-radius:42px;background:#0f172a;
padding:14px;position:relative;
box-shadow:0 35px 80px -20px rgba(15,23,42,.4),0 8px 20px -8px rgba(15,23,42,.2);
}
.mb-phone-front{transform:rotate(-3deg)}
.mb-phone-tilt{transform:rotate(6deg)}
.mb-phone-notch{
position:absolute;top:14px;left:50%;transform:translateX(-50%);
width:120px;height:24px;background:#0f172a;border-radius:0 0 16px 16px;z-index:2;
}
.mb-phone-screen{
width:100%;height:100%;background:#fff;border-radius:30px;
overflow:hidden;display:flex;flex-direction:column;
}
/* Hero phone app UI */
.mb-app-bar{
display:flex;justify-content:space-between;align-items:center;
padding:1rem 1.2rem .6rem;font-size:.78rem;font-weight:700;color:var(--mb-ink);
}
.mb-app-icons{font-size:.66rem;letter-spacing:.2em;color:var(--mb-ink)}
.mb-app-hello{padding:0 1.2rem .8rem}
.mb-app-greet{display:block;font-size:.78rem;color:var(--mb-muted);font-weight:600}
.mb-app-hello strong{display:block;font-size:1.25rem;font-weight:800;color:var(--mb-ink);margin-top:.2rem}
.mb-app-search{
margin:0 1.2rem;display:flex;align-items:center;gap:.5rem;
padding:.7rem .9rem;background:#f1f5f9;border-radius:14px;color:var(--mb-muted);font-size:.82rem;
}
.mb-app-tabs{display:flex;gap:.4rem;padding:1rem 1.2rem .6rem}
.mb-app-tab{
padding:.4rem .8rem;border-radius:999px;font-size:.78rem;font-weight:700;
background:#f1f5f9;color:var(--mb-muted);
}
.mb-app-tab.active{background:var(--mb-accent);color:#fff}
.mb-app-card{
margin:0 1.2rem .7rem;padding:.9rem 1rem;background:#f8faf6;
border:1px solid var(--mb-line);border-radius:14px;
}
.mb-app-card-alt{background:linear-gradient(135deg,#f0fdf4,#fef3c7)}
.mb-app-card-row{display:flex;align-items:center;gap:.5rem;font-size:.95rem;font-weight:800;color:var(--mb-ink)}
.mb-arrow{color:var(--mb-accent)}
.mb-app-card-meta{font-size:.72rem;color:var(--mb-muted);margin-top:.3rem;font-weight:600}
.mb-app-card-price{font-size:1rem;font-weight:800;color:var(--mb-accent);margin-top:.4rem}
/* Floating bubbles around the hero phone */
.mb-notif{
position:absolute;top:14%;left:-2%;
background:#fff;border:1px solid var(--mb-line);border-radius:14px;
padding:.7rem .9rem;display:flex;align-items:center;gap:.7rem;
box-shadow:0 18px 36px -16px rgba(15,23,42,.25);max-width:180px;
animation:mbFloat 5s ease-in-out infinite;
}
.mb-notif-ic{
width:32px;height:32px;border-radius:10px;background:var(--mb-accent);color:#fff;
display:grid;place-items:center;flex-shrink:0;
}
.mb-notif strong{display:block;font-size:.82rem;font-weight:700;color:var(--mb-ink)}
.mb-notif em{display:block;font-style:normal;font-size:.7rem;color:var(--mb-muted)}
.mb-wallet{
position:absolute;bottom:10%;right:-4%;
background:#fff;border:1px solid var(--mb-line);border-radius:14px;
padding:.85rem 1rem;text-align:left;
box-shadow:0 18px 36px -16px rgba(15,23,42,.25);
animation:mbFloat 5s ease-in-out infinite -2.5s;
}
.mb-wallet strong{display:block;font-size:1.1rem;font-weight:800;color:var(--mb-accent);line-height:1}
.mb-wallet em{display:block;font-style:normal;font-size:.72rem;color:var(--mb-muted);font-weight:600;margin-top:.25rem}
@keyframes mbFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-10px)}
}
@media(max-width:980px){
.mb-hero-grid{grid-template-columns:1fr;gap:2rem}
.mb-hero-art{height:520px}
}
/* ---------- 2) STATS STRIP ---------- */
.mb-stats{background:#fff;border-top:1px solid var(--mb-line);border-bottom:1px solid var(--mb-line);padding:2rem 0}
.mb-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.mb-stat{text-align:center;padding:.5rem 1rem}
.mb-stat strong{display:block;font-size:2rem;font-weight:800;color:var(--mb-accent);line-height:1}
.mb-stat span{display:block;margin-top:.4rem;font-size:.88rem;color:var(--mb-muted);font-weight:600}
@media(max-width:780px){.mb-stats-grid{grid-template-columns:repeat(2,1fr);gap:1.2rem}}
/* ---------- Section heading ---------- */
.mb-head{text-align:center;max-width:720px;margin:0 auto 3rem}
.mb-head p{margin:1rem 0 0;color:var(--mb-muted);font-size:1rem;line-height:1.65}
/* ---------- 3) FEATURES GRID ---------- */
.mb-feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.mb-feat{
background:#fff;border:1px solid var(--mb-line);border-radius:18px;
padding:1.6rem 1.4rem;transition:.25s transform,.25s box-shadow,.25s border-color;
}
.mb-feat:hover{transform:translateY(-5px);box-shadow:0 24px 48px -22px rgba(15,23,42,.18);border-color:transparent}
.mb-feat-ic{
width:54px;height:54px;border-radius:14px;display:grid;place-items:center;color:#fff;margin-bottom:1rem;
}
.mb-ic-1{background:linear-gradient(135deg,#186900,#22a83d)}
.mb-ic-2{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.mb-ic-3{background:linear-gradient(135deg,#f5b942,#ef8a17)}
.mb-ic-4{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.mb-ic-5{background:linear-gradient(135deg,#ec4899,#be185d)}
.mb-ic-6{background:linear-gradient(135deg,#0ea5a3,#047857)}
.mb-ic-7{background:linear-gradient(135deg,#fb7185,#e11d48)}
.mb-ic-8{background:linear-gradient(135deg,#06b6d4,#0e7490)}
.mb-feat h3{margin:0 0 .55rem;font-size:1.05rem;font-weight:700;color:var(--mb-ink)}
.mb-feat p{margin:0;color:var(--mb-muted);font-size:.92rem;line-height:1.6}
@media(max-width:1080px){.mb-feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mb-feat-grid{grid-template-columns:1fr}}
/* ---------- 4) APP SCREENS SHOWCASE ---------- */
.mb-screens-section{background:var(--mb-bg)}
.mb-screens{
display:flex;justify-content:center;align-items:flex-end;gap:1.4rem;flex-wrap:wrap;
padding:1rem 0;
}
.mb-screen-phone{
width:200px;height:400px;border-radius:30px;background:#0f172a;
padding:10px;flex-shrink:0;position:relative;
box-shadow:0 24px 50px -20px rgba(15,23,42,.35);
transition:.3s transform;
}
.mb-screen-phone::before{
content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
width:80px;height:18px;background:#0f172a;border-radius:0 0 12px 12px;z-index:2;
}
.mb-sp-1{transform:translateY(20px) rotate(-3deg)}
.mb-sp-2{transform:translateY(0) rotate(-1deg)}
.mb-sp-feature{transform:translateY(-20px) scale(1.05);box-shadow:0 30px 60px -22px rgba(24,105,0,.3)}
.mb-sp-4{transform:translateY(0) rotate(1deg)}
.mb-sp-5{transform:translateY(20px) rotate(3deg)}
.mb-screen-phone:hover{transform:translateY(-8px) rotate(0)}
.mb-sp-screen{
width:100%;height:100%;border-radius:22px;background:#fff;
overflow:hidden;display:flex;flex-direction:column;padding-top:.4rem;
}
.mb-sp-bar{padding:.7rem 1rem .5rem;font-size:.7rem;font-weight:700;color:var(--mb-ink)}
/* Discover */
.mb-sp-hero{padding:.4rem 1rem .8rem}
.mb-sp-hero strong{display:block;font-size:1.1rem;font-weight:800;color:var(--mb-ink)}
.mb-sp-hero em{display:block;font-style:normal;font-size:.7rem;color:var(--mb-muted);margin-top:.15rem}
.mb-sp-thumb{margin:.5rem 1rem;height:55px;border-radius:10px}
.mb-sp-thumb-1{background:linear-gradient(135deg,#a7f3d0,#22a83d)}
.mb-sp-thumb-2{background:linear-gradient(135deg,#fde68a,#fb923c)}
.mb-sp-thumb-3{background:linear-gradient(135deg,#fbcfe8,#a78bfa)}
/* Search */
.mb-sp-search-card{
margin:.4rem .8rem;padding:.6rem .8rem;background:#0f172a;color:#fff;border-radius:10px;
display:flex;justify-content:space-between;align-items:center;
}
.mb-sp-route{font-size:.85rem;font-weight:800}
.mb-sp-date{font-size:.62rem;font-weight:600;color:rgba(255,255,255,.7)}
.mb-sp-result{
margin:.4rem .8rem;padding:.55rem .7rem;background:#f1f5f9;border-radius:10px;
display:grid;grid-template-columns:1fr auto;align-items:center;gap:.2rem;
}
.mb-sp-result strong{font-size:.78rem;font-weight:800;color:var(--mb-ink)}
.mb-sp-result em{font-style:normal;font-size:.62rem;color:var(--mb-muted);grid-column:1;grid-row:2}
.mb-sp-amt{grid-row:1 / span 2;align-self:center;font-size:.85rem;font-weight:800;color:var(--mb-accent)}
/* Wallet */
.mb-sp-card-mini{
margin:.4rem .8rem;padding:.9rem .9rem;border-radius:14px;
background:linear-gradient(135deg,#186900,#22a83d);color:#fff;
}
.mb-sp-card-tag{font-size:.55rem;font-weight:800;letter-spacing:.18em;opacity:.85}
.mb-sp-card-amt{font-size:1.4rem;font-weight:800;margin-top:.3rem}
.mb-sp-card-foot{display:flex;justify-content:space-between;font-size:.55rem;font-weight:600;opacity:.8;margin-top:.5rem}
.mb-sp-tx{
display:flex;justify-content:space-between;align-items:center;
margin:.3rem .8rem;padding:.5rem .7rem;background:#f8faf6;border-radius:8px;
font-size:.72rem;
}
.mb-sp-tx em{font-style:normal;color:var(--mb-ink);font-weight:700}
.mb-sp-tx span{color:var(--mb-accent);font-weight:800}
.mb-sp-tx span.warn{color:#ef4444}
/* Itinerary */
.mb-sp-itin-head{padding:.4rem 1rem .8rem}
.mb-sp-itin-head strong{display:block;font-size:1rem;font-weight:800;color:var(--mb-ink)}
.mb-sp-itin-head em{display:block;font-style:normal;font-size:.68rem;color:var(--mb-muted);margin-top:.15rem}
.mb-sp-itin-row{
display:flex;align-items:center;gap:.6rem;
margin:.3rem 1rem;padding:.55rem .6rem;background:#f8faf6;border-radius:10px;
}
.mb-sp-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.mb-sp-dot.dot-blue{background:#3b82f6}
.mb-sp-dot.dot-amber{background:#f5b942}
.mb-sp-dot.dot-green{background:#22a83d}
.mb-sp-itin-row strong{display:block;font-size:.74rem;font-weight:800;color:var(--mb-ink)}
.mb-sp-itin-row em{display:block;font-style:normal;font-size:.6rem;color:var(--mb-muted)}
/* Profile */
.mb-sp-avatar{
width:64px;height:64px;border-radius:50%;margin:.5rem auto .4rem;
background:linear-gradient(135deg,#186900,#22a83d);color:#fff;
display:grid;place-items:center;font-weight:800;font-size:1.2rem;
}
.mb-sp-name{text-align:center;font-size:.9rem;font-weight:800;color:var(--mb-ink)}
.mb-sp-tier{
text-align:center;display:block;width:fit-content;margin:.3rem auto .8rem;
font-size:.6rem;font-weight:800;letter-spacing:.1em;color:#b45309;background:#fef3c7;
padding:.2rem .55rem;border-radius:999px;
}
.mb-sp-list-item{
display:flex;justify-content:space-between;align-items:center;
margin:.3rem 1rem;padding:.55rem .8rem;background:#f8faf6;border-radius:10px;
font-size:.74rem;color:var(--mb-ink);font-weight:600;
}
.mb-sp-list-item em{font-style:normal;color:var(--mb-accent);font-weight:800}
/* ---------- 5) ONE BACKEND SPLIT ---------- */
.mb-split-section{background:#fff}
.mb-split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.mb-split-copy h2{margin-bottom:1rem}
.mb-split-copy p{color:var(--mb-ink-2);font-size:1rem;line-height:1.65;margin:0 0 1.5rem;max-width:50ch}
.mb-bullet-list{list-style:none;padding:0;margin:0 0 1.8rem;display:grid;gap:1rem}
.mb-bullet-list li{display:flex;align-items:flex-start;gap:.85rem}
.mb-bullet-list li > div{display:flex;flex-direction:column;gap:.18rem;line-height:1.45}
.mb-bullet-list li strong{font-weight:700;color:var(--mb-ink);font-size:1rem}
.mb-bullet-list li > div span{color:var(--mb-muted);font-size:.92rem}
.mb-bullet{
width:24px;height:24px;border-radius:50%;background:#dcfce7;color:var(--mb-accent);
display:grid;place-items:center;flex-shrink:0;margin-top:.18rem;
}
/* Dashboard mock */
.mb-dashboard{
background:#fff;border:1px solid var(--mb-line);border-radius:20px;
padding:1.4rem;box-shadow:0 28px 60px -28px rgba(15,23,42,.22);
display:flex;flex-direction:column;gap:1.1rem;
}
.mb-dash-top{display:flex;justify-content:space-between;align-items:center;padding:.2rem .4rem .6rem;border-bottom:1px solid var(--mb-line)}
.mb-dash-title{font-weight:700;color:var(--mb-ink);font-size:.95rem}
.mb-dash-dots{display:flex;gap:.35rem}
.mb-dash-dots span{width:8px;height:8px;border-radius:50%;background:#e2e8f0}
.mb-dash-dots span:first-child{background:#fb7185}
.mb-dash-dots span:nth-child(2){background:#f5b942}
.mb-dash-dots span:last-child{background:#22c55e}
.mb-dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.mb-dash-stat{background:var(--mb-bg);border-radius:12px;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.2rem}
.mb-dash-stat .l{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mb-muted)}
.mb-dash-stat .v{font-size:1.4rem;font-weight:800;color:var(--mb-ink);line-height:1}
.mb-dash-stat .d{font-size:.78rem;color:var(--mb-muted);font-weight:600}
.mb-dash-stat .d.up{color:var(--mb-accent)}
.mb-dash-rows{display:flex;flex-direction:column;gap:.55rem}
.mb-dash-row{
display:flex;justify-content:space-between;align-items:center;
padding:.7rem .9rem;background:#fff;border:1px solid var(--mb-line);border-radius:10px;
}
.mb-dash-row .who{display:flex;align-items:center;gap:.65rem;font-size:.88rem;color:var(--mb-ink-2);font-weight:500}
.mb-dash-row .av{
width:34px;height:30px;border-radius:8px;display:grid;place-items:center;
font-size:.66rem;font-weight:800;color:#fff;flex-shrink:0;letter-spacing:.04em;
}
.mb-dash-row .av-ios{background:linear-gradient(135deg,#0f172a,#334155)}
.mb-dash-row .av-and{background:linear-gradient(135deg,#22c55e,#15803d)}
.mb-dash-row .av-push{background:linear-gradient(135deg,#f5b942,#ef4444)}
.mb-dash-badge{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .65rem;border-radius:999px}
.mb-dash-badge.ok{background:#dcfce7;color:#15803d}
.mb-dash-badge.warn{background:#fef3c7;color:#b45309}
@media(max-width:880px){.mb-split{grid-template-columns:1fr;gap:2.5rem}}
/* ---------- 6) DOWNLOAD CTA ---------- */
.mb-download{
background:linear-gradient(135deg,#0b3a04 0%,#186900 60%,#0f2a05 100%);
color:#fff;padding:5rem 0;position:relative;overflow:hidden;
}
.mb-download::before{
content:"";position:absolute;top:-100px;right:-100px;width:420px;height:420px;
background:radial-gradient(circle,rgba(245,185,66,.22),transparent 65%);filter:blur(70px);
}
.mb-download-inner{
position:relative;z-index:1;
display:grid;grid-template-columns:1fr 1.3fr;gap:3rem;align-items:center;
}
.mb-download-art{display:flex;justify-content:center}
.mb-download-art .mb-phone{box-shadow:0 30px 70px -22px rgba(0,0,0,.5)}
.mb-screen-cta{
background:linear-gradient(135deg,#186900,#22a83d);color:#fff;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
padding:1.5rem;
}
.mb-cta-badge{
font-size:.66rem;font-weight:800;letter-spacing:.18em;
background:rgba(255,255,255,.18);padding:.3rem .7rem;border-radius:999px;
}
.mb-cta-icon{
width:80px;height:80px;border-radius:24px;background:rgba(255,255,255,.18);
display:grid;place-items:center;margin:.5rem 0;
}
.mb-cta-h{font-size:1.4rem;font-weight:800;letter-spacing:-.01em}
.mb-cta-sub{font-size:.78rem;color:rgba(255,255,255,.78);font-weight:600}
.mb-download-copy h2{color:#fff;margin-bottom:1rem}
.mb-download-copy p{color:rgba(255,255,255,.85);font-size:1rem;line-height:1.65;margin:0 0 1.6rem;max-width:48ch}
.mb-download-actions{display:flex;flex-wrap:wrap;gap:.8rem}
.mb-download .mb-store-badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.mb-download .mb-store-badge:hover{background:rgba(255,255,255,.2)}
@media(max-width:880px){
.mb-download-inner{grid-template-columns:1fr;gap:2.5rem;text-align:center}
.mb-download-actions{justify-content:center}
}
/* ---------- 7) FAQ ---------- */
.mb-faq-section{background:var(--mb-bg)}
.mb-faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:.8rem}
.mb-faq-item{
background:#fff;border:1px solid var(--mb-line);border-radius:14px;
overflow:hidden;transition:.2s box-shadow,.2s border-color;
}
.mb-faq-item[open]{border-color:var(--mb-accent);box-shadow:0 12px 24px -12px rgba(15,23,42,.12)}
.mb-faq-item summary{
display:flex;justify-content:space-between;align-items:center;gap:1rem;
padding:1.1rem 1.4rem;font-weight:700;color:var(--mb-ink);font-size:1rem;cursor:pointer;
list-style:none;
}
.mb-faq-item summary::-webkit-details-marker{display:none}
.mb-faq-ic{
width:32px;height:32px;border-radius:50%;background:#dcfce7;color:var(--mb-accent);
display:grid;place-items:center;flex-shrink:0;
transition:.25s transform,.25s background,.25s color;
}
.mb-faq-item[open] .mb-faq-ic{background:var(--mb-accent);color:#fff;transform:rotate(180deg)}
.mb-faq-item p{margin:0;padding:0 1.4rem 1.2rem;color:var(--mb-muted);font-size:.95rem;line-height:1.65}
/* ============================================================
TRAVEL AGENCIES PAGE - Unice agency-style (ag-* namespace)
Cream backdrop, oversized italic-accent display, marquee, numbered cards.
============================================================ */
:root{
--ag-cream:#f5f1eb;
--ag-cream-2:#ebe5db;
--ag-ink:#1a1a1a;
--ag-ink-2:#3a3a3a;
--ag-muted:#6b6b6b;
--ag-line:#d9d2c5;
--ag-accent:#186900;
--ag-accent-2:#22a83d;
}
.ag-section{padding:6rem 0}
@media(max-width:780px){.ag-section{padding:3.5rem 0}}
.ag-eyebrow{
display:inline-flex;align-items:center;gap:.6rem;
font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
color:var(--ag-ink-2);margin-bottom:1.4rem;
}
.ag-dot{
width:8px;height:8px;border-radius:50%;background:var(--ag-accent);
display:inline-block;
}
.ag-h1,.ag-h2{
color:var(--ag-ink);font-weight:800;margin:0;
letter-spacing:-.025em;line-height:1.05;
}
.ag-h1{font-size:clamp(2.6rem,6vw,5rem)}
.ag-h2{font-size:clamp(1.9rem,4vw,3.4rem)}
.ag-h2-light{color:#fff}
.ag-h1 em,.ag-h2 em{
font-style:italic;font-weight:400;
background:linear-gradient(135deg,var(--ag-accent) 0%,var(--ag-accent-2) 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ag-h2-light em{
background:linear-gradient(135deg,#a7f3d0 0%,#fef3c7 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ag-btn{
display:inline-flex;align-items:center;gap:.5rem;
padding:1rem 1.7rem;border-radius:999px;
font-weight:700;font-size:.94rem;text-decoration:none;
transition:.2s transform,.2s background,.2s box-shadow,.2s color,.2s border-color;
}
.ag-btn:hover{text-decoration:none;transform:translateY(-2px)}
.ag-btn-primary{background:var(--ag-ink);color:#fff;box-shadow:0 12px 24px -10px rgba(26,26,26,.4)}
.ag-btn-primary:hover{color:#fff;background:var(--ag-accent);box-shadow:0 18px 30px -12px rgba(24,105,0,.5)}
.ag-btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.ag-btn-outline:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.ag-btn-link{background:transparent;color:var(--ag-ink);padding:1rem .6rem;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.ag-btn-link:hover{color:var(--ag-accent);transform:translateX(4px)}
.ag-btn-lg{padding:1.15rem 2rem;font-size:1rem}
/* ---------- 1) HERO ---------- */
.ag-hero{
background:var(--ag-cream);
padding:3rem 0 5rem;border-bottom:1px solid var(--ag-line);
position:relative;overflow:hidden;
}
.ag-hero-inner{
display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;align-items:center;
}
.ag-breadcrumb{margin-bottom:1.5rem;font-size:.85rem;color:var(--ag-muted)}
.ag-breadcrumb a{color:var(--ag-ink-2)}
.ag-breadcrumb a:hover{color:var(--ag-accent)}
.ag-hero-copy .ag-h1{margin-bottom:1.5rem}
.ag-lede{font-size:1.1rem;line-height:1.65;color:var(--ag-ink-2);margin:0 0 2rem;max-width:54ch}
.ag-hero-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
/* Hero asymmetric image cluster */
.ag-hero-cluster{
position:relative;height:480px;display:block;
}
.ag-shape{position:absolute;display:block;transition:.3s transform}
.ag-shape svg{width:100%;height:100%;display:block}
.ag-shape-1{width:200px;height:200px;top:0;left:10%;border-radius:18px;overflow:hidden;
box-shadow:0 24px 50px -22px rgba(15,23,42,.25);transform:rotate(-6deg)}
.ag-shape-2{width:220px;height:220px;top:30%;right:0;border-radius:50%;overflow:hidden;
box-shadow:0 28px 60px -24px rgba(24,105,0,.35)}
.ag-shape-3{width:170px;height:170px;bottom:5%;left:0;border-radius:50%;overflow:hidden;
box-shadow:0 24px 50px -22px rgba(234,88,12,.4);transform:rotate(8deg)}
.ag-shape-4{bottom:15%;right:15%}
.ag-hero-cluster:hover .ag-shape-1{transform:rotate(-8deg) translateY(-6px)}
.ag-hero-cluster:hover .ag-shape-2{transform:translateY(-8px)}
.ag-hero-cluster:hover .ag-shape-3{transform:rotate(10deg) translateY(-6px)}
.ag-mini-card{
background:#fff;border:1px solid var(--ag-line);border-radius:16px;
padding:1rem 1.2rem;min-width:180px;
box-shadow:0 18px 36px -16px rgba(15,23,42,.2);
}
.ag-mini-row{display:flex;align-items:center;gap:.5rem;font-size:1.05rem;font-weight:800;color:var(--ag-ink)}
.ag-mini-row span{color:var(--ag-accent)}
.ag-mini-card em{display:block;font-style:normal;font-size:.72rem;color:var(--ag-muted);margin-top:.3rem;font-weight:600}
.ag-mini-price{font-size:1.05rem;font-weight:800;color:var(--ag-accent);margin-top:.4rem}
@media(max-width:980px){
.ag-hero-inner{grid-template-columns:1fr;gap:3rem}
.ag-hero-cluster{height:380px;max-width:520px;margin:0 auto}
}
/* ---------- 2) MARQUEE ---------- */
.ag-marquee{
background:var(--ag-ink);color:#fff;padding:1.5rem 0;
overflow:hidden;position:relative;
}
.ag-marquee-track{
display:flex;align-items:center;gap:2.2rem;
width:max-content;animation:agScroll 36s linear infinite;
font-family:'Inter',sans-serif;
}
.ag-marquee-track span{
font-size:1.6rem;font-weight:800;letter-spacing:-.02em;
color:#fff;font-style:italic;white-space:nowrap;
}
.ag-marquee-track i{
font-style:normal;color:var(--ag-accent-2);font-size:1.4rem;
}
@keyframes agScroll{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
.ag-marquee:hover .ag-marquee-track{animation-play-state:paused}
/* ---------- 3) STATS ---------- */
.ag-stats{
background:var(--ag-cream);padding:4rem 0;
border-bottom:1px solid var(--ag-line);
}
.ag-stats-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
text-align:left;
}
.ag-stat{padding:0 1.5rem;border-left:1px solid var(--ag-line)}
.ag-stat:first-child{border-left:0;padding-left:0}
.ag-stat strong{
display:block;font-size:clamp(2.6rem,4.5vw,3.6rem);font-weight:800;
color:var(--ag-ink);line-height:1;letter-spacing:-.03em;
}
.ag-stat strong i{font-style:normal;color:var(--ag-accent);font-size:.7em;font-weight:700}
.ag-stat span{display:block;margin-top:.6rem;font-size:.92rem;color:var(--ag-muted);font-weight:600}
@media(max-width:780px){
.ag-stats-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}
.ag-stat{border-left:0;padding-left:0}
}
/* ---------- Head ---------- */
.ag-head{max-width:780px;margin:0 auto 4rem;text-align:center}
.ag-head .ag-eyebrow{justify-content:center}
.ag-head p{margin:1.4rem 0 0;color:var(--ag-muted);font-size:1.04rem;line-height:1.65}
/* ---------- 4) SERVICES (numbered cards) ---------- */
.ag-services{background:#fff}
.ag-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ag-line);border-left:1px solid var(--ag-line)}
.ag-svc{
position:relative;padding:2.4rem 2rem;
border-right:1px solid var(--ag-line);border-bottom:1px solid var(--ag-line);
background:#fff;transition:.3s background;
}
.ag-svc:hover{background:var(--ag-cream)}
.ag-svc-num{
display:block;font-size:1rem;font-weight:800;color:var(--ag-accent);
letter-spacing:.06em;margin-bottom:1rem;
}
.ag-svc h3{font-size:1.4rem;font-weight:800;color:var(--ag-ink);margin:0 0 .8rem;letter-spacing:-.01em;line-height:1.2}
.ag-svc p{color:var(--ag-muted);font-size:.96rem;line-height:1.65;margin:0 0 1.2rem}
.ag-svc-tag{
display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--ag-accent);background:#dcfce7;padding:.32rem .7rem;border-radius:999px;
}
@media(max-width:980px){.ag-svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ag-svc-grid{grid-template-columns:1fr}}
/* ---------- 5) PRODUCT BREAKDOWN SPLIT ---------- */
.ag-products{background:var(--ag-cream)}
.ag-split{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center}
.ag-split-copy h2{margin-bottom:1rem}
.ag-split-copy > p{color:var(--ag-ink-2);font-size:1rem;line-height:1.65;margin:0 0 1.6rem;max-width:50ch}
.ag-feat-list{list-style:none;padding:0;margin:0 0 2rem;display:grid;gap:1rem}
.ag-feat-list li{display:flex;align-items:flex-start;gap:.85rem}
.ag-feat-list li > div{display:flex;flex-direction:column;gap:.18rem;line-height:1.45}
.ag-feat-list li strong{font-weight:700;color:var(--ag-ink);font-size:1.02rem}
.ag-feat-list li > div span{color:var(--ag-muted);font-size:.92rem}
.ag-tick{
width:24px;height:24px;border-radius:50%;background:var(--ag-ink);color:#fff;
display:grid;place-items:center;flex-shrink:0;margin-top:.18rem;
}
/* Dashboard mock (re-skinned in cream theme) */
.ag-dashboard{
background:#fff;border:1px solid var(--ag-line);border-radius:18px;
padding:1.4rem;box-shadow:0 28px 60px -28px rgba(15,23,42,.22);
display:flex;flex-direction:column;gap:1rem;
}
.ag-dash-top{display:flex;justify-content:space-between;align-items:center;padding:.2rem .4rem .6rem;border-bottom:1px solid var(--ag-line)}
.ag-dash-title{font-weight:700;color:var(--ag-ink);font-size:.95rem}
.ag-dash-dots{display:flex;gap:.35rem}
.ag-dash-dots span{width:8px;height:8px;border-radius:50%;background:#e2e8f0}
.ag-dash-dots span:first-child{background:#fb7185}
.ag-dash-dots span:nth-child(2){background:#f5b942}
.ag-dash-dots span:last-child{background:#22c55e}
.ag-dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.ag-dash-stat{background:var(--ag-cream);border-radius:10px;padding:.85rem .95rem;display:flex;flex-direction:column;gap:.2rem}
.ag-dash-stat .l{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ag-muted)}
.ag-dash-stat .v{font-size:1.4rem;font-weight:800;color:var(--ag-ink);line-height:1}
.ag-dash-stat .d{font-size:.74rem;color:var(--ag-muted);font-weight:600}
.ag-dash-stat .d.up{color:var(--ag-accent)}
.ag-dash-chart{height:90px;background:var(--ag-cream);border-radius:10px;overflow:hidden}
.ag-dash-chart svg{width:100%;height:100%;display:block}
.ag-dash-rows{display:flex;flex-direction:column;gap:.5rem}
.ag-dash-row{
display:flex;justify-content:space-between;align-items:center;
padding:.65rem .9rem;background:#fff;border:1px solid var(--ag-line);border-radius:10px;
}
.ag-dash-row .who{display:flex;align-items:center;gap:.6rem;font-size:.86rem;color:var(--ag-ink-2);font-weight:500}
.ag-dash-row .av{
width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
font-size:.66rem;font-weight:800;color:#fff;flex-shrink:0;letter-spacing:.04em;
}
.ag-dash-row .av-blue{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.ag-dash-row .av-teal{background:linear-gradient(135deg,#14b8a6,#186900)}
.ag-dash-row .av-warm{background:linear-gradient(135deg,#f5b942,#ef4444)}
.ag-dash-badge{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .65rem;border-radius:999px}
.ag-dash-badge.ok{background:#dcfce7;color:#15803d}
.ag-dash-badge.warn{background:#fef3c7;color:#b45309}
@media(max-width:880px){.ag-split{grid-template-columns:1fr;gap:2.5rem}}
/* ---------- 6) WHY (cards on white) ---------- */
.ag-why{background:#fff}
.ag-why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.ag-why-card{
background:var(--ag-cream);border:1px solid var(--ag-line);border-radius:18px;
padding:2rem 1.8rem;transition:.25s transform,.25s box-shadow;
}
.ag-why-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(15,23,42,.18)}
.ag-why-ic{
width:48px;height:48px;border-radius:14px;background:var(--ag-ink);color:#fff;
display:grid;place-items:center;margin-bottom:1rem;
}
.ag-why-card h3{font-size:1.2rem;font-weight:800;color:var(--ag-ink);margin:0 0 .55rem;letter-spacing:-.01em}
.ag-why-card p{color:var(--ag-muted);font-size:.94rem;line-height:1.6;margin:0}
@media(max-width:780px){.ag-why-grid{grid-template-columns:1fr}}
/* ---------- 7) PROCESS / STEPS ---------- */
.ag-process{background:var(--ag-cream)}
.ag-steps{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
border-top:1px solid var(--ag-line);
}
.ag-step{
position:relative;padding:2.2rem 1.8rem;border-right:1px solid var(--ag-line);
display:flex;flex-direction:column;
}
.ag-step:last-child{border-right:0}
.ag-step-num{
font-size:2.6rem;font-weight:800;color:var(--ag-accent);
line-height:1;margin-bottom:1.2rem;letter-spacing:-.02em;
}
.ag-step h3{font-size:1.15rem;font-weight:800;color:var(--ag-ink);margin:0 0 .6rem;letter-spacing:-.01em}
.ag-step p{color:var(--ag-muted);font-size:.92rem;line-height:1.6;margin:0}
@media(max-width:980px){
.ag-steps{grid-template-columns:repeat(2,1fr)}
.ag-step{border-bottom:1px solid var(--ag-line)}
.ag-step:nth-child(2n){border-right:0}
.ag-step:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:560px){
.ag-steps{grid-template-columns:1fr}
.ag-step{border-right:0;border-bottom:1px solid var(--ag-line)}
.ag-step:last-child{border-bottom:0}
}
/* ---------- 8) FAQ ---------- */
.ag-faq-section{background:#fff}
.ag-faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:.8rem}
.ag-faq-item{
background:var(--ag-cream);border:1px solid var(--ag-line);border-radius:14px;
overflow:hidden;transition:.2s box-shadow,.2s border-color;
}
.ag-faq-item[open]{border-color:var(--ag-ink);background:#fff;box-shadow:0 12px 24px -12px rgba(15,23,42,.12)}
.ag-faq-item summary{
display:flex;justify-content:space-between;align-items:center;gap:1rem;
padding:1.1rem 1.4rem;font-weight:700;color:var(--ag-ink);font-size:1rem;cursor:pointer;
list-style:none;
}
.ag-faq-item summary::-webkit-details-marker{display:none}
.ag-faq-ic{
width:32px;height:32px;border-radius:50%;background:var(--ag-cream);color:var(--ag-ink);
display:grid;place-items:center;flex-shrink:0;
transition:.25s transform,.25s background,.25s color;
}
.ag-faq-item[open] .ag-faq-ic{background:var(--ag-ink);color:#fff;transform:rotate(180deg)}
.ag-faq-item p{margin:0;padding:0 1.4rem 1.2rem;color:var(--ag-muted);font-size:.95rem;line-height:1.65}
/* ---------- 9) FINAL CTA ---------- */
.ag-cta{
background:var(--ag-ink);color:#fff;padding:5rem 0;
position:relative;overflow:hidden;
}
.ag-cta::before{
content:"";position:absolute;top:-100px;right:-100px;width:380px;height:380px;
background:radial-gradient(circle,rgba(34,168,61,.25),transparent 65%);filter:blur(70px);
}
.ag-cta-inner{position:relative;z-index:1;max-width:780px;margin:0 auto;text-align:center}
.ag-cta-inner h2{margin-bottom:1.2rem}
.ag-cta-inner p{color:rgba(255,255,255,.78);font-size:1.05rem;line-height:1.6;margin:0 0 2rem;max-width:54ch;margin-left:auto;margin-right:auto}
.ag-cta-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.ag-cta .ag-btn-primary{background:#fff;color:var(--ag-ink)}
.ag-cta .ag-btn-primary:hover{background:var(--ag-accent-2);color:#fff}
/* ============================================================
CORPORATE BUSINESS PAGE - Upcover-style design (cb-* namespace)
Bright hero with floating shapes, pastel feature cards,
stat strip with icon tiles, dark final CTA.
============================================================ */
:root{
--cb-ink:#0f1730;
--cb-ink-2:#3a4361;
--cb-muted:#6b7693;
--cb-line:#e6e9f2;
--cb-bg:#f7f8fc;
--cb-accent:#186900;
--cb-accent-2:#22a83d;
--cb-coral:#fb7185;
--cb-peach:#fb923c;
--cb-mint:#34d399;
--cb-sky:#60a5fa;
--cb-lavender:#a78bfa;
--cb-yellow:#fbbf24;
}
.cb-section{padding:6rem 0}
@media(max-width:780px){.cb-section{padding:4rem 0}}
.cb-tag{
display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--cb-accent);background:#dcfce7;padding:.4rem .85rem;border-radius:999px;margin-bottom:1.2rem;
}
.cb-tag-light{color:#fef3c7;background:rgba(255,255,255,.12)}
.cb-h1,.cb-h2{color:var(--cb-ink);font-weight:800;margin:0;letter-spacing:-.02em;line-height:1.1}
.cb-h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.cb-h2{font-size:clamp(1.7rem,3vw,2.6rem)}
.cb-h2-light{color:#fff}
.cb-h1-accent,.cb-h2-accent{
background:linear-gradient(135deg,var(--cb-accent),var(--cb-accent-2));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.cb-h2-light-accent{
background:linear-gradient(135deg,#a7f3d0,#fef3c7);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.cb-btn{
display:inline-flex;align-items:center;gap:.5rem;
padding:.95rem 1.6rem;border-radius:14px;
font-weight:700;font-size:.94rem;text-decoration:none;
transition:.2s transform,.2s box-shadow,.2s background,.2s color,.2s border-color;
}
.cb-btn:hover{text-decoration:none;transform:translateY(-2px)}
.cb-btn-primary{
background:linear-gradient(135deg,var(--cb-accent),var(--cb-accent-2));color:#fff;
box-shadow:0 14px 28px -10px rgba(24,105,0,.4);
}
.cb-btn-primary:hover{color:#fff;box-shadow:0 20px 36px -12px rgba(24,105,0,.55)}
.cb-btn-soft{background:#fff;color:var(--cb-ink);border:1px solid var(--cb-line)}
.cb-btn-soft:hover{border-color:var(--cb-accent);color:var(--cb-accent)}
.cb-btn-white{background:#fff;color:var(--cb-ink)}
.cb-btn-white:hover{background:#f0fdf4;color:var(--cb-accent)}
.cb-btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.cb-btn-outline:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.cb-breadcrumb{margin-bottom:1.4rem;font-size:.85rem}
/* ---------- 1) HERO ---------- */
.cb-hero{
position:relative;overflow:hidden;
background:linear-gradient(135deg,#f0fdf4 0%,#fff 50%,#fef3c7 100%);
padding:4rem 0 5rem;
}
.cb-hero-shapes{position:absolute;inset:0;pointer-events:none;z-index:0}
.cb-shape{position:absolute;border-radius:50%;opacity:.5}
.cb-shape-1{width:120px;height:120px;background:linear-gradient(135deg,#fcd34d,#f59e0b);top:8%;left:42%;animation:cbFloat 8s ease-in-out infinite}
.cb-shape-2{width:60px;height:60px;background:linear-gradient(135deg,#fda4af,#fb7185);top:18%;left:8%;animation:cbFloat 6s ease-in-out infinite -2s}
.cb-shape-3{width:90px;height:90px;background:linear-gradient(135deg,#a7f3d0,#22a83d);bottom:12%;left:28%;animation:cbFloat 7s ease-in-out infinite -4s;opacity:.4}
.cb-shape-4{width:160px;height:160px;border-radius:34%;background:linear-gradient(135deg,#bfdbfe,#60a5fa);top:50%;right:6%;animation:cbFloat 9s ease-in-out infinite -3s;opacity:.35}
.cb-shape-5{width:40px;height:40px;background:linear-gradient(135deg,#c4b5fd,#a78bfa);top:65%;left:48%;animation:cbFloat 5s ease-in-out infinite -1s}
@keyframes cbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.cb-hero-grid{
position:relative;z-index:1;
display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;
}
.cb-hero-copy .cb-h1{margin-bottom:1.4rem;max-width:18ch}
.cb-lede{font-size:1.05rem;line-height:1.65;color:var(--cb-ink-2);margin:0 0 1.8rem;max-width:54ch}
.cb-hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2rem}
.cb-hero-trust{display:flex;align-items:center;gap:1rem}
.cb-avatars{display:flex}
.cb-av{
width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
font-size:.78rem;font-weight:800;color:#fff;border:2px solid #fff;margin-left:-10px;
}
.cb-av:first-child{margin-left:0}
.cb-av-1{background:linear-gradient(135deg,#fb7185,#be185d)}
.cb-av-2{background:linear-gradient(135deg,#60a5fa,#1d4ed8)}
.cb-av-3{background:linear-gradient(135deg,#fbbf24,#ea580c)}
.cb-av-4{background:linear-gradient(135deg,#34d399,#186900);font-size:1rem}
.cb-hero-trust strong{display:block;font-weight:800;color:var(--cb-ink);font-size:.95rem}
.cb-hero-trust em{display:block;font-style:normal;font-size:.82rem;color:var(--cb-muted)}
/* Hero art (dashboard + floating cards) */
.cb-hero-art{position:relative;height:520px}
.cb-hero-card{
background:#fff;border:1px solid var(--cb-line);border-radius:20px;
box-shadow:0 28px 56px -22px rgba(15,23,48,.22);
}
.cb-hero-card-main{
position:absolute;top:30px;right:0;width:calc(100% - 30px);padding:1.4rem;
display:flex;flex-direction:column;gap:1rem;
}
.cb-hero-card-top{display:flex;justify-content:space-between;align-items:flex-start}
.cb-hero-card-top strong{display:block;font-size:1.05rem;font-weight:800;color:var(--cb-ink)}
.cb-hero-card-top em{display:block;font-style:normal;font-size:.78rem;color:var(--cb-muted);margin-top:.2rem}
.cb-pill{font-size:.72rem;font-weight:800;padding:.3rem .65rem;border-radius:999px;letter-spacing:.05em}
.cb-pill-green{background:#dcfce7;color:#15803d}
.cb-pill-soft{background:var(--cb-bg);color:var(--cb-ink-2);text-transform:uppercase;font-size:.65rem}
.cb-hero-card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.cb-hero-card-stats > div{background:var(--cb-bg);border-radius:12px;padding:.7rem .8rem}
.cb-hero-card-stats em{font-style:normal;font-size:.72rem;color:var(--cb-muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.cb-hero-card-stats strong{display:block;font-size:1.3rem;font-weight:800;color:var(--cb-ink);margin-top:.2rem}
.cb-hero-chart{height:80px;background:var(--cb-bg);border-radius:12px;overflow:hidden}
.cb-hero-card-approval{
position:absolute;bottom:20px;left:-20px;width:260px;padding:1rem 1.1rem;
display:flex;flex-direction:column;gap:.7rem;
animation:cbFloat 6s ease-in-out infinite;
}
.cb-app-row{display:flex;align-items:center;gap:.7rem}
.cb-app-row strong{display:block;font-size:.88rem;font-weight:800;color:var(--cb-ink)}
.cb-app-row em{display:block;font-style:normal;font-size:.72rem;color:var(--cb-muted)}
.cb-app-foot{display:flex;justify-content:space-between;align-items:center}
.cb-app-btn{
background:var(--cb-accent);color:#fff;border:0;
padding:.4rem .85rem;border-radius:999px;font-weight:700;font-size:.78rem;cursor:pointer;
}
.cb-hero-chip{
position:absolute;top:-10px;left:-10px;background:#fff;border:1px solid var(--cb-line);border-radius:14px;
padding:.7rem .9rem;display:flex;align-items:center;gap:.7rem;
box-shadow:0 18px 36px -16px rgba(15,23,48,.25);
animation:cbFloat 7s ease-in-out infinite -3s;
}
.cb-chip-ic{
width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--cb-accent),var(--cb-accent-2));color:#fff;
display:grid;place-items:center;flex-shrink:0;
}
.cb-hero-chip strong{display:block;font-size:.85rem;font-weight:800;color:var(--cb-ink)}
.cb-hero-chip em{display:block;font-style:normal;font-size:.7rem;color:var(--cb-muted)}
@media(max-width:980px){
.cb-hero-grid{grid-template-columns:1fr;gap:3rem}
.cb-hero-art{height:480px;max-width:520px;margin:0 auto}
}
/* ---------- 2) STATS STRIP ---------- */
.cb-stats{background:#fff;border-top:1px solid var(--cb-line);border-bottom:1px solid var(--cb-line);padding:2.5rem 0}
.cb-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.cb-stat{display:flex;align-items:center;gap:1rem}
.cb-stat-ic{
width:54px;height:54px;border-radius:14px;display:grid;place-items:center;color:#fff;flex-shrink:0;
}
.cb-stat-ic-1{background:linear-gradient(135deg,#fb7185,#be185d)}
.cb-stat-ic-2{background:linear-gradient(135deg,#34d399,#186900)}
.cb-stat-ic-3{background:linear-gradient(135deg,#60a5fa,#1d4ed8)}
.cb-stat-ic-4{background:linear-gradient(135deg,#fbbf24,#ea580c)}
.cb-stat strong{display:block;font-size:1.6rem;font-weight:800;color:var(--cb-ink);line-height:1;letter-spacing:-.02em}
.cb-stat strong i{font-style:normal;color:var(--cb-accent);font-size:.7em}
.cb-stat span{display:block;font-size:.85rem;color:var(--cb-muted);font-weight:600;margin-top:.3rem}
@media(max-width:780px){.cb-stats-grid{grid-template-columns:repeat(2,1fr);gap:1.2rem}}
/* ---------- 3) SINGLE-PANE SPLIT ---------- */
.cb-pane-section{background:var(--cb-bg)}
.cb-split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.cb-split-copy h2{margin-bottom:1rem}
.cb-split-copy > p{color:var(--cb-ink-2);font-size:1rem;line-height:1.65;margin:0 0 1.5rem;max-width:50ch}
.cb-feat-list{list-style:none;padding:0;margin:0 0 1.8rem;display:grid;gap:1rem}
.cb-feat-list li{display:flex;align-items:flex-start;gap:.85rem}
.cb-feat-list li > div{display:flex;flex-direction:column;gap:.18rem;line-height:1.45}
.cb-feat-list li strong{font-weight:700;color:var(--cb-ink);font-size:1rem}
.cb-feat-list li > div span{color:var(--cb-muted);font-size:.92rem}
.cb-tick{
width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--cb-accent),var(--cb-accent-2));color:#fff;
display:grid;place-items:center;flex-shrink:0;margin-top:.18rem;
}
/* Dashboard mock */
.cb-dashboard{
background:#fff;border:1px solid var(--cb-line);border-radius:20px;
padding:1.4rem;box-shadow:0 28px 60px -28px rgba(15,23,48,.22);
display:flex;flex-direction:column;gap:1rem;
}
.cb-dash-top{display:flex;justify-content:space-between;align-items:center;padding:.2rem .4rem .6rem;border-bottom:1px solid var(--cb-line)}
.cb-dash-title{font-weight:700;color:var(--cb-ink);font-size:.95rem}
.cb-dash-dots{display:flex;gap:.35rem}
.cb-dash-dots span{width:8px;height:8px;border-radius:50%;background:#e2e8f0}
.cb-dash-dots span:first-child{background:#fb7185}
.cb-dash-dots span:nth-child(2){background:#fbbf24}
.cb-dash-dots span:last-child{background:#22c55e}
.cb-dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.cb-dash-stat{background:var(--cb-bg);border-radius:12px;padding:.85rem .95rem;display:flex;flex-direction:column;gap:.2rem}
.cb-dash-stat .l{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cb-muted)}
.cb-dash-stat .v{font-size:1.4rem;font-weight:800;color:var(--cb-ink);line-height:1}
.cb-dash-stat .d{font-size:.74rem;color:var(--cb-muted);font-weight:600}
.cb-dash-stat .d.up{color:var(--cb-accent)}
.cb-dash-stat .d.down{color:#ef4444}
.cb-dash-chart{height:90px;background:var(--cb-bg);border-radius:12px;overflow:hidden}
.cb-dash-chart svg{width:100%;height:100%;display:block}
.cb-dash-rows{display:flex;flex-direction:column;gap:.5rem}
.cb-dash-row{
display:flex;justify-content:space-between;align-items:center;
padding:.65rem .9rem;background:#fff;border:1px solid var(--cb-line);border-radius:10px;
}
.cb-dash-row .who{display:flex;align-items:center;gap:.6rem;font-size:.86rem;color:var(--cb-ink-2);font-weight:500}
.cb-dash-row .av{
width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
font-size:.66rem;font-weight:800;color:#fff;flex-shrink:0;letter-spacing:.04em;
}
.cb-dash-row .av-pink{background:linear-gradient(135deg,#fb7185,#be185d)}
.cb-dash-row .av-teal{background:linear-gradient(135deg,#14b8a6,#186900)}
.cb-dash-row .av-warm{background:linear-gradient(135deg,#fbbf24,#ef4444)}
.cb-dash-badge{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .65rem;border-radius:999px}
.cb-dash-badge.ok{background:#dcfce7;color:#15803d}
.cb-dash-badge.warn{background:#fef3c7;color:#b45309}
@media(max-width:880px){.cb-split{grid-template-columns:1fr;gap:2.5rem}}
/* ---------- 4) FEATURES 6-CARD GRID ---------- */
.cb-features-section{background:#fff}
.cb-head{max-width:760px;margin:0 auto 3.5rem;text-align:center}
.cb-head p{margin:1.2rem 0 0;color:var(--cb-muted);font-size:1rem;line-height:1.65}
.cb-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.cb-feat{
border-radius:24px;padding:2rem 1.8rem;
transition:.25s transform,.25s box-shadow;position:relative;overflow:hidden;
}
.cb-feat:hover{transform:translateY(-6px);box-shadow:0 28px 50px -22px rgba(15,23,48,.22)}
.cb-feat-mint{background:linear-gradient(135deg,#ecfdf5,#d1fae5)}
.cb-feat-peach{background:linear-gradient(135deg,#fff7ed,#ffe4cc)}
.cb-feat-lavender{background:linear-gradient(135deg,#f5f3ff,#e9e1ff)}
.cb-feat-sky{background:linear-gradient(135deg,#eff6ff,#dbeafe)}
.cb-feat-rose{background:linear-gradient(135deg,#fff1f2,#fecdd3)}
.cb-feat-yellow{background:linear-gradient(135deg,#fefce8,#fef3c7)}
.cb-feat-ic{
width:60px;height:60px;border-radius:18px;display:grid;place-items:center;color:#fff;margin-bottom:1.1rem;
}
.cb-feat-mint .cb-feat-ic{background:linear-gradient(135deg,#34d399,#186900)}
.cb-feat-peach .cb-feat-ic{background:linear-gradient(135deg,#fb923c,#ea580c)}
.cb-feat-lavender .cb-feat-ic{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.cb-feat-sky .cb-feat-ic{background:linear-gradient(135deg,#60a5fa,#1d4ed8)}
.cb-feat-rose .cb-feat-ic{background:linear-gradient(135deg,#fb7185,#be185d)}
.cb-feat-yellow .cb-feat-ic{background:linear-gradient(135deg,#fbbf24,#ea580c)}
.cb-feat h3{font-size:1.2rem;font-weight:800;color:var(--cb-ink);margin:0 0 .55rem;letter-spacing:-.01em}
.cb-feat p{color:var(--cb-ink-2);font-size:.93rem;line-height:1.6;margin:0 0 1rem}
.cb-feat-tag{
display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
background:rgba(255,255,255,.6);color:var(--cb-ink);padding:.32rem .7rem;border-radius:999px;
}
@media(max-width:980px){.cb-feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cb-feat-grid{grid-template-columns:1fr}}
/* ---------- 5) PROCESS WORKFLOW ---------- */
.cb-process{background:var(--cb-bg)}
.cb-steps{
display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:1.2rem;align-items:start;
}
.cb-step{
background:#fff;border:1px solid var(--cb-line);border-radius:20px;
padding:2rem 1.5rem;text-align:center;
}
.cb-step-num{
width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--cb-accent),var(--cb-accent-2));color:#fff;
display:grid;place-items:center;font-size:1.4rem;font-weight:800;margin:0 auto 1rem;
box-shadow:0 12px 24px -10px rgba(24,105,0,.4);
}
.cb-step h3{font-size:1.1rem;font-weight:800;color:var(--cb-ink);margin:0 0 .6rem;letter-spacing:-.01em}
.cb-step p{color:var(--cb-muted);font-size:.9rem;line-height:1.55;margin:0}
.cb-step-arrow{
font-size:1.5rem;color:var(--cb-accent);font-weight:700;
align-self:center;padding-top:1.5rem;
}
@media(max-width:980px){
.cb-steps{grid-template-columns:1fr}
.cb-step-arrow{transform:rotate(90deg);padding:0;justify-self:center}
}
/* ---------- 6) TRUST STRIP ---------- */
.cb-trust{background:#fff;padding:3rem 0;border-top:1px solid var(--cb-line);border-bottom:1px solid var(--cb-line)}
.cb-trust-title{
text-align:center;margin:0 0 1.4rem;
font-size:.84rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cb-muted);
}
.cb-trust-list{
list-style:none;padding:0;margin:0;
display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;
}
.cb-trust-list li{
background:var(--cb-bg);border:1px solid var(--cb-line);
padding:.55rem 1rem;border-radius:999px;font-weight:700;color:var(--cb-ink-2);font-size:.88rem;
transition:.2s background,.2s color,.2s border-color;
}
.cb-trust-list li:hover{background:#dcfce7;color:var(--cb-accent);border-color:var(--cb-accent)}
/* ---------- 7) FAQ ---------- */
.cb-faq-section{background:var(--cb-bg)}
.cb-faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:.8rem}
.cb-faq-item{
background:#fff;border:1px solid var(--cb-line);border-radius:14px;
overflow:hidden;transition:.2s box-shadow,.2s border-color;
}
.cb-faq-item[open]{border-color:var(--cb-accent);box-shadow:0 12px 24px -12px rgba(15,23,48,.12)}
.cb-faq-item summary{
display:flex;justify-content:space-between;align-items:center;gap:1rem;
padding:1.1rem 1.4rem;font-weight:700;color:var(--cb-ink);font-size:1rem;cursor:pointer;
list-style:none;
}
.cb-faq-item summary::-webkit-details-marker{display:none}
.cb-faq-ic{
width:32px;height:32px;border-radius:50%;background:#dcfce7;color:var(--cb-accent);
display:grid;place-items:center;flex-shrink:0;
transition:.25s transform,.25s background,.25s color;
}
.cb-faq-item[open] .cb-faq-ic{background:var(--cb-accent);color:#fff;transform:rotate(180deg)}
.cb-faq-item p{margin:0;padding:0 1.4rem 1.2rem;color:var(--cb-muted);font-size:.95rem;line-height:1.65}
/* ---------- 8) FINAL CTA ---------- */
.cb-cta{
background:linear-gradient(135deg,#0b1430 0%,#162355 60%,#0f1730 100%);
color:#fff;padding:5rem 0;position:relative;overflow:hidden;
}
.cb-cta-inner{
position:relative;z-index:1;
display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:center;
}
.cb-cta-blob{
position:absolute;top:-100px;right:-100px;width:420px;height:420px;
background:radial-gradient(circle,rgba(34,168,61,.35),transparent 65%);filter:blur(70px);z-index:0;
}
.cb-cta-copy h2{color:#fff;margin-bottom:1rem}
.cb-cta-copy p{color:rgba(255,255,255,.78);font-size:1rem;line-height:1.65;margin:0;max-width:50ch}
.cb-cta-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:flex-end;position:relative;z-index:1}
@media(max-width:880px){
.cb-cta-inner{grid-template-columns:1fr;text-align:center}
.cb-cta-actions{justify-content:center}
}
/* ============================================================
DMC SOFTWARE PAGE - SEONEX-style design (dm-* namespace)
Dark hero with stat badges, dark accent bands, marquee,
scrollable card grid, dark CTA with chart card.
============================================================ */
:root{
--dm-dark:#0e1421;
--dm-dark-2:#161e30;
--dm-ink:#0f1730;
--dm-ink-2:#3a4361;
--dm-muted:#6b7693;
--dm-line:#e2e8f0;
--dm-bg:#f5f7fb;
--dm-accent:#186900;
--dm-accent-2:#22a83d;
--dm-warm:#f5b942;
}
.dm-section{padding:6rem 0}
@media(max-width:780px){.dm-section{padding:4rem 0}}
.dm-eyebrow{
display:inline-flex;align-items:center;gap:.5rem;
font-size:.75rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
color:var(--dm-accent);background:#dcfce7;padding:.4rem .85rem;border-radius:6px;margin-bottom:1.2rem;
}
.dm-eyebrow-light{color:var(--dm-warm);background:rgba(245,185,66,.14)}
.dm-h1,.dm-h2{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.08}
.dm-h1{font-size:clamp(2.4rem,5vw,4rem);color:#fff}
.dm-h2{font-size:clamp(1.8rem,3vw,2.8rem);color:var(--dm-ink)}
.dm-h2-light{color:#fff}
.dm-h1-accent{
background:linear-gradient(135deg,#a7f3d0 0%,#fef3c7 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.dm-h2-accent{
background:linear-gradient(135deg,var(--dm-accent),var(--dm-accent-2));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.dm-h2-accent-light{
background:linear-gradient(135deg,#a7f3d0,#fef3c7);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.dm-btn{
display:inline-flex;align-items:center;gap:.5rem;
padding:.95rem 1.6rem;border-radius:10px;font-weight:700;font-size:.94rem;
text-decoration:none;transition:.2s transform,.2s background,.2s color,.2s box-shadow,.2s border-color;
}
.dm-btn:hover{text-decoration:none;transform:translateY(-2px)}
.dm-btn-primary{background:var(--dm-accent-2);color:#fff;box-shadow:0 12px 24px -10px rgba(34,168,61,.5)}
.dm-btn-primary:hover{color:#fff;background:var(--dm-accent);box-shadow:0 18px 30px -12px rgba(24,105,0,.6)}
.dm-btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)}
.dm-btn-ghost:hover{color:#fff;background:rgba(255,255,255,.2)}
.dm-btn-white{background:#fff;color:var(--dm-ink)}
.dm-btn-white:hover{background:#f0fdf4;color:var(--dm-accent)}
.dm-btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.dm-btn-outline:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.dm-btn-link{
background:transparent;color:#fff;padding:.5rem 0;
border-bottom:1.5px solid rgba(255,255,255,.4);border-radius:0;
}
.dm-btn-link:hover{color:var(--dm-accent-2);border-color:var(--dm-accent-2);transform:translateX(4px)}
/* ---------- 1) HERO (dark) ---------- */
.dm-hero{
position:relative;overflow:hidden;
background:linear-gradient(135deg,#0e1421 0%,#161e30 70%,#0a1018 100%);
padding:3rem 0 6rem;color:#fff;
}
.dm-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.dm-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45}
.dm-orb-1{width:420px;height:420px;background:radial-gradient(circle,rgba(34,168,61,.45),transparent 65%);top:-100px;right:-120px}
.dm-orb-2{width:480px;height:480px;background:radial-gradient(circle,rgba(245,185,66,.25),transparent 65%);bottom:-180px;left:-140px;opacity:.3}
.dm-grid-pattern{
position:absolute;inset:0;
background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:42px 42px;
mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
}
.dm-breadcrumb{position:relative;z-index:1;margin-bottom:1.4rem;font-size:.85rem}
.dm-breadcrumb a{color:rgba(255,255,255,.7)}
.dm-breadcrumb a:hover{color:var(--dm-accent-2)}
.dm-breadcrumb span{color:rgba(255,255,255,.95);font-weight:600}
.dm-breadcrumb > span:not(:last-child){color:rgba(255,255,255,.4);margin:0 .35rem}
.dm-hero-inner{position:relative;z-index:1;max-width:880px;margin:0 auto;text-align:center}
.dm-hero-inner .dm-eyebrow{margin:0 auto 1.4rem}
.dm-hero-inner .dm-h1{margin-bottom:1rem;max-width:18ch;margin-left:auto;margin-right:auto}
.dm-hero-sub{font-size:1.1rem;color:rgba(255,255,255,.85);font-weight:600;margin:0 0 1rem}
.dm-lede{font-size:1rem;line-height:1.65;color:rgba(255,255,255,.7);margin:0 auto 2rem;max-width:62ch}
.dm-hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-bottom:3rem}
.dm-hero-badges{position:relative;display:flex;justify-content:center;flex-wrap:wrap;gap:1.2rem;margin-top:2rem}
.dm-badge{
background:rgba(255,255,255,.06);backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.12);border-radius:14px;
padding:1rem 1.3rem;display:flex;flex-direction:column;gap:.2rem;text-align:left;min-width:160px;
animation:dmFloat 6s ease-in-out infinite;
}
.dm-badge-2{animation-delay:-2s}
.dm-badge-3{animation-delay:-4s}
.dm-badge strong{font-size:1.6rem;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em}
.dm-badge strong i{font-style:normal;color:var(--dm-accent-2);font-size:.65em}
.dm-badge em{font-style:normal;font-size:.78rem;color:rgba(255,255,255,.7);font-weight:600}
@keyframes dmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* ---------- 2) STATS GRID (card-based, icon + number + label, animated counters) ---------- */
.dm-stats{
background:linear-gradient(180deg,#fff 0%,var(--dm-bg) 100%);
padding:4rem 0;border-bottom:1px solid var(--dm-line);
position:relative;margin-top:-4rem;z-index:2;
}
.dm-stats-grid{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;
width:100%;max-width:1080px;margin:0 auto;
}
.dm-stats .dm-stat{
background:#fff !important;
border:1px solid var(--dm-line);border-radius:20px;
padding:2.2rem 1.4rem !important;
display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9rem;
box-shadow:0 18px 40px -24px rgba(15,23,48,.12);
transition:.25s transform,.25s box-shadow,.25s border-color;
}
.dm-stats .dm-stat:hover{
transform:translateY(-6px);
box-shadow:0 28px 56px -22px rgba(15,23,48,.22);
border-color:transparent;
}
.dm-stat-ic{
width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
color:#fff;flex-shrink:0;
box-shadow:0 12px 22px -10px rgba(15,23,48,.25);
}
.dm-stat-ic-1{background:linear-gradient(135deg,#34d399,#186900)}
.dm-stat-ic-2{background:linear-gradient(135deg,#60a5fa,#1d4ed8)}
.dm-stat-ic-3{background:linear-gradient(135deg,#fbbf24,#ea580c)}
.dm-stat-ic-4{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
/* Number + suffix on a single baseline */
.dm-stat-num{
display:inline-flex;align-items:baseline;justify-content:center;gap:.05em;
font-size:clamp(2.2rem,3.6vw,2.8rem);font-weight:800;
color:var(--dm-ink);line-height:1;letter-spacing:-.025em;
font-variant-numeric:tabular-nums;
}
.dm-stat-num .dm-count{display:inline-block}
.dm-stat-num i{
font-style:normal;color:var(--dm-accent-2);
font-size:.55em;font-weight:800;line-height:1;
}
.dm-stat-label{
margin:0;
font-size:.88rem;color:var(--dm-muted);font-weight:600;line-height:1.35;
max-width:18ch;
}
@media(max-width:980px){.dm-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.dm-stats-grid{grid-template-columns:1fr;max-width:340px}}
/* ---------- 3) DARK FOCUS BAND ---------- */
.dm-band{
background:linear-gradient(135deg,#0e1421 0%,#161e30 100%);
color:#fff;padding:5rem 0;text-align:center;position:relative;overflow:hidden;
}
.dm-band::before{
content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:600px;height:600px;border-radius:50%;
background:radial-gradient(circle,rgba(34,168,61,.18),transparent 65%);filter:blur(80px);
}
.dm-band-inner{position:relative;z-index:1;max-width:780px;margin:0 auto}
.dm-band-inner .dm-eyebrow{margin:0 auto 1.2rem}
.dm-band-inner h2{margin:0 0 1rem}
.dm-band-inner p{color:rgba(255,255,255,.78);font-size:1.05rem;line-height:1.65;margin:0 0 1.6rem;max-width:60ch;margin-left:auto;margin-right:auto}
/* ---------- Head ---------- */
.dm-head{max-width:780px;margin:0 auto 4rem;text-align:center}
.dm-head .dm-eyebrow{margin:0 auto 1.2rem}
.dm-head p{margin:1rem 0 0;color:var(--dm-muted);font-size:1rem;line-height:1.65}
/* ---------- 4) SERVICES 8-CARD GRID ---------- */
.dm-services{background:#fff}
.dm-svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.dm-svc{
background:#fff;border:1px solid var(--dm-line);border-radius:18px;
padding:1.8rem 1.5rem;transition:.25s transform,.25s box-shadow,.25s border-color;
}
.dm-svc:hover{transform:translateY(-5px);box-shadow:0 24px 48px -22px rgba(15,23,48,.18);border-color:transparent}
.dm-svc-ic{
width:56px;height:56px;border-radius:14px;
background:linear-gradient(135deg,var(--dm-accent),var(--dm-accent-2));color:#fff;
display:grid;place-items:center;margin-bottom:1.2rem;
}
.dm-svc h3{margin:0 0 .55rem;font-size:1.05rem;font-weight:800;color:var(--dm-ink);letter-spacing:-.01em;line-height:1.25}
.dm-svc p{margin:0 0 1rem;color:var(--dm-muted);font-size:.9rem;line-height:1.55}
.dm-svc-bullets{list-style:none;padding:0;margin:0;display:grid;gap:.4rem;border-top:1px solid var(--dm-line);padding-top:.85rem}
.dm-svc-bullets li{
font-size:.82rem;color:var(--dm-ink-2);font-weight:600;display:flex;align-items:center;gap:.45rem;
}
.dm-svc-bullets li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dm-accent-2);flex-shrink:0}
@media(max-width:1080px){.dm-svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dm-svc-grid{grid-template-columns:1fr}}
/* ---------- 5) PROCESS 4-STEP ---------- */
.dm-process-section{background:var(--dm-bg)}
.dm-process{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.dm-process-step{
background:#fff;border:1px solid var(--dm-line);border-radius:18px;
padding:2rem 1.6rem;position:relative;
transition:.25s transform,.25s box-shadow;
}
.dm-process-step:hover{transform:translateY(-4px);box-shadow:0 24px 48px -22px rgba(15,23,48,.18)}
.dm-step-num{
display:inline-block;font-size:1.05rem;font-weight:800;
color:var(--dm-accent);background:#dcfce7;padding:.4rem .8rem;border-radius:8px;
letter-spacing:.05em;margin-bottom:1.2rem;
}
.dm-process-step h3{font-size:1.15rem;font-weight:800;color:var(--dm-ink);margin:0 0 .6rem;letter-spacing:-.01em}
.dm-process-step p{color:var(--dm-muted);font-size:.92rem;line-height:1.6;margin:0}
@media(max-width:980px){.dm-process{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dm-process{grid-template-columns:1fr}}
/* ---------- 6) MARQUEE ---------- */
.dm-marquee{
background:var(--dm-dark);color:#fff;padding:1.4rem 0;
overflow:hidden;position:relative;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);
}
.dm-marquee-track{
display:flex;align-items:center;gap:2rem;
width:max-content;animation:dmScroll 40s linear infinite;
}
.dm-marquee-track span{
font-size:1.4rem;font-weight:800;letter-spacing:-.01em;color:#fff;white-space:nowrap;
}
.dm-marquee-track i{font-style:normal;color:var(--dm-accent-2);font-size:1rem}
@keyframes dmScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.dm-marquee:hover .dm-marquee-track{animation-play-state:paused}
/* ---------- 7) SPLIT (existing mapping/markup content) ---------- */
.dm-split-section{background:#fff}
.dm-split{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center}
.dm-split-copy h2{margin-bottom:1rem}
.dm-split-copy > p{color:var(--dm-ink-2);font-size:1rem;line-height:1.65;margin:0 0 1.6rem;max-width:50ch}
.dm-feat-list{list-style:none;padding:0;margin:0 0 1.8rem;display:grid;gap:1rem}
.dm-feat-list li{display:flex;align-items:flex-start;gap:.85rem}
.dm-feat-list li > div{display:flex;flex-direction:column;gap:.18rem;line-height:1.45}
.dm-feat-list li strong{font-weight:700;color:var(--dm-ink);font-size:1rem}
.dm-feat-list li > div span{color:var(--dm-muted);font-size:.92rem}
.dm-tick{
width:24px;height:24px;border-radius:50%;background:var(--dm-accent);color:#fff;
display:grid;place-items:center;flex-shrink:0;margin-top:.18rem;
}
/* Dashboard mock */
.dm-dashboard{
background:#fff;border:1px solid var(--dm-line);border-radius:20px;
padding:1.4rem;box-shadow:0 28px 60px -28px rgba(15,23,48,.22);
display:flex;flex-direction:column;gap:1rem;
}
.dm-dash-top{display:flex;justify-content:space-between;align-items:center;padding:.2rem .4rem .6rem;border-bottom:1px solid var(--dm-line)}
.dm-dash-title{font-weight:700;color:var(--dm-ink);font-size:.95rem}
.dm-dash-dots{display:flex;gap:.35rem}
.dm-dash-dots span{width:8px;height:8px;border-radius:50%;background:#e2e8f0}
.dm-dash-dots span:first-child{background:#fb7185}
.dm-dash-dots span:nth-child(2){background:#fbbf24}
.dm-dash-dots span:last-child{background:#22c55e}
.dm-dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.dm-dash-stat{background:var(--dm-bg);border-radius:12px;padding:.85rem .95rem;display:flex;flex-direction:column;gap:.2rem}
.dm-dash-stat .l{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dm-muted)}
.dm-dash-stat .v{font-size:1.4rem;font-weight:800;color:var(--dm-ink);line-height:1}
.dm-dash-stat .d{font-size:.74rem;color:var(--dm-muted);font-weight:600}
.dm-dash-stat .d.up{color:var(--dm-accent)}
.dm-dash-rows{display:flex;flex-direction:column;gap:.5rem}
.dm-dash-row{
display:flex;justify-content:space-between;align-items:center;
padding:.65rem .9rem;background:#fff;border:1px solid var(--dm-line);border-radius:10px;
}
.dm-dash-row .who{display:flex;align-items:center;gap:.6rem;font-size:.86rem;color:var(--dm-ink-2);font-weight:500}
.dm-dash-row .av{
width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
font-size:.66rem;font-weight:800;color:#fff;flex-shrink:0;
}
.dm-dash-row .av-blue{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.dm-dash-row .av-teal{background:linear-gradient(135deg,#14b8a6,#186900)}
.dm-dash-row .av-warm{background:linear-gradient(135deg,#fbbf24,#ef4444)}
.dm-dash-badge{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .65rem;border-radius:999px}
.dm-dash-badge.ok{background:#dcfce7;color:#15803d}
.dm-dash-badge.warn{background:#fef3c7;color:#b45309}
@media(max-width:880px){.dm-split{grid-template-columns:1fr;gap:2.5rem}}
/* ---------- 8) FAQ ---------- */
.dm-faq-section{background:var(--dm-bg)}
.dm-faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:.8rem}
.dm-faq-item{
background:#fff;border:1px solid var(--dm-line);border-radius:14px;
overflow:hidden;transition:.2s box-shadow,.2s border-color;
}
.dm-faq-item[open]{border-color:var(--dm-accent);box-shadow:0 12px 24px -12px rgba(15,23,48,.12)}
.dm-faq-item summary{
display:flex;justify-content:space-between;align-items:center;gap:1rem;
padding:1.1rem 1.4rem;font-weight:700;color:var(--dm-ink);font-size:1rem;cursor:pointer;list-style:none;
}
.dm-faq-item summary::-webkit-details-marker{display:none}
.dm-faq-ic{
width:32px;height:32px;border-radius:50%;background:#dcfce7;color:var(--dm-accent);
display:grid;place-items:center;flex-shrink:0;
transition:.25s transform,.25s background,.25s color;
}
.dm-faq-item[open] .dm-faq-ic{background:var(--dm-accent);color:#fff;transform:rotate(180deg)}
.dm-faq-item p{margin:0;padding:0 1.4rem 1.2rem;color:var(--dm-muted);font-size:.95rem;line-height:1.65}
/* ---------- 9) FINAL CTA (dark with chart card) ---------- */
.dm-cta{
background:linear-gradient(135deg,#0e1421 0%,#161e30 60%,#0a1018 100%);
color:#fff;padding:5rem 0;position:relative;overflow:hidden;
}
.dm-cta::before{
content:"";position:absolute;top:-100px;right:-100px;width:420px;height:420px;
background:radial-gradient(circle,rgba(34,168,61,.3),transparent 65%);filter:blur(70px);
}
.dm-cta-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center}
.dm-cta-copy h2{color:#fff;margin-bottom:1rem}
.dm-cta-copy p{color:rgba(255,255,255,.8);font-size:1.02rem;line-height:1.65;margin:0 0 1.8rem;max-width:50ch}
.dm-cta-actions{display:flex;flex-wrap:wrap;gap:.8rem}
.dm-cta-card{
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
border-radius:18px;padding:1.5rem;backdrop-filter:blur(8px);
}
.dm-cta-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}
.dm-cta-card-top strong{display:block;font-size:1.8rem;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em}
.dm-cta-card-top strong i{font-style:normal;color:var(--dm-accent-2);font-size:.65em}
.dm-cta-card-top em{display:block;font-style:normal;font-size:.82rem;color:rgba(255,255,255,.78);margin-top:.4rem}
.dm-pill{
font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
background:rgba(34,168,61,.2);color:#a7f3d0;padding:.3rem .65rem;border-radius:999px;
}
.dm-cta-chart{height:100px;background:rgba(255,255,255,.04);border-radius:12px;overflow:hidden;margin-bottom:.7rem}
.dm-cta-days{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;text-align:center}
.dm-cta-days span{font-size:.8rem;font-weight:700;color:rgba(255,255,255,.5);padding:.3rem 0}
.dm-cta-days span strong{color:var(--dm-accent-2);font-weight:800}
@media(max-width:880px){
.dm-cta-inner{grid-template-columns:1fr;text-align:center}
.dm-cta-actions{justify-content:center}
}
/* ============================================================
ERP PAGE - dCode data-visualization style (er-* namespace)
Light hero with chart preview, clean cards, accordion,
widget showcase with charts.
============================================================ */
:root{
--er-bg:#f5f7fb;
--er-ink:#0f1730;
--er-ink-2:#3a4361;
--er-muted:#6b7693;
--er-line:#e3e8f0;
--er-accent:#186900;
--er-accent-2:#22a83d;
--er-warm:#fb923c;
--er-cyan:#06b6d4;
--er-rose:#fb7185;
--er-purple:#a78bfa;
}
.er-section{padding:6rem 0}
@media(max-width:780px){.er-section{padding:4rem 0}}
.er-eyebrow{
display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--er-accent);background:#dcfce7;padding:.4rem .85rem;border-radius:8px;margin-bottom:1.2rem;
}
.er-h1,.er-h2{margin:0;font-weight:800;color:var(--er-ink);letter-spacing:-.02em;line-height:1.1}
.er-h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.er-h2{font-size:clamp(1.7rem,3vw,2.6rem)}
.er-h1-accent,.er-h2-accent{
background:linear-gradient(135deg,var(--er-accent),var(--er-accent-2));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.er-btn{
display:inline-flex;align-items:center;gap:.5rem;
padding:.95rem 1.6rem;border-radius:10px;font-weight:700;font-size:.94rem;
text-decoration:none;transition:.2s transform,.2s background,.2s color,.2s box-shadow;
}
.er-btn:hover{text-decoration:none;transform:translateY(-2px)}
.er-btn-primary{background:var(--er-ink);color:#fff;box-shadow:0 12px 24px -10px rgba(15,23,48,.4)}
.er-btn-primary:hover{color:#fff;background:var(--er-accent);box-shadow:0 18px 30px -12px rgba(24,105,0,.45)}
.er-btn-link{background:transparent;color:var(--er-ink);padding:.95rem .4rem;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.er-btn-link:hover{color:var(--er-accent);transform:translateX(4px)}
.er-btn-lg{padding:1.1rem 1.8rem;font-size:1rem}
/* ---------- 1) HERO ---------- */
.er-hero{
background:linear-gradient(180deg,#fff 0%,var(--er-bg) 100%);
padding:4rem 0 5rem;position:relative;overflow:hidden;
}
.er-hero::before{
content:"";position:absolute;top:-100px;right:-150px;width:480px;height:480px;
background:radial-gradient(circle,rgba(34,168,61,.12),transparent 65%);filter:blur(70px);
}
.er-hero-grid{
position:relative;z-index:1;
display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;
}
.er-hero-copy .er-h1{margin-bottom:1.4rem;max-width:18ch}
.er-lede{font-size:1.05rem;line-height:1.65;color:var(--er-ink-2);margin:0 0 1.8rem;max-width:54ch}
.er-hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-bottom:2rem}
.er-hero-meta{
list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;
border-top:1px solid var(--er-line);padding-top:1.4rem;
}
.er-hero-meta li{display:flex;flex-direction:column;gap:.3rem}
.er-hero-meta strong{
font-size:1.6rem;font-weight:800;color:var(--er-ink);line-height:1;letter-spacing:-.02em;
display:inline-flex;align-items:baseline;gap:.05em;
}
.er-hero-meta strong i{font-style:normal;color:var(--er-accent-2);font-size:.65em;font-weight:800}
.er-hero-meta em{font-style:normal;font-size:.82rem;color:var(--er-muted);font-weight:600}
/* Hero dashboard board */
.er-hero-art{position:relative;height:540px}
.er-board{
background:#fff;border:1px solid var(--er-line);border-radius:20px;
padding:1.4rem;display:flex;flex-direction:column;gap:1.2rem;
box-shadow:0 30px 60px -22px rgba(15,23,48,.18);
width:calc(100% - 30px);
}
.er-board-top{display:flex;justify-content:space-between;align-items:flex-start}
.er-board-top strong{display:block;font-size:1rem;font-weight:800;color:var(--er-ink)}
.er-board-top em{display:block;font-style:normal;font-size:.78rem;color:var(--er-muted);margin-top:.2rem}
.er-pill{font-size:.7rem;font-weight:800;padding:.3rem .6rem;border-radius:999px;letter-spacing:.05em;text-transform:uppercase;background:var(--er-bg);color:var(--er-ink-2)}
.er-pill-up{background:#dcfce7;color:#15803d}
.er-pill-warn{background:#fef3c7;color:#b45309}
.er-board-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;padding-bottom:.4rem;border-bottom:1px solid var(--er-line)}
.er-board-hero em{font-style:normal;font-size:.78rem;color:var(--er-muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.er-board-hero strong{display:block;font-size:1.8rem;font-weight:800;color:var(--er-ink);line-height:1;margin-top:.3rem}
.er-board-line{width:60%;height:60px}
.er-board-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.er-board-cell{background:var(--er-bg);border-radius:10px;padding:.75rem .85rem;display:flex;flex-direction:column;gap:.15rem}
.er-board-cell em{font-style:normal;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--er-muted)}
.er-board-cell strong{font-size:1.1rem;font-weight:800;color:var(--er-ink);line-height:1}
.er-trend{font-style:normal;font-size:.7rem;color:var(--er-muted);font-weight:600}
.er-trend.up{color:var(--er-accent-2)}
.er-board-bars{display:flex;align-items:flex-end;gap:.5rem;height:90px;padding:.5rem 0}
.er-board-bars span{flex:1;background:#dcfce7;border-radius:6px 6px 0 0;transition:.3s background}
.er-board-bars span.active{background:linear-gradient(180deg,var(--er-accent-2),var(--er-accent))}
.er-floater{
position:absolute;background:#fff;border:1px solid var(--er-line);border-radius:14px;
box-shadow:0 18px 40px -16px rgba(15,23,48,.25);
}
.er-floater-1{
top:0;right:0;padding:.9rem;
animation:erFloat 6s ease-in-out infinite;
}
.er-donut{position:relative;width:80px;height:80px}
.er-donut svg{width:100%;height:100%}
.er-donut-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.er-donut-label strong{font-size:1rem;font-weight:800;color:var(--er-ink)}
.er-donut-label strong i{font-style:normal;color:var(--er-accent-2);font-size:.7em}
.er-donut-label em{font-style:normal;font-size:.62rem;color:var(--er-muted);font-weight:700;margin-top:.15rem}
.er-floater-2{
bottom:30px;left:-10px;padding:.7rem 1rem;
display:flex;align-items:center;gap:.7rem;
animation:erFloat 7s ease-in-out infinite -3s;
}
.er-floater-ic{width:32px;height:32px;border-radius:10px;background:var(--er-accent);color:#fff;display:grid;place-items:center;flex-shrink:0}
.er-floater-2 strong{display:block;font-size:.86rem;font-weight:800;color:var(--er-ink)}
.er-floater-2 em{display:block;font-style:normal;font-size:.7rem;color:var(--er-muted)}
@keyframes erFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:980px){
.er-hero-grid{grid-template-columns:1fr;gap:3rem}
.er-hero-art{height:auto;min-height:480px;max-width:540px;margin:0 auto}
}
/* ---------- Head ---------- */
.er-head{max-width:760px;margin:0 auto 3.5rem;text-align:center}
.er-head p{margin:1.2rem 0 0;color:var(--er-muted);font-size:1rem;line-height:1.65}
/* ---------- 2) ASPECTS / 4-CARD ---------- */
.er-aspects{background:#fff;border-top:1px solid var(--er-line)}
.er-aspect-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;max-width:980px;margin:0 auto}
.er-aspect{
background:var(--er-bg);border:1px solid var(--er-line);border-radius:18px;
padding:2rem 1.8rem;display:flex;flex-direction:column;gap:.9rem;
transition:.25s transform,.25s box-shadow,.25s background;
}
.er-aspect:hover{transform:translateY(-4px);background:#fff;box-shadow:0 24px 48px -22px rgba(15,23,48,.18)}
.er-aspect-ic{
width:54px;height:54px;border-radius:14px;display:grid;place-items:center;color:#fff;flex-shrink:0;
}
.er-aspect-ic-1{background:linear-gradient(135deg,#34d399,#186900)}
.er-aspect-ic-2{background:linear-gradient(135deg,#fb923c,#ea580c)}
.er-aspect-ic-3{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.er-aspect-ic-4{background:linear-gradient(135deg,#60a5fa,#1d4ed8)}
.er-aspect h3{margin:0;font-size:1.15rem;font-weight:800;color:var(--er-ink)}
.er-aspect p{margin:0;color:var(--er-muted);font-size:.92rem;line-height:1.6}
@media(max-width:780px){.er-aspect-grid{grid-template-columns:1fr}}
/* ---------- 3) MODULES 6-CARD GRID ---------- */
.er-modules{background:var(--er-bg)}
.er-mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.er-mod{
background:#fff;border:1px solid var(--er-line);border-radius:18px;
padding:1.8rem 1.5rem;display:flex;flex-direction:column;gap:.85rem;
transition:.25s transform,.25s box-shadow,.25s border-color;position:relative;
}
.er-mod:hover{transform:translateY(-5px);box-shadow:0 24px 48px -22px rgba(15,23,48,.18);border-color:transparent}
.er-mod-ic{
width:48px;height:48px;border-radius:12px;display:grid;place-items:center;color:#fff;flex-shrink:0;
}
.er-mod-ic-finance{background:linear-gradient(135deg,#34d399,#186900)}
.er-mod-ic-hr{background:linear-gradient(135deg,#fb7185,#be185d)}
.er-mod-ic-ops{background:linear-gradient(135deg,#60a5fa,#1d4ed8)}
.er-mod-ic-help{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.er-mod-ic-mis{background:linear-gradient(135deg,#fbbf24,#ea580c)}
.er-mod-ic-crm{background:linear-gradient(135deg,#06b6d4,#0e7490)}
.er-mod h3{margin:0;font-size:1.05rem;font-weight:800;color:var(--er-ink);letter-spacing:-.01em}
.er-mod p{margin:0;color:var(--er-muted);font-size:.9rem;line-height:1.6;flex:1}
.er-mod-tag{
display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
color:var(--er-accent);background:#dcfce7;padding:.32rem .65rem;border-radius:6px;align-self:flex-start;
}
@media(max-width:980px){.er-mod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.er-mod-grid{grid-template-columns:1fr}}
/* ---------- 4) WHAT SETS US APART ---------- */
.er-apart-section{background:#fff}
.er-apart-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.er-apart-copy h2{margin-bottom:1rem}
.er-apart-copy > p{color:var(--er-ink-2);font-size:1rem;line-height:1.65;margin:0 0 1.5rem;max-width:50ch}
.er-acc{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.8rem}
.er-acc-item{
background:var(--er-bg);border:1px solid var(--er-line);border-radius:12px;
overflow:hidden;transition:.2s border-color,.2s background;
}
.er-acc-item[open]{border-color:var(--er-accent);background:#fff;box-shadow:0 12px 24px -12px rgba(15,23,48,.1)}
.er-acc-item summary{
padding:1rem 1.2rem;font-weight:700;color:var(--er-ink);font-size:.96rem;cursor:pointer;list-style:none;
display:flex;justify-content:space-between;align-items:center;gap:.6rem;
}
.er-acc-item summary::-webkit-details-marker{display:none}
.er-acc-ic{
width:26px;height:26px;border-radius:50%;background:#dcfce7;color:var(--er-accent);
display:grid;place-items:center;flex-shrink:0;
transition:.25s transform,.25s background,.25s color;
}
.er-acc-item[open] .er-acc-ic{background:var(--er-accent);color:#fff;transform:rotate(180deg)}
.er-acc-item p{margin:0;padding:0 1.2rem 1rem;color:var(--er-muted);font-size:.9rem;line-height:1.6}
@media(max-width:880px){.er-apart-grid{grid-template-columns:1fr;gap:2.5rem}}
/* ---------- 5) DATA WIDGETS ---------- */
.er-widgets-section{background:var(--er-bg)}
.er-widget-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.er-widget{
background:#fff;border:1px solid var(--er-line);border-radius:18px;
padding:1.4rem;display:flex;flex-direction:column;gap:.8rem;
transition:.25s transform,.25s box-shadow;
}
.er-widget:hover{transform:translateY(-4px);box-shadow:0 24px 48px -22px rgba(15,23,48,.18)}
.er-widget-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.er-widget-head em{font-style:normal;font-size:.82rem;font-weight:700;color:var(--er-ink-2)}
.er-widget-num{font-size:1.7rem;font-weight:800;color:var(--er-ink);line-height:1;letter-spacing:-.02em}
.er-widget-chart{width:100%;height:60px}
/* widget #2 - donut + legend */
.er-widget .er-donut{margin:.4rem auto;width:90px;height:90px}
.er-legend{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.er-legend li{display:flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;color:var(--er-ink-2)}
.er-legend li em{margin-left:auto;font-style:normal;font-weight:800;color:var(--er-ink)}
.er-legend .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.er-legend .dot-green{background:var(--er-accent-2)}
.er-legend .dot-orange{background:var(--er-warm)}
.er-legend .dot-blue{background:#3b82f6}
/* widget #3 - aging bars */
.er-bars{display:flex;flex-direction:column;gap:.55rem}
.er-bar{position:relative;background:var(--er-bg);border-radius:8px;padding:.5rem .7rem;overflow:hidden;display:flex;justify-content:space-between;align-items:center;font-size:.78rem}
.er-bar-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#dcfce7,#a7f3d0);border-radius:8px;z-index:0}
.er-bar-fill.warn{background:linear-gradient(90deg,#fef3c7,#fde68a)}
.er-bar b,.er-bar i{position:relative;z-index:1;font-weight:700;color:var(--er-ink)}
.er-bar i{font-style:normal;font-weight:800;color:var(--er-accent)}
.er-bar i.warn,.er-bar:has(.warn) i{color:#b45309}
/* widget #4 - rank list */
.er-rank{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.er-rank li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;padding:.5rem .7rem;background:var(--er-bg);border-radius:8px;font-size:.86rem}
.er-rank li b{
width:24px;height:24px;border-radius:50%;background:var(--er-ink);color:#fff;
display:grid;place-items:center;font-weight:800;font-size:.72rem;
}
.er-rank li:first-child b{background:var(--er-accent-2)}
.er-rank li span{font-weight:700;color:var(--er-ink)}
.er-rank li i{font-style:normal;font-weight:800;color:var(--er-accent)}
@media(max-width:1080px){.er-widget-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.er-widget-grid{grid-template-columns:1fr}}
/* ---------- 6) FAQ ---------- */
.er-faq-section{background:#fff}
.er-faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:.8rem}
.er-faq-item{
background:var(--er-bg);border:1px solid var(--er-line);border-radius:14px;
overflow:hidden;transition:.2s box-shadow,.2s border-color;
}
.er-faq-item[open]{border-color:var(--er-accent);background:#fff;box-shadow:0 12px 24px -12px rgba(15,23,48,.12)}
.er-faq-item summary{
display:flex;justify-content:space-between;align-items:center;gap:1rem;
padding:1.1rem 1.4rem;font-weight:700;color:var(--er-ink);font-size:1rem;cursor:pointer;list-style:none;
}
.er-faq-item summary::-webkit-details-marker{display:none}
.er-faq-ic{
width:32px;height:32px;border-radius:50%;background:#dcfce7;color:var(--er-accent);
display:grid;place-items:center;flex-shrink:0;
transition:.25s transform,.25s background,.25s color;
}
.er-faq-item[open] .er-faq-ic{background:var(--er-accent);color:#fff;transform:rotate(180deg)}
.er-faq-item p{margin:0;padding:0 1.4rem 1.2rem;color:var(--er-muted);font-size:.95rem;line-height:1.65}
/* ---------- 7) FINAL CTA BAND ---------- */
.er-cta{background:var(--er-bg);padding:5rem 0;border-top:1px solid var(--er-line)}
.er-cta-inner{
background:#fff;border:1px solid var(--er-line);border-radius:24px;padding:3rem;
display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:center;
box-shadow:0 28px 60px -28px rgba(15,23,48,.18);
}
.er-cta-inner h2{margin-bottom:.8rem}
.er-cta-inner p{color:var(--er-muted);font-size:1rem;line-height:1.65;margin:0;max-width:48ch}
.er-cta-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:flex-end;align-items:center}
@media(max-width:880px){
.er-cta-inner{grid-template-columns:1fr;text-align:center;padding:2rem}
.er-cta-actions{justify-content:center}
}
/* ============================================================
FAQ PAGE - simple clean layout (fq-* namespace)
============================================================ */
.fq-section{padding:3rem 0 5rem}
@media(max-width:780px){.fq-section{padding:2rem 0 3.5rem}}
/* ---------- HERO ---------- */
.fq-hero{padding:3.5rem 0 2.5rem;text-align:center;background:#fff}
.fq-hero-inner{max-width:680px;margin:0 auto}
.fq-eyebrow{
display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:#186900;background:#dcfce7;padding:.35rem .8rem;border-radius:999px;margin-bottom:1rem;
}
.fq-h1{
margin:0 0 1rem;font-weight:800;color:#0f1730;
font-size:clamp(2rem,4vw,2.8rem);line-height:1.15;letter-spacing:-.02em;
}
.fq-lede{
margin:0 auto;color:#6b7693;font-size:1rem;line-height:1.65;max-width:54ch;
}
.fq-lede a{color:#186900;font-weight:600}
/* ---------- ACCORDION ---------- */
.fq-faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:.6rem}
.fq-faq-item{
background:#fff;border:1px solid #e2e8f0;border-radius:12px;
overflow:hidden;transition:.2s border-color,.2s box-shadow;
}
.fq-faq-item[open]{
border-color:#186900;
box-shadow:0 10px 22px -12px rgba(15,23,48,.1);
}
.fq-faq-item summary{
display:flex;justify-content:space-between;align-items:center;gap:1rem;
padding:1.05rem 1.3rem;cursor:pointer;list-style:none;
}
.fq-faq-item summary::-webkit-details-marker{display:none}
.fq-faq-q{font-weight:600;color:#0f1730;font-size:1rem;line-height:1.4}
.fq-faq-ic{
width:28px;height:28px;border-radius:50%;background:#f5f7fb;color:#3a4361;
display:grid;place-items:center;flex-shrink:0;
transition:.25s transform,.25s background,.25s color;
}
.fq-faq-item[open] .fq-faq-ic{background:#186900;color:#fff;transform:rotate(180deg)}
.fq-faq-item p{margin:0;padding:0 1.3rem 1.1rem;color:#6b7693;font-size:.94rem;line-height:1.65}
/* ---------- HERO STATS ---------- */
.fq-hero-stats{
display:flex;justify-content:center;flex-wrap:wrap;gap:1.5rem 2.5rem;
margin-top:2rem;padding-top:1.8rem;border-top:1px solid #e2e8f0;max-width:520px;margin-left:auto;margin-right:auto;
}
.fq-hero-stats > div{display:flex;flex-direction:column;align-items:center;gap:.25rem}
.fq-hero-stats strong{font-size:1.6rem;font-weight:800;color:#0f1730;line-height:1;letter-spacing:-.02em}
.fq-hero-stats span{font-size:.8rem;color:#6b7693;font-weight:600}
/* ---------- SECTION HEADS ---------- */
.fq-section-head{max-width:640px;margin:0 auto 2.2rem;text-align:center}
.fq-h2{margin:0 0 .6rem;font-weight:800;color:#0f1730;font-size:clamp(1.5rem,2.4vw,1.9rem);letter-spacing:-.02em;line-height:1.2}
.fq-section-head p{margin:0;color:#6b7693;font-size:.96rem;line-height:1.6}
/* ---------- TOPICS ---------- */
.fq-topics-section{background:#f7f9fc;padding:4rem 0}
.fq-topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:880px;margin:0 auto}
.fq-topic{
background:#fff;border:1px solid #e2e8f0;border-radius:12px;
padding:1.1rem 1.3rem;display:flex;flex-direction:column;gap:.25rem;
position:relative;transition:.2s border-color,.2s transform;
}
.fq-topic:hover{transform:translateY(-2px);border-color:#186900}
.fq-dot{
position:absolute;top:1.2rem;right:1.2rem;
width:10px;height:10px;border-radius:50%;
}
.fq-dot-green{background:#22a83d}
.fq-dot-blue{background:#3b82f6}
.fq-dot-purple{background:#a78bfa}
.fq-dot-amber{background:#fbbf24}
.fq-dot-cyan{background:#06b6d4}
.fq-dot-rose{background:#fb7185}
.fq-topic strong{font-weight:700;color:#0f1730;font-size:.96rem}
.fq-topic em{font-style:normal;color:#6b7693;font-size:.85rem;line-height:1.45}
@media(max-width:780px){.fq-topic-grid{grid-template-columns:1fr}}
/* ---------- HELP LINKS ---------- */
.fq-help-section{background:#f7f9fc;padding:4rem 0}
.fq-help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:980px;margin:0 auto}
.fq-help{
display:flex;flex-direction:column;gap:.5rem;
background:#fff;border:1px solid #e2e8f0;border-radius:12px;
padding:1.4rem 1.5rem;text-decoration:none;color:inherit;
transition:.2s transform,.2s border-color,.2s box-shadow;
}
.fq-help:hover{
transform:translateY(-3px);border-color:#186900;
text-decoration:none;color:inherit;
box-shadow:0 14px 28px -16px rgba(15,23,48,.12);
}
.fq-help strong{font-weight:800;color:#0f1730;font-size:1rem}
.fq-help em{font-style:normal;color:#6b7693;font-size:.9rem;line-height:1.55;flex:1}
.fq-help-go{font-weight:700;color:#186900;font-size:.86rem;margin-top:.4rem}
@media(max-width:780px){.fq-help-grid{grid-template-columns:1fr}}
/* ---------- BOTTOM CTA BAND ---------- */
.fq-cta-band{padding:3.5rem 0;background:#fff;border-top:1px solid #e2e8f0}
.fq-cta-inner{
display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:center;
max-width:980px;margin:0 auto;
}
.fq-cta-inner h2{margin:0 0 .5rem}
.fq-cta-inner p{margin:0;color:#6b7693;font-size:.96rem;line-height:1.6;max-width:48ch}
.fq-cta-actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end}
.fq-btn{
display:inline-flex;align-items:center;gap:.45rem;
padding:.75rem 1.3rem;border-radius:10px;font-weight:700;font-size:.92rem;
text-decoration:none;transition:.2s transform,.2s background,.2s color,.2s border-color;
}
.fq-btn:hover{text-decoration:none;transform:translateY(-2px)}
.fq-btn-primary{background:#186900;color:#fff}
.fq-btn-primary:hover{background:#0f4a00;color:#fff}
.fq-btn-ghost{background:#fff;color:#0f1730;border:1px solid #e2e8f0}
.fq-btn-ghost:hover{border-color:#186900;color:#186900}
@media(max-width:780px){
.fq-cta-inner{grid-template-columns:1fr;text-align:center}
.fq-cta-actions{justify-content:center}
}
/* ============================================================
OUR CLIENTS PAGE - clean portfolio grid (cl-* namespace)
============================================================ */
.cl-section{padding:4.5rem 0}
@media(max-width:780px){.cl-section{padding:3rem 0}}
.cl-eyebrow,.cl-tag{
display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:#186900;background:#dcfce7;padding:.4rem .85rem;border-radius:6px;margin-bottom:1rem;
}
.cl-h1,.cl-h2{margin:0;font-weight:800;color:#0f1730;letter-spacing:-.02em;line-height:1.12}
.cl-h1{font-size:clamp(2.2rem,4.4vw,3.2rem)}
.cl-h2{font-size:clamp(1.6rem,2.8vw,2.2rem)}
.cl-h2-light{color:#fff}
.cl-h1 em,.cl-h2 em{
font-style:italic;font-weight:700;
background:linear-gradient(135deg,#186900,#22a83d);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.cl-h2-light em{
background:linear-gradient(135deg,#a7f3d0,#fef3c7);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.cl-section-head{max-width:740px;margin:0 auto 3rem;text-align:center}
.cl-section-head .cl-tag{margin:0 auto 1rem}
.cl-section-head h2{margin-bottom:.7rem}
.cl-section-head p{margin:0;color:#6b7693;font-size:1rem;line-height:1.65}
/* ---------- HERO ---------- */
.cl-hero{
background:linear-gradient(180deg,#f0fdf4 0%,#fff 100%);
padding:4rem 0 3.5rem;text-align:center;
}
.cl-hero-inner{max-width:780px;margin:0 auto}
.cl-hero-inner .cl-h1{margin-bottom:1rem}
.cl-lede{font-size:1.04rem;line-height:1.65;color:#3a4361;margin:0 auto 2rem;max-width:62ch}
.cl-lede strong{color:#0f1730}
.cl-hero-stats{
display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
max-width:680px;margin:0 auto;padding:1.5rem 0;
border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;
}
.cl-hero-stats > div{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.cl-hero-stats strong{
font-size:1.6rem;font-weight:800;color:#0f1730;line-height:1;letter-spacing:-.02em;
display:inline-flex;align-items:baseline;gap:.05em;
}
.cl-hero-stats strong i{font-style:normal;color:#22a83d;font-size:.65em;font-weight:800}
.cl-hero-stats em{font-style:normal;font-size:.78rem;color:#6b7693;font-weight:600}
@media(max-width:560px){.cl-hero-stats{grid-template-columns:repeat(2,1fr);gap:1.4rem}}
/* ---------- LIVE PORTFOLIO GRID ---------- */
.cl-portfolio-section{background:#fff}
.cl-portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.cl-card{
background:#fff;border:1px solid #e2e8f0;border-radius:16px;
padding:1.4rem;text-decoration:none;color:inherit;
display:flex;flex-direction:column;gap:.85rem;
transition:.25s transform,.25s box-shadow,.25s border-color;
}
.cl-card:hover{
transform:translateY(-5px);
box-shadow:0 24px 48px -22px rgba(15,23,48,.18);
border-color:#186900;text-decoration:none;color:inherit;
}
.cl-card-head{display:flex;align-items:center;gap:.85rem}
.cl-card-ic{
width:40px;height:40px;border-radius:10px;
background:#f7f9fc;border:1px solid #e2e8f0;padding:6px;flex-shrink:0;
}
.cl-card-meta{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.cl-card-meta strong{font-weight:800;color:#0f1730;font-size:1rem}
.cl-card-meta em{font-style:normal;font-size:.78rem;color:#6b7693;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-card-arrow{
width:30px;height:30px;border-radius:50%;background:#f7f9fc;color:#3a4361;
display:grid;place-items:center;flex-shrink:0;
transition:.2s background,.2s color,.2s transform;
}
.cl-card:hover .cl-card-arrow{background:#186900;color:#fff;transform:rotate(45deg)}
.cl-card-desc{margin:0;color:#3a4361;font-size:.92rem;line-height:1.55;flex:1}
.cl-card-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.cl-card-tag{
font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
background:#dcfce7;color:#15803d;padding:.32rem .65rem;border-radius:999px;
}
.cl-card-tag-muted{background:#f1f5f9;color:#3a4361}
@media(max-width:980px){.cl-portfolio-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cl-portfolio-grid{grid-template-columns:1fr}}
/* ---------- TRUSTED BRANDS STRIP ---------- */
.cl-trust-section{background:#f7f9fc}
.cl-brand-grid{
list-style:none;padding:0;margin:0;
display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;max-width:880px;margin:0 auto;
}
.cl-brand{
background:#fff;border:1px solid #e2e8f0;
padding:.7rem 1.3rem;border-radius:10px;
font-weight:800;color:#3a4361;font-size:1rem;letter-spacing:-.01em;
font-family:'Inter',sans-serif;
transition:.2s background,.2s color,.2s border-color,.2s transform;
}
.cl-brand:hover{background:#0f1730;color:#fff;border-color:#0f1730;transform:translateY(-2px)}
/* ---------- BY INDUSTRY ---------- */
.cl-industry-section{background:#fff}
.cl-industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.cl-industry{
background:#f7f9fc;border:1px solid #e2e8f0;border-radius:14px;
padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.4rem;
transition:.2s transform,.2s background,.2s border-color;
}
.cl-industry:hover{transform:translateY(-3px);background:#fff;border-color:#186900}
.cl-industry-num{
font-size:1rem;font-weight:800;color:#186900;letter-spacing:.05em;margin-bottom:.4rem;
}
.cl-industry-name{font-size:1.05rem;font-weight:800;color:#0f1730;letter-spacing:-.01em}
.cl-industry-count{font-size:.86rem;font-weight:700;color:#22a83d}
.cl-industry-desc{margin:.3rem 0 0;color:#6b7693;font-size:.9rem;line-height:1.55}
@media(max-width:780px){.cl-industry-grid{grid-template-columns:1fr}}
/* ---------- SUCCESS HIGHLIGHTS ---------- */
.cl-success-section{background:#f7f9fc}
.cl-success-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.cl-success{
background:#fff;border:1px solid #e2e8f0;border-radius:16px;
padding:1.8rem 1.6rem;
}
.cl-success-num{
display:inline-flex;align-items:center;justify-content:center;
width:48px;height:48px;border-radius:12px;
background:linear-gradient(135deg,#186900,#22a83d);color:#fff;
font-size:1rem;font-weight:800;letter-spacing:.05em;margin-bottom:1rem;
}
.cl-success h3{margin:0 0 .55rem;font-size:1.1rem;font-weight:800;color:#0f1730;letter-spacing:-.01em}
.cl-success p{margin:0;color:#6b7693;font-size:.94rem;line-height:1.6}
@media(max-width:780px){.cl-success-grid{grid-template-columns:1fr}}
/* ---------- TESTIMONIAL ---------- */
.cl-testi-section{background:#fff}
.cl-testi-inner{
max-width:760px;margin:0 auto;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:1rem;
}
.cl-testi-quote{
font-family:Georgia,serif;font-size:4rem;line-height:.6;color:#22a83d;height:1.4rem;
}
.cl-testi-inner blockquote{
margin:0;font-size:1.15rem;line-height:1.55;color:#0f1730;font-weight:500;
}
.cl-testi-inner cite{font-style:normal;display:flex;flex-direction:column;gap:.15rem;color:#6b7693;font-size:.92rem;font-weight:600}
.cl-testi-inner cite strong{color:#0f1730}
.cl-testi-inner cite em{font-style:normal;font-size:.84rem}
/* ---------- CTA ---------- */
.cl-cta{
background:linear-gradient(135deg,#0b3a04 0%,#186900 60%,#0f2a05 100%);
color:#fff;padding:4rem 0;position:relative;overflow:hidden;
}
.cl-cta::before{
content:"";position:absolute;top:-100px;right:-100px;width:380px;height:380px;
background:radial-gradient(circle,rgba(245,185,66,.25),transparent 65%);filter:blur(70px);
}
.cl-cta-inner{
position:relative;z-index:1;
display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:center;
}
.cl-cta-inner h2{margin:0 0 .5rem}
.cl-cta-inner p{margin:0;color:rgba(255,255,255,.82);font-size:1rem;line-height:1.6;max-width:48ch}
.cl-cta-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:flex-end}
.cl-btn{
display:inline-flex;align-items:center;gap:.45rem;
padding:.85rem 1.5rem;border-radius:10px;font-weight:700;font-size:.92rem;
text-decoration:none;transition:.2s transform,.2s background,.2s color,.2s border-color;
}
.cl-btn:hover{text-decoration:none;transform:translateY(-2px)}
.cl-btn-white{background:#fff;color:#0f1730}
.cl-btn-white:hover{background:#f0fdf4;color:#186900}
.cl-btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.cl-btn-outline:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
@media(max-width:780px){
.cl-cta-inner{grid-template-columns:1fr;text-align:center}
.cl-cta-actions{justify-content:center}
}
/* ============================================================
ABOUT PAGE - long-form clean layout (ab-* namespace)
============================================================ */
.ab-section{padding:5rem 0}
@media(max-width:780px){.ab-section{padding:3.5rem 0}}
.ab-eyebrow,.ab-tag{
display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:#186900;background:#dcfce7;padding:.4rem .85rem;border-radius:6px;margin-bottom:1.1rem;
}
.ab-h1,.ab-h2{margin:0;font-weight:800;color:#0f1730;letter-spacing:-.02em;line-height:1.12}
.ab-h1{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.ab-h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.ab-h2-light{color:#fff}
.ab-h1 em,.ab-h2 em{
font-style:italic;font-weight:700;
background:linear-gradient(135deg,#186900,#22a83d);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ab-h2-light em{
background:linear-gradient(135deg,#a7f3d0,#fef3c7);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ab-section-head{max-width:760px;margin:0 auto 3rem;text-align:center}
.ab-section-head .ab-tag{margin:0 auto 1rem}
.ab-section-head h2{margin-bottom:.7rem}
.ab-section-head p{margin:0;color:#6b7693;font-size:1rem;line-height:1.65}
.ab-narrative{max-width:820px;margin:0 auto}
.ab-narrative h2{margin-bottom:1.1rem}
.ab-narrative p{margin:0 0 1.1rem;color:#3a4361;font-size:1.02rem;line-height:1.75}
.ab-narrative p:last-child{margin-bottom:0}
.ab-narrative p strong{color:#0f1730;font-weight:700}
/* ---------- HERO ---------- */
.ab-hero{
background:linear-gradient(180deg,#f0fdf4 0%,#fff 100%);
padding:4.5rem 0 3.5rem;text-align:center;
}
.ab-hero-inner{max-width:820px;margin:0 auto}
.ab-hero-inner .ab-h1{margin-bottom:1.1rem}
.ab-lede{font-size:1.06rem;line-height:1.7;color:#3a4361;margin:0 auto 2.2rem;max-width:64ch}
.ab-hero-stats{
display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
max-width:680px;margin:0 auto;padding:1.5rem 0;
border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;
}
.ab-hero-stats > div{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.ab-hero-stats strong{
font-size:1.6rem;font-weight:800;color:#0f1730;line-height:1;letter-spacing:-.02em;
display:inline-flex;align-items:baseline;gap:.05em;
}
.ab-hero-stats strong i{font-style:normal;color:#22a83d;font-size:.65em;font-weight:800}
.ab-hero-stats em{font-style:normal;font-size:.78rem;color:#6b7693;font-weight:600}
@media(max-width:560px){.ab-hero-stats{grid-template-columns:repeat(2,1fr);gap:1.4rem}}
/* ---------- INTRO ---------- */
.ab-intro-section{background:#fff}
/* ---------- VISION + MISSION ---------- */
.ab-vm-section{background:#f7f9fc}
.ab-vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;max-width:1080px;margin:0 auto}
.ab-vm{
background:#fff;border:1px solid #e2e8f0;border-radius:18px;
padding:2.2rem 2rem;display:flex;flex-direction:column;gap:.8rem;
transition:.25s transform,.25s box-shadow;
}
.ab-vm:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(15,23,48,.18)}
.ab-vm-ic{
width:60px;height:60px;border-radius:16px;display:grid;place-items:center;color:#fff;margin-bottom:.4rem;
}
.ab-vm-ic-vision{background:linear-gradient(135deg,#34d399,#186900)}
.ab-vm-ic-mission{background:linear-gradient(135deg,#fb923c,#ea580c)}
.ab-vm h3{margin:0;font-size:1.3rem;font-weight:800;color:#0f1730;letter-spacing:-.01em}
.ab-vm p{margin:0;color:#3a4361;font-size:.98rem;line-height:1.7}
.ab-vm p strong{color:#0f1730;font-weight:700}
@media(max-width:780px){.ab-vm-grid{grid-template-columns:1fr}}
/* ---------- WHAT WE DO ---------- */
.ab-do-section{background:#fff}
.ab-do-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.ab-do{
background:#f7f9fc;border:1px solid #e2e8f0;border-radius:14px;
padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;
transition:.2s transform,.2s background,.2s border-color;
}
.ab-do:hover{transform:translateY(-4px);background:#fff;border-color:#186900;box-shadow:0 18px 36px -18px rgba(15,23,48,.15)}
.ab-do strong{font-weight:800;color:#0f1730;font-size:1rem}
.ab-do em{font-style:normal;color:#6b7693;font-size:.88rem;line-height:1.55}
@media(max-width:1080px){.ab-do-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ab-do-grid{grid-template-columns:1fr}}
/* ---------- TRUST + DELIGHTFUL ---------- */
.ab-trust-section{background:#f7f9fc}
/* ---------- WHY ---------- */
.ab-why-section{background:#fff}
.ab-why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;max-width:1080px;margin:0 auto}
.ab-why{
background:#f7f9fc;border:1px solid #e2e8f0;border-radius:16px;
padding:1.8rem 1.8rem;display:flex;flex-direction:column;gap:.6rem;
transition:.25s transform,.25s background,.25s border-color;
}
.ab-why:hover{transform:translateY(-4px);background:#fff;border-color:#186900}
.ab-why-num{
display:inline-flex;align-items:center;justify-content:center;
width:46px;height:46px;border-radius:12px;
background:linear-gradient(135deg,#186900,#22a83d);color:#fff;
font-weight:800;font-size:.95rem;letter-spacing:.05em;margin-bottom:.5rem;
}
.ab-why h3{margin:0;font-size:1.15rem;font-weight:800;color:#0f1730;letter-spacing:-.01em}
.ab-why p{margin:0;color:#3a4361;font-size:.96rem;line-height:1.65}
@media(max-width:780px){.ab-why-grid{grid-template-columns:1fr}}
/* ---------- TECH ---------- */
.ab-tech-section{background:#f7f9fc}
/* ---------- METHODOLOGY (4-step) ---------- */
.ab-method-section{background:#fff}
.ab-method-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;max-width:1080px;margin:0 auto}
.ab-method{
background:#f7f9fc;border:1px solid #e2e8f0;border-radius:16px;
padding:1.8rem 1.8rem;display:flex;flex-direction:column;gap:.6rem;
transition:.25s transform,.25s background,.25s border-color;
}
.ab-method:hover{transform:translateY(-4px);background:#fff;border-color:#186900}
.ab-method-num{
display:inline-flex;align-items:center;justify-content:center;
width:46px;height:46px;border-radius:12px;
background:linear-gradient(135deg,#186900,#22a83d);color:#fff;
font-weight:800;font-size:.95rem;letter-spacing:.05em;margin-bottom:.5rem;
}
.ab-method h3{margin:0;font-size:1.15rem;font-weight:800;color:#0f1730;letter-spacing:-.01em}
.ab-method p{margin:0;color:#3a4361;font-size:.96rem;line-height:1.65}
@media(max-width:780px){.ab-method-grid{grid-template-columns:1fr}}
/* ---------- CULTURE / RESPONSIBILITY (long-form, alternating bg) ---------- */
.ab-culture-section{background:#fff}
.ab-responsibility-section{background:#f7f9fc}
/* ---------- BRANDS ECOSYSTEM ---------- */
.ab-brands-section{background:#fff}
.ab-brand-grid{
list-style:none;padding:0;margin:1.5rem 0 0;
display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
}
.ab-brand-grid a{
display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.55rem 1rem;
background:#f7f9fc;border:1px solid #e2e8f0;border-radius:12px;
padding:1.1rem 1.3rem;text-decoration:none;color:inherit;
transition:.2s transform,.2s background,.2s border-color;
}
.ab-brand-grid a:hover{transform:translateY(-3px);background:#fff;border-color:#186900;text-decoration:none;color:inherit}
.ab-brand-grid img{grid-row:1 / span 2;width:32px;height:32px;background:#fff;padding:5px;border-radius:8px;border:1px solid #e2e8f0}
.ab-brand-grid strong{font-weight:800;color:#0f1730;font-size:.95rem;align-self:end;line-height:1.2}
.ab-brand-grid em{font-style:normal;color:#6b7693;font-size:.82rem;align-self:start;line-height:1.4}
@media(max-width:780px){.ab-brand-grid{grid-template-columns:1fr}}
/* ---------- INDUSTRIES ---------- */
.ab-ind-section{background:#fff}
.ab-ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.ab-ind{
background:#f7f9fc;border:1px solid #e2e8f0;border-radius:12px;
padding:1.4rem 1.4rem;display:flex;flex-direction:column;gap:.4rem;
transition:.2s transform,.2s background,.2s border-color;
}
.ab-ind:hover{transform:translateY(-3px);background:#fff;border-color:#186900}
.ab-ind strong{font-weight:800;color:#0f1730;font-size:1rem}
.ab-ind em{font-style:normal;color:#6b7693;font-size:.88rem;line-height:1.55}
@media(max-width:780px){.ab-ind-grid{grid-template-columns:1fr}}
/* ---------- OFFICES ---------- */
.ab-offices-section{background:#f7f9fc}
.ab-office-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:1080px;margin:0 auto}
.ab-office{
background:#fff;border:1px solid #e2e8f0;border-radius:16px;
padding:2rem 1.8rem;
}
.ab-office-flag{font-size:2rem;line-height:1;margin-bottom:.7rem}
.ab-office h3{margin:0 0 .8rem;font-size:1.4rem;font-weight:800;color:#0f1730;letter-spacing:-.01em}
.ab-office-addr{
margin:0 0 1rem;padding:.7rem 1rem;background:#f7f9fc;border-radius:8px;
color:#0f1730;font-size:.9rem;font-weight:600;line-height:1.45;
}
.ab-office p{margin:0;color:#3a4361;font-size:.94rem;line-height:1.65}
@media(max-width:780px){.ab-office-grid{grid-template-columns:1fr}}
/* ---------- CERTIFICATIONS ---------- */
.ab-certs-section{background:#fff}
.ab-cert-grid{
list-style:none;padding:0;margin:0;
display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:980px;margin:0 auto;
}
.ab-cert-grid li{
display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.4rem 1rem;
background:#f7f9fc;border:1px solid #e2e8f0;border-radius:12px;
padding:1.1rem 1.4rem;
transition:.2s background,.2s border-color;
}
.ab-cert-grid li:hover{background:#fff;border-color:#186900}
.ab-cert-ic{
grid-row:1 / span 2;width:40px;height:40px;border-radius:10px;
background:linear-gradient(135deg,#186900,#22a83d);color:#fff;
display:grid;place-items:center;flex-shrink:0;
}
.ab-cert-grid li strong{font-weight:800;color:#0f1730;font-size:.96rem;align-self:end;line-height:1.2}
.ab-cert-grid li em{font-style:normal;color:#6b7693;font-size:.85rem;align-self:start;line-height:1.45}
@media(max-width:780px){.ab-cert-grid{grid-template-columns:1fr}}
/* ---------- ROADMAP ---------- */
.ab-roadmap-section{background:#f7f9fc}
/* ---------- CTA ---------- */
.ab-cta{
background:linear-gradient(135deg,#0b3a04 0%,#186900 60%,#0f2a05 100%);
color:#fff;padding:4rem 0;position:relative;overflow:hidden;
}
.ab-cta::before{
content:"";position:absolute;top:-100px;right:-100px;width:380px;height:380px;
background:radial-gradient(circle,rgba(245,185,66,.25),transparent 65%);filter:blur(70px);
}
.ab-cta-inner{
position:relative;z-index:1;
display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:center;
}
.ab-cta-inner h2{margin:0 0 .5rem}
.ab-cta-inner p{margin:0;color:rgba(255,255,255,.82);font-size:1rem;line-height:1.6;max-width:48ch}
.ab-cta-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:flex-end}
.ab-btn{
display:inline-flex;align-items:center;gap:.45rem;
padding:.85rem 1.5rem;border-radius:10px;font-weight:700;font-size:.92rem;
text-decoration:none;transition:.2s transform,.2s background,.2s color,.2s border-color;
}
.ab-btn:hover{text-decoration:none;transform:translateY(-2px)}
.ab-btn-white{background:#fff;color:#0f1730}
.ab-btn-white:hover{background:#f0fdf4;color:#186900}
.ab-btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.ab-btn-outline:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
@media(max-width:780px){
.ab-cta-inner{grid-template-columns:1fr;text-align:center}
.ab-cta-actions{justify-content:center}
}
/* ============================================================
GENERATED SEO PAGES - long-form section styles (page-body.php)
============================================================ */
.prose{max-width:840px;margin:0 auto;color:#3a4361;font-size:1.02rem;line-height:1.75}
.prose p{margin:0 0 1.1rem}
.prose p:last-child{margin-bottom:0}
.prose strong{color:#0f1730}
.prose a{color:#186900;font-weight:600}
.prose a:hover{text-decoration:underline}
.split-prose{
max-width:1100px;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin:0 auto;
}
.split-prose > div > h3:first-child{margin-top:0}
.split-prose h3{font-size:1.1rem;font-weight:800;color:#0f1730;margin:1.4rem 0 .5rem;letter-spacing:-.01em}
.split-prose p{margin:0 0 1rem;color:#3a4361;font-size:.96rem;line-height:1.65}
.split-prose a{color:#186900;font-weight:600}
.split-prose a:hover{text-decoration:underline}
@media(max-width:880px){.split-prose{grid-template-columns:1fr;gap:1rem}}
/* Capability deep-dive cards */
.cap-deep-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;max-width:1100px;margin:0 auto}
.cap-deep{
background:#fff;border:1px solid #e2e8f0;border-radius:14px;
padding:1.6rem 1.6rem;display:flex;flex-direction:column;gap:.6rem;
transition:.25s transform,.25s box-shadow,.25s border-color;
}
.cap-deep:hover{transform:translateY(-3px);border-color:#186900;box-shadow:0 18px 36px -18px rgba(15,23,48,.18)}
.cap-deep-num{
font-size:.95rem;font-weight:800;color:#186900;letter-spacing:.06em;
}
.cap-deep h3{margin:0;font-size:1.1rem;font-weight:800;color:#0f1730;letter-spacing:-.01em}
.cap-deep p{margin:0;color:#3a4361;font-size:.94rem;line-height:1.6}
.cap-deep-impact{
margin-top:.4rem;padding:.7rem .9rem;background:#f7f9fc;border-radius:8px;
font-size:.88rem;color:#3a4361;line-height:1.55;
}
.cap-deep-impact strong{color:#186900}
@media(max-width:780px){.cap-deep-grid{grid-template-columns:1fr}}
/* Roadmap list */
.roadmap-list{
list-style:none;padding:0;margin:0;max-width:880px;margin:0 auto;
display:flex;flex-direction:column;gap:1rem;
}
.roadmap-list li{
display:grid;grid-template-columns:auto 1fr;gap:1rem 1.4rem;align-items:start;
background:#f7f9fc;border:1px solid #e2e8f0;border-radius:14px;
padding:1.4rem 1.6rem;
transition:.2s border-color,.2s background;
}
.roadmap-list li:hover{background:#fff;border-color:#186900}
.roadmap-num{
display:inline-flex;align-items:center;justify-content:center;
width:42px;height:42px;border-radius:10px;
background:linear-gradient(135deg,#186900,#22a83d);color:#fff;
font-weight:800;font-size:.92rem;letter-spacing:.05em;flex-shrink:0;
}
.roadmap-list strong{display:block;font-weight:800;color:#0f1730;font-size:1rem;margin-bottom:.3rem;letter-spacing:-.01em}
.roadmap-list p{margin:0;color:#3a4361;font-size:.94rem;line-height:1.6}
.roadmap-list a{color:#186900;font-weight:600}
.roadmap-list a:hover{text-decoration:underline}
/* Travel APIs page - code-card + SDK extras (ta-* namespace, slots into er-* design) */
.ta-code-card{
background:#0e1421;border-radius:18px;overflow:hidden;
box-shadow:0 30px 60px -22px rgba(15,23,48,.4);
font-family:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
}
.ta-code-top{
display:flex;align-items:center;justify-content:space-between;
background:#161e30;padding:.85rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.08);
}
.ta-code-title{display:flex;align-items:center;gap:.6rem;color:#a7f3d0;font-weight:700;font-size:.84rem}
.ta-code-title svg{color:#22a83d}
.ta-code-lng{
font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
background:rgba(34,168,61,.18);color:#a7f3d0;padding:.3rem .65rem;border-radius:6px;
}
.ta-code-body{
padding:1.2rem 1.3rem;color:#e2e8f0;font-size:.84rem;line-height:1.7;
white-space:nowrap;overflow-x:auto;
}
.ta-tk-c{color:#64748b;font-style:italic}
.ta-tk-k{color:#fb7185;font-weight:600}
.ta-tk-p{color:#a78bfa}
.ta-tk-s{color:#86efac}
.ta-tk-f{color:#fcd34d}
.ta-tk-n{color:#fb923c}
.ta-cursor{
display:inline-block;width:8px;height:14px;background:#22a83d;
vertical-align:middle;margin-left:4px;animation:taBlink 1s steps(2) infinite;
}
@keyframes taBlink{50%{opacity:0}}
/* SDK grid */
.er-sdks-section{background:#fff}
.ta-sdk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:980px;margin:0 auto}
.ta-sdk{
display:flex;align-items:center;gap:.85rem;
background:var(--er-bg);border:1px solid var(--er-line);border-radius:14px;
padding:1rem 1.2rem;transition:.25s transform,.25s background,.25s border-color;
}
.ta-sdk:hover{transform:translateY(-3px);background:#fff;border-color:var(--er-accent)}
.ta-sdk-ic{
width:42px;height:42px;border-radius:10px;flex-shrink:0;
background:linear-gradient(135deg,var(--er-accent),var(--er-accent-2));color:#fff;
display:grid;place-items:center;
}
.ta-sdk strong{display:block;font-weight:800;color:var(--er-ink);font-size:.95rem}
.ta-sdk em{display:block;font-style:normal;font-size:.78rem;color:var(--er-muted);font-family:'JetBrains Mono','SF Mono',Menlo,monospace;margin-top:.15rem}
@media(max-width:780px){.ta-sdk-grid{grid-template-columns:1fr}}
/* ============================================================
AI AUTOMATION PAGE - Robor-style design (ai-* namespace)
Light hero with AI chat preview, badge, 8-card services with thumbnails,
tabbed about, 4-step process, industries grid, tag cloud.
============================================================ */
:root{
--ai-bg:#f7f5ff;
--ai-ink:#0f0a2e;
--ai-ink-2:#3a3460;
--ai-muted:#6b6890;
--ai-line:#e6e1f5;
--ai-accent:#7c3aed;
--ai-accent-2:#a78bfa;
--ai-warm:#fb923c;
--ai-green:#22a83d;
--ai-cyan:#06b6d4;
--ai-rose:#ec4899;
--ai-blue:#3b82f6;
}
.ai-section{padding:6rem 0}
@media(max-width:780px){.ai-section{padding:4rem 0}}
.ai-tag{
display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--ai-accent);background:#ede9fe;padding:.4rem .9rem;border-radius:6px;margin-bottom:1.2rem;
}
.ai-tag-light{color:#fde68a;background:rgba(253,230,138,.12)}
.ai-h1,.ai-h2{margin:0;font-weight:800;color:var(--ai-ink);letter-spacing:-.02em;line-height:1.08}
.ai-h1{font-size:clamp(2.4rem,5vw,3.8rem)}
.ai-h2{font-size:clamp(1.8rem,3.2vw,2.8rem)}
.ai-h2-light{color:#fff}
.ai-h1 em,.ai-h2 em{
font-style:italic;font-weight:700;
background:linear-gradient(135deg,var(--ai-accent) 0%,var(--ai-accent-2) 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ai-h2-light em{
background:linear-gradient(135deg,#fde68a 0%,#fcd34d 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ai-btn{
display:inline-flex;align-items:center;gap:.5rem;
padding:.95rem 1.7rem;border-radius:999px;font-weight:700;font-size:.94rem;
text-decoration:none;transition:.2s transform,.2s background,.2s color,.2s box-shadow,.2s border-color;
}
.ai-btn:hover{text-decoration:none;transform:translateY(-2px)}
.ai-btn-primary{
background:linear-gradient(135deg,var(--ai-accent),var(--ai-accent-2));color:#fff;
box-shadow:0 14px 28px -10px rgba(124,58,237,.45);
}
.ai-btn-primary:hover{color:#fff;box-shadow:0 20px 36px -12px rgba(124,58,237,.55)}
.ai-btn-play{
background:#fff;color:var(--ai-ink);border:1px solid var(--ai-line);padding:.7rem 1.2rem .7rem .7rem;
}
.ai-btn-play:hover{border-color:var(--ai-accent);color:var(--ai-accent)}
.ai-play-ic{
width:34px;height:34px;border-radius:50%;
background:linear-gradient(135deg,var(--ai-accent),var(--ai-accent-2));color:#fff;
display:grid;place-items:center;flex-shrink:0;
}
.ai-btn-white{background:#fff;color:var(--ai-ink)}
.ai-btn-white:hover{background:#ede9fe;color:var(--ai-accent)}
.ai-btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.ai-btn-outline:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
/* Award-winning badge */
.ai-badge{
display:inline-flex;align-items:center;gap:.5rem;
background:#fff;border:1px solid var(--ai-line);
padding:.5rem 1rem;border-radius:999px;
font-size:.84rem;font-weight:700;color:var(--ai-ink-2);
box-shadow:0 6px 14px -6px rgba(15,10,46,.12);margin-bottom:1.5rem;
}
.ai-badge svg{color:var(--ai-warm)}
/* ---------- 1) HERO ---------- */
.ai-hero{
background:linear-gradient(135deg,#f7f5ff 0%,#fff 50%,#fff7ed 100%);
padding:4rem 0 5rem;position:relative;overflow:hidden;
}
.ai-hero-shapes{position:absolute;inset:0;pointer-events:none;z-index:0}
.ai-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4}
.ai-orb-1{width:480px;height:480px;background:radial-gradient(circle,#a78bfa,transparent 65%);top:-140px;left:-100px}
.ai-orb-2{width:420px;height:420px;background:radial-gradient(circle,#fcd34d,transparent 65%);bottom:-160px;right:-120px;opacity:.3}
.ai-hero-grid{
position:relative;z-index:1;
display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;
}
.ai-hero-copy .ai-h1{margin-bottom:1.4rem;max-width:18ch}
.ai-lede{font-size:1.05rem;line-height:1.65;color:var(--ai-ink-2);margin:0 0 1.8rem;max-width:54ch}
.ai-hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
/* Hero AI chat card */
.ai-hero-art{position:relative;height:520px;display:flex;align-items:center;justify-content:center}
.ai-bot{
background:#fff;border:1px solid var(--ai-line);border-radius:24px;
padding:1.4rem;width:100%;max-width:380px;
box-shadow:0 30px 60px -22px rgba(15,10,46,.25);
display:flex;flex-direction:column;gap:.7rem;
}
.ai-bot-head{display:flex;align-items:center;gap:.7rem;padding-bottom:.8rem;border-bottom:1px solid var(--ai-line);margin-bottom:.3rem}
.ai-bot-avatar{
width:42px;height:42px;border-radius:14px;
background:linear-gradient(135deg,var(--ai-accent),var(--ai-accent-2));color:#fff;
display:grid;place-items:center;flex-shrink:0;
}
.ai-bot-head strong{display:block;font-weight:800;color:var(--ai-ink);font-size:.95rem}
.ai-bot-head em{display:flex;align-items:center;gap:.4rem;font-style:normal;font-size:.78rem;color:var(--ai-muted)}
.ai-dot-live{
display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ai-green);
animation:aiPulse 1.6s ease-in-out infinite;
}
@keyframes aiPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.25)}}
.ai-bot-msg{
padding:.7rem 1rem;border-radius:14px;font-size:.88rem;line-height:1.5;max-width:85%;
}
.ai-bot-user{
background:linear-gradient(135deg,var(--ai-accent),var(--ai-accent-2));color:#fff;
align-self:flex-end;border-bottom-right-radius:4px;
}
.ai-bot-reply{
background:var(--ai-bg);color:var(--ai-ink);
align-self:flex-start;border-bottom-left-radius:4px;
}
.ai-bot-card{
margin-top:.6rem;background:#fff;border:1px solid var(--ai-line);border-radius:10px;
padding:.7rem .85rem;display:grid;gap:.15rem;
}
.ai-bot-card strong{font-weight:800;color:var(--ai-ink);font-size:.86rem}
.ai-bot-card em{font-style:normal;font-size:.72rem;color:var(--ai-muted)}
.ai-bot-price{font-weight:800;color:var(--ai-accent);font-size:.92rem;margin-top:.2rem}
.ai-bot-typing{display:flex;gap:.3rem;padding:.85rem 1rem;width:fit-content}
.ai-bot-typing span{
width:8px;height:8px;border-radius:50%;background:var(--ai-accent-2);
animation:aiBounce 1.4s ease-in-out infinite;
}
.ai-bot-typing span:nth-child(2){animation-delay:.2s}
.ai-bot-typing span:nth-child(3){animation-delay:.4s}
@keyframes aiBounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}
.ai-floater{
position:absolute;background:#fff;border:1px solid var(--ai-line);border-radius:14px;
padding:.7rem .9rem;display:flex;align-items:center;gap:.7rem;
box-shadow:0 18px 36px -16px rgba(15,10,46,.25);
animation:aiFloat 6s ease-in-out infinite;
}
.ai-floater-1{top:8%;right:-10px}
.ai-floater-2{bottom:5%;left:-10px;animation-delay:-3s}
.ai-floater-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:#fff;flex-shrink:0}
.ai-floater-ic-green{background:linear-gradient(135deg,#34d399,var(--ai-green))}
.ai-floater-ic-amber{background:linear-gradient(135deg,#fbbf24,var(--ai-warm))}
.ai-floater strong{display:block;font-size:.84rem;font-weight:800;color:var(--ai-ink)}
.ai-floater em{display:block;font-style:normal;font-size:.7rem;color:var(--ai-muted)}
@keyframes aiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:980px){
.ai-hero-grid{grid-template-columns:1fr;gap:3rem}
.ai-hero-art{height:480px}
}
/* ---------- Head ---------- */
.ai-head{max-width:760px;margin:0 auto 3.5rem;text-align:center}
.ai-head p{margin:1.2rem 0 0;color:var(--ai-muted);font-size:1rem;line-height:1.65}
/* ---------- 2) SERVICES 8-CARD ---------- */
.ai-services{background:#fff}
.ai-svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.ai-svc{
background:#fff;border:1px solid var(--ai-line);border-radius:20px;overflow:hidden;
display:flex;flex-direction:column;
transition:.25s transform,.25s box-shadow,.25s border-color;position:relative;
}
.ai-svc:hover{transform:translateY(-6px);box-shadow:0 28px 56px -22px rgba(15,10,46,.2);border-color:transparent}
.ai-svc-thumb{
height:140px;display:grid;place-items:center;color:#fff;position:relative;overflow:hidden;
}
.ai-svc-thumb::after{
content:"";position:absolute;inset:0;
background:radial-gradient(ellipse at top right,rgba(255,255,255,.2),transparent 60%);
}
.ai-svc-thumb-1{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.ai-svc-thumb-2{background:linear-gradient(135deg,#fb923c,#ea580c)}
.ai-svc-thumb-3{background:linear-gradient(135deg,#34d399,#186900)}
.ai-svc-thumb-4{background:linear-gradient(135deg,#60a5fa,#1d4ed8)}
.ai-svc-thumb-5{background:linear-gradient(135deg,#06b6d4,#0e7490)}
.ai-svc-thumb-6{background:linear-gradient(135deg,#fb7185,#be185d)}
.ai-svc-thumb-7{background:linear-gradient(135deg,#fbbf24,#d97706)}
.ai-svc-thumb-8{background:linear-gradient(135deg,#ec4899,#a21caf)}
.ai-svc-body{padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.ai-svc h3{margin:0;font-size:1.05rem;font-weight:800;color:var(--ai-ink);letter-spacing:-.01em;line-height:1.25}
.ai-svc p{margin:0;color:var(--ai-muted);font-size:.9rem;line-height:1.55;flex:1}
.ai-svc-tag{
display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
color:var(--ai-accent);background:#ede9fe;padding:.32rem .65rem;border-radius:6px;align-self:flex-start;
}
@media(max-width:1080px){.ai-svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ai-svc-grid{grid-template-columns:1fr}}
/* ---------- 3) ABOUT (image collage + tabs) ---------- */
.ai-about-section{background:var(--ai-bg)}
.ai-about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center}
.ai-about-art{position:relative;height:540px}
.ai-photo-main{
position:absolute;top:0;right:20px;width:78%;height:430px;border-radius:20px;overflow:hidden;
box-shadow:0 30px 60px -28px rgba(15,10,46,.25);
}
.ai-photo-main svg{width:100%;height:100%;display:block}
.ai-photo-1,.ai-photo-2{
position:absolute;background:#fff;border:1px solid var(--ai-line);border-radius:16px;
padding:1.1rem 1.3rem;box-shadow:0 18px 36px -16px rgba(15,10,46,.2);
}
.ai-photo-1{bottom:60px;left:0}
.ai-photo-2{top:80px;left:-20px}
.ai-stat-mini{display:flex;flex-direction:column;gap:.2rem;text-align:left}
.ai-stat-mini strong{font-size:1.5rem;font-weight:800;color:var(--ai-accent);line-height:1;letter-spacing:-.02em;display:inline-flex;align-items:baseline;gap:.05em}
.ai-stat-mini strong i{font-style:normal;font-size:.65em;color:var(--ai-accent-2)}
.ai-stat-warm strong{color:var(--ai-warm)}
.ai-stat-warm strong i{color:#fbbf24}
.ai-stat-mini em{font-style:normal;font-size:.78rem;color:var(--ai-muted);font-weight:600}
.ai-about-copy h2{margin-bottom:1rem}
.ai-about-copy > p{color:var(--ai-ink-2);font-size:1rem;line-height:1.65;margin:0 0 1.5rem;max-width:50ch}
.ai-tabs{display:flex;gap:.4rem;border-bottom:2px solid var(--ai-line);margin-bottom:1.4rem;padding:0}
.ai-tab{
background:transparent;border:0;padding:.8rem 1.2rem;
font:inherit;font-weight:700;font-size:.95rem;color:var(--ai-muted);cursor:pointer;
border-bottom:2px solid transparent;margin-bottom:-2px;
transition:.2s color,.2s border-color;
}
.ai-tab:hover{color:var(--ai-ink)}
.ai-tab.active{color:var(--ai-accent);border-bottom-color:var(--ai-accent)}
.ai-tab-content{display:none;margin-bottom:1.5rem}
.ai-tab-content.active{display:block}
.ai-tab-content p{margin:0 0 1rem;color:var(--ai-ink-2);font-size:.95rem;line-height:1.65}
.ai-mini-list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.ai-mini-list li{display:flex;align-items:flex-start;gap:.6rem;color:var(--ai-ink-2);font-size:.92rem;font-weight:500}
.ai-mini-tick{
width:22px;height:22px;border-radius:50%;background:#ede9fe;color:var(--ai-accent);
display:grid;place-items:center;flex-shrink:0;margin-top:.1rem;
}
@media(max-width:880px){
.ai-about-grid{grid-template-columns:1fr;gap:2.5rem}
.ai-about-art{height:auto;min-height:480px}
.ai-photo-main{position:relative;width:100%;right:auto;height:380px}
.ai-photo-1{bottom:auto;top:340px;left:10px}
.ai-photo-2{top:30px;left:auto;right:10px}
}
/* ---------- 4) WORK PROCESS ---------- */
.ai-process-section{background:#fff}
.ai-process{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.ai-process-step{
background:var(--ai-bg);border:1px solid var(--ai-line);border-radius:20px;
padding:2rem 1.6rem;position:relative;
transition:.25s transform,.25s background,.25s box-shadow;
}
.ai-process-step:hover{transform:translateY(-5px);background:#fff;box-shadow:0 24px 48px -22px rgba(15,10,46,.18)}
.ai-process-num{
display:inline-flex;align-items:center;justify-content:center;
width:54px;height:54px;border-radius:14px;
background:linear-gradient(135deg,var(--ai-accent),var(--ai-accent-2));color:#fff;
font-size:1.05rem;font-weight:800;letter-spacing:.05em;margin-bottom:1.2rem;
box-shadow:0 12px 24px -10px rgba(124,58,237,.4);
}
.ai-process-step h3{margin:0 0 .55rem;font-size:1.1rem;font-weight:800;color:var(--ai-ink);letter-spacing:-.01em}
.ai-process-step p{margin:0;color:var(--ai-muted);font-size:.9rem;line-height:1.6}
@media(max-width:980px){.ai-process{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ai-process{grid-template-columns:1fr}}
/* ---------- 5) INDUSTRIES ---------- */
.ai-industries-section{background:var(--ai-bg)}
.ai-ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.ai-ind{
background:#fff;border:1px solid var(--ai-line);border-radius:18px;
padding:1.8rem 1.6rem;display:flex;flex-direction:column;gap:.6rem;
transition:.25s transform,.25s box-shadow,.25s border-color;
}
.ai-ind:hover{transform:translateY(-4px);box-shadow:0 24px 48px -22px rgba(15,10,46,.18);border-color:var(--ai-accent)}
.ai-ind-num{
display:inline-block;font-size:.95rem;font-weight:800;letter-spacing:.05em;
color:var(--ai-accent);margin-bottom:.4rem;
}
.ai-ind h3{margin:0;font-size:1.15rem;font-weight:800;color:var(--ai-ink);letter-spacing:-.01em}
.ai-ind p{margin:0;color:var(--ai-muted);font-size:.92rem;line-height:1.55}
@media(max-width:980px){.ai-ind-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ai-ind-grid{grid-template-columns:1fr}}
/* ---------- 6) TAG CLOUD ---------- */
.ai-tags-section{background:#fff}
.ai-tag-cloud{
list-style:none;padding:0;margin:0;
display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;max-width:880px;margin:0 auto;
}
.ai-tag-cloud li{
background:var(--ai-bg);border:1px solid var(--ai-line);
padding:.65rem 1.1rem;border-radius:999px;
font-weight:700;color:var(--ai-ink-2);font-size:.92rem;
transition:.2s background,.2s color,.2s border-color,.2s transform;
}
.ai-tag-cloud li:hover{
background:linear-gradient(135deg,var(--ai-accent),var(--ai-accent-2));
color:#fff;border-color:transparent;transform:translateY(-3px);
}
/* ---------- 7) FAQ ---------- */
.ai-faq-section{background:var(--ai-bg)}
.ai-faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:.8rem}
.ai-faq-item{
background:#fff;border:1px solid var(--ai-line);border-radius:14px;
overflow:hidden;transition:.2s box-shadow,.2s border-color;
}
.ai-faq-item[open]{border-color:var(--ai-accent);box-shadow:0 12px 24px -12px rgba(15,10,46,.12)}
.ai-faq-item summary{
display:flex;justify-content:space-between;align-items:center;gap:1rem;
padding:1.1rem 1.4rem;font-weight:700;color:var(--ai-ink);font-size:1rem;cursor:pointer;list-style:none;
}
.ai-faq-item summary::-webkit-details-marker{display:none}
.ai-faq-ic{
width:32px;height:32px;border-radius:50%;background:#ede9fe;color:var(--ai-accent);
display:grid;place-items:center;flex-shrink:0;
transition:.25s transform,.25s background,.25s color;
}
.ai-faq-item[open] .ai-faq-ic{background:var(--ai-accent);color:#fff;transform:rotate(180deg)}
.ai-faq-item p{margin:0;padding:0 1.4rem 1.2rem;color:var(--ai-muted);font-size:.95rem;line-height:1.65}
/* ---------- 8) FINAL CTA ---------- */
.ai-cta{
background:linear-gradient(135deg,#1e1148 0%,#3b1d72 60%,#1a0e3d 100%);
color:#fff;padding:5rem 0;position:relative;overflow:hidden;
}
.ai-cta::before{
content:"";position:absolute;top:-100px;right:-100px;width:420px;height:420px;
background:radial-gradient(circle,rgba(167,139,250,.35),transparent 65%);filter:blur(70px);
}
.ai-cta-inner{
position:relative;z-index:1;
display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:center;
}
.ai-cta-inner h2{color:#fff;margin-bottom:1rem}
.ai-cta-inner p{color:rgba(255,255,255,.8);font-size:1rem;line-height:1.65;margin:0;max-width:48ch}
.ai-cta-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:flex-end}
@media(max-width:880px){
.ai-cta-inner{grid-template-columns:1fr;text-align:center}
.ai-cta-actions{justify-content:center}
}