/* =========================================
   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) }
/* reCAPTCHA widget */
.robot-wrap { margin:8px 0 16px }
.robot-box {
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; border:1px solid #d1d5db;
  border-radius:4px; background:#f9fafb;
  cursor:pointer; user-select:none; width:100%; max-width:300px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  transition:border-color .2s;
}
.robot-box:hover { border-color:#9ca3af }
.robot-check {
  width:24px; height:24px; border:2px solid #9ca3af;
  border-radius:2px; flex-shrink:0; position:relative;
  transition:all .2s; background:#fff;
}
.robot-check.loading::after {
  content:''; position:absolute; inset:2px;
  border:2px solid #e5e7eb; border-top-color:#0ea5e9;
  border-radius:50%; animation:rcSpin .7s linear infinite;
}
.robot-check.verified {
  background:#4ade80; border-color:#16a34a;
}
.robot-check.verified::after {
  content:''; position:absolute; left:4px; top:1px;
  width:12px; height:7px; border-left:2.5px solid #fff;
  border-bottom:2.5px solid #fff; transform:rotate(-45deg);
}
.robot-check.failed { border-color:#ef4444 }
.robot-lbl { flex:1; font-size:.9rem; color:#374151; font-weight:500 }
.robot-brand { display:flex; flex-direction:column; align-items:center;
               gap:2px; font-size:.6rem; color:#9ca3af; line-height:1.3 }
.robot-brand span { font-size:.65rem; color:#6b7280; font-weight:600 }
@keyframes rcSpin { to { transform:rotate(360deg) } }

.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 }
.form-err { padding:13px;
            background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.2);
            border-radius:9px; color:#dc2626; 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 }

/* ===== PIMCONAUT IMAGES ===== */
.hero-2col { display:flex; align-items:center; justify-content:space-between;
             gap:48px; text-align:left; max-width:1160px; padding:80px 36px 0 }
.hero-text { flex:1; max-width:620px }
.hero-text .hero-sub { margin:0 0 36px }
.hero-text .hero-btns { justify-content:flex-start }
.hero-text .hero-tags { justify-content:flex-start }
.hero-visual { flex:0 0 420px; display:flex; align-items:center; justify-content:center }
.hero-pimconaut { width:100%; max-width:420px;
                  filter:drop-shadow(0 24px 48px rgba(14,165,233,.18));
                  animation:floatImg 6s ease-in-out infinite }
@keyframes floatImg {
  0%,100% { transform:translateY(0) }
  50%      { transform:translateY(-18px) }
}
.about-visual-wrap { display:flex; flex-direction:column; align-items:center; gap:24px }
.about-pimconaut { width:200px; filter:drop-shadow(0 12px 24px rgba(14,165,233,.15)) }
.pimconaut-hero-img { width:100%; max-width:380px;
                      filter:drop-shadow(0 20px 40px rgba(14,165,233,.15));
                      animation:floatImg 5s ease-in-out infinite }
.exp-img { width:80px; height:80px; object-fit:contain; margin-bottom:12px;
           filter:drop-shadow(0 4px 12px rgba(14,165,233,.15)) }
.exp-card { display:flex; flex-direction:column; align-items:center; text-align:center }
.ai-visual-wrap { display:flex; align-items:center; justify-content:center }

/* ===== FLOATING CTA ===== */
#float-cta {
  position:fixed; bottom:32px; right:32px; z-index:9999;
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,#0ea5e9,#8b5cf6);
  color:#fff; text-decoration:none;
  padding:13px 20px; border-radius:50px;
  font-size:.85rem; font-weight:700; letter-spacing:.02em;
  box-shadow:0 8px 28px rgba(14,165,233,.35);
  opacity:0; transform:translateY(16px);
  transition:opacity .35s ease, transform .35s ease, box-shadow .2s;
  pointer-events:none;
}
#float-cta.fcta-show {
  opacity:1; transform:translateY(0); pointer-events:auto;
}
#float-cta:hover {
  box-shadow:0 12px 36px rgba(14,165,233,.5);
  transform:translateY(-2px);
}
.fcta-icon { font-size:1rem; display:flex; align-items:center }

/* === RESPONSIVE === */
/* =============================================
   RESPONSIVE — tablet → mobile → small phone
   ============================================= */

/* --- 1100px: large tablet landscape --- */
@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 }
  .pim-intro       { grid-template-columns:1fr 1.2fr; gap:48px }
}

/* --- 1024px: iPad Pro / tablet --- */
@media(max-width:1024px) {
  .hero-2col       { padding:80px 24px 0; gap:32px }
  .hero-visual     { flex:0 0 340px }
  .mdm-grid        { gap:48px }
  .ai-intro        { gap:48px }
  .about-grid      { gap:48px }
  .svc-grid        { grid-template-columns:repeat(2,1fr) }
  .why-grid        { grid-template-columns:repeat(3,1fr) }
}

/* --- 960px: hero stacks --- */
@media(max-width:960px) {
  .hero-2col { flex-direction:column; text-align:center; padding:48px 24px 16px }
  #hero { align-items:flex-start }
  nav { padding:10px 0 }
  .hero-text .hero-btns, .hero-text .hero-tags { justify-content:center }
  .hero-text .hero-sub { margin:0 auto 32px }
  .hero-visual { flex:none; width:100%; max-width:280px }
}

/* --- 768px: tablet portrait / large phone --- */
@media(max-width:768px) {
  .nav-links { display:none } .hbg { display:flex }
  section { padding:64px 0 }
  .container { padding:0 20px }

  .about-grid, .contact-grid, .pim-intro,
  .mdm-grid, .ai-intro, .int-layout { grid-template-columns:1fr; gap:36px }

  .svc-grid        { grid-template-columns:1fr 1fr }
  .mdm-cards       { grid-template-columns:1fr 1fr }
  .ai-grid         { grid-template-columns:1fr 1fr }
  .exp-grid        { grid-template-columns:repeat(2,1fr) }
  .why-grid        { grid-template-columns:1fr 1fr }

  .foot-grid       { grid-template-columns:1fr 1fr; gap:32px }
  .cta-box         { flex-direction:column; text-align:center; padding:44px 24px }
  .frow            { grid-template-columns:1fr }
  .stats-grid      { grid-template-columns:1fr 1fr }
  .mdm-stats       { grid-template-columns:1fr 1fr }
  .ai-pipeline     { grid-template-columns:1fr 1fr; gap:20px }
  .hub-diagram     { width:280px; height:280px }

  .pim-vis         { max-width:260px; margin:0 auto }
  .about-pimconaut { width:160px }
  .sec-desc        { max-width:100% }
  .mdm-step-body p { font-size:.84rem }
  .flip-card       { height:280px }
  .robot-box       { width:100%; max-width:300px }
}

/* --- 640px: hero image hides --- */
@media(max-width:640px) {
  .hero-visual { display:none }
  .hero-2col   { padding:44px 20px 16px; text-align:center }
}

/* --- 480px: phones --- */
@media(max-width:480px) {
  .hero-2col   { padding:42px 16px 16px }
  nav { padding:8px 0 }
  section        { padding:52px 0 }
  .container     { padding:0 16px }

  .hero-h1       { font-size:2rem }
  .hero-tags     { gap:6px }
  .hero-tag      { font-size:.7rem; padding:4px 10px }

  .svc-grid      { grid-template-columns:1fr }
  .mdm-cards     { grid-template-columns:1fr }
  .ai-grid       { grid-template-columns:1fr }
  .exp-grid      { grid-template-columns:1fr 1fr }
  .why-grid      { grid-template-columns:1fr }

  .flip-card     { height:auto; min-height:240px }
  .flip-inner    { transform-style:flat }
  .flip-card:hover .flip-inner { transform:none }
  .flip-f        { position:relative; transform:none; backface-visibility:visible }
  .flip-b        { display:none }

  .foot-grid     { grid-template-columns:1fr; gap:28px }
  .mdm-stats     { grid-template-columns:1fr 1fr }
  .ai-pipeline   { grid-template-columns:1fr }
  .stats-grid    { grid-template-columns:1fr 1fr }

  .cform         { padding:24px 16px }
  .frow          { grid-template-columns:1fr }
  .robot-box     { width:100% }

  .c-item        { gap:12px }
  .int-cats      { gap:16px }
  .pim-intro     { gap:28px }
  .sec-title     { font-size:1.6rem }
  .nav-wrap      { padding:0 18px }
  .foot-bot      { flex-direction:column; gap:6px; text-align:center }

  #float-cta     { bottom:16px; right:16px; padding:12px; border-radius:50% }
  .fcta-label    { display:none }
}

/* --- 375px: iPhone SE / small phones --- */
@media(max-width:375px) {
  .hero-h1       { font-size:1.75rem }
  .hero-btns     { flex-direction:column; align-items:center }
  .btn-p, .btn-s { width:100%; justify-content:center; padding:13px 20px }
  .exp-grid      { grid-template-columns:1fr }
  .mdm-stats     { grid-template-columns:1fr }
  .stats-grid    { grid-template-columns:1fr }
  .why-grid      { grid-template-columns:1fr }
  .svc-grid      { grid-template-columns:1fr }
  .container     { padding:0 14px }
  .sec-title     { font-size:1.5rem }
  .stat-num      { font-size:2rem }
  .pim-badges-row { flex-direction:column; align-items:flex-start }
}

/* ===== PARTNER BADGE ===== */
.pim-badges-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px }
.partner-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 18px;
  background:linear-gradient(135deg,rgba(14,165,233,.1),rgba(139,92,246,.1));
  border:1px solid rgba(139,92,246,.3);
  border-radius:40px; font-size:.78rem; font-weight:700;
  color:var(--violet); letter-spacing:.04em;
}
.partner-badge i { color:var(--blue) }