/* SencelTalent — Main Stylesheet */
/* Generated: June 2026 */
/* Do not edit directly — managed via Claude */


*{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue:#ef9b09;--blue-light:#ffedcf;--blue-mid:#dc9d31;--blue-dark:#936516;
  --ink:#0A0F1E;--ink2:#1A2035;--muted:#6B7280;--subtle:#9CA3AF;
  --surface:#F8F9FC;--white:#FFFFFF;--border:#E5E7EB;--border2:#D1D5DB;
  --radius:12px;--radius-lg:20px;--radius-xl:28px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06);
  --shadow-md:0 4px 12px rgba(0,0,0,.08),0 12px 40px rgba(0,0,0,.08);
  --shadow-blue:0 8px 32px rgba(239,155,9,.25);
}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:#fff;color:var(--ink);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;font-family:inherit}
input,select,textarea{font-family:inherit}
/* multi-page: page visibility handled by browser */

nav{background:rgba(255,255,255,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(229,231,235,.8);padding:0 48px;display:flex;align-items:center;justify-content:space-between;height:66px;position:sticky;top:0;z-index:100}
.nav-logo{display:flex;align-items:center;gap:10px;cursor:pointer}
.nav-logo-mark{width:36px;height:36px;background:var(--blue);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;letter-spacing:-.5px}
.nav-logo-text{font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-.3px}
.nav-logo-text span{color:var(--blue)}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-link{padding:8px 14px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap}
.nav-link:hover{color:var(--ink);background:var(--surface)}
.nav-link.active{color:var(--blue);background:var(--blue-light)}
.nav-cta{background:var(--blue);color:#fff;padding:10px 22px;border-radius:10px;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .15s;box-shadow:var(--shadow-blue)}
.nav-cta:hover{background:var(--blue-dark);transform:translateY(-1px)}

.hero{background:linear-gradient(-45deg,#0A0F1E,#0f1829,#1a0f05,#0A0F1E,#1a1000);background-size:400% 400%;animation:meshMove 12s ease infinite;padding:110px 48px 90px;position:relative;overflow:hidden}
.hero-blob1{position:absolute;top:-140px;right:-100px;width:600px;height:600px;background:radial-gradient(circle,rgba(239,155,9,.07) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.hero-blob2{position:absolute;bottom:-120px;left:-80px;width:480px;height:480px;background:radial-gradient(circle,rgba(59,111,255,.05) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.hero-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center;position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:100px;padding:6px 16px 6px 10px;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:26px;box-shadow:var(--shadow)}
.hero-badge-dot{width:8px;height:8px;background:#22C55E;border-radius:50%;flex-shrink:0}
.hero-badge strong{color:var(--ink);font-weight:600}
.hero-h1{font-size:56px;font-weight:800;line-height:1.07;letter-spacing:-2.5px;color:#ffffff;margin-bottom:24px}
.hero-h1 .blue{color:var(--blue)}
.hero-h1 .hl{position:relative;display:inline-block}
.hero-h1 .hl::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:3px;background:var(--blue);border-radius:2px;opacity:.35}
.hero-p{font-size:17.5px;color:var(--muted);line-height:1.78;margin-bottom:38px}
.hero-p strong{color:var(--ink);font-weight:600}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{background:var(--blue);color:#fff;padding:14px 28px;border-radius:12px;font-size:15px;font-weight:600;box-shadow:var(--shadow-blue);transition:all .2s;display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-1px);box-shadow:0 14px 44px rgba(239,155,9,.3)}
.btn-secondary{background:#fff;color:var(--ink);padding:14px 28px;border-radius:12px;font-size:15px;font-weight:600;border:1.5px solid var(--border2);transition:all .2s;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.btn-secondary:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}
.hero-stats{display:flex;gap:36px;margin-top:52px;padding-top:44px;border-top:1px solid var(--border)}
.hero-stat-num{font-size:32px;font-weight:800;color:var(--ink);letter-spacing:-1.5px}
.hero-stat-label{font-size:13px;color:var(--muted);margin-top:3px}

.hero-card{background:#fff;border-radius:24px;box-shadow:0 8px 48px rgba(0,0,0,.1);padding:32px;border:1px solid var(--border)}
.hero-card-header{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--subtle);margin-bottom:20px}
.cost-item{margin-bottom:18px}
.cost-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.cost-label{font-size:13.5px;color:var(--muted)}
.cost-val{font-size:13.5px;font-weight:700;color:var(--ink)}
.cost-bar-wrap{height:7px;background:var(--surface);border-radius:4px}
.cost-bar{height:100%;border-radius:4px;background:#ef9b09;opacity:0.6;}
.cost-bar.blue{background:linear-gradient(90deg,#ef9b09,#f5b84a)}
.cost-highlight{background:linear-gradient(135deg,var(--blue-light),#fff4e0);border-radius:14px;padding:16px 18px;margin-top:20px;display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(239,155,9,.12)}
.cost-hl-label{font-size:12.5px;color:#7a4e00;font-weight:500}
.cost-hl-val{font-size:26px;font-weight:800;color:var(--blue);letter-spacing:-1px}
.cost-onboard{margin-top:16px;padding:14px 16px;background:#F0FDF4;border-radius:12px;display:flex;align-items:center;gap:10px;border:1px solid rgba(34,197,94,.15)}
.cost-onboard-text{font-size:13px;color:#166534;font-weight:500}

.section{padding:88px 48px}
.section-inner{max-width:1120px;margin:0 auto}
.section-tag{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.section-h2{font-size:40px;font-weight:800;letter-spacing:-1.5px;color:var(--ink);line-height:1.15;margin-bottom:16px}
.section-h2 .blue{color:var(--blue)}
.section-sub{font-size:17px;color:var(--muted);max-width:540px;line-height:1.72}
.section-head-center{text-align:center;margin-bottom:60px}
.section-head-center .section-sub{margin:12px auto 0}

.trust-bar{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:22px 48px;overflow:hidden}
.trust-label{font-size:11.5px;font-weight:600;color:var(--subtle);letter-spacing:.5px;text-align:center;margin-bottom:16px;text-transform:uppercase}
.trust-track{overflow:hidden}
.trust-scroll{display:flex;gap:52px;animation:scroll 28s linear infinite;white-space:nowrap;width:max-content}
.trust-item{font-size:14px;font-weight:600;color:var(--muted)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:32px;transition:all .2s;cursor:default}
.feature-card:hover{border-color:rgba(239,155,9,.3);box-shadow:0 0 0 4px rgba(239,155,9,.05),var(--shadow-md);transform:translateY(-3px)}
.feature-icon{width:48px;height:48px;background:var(--blue-light);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:22px;margin-bottom:20px}
.feature-title{font-size:16.5px;font-weight:700;color:var(--ink);margin-bottom:10px;letter-spacing:-.3px}
.feature-desc{font-size:14px;color:var(--muted);line-height:1.68}

.compare-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.compare-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:28px;position:relative}
.compare-card.best{border:2px solid var(--blue);box-shadow:0 0 0 5px rgba(239,155,9,.06)}
.compare-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:11px;font-weight:700;padding:4px 16px;border-radius:100px;white-space:nowrap;letter-spacing:.3px}
.compare-icon{font-size:32px;margin-bottom:14px}
.compare-name{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:-.2px}
.compare-verdict{display:inline-block;font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:100px;margin-bottom:18px}
.compare-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.compare-list li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--muted);line-height:1.45}
.compare-list .tick{flex-shrink:0;margin-top:1px;font-size:14px;font-weight:700}

.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;max-width:960px;margin:0 auto}
.process-connector{position:absolute;top:27px;left:calc(12.5% + 30px);right:calc(12.5% + 30px);height:2px;background:linear-gradient(90deg,var(--blue),rgba(239,155,9,.2),var(--blue));opacity:.2}
.process-step{text-align:center;padding:0 20px}
.process-num{width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--blue);color:var(--blue);font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;position:relative;z-index:1;box-shadow:0 0 0 7px rgba(239,155,9,.05),var(--shadow)}
.process-title{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:10px;letter-spacing:-.2px}
.process-desc{font-size:13.5px;color:var(--muted);line-height:1.65}

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:30px;transition:all .2s}
.service-card:hover{border-color:rgba(239,155,9,.25);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.service-icon{font-size:30px;color:var(--blue);margin-bottom:18px;display:block}
.service-title{font-size:16.5px;font-weight:700;color:var(--ink);margin-bottom:16px;letter-spacing:-.2px}
.service-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.service-list li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--muted);line-height:1.45}
.service-list .check{color:var(--blue);flex-shrink:0;font-size:14px;margin-top:1px;font-weight:700}

.tools-wrap{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.tool-pill{padding:8px 18px;background:#fff;border:1px solid var(--border);border-radius:100px;font-size:13.5px;font-weight:500;color:var(--ink);transition:all .15s;cursor:default}
.tool-pill:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}

.roles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.role-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:26px;cursor:pointer;transition:all .2s;user-select:none}
.role-card:hover,.role-card.open{border-color:var(--blue);box-shadow:0 0 0 4px rgba(239,155,9,.06)}
.role-card-top{display:flex;align-items:flex-start;gap:16px}
.role-icon-wrap{width:48px;height:48px;background:var(--blue-light);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:22px;flex-shrink:0}
.role-name{font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.2px}
.role-meta{font-size:12.5px;color:var(--muted);margin-top:4px}
.role-detail{margin-top:18px;padding-top:18px;border-top:1px solid var(--border);display:none}
.role-card.open .role-detail{display:block}
.role-desc{font-size:13.5px;color:var(--muted);line-height:1.68;margin-bottom:14px}
.skills-wrap{display:flex;flex-wrap:wrap;gap:7px}
.skill-tag{padding:4px 12px;background:var(--blue-light);color:#7a4e00;font-size:12px;font-weight:600;border-radius:100px}

.faq-list{display:flex;flex-direction:column;gap:3px;max-width:780px;margin:0 auto}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .2s}
.faq-item.open{border-color:rgba(239,155,9,.3)}
.faq-q{padding:20px 24px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;gap:16px;background:#fff;transition:background .15s}
.faq-q:hover{background:var(--surface)}
.faq-q-text{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.2px}
.faq-icon{color:var(--muted);font-size:20px;flex-shrink:0;transition:transform .2s}
.faq-item.open .faq-icon{transform:rotate(45deg);color:var(--blue)}
.faq-a{padding:0 24px 20px;font-size:14.5px;color:var(--muted);line-height:1.78;display:none;background:#fff}
.faq-item.open .faq-a{display:block}

.ai-live-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ai-coming-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ai-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:26px;transition:all .2s}
.ai-card:hover{border-color:rgba(239,155,9,.25);box-shadow:var(--shadow)}
.ai-card-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px}
.ai-card-icon.live{background:var(--blue-light);color:var(--blue)}
.ai-card-icon.soon{background:#FEF3C7;color:#92400E}
.ai-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:-.2px}
.ai-desc{font-size:13.5px;color:var(--muted);line-height:1.65}
.ai-tag{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 12px;border-radius:100px;margin-bottom:14px}
.ai-tag.live{background:#DCFCE7;color:#166534}
.ai-tag.soon{background:#FEF3C7;color:#92400E}
.divider-label{display:flex;align-items:center;gap:18px;margin:52px 0 32px}
.divider-line{flex:1;height:1px;background:var(--border)}
.divider-text{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding:7px 18px;background:#fff;border:1px solid var(--border);border-radius:100px}

.careers-values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:60px}
.value-card{background:var(--surface);border-radius:var(--radius);padding:26px}
.value-icon{font-size:26px;color:var(--blue);margin-bottom:12px;display:block}
.value-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:7px}
.value-desc{font-size:13.5px;color:var(--muted);line-height:1.65}
.job-card{background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden;margin-bottom:14px;transition:border-color .2s}
.job-card.open{border-color:rgba(239,155,9,.3);box-shadow:0 0 0 4px rgba(239,155,9,.04)}
.job-header{padding:22px 28px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;gap:16px;transition:background .15s}
.job-header:hover{background:var(--surface)}
.job-title{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.3px}
.job-meta{font-size:13px;color:var(--muted);margin-top:4px}
.job-badges{display:flex;gap:8px;align-items:center;flex-shrink:0}
.badge-green{background:#DCFCE7;color:#166534;font-size:11.5px;font-weight:700;padding:4px 14px;border-radius:100px}
.badge-amber{background:#FEF3C7;color:#92400E;font-size:11.5px;font-weight:700;padding:4px 14px;border-radius:100px}
.job-body{padding:0 28px 28px;display:none}
.job-card.open .job-body{display:block}
.job-desc{font-size:14.5px;color:var(--muted);line-height:1.72;margin-bottom:18px}
.req-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.req-list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--muted)}
.req-list .check{color:var(--blue);font-size:15px;flex-shrink:0;margin-top:1px;font-weight:700}
.apply-form{background:var(--surface);border-radius:var(--radius);padding:26px;border:1px solid var(--border)}
.apply-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.form-input{width:100%;padding:11px 15px;border:1.5px solid var(--border);border-radius:9px;font-size:14px;color:var(--ink);background:#fff;outline:none;transition:border-color .15s}
.form-input:focus{border-color:var(--blue)}
.form-textarea{width:100%;padding:11px 15px;border:1.5px solid var(--border);border-radius:9px;font-size:14px;color:var(--ink);background:#fff;outline:none;resize:vertical;min-height:100px;transition:border-color .15s;margin-top:0}
.form-textarea:focus{border-color:var(--blue)}
.form-submit{margin-top:16px;background:var(--blue);color:#fff;padding:12px 26px;border-radius:10px;font-size:14px;font-weight:600;box-shadow:var(--shadow-blue);transition:all .15s;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.form-submit:hover{background:var(--blue-dark)}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.contact-info-item{display:flex;align-items:flex-start;gap:16px;margin-bottom:28px}
.contact-icon{width:44px;height:44px;background:var(--blue-light);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:20px;flex-shrink:0}
.contact-label{font-size:12px;font-weight:600;color:var(--subtle);text-transform:uppercase;letter-spacing:.5px}
.contact-val{font-size:15px;font-weight:600;color:var(--ink);margin-top:3px}
.contact-form-card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:40px;box-shadow:var(--shadow-md)}
.contact-form-title{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.6px;margin-bottom:28px}
.contact-input{width:100%;padding:12px 15px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;color:var(--ink);background:#fff;outline:none;transition:border-color .15s;margin-bottom:12px}
.contact-input:focus{border-color:var(--blue)}
.contact-select{width:100%;padding:12px 15px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;color:var(--ink);background:#fff;outline:none;transition:border-color .15s;margin-bottom:12px;cursor:pointer}
.contact-select:focus{border-color:var(--blue)}
.contact-textarea{width:100%;padding:12px 15px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;color:var(--ink);background:#fff;outline:none;resize:vertical;min-height:120px;transition:border-color .15s;margin-bottom:16px}
.contact-textarea:focus{border-color:var(--blue)}
.contact-submit{width:100%;padding:14px;background:var(--blue);color:#fff;border-radius:12px;font-size:15px;font-weight:700;box-shadow:var(--shadow-blue);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:8px}
.contact-submit:hover{background:var(--blue-dark)}
.contact-note{font-size:12.5px;color:var(--subtle);text-align:center;margin-top:14px}

.cta-section{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-mid) 100%);padding:88px 48px;text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:rgba(255,255,255,.04);border-radius:50%}
.cta-section::after{content:'';position:absolute;bottom:-80px;left:-80px;width:320px;height:320px;background:rgba(255,255,255,.03);border-radius:50%}
.cta-h2{font-size:44px;font-weight:800;color:#fff;letter-spacing:-2px;margin-bottom:18px;line-height:1.12;position:relative;z-index:1}
.cta-sub{font-size:18px;color:rgba(255,255,255,.72);max-width:500px;margin:0 auto 40px;line-height:1.72;position:relative;z-index:1}
.cta-btns{display:flex;gap:14px;justify-content:center;position:relative;z-index:1}
.btn-white{background:#fff;color:var(--blue);padding:14px 30px;border-radius:12px;font-size:15px;font-weight:700;transition:all .15s;display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none}
.btn-white:hover{background:rgba(255,255,255,.92);transform:translateY(-1px)}
.btn-outline-white{background:transparent;color:#fff;padding:14px 30px;border-radius:12px;font-size:15px;font-weight:600;border:1.5px solid rgba(255,255,255,.35);transition:all .15s;cursor:pointer}
.btn-outline-white:hover{background:rgba(255,255,255,.1)}

.how-timeline{max-width:720px;margin:0 auto}
.timeline-step{display:flex;gap:28px;padding-bottom:44px}
.timeline-left{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.timeline-num{width:52px;height:52px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;flex-shrink:0;z-index:1;box-shadow:0 0 0 7px rgba(239,155,9,.07)}
.timeline-line{width:2px;flex:1;background:linear-gradient(to bottom,rgba(239,155,9,.3),rgba(239,155,9,.05));margin:8px 0;min-height:28px}
.timeline-step:last-child .timeline-line{display:none}
.timeline-content{padding-top:12px;flex:1}
.timeline-title{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.4px;margin-bottom:5px}
.timeline-dur{font-size:12.5px;font-weight:600;color:var(--blue);margin-bottom:12px;display:flex;align-items:center;gap:5px}
.timeline-desc{font-size:14.5px;color:var(--muted);line-height:1.72;margin-bottom:14px}
.timeline-bullets{list-style:none;display:flex;flex-direction:column;gap:8px}
.timeline-bullets li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--muted);line-height:1.5}
.timeline-bullets .arr{color:var(--blue);flex-shrink:0;font-size:15px;font-weight:700}

.calc-card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:44px;box-shadow:var(--shadow-md);max-width:880px;margin:0 auto}
.calc-label{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;display:block;margin-bottom:10px}
.calc-select{width:100%;padding:12px 15px;border:1.5px solid var(--border2);border-radius:11px;font-size:14.5px;color:var(--ink);background:#fff;outline:none;cursor:pointer;transition:border-color .15s}
.calc-select:focus{border-color:var(--blue)}
.calc-result{border-radius:16px;padding:22px;text-align:center}
.calc-result-label{font-size:11.5px;font-weight:700;color:inherit;letter-spacing:.5px;text-transform:uppercase;margin-bottom:9px;opacity:.7}
.calc-result-val{font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.2}
.calc-result-sub{font-size:12px;margin-top:5px;opacity:.65}

footer{background:var(--ink);padding:64px 48px 36px}
.footer-inner{max-width:1120px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:52px;margin-bottom:52px}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.footer-logo-mark{width:34px;height:34px;background:var(--blue);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
.footer-logo-text{font-weight:700;font-size:17px;color:#fff;letter-spacing:-.3px}
.footer-logo-text span{color:rgba(255,255,255,.4)}
.footer-tagline{font-size:14px;color:rgba(255,255,255,.4);line-height:1.75;max-width:290px;margin-bottom:22px}
.footer-contact{font-size:13px;color:rgba(255,255,255,.3);line-height:2}
.footer-col-title{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:18px}
.footer-link{display:block;font-size:14px;color:rgba(255,255,255,.45);margin-bottom:12px;cursor:pointer;transition:color .15s}
.footer-link:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:26px;display:flex;justify-content:space-between;align-items:center}
.footer-copy{font-size:13px;color:rgba(255,255,255,.28)}

.waitlist-wrap{max-width:500px;margin:0 auto;display:flex;gap:10px}
.waitlist-input{flex:1;padding:13px 17px;border:1.5px solid rgba(239,155,9,.2);border-radius:11px;font-size:14.5px;color:var(--ink);outline:none;background:#fff;transition:border-color .15s}
.waitlist-input:focus{border-color:var(--blue)}
.waitlist-btn{background:var(--blue);color:#fff;padding:13px 24px;border-radius:11px;font-size:14.5px;font-weight:600;white-space:nowrap;transition:all .15s;box-shadow:var(--shadow-blue);cursor:pointer;border:none}
.waitlist-btn:hover{background:var(--blue-dark)}
.success-box{background:var(--blue-light);border:1px solid rgba(239,155,9,.2);border-radius:14px;padding:24px 28px;text-align:center;max-width:460px;margin:0 auto}
.success-title{font-size:16px;font-weight:700;color:var(--blue);margin-bottom:6px}
.success-sub{font-size:13.5px;color:#8a5c00;line-height:1.6}

.stat-pill{display:inline-flex;gap:28px;padding:16px 28px;background:var(--blue-light);border-radius:16px;border:1px solid rgba(239,155,9,.14)}
.stat-pill-item{text-align:center}
.stat-pill-val{font-size:18px;font-weight:800;color:var(--blue);letter-spacing:-.5px}
.stat-pill-label{font-size:12px;color:#8a5c00;margin-top:2px}
.stat-pill-div{width:1px;background:rgba(239,155,9,.15)}

.info-box{background:var(--blue-light);border-radius:16px;padding:26px 28px;border:1px solid rgba(239,155,9,.12)}
.info-box-title{font-size:14.5px;font-weight:700;color:var(--blue);margin-bottom:10px}
.info-box-item{font-size:13.5px;color:#7a4e00;display:flex;gap:9px;margin-bottom:8px;line-height:1.5}

@media (max-width: 768px) {
  nav { padding: 0 20px; height: 56px; }
  .nav-links { display: none; }
  .nav-cta { padding: 8px 14px; font-size: 12px; }
  .hero { padding: 80px 20px 48px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-h1 { font-size: 36px; letter-spacing: -1.5px; }
  .hero-p { font-size: 15px; }
  .hero-btns { flex-direction: column; }
  .hero-btns button { width: 100%; justify-content: center; }
  .hero-stats { gap: 20px; flex-wrap: wrap; }
  .hero-stat-num { font-size: 24px; }
  .hero-card { display: none; }
  .section { padding: 56px 20px; }
  .section-h2 { font-size: 28px; letter-spacing: -1px; }
  .features-grid { grid-template-columns: 1fr; gap: 16px; }
  .compare-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .services-grid { grid-template-columns: 1fr; gap: 16px; }
  .roles-grid { grid-template-columns: 1fr; gap: 14px; }
  .ai-live-grid { grid-template-columns: 1fr; gap: 14px; }
  .ai-coming-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .careers-values { grid-template-columns: 1fr 1fr; gap: 14px; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .process-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .process-connector { display: none; }
  .cta-h2 { font-size: 30px; letter-spacing: -1px; }
  .cta-sub { font-size: 15px; }
  .cta-btns { flex-direction: column; align-items: center; }
  .cta-btns button { width: 100%; max-width: 320px; }
  .how-timeline { padding: 0 4px; }
  .timeline-title { font-size: 16px; }
  .calc-card { padding: 24px 20px; }
  .calc-card > div:first-child { grid-template-columns: 1fr; gap: 20px; }
  .calc-card > div:nth-child(2) { grid-template-columns: 1fr; gap: 12px; }
  .contact-form-card { padding: 24px 20px; }
  .contact-form-card > div:first-child { grid-template-columns: 1fr; }
  .job-header { padding: 16px 18px; }
  .job-body { padding: 0 18px 20px; }
  .apply-form { padding: 18px; }
  .form-row { grid-template-columns: 1fr; }
  .trust-bar { padding: 16px 20px; }
  .section-head-center { margin-bottom: 36px; }
  .stat-pill { flex-direction: column; gap: 12px; padding: 16px 20px; }
  .stat-pill-div { width: 100%; height: 1px; }
  .faq-list { max-width: 100%; }
  .faq-q-text { font-size: 13.5px; }
  .hero-stat-label { font-size: 11px; }
  .waitlist-wrap { flex-direction: column; }
  .waitlist-input { width: 100%; }
  .waitlist-btn { width: 100%; }
  nav .nav-links span:nth-child(n+4) { display: none; }
  .info-box { padding: 20px; }
  .section-sub { font-size: 15px; }
}

@media (max-width: 480px) {
  .hero-h1 { font-size: 30px; }
  .compare-grid { grid-template-columns: 1fr; }
  .ai-coming-grid { grid-template-columns: 1fr; }
  .careers-values { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section-h2 { font-size: 24px; }
  .cta-h2 { font-size: 26px; }
  .hero-stats { gap: 16px; }
}


.policy-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:9999;overflow-y:auto;padding:40px 20px}
.policy-modal-inner{background:#fff;max-width:760px;margin:0 auto;border-radius:16px;padding:40px;position:relative}
.policy-modal-close{position:absolute;top:20px;right:24px;font-size:24px;cursor:pointer;color:#6B7280;background:none;border:none;font-weight:300}
.policy-modal-title{font-size:22px;font-weight:800;color:#0A0F1E;margin:0 0 8px}
.policy-modal-date{font-size:13px;color:#9CA3AF;margin:0 0 28px}
.policy-link{color:#ef9b09;text-decoration:none;cursor:pointer}
.policy-link:hover{text-decoration:underline}

#scroll-progress {
  position: fixed;
  top: 38px;
  left: 0;
  width: 0%;
  height: 3px;
  background: #0A0F1E;
  z-index: 10001;
  transition: width 0.1s ease;
}

#exit-popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}
#exit-popup-overlay.show {
  display: flex;
}
#exit-popup {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  max-width: 480px;
  width: 90%;
  position: relative;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
}
#exit-popup-close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  color: #9CA3AF;
  background: none;
  border: none;
  line-height: 1;
}
#exit-popup-emoji {
  font-size: 48px;
  margin-bottom: 16px;
}
#exit-popup h3 {
  font-size: 22px;
  font-weight: 800;
  color: #0A0F1E;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}
#exit-popup p {
  font-size: 15px;
  color: #6B7280;
  line-height: 1.6;
  margin: 0 0 24px;
}
#exit-popup-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exit-btn-primary {
  display: block;
  padding: 14px;
  background: #ef9b09;
  color: #fff;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  width: 100%;
}
.exit-btn-secondary {
  display: block;
  padding: 14px;
  background: #F8F9FC;
  color: #0A0F1E;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  width: 100%;
}
.exit-btn-dismiss {
  font-size: 13px;
  color: #9CA3AF;
  cursor: pointer;
  background: none;
  border: none;
  margin-top: 4px;
}

#cookie-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #0A0F1E;
  padding: 16px 24px;
  z-index: 99998;
  border-top: 2px solid #ef9b09;
}
#cookie-banner.show {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
#cookie-banner p {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin: 0;
  flex: 1;
  line-height: 1.5;
}
#cookie-banner a {
  color: #ef9b09;
  text-decoration: none;
}
#cookie-banner a:hover {
  text-decoration: underline;
}
.cookie-btn-accept {
  padding: 10px 20px;
  background: #ef9b09;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.cookie-btn-decline {
  padding: 10px 20px;
  background: transparent;
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(239,155,9,0.5); }
  70% { box-shadow: 0 0 0 10px rgba(239,155,9,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,155,9,0); }
}
.nav-cta {
  animation: pulse-glow 2.5s infinite;
}
.nav-cta:hover {
  animation: none;
}

/* 5 — Feature card hover effects */
.feature-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  cursor: default;
}
.feature-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.12) !important;
}

/* Enhanced navbar tabs */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  right: 50%;
  height: 2px;
  background: #ef9b09;
  border-radius: 2px;
  transition: left 0.2s ease, right 0.2s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  left: 10px;
  right: 10px;
}
.nav-link.active {
  color: #ef9b09 !important;
  background: rgba(239,155,9,0.08) !important;
  font-weight: 600 !important;
}

/* Hover lift on all card types */
.ai-card,
.job-card,
.value-card,
.role-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.ai-card:hover,
.job-card:hover,
.value-card:hover,
.role-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.10) !important;
}

/* FAQ items — subtle hover */
.faq-item {
  transition: background 0.15s ease !important;
}
.faq-item:hover {
  background: rgba(239,155,9,0.04) !important;
}

/* Buttons — all primary buttons get smooth scale */
.btn-primary, .contact-submit {
  transition: all 0.2s ease !important;
}
.btn-primary:hover, .contact-submit:hover {
  transform: translateY(-2px) !important;
}

/* Amber glow on Start Scaling Smarter */
.blue.hl {
  transition: color 0.3s ease;
}

/* ═══ HIGH WOW FACTOR EFFECTS ═══ */

/* 1 — Particle canvas */
#particle-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* 2 — Gradient mesh background animation */
@keyframes meshMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero {
  position: relative;
  background: linear-gradient(-45deg, #0A0F1E, #0f1829, #1a0f05, #0A0F1E, #1a1000) !important;
  background-size: 400% 400% !important;
  animation: meshMove 12s ease infinite !important;
}

/* 3 — Spotlight cursor */
#spotlight {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239,155,9,0.08) 0%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: opacity 0.3s ease;
  opacity: 0;
}

/* 4 — Slot machine number effect */
.counter.slot {
  display: inline-block;
  overflow: hidden;
}

/* 5 — Morphing blob */
@keyframes morphBlob {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%  { border-radius: 50% 60% 30% 40% / 40% 30% 70% 60%; }
  75%  { border-radius: 40% 60% 50% 30% / 60% 40% 50% 70%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
.hero-blob1 {
  animation: morphBlob 8s ease-in-out infinite !important;
  background: radial-gradient(circle, rgba(239,155,9,0.15), transparent 70%) !important;
}
.hero-blob2 {
  animation: morphBlob 10s ease-in-out infinite reverse !important;
  background: radial-gradient(circle, rgba(239,155,9,0.08), transparent 70%) !important;
}

/* Noise texture overlay */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.4;
  z-index: 0;
}
.hero-inner { position: relative; z-index: 3; }

/* Fix all text colours in hero for dark animated background */
.hero .hero-h1 { color: #F0EDE8 !important; }
.hero p { color: rgba(240,237,232,0.75) !important; }
.hero p strong { color: #ef9b09 !important; font-weight: 700 !important; }
.hero p[style*="color:#ef9b09"] { color: #ef9b09 !important; }
.hero-stat-num { color: #F0EDE8 !important; }
.hero-stat-label { color: rgba(240,237,232,0.55) !important; }
.hero-badge { color: var(--muted) !important; border-color: var(--border) !important; }

/* Hero card - keep white background so card stays readable */
.hero-card { background: rgba(255,255,255,0.96) !important; }
.hero-card-header { color: #6B7280 !important; }

/* Hero subheading */
.hero .hero-h1 + p, 
section.hero > div > div > p { color: rgba(240,237,232,0.85) !important; }

/* Buttons in hero - secondary button */
.hero .btn-secondary { 
  background: rgba(255,255,255,0.1) !important; 
  color: #F0EDE8 !important; 
  border-color: rgba(240,237,232,0.25) !important; 
}
.hero .btn-secondary:hover { 
  background: rgba(255,255,255,0.2) !important; 
}

/* Hero stats border */
.hero-stats { border-color: rgba(240,237,232,0.12) !important; }

/* Mobile fix for talent standard section */
@media (max-width: 768px) {
  #page-team [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #page-team [style*="display:grid"] {
    grid-template-columns: 1fr !important;
  }
  #page-team > section {
    overflow-x: hidden !important;
  }
  .page {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  body {
    overflow-x: hidden !important;
  }
}

@media (max-width: 768px) {
  #talent-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 0 !important;
  }
  #talent-grid > div:last-child {
    grid-template-columns: 1fr !important;
  }
  #talent-grid [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  section[style*="background:var(--ink)"] {
    padding: 48px 20px !important;
    overflow: hidden !important;
  }
}

@media (max-width: 768px) {
  #scroll-progress { display: none !important; }
}

/* Mobile horizontal swipe for multi-column grids */
@media (max-width: 768px) {

  /* Features grid - Why SencelTalent */
  .features-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .features-grid::-webkit-scrollbar { display: none !important; }
  .features-grid .feature-card {
    min-width: 280px !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* Services grid */
  .services-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .services-grid::-webkit-scrollbar { display: none !important; }
  .services-grid .service-card {
    min-width: 260px !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* AI cards grid */
  .ai-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .ai-grid::-webkit-scrollbar { display: none !important; }
  .ai-grid .ai-card {
    min-width: 260px !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* Role cards grid */
  .roles-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .roles-grid::-webkit-scrollbar { display: none !important; }
  .roles-grid .role-card {
    min-width: 260px !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* How it works steps */
  .steps-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .steps-grid::-webkit-scrollbar { display: none !important; }
  .steps-grid .step-card {
    min-width: 240px !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* Swipe hint indicator */
  .swipe-hint {
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9CA3AF;
    margin-bottom: 8px;
  }
}

/* Hide swipe hint on desktop */
.swipe-hint { display: none; }

@media (max-width: 768px) {

  /* Compare grid */
  .compare-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .compare-grid::-webkit-scrollbar { display: none !important; }
  .compare-grid > * {
    min-width: 260px !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* Process grid */
  .process-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .process-grid::-webkit-scrollbar { display: none !important; }
  .process-grid > * {
    min-width: 240px !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* AI coming grid and AI live grid */
  .ai-coming-grid, .ai-live-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .ai-coming-grid::-webkit-scrollbar,
  .ai-live-grid::-webkit-scrollbar { display: none !important; }
  .ai-coming-grid > *, .ai-live-grid > * {
    min-width: 240px !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* Inline grids - talent section and calculator */
  #talent-grid {
    grid-template-columns: 1fr !important;
  }

  /* Calculator card grid */
  .calc-card [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Contact form grid */
  .contact-grid {
    grid-template-columns: 1fr !important;
  }

  /* Footer grid */
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  /* Inline 3-column grids */
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  [style*="grid-template-columns:1fr 1fr 1fr"] > * {
    min-width: 240px !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }
}

/* Glassmorphism navbar on scroll */
nav {
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
nav.scrolled {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.08) !important;
}

/* Card shine effect on hover */
.feature-card, .ai-card, .job-card {
  overflow: hidden;
  position: relative;
}
.feature-card::before, .ai-card::before, .job-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
  z-index: 1;
}
.feature-card:hover::before, .ai-card:hover::before, .job-card:hover::before {
  left: 150%;
}

/* Page fade transition — multi-page */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
main {
  animation: pageIn 0.35s ease forwards;
}

@media (max-width: 768px) {

  /* Compare grid - 4 columns becomes swipeable */
  .compare-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding: 0 20px 16px !important;
    margin: 0 -20px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .compare-grid::-webkit-scrollbar { display: none !important; }
  .compare-grid .compare-card {
    min-width: 75vw !important;
    max-width: 75vw !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* Value cards */
  .value-card {
    min-width: 75vw !important;
    max-width: 75vw !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* Feature cards */
  .feature-card {
    min-width: 75vw !important;
    max-width: 75vw !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* Service cards */
  .service-card {
    min-width: 75vw !important;
    max-width: 75vw !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* AI cards */
  .ai-card {
    min-width: 75vw !important;
    max-width: 75vw !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* Role cards */
  .role-card {
    min-width: 75vw !important;
    max-width: 75vw !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* AI coming and live grids */
  .ai-coming-grid > *, .ai-live-grid > * {
    min-width: 75vw !important;
    max-width: 75vw !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* Process grid */
  .process-grid > * {
    min-width: 75vw !important;
    max-width: 75vw !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* Steps grid */
  .steps-grid .step-card {
    min-width: 75vw !important;
    max-width: 75vw !important;
  }

  /* Inline 3-column grids */
  [style*="grid-template-columns:1fr 1fr 1fr"] > *,
  [style*="grid-template-columns:repeat(3,1fr)"] > * {
    min-width: 75vw !important;
    max-width: 75vw !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* Fix padding on swipeable sections so first card isn't cut */
  .features-grid,
  .services-grid,
  .ai-grid,
  .roles-grid,
  .ai-coming-grid,
  .ai-live-grid,
  .process-grid {
    padding: 0 20px 16px !important;
    margin: 0 -20px !important;
  }

  /* Swipe hint styling */
  .swipe-hint {
    font-size: 12px !important;
    color: #9CA3AF !important;
    text-align: center !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }
}

@media (max-width: 768px) {

  /* Hiring locally vs offshore grid */
  #hiring-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding: 0 20px 16px !important;
    margin: 0 -20px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    max-width: 100% !important;
  }
  #hiring-grid::-webkit-scrollbar { display: none !important; }
  #hiring-grid > div {
    min-width: 82vw !important;
    max-width: 82vw !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* Fix compare grid - show SencelTalent first, fix cut off */
  .compare-grid {
    padding: 0 12px 16px !important;
    margin: 0 -12px !important;
  }
  .compare-grid .compare-card {
    min-width: 82vw !important;
    max-width: 82vw !important;
  }

  /* Reorder compare cards - SencelTalent (best) shows first */
  .compare-card.best {
    order: -1 !important;
  }
}

@media (max-width: 768px) {
  /* Add top padding to compare grid so Recommended badge isn't cut */
  .compare-grid {
    padding-top: 24px !important;
  }
  /* Ensure best card badge is fully visible */
  .compare-card.best {
    margin-top: 0 !important;
  }
}

@media (max-width: 768px) {
  .compare-grid {
    padding-top: 20px !important;
    overflow: visible !important;
  }
  .compare-grid .compare-card {
    overflow: visible !important;
  }
}

@media (max-width: 768px) {
  .compare-grid {
    overflow-y: visible !important;
    padding-top: 16px !important;
  }
  .compare-card {
    overflow: visible !important;
  }
}

@media (max-width: 768px) {
  .compare-grid {
    overflow-y: visible !important;
    padding-top: 16px !important;
  }
  .compare-card {
    overflow: visible !important;
  }
}

@media (max-width: 768px) {
  .compare-grid {
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-top: 20px !important;
  }
  .compare-card.best {
    margin-top: 16px !important;
  }
}

.tool-pill-logo {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 14px !important;
}
.tool-pill-logo span {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

/* Mobile fixes for new page sections */
@media (max-width: 768px) {
  /* Stack all 3-col grids */
  .mobile-stack-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Timeline on mobile */
  .timeline-line-desktop {
    display: none !important;
  }
  
  /* How It Works sections padding */
  section[style*="background:var(--surface)"] .section-inner,
  section.section .section-inner {
    padding: 0 !important;
  }
  
  /* Vetting funnel items */
  [style*="display:flex;gap:20px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:16px"] {
    gap: 12px !important;
    padding: 16px !important;
  }
  
  /* Profile cards on mobile */
  [style*="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px"] {
    gap: 4px !important;
  }
  
  /* Timeline items */
  [style*="display:flex;gap:16px;align-items:flex-start"] {
    gap: 10px !important;
  }
  
  /* Day label */
  [style*="min-width:64px;max-width:64px"] {
    min-width: 54px !important;
    max-width: 54px !important;
  }
  [style*="min-width:64px;max-width:64px"] div {
    font-size: 9px !important;
    padding: 4px 6px !important;
  }
  
  /* Section padding on mobile */
  section[style*="padding:56px 48px"] {
    padding: 40px 20px !important;
  }
  section[style*="padding:72px 48px"] {
    padding: 40px 20px !important;
  }
}

@media (max-width: 768px) {
  .mobile-stack-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding: 0 20px 16px !important;
    margin: 40px -20px 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .mobile-stack-grid::-webkit-scrollbar { display: none !important; }
  .mobile-stack-grid > * {
    min-width: 80vw !important;
    max-width: 80vw !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }
}

/* Mobile - profile card grids swipe horizontally */
@media (max-width: 768px) {
  #profileCards,
  #profileCards2 {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 14px !important;
    padding: 4px 20px 16px !important;
    margin: 16px -20px 0 !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  #profileCards::-webkit-scrollbar,
  #profileCards2::-webkit-scrollbar { display: none !important; }
  #profileCards > div,
  #profileCards2 > div {
    min-width: 82vw !important;
    max-width: 82vw !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {
  footer {
    padding: 40px 20px 100px !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .footer-col-title {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }
  .footer-link {
    font-size: 13px !important;
    padding: 4px 0 !important;
  }
  .footer-logo-text {
    font-size: 16px !important;
  }
  .footer-desc {
    font-size: 13px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    font-size: 12px !important;
  }
  .footer-spec-grid {
    grid-template-columns: repeat(2,1fr) !important;
    gap: 8px !important;
  }
}

/* Hamburger menu button */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  align-items: center;
  justify-content: center;
}
.hamburger i {
  font-size: 26px;
}
@media (max-width: 768px) {
  .hamburger {
    display: flex !important;
  }
  .hamburger i {
    font-size: 28px !important;
  }
}