/* =========================================================
   AdsLogic — RESPONSIVE
   Breakpoints: 1180 (small laptop), 1024 (tablet),
   720 (phone: app-style layout), 380 (small phone)
   ========================================================= */

/* bottom tab bar: only on phones (see 720px block) */
.tabbar{display:none}

@media (max-width:1340px){
  .bub.b2{right:-36px}
}
@media (max-width:1180px){
  .nav-main>a,.nav-main>button{padding:9px 11px;font-size:.9rem}
  .svc-grid,.why-grid,.vals,.deliv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mega-in{grid-template-columns:1fr 1fr 1fr}
  .mega-side{display:none}
  .faqx,.hfaq{grid-template-columns:minmax(0,1fr) 350px;gap:44px}
  .bub.b1{left:-50px}.bub.b2{right:-30px}
}

@media (max-width:1024px){
  :root{--head-h:60px}
  .nav-main,.head-cta .btn{display:none}
  .menu-toggle{display:inline-grid}
  .head-cta{margin-left:auto}
  .head-in{padding-left:16px;padding-right:8px;border-radius:18px}
  .sec{padding:84px 0}
  .hero{padding:calc(30px + 10px + var(--head-h)) 0 64px}
  .hero-grid,.two,.phead-grid,.contact-grid,.sec-head,.foot-cta,.feature-proj{grid-template-columns:minmax(0,1fr)}
  .hero-grid{gap:44px}
  .hero .lead{max-width:none}
  .sec-head{gap:16px}
  .reel-stage{max-width:640px;width:100%;margin:0 auto}
  .bub.b1{left:-84px;top:150px}.bub.b2{right:-84px;bottom:170px}
  .faqx,.hfaq{grid-template-columns:minmax(0,1fr);gap:40px}
  .phone-col{position:static;order:-1}
  .phone-glow{inset:-10px}
  .phone-col{position:static}
  .bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chartg{grid-column:1/-1}
  .gauge{grid-column:1/-1}
  .gauge .ring{width:120px}
  .pillars{grid-template-columns:1fr}
  .steps,.steps.n6,.steps.n7{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}
  .vgrid,.t-grid,.ctx{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-cols{grid-template-columns:1fr 1fr}
  .cta-band{grid-template-columns:minmax(0,1fr);padding:44px}
  .tl-item{grid-template-columns:1fr;gap:10px}
  .phead{padding:calc(40px + 10px + var(--head-h)) 0 60px}
  .phead-grid{gap:28px}
}

@media (max-width:900px){
  .bub{display:none}
}

/* =========================================================
   PHONES — app-style: smaller type, compact cards,
   bottom tab bar, popup chat
   ========================================================= */
@media (max-width:720px){
  :root{--head-h:56px;--tab-h:64px}
  html{font-size:15px}
  body{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px))}
  .wrap{padding:0 16px}
  .mega>.wrap{padding:0 16px}

  /* header */
  .site-head{padding-top:8px}
  .site-head .head-in{width:calc(100% - 16px)}
  .head-in{padding-left:14px;padding-right:6px;border-radius:16px;gap:10px}
  .brand .mk{height:28px}.brand .wd{height:12px}
  .head-cta .icon-btn{width:40px;height:40px}
  .head-cta .icon-btn svg{width:19px;height:19px}
  main{margin-top:calc(-8px - var(--head-h))}

  /* type + spacing */
  h1{font-size:1.95rem;letter-spacing:-.04em}
  h2{font-size:1.6rem;letter-spacing:-.035em}
  h3{font-size:1.05rem}
  .lead{font-size:1rem}
  .eyebrow{font-size:.68rem;margin-bottom:10px;gap:8px}
  .eyebrow::before{width:16px}
  .sec{padding:48px 0}
  .sec.tight{padding:36px 0}
  .sec-head{margin-bottom:22px;gap:10px}
  .sec-head p{font-size:.93rem}
  .btn{min-height:44px;padding:0 18px;font-size:.9rem;gap:8px}
  .btn svg{width:17px;height:17px}
  .btn-row{gap:8px}
  .link{font-size:.92rem}
  .tag{font-size:.72rem;padding:4px 9px}

  /* hero */
  .hero{padding:calc(22px + 8px + var(--head-h)) 0 36px}
  .hero h1{font-size:2rem}
  .h-typed{min-height:2.1em}
  .hero .lead{margin:12px 0 18px;font-size:1rem}
  .hero .btn-row{display:grid;grid-template-columns:1fr auto}
  .hero .btn-row .btn{width:100%}
  .hero-trust{gap:6px;margin-top:18px;padding-top:0;border:0}
  .hero-trust span{font-size:.76rem;padding:6px 10px;border-radius:999px;background:var(--paper);gap:6px}
  .hero-trust svg{width:14px;height:14px}
  .hero-grid{gap:26px}

  .reel-stage{padding:14px 10px 12px;border-radius:22px}
  .reel{border-radius:18px}
  .reel-top{padding:10px 12px}
  .reel-top b{font-size:.84rem}
  .reel-screen{height:268px}
  .scene{padding:12px 14px}
  .sc-big b{font-size:1.8rem}
  .bars{height:120px}
  .reel-bar{padding:9px 12px}
  .reel-bar .pp{width:32px;height:32px}
  .reel-bar .nm{display:none}
  .svc-switch{margin:12px -10px 0;padding:2px 10px 4px;gap:6px}
  .svc-switch button{font-size:.76rem;padding:5px 10px 5px 6px}
  .svc-switch button .blogo{width:18px;height:18px}
  .stage-cap{font-size:.7rem;margin-top:8px}

  .marquee{padding:14px 0}
  .marq-item{font-size:1rem;gap:10px;padding-left:22px}
  .marq-item .mi{width:32px;height:32px;border-radius:10px}
  .marq-item .mi svg{width:17px;height:17px}
  .marq-item::after{margin-left:22px;width:6px;height:6px}

  /* services: app list rows */
  .svc-grid{grid-template-columns:minmax(0,1fr);gap:8px}
  .svc-card{display:grid;grid-template-columns:42px minmax(0,1fr) 20px;grid-template-areas:"ic h go" "ic p go";column-gap:12px;row-gap:2px;align-items:center;min-height:0;padding:12px 14px;border-radius:16px}
  .svc-card:hover{transform:none}
  .svc-card .top{display:contents}
  .svc-card .ic{grid-area:ic;width:42px;height:42px;border-radius:12px;align-self:center}
  .svc-card .ic svg{width:20px;height:20px}
  .svc-card .num,.svc-card .core{display:none}
  .svc-card h3{grid-area:h;font-size:.98rem}
  .svc-card p{grid-area:p;font-size:.8rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .svc-card .go{grid-area:go;margin:0;padding:0;font-size:0;justify-content:flex-end}
  .svc-card .go svg{width:18px;height:18px}

  /* why: 2 x 2 tiles */
  .why-grid,.vals{grid-template-columns:1fr 1fr;gap:8px}
  .why-card{padding:16px 14px;border-radius:16px}
  .why-card .n{font-size:1.7rem;margin-bottom:10px}
  .why-card .ic{width:32px;height:32px;right:12px;top:14px;border-radius:10px}
  .why-card .ic svg{width:16px;height:16px}
  .why-card h3{font-size:.92rem;margin-bottom:4px}
  .why-card p{font-size:.78rem;line-height:1.45}
  .vals>div{padding:14px;border-radius:16px}
  .vals>div::before{margin-bottom:10px;width:20px}
  .vals b{font-size:.9rem}
  .vals span{font-size:.78rem;line-height:1.45;display:block}
  .why-strip{padding:16px;margin-top:14px;border-radius:16px;gap:12px}
  .why-strip p{font-size:.9rem}

  /* board */
  .board{padding:14px 12px;border-radius:22px}
  .board-top{gap:12px;margin-bottom:14px}
  .board-id .blogo{width:40px;height:40px;border-radius:12px;padding:8px}
  .board-id h3{font-size:1.1rem}
  .board-id .sub{font-size:.76rem}
  .tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -12px;padding:2px 12px 4px;scrollbar-width:none;width:calc(100% + 24px)}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:none;font-size:.78rem;padding:6px 11px 6px 7px}
  .tabs button .blogo{width:18px;height:18px}
  .bgrid{gap:8px}
  .metric{padding:12px 12px 10px;border-radius:14px}
  .metric .lb{font-size:.74rem}
  .metric b{font-size:1.15rem;margin:4px 0 0}
  .metric small{display:none}
  .chartg{padding:12px 14px;border-radius:14px}
  .chartg .lb{font-size:.74rem}
  .gauge{border-radius:14px;padding:12px}
  .gauge .ring{width:96px}
  .ring b{font-size:1.1rem}
  .board-foot{font-size:.72rem;margin-top:10px}

  /* projects + misc grids */
  .proj{flex-basis:78vw;border-radius:18px}
  .proj .body{padding:14px 16px 16px;gap:6px}
  .proj h3{font-size:1rem}
  .proj .svcs span{font-size:.72rem}
  .car-head{margin-bottom:14px}
  .car-ctrls button{width:40px;height:40px}
  .car-ctrls svg{width:18px;height:18px}
  .track{gap:12px;padding-bottom:14px}
  .deliv{grid-template-columns:1fr 1fr;gap:8px}
  .deliv>div{padding:14px;border-radius:14px}
  .deliv b{font-size:.9rem}
  .deliv span{font-size:.78rem;display:block;line-height:1.45}
  .vgrid,.t-grid,.ctx,.int-grid,.inc,.fgrid{grid-template-columns:minmax(0,1fr)}
  .inc{gap:8px}
  .inc li{padding:12px;border-radius:14px;gap:10px}
  .inc li svg{width:16px;height:16px}
  .inc b{font-size:.92rem}
  .inc span{font-size:.8rem}
  .ctx{gap:8px}
  .ctx a{padding:16px;border-radius:16px}
  .ctx a b{font-size:.98rem}
  .pillar{padding:20px;border-radius:18px}
  .pillar h3{font-size:1.15rem}
  .dt th,.dt td{white-space:nowrap}
  .kgrid{grid-template-columns:1fr 1fr}
  .k b{font-size:1.05rem}
  .panel{border-radius:18px}
  .acc .q{font-size:.95rem;padding:16px 2px}
  .acc .q svg{width:30px;height:30px;padding:7px}
  .acc .a{padding-right:6px;font-size:.92rem}
  .steps,.steps.n6,.steps.n7{grid-template-columns:minmax(0,1fr)}
  .step{padding:0 0 16px 50px}
  .step .n{width:32px;height:32px;font-size:.74rem}
  .step::before,.step::after{left:15px;right:auto;top:32px;bottom:0;width:2px;height:auto}
  .step::after{transform:scaleY(0);transform-origin:top}
  .step.in::after{transform:scaleY(1)}
  .step:last-child::before,.step:last-child::after{display:none}
  .step h3{font-size:.98rem}
  .step p{font-size:.84rem}
  .devices{height:240px}.dev.desk{height:180px;width:90%}.dev.tab{display:none}.dev.ph{height:140px;width:28%}
  .tl{padding-left:56px}.tl::before,.tl .bar{left:19px}.tl-item{padding:16px 0 28px}.tl-item .n{left:-56px;top:12px;width:40px;height:40px;font-size:.82rem}
  .tl-item h3{font-size:1.4rem}
  .tl-item p{font-size:.95rem}
  .flow .branch{grid-template-columns:1fr;padding-left:0}
  .form-card{padding:18px;border-radius:18px}
  .wizard{padding:16px;border-radius:18px}
  .chip{padding:9px 13px;font-size:.86rem}
  .info-card{padding:20px;border-radius:18px}
  .feature-proj{border-radius:18px;margin-bottom:28px}
  .feature-proj .body{padding:18px}
  .feature-proj .thumb{min-height:190px}
  .filters{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 16px;padding:2px 16px 4px;scrollbar-width:none}
  .filters::-webkit-scrollbar,.fq-cats::-webkit-scrollbar{display:none}
  .filters button,.fq-cats button{flex:none;padding:7px 13px;font-size:.82rem}
  .fq-cats{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 12px;padding:2px 16px 4px;scrollbar-width:none}
  .fq-item{padding:12px 14px;font-size:.92rem;border-radius:14px}
  .fq-item svg{width:28px;height:28px;padding:6px}
  .search input{height:48px}
  .chat{height:420px}
  .empty-box{padding:28px 18px}

  /* page head */
  .phead{padding:calc(26px + 8px + var(--head-h)) 0 34px}
  .phead h1{font-size:1.85rem}
  .phead .lead{margin-top:12px;font-size:.98rem}
  .crumbs{font-size:.78rem;margin-bottom:16px}
  .phead-grid{gap:18px}
  .phead .side{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px}
  .phead .side .ic{width:48px;height:48px;border-radius:14px}
  .phead .side .ic svg{width:24px;height:24px}
  .phead .side .ic.brandlogo svg{width:28px;height:28px}

  /* CTA + footer */
  .cta-band{padding:24px 20px;border-radius:22px;gap:18px}
  .cta-band h2{font-size:1.45rem}
  .cta-band p{font-size:.92rem;margin-top:8px}
  .foot-in{padding-top:52px}
  .foot-big{font-size:2.5rem}
  .foot-cta{padding-bottom:36px;gap:18px}
  .foot-cta p{font-size:.98rem;margin-top:12px}
  .foot-cols{grid-template-columns:1fr 1fr;gap:26px 18px;padding:34px 0}
  .foot-cols>div:first-child,.foot-cols>div:last-child{grid-column:1/-1}
  .foot-cols a{font-size:.88rem}
  .foot-cols ul{gap:8px}
  .foot-bar .wrap{flex-direction:column;align-items:flex-start;padding-right:16px;font-size:.8rem;gap:8px}
  .foot-bar a{margin:0 14px 0 0}

  /* home FAQ */
  .hfaq{gap:24px}
  .hfaq .lead{margin:10px 0 18px}
  .hfaq-list{gap:8px;margin-bottom:16px}
  .hfaq-list button{padding:12px 14px;font-size:.88rem;border-radius:14px}
  .hfaq-list button svg{width:28px;height:28px;padding:6px}
  .hfaq-feat{font-size:.8rem;gap:6px 14px}

  /* app-style bottom tab bar */
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:95;height:var(--tab-h);padding:6px;border-radius:20px;background:rgba(24,24,24,.93);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:14px;text-decoration:none;color:rgba(255,255,255,.6);font-size:.66rem;font-weight:700;transition:color .2s,background .2s}
  .tabbar a svg{width:21px;height:21px}
  .tabbar a.active{color:#fff;background:rgba(255,255,255,.08)}
  .tabbar a.active svg{color:var(--brand)}
  body{padding-bottom:calc(var(--tab-h) + 16px + env(safe-area-inset-bottom,0px))}

  /* floating buttons sit above the tab bar */
  .fab{right:12px;bottom:calc(var(--tab-h) + 20px + env(safe-area-inset-bottom,0px));gap:8px}
  .fab .f-chat{width:50px;height:50px}
  .fab .f-chat svg{width:23px;height:23px}
  .fab .f-wa{width:44px;height:44px}
  .fab .f-wa svg{width:22px;height:22px}
  .fab .hint{display:none}
  .fab.open .f-wa{display:none}

  /* chat: WhatsApp-style tall panel from just under the top navbar to the bottom of the screen
     (it covers the bottom tab bar; the message box sits at the very bottom) */
  .cw{left:6px;right:6px;width:auto;
      top:calc(var(--head-h) + 14px + env(safe-area-inset-top,0px));
      bottom:calc(6px + env(safe-area-inset-bottom,0px));
      height:auto;max-height:none;border-radius:22px;transform-origin:bottom center}
  /* the panel has its own close (X) button, so the floating buttons and tab bar step aside while it is open */
  body.cw-open .fab,body.cw-open .tabbar{opacity:0;pointer-events:none;transform:translateY(12px)}
  .tabbar{transition:opacity .2s,transform .2s}
  body.cw-open{overflow:hidden}
  /* standard, easy-to-read text sizes on phones */
  .cw-head{padding:14px 12px 12px 14px}
  .cw-head b{font-size:15px}
  .cw-head small{font-size:12px}
  .cw-log{padding:12px 12px 8px}
  .cm2{max-width:88%}
  .cm2 .b{font-size:15px;line-height:1.45;padding:9px 12px}
  .cm2 .t{font-size:11px}
  .cm2 .ml a{font-size:13px;padding:7px 11px}
  .cw-chips button{font-size:13px;padding:7px 12px}
  .cw-in{padding:8px 10px 8px}
  .cw-in input{font-size:16px;min-height:44px;padding:0 14px}   /* 16px stops iPhone from zooming in */
  .cw-foot{font-size:11px;padding:0 12px 8px}

  /* menu sheet */
  .d-links{grid-template-columns:repeat(4,1fr)}

  /* inputs stay 16px so iPhone does not zoom in */
  input,select,textarea{font-size:16px;min-height:48px;padding:11px 14px}
}

/* short phone screens: give the chat messages more room */
@media (max-width:720px) and (max-height:640px){
  .cw{top:calc(var(--head-h) + 12px + env(safe-area-inset-top,0px));bottom:calc(4px + env(safe-area-inset-bottom,0px));border-radius:20px}
  .cw-head{padding:10px 10px 9px 12px}
  .cw-head::before{display:none}
  .cw-head .av{width:36px;height:36px}
  .cw-head .av img{width:24px}
  .cw-head .x{width:32px;height:32px}
  .cw-chips{padding:6px 10px}
  .cw-foot{display:none}
}

@media (max-width:380px){
  h1,.hero h1{font-size:1.75rem}
  .phead h1{font-size:1.65rem}
  .reel-screen{height:258px}
  .gkpis b{font-size:.9rem}
  .why-card p,.vals span{font-size:.74rem}
  .d-svcs a{font-size:.76rem}
  .hero .btn-row{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .sw .wi{transform:none}
}