/* >>> BREAKPOINT - SabWebERP WEBSITE ka design (sirf website pages : SabWebErp / SabWebAbout / SabWebCareers).
   Har rule .sw ke andar hai, ERP ki screens par asar nahi. Content wwwroot/website/sabweberp.txt se. */
.sw{--bg:#f4f7fc; --surface:#ffffff; --surface-2:#eaf1fb; --line:#d9e3f0;
  --ink:#0d1b33; --ink-2:#45556e; --ink-3:#6b7a90;
  --navy:#0a2a5c; --blue:#1463d8; --blue-soft:#e3eefd; --teal:#0fa5a0; --teal-soft:#dff5f3;
  --check:#1f9d61; --amber:#f2a33a; --band:#0a2350; --band-ink:#e6eefb; --band-2:#123372;
  --shadow:0 18px 40px -18px rgba(10,42,92,.35);
  --f-display:"Sora","Segoe UI",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;}
.sw *{box-sizing:border-box}
.sw{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6}
.sw img{max-width:100%;display:block}
.sw a{color:var(--blue)}
.sw h1, .sw h2, .sw h3{font-family:var(--f-display);color:var(--ink);text-wrap:balance;margin:0;line-height:1.15}
.sw p{margin:0}
.sw .wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:20px}
.sw .eyebrow{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.sw section{padding-block:72px}
.sw .sec-head{display:grid;gap:12px;max-width:720px;margin-bottom:40px}
.sw .sec-head h2{font-size:clamp(28px,3.6vw,40px)}
.sw .sec-head p{color:var(--ink-2);font-size:17px}
.sw .center{margin-inline:auto;text-align:center}
.sw .nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.sw .nav .wrap{display:flex;align-items:center;gap:24px;min-height:66px}
.sw .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.sw .logo-img{width:48px;height:auto;flex:0 0 auto}
.sw .logo-mark{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--teal));display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-weight:800;font-size:15px}
.sw .logo b{font-family:var(--f-display);font-size:18px;display:block;line-height:1.1}
.sw .logo small{font-size:11.5px;color:var(--ink-3);display:block}
.sw .nav-links{display:flex;gap:22px;margin-left:auto}
.sw .nav-links a{color:var(--ink-2);text-decoration:none;font-weight:500;font-size:15px}
.sw .nav-links a:hover{color:var(--blue)}
.sw .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:10px;font-weight:600;font-size:15px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-family:var(--f-body);transition:transform .15s,box-shadow .15s}
.sw .btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.sw .btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px -10px var(--blue)}
.sw .btn-primary:hover{transform:translateY(-1px)}
.sw .btn-ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.sw .btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.sw .nav .btn{padding:9px 16px}
@media (max-width:920px){
  .sw .nav-links{display:none}
  .sw .nav .btn{margin-left:auto}
}
.sw .hero{padding-block:56px 64px;background:
  radial-gradient(900px 420px at 85% -10%,var(--teal-soft),transparent 60%),
  radial-gradient(700px 380px at -10% 10%,var(--blue-soft),transparent 60%),var(--bg)}
.sw .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center}
.sw .hero h1{font-size:clamp(34px,5vw,56px);font-weight:800;letter-spacing:-.02em}
.sw .hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--blue),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.sw .hero-copy{display:grid;gap:22px;min-width:0}
.sw .hero-copy>p{font-size:18px;color:var(--ink-2);max-width:560px}
.sw .chips{display:flex;flex-wrap:wrap;gap:8px}
.sw .chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--ink)}
.sw .chip i{width:8px;height:8px;border-radius:50%;background:var(--blue)}
.sw .chip.ai{border-color:var(--teal);background:var(--teal-soft)}
.sw .chip.ai i{background:var(--teal)}
.sw .cta-row{display:flex;flex-wrap:wrap;gap:12px}
.sw .trust{display:flex;flex-wrap:wrap;gap:28px;padding-top:8px;border-top:1px solid var(--line)}
.sw .trust div{display:grid}
.sw .trust b{font-family:var(--f-display);font-size:26px;color:var(--navy)}
.sw .trust span{font-size:13px;color:var(--ink-3)}
.sw .frame{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;min-width:0}
.sw .frame-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.sw .frame-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.sw .frame-bar i:nth-child(1){background:#f26b5b}
.sw .frame-bar i:nth-child(2){background:#f4bf4f}
.sw .frame-bar i:nth-child(3){background:#3dc06c}
.sw .frame-bar span{margin-left:10px;font-family:var(--f-mono);font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw .frame img{width:100%;aspect-ratio:880/396;object-fit:cover;background:var(--surface-2)}
.sw .hero-visual{position:relative}
.sw .float-card{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px 14px;font-size:13px;display:flex;gap:10px;align-items:center}
.sw .float-card b{display:block;font-size:14px;color:var(--ink)}
.sw .float-card small{color:var(--ink-3)}
.sw .float-card .dot{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--f-display)}
.sw .fc1{left:-18px;bottom:-22px}
.sw .fc1 .dot{background:var(--teal)}
.sw .fc2{right:-14px;top:-20px}
.sw .fc2 .dot{background:var(--blue)}
@media (max-width:920px){
  .sw .hero .wrap{grid-template-columns:1fr}
  .sw .fc1{left:8px}
  .sw .fc2{right:8px}
}
.sw .mod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sw .mod{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;display:grid;gap:12px;align-content:start}
.sw .mod-ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue)}
.sw .mod.ai .mod-ic{background:var(--teal-soft);color:var(--teal)}
.sw .mod h3{font-size:19px}
.sw .mod p{color:var(--ink-2);font-size:15px}
.sw .ticks{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.sw .ticks li{display:flex;gap:9px;font-size:14.5px;color:var(--ink)}
.sw .ticks li::before{content:"";flex:0 0 18px;height:18px;margin-top:2px;border-radius:50%;background:var(--check) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
@media (max-width:920px){
  .sw .mod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .sw .mod-grid{grid-template-columns:1fr}
}
.sw .alt{background:var(--surface);border-block:1px solid var(--line)}
.sw .feat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;padding-block:36px}
.sw .feat+.feat{border-top:1px dashed var(--line)}
.sw .feat.rev .feat-text{order:2}
.sw .feat-text{display:grid;gap:14px;min-width:0}
.sw .feat-text h3{font-size:clamp(23px,2.6vw,30px)}
.sw .feat-text>p{color:var(--ink-2)}
.sw .tag{justify-self:start;font-family:var(--f-mono);font-size:12px;padding:4px 10px;border-radius:6px;background:var(--blue-soft);color:var(--blue)}
.sw .tag.t{background:var(--teal-soft);color:var(--teal)}
@media (max-width:920px){
  .sw .feat{grid-template-columns:1fr;gap:24px}
  .sw .feat.rev .feat-text{order:0}
}
.sw .band{background:var(--band);color:var(--band-ink);position:relative;overflow:hidden}
.sw .band::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 300px at 90% 0%,rgba(15,165,160,.35),transparent 60%),radial-gradient(600px 300px at 0% 100%,rgba(20,99,216,.35),transparent 60%);pointer-events:none}
.sw .band .wrap{position:relative}
.sw .band h2, .sw .band h3{color:#fff}
.sw .band .sec-head p{color:#b9c8e2}
.sw .ai-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.sw .ai-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sw .ai-item{background:var(--band-2);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:18px;display:grid;gap:6px}
.sw .ai-item h3{font-size:16px}
.sw .ai-item p{font-size:14px;color:#b9c8e2}
.sw .chat{background:#0d1a33;border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden}
.sw .chat-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:600;color:#fff}
.sw .chat-head i{width:9px;height:9px;border-radius:50%;background:#3ccf87}
.sw .chat-body{padding:16px;display:grid;gap:12px;font-size:14.5px}
.sw .msg{max-width:85%;padding:10px 13px;border-radius:12px;line-height:1.45}
.sw .msg.u{justify-self:end;background:#1463d8;color:#fff;border-bottom-right-radius:3px}
.sw .msg.b{background:#18294a;color:#e6eefb;border-bottom-left-radius:3px}
.sw .msg.b b{color:#7fe3dc}
.sw .chat-note{padding:10px 16px;font-size:12px;color:#8ea2c4;border-top:1px solid rgba(255,255,255,.08)}
.sw .providers{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sw .providers span{font-family:var(--f-mono);font-size:12px;padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.18);color:#dbe6f8}
@media (max-width:920px){
  .sw .ai-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .sw .ai-list{grid-template-columns:1fr}
}
.sw .bi{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.sw .pivot-box{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;min-width:0}
.sw .pivot-tools{display:flex;flex-wrap:wrap;gap:6px;padding:12px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.sw .pf{font-size:12px;padding:4px 9px;border-radius:6px;background:var(--surface);border:1px dashed var(--blue);color:var(--blue);font-weight:600}
.sw .pf.c{border-color:var(--teal);color:var(--teal)}
.sw .pf.d{border-style:solid;border-color:var(--amber);color:var(--ink)}
.sw .tbl-scroll{overflow-x:auto}
.sw table.pv{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums;min-width:520px}
.sw .pv th, .sw .pv td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.sw .pv th:first-child, .sw .pv td:first-child{text-align:left}
.sw .pv thead th{background:var(--surface-2);color:var(--ink-2);font-weight:600}
.sw .pv tr.grp td{font-weight:600;background:var(--blue-soft)}
.sw .pv tr.tot td{font-weight:700;border-top:2px solid var(--ink-3)}
.sw .pv td .bar{display:inline-block;height:6px;border-radius:3px;background:var(--teal);vertical-align:middle;margin-right:6px}
.sw .pv-note{padding:8px 12px;font-size:12px;color:var(--ink-3)}
@media (max-width:920px){
  .sw .bi{grid-template-columns:1fr}
}
.sw .att{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center}
.sw .phone{width:250px;border-radius:34px;padding:12px;background:#0c1426;box-shadow:var(--shadow);margin-inline:auto}
.sw .screen{border-radius:24px;background:#f3f6fb;padding:18px 14px;display:grid;gap:10px;justify-items:center;color:#111827;font-family:var(--f-body)}
.sw .screen .clock{font-family:var(--f-display);font-size:30px;font-weight:800}
.sw .screen .dt{font-size:11px;color:#6b7280;margin-top:-8px}
.sw .screen .who{font-weight:600;font-size:14px}
.sw .selfie{width:74px;height:74px;border-radius:50%;background:linear-gradient(160deg,#c8d6ea,#8fa5c4);display:grid;place-items:center}
.sw .punch{width:118px;height:118px;border-radius:50%;background:linear-gradient(145deg,#22c55e,#15803d);color:#fff;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:18px;box-shadow:0 8px 20px rgba(0,0,0,.2);text-align:center;line-height:1.2}
.sw .loc{width:100%;font-size:10.5px;background:#fff;border-radius:10px;padding:8px;color:#374151;line-height:1.45}
.sw .loc b{color:#15803d}
@media (max-width:820px){
  .sw .att{grid-template-columns:1fr}
}
.sw .cmp-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.sw table.cmp{border-collapse:collapse;width:100%;min-width:620px;font-size:15px}
.sw .cmp th, .sw .cmp td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.sw .cmp thead th{font-family:var(--f-display);font-size:15px;background:var(--surface-2)}
.sw .cmp thead th.us{background:var(--blue);color:#fff}
.sw .cmp td.us{background:var(--blue-soft);font-weight:600;color:var(--ink)}
.sw .cmp td:not(.us):not(:first-child){color:var(--ink-3)}
.sw .cmp tr:last-child td{border-bottom:0}
.sw .ind{display:flex;flex-wrap:wrap;gap:10px}
.sw .ind span{padding:9px 15px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-weight:500;font-size:15px}
.sw .slider{margin-top:36px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sw .track{display:flex;gap:16px;width:max-content;animation:swslide 60s linear infinite}
.sw .slider:hover .track{animation-play-state:paused}
@keyframes swslide{to{transform:translateX(calc(-50% - 8px))}}
.sw .track .client{width:300px;flex:0 0 300px}
.sw .yrs.ini{background:var(--blue-soft)}
.sw .yrs.ini b{color:var(--blue);font-size:20px}
@media (prefers-reduced-motion:reduce){
  .sw .track{animation:none;flex-wrap:wrap;width:auto}
  .sw .track [aria-hidden="true"]{display:none}
}
.sw .client{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;align-items:center;gap:16px}
.sw .yrs{flex:0 0 64px;height:64px;border-radius:12px;background:var(--teal-soft);display:grid;place-items:center;text-align:center;line-height:1}
.sw .yrs b{font-family:var(--f-display);font-size:24px;color:var(--teal);display:block}
.sw .yrs small{font-size:10px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.sw .client h3{font-size:16px}
.sw .client p{font-size:13.5px;color:var(--ink-3)}
.sw .contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;background:linear-gradient(135deg,var(--blue),var(--teal));border-radius:20px;padding:44px;color:#fff}
.sw .contact h2{color:#fff;font-size:clamp(26px,3.4vw,38px)}
.sw .contact-info{display:grid;gap:16px;align-content:start}
.sw .contact-info p{color:#e8f2ff}
.sw .ci{display:grid;gap:2px}
.sw .ci small{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#cfe4ff}
.sw .ci span{font-size:16.5px;font-weight:600;user-select:all}
.sw form.demo{background:var(--surface);color:var(--ink);border-radius:14px;padding:24px;display:grid;gap:12px}
.sw form.demo h3{font-size:19px}
.sw .fld{display:grid;gap:4px}
.sw .fld label{font-size:13px;font-weight:600;color:var(--ink-2)}
.sw .fld input, .sw .fld select, .sw .fld textarea{font:inherit;font-size:15px;padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.sw .fld input:focus, .sw .fld select:focus, .sw .fld textarea:focus{outline:2px solid var(--blue);border-color:transparent}
.sw .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sw .form-msg{font-size:14px;color:var(--check);min-height:20px}
@media (max-width:820px){
  .sw .contact{grid-template-columns:1fr;padding:28px 20px}
  .sw .two{grid-template-columns:1fr}
}
.sw footer{padding-block:40px;border-top:1px solid var(--line);background:var(--surface)}
.sw .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;font-size:14px;color:var(--ink-2)}
.sw .foot h4{font-family:var(--f-display);font-size:14px;margin:0 0 10px;color:var(--ink)}
.sw .foot ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.sw .foot a{color:var(--ink-2);text-decoration:none}
.sw .foot a:hover{color:var(--blue)}
.sw .copy{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
@media (max-width:820px){
  .sw .foot{grid-template-columns:1fr 1fr}
}
.sw .nav-links a.on{color:var(--blue);font-weight:600}
.sw .foot{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}
@media (max-width:920px){
  .sw .foot{grid-template-columns:1fr 1fr}
}
.sw .page-hero{padding-block:56px 48px;background:
  radial-gradient(900px 380px at 90% -20%,var(--teal-soft),transparent 60%),
  radial-gradient(700px 360px at -10% 0%,var(--blue-soft),transparent 60%),var(--bg)}
.sw .page-hero .wrap{display:grid;gap:18px;max-width:1180px}
.sw .page-hero h1{font-size:clamp(32px,4.6vw,52px);font-weight:800;letter-spacing:-.02em;max-width:860px}
.sw .page-hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--blue),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.sw .page-hero p{font-size:18px;color:var(--ink-2);max-width:720px}
.sw .sub-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sw .sub-nav a{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.sw .sub-nav a:hover{border-color:var(--blue);color:var(--blue)}
.sw .stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sw .stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}
.sw .stat b{font-family:var(--f-display);font-size:30px;color:var(--navy);display:block;line-height:1.1}
.sw .stat span{font-size:14px;color:var(--ink-3)}
@media (max-width:820px){
  .sw .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.sw .vm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.sw .vm article{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;display:grid;gap:10px;align-content:start}
.sw .vm h3{font-size:20px}
.sw .vm p{color:var(--ink-2)}
@media (max-width:760px){
  .sw .vm{grid-template-columns:1fr}
}
.sw .tagline{margin-top:18px;padding:22px 26px;border-radius:14px;background:var(--navy);color:#fff;font-family:var(--f-display);font-size:clamp(18px,2.4vw,24px);font-weight:700}
.sw .tagline small{display:block;font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#9fd8d4;margin-bottom:6px}
.sw .values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sw .value{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:grid;gap:8px;align-content:start}
.sw .value .vi{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal)}
.sw .value h3{font-size:18px}
.sw .value p{font-size:14.5px;color:var(--ink-2)}
@media (max-width:920px){
  .sw .values{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .sw .values{grid-template-columns:1fr}
}
.sw .products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sw .product{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;gap:6px;align-content:start}
.sw .product h3{font-size:17px}
.sw .product p{font-size:14px;color:var(--ink-2)}
.sw .product.main{border-color:var(--blue);background:var(--blue-soft)}
@media (max-width:920px){
  .sw .products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .sw .products{grid-template-columns:1fr}
}
.sw .md{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:36px}
.sw .md-photo{width:100%;max-width:260px;aspect-ratio:4/5;border-radius:16px;background:linear-gradient(160deg,var(--blue-soft),var(--teal-soft));overflow:hidden;display:grid;place-items:center}
.sw .md-photo img{width:100%;height:100%;object-fit:cover}
.sw .md-photo .ph{font-family:var(--f-display);font-size:56px;font-weight:800;color:var(--blue)}
.sw .md-name{margin-top:14px}
.sw .md-name b{display:block;font-family:var(--f-display);font-size:18px}
.sw .md-name span{font-size:14px;color:var(--ink-3)}
.sw .md-text{display:grid;gap:14px;font-size:17px;color:var(--ink-2);max-width:68ch}
.sw .md-text .q{font-family:var(--f-display);font-size:clamp(20px,2.4vw,26px);color:var(--ink);line-height:1.35;font-weight:600}
.sw .md-text .sign{font-family:var(--f-display);color:var(--ink);font-weight:700}
@media (max-width:760px){
  .sw .md{grid-template-columns:1fr;padding:24px}
  .sw .md-photo{max-width:200px}
}
.sw .team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sw .team article{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:grid;gap:8px;align-content:start}
.sw .team h3{font-size:17px}
.sw .team p{font-size:14px;color:var(--ink-2)}
@media (max-width:920px){
  .sw .team{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .sw .team{grid-template-columns:1fr}
}
.sw .social{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;align-items:start}
.sw .social-text{display:grid;gap:14px}
.sw .social-text p{color:var(--ink-2)}
.sw .gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sw .gallery figure{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(160deg,var(--teal-soft),var(--blue-soft));display:grid;place-items:center}
.sw .gallery figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.sw .gallery figure:last-child{grid-column:span 3;aspect-ratio:3/1}
.sw .gallery img{width:100%;height:100%;object-fit:cover}
.sw .gallery .ph{font-size:13px;color:var(--ink-3);padding:8px;text-align:center}
@media (max-width:820px){
  .sw .social{grid-template-columns:1fr}
}
.sw .perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sw .perk{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:grid;gap:8px;align-content:start}
.sw .perk h3{font-size:17px}
.sw .perk p{font-size:14.5px;color:var(--ink-2)}
@media (max-width:820px){
  .sw .perks{grid-template-columns:1fr}
}
.sw .stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.sw .stack span{font-family:var(--f-mono);font-size:12.5px;padding:5px 10px;border-radius:6px;background:var(--blue-soft);color:var(--blue)}
.sw .roles{display:grid;gap:14px}
.sw .role{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
.sw .role h3{font-size:18px}
.sw .role p{font-size:14.5px;color:var(--ink-2);margin-top:4px}
.sw .role .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sw .role .meta span{font-size:12.5px;padding:3px 9px;border-radius:6px;background:var(--surface-2);color:var(--ink-2)}
@media (max-width:640px){
  .sw .role{grid-template-columns:1fr}
}
.sw .apply{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;background:linear-gradient(135deg,var(--blue),var(--teal));border-radius:20px;padding:44px;color:#fff}
.sw .apply h2{color:#fff;font-size:clamp(26px,3.4vw,36px)}
.sw .apply-info{display:grid;gap:14px;align-content:start}
.sw .apply-info p{color:#e8f2ff}
@media (max-width:820px){
  .sw .apply{grid-template-columns:1fr;padding:28px 20px}
}
.sw .yrs-since{font:inherit!important;color:inherit!important;display:inline!important}

/* ================================================================================================
   >>> BREAKPOINT - ERP ka site.css  html, body { height:100%; overflow:hidden }  rakhta hai (grid ke liye).
   Website par poora page scroll hona chahiye. Ye file sirf website pages par load hoti hai
   (HeadContent), isliye ERP ki screens par iska asar nahi.
   ================================================================================================ */
html, body { height: auto !important; overflow: visible !important; display: block !important; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { background: #f4f7fc !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.sw { color-scheme: light; min-height: 100vh; }
.sw button { font-family: var(--f-body); }

/* ---------- notice patti ---------- */
.sw .notice { background: var(--navy); color: #fff; font-size: 14px; text-align: center; padding: 8px 16px; }
.sw .notice a { color: #9fe6e0; font-weight: 600; margin-left: 8px; }

/* ---------- nav : App button ---------- */
.sw .btn-app { background: var(--navy); color: #fff; }
.sw .btn-app:hover { transform: translateY(-1px); }
.sw .btn-app svg { flex: 0 0 auto; }
.sw .nav-btns { display: flex; gap: 10px; align-items: center; }
@media (max-width: 920px) { .sw .nav-btns { margin-left: auto; } .sw .nav-btns .btn-primary { display: none; } }

/* ---------- hero slider ---------- */
.sw .slide-copy { display: grid; gap: 20px; min-width: 0; }
.sw .slide-copy h1 { min-height: 2.3em; }
.sw .slide-copy > p { min-height: 4.8em; }
.sw .slider-ctl { display: flex; align-items: center; gap: 10px; }
.sw .dots { display: flex; gap: 8px; }
.sw .dot-btn { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: var(--line); cursor: pointer; }
.sw .dot-btn.on { width: 28px; border-radius: 6px; background: var(--blue); }
.sw .arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.sw .arrow:hover { border-color: var(--blue); color: var(--blue); }
.sw .hero .frame img.contain { object-fit: contain; background: var(--surface); padding: 24px; }
.sw .fade { animation: swfade .5s ease; }
@keyframes swfade { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sw .fade { animation: none; } }
.sw .load-err { background: #fdecea; color: #b91c1c; padding: 8px 16px; font-size: 13px; text-align: center; }

/* ---------- testimonials ---------- */
.sw .testi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sw .testi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; gap: 14px; align-content: start; }
.sw .testi-top { display: flex; gap: 14px; align-items: center; }
.sw .testi-logo { flex: 0 0 64px; height: 64px; border-radius: 12px; background: var(--blue-soft); display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); }
.sw .testi-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 6px; }
.sw .testi-logo b { font-family: var(--f-display); font-size: 20px; color: var(--blue); }
.sw .testi h3 { font-size: 16px; }
.sw .testi small { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.sw .testi blockquote { margin: 0; font-size: 15.5px; color: var(--ink); padding-left: 14px; border-left: 3px solid var(--teal); }
.sw .play { justify-self: start; display: inline-flex; align-items: center; gap: 8px; border: 0; background: #e8343a; color: #fff; padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; }
.sw .play:hover { filter: brightness(1.08); }
.sw .more { margin-top: 24px; display: flex; justify-content: center; }
@media (max-width: 920px) { .sw .testi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sw .testi-grid { grid-template-columns: 1fr; } }

/* ---------- video popup ---------- */
.sw .modal { position: fixed; inset: 0; z-index: 100; background: rgba(5, 12, 24, .78); display: grid; place-items: center; padding: 16px; }
.sw .modal-box { width: min(960px, 100%); background: #000; border-radius: 14px; overflow: hidden; position: relative; }
.sw .modal-box iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.sw .modal-close { position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: #111; font-size: 20px; cursor: pointer; }
.sw .modal-cap { background: var(--surface); color: var(--ink); padding: 10px 16px; font-size: 14px; }

/* ---------- team photo ---------- */
.sw .member { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: grid; }
.sw .member-photo { aspect-ratio: 1 / 1; background: linear-gradient(160deg, var(--blue-soft), var(--teal-soft)); display: grid; place-items: center; }
.sw .member-photo img { width: 100%; height: 100%; object-fit: cover; }
.sw .member-photo b { font-family: var(--f-display); font-size: 42px; color: var(--blue); }
.sw .member-info { padding: 16px; display: grid; gap: 2px; }
.sw .member-info h3 { font-size: 17px; }
.sw .member-info span { font-size: 14px; color: var(--ink-2); }
.sw .member-info small { font-size: 12.5px; color: var(--teal); font-weight: 600; }

/* ---------- client logo (slider) ---------- */
.sw .yrs.logo { background: #fff; border: 1px solid var(--line); overflow: hidden; }
.sw .yrs.logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

/* ---------- careers : no openings ---------- */
.sw .empty { background: var(--surface); border: 1px dashed var(--line); border-radius: 14px; padding: 24px; color: var(--ink-2); }
.sw .team .member { padding: 0; gap: 0; }

/* ================================================================================================
   >>> BREAKPOINT - UPAR KI MENU PATTI : blue (Business AI "Report assistant" card wala rang #123372)
   ================================================================================================ */
.sw .nav { background: #123372; border-bottom: 1px solid #0a2350; backdrop-filter: none; }
.sw .nav .wrap { min-height: 70px; }
.sw .nav-links a { color: #dbe6f8; }
.sw .nav-links a:hover { color: #ffffff; }
.sw .brand-logo { height: 44px; width: auto; display: block; }
.sw footer .brand-logo { height: 40px; }
.sw .nav .btn-primary { background: #1463d8; color: #fff; box-shadow: none; }
.sw .btn-app { background: #ffffff; color: #123372; }
.sw .btn-app:hover { background: #e6eefb; }
.sw .notice { background: #0a2350; }
@media (max-width: 520px) { .sw .brand-logo { height: 34px; } }

/* >>> TEAM + TESTIMONIAL slider (client slider jaisa) */
.sw .track.slow { animation-duration: 90s; }
.sw .track.rev { animation-direction: reverse; }
.sw .track .member { width: 220px; flex: 0 0 220px; }
.sw .track .testi { width: 340px; flex: 0 0 340px; }
.sw .testi-head { margin-top: 56px; margin-bottom: 0; }

/* >>> SOCIAL WORK photo slider (team slider jaisa) */
.sw .track .pic { margin: 0; width: 320px; flex: 0 0 320px; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.sw .track .pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.sw .track .pic figcaption { padding: 10px 14px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 520px) { .sw .track .pic { width: 260px; flex-basis: 260px; } }

/* >>> HAMARI YATRA : timeline (desktop me aadi line, mobile me khadi) */
.sw .timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; position: relative; }
.sw .timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--line), var(--blue), var(--teal)); }
.sw .tl-item { position: relative; padding-top: 34px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.sw .tl-dot { position: absolute; top: 0; left: 0; width: 21px; height: 21px; border-radius: 50%; background: var(--surface); border: 4px solid var(--blue); }
.sw .tl-item:last-child .tl-dot { border-color: var(--teal); background: var(--teal); }
.sw .tl-year { font-family: var(--f-display); font-size: 30px; line-height: 1; color: var(--navy); }
.sw .tl-tech { display: flex; flex-wrap: wrap; gap: 6px; }
.sw .tl-tech span { font-family: var(--f-mono); font-size: 12px; padding: 3px 8px; border-radius: 6px; background: var(--blue-soft); color: var(--blue); }
.sw .tl-item:last-child .tl-tech span { background: var(--teal-soft); color: var(--teal); }
.sw .tl-item h3 { font-size: 17px; }
.sw .tl-item p { font-size: 14.5px; color: var(--ink-2); }
.sw .tl-gen { justify-self: start; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--navy); color: #fff; }
@media (max-width: 920px) {
  .sw .timeline { grid-template-columns: 1fr; gap: 26px; padding-left: 34px; }
  .sw .timeline::before { left: 9px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; background: linear-gradient(180deg, var(--line), var(--blue), var(--teal)); }
  .sw .tl-item { padding-top: 0; }
  .sw .tl-dot { left: -34px; }
}

/* >>> CLIENT KAHAN HAIN (India + bahar) */
.sw .where { margin-top: 22px; display: grid; gap: 12px; }
.sw .where-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sw .where-row > b { font-family: var(--f-display); font-size: 15px; min-width: 170px; }
.sw .where-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sw .where-chips span { padding: 6px 12px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 14px; font-weight: 500; }
.sw .where-chips.abroad span { background: var(--teal-soft); color: var(--teal); }

/* >>> SOCIAL WORK : har slide ek kaam, 1 - 4 photo */
.sw .track .work { width: 340px; flex: 0 0 340px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: grid; }
.sw .work-pics { aspect-ratio: 4 / 3; display: grid; gap: 3px; background: linear-gradient(160deg, var(--teal-soft), var(--blue-soft)); }
.sw .work-pics img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }
.sw .work-pics.n0, .sw .work-pics.n1 { grid-template-columns: 1fr; }
.sw .work-pics.n0 { place-items: center; }
.sw .work-pics.n2 { grid-template-columns: 1fr 1fr; }
.sw .work-pics.n3, .sw .work-pics.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.sw .work-pics.n3 img:first-child { grid-row: span 2; }
.sw .work-pics .ph { font-size: 13px; color: var(--ink-3); }
.sw .work-info { padding: 14px 16px; display: grid; gap: 2px; }
.sw .work-info h3 { font-size: 16px; }
.sw .work-info span { font-size: 13px; color: var(--teal); font-weight: 600; }
.sw .work-info p { font-size: 14px; color: var(--ink-2); }
.sw .tl-gen + .tl-gen { margin-top: -2px; background: var(--teal); }
@media (max-width: 520px) { .sw .track .work { width: 280px; flex-basis: 280px; } }

/* >>> TEAM : family member ka card (blue shade) - table me family = 1 */
.sw .member.family { border: 2px solid #1463d8; background: #eaf2ff; }
.sw .member.family .member-photo { background: linear-gradient(160deg, #dbe8ff, #b9d2ff); }
.sw .member.family .member-photo b { color: #123372; }
.sw .member.family .member-info { background: #123372; }
.sw .member.family .member-info h3 { color: #ffffff; }
.sw .member.family .member-info span { color: #dbe6f8; }
.sw .member.family .member-info small { color: #7fe3dc; }

/* >>> BREAKPOINT - HERO : heading + text 25% chhota (pehle h1 clamp(34px,5vw,56px), p 16px) */
.sw .hero h1 { font-size: clamp(25.5px, 3.75vw, 42px); }
.sw .hero .slide-copy p { font-size: 12px; }

/* >>> BREAKPOINT - MOBILE : 2 phone (Attendance + Catalog report) */
.sw .phones { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; align-items: flex-start; }
.sw .phone-wrap { display: grid; gap: 8px; justify-items: center; }
.sw .phone-cap { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sw .screen.cat { justify-items: stretch; gap: 8px; padding: 14px 10px; }
.sw .cat-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--f-display); font-weight: 800; font-size: 15px; }
.sw .cat-head small { font-family: var(--f-body); font-weight: 500; font-size: 10px; color: #6b7280; }
.sw .cat-filter { display: flex; gap: 5px; flex-wrap: wrap; }
.sw .cat-filter span { font-size: 9.5px; background: #fff; border: 1px solid #d9e3f0; border-radius: 999px; padding: 2px 7px; color: #374151; }
.sw .cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sw .cat-card { background: #fff; border: 1px solid #dbe3ee; border-radius: 9px; overflow: hidden; font-size: 9.5px; line-height: 1.3; text-align: center; }
.sw .cat-card.sel { border-color: #2a78d6; box-shadow: 0 0 0 2px rgba(42,120,214,.3); }
.sw .cat-card .t { font-weight: 700; font-size: 10.5px; padding: 4px 4px 0; color: #0f172a; }
.sw .cat-card .s { color: #6b7280; padding: 0 4px; }
.sw .cat-card .q { color: #16683a; font-weight: 600; padding: 2px 4px 5px; }
.sw .cat-sw { aspect-ratio: 1 / 1; }
.sw .cat-sw.s1 { background: repeating-linear-gradient(45deg, #9cc7ee 0 6px, #c9e1f6 6px 12px); }
.sw .cat-sw.s2 { background: repeating-linear-gradient(90deg, #d8c39a 0 3px, #e9dcc0 3px 7px); }
.sw .cat-sw.s3 { background: radial-gradient(circle at 30% 30%, #f3a6b8 0 18%, transparent 19%) 0 0 / 22px 22px, #fbe0e7; }
.sw .cat-sw.s4 { background: repeating-linear-gradient(135deg, #2b4a7e 0 2px, #3a5f9b 2px 5px); }
.sw .cat-bar { display: flex; justify-content: space-between; align-items: center; background: #123372; color: #fff; border-radius: 9px; padding: 7px 10px; font-size: 10.5px; font-weight: 600; }
@media (max-width: 1100px) { .sw .att { grid-template-columns: 1fr; } }