@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --ink:#1B1E23; --paper:#EEEBE3; --paper-2:#F7F5F0;
  --orange:#E07A3E; --green:#3E8E5A; --blue:#3E6FA8; --red:#C6503F;
  --line: rgba(27,30,35,0.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'IBM Plex Sans', sans-serif; background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased;}
h1,h2,h3,.brand{font-family:'Space Grotesk', sans-serif;}
a{color:inherit; text-decoration:none;}
img,svg{display:block;}
ul{list-style:none;}

.topstrip{background:var(--ink); color:#D9DBDD; font-size:12px; letter-spacing:.02em; display:flex; justify-content:center; gap:22px; padding:7px 20px;}
.topstrip span{display:flex; align-items:center; gap:7px;}
.dot{width:6px;height:6px;border-radius:50%;}

header.site-header{background:var(--paper-2); border-bottom:2px solid var(--ink); display:flex; align-items:center; justify-content:space-between; padding:16px 40px; position:sticky; top:0; z-index:100;}
.logo-row{display:flex; align-items:center; gap:12px;}
.cube{width:34px;height:34px;}
.brand{font-size:19px; font-weight:700; letter-spacing:-.01em; line-height:1.05;}
.brand small{display:block; font-family:'IBM Plex Sans'; font-weight:500; font-size:10px; letter-spacing:.14em; color:var(--orange); margin-top:2px;}
nav.site-nav{display:flex; gap:4px; font-size:13.5px; font-weight:500;}
nav.site-nav a{padding:8px 14px; border-bottom:2px solid transparent;}
nav.site-nav a:hover{color:var(--orange);}
nav.site-nav a.on{border-bottom:2px solid var(--orange); color:var(--orange);}
.nav-toggle{display:none; background:none; border:2px solid var(--ink); padding:8px; cursor:pointer; flex-shrink:0;}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--ink); margin:4px 0;}
.nav-backdrop{display:none;}
.nav-close{display:none;}
.btn{display:inline-block; background:var(--ink); color:#fff; font-weight:600; font-size:14px; padding:12px 22px; border:2px solid var(--ink); cursor:pointer; font-family:'IBM Plex Sans';}
.btn:hover{background:var(--orange); border-color:var(--orange);}
.btn-outline{background:transparent; color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:#fff;}
.btn-block{width:100%; text-align:center;}

section{padding:64px 40px; max-width:1240px; margin:0 auto;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:34px; border-bottom:2px solid var(--ink); padding-bottom:16px;}
.section-head h2{font-size:29px; letter-spacing:-.01em;}
.section-head p{font-size:13px; color:#5C616A; max-width:280px; text-align:right;}

.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:72px 40px 64px; max-width:1240px; margin:0 auto;}
.hero h1{font-size:50px; line-height:1.04; letter-spacing:-.015em; margin-bottom:22px;}
.hero p.lead{font-size:17px; line-height:1.6; color:#40454C; max-width:460px; margin-bottom:30px;}
.hero .cta-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap;}
.hero-art{position:relative; display:flex; justify-content:center;}
.stack{width:100%; max-width:360px;}

.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:2px solid var(--ink);}
.why{padding:26px 22px; border-right:2px solid var(--ink);}
.why:last-child{border-right:none;}
.why .n{font-family:'Space Grotesk'; font-size:13px; font-weight:700; color:var(--orange); margin-bottom:14px;}
.why h3{font-size:15.5px; margin-bottom:10px;}
.why p{font-size:12.8px; color:#5C616A; line-height:1.55;}

.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:2px solid var(--ink); border-bottom:none;}
.service{padding:26px 22px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);}
.service:last-child{border-right:none;}
.service .chip{width:20px; height:20px; margin-bottom:16px;}
.service .num{font-size:11px; color:var(--orange); font-weight:600; margin-bottom:12px;}
.service h3{font-size:16.5px; margin-bottom:9px;}
.service p{font-size:12.8px; color:#5C616A; line-height:1.55;}

.process{background:var(--ink); color:#EDEBE4; padding:64px 40px;}
.process-inner{max-width:1240px; margin:0 auto;}
.process .section-head{border-bottom-color:rgba(255,255,255,.25);}
.process .section-head p{color:#B7BBC1;}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
.step{border-top:2px solid #4A4F57; padding-top:16px;}
.step .n{font-family:'Space Grotesk'; font-size:32px; font-weight:700; color:var(--orange); margin-bottom:10px;}
.step h4{font-size:14.5px; margin-bottom:8px; font-weight:600;}
.step p{font-size:12.8px; color:#B7BBC1; line-height:1.55;}

.quote-strip{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:34px 40px; max-width:1240px; margin:0 auto; border:2px solid var(--ink); background:var(--paper-2);}
.quote-strip h3{font-size:21px; max-width:460px;}

.portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--ink);}
.pf-card{background:var(--paper-2); padding:0;}
.pf-art{aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; border-bottom:2px solid var(--ink);}
.pf-body{padding:18px 20px;}
.pf-body .tag{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--orange); font-weight:600; margin-bottom:6px;}
.pf-body h4{font-size:15.5px; margin-bottom:4px;}
.pf-body p{font-size:12.5px; color:#5C616A;}

.service-detail{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--ink);}
.sd-card{background:var(--paper-2); padding:30px;}
.sd-card .chip{width:24px; height:24px; margin-bottom:18px;}
.sd-card h3{font-size:19px; margin-bottom:10px;}
.sd-card p{font-size:13.5px; color:#5C616A; line-height:1.6; margin-bottom:14px;}
.sd-card ul li{font-size:13px; color:#40454C; padding:6px 0; border-top:1px solid var(--line);}
.sd-card ul li:first-child{border-top:none;}

.about{display:grid; grid-template-columns:.9fr 1.1fr; gap:50px;}
.about h2{font-size:29px; margin-bottom:18px; letter-spacing:-.01em;}
.about p{font-size:14.5px; line-height:1.7; color:#40454C; margin-bottom:16px; max-width:440px;}
.stat-block{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--ink);}
.stat{background:var(--paper-2); padding:26px 22px;}
.stat .v{font-family:'Space Grotesk'; font-size:30px; font-weight:700;}
.stat .l{font-size:12px; color:#5C616A; margin-top:4px;}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
.info-line{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);}
.info-line .label{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--orange); font-weight:600; width:90px; flex-shrink:0; padding-top:2px;}
.info-line .val{font-size:14.5px; line-height:1.55;}
.form-field{margin-bottom:16px;}
.form-field label{display:block; font-size:12px; font-weight:600; margin-bottom:6px;}
.form-field input, .form-field textarea, .form-field select{width:100%; border:2px solid var(--ink); background:var(--paper-2); padding:11px 12px; font-family:'IBM Plex Sans'; font-size:14px;}
.form-field textarea{resize:vertical; min-height:80px;}
.form-error{font-size:12px; color:var(--red); margin-top:5px;}
.alert-success{border:2px solid var(--green); background:var(--paper-2); color:var(--green); padding:12px 16px; font-size:13.5px; font-weight:600; margin-bottom:20px;}

footer{border-top:2px solid var(--ink); background:var(--paper-2);}
.footer-inner{max-width:1240px; margin:0 auto; padding:40px 40px 24px; display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.footer-inner .fcol h4{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--orange); margin-bottom:12px;}
.footer-inner .fcol p, .footer-inner .fcol a{font-size:13px; color:#5C616A; display:block; margin-bottom:7px;}
.footer-bottom{border-top:1px solid var(--line); padding:16px 40px; max-width:1240px; margin:0 auto; display:flex; justify-content:space-between; font-size:12px; color:#5C616A;}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;}
  .why-grid,.services-grid,.service-detail,.portfolio-grid{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .about, .contact-grid{grid-template-columns:1fr;}
  .quote-strip{flex-direction:column; align-items:flex-start;}

  .nav-toggle{display:block;}
  header.site-header{padding:14px 16px;}
  header.site-header > a.btn{display:none;}
  .cube{width:28px; height:28px;}
  .brand{font-size:15.5px;}
  .brand small{font-size:9px;}
  nav.site-nav{
    display:none; position:fixed; top:0; right:0; bottom:0; width:78%; max-width:320px;
    background:var(--paper-2); border-left:2px solid var(--ink); flex-direction:column;
    gap:0; padding:80px 24px 24px; z-index:210; overflow-y:auto;
  }
  nav.site-nav.open{display:flex;}
  nav.site-nav a{padding:14px 4px; border-bottom:1px solid var(--line); font-size:16px;}
  .nav-close{display:block; position:absolute; top:20px; right:20px; background:none; border:2px solid var(--ink); width:34px; height:34px; font-size:15px; cursor:pointer;}
  .nav-backdrop.open{display:block; position:fixed; inset:0; background:rgba(27,30,35,0.5); z-index:200;}
}

@media(max-width:640px){
  section{padding:44px 20px;}
  .hero{padding:44px 20px 40px; gap:30px;}
  .hero h1{font-size:34px;}
  .hero p.lead{font-size:15px;}
  .section-head{flex-direction:column; align-items:flex-start; gap:8px;}
  .section-head p{text-align:left; max-width:100%;}
  .section-head h2{font-size:24px;}

  .why-grid,.services-grid,.service-detail,.portfolio-grid,.steps,.stat-block{grid-template-columns:1fr;}
  .why,.service{border-right:none; border-bottom:2px solid var(--ink);}
  .why:last-child,.service:last-child{border-bottom:none;}

  .process{padding:44px 20px;}
  .quote-strip{padding:24px 20px;}
  .quote-strip h3{font-size:18px;}

  .footer-inner{padding:32px 20px 20px; flex-direction:column; gap:26px;}
  .footer-bottom{padding:14px 20px; flex-direction:column; gap:6px;}

  .cta-row .btn, .cta-row .btn-outline{flex:1; text-align:center;}
}



/* ── Scroll-to-top button ── */
.fab-scroll {
    background: var(--orange);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(232, 115, 10, 0.4), 0 2px 6px rgba(0, 0, 0, 0.12);
    /* hidden until user scrolls down */
    opacity: 0;
    pointer-events: none;
    transform: scale(0.7);
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.22s ease;
}

.fab-scroll.visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.fab-scroll:hover {
    background: var(--red);
    box-shadow: 0 6px 20px rgba(190, 91, 3, 0.5);
    transform: scale(1.1);
}

/* ── WhatsApp button ── */
.fab-wa {
    background: #25D366;
    color: #fff;
    box-shadow: 0 4px 18px rgba(37, 211, 102, 0.45), 0 2px 6px rgba(0, 0, 0, 0.12);
    animation: fab-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both;
}

@keyframes fab-pop {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fab-wa:hover {
    box-shadow: 0 8px 26px rgba(37, 211, 102, 0.55);
    transform: scale(1.1);
}

/* Pulse ring on WhatsApp */
.fab-wa::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25D366;
    animation: fab-pulse 2.8s ease-out 3s infinite;
    z-index: -1;
}

@keyframes fab-pulse {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }

    70% {
        transform: scale(1.6);
        opacity: 0;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

@media (max-width: 600px) {
    .fab-stack {
        bottom: 18px;
        right: 18px;
        gap: 8px;
    }

    .fab-btn {
        width: 46px;
        height: 46px;
    }
}




/* ── FLOATING ACTION BUTTONS (FAB) ───────────────────── */
.fab-stack {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9990;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Base FAB button style */
.fab-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    position: relative;
    transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.3s ease;
}

.fab-btn:hover {
    transform: scale(1.1);
}

/* Tooltip */
.fab-tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--ink);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.73rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 5px 11px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.fab-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: var(--ink);
}

.fab-btn:hover .fab-tooltip {
    opacity: 1;
}