/* THIRUMANI RESPONSIVE SYSTEM V2
   Mobile-first breakpoints: xs <480, sm 640, md 768, lg 1024, xl 1280 */

:root{--page-pad:16px;--content-max:1280px;--mobile-bar-h:64px}

/* Global fluid rules */
body{min-width:320px;overflow-x:hidden}
img,video,svg{max-width:100%}
.header,.section,.hero-content,.topbar,.cta-band,.contact,footer{padding-left:max(var(--page-pad),calc((100vw - var(--content-max))/2));padding-right:max(var(--page-pad),calc((100vw - var(--content-max))/2))}
.section{width:100%}
.section-head{align-items:flex-start}
.hero{min-height:unset}
.hero-content{width:100%;padding-top:56px;padding-bottom:40px}
.hero h1{font-size:clamp(36px,10vw,72px)}
.service-grid,.project-grid,.blog-grid,.split-tools,.why-grid{grid-template-columns:1fr}
.header nav{display:none}
.header{min-height:68px;gap:12px}
.brand{min-width:0;flex:1}.brand-name{font-size:18px}.brand-sub{font-size:8px}.logo-mark{width:50px;height:43px;flex:0 0 50px}
.header>.btn{display:none}
.topbar{gap:10px}.topbar span:nth-child(2),.topbar span:nth-child(3){display:none}
.hero-actions,.contact-actions{display:grid;grid-template-columns:1fr;width:100%}.hero-actions .btn,.contact-actions .btn{width:100%}
.assistant-card{position:relative;right:auto;top:auto;width:calc(100% - 32px);margin:0 16px 24px}
.viz-body{grid-template-columns:1fr}.upload-box,.viz-preview{min-height:210px}
.cta-band,.contact,footer{flex-direction:column;align-items:flex-start}
.ai-invite{left:8px;right:8px;bottom:76px;width:auto}
.floating{bottom:10px}.floating a{display:none}

/* Mobile sticky conversion bar, generated from existing floating actions */
@media(max-width:767px){
 body{padding-bottom:var(--mobile-bar-h)}
 .floating{left:0;right:0;bottom:0;height:var(--mobile-bar-h);background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 22px rgba(0,0,0,.08);display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;z-index:70}
 .floating button,.floating a{display:grid;place-items:center;border-radius:0;box-shadow:none;height:100%;font-size:13px}
 .floating button{background:#fff}.floating a{background:var(--green)}
 .assistant-card{max-height:calc(100vh - 110px);overflow:auto}
}

/* XS — phones below 480px */
@media(max-width:479px){
 :root{--page-pad:14px}
 .topbar{font-size:10px}.topbar span:first-child{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .brand-name{font-size:16px}.brand-sub{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .hero-content{padding-top:44px}.hero h1{font-size:39px}.hero p{font-size:15px}.hero .ta{font-size:16px}
 .trust-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .section{padding-top:52px;padding-bottom:52px}.section-head h2,.section h2,.cta-band h2{font-size:28px}
 .service-grid{grid-template-columns:1fr}.service-card{display:grid;grid-template-columns:112px 1fr 28px;align-items:center}.service-card img,.mesh-visual{height:96px!important}.service-card>span{padding:12px}.service-card b{position:static}.service-card small.safe-label{display:none}
 .project-grid{grid-template-columns:1fr}.project-grid img{height:210px}
 .invite-avatar{display:none}.invite-content{padding:0}.invite-actions{flex-direction:column;align-items:stretch}.invite-actions button{width:100%}
 .assistant-opt{min-height:45px}.assistant-input input{font-size:16px}
 .viz-body{gap:10px}.upload-box,.viz-preview{min-height:190px}
}

/* SM — 640px and up */
@media(min-width:640px){
 :root{--page-pad:24px}
 .service-grid,.project-grid,.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .split-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
 .viz-body{grid-template-columns:1fr}
 .hero-actions,.contact-actions{display:flex;width:auto}.hero-actions .btn,.contact-actions .btn{width:auto}
 .invite-actions{flex-direction:row}.invite-actions button{width:auto}
}

/* MD — 768px and up */
@media(min-width:768px){
 :root{--page-pad:32px}
 body{padding-bottom:0}
 .topbar span:nth-child(2),.topbar span:nth-child(3){display:inline}
 .header>.btn{display:inline-flex}
 .hero{min-height:650px}.hero-content{width:min(66%,720px);padding-top:88px;padding-bottom:64px}
 .assistant-card{position:absolute;right:32px;top:72px;width:320px;margin:0;max-height:none}
 .service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .project-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .why-grid{grid-template-columns:1fr 1fr}
 .cta-band,.contact,footer{flex-direction:row;align-items:center}
 .floating{left:auto;right:18px;bottom:18px;height:auto;background:transparent;border:0;box-shadow:none;display:flex;padding:0;width:auto}
 .floating button,.floating a{border-radius:999px;height:auto;box-shadow:0 10px 20px rgba(0,0,0,.16);padding:12px 14px}
 .floating a{display:inline-flex}
 .ai-invite{left:auto;right:22px;bottom:82px;width:380px}
}

/* LG — 1024px and up */
@media(min-width:1024px){
 :root{--page-pad:40px}
 .header nav{display:flex;gap:18px}
 .brand{min-width:245px;flex:0 1 auto}.brand-name{font-size:22px}.brand-sub{font-size:9px}
 .service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .project-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .split-tools{grid-template-columns:1.15fr .85fr}
 .viz-body{grid-template-columns:1fr 1fr}
 .assistant-card{right:max(40px,calc((100vw - var(--content-max))/2));width:330px}
}

/* XL — 1280px and up */
@media(min-width:1280px){
 :root{--page-pad:48px}
 .header nav{gap:24px}
 .service-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
 .project-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .project-grid article:first-child{grid-column:span 2}
 .project-grid article:first-child img{height:220px}
 .hero-content{padding-left:max(48px,calc((100vw - var(--content-max))/2))}
}

/* Wide screens — keep readable, never stretch indefinitely */
@media(min-width:1536px){
 .hero{max-width:1600px;margin-inline:auto;border-radius:0 0 24px 24px;overflow:hidden}
}

/* Accessibility and input-device refinements */
@media(hover:hover) and (pointer:fine){.service-card:hover{transform:translateY(-5px)}}
@media(hover:none){.service-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media print{.topbar,.header nav,.assistant-card,.ai-invite,.floating,.hero-actions,.contact-actions{display:none!important}.hero{background:#fff!important;color:#000}.hero-content{color:#000;width:100%}}