/* =========================================
   WILLGETDONE — main.css
   Light Theme | 3D & Advanced Animations
   ========================================= */

/* === VARIABLES === */
:root {
  --white: #ffffff;
  --bg:    #f8fafc;
  --bg2:   #f0f9ff;
  --bg3:   #faf5ff;
  --bg4:   #f0fdfa;
  --blue:  #0ea5e9;
  --blue2: #38bdf8;
  --violet:#8b5cf6;
  --cyan:  #06b6d4;
  --teal:  #0d9488;
  --pink:  #ec4899;
  --green: #10b981;
  --text:  #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --border:rgba(14,165,233,.12);
  --border-v:rgba(139,92,246,.15);
  --glass: rgba(255,255,255,.85);
  --shadow:    0 2px 16px rgba(14,165,233,.07);
  --shadow-md: 0 8px 32px rgba(14,165,233,.12);
  --shadow-lg: 0 20px 60px rgba(14,165,233,.16);
  --shadow-v:  0 4px 20px rgba(139,92,246,.1);
  --ga: linear-gradient(135deg,#0ea5e9,#8b5cf6);
  --gb: linear-gradient(135deg,#06b6d4,#0ea5e9);
  --gc: linear-gradient(135deg,#8b5cf6,#ec4899);
  --gd: linear-gradient(160deg,#f0f9ff 0%,#faf5ff 50%,#f0fdfa 100%);
  --r: 14px; --r2: 20px; --r3: 28px;
  --fd: 'Inter', sans-serif;
  --tr: .3s cubic-bezier(.4,0,.2,1);
}

/* === RESET === */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; overflow-x:hidden }
body { font-family:var(--fd); background:var(--bg); color:var(--text);
       overflow-x:hidden; line-height:1.6; -webkit-font-smoothing:antialiased }
::-webkit-scrollbar { width:5px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:var(--ga); border-radius:3px }
a { text-decoration:none }
img { max-width:100%; height:auto }

/* === TYPOGRAPHY === */
h1,h2,h3,h4,h5 { line-height:1.15; letter-spacing:-.02em; font-weight:700; color:var(--text) }
.gtext  { background:var(--ga); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.gtextb { background:var(--gb); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.gtextv { background:var(--gc); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }

/* === SCROLL PROGRESS === */
#spb { position:fixed; top:0; left:0; height:3px; width:0%; background:var(--ga);
       z-index:9999; border-radius:0 3px 3px 0; box-shadow:0 0 12px rgba(14,165,233,.5) }

/* cursor removed */

/* === NAVIGATION === */
nav { position:fixed; top:0; left:0; right:0; z-index:1000; padding:22px 0; transition:all .4s ease }
nav.scrolled { padding:10px 0; background:rgba(248,250,252,.95);
               backdrop-filter:blur(20px); box-shadow:0 1px 0 var(--border) }
.nav-wrap { max-width:1280px; margin:0 auto; padding:0 36px;
            display:flex; align-items:center; justify-content:space-between; gap:24px }
.logo { font-size:1.4rem; font-weight:800; background:var(--ga);
        -webkit-background-clip:text; -webkit-text-fill-color:transparent;
        background-clip:text; letter-spacing:-.03em; flex-shrink:0 }
.nav-links { display:flex; align-items:center; gap:22px; list-style:none }
.nav-links a { color:var(--text2); font-size:.875rem; font-weight:500;
               transition:color var(--tr); position:relative; white-space:nowrap }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0;
                      width:0; height:2px; background:var(--ga); border-radius:1px; transition:width var(--tr) }
.nav-links a:hover { color:var(--blue) }
.nav-links a:hover::after { width:100% }
.btn-cta { padding:9px 22px; background:var(--ga); color:#fff!important; border-radius:40px;
           font-weight:600!important; flex-shrink:0;
           box-shadow:0 4px 16px rgba(14,165,233,.28); transition:all var(--tr)!important }
.btn-cta::after { display:none!important }
.btn-cta:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(14,165,233,.42)!important }
.hbg { display:none; flex-direction:column; gap:5px; cursor:pointer;
       background:none; border:none; padding:4px }
.hbg span { display:block; width:24px; height:2px; background:var(--blue);
            border-radius:2px; transition:all .3s }
.mob-menu { display:none; position:fixed; inset:0; background:rgba(248,250,252,.98);
            z-index:999; backdrop-filter:blur(20px); flex-direction:column;
            align-items:center; justify-content:center; gap:28px }
.mob-menu.open { display:flex }
.mob-menu a { font-size:1.5rem; font-weight:700; color:var(--text); transition:color var(--tr) }
.mob-menu a:hover { color:var(--blue) }
.mob-close { position:absolute; top:24px; right:32px; font-size:1.5rem;
             background:none; border:none; color:var(--text2); cursor:pointer }

/* === HERO === */
#hero { position:relative; height:100vh; min-height:680px;
        display:flex; align-items:center; justify-content:center;
        overflow:hidden; background:var(--gd) }
#hero-canvas { position:absolute; inset:0; width:100%; height:100% }
.hero-overlay { position:absolute; inset:0;
                background:radial-gradient(ellipse at 60% 40%, rgba(14,165,233,.05) 0%,transparent 50%),
                            radial-gradient(ellipse at 30% 70%, rgba(139,92,246,.04) 0%,transparent 50%) }
.hero-content { position:relative; z-index:2; text-align:center;
                max-width:900px; padding:0 24px }
.hero-badge { display:inline-flex; align-items:center; gap:8px;
              padding:6px 18px; background:rgba(14,165,233,.08);
              border:1px solid rgba(14,165,233,.2); border-radius:40px;
              font-size:.75rem; font-weight:600; letter-spacing:.1em;
              text-transform:uppercase; color:var(--blue); margin-bottom:24px;
              opacity:0; transform:translateY(20px); animation:fadeUp .8s ease .3s forwards }
.badge-dot { width:6px; height:6px; background:var(--blue);
             border-radius:50%; animation:bpulse 2s ease infinite }
@keyframes bpulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.6)} }
.hero-h1 { font-size:clamp(2.4rem,6vw,5rem); font-weight:900; line-height:1.05;
           letter-spacing:-.03em; margin-bottom:22px; color:var(--text);
           opacity:0; transform:translateY(30px); animation:fadeUp .9s ease .5s forwards }
.hero-sub { font-size:clamp(.92rem,1.7vw,1.1rem); color:var(--text2); max-width:640px;
            margin:0 auto 36px; line-height:1.78;
            opacity:0; transform:translateY(20px); animation:fadeUp .9s ease .7s forwards }
.hero-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
             opacity:0; transform:translateY(20px); animation:fadeUp .9s ease .9s forwards }
.hero-tags { display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
             margin-top:28px; opacity:0; animation:fadeIn 1s ease 1.2s forwards }
.hero-tag { padding:5px 14px; background:rgba(14,165,233,.06);
            border:1px solid rgba(14,165,233,.15); border-radius:20px;
            font-size:.74rem; color:var(--text2); font-weight:500 }
.scroll-hint { position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
               z-index:2; display:flex; flex-direction:column; align-items:center;
               gap:8px; color:var(--text3); font-size:.67rem; letter-spacing:.12em;
               text-transform:uppercase; opacity:0; animation:fadeIn 1s ease 1.6s forwards }
.scroll-line { width:1px; height:36px; background:linear-gradient(to bottom,var(--blue),transparent);
               animation:sline 2s ease infinite }
@keyframes sline { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top}
                   51%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
@keyframes fadeUp { to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { to{opacity:1} }

/* === BUTTONS === */
.btn-p { padding:14px 32px; background:var(--ga); color:#fff; border:none; border-radius:50px;
         font-family:var(--fd); font-size:.93rem; font-weight:600; cursor:pointer;
         text-decoration:none; display:inline-flex; align-items:center; gap:8px;
         transition:all var(--tr); box-shadow:0 6px 24px rgba(14,165,233,.3) }
.btn-p:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(14,165,233,.45) }
.btn-s { padding:14px 32px; background:var(--glass); color:var(--text); border:1px solid var(--border);
         border-radius:50px; font-family:var(--fd); font-size:.93rem; font-weight:500;
         cursor:pointer; text-decoration:none; display:inline-flex; align-items:center;
         gap:8px; transition:all var(--tr); backdrop-filter:blur(12px); box-shadow:var(--shadow) }
.btn-s:hover { background:#fff; border-color:var(--blue); transform:translateY(-3px); box-shadow:var(--shadow-md) }
.btn-white { padding:15px 38px; background:#fff; color:var(--blue); border:none; border-radius:50px;
             font-family:var(--fd); font-size:.96rem; font-weight:700; cursor:pointer;
             text-decoration:none; display:inline-flex; align-items:center;
             gap:8px; transition:all var(--tr); box-shadow:0 8px 24px rgba(0,0,0,.1) }
.btn-white:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,.15) }

/* === LAYOUT === */
section { padding:96px 0 }
.container { max-width:1200px; margin:0 auto; padding:0 36px }
.sec-label { font-size:.69rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
             color:var(--blue); margin-bottom:12px; display:flex; align-items:center; gap:10px }
.sec-label::before { content:''; display:block; width:24px; height:2px;
                     background:var(--ga); border-radius:1px }
.sec-label-v { color:var(--violet)!important }
.sec-label-v::before { background:var(--gc)!important }
.sec-title { font-size:clamp(1.8rem,3vw,2.8rem); font-weight:800; line-height:1.14;
             margin-bottom:18px; color:var(--text) }
.sec-desc { color:var(--text2); font-size:.97rem; line-height:1.78; max-width:560px }
.sec-center { text-align:center }
.sec-center .sec-label { justify-content:center }
.sec-center .sec-label::before { display:none }
.sec-center .sec-desc { margin:0 auto }
.glow-bar { width:56px; height:3px; background:var(--ga);
            border-radius:2px; margin:16px auto 0 }
.reveal { opacity:0; transform:translateY(32px); transition:opacity .7s ease, transform .7s ease }
.reveal.vis { opacity:1; transform:none }

/* === ABOUT === */
#about { background:var(--white) }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center }
.about-text p { color:var(--text2); line-height:1.82; margin-bottom:16px; font-size:.96rem }
.about-text p strong { color:var(--blue) }
.pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px }
.pill { padding:6px 14px; background:rgba(14,165,233,.07); border:1px solid rgba(14,165,233,.16);
        border-radius:40px; font-size:.79rem; color:var(--blue); font-weight:500 }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.stat-card { padding:28px 24px; background:var(--white); border:1px solid var(--border);
             border-radius:var(--r2); box-shadow:var(--shadow); transition:all var(--tr);
             position:relative; overflow:hidden; cursor:default }
.stat-card::before { content:''; position:absolute; inset:0;
                     background:linear-gradient(135deg,rgba(14,165,233,.05),rgba(139,92,246,.02));
                     opacity:0; transition:opacity var(--tr) }
.stat-card:hover { border-color:rgba(14,165,233,.28); transform:translateY(-4px); box-shadow:var(--shadow-md) }
.stat-card:hover::before { opacity:1 }
.stat-num { font-size:2.6rem; font-weight:800; background:var(--ga);
            -webkit-background-clip:text; -webkit-text-fill-color:transparent;
            background-clip:text; line-height:1; margin-bottom:7px }
.stat-lbl { color:var(--text2); font-size:.83rem; font-weight:500 }

/* === SERVICES === */
#services { background:var(--gd); position:relative; overflow:hidden }
#services::before { content:''; position:absolute; top:-80px; right:-80px; width:440px; height:440px;
                    background:radial-gradient(circle,rgba(14,165,233,.07),transparent 70%); pointer-events:none }
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.flip-card { perspective:1200px; height:300px }
.flip-inner { position:relative; width:100%; height:100%;
              transform-style:preserve-3d; transition:transform .75s cubic-bezier(.4,0,.2,1) }
.flip-card:hover .flip-inner { transform:rotateY(180deg) }
.flip-f, .flip-b { position:absolute; inset:0; backface-visibility:hidden;
                   -webkit-backface-visibility:hidden; border-radius:var(--r2); padding:32px 28px }
.flip-f { background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow);
          display:flex; flex-direction:column; align-items:flex-start;
          justify-content:center; overflow:hidden }
.flip-f::after { content:''; position:absolute; bottom:-40px; right:-40px; width:120px; height:120px;
                 border-radius:50%; background:radial-gradient(circle,rgba(14,165,233,.06),transparent 70%) }
.svc-icon { width:52px; height:52px;
            background:linear-gradient(135deg,rgba(14,165,233,.1),rgba(139,92,246,.06));
            border:1px solid rgba(14,165,233,.16); border-radius:14px;
            display:flex; align-items:center; justify-content:center;
            margin-bottom:18px; font-size:1.3rem; color:var(--blue) }
.flip-f h3 { font-size:1.08rem; font-weight:700; margin-bottom:9px; color:var(--text) }
.flip-f p { color:var(--text2); font-size:.85rem; line-height:1.65 }
.flip-b { background:var(--ga); transform:rotateY(180deg);
          display:flex; flex-direction:column; justify-content:center; position:absolute; inset:0 }
.flip-b::before { content:''; position:absolute; top:-30px; left:-30px; width:150px; height:150px;
                  background:rgba(255,255,255,.1); border-radius:50% }
.flip-b h3 { font-size:1rem; font-weight:700; margin-bottom:12px; color:#fff; position:relative }
.flip-b ul { list-style:none; position:relative }
.flip-b ul li { color:rgba(255,255,255,.92); font-size:.83rem; padding:5px 0;
                display:flex; align-items:center; gap:9px;
                border-bottom:1px solid rgba(255,255,255,.12) }
.flip-b ul li:last-child { border-bottom:none }
.flip-b ul li::before { content:''; width:5px; height:5px;
                        border-radius:50%; background:rgba(255,255,255,.8); flex-shrink:0 }

/* === PIMCORE === */
#pimcore { background:var(--white); position:relative; overflow:hidden }
#pimcore::before { content:''; position:absolute; inset:0;
                   background:radial-gradient(ellipse at 80% 40%,rgba(14,165,233,.05),transparent 60%);
                   pointer-events:none }
.pim-intro { display:grid; grid-template-columns:1fr 1.5fr; gap:80px;
             align-items:center; margin-bottom:64px }
.pim-vis { display:flex; align-items:center; justify-content:center }
.ring-wrap { width:240px; height:240px; position:relative; flex-shrink:0 }
.ring { position:absolute; border-radius:50%; animation:rspin linear infinite }
.ring:nth-child(1) { inset:0; border:1.5px solid rgba(14,165,233,.22); animation-duration:20s }
.ring:nth-child(2) { inset:22px; border:1.5px solid rgba(139,92,246,.16);
                     animation-duration:14s; animation-direction:reverse }
.ring:nth-child(3) { inset:44px; border:1.5px solid rgba(6,182,212,.13); animation-duration:28s }
.ring::after { content:''; position:absolute; top:-3px; left:50%;
               transform:translateX(-50%); width:7px; height:7px;
               background:var(--blue); border-radius:50%;
               box-shadow:0 0 10px var(--blue), 0 0 20px rgba(14,165,233,.4) }
@keyframes rspin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.ring-center { position:absolute; inset:66px; border-radius:50%;
               display:flex; align-items:center; justify-content:center;
               font-size:1.1rem; font-weight:800; background:var(--ga);
               -webkit-background-clip:text; -webkit-text-fill-color:transparent;
               background-clip:text; border:1px solid rgba(14,165,233,.18);
               background-color:rgba(240,249,255,.6) }
.pim-badge { display:inline-flex; align-items:center; gap:9px; padding:8px 16px;
             background:rgba(14,165,233,.06); border:1px solid rgba(14,165,233,.14);
             border-radius:10px; font-size:.8rem; color:var(--text2); margin-bottom:22px }
.pim-badge strong { color:var(--blue) }
.exp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.exp-card { padding:24px 20px; background:var(--white); border:1px solid var(--border);
            border-radius:var(--r); box-shadow:var(--shadow); transition:all var(--tr);
            position:relative; overflow:hidden; cursor:pointer }
.exp-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px;
                    background:var(--ga); transform:scaleX(0); transform-origin:left; transition:transform var(--tr) }
.exp-card:hover { border-color:rgba(14,165,233,.28); transform:translateY(-5px); box-shadow:var(--shadow-md) }
.exp-card:hover::before { transform:scaleX(1) }
.exp-icon { width:44px; height:44px;
            background:linear-gradient(135deg,rgba(14,165,233,.1),rgba(139,92,246,.06));
            border:1px solid rgba(14,165,233,.14); border-radius:11px;
            display:flex; align-items:center; justify-content:center;
            font-size:1.1rem; color:var(--blue); margin-bottom:12px; transition:all var(--tr) }
.exp-card:hover .exp-icon { background:linear-gradient(135deg,rgba(14,165,233,.16),rgba(139,92,246,.1));
                             color:var(--violet) }
.exp-card h4 { font-size:.9rem; font-weight:700; margin-bottom:7px; color:var(--text) }
.exp-card p { color:var(--text2); font-size:.78rem; line-height:1.6 }

/* === MDM === */
#mdm { background:linear-gradient(160deg,var(--bg3) 0%,var(--bg2) 100%);
       position:relative; overflow:hidden }
.mdm-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px;
            align-items:center; margin-bottom:64px }
.mdm-flow { display:flex; flex-direction:column; gap:0 }
.mdm-step { display:flex; gap:20px; position:relative; padding-bottom:28px }
.mdm-step:last-child { padding-bottom:0 }
.mdm-step-line { display:flex; flex-direction:column; align-items:center; flex-shrink:0 }
.mdm-dot { width:44px; height:44px; border-radius:50%; background:var(--white);
           border:2px solid rgba(14,165,233,.28); display:flex; align-items:center;
           justify-content:center; font-size:1rem; color:var(--blue); flex-shrink:0;
           transition:all var(--tr); box-shadow:var(--shadow) }
.mdm-step:hover .mdm-dot { background:var(--ga); color:#fff;
                            border-color:transparent; box-shadow:0 0 20px rgba(14,165,233,.35) }
.mdm-connector { width:2px; flex:1;
                 background:linear-gradient(to bottom,rgba(14,165,233,.22),rgba(14,165,233,.04));
                 margin-top:4px }
.mdm-step-body { padding-top:10px }
.mdm-step-body h4 { font-size:1rem; font-weight:700; margin-bottom:6px; color:var(--text) }
.mdm-step-body p { color:var(--text2); font-size:.86rem; line-height:1.65 }
.mdm-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.mdm-card { padding:24px 20px; background:var(--white); border:1px solid var(--border);
            border-radius:var(--r); box-shadow:var(--shadow); transition:all var(--tr);
            position:relative; overflow:hidden }
.mdm-card::after { content:''; position:absolute; inset:0;
                   background:linear-gradient(135deg,rgba(14,165,233,.05),rgba(139,92,246,.03));
                   opacity:0; transition:opacity var(--tr) }
.mdm-card:hover { border-color:rgba(14,165,233,.28); transform:translateY(-5px); box-shadow:var(--shadow-md) }
.mdm-card:hover::after { opacity:1 }
.mdm-card-icon { width:42px; height:42px;
                 background:linear-gradient(135deg,rgba(14,165,233,.1),rgba(139,92,246,.06));
                 border-radius:10px; display:flex; align-items:center; justify-content:center;
                 font-size:1.05rem; color:var(--blue); margin-bottom:13px }
.mdm-card h4 { font-size:.92rem; font-weight:700; margin-bottom:8px; color:var(--text) }
.mdm-card p { color:var(--text2); font-size:.8rem; line-height:1.6 }
.mdm-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
             background:var(--border); border-radius:var(--r2); overflow:hidden;
             margin-top:56px; box-shadow:var(--shadow) }
.mdm-stat { padding:30px 24px; background:var(--white); text-align:center; transition:background var(--tr) }
.mdm-stat:hover { background:rgba(14,165,233,.03) }
.mdm-stat-num { font-size:1.9rem; font-weight:800; background:var(--ga);
                -webkit-background-clip:text; -webkit-text-fill-color:transparent;
                background-clip:text; line-height:1; margin-bottom:6px }
.mdm-stat-lbl { color:var(--text2); font-size:.82rem }

/* === AI AUTOMATION === */
#ai-auto { background:var(--white); position:relative; overflow:hidden }
#ai-auto::before { content:''; position:absolute; inset:0;
                   background:radial-gradient(ellipse at 30% 50%,rgba(139,92,246,.05),transparent 55%);
                   pointer-events:none }
.ai-intro { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; margin-bottom:64px }
#ai-canvas { width:100%; height:300px; border-radius:var(--r2);
             border:1px solid rgba(139,92,246,.14);
             background:linear-gradient(160deg,#faf5ff 0%,#f0f9ff 100%) }
.ai-tag { display:inline-flex; align-items:center; gap:8px; padding:6px 16px;
          background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.2);
          border-radius:40px; font-size:.75rem; font-weight:600;
          letter-spacing:.08em; text-transform:uppercase; color:var(--violet); margin-bottom:22px }
.ai-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.ai-card { padding:24px 22px; background:var(--white); border:1px solid var(--border-v);
           border-radius:var(--r); box-shadow:var(--shadow-v); transition:all var(--tr);
           position:relative; overflow:hidden; cursor:pointer }
.ai-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px;
                   background:var(--gc); transform:scaleX(0); transform-origin:left; transition:transform var(--tr) }
.ai-card:hover { border-color:rgba(139,92,246,.35); transform:translateY(-5px);
                 box-shadow:0 12px 40px rgba(139,92,246,.14) }
.ai-card:hover::before { transform:scaleX(1) }
.ai-icon { width:46px; height:46px;
           background:linear-gradient(135deg,rgba(139,92,246,.1),rgba(236,72,153,.06));
           border-radius:12px; display:flex; align-items:center; justify-content:center;
           font-size:1.15rem; color:var(--violet); margin-bottom:14px; transition:all var(--tr) }
.ai-card:hover .ai-icon { color:var(--pink) }
.ai-card h4 { font-size:.92rem; font-weight:700; margin-bottom:8px; color:var(--text) }
.ai-card p { color:var(--text2); font-size:.8rem; line-height:1.62 }
.ai-badge { display:inline-flex; align-items:center; gap:5px; margin-top:12px;
            padding:3px 10px; background:rgba(139,92,246,.07); border:1px solid rgba(139,92,246,.18);
            border-radius:20px; font-size:.71rem; color:var(--violet); font-weight:600 }
.ai-pipeline { display:grid; grid-template-columns:repeat(5,1fr); gap:0;
               margin-top:56px; position:relative }
.ai-pipeline::before { content:''; position:absolute; top:26px; left:10%; right:10%; height:2px;
                       background:linear-gradient(90deg,rgba(139,92,246,.12),var(--violet),rgba(236,72,153,.12));
                       z-index:0 }
.pipe-step { display:flex; flex-direction:column; align-items:center;
             text-align:center; position:relative; z-index:1 }
.pipe-dot { width:54px; height:54px; border-radius:50%; background:var(--white);
            border:2px solid rgba(139,92,246,.28); display:flex; align-items:center;
            justify-content:center; font-size:1.2rem; color:var(--violet);
            margin-bottom:14px; transition:all var(--tr); position:relative;
            box-shadow:var(--shadow-v) }
.pipe-dot::after { content:''; position:absolute; inset:-4px; border-radius:50%;
                   border:1px solid rgba(139,92,246,.14); animation:ripple 2s ease infinite }
@keyframes ripple { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.4);opacity:0} }
.pipe-step:hover .pipe-dot { background:var(--gc); color:#fff; border-color:transparent;
                             box-shadow:0 8px 28px rgba(139,92,246,.35) }
.pipe-step:nth-child(2) .pipe-dot::after { animation-delay:.4s }
.pipe-step:nth-child(3) .pipe-dot::after { animation-delay:.8s }
.pipe-step:nth-child(4) .pipe-dot::after { animation-delay:1.2s }
.pipe-step:nth-child(5) .pipe-dot::after { animation-delay:1.6s }
.pipe-step h5 { font-size:.85rem; font-weight:700; margin-bottom:6px; color:var(--text) }
.pipe-step p { color:var(--text2); font-size:.74rem; line-height:1.5; max-width:110px }

/* === INTEGRATIONS === */
#integrations { background:linear-gradient(160deg,var(--bg2) 0%,var(--bg) 100%);
                position:relative; overflow:hidden }
.int-layout { display:grid; grid-template-columns:1fr 1.2fr; gap:72px; align-items:center }
.hub-diagram { position:relative; width:340px; height:340px; margin:0 auto }
.hub-center-wrap { position:absolute; inset:50%; transform:translate(-50%,-50%);
                   width:88px; height:88px }
.hub-center-box { width:88px; height:88px; border-radius:50%; background:var(--ga);
                  display:flex; align-items:center; justify-content:center;
                  font-size:.72rem; font-weight:700; color:#fff; text-align:center;
                  line-height:1.3; position:relative; z-index:2;
                  box-shadow:0 8px 28px rgba(14,165,233,.4) }
.spoke-node { width:60px; height:60px; border-radius:50%; background:var(--white);
              border:1.5px solid var(--border); display:flex; flex-direction:column;
              align-items:center; justify-content:center; gap:3px;
              font-size:.6rem; color:var(--text2); font-weight:600;
              transition:all var(--tr); cursor:default; text-align:center;
              line-height:1.3; box-shadow:var(--shadow) }
.spoke-node i { font-size:1.1rem; color:var(--blue); margin-bottom:2px }
.spoke-node:hover { border-color:var(--blue); color:var(--blue);
                    box-shadow:var(--shadow-md); transform:scale(1.12) }
.int-cats { display:flex; flex-direction:column; gap:18px }
.int-cat h4 { font-size:.79rem; font-weight:700; letter-spacing:.08em;
              text-transform:uppercase; color:var(--blue); margin-bottom:9px }
.int-items { display:flex; flex-wrap:wrap; gap:7px }
.int-item { padding:5px 13px; background:var(--white); border:1px solid var(--border);
            border-radius:8px; font-size:.79rem; color:var(--text2);
            transition:all var(--tr); box-shadow:var(--shadow) }
.int-item:hover { border-color:var(--blue); color:var(--blue); background:rgba(14,165,233,.04) }

/* === WHY US === */
#why-us { background:var(--white) }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
            background:var(--border); border-radius:var(--r2); overflow:hidden; box-shadow:var(--shadow) }
.why-card { padding:40px 32px; background:var(--white); transition:all var(--tr);
            position:relative; overflow:hidden; cursor:default }
.why-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
                   background:var(--ga); transform:scaleX(0); transform-origin:left; transition:transform .4s ease }
.why-card:hover { background:rgba(14,165,233,.02) }
.why-card:hover::after { transform:scaleX(1) }
.why-no { font-size:.7rem; font-weight:700; letter-spacing:.15em;
          color:rgba(14,165,233,.4); margin-bottom:18px; transition:color .3s,transform .3s }
.why-card:hover .why-no { color:var(--blue); transform:scale(1.1) }
.why-ico { font-size:1.8rem; margin-bottom:16px; background:var(--ga);
           -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.why-card h3 { font-size:1.05rem; font-weight:700; margin-bottom:10px; color:var(--text) }
.why-card p { color:var(--text2); font-size:.86rem; line-height:1.72 }

/* === CTA === */
#cta { padding:64px 0; background:linear-gradient(160deg,var(--bg2) 0%,var(--bg3) 100%) }
.cta-box { background:var(--ga); border-radius:var(--r3); padding:64px 52px;
           display:flex; align-items:center; justify-content:space-between;
           gap:40px; position:relative; overflow:hidden;
           box-shadow:0 24px 64px rgba(14,165,233,.32) }
.cta-box::before { content:''; position:absolute; top:-80px; left:-80px; width:300px; height:300px;
                   background:rgba(255,255,255,.08); border-radius:50%; pointer-events:none }
.cta-box::after  { content:''; position:absolute; bottom:-80px; right:-80px; width:300px; height:300px;
                   background:rgba(255,255,255,.06); border-radius:50%; pointer-events:none }
.cta-txt { position:relative; z-index:1 }
.cta-txt h2 { font-size:clamp(1.6rem,2.5vw,2.4rem); font-weight:800;
              margin-bottom:12px; color:#fff; line-height:1.2 }
.cta-txt p { color:rgba(255,255,255,.82); max-width:460px; line-height:1.72; font-size:.96rem }
.cta-act { position:relative; z-index:1; flex-shrink:0 }

/* === CONTACT === */
#contact { background:var(--bg2) }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start }
.c-item { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--border) }
.c-item:last-child { border-bottom:none }
.c-ico { width:40px; height:40px;
         background:linear-gradient(135deg,rgba(14,165,233,.1),rgba(139,92,246,.06));
         border:1px solid rgba(14,165,233,.14); border-radius:10px;
         display:flex; align-items:center; justify-content:center;
         color:var(--blue); flex-shrink:0; font-size:.9rem }
.c-lbl { font-size:.72rem; font-weight:600; letter-spacing:.06em;
         text-transform:uppercase; color:var(--text3); display:block; margin-bottom:3px }
.c-val { color:var(--text); font-size:.92rem }
.cform { padding:32px; background:var(--white); border:1px solid var(--border);
         border-radius:var(--r2); box-shadow:var(--shadow-md) }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px }
.fgrp { margin-bottom:16px }
.fgrp:last-child { margin-bottom:0 }
.fgrp label { display:block; font-size:.72rem; font-weight:600;
              letter-spacing:.06em; text-transform:uppercase; color:var(--text2); margin-bottom:7px }
.fgrp input, .fgrp textarea, .fgrp select {
  width:100%; padding:12px 15px; background:var(--bg); border:1px solid var(--border);
  border-radius:10px; color:var(--text); font-family:var(--fd); font-size:.92rem;
  transition:all var(--tr); outline:none }
.fgrp input:focus, .fgrp textarea:focus, .fgrp select:focus {
  border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(14,165,233,.1) }
.fgrp textarea { resize:vertical; min-height:100px }
.fgrp input::placeholder, .fgrp textarea::placeholder { color:var(--text3) }
.form-ok { display:none; padding:13px;
           background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.25);
           border-radius:9px; color:#059669; font-size:.85rem; text-align:center; margin-top:13px }

/* === FOOTER === */
footer { border-top:1px solid var(--border); padding:52px 0 26px; background:var(--white) }
.foot-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:44px; margin-bottom:40px }
.foot-brand p { color:var(--text2); font-size:.86rem; line-height:1.72; margin:14px 0 20px }
.socials { display:flex; gap:9px }
.soc { width:36px; height:36px; border:1px solid var(--border); border-radius:9px;
       display:flex; align-items:center; justify-content:center;
       color:var(--text2); transition:all var(--tr); font-size:.85rem }
.soc:hover { border-color:var(--blue); color:var(--blue); background:rgba(14,165,233,.06) }
.foot-col h4 { font-size:.78rem; font-weight:700; letter-spacing:.08em;
               text-transform:uppercase; color:var(--text); margin-bottom:16px }
.foot-links { list-style:none; display:flex; flex-direction:column; gap:9px }
.foot-links a { color:var(--text2); font-size:.85rem; transition:color var(--tr);
                display:flex; align-items:center; gap:7px }
.foot-links a:hover { color:var(--blue) }
.foot-links a::before { content:''; width:4px; height:4px;
                        background:rgba(14,165,233,.4); border-radius:50%; flex-shrink:0 }
.foot-bot { border-top:1px solid var(--border); padding-top:22px;
            display:flex; align-items:center; justify-content:space-between;
            flex-wrap:wrap; gap:10px }
.foot-bot p { color:var(--text2); font-size:.8rem }
.foot-bot a { color:var(--blue) }

/* === FLOATING ORBS === */
@keyframes orbRise { 0%{opacity:0;transform:translateY(0) scale(.5)} 15%{opacity:.55}
                     85%{opacity:.1} 100%{opacity:0;transform:translateY(-90px) scale(1.2)} }
.f-orb { position:absolute; border-radius:50%; pointer-events:none; animation:orbRise linear infinite }

/* === STAT POP === */
@keyframes statPop { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }
.stat-num.pop { animation:statPop .45s ease }

/* === SHIMMER === */
@keyframes shimmer { from{background-position:0% 50%} to{background-position:200% 50%} }
.hero-h1 .gtext, .hero-h1 .gtextv {
  background-size:250% auto; animation:shimmer 5s linear infinite }

/* === RESPONSIVE === */
@media(max-width:1100px) {
  .exp-grid { grid-template-columns:repeat(3,1fr) }
  .foot-grid { grid-template-columns:1fr 1fr 1fr; gap:32px }
  .ai-pipeline { grid-template-columns:repeat(3,1fr); gap:24px }
  .ai-pipeline::before { display:none }
}
@media(max-width:768px) {
  .nav-links { display:none } .hbg { display:flex }
  .about-grid, .contact-grid, .pim-intro, .mdm-grid, .ai-intro, .int-layout { grid-template-columns:1fr; gap:44px }
  .svc-grid, .mdm-cards, .ai-grid { grid-template-columns:1fr }
  .exp-grid { grid-template-columns:repeat(2,1fr) }
  .why-grid { grid-template-columns:1fr }
  .foot-grid { grid-template-columns:1fr 1fr; gap:24px }
  .cta-box { flex-direction:column; text-align:center; padding:44px 24px }
  .frow { grid-template-columns:1fr }
  section { padding:68px 0 }
  .stats-grid, .mdm-stats { grid-template-columns:1fr 1fr }
  .ai-pipeline { grid-template-columns:1fr 1fr; gap:24px }
  .hub-diagram { width:280px; height:280px }
}
@media(max-width:480px) {
  .exp-grid { grid-template-columns:1fr }
  .container { padding:0 18px }
  .flip-card { height:260px }
  .foot-grid { grid-template-columns:1fr }
  .mdm-stats { grid-template-columns:1fr }
  .hero-h1 { font-size:2rem }
}

/* ===== MONKEY MASCOT ===== */
#monkey-mascot {
  position:fixed; bottom:-160px; right:32px; z-index:9999;
  transition:bottom .5s cubic-bezier(.34,1.56,.64,1);
  cursor:pointer; user-select:none;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.18));
}
#monkey-mascot.peek { bottom:0 }
#monkey-mascot.wack { animation:monkeyWack .4s ease }

.monkey-body {
  position:relative; width:90px; height:160px;
  display:flex; flex-direction:column; align-items:center;
}
/* speech bubble */
.monkey-bubble {
  position:absolute; top:-60px; left:50%; transform:translateX(-60%);
  background:#fff; border:2px solid #8b5cf6;
  border-radius:14px; padding:6px 12px;
  font-size:11px; font-weight:700; white-space:nowrap;
  color:#0f172a; box-shadow:0 4px 16px rgba(139,92,246,.2);
  opacity:0; transition:opacity .3s;
  pointer-events:none;
}
.monkey-bubble::after {
  content:''; position:absolute; bottom:-10px; left:50%;
  transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#8b5cf6;
}
#monkey-mascot.peek .monkey-bubble { opacity:1 }

/* head */
.monkey-head {
  width:70px; height:65px; background:#c97a2e;
  border-radius:50% 50% 48% 48%;
  position:relative; z-index:2;
  box-shadow:inset -4px -4px 0 rgba(0,0,0,.12);
}
/* ears */
.monkey-head::before, .monkey-head::after {
  content:''; position:absolute; top:18px;
  width:18px; height:22px; background:#c97a2e;
  border-radius:50%; box-shadow:inset 2px 0 0 #a85e1e;
}
.monkey-head::before { left:-10px }
.monkey-head::after  { right:-10px }
/* face */
.monkey-face {
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  width:48px; height:34px; background:#f5c88a;
  border-radius:50%; z-index:3;
}
/* eyes */
.monkey-eyes {
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  display:flex; gap:12px; z-index:4;
}
.monkey-eye {
  width:10px; height:10px; background:#1e1e1e;
  border-radius:50%; position:relative;
  animation:eyeBlink 4s infinite;
}
.monkey-eye::after {
  content:''; position:absolute; top:2px; right:2px;
  width:3px; height:3px; background:#fff; border-radius:50%;
}
/* mouth */
.monkey-mouth {
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  width:22px; height:10px; border:2.5px solid #a85e1e;
  border-top:none; border-radius:0 0 12px 12px; z-index:4;
}
/* torso */
.monkey-torso {
  width:54px; height:55px; background:#c97a2e;
  border-radius:30% 30% 40% 40%;
  margin-top:-4px; position:relative; z-index:1;
  box-shadow:inset -3px -4px 0 rgba(0,0,0,.1);
}
.monkey-torso::before {
  content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:32px; height:34px; background:#f5c88a; border-radius:30% 30% 40% 40%;
}
/* arms */
.monkey-arm-l, .monkey-arm-r {
  position:absolute; top:80px; width:18px; height:48px;
  background:#c97a2e; border-radius:12px;
  transform-origin:top center;
}
.monkey-arm-l { left:4px; transform:rotate(-20deg); animation:armSwingL 1s infinite alternate ease-in-out }
.monkey-arm-r { right:4px; transform:rotate(20deg);  animation:armSwingR 1s infinite alternate ease-in-out }

/* banana projectile */
.monkey-banana {
  position:fixed; font-size:28px; z-index:10000;
  pointer-events:none; opacity:0;
  animation:none;
}
.monkey-banana.flying {
  animation:bananaFly .7s ease-out forwards;
}

@keyframes monkeyWack {
  0%   { transform:translateY(0) rotate(0) }
  25%  { transform:translateY(-18px) rotate(-8deg) }
  50%  { transform:translateY(-6px) rotate(6deg) }
  75%  { transform:translateY(-12px) rotate(-4deg) }
  100% { transform:translateY(0) rotate(0) }
}
@keyframes eyeBlink {
  0%,94%,100% { transform:scaleY(1) }
  96%          { transform:scaleY(.1) }
}
@keyframes armSwingL {
  from { transform:rotate(-20deg) }
  to   { transform:rotate(-45deg) }
}
@keyframes armSwingR {
  from { transform:rotate(20deg) }
  to   { transform:rotate(45deg) }
}
@keyframes bananaFly {
  0%   { opacity:1; transform:translate(0,0) rotate(0deg) scale(1) }
  60%  { opacity:1; transform:translate(-180px,-120px) rotate(-180deg) scale(1.3) }
  100% { opacity:0; transform:translate(-320px,-60px) rotate(-360deg) scale(.4) }
}