:root{
  --red:#e5321e;--orange:#ff9d12;--dark:#12161d;--text:#202631;--muted:#68717d;
  --cream:#fffaf3;--line:#eadfd0;--white:#fff;--shadow:0 24px 70px rgba(35,25,15,.11);
  --radius:24px;--max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--cream);line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}
.container{width:min(var(--max),calc(100% - 44px));margin:auto}
.header{position:sticky;top:0;z-index:1000;padding:10px 0;background:rgba(255,250,243,.84);backdrop-filter:blur(20px)}
.nav{height:78px;background:rgba(255,255,255,.93);border:1px solid rgba(234,223,208,.9);border-radius:22px;display:flex;align-items:center;padding:0 18px 0 24px;box-shadow:0 8px 30px rgba(30,25,18,.05)}
.logo{display:flex;align-items:center;min-width:300px}.logo img{width:238px;max-height:64px;object-fit:contain;object-position:left center}
.navlinks{display:flex;align-items:center;gap:34px;margin-left:auto;font-weight:700;font-size:14px}
.navlinks a{position:relative;color:#3f444c}.navlinks a:hover,.navlinks a.active{color:var(--red)}
.navlinks a.active:after{content:"";position:absolute;height:2px;background:linear-gradient(90deg,var(--red),var(--orange));left:0;right:0;bottom:-27px}
.navbtn,.btn-primary{color:#fff!important;border:0;background:linear-gradient(100deg,var(--red),var(--orange));box-shadow:0 14px 28px rgba(229,50,30,.2);border-radius:999px;padding:14px 24px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:.25s}
.navbtn:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(229,50,30,.28)}
.menu{display:none;border:0;background:none;font-size:26px;margin-left:auto}
.hero{position:relative;padding:88px 0 72px;min-height:675px;overflow:hidden}
.hero:before{content:"";position:absolute;width:650px;height:650px;border-radius:50%;right:-180px;top:-100px;background:radial-gradient(circle,#ffd59c 0,#ffe7c5 38%,rgba(255,239,216,.1) 70%,transparent 72%)}
.hero:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:220px;bottom:-260px;background:#ffe3bd88;filter:blur(5px)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:55px}
.eyebrow{font-size:13px;letter-spacing:.18em;font-weight:800;color:#59616b;margin-bottom:19px}
.eyebrow span{color:var(--orange);padding:0 8px}
h1{font-size:clamp(46px,6vw,78px);line-height:1.01;letter-spacing:-.055em;font-weight:850;margin-bottom:25px}
.grad{background:linear-gradient(90deg,var(--red),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy{font-size:18px;color:var(--muted);max-width:650px}
.actions{display:flex;gap:15px;flex-wrap:wrap;margin-top:32px}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border:1.5px solid #ed7955;border-radius:999px;color:#e34828;font-weight:800;background:#fff9f3}
.service-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px;max-width:730px}
.mini{text-align:left}.mini-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff2df;color:var(--red);border:1px solid #f5d5b0;font-weight:900;margin-bottom:9px}.mini b{font-size:13px;display:block}.mini small{color:var(--muted);font-size:12px}
.visual{position:relative;height:515px}
.device-laptop{position:absolute;width:620px;right:-80px;top:65px;transform:rotate(-5deg);filter:drop-shadow(0 28px 30px rgba(0,0,0,.2))}
.lid{height:340px;background:#161b22;border:5px solid #2e333a;border-radius:20px 20px 8px 8px;padding:14px;box-shadow:inset 0 0 0 1px #000}.screen{height:100%;border-radius:10px;background:radial-gradient(circle at 70% 30%,#243a4d,#11161d 65%);overflow:hidden;position:relative;padding:28px;color:#fff}.screen:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:#e5321e22;right:-80px;top:-70px}
.screen-brand{font-size:10px;border:1px solid #ffffff44;border-radius:5px;padding:4px 6px;display:inline-block}.screen h3{font-size:31px;line-height:1.1;max-width:260px;margin-top:60px}.screen p{font-size:11px;color:#aeb8c3;max-width:245px;margin-top:10px}.screen-chip{margin-top:22px;display:inline-block;background:#fff;color:#222;border-radius:8px;padding:8px 13px;font-size:10px;font-weight:800}
.base{height:26px;background:linear-gradient(#b7bcc2,#747a80);clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);border-radius:0 0 14px 14px}
.phone{position:absolute;z-index:5;width:175px;height:345px;right:-12px;bottom:45px;background:#101319;border:7px solid #252a30;border-radius:29px;padding:7px;box-shadow:0 24px 40px #0004;transform:rotate(4deg)}.phone-screen{height:100%;border-radius:20px;background:#fff8ed;overflow:hidden;padding:16px}.phone-top{font-size:8px;color:#8a8d91;display:flex;justify-content:space-between}.phone-logo{width:31px;height:31px;margin:22px auto 12px;border:2px solid var(--red);display:grid;place-items:center;color:var(--red);font-weight:900;border-radius:5px}.phone h4{font-size:18px;line-height:1.1;text-align:center}.phone-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:16px}.phone-card{background:#fff;border:1px solid #eadfd0;border-radius:9px;padding:11px 5px;text-align:center;font-size:8px;font-weight:700;color:#3c424a}.phone-card i{display:block;font-style:normal;font-size:15px;color:var(--red);margin-bottom:4px}
.section{padding:105px 0}.head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:46px}.kicker{font-size:12px;color:var(--red);letter-spacing:.17em;font-weight:900;text-transform:uppercase}.head h2{font-size:clamp(35px,4vw,53px);line-height:1.05;letter-spacing:-.045em;margin-top:10px}.head p{max-width:470px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;min-height:260px;transition:.3s}.card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:#efbd8d}.card-icon{width:53px;height:53px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),var(--orange));color:#fff;font-weight:900;margin-bottom:25px}.card h3{font-size:19px;margin-bottom:10px}.card p{font-size:13px;color:var(--muted)}
.dark{background:#151920;color:#fff}.dark .head p{color:#aeb4bd}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.stat{border:1px solid #30343b;border-radius:20px;padding:28px;background:#1b1f26}.stat strong{font-size:37px;font-weight:850}.stat span{display:block;color:#aab0b9;font-size:13px;margin-top:4px}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:25px}.step-num{font-size:36px;font-weight:900;color:#e8d9c5}.step h3{margin:7px 0}.step p{font-size:13px;color:var(--muted)}
.cta{width:min(var(--max),calc(100% - 44px));margin:0 auto 95px;padding:64px;border-radius:30px;background:linear-gradient(115deg,#151920,#28231e 58%,#7d2f1d);color:#fff;position:relative;overflow:hidden}.cta:after{content:"";position:absolute;width:370px;height:370px;border-radius:50%;right:-100px;top:-160px;background:#ff9d1228}.cta-inner{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:30px}.cta h2{font-size:clamp(32px,4vw,50px);line-height:1.05;max-width:700px}.cta p{color:#c0c4cb;margin-top:10px}
footer{background:#101319;color:#9ea5ae;padding:58px 0 24px}.foot{display:grid;grid-template-columns:1.4fr .7fr .9fr;gap:55px}.foot-logo{width:235px;height:auto;display:block;background:#fff;border-radius:12px;padding:8px 12px;margin-bottom:17px;object-fit:contain}.foot p,.foot a{font-size:13px}.foot h4{color:#fff;margin-bottom:13px}.foot a{display:block;margin:8px 0}.foot a:hover{color:#fff}.copy{border-top:1px solid #292e36;margin-top:38px;padding-top:19px;font-size:12px}
.contact-hero{text-align:center;padding:90px 0 50px}.contact-hero h1{font-size:clamp(45px,6vw,70px)}.contact-hero p{max-width:650px;margin:auto;color:var(--muted);font-size:17px}.contact-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:22px;padding-bottom:100px}.contact-info,.formbox{background:#fff;border:1px solid var(--line);border-radius:25px;padding:35px;box-shadow:0 18px 55px rgba(35,25,15,.07)}.contact-info h2,.formbox h2{font-size:28px;margin-bottom:22px}.contact-item{padding:19px 0;border-bottom:1px solid #eee6dc}.contact-item:last-child{border:0}.contact-item label{font-size:11px;color:var(--red);font-weight:900;letter-spacing:.14em;text-transform:uppercase}.contact-item a,.contact-item p{display:block;margin-top:5px;color:#454b54}.form{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field label{font-size:12px;font-weight:800}.field input,.field textarea,.field select{width:100%;margin-top:7px;border:1px solid #ddd3c5;border-radius:12px;padding:13px;background:#fffaf4;outline:0}.field textarea{min-height:135px;resize:vertical}.full{grid-column:1/-1}.submit{border:0;color:#fff;border-radius:12px;padding:15px 22px;background:linear-gradient(100deg,var(--red),var(--orange));font-weight:800;cursor:pointer}
@media(max-width:1050px){.logo{min-width:240px}.logo img{width:205px}.navlinks{gap:19px}.hero-grid{grid-template-columns:1fr}.visual{height:510px}.device-laptop{right:4%;}.cards{grid-template-columns:repeat(2,1fr)}.stats,.process{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.container{width:calc(100% - 28px)}.nav{height:68px;border-radius:17px;padding:0 14px}.logo{min-width:0}.logo img{width:170px}.menu{display:block}.navlinks{display:none;position:absolute;top:75px;left:14px;right:14px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;flex-direction:column;align-items:stretch;gap:3px;box-shadow:var(--shadow)}.navlinks.open{display:flex}.navlinks a{padding:10px 12px}.navlinks a.active:after{display:none}.navbtn{margin-top:5px}.hero{padding:62px 0 45px}.hero-copy{font-size:16px}.service-mini{grid-template-columns:repeat(2,1fr)}.visual{height:390px;margin-top:10px}.device-laptop{width:430px;right:-35px;top:40px}.lid{height:235px}.screen h3{font-size:20px;margin-top:35px}.phone{width:125px;height:250px;right:-2px;bottom:25px;border-width:5px}.phone h4{font-size:13px}.phone-grid{gap:4px}.phone-card{padding:7px 2px;font-size:6px}.phone-card i{font-size:11px}.section{padding:75px 0}.head{display:block}.head p{margin-top:14px}.cards,.stats,.process{grid-template-columns:1fr}.cta{width:calc(100% - 28px);padding:40px 24px;margin-bottom:70px}.cta-inner{display:block}.cta .btn-primary{margin-top:24px}.foot{grid-template-columns:1fr;gap:28px}.contact-grid{grid-template-columns:1fr;padding-bottom:70px}.contact-hero{padding:65px 0 35px}.form{grid-template-columns:1fr}.full{grid-column:auto}}


/* =========================================================
   DEVICE COMPATIBILITY / RESPONSIVE ENHANCEMENTS
   Desktop: 1200px+
   Tablet:   768px–1199px
   Mobile:   up to 767px
   ========================================================= */

html {
  width: 100%;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  min-width: 320px;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  max-width: var(--max);
}

/* Prevent wide decorative/visual elements from causing horizontal scrolling */
.hero,
.visual,
.cta,
.section,
footer,
.header {
  max-width: 100%;
}

/* Large desktop */
@media (min-width: 1200px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Tablets and smaller laptops */
@media (min-width: 768px) and (max-width: 1199px) {
  .container {
    width: min(94%, 1080px);
  }

  .nav {
    padding-left: 18px;
    padding-right: 14px;
  }

  .logo {
    min-width: 220px;
  }

  .logo img {
    width: 190px;
  }

  .navlinks {
    gap: 16px;
    font-size: 13px;
  }

  .navbtn {
    padding: 12px 17px;
  }

  .hero {
    padding-top: 72px;
  }

  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  h1 {
    font-size: clamp(42px, 5.2vw, 64px);
  }

  .visual {
    transform: scale(.9);
    transform-origin: center right;
    margin-right: -35px;
  }

  .device-laptop {
    width: 540px;
    right: -55px;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats,
  .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-grid {
    grid-template-columns: .9fr 1.1fr;
  }
}

/* Phones */
@media (max-width: 767px) {
  .container {
    width: calc(100% - 28px);
  }

  .header {
    padding: 7px 0;
  }

  .nav {
    height: 64px;
    border-radius: 16px;
    padding: 0 12px 0 15px;
  }

  .logo {
    min-width: 0;
    max-width: calc(100% - 50px);
  }

  .logo img {
    width: min(180px, 68vw);
    max-height: 52px;
  }

  .menu {
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--text);
    cursor: pointer;
    flex: 0 0 auto;
  }

  .navlinks {
    display: none;
    position: absolute;
    top: 72px;
    left: 14px;
    right: 14px;
    width: auto;
    margin: 0;
    padding: 10px;
    gap: 2px;
    flex-direction: column;
    align-items: stretch;
    background: rgba(255,255,255,.98);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
  }

  .navlinks.open {
    display: flex;
  }

  .navlinks a {
    padding: 11px 13px;
    border-radius: 10px;
  }

  .navlinks a:hover {
    background: #fff4e8;
  }

  .navlinks a.active:after {
    display: none;
  }

  .navbtn {
    text-align: center;
    margin-top: 5px;
  }

  .hero {
    min-height: auto;
    padding: 58px 0 40px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .hero:before {
    width: 420px;
    height: 420px;
    right: -230px;
    top: -90px;
  }

  .eyebrow {
    font-size: 11px;
    letter-spacing: .12em;
  }

  h1 {
    font-size: clamp(40px, 12vw, 52px);
    line-height: 1.02;
  }

  .hero-copy {
    font-size: 15.5px;
  }

  .actions {
    margin-top: 25px;
    gap: 10px;
  }

  .btn-primary,
  .btn-outline {
    width: 100%;
    min-height: 50px;
  }

  .service-mini {
    grid-template-columns: 1fr 1fr;
    gap: 17px 12px;
    margin-top: 35px;
  }

  .visual {
    height: 335px;
    width: 100%;
    margin-top: 4px;
    transform: none;
  }

  .device-laptop {
    width: 390px;
    max-width: 108%;
    right: -40px;
    top: 35px;
  }

  .lid {
    height: 215px;
    border-width: 4px;
  }

  .screen {
    padding: 20px;
  }

  .screen h3 {
    font-size: 18px;
    margin-top: 28px;
  }

  .screen p {
    font-size: 9px;
    max-width: 205px;
  }

  .screen-chip {
    margin-top: 13px;
    padding: 6px 9px;
    font-size: 8px;
  }

  .phone {
    width: 112px;
    height: 224px;
    right: 0;
    bottom: 12px;
    border-width: 5px;
    border-radius: 24px;
  }

  .phone-screen {
    padding: 12px;
  }

  .phone-logo {
    width: 27px;
    height: 27px;
    margin: 17px auto 9px;
  }

  .phone h4 {
    font-size: 12px;
  }

  .phone-grid {
    margin-top: 11px;
  }

  .phone-card {
    padding: 6px 2px;
    font-size: 6px;
  }

  .phone-card i {
    font-size: 10px;
    margin-bottom: 2px;
  }

  .section {
    padding: 70px 0;
  }

  .head {
    display: block;
    margin-bottom: 30px;
  }

  .head h2 {
    font-size: clamp(33px, 9vw, 43px);
  }

  .head p {
    margin-top: 13px;
    font-size: 14px;
  }

  .cards,
  .stats,
  .process {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .card {
    min-height: auto;
    padding: 24px;
  }

  .card-icon {
    margin-bottom: 18px;
  }

  .stat {
    padding: 23px;
  }

  .stat strong {
    font-size: 32px;
  }

  .step {
    padding: 23px;
  }

  .cta {
    width: calc(100% - 28px);
    margin-bottom: 65px;
    padding: 38px 23px;
    border-radius: 24px;
  }

  .cta-inner {
    display: block;
  }

  .cta h2 {
    font-size: clamp(31px, 8.5vw, 42px);
  }

  .cta .btn-primary {
    width: 100%;
    margin-top: 23px;
  }

  .foot {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .foot-logo {
    width: 200px;
  }

  .contact-hero {
    padding: 60px 0 35px;
  }

  .contact-hero h1 {
    font-size: clamp(40px, 11vw, 52px);
  }

  .contact-hero p {
    font-size: 15px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    padding-bottom: 65px;
  }

  .contact-info,
  .formbox {
    padding: 25px 20px;
    border-radius: 21px;
  }

  .contact-info h2,
  .formbox h2 {
    font-size: 25px;
  }

  .form {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .full {
    grid-column: auto;
  }

  .submit {
    width: 100%;
    min-height: 50px;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .container {
    width: calc(100% - 22px);
  }

  .logo img {
    width: 155px;
  }

  h1 {
    font-size: 38px;
  }

  .service-mini {
    gap: 13px 8px;
  }

  .visual {
    height: 300px;
  }

  .device-laptop {
    width: 350px;
    right: -45px;
  }

  .lid {
    height: 190px;
  }

  .phone {
    width: 98px;
    height: 198px;
  }
}

/* Touch-friendly controls */
@media (pointer: coarse) {
  .navlinks a,
  .btn-primary,
  .btn-outline,
  .navbtn,
  .menu,
  .submit {
    min-height: 44px;
  }
}

/* Accessibility: reduce motion when requested by the device */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}