:root{
    --navy:#132A52;
    --navy-2:#1E3C66;
    --gold:#E8A23A;
    --gold-dark:#C2811F;
    --paper:#F6F7FA;
    --paper-2:#ECEEF3;
    --ink:#1B2333;
    --slate:#5B6472;
    --line:#DCE0E6;
    --white:#FFFFFF;
    --radius:2px;
    --maxw:1180px;
    --navy-rgb:19,42,82;
    --navy-2-rgb:30,60,102;
    --gold-rgb:232,162,58;
    --paper-rgb:246,247,250;
    --paper-2-rgb:236,238,243;
    --white-rgb:255,255,255;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Space Grotesk',sans-serif;
    color:var(--navy);
    margin:0;
    letter-spacing:-0.01em;
  }
  .mono{
    font-family:'IBM Plex Mono',monospace;
  }
  a{color:inherit;}
  img{max-width:100%;display:block;}
  .wrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 32px;
  }
  section{ padding:96px 0; }
  @media (max-width:720px){
    section{ padding:56px 0; }
    .wrap{ padding:0 20px; }
  }

  ::selection{ background:var(--gold); color:#fff; }

  /* focus visibility */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  }

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(246,247,250,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px;
    max-width:var(--maxw); margin:0 auto;
  }
  .logo{
    display:flex; align-items:center; gap:10px;
    text-decoration:none; color:var(--navy);
  }
  .logo-mark{ height:46px; width:auto; flex:none; display:block; }
  nav.links{ display:flex; gap:32px; align-items:center; }
  nav.links a{
    font-size:14px; font-weight:500; text-decoration:none; color:var(--slate);
    transition:color .15s ease;
  }
  nav.links a:hover{ color:var(--navy); }
  .nav-cta{
    background:var(--navy); color:#fff !important; padding:10px 20px;
    font-size:14px; font-weight:600; border-radius:var(--radius);
    transition:background .15s ease;
  }
  .nav-cta:hover{ background:var(--gold); }
  .nav-phone{
    display:none;
  }
  .burger{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
  .burger span{ display:block; width:22px; height:2px; background:var(--navy); margin:5px 0; }

  @media (max-width:860px){
    nav.links{
      position:fixed; inset:0 0 0 auto; top:65px; height:calc(100vh - 65px);
      background:var(--paper); flex-direction:column; align-items:flex-start;
      width:240px; padding:28px; border-left:1px solid var(--line);
      transform:translateX(100%); transition:transform .25s ease;
    }
    nav.links.open{ transform:translateX(0); }
    .burger{ display:block; }
  }

  /* ---------- HERO ---------- */
  .hero{
    padding:88px 0 64px;
    position:relative;
    overflow:hidden;
  }
  .hero .wrap{
    display:block;
    max-width:760px;
  }
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--gold); font-weight:600;
    display:flex; align-items:center; gap:10px; margin-bottom:20px;
  }
  .eyebrow::before{
    content:''; width:24px; height:1px; background:var(--gold);
  }
  .hero h1{
    font-size:52px; line-height:1.05; font-weight:700;
  }
  .hero h1 em{
    font-style:normal; color:var(--gold);
  }
  .hero p.lead{
    margin-top:22px; font-size:18px; color:var(--slate); max-width:46ch;
  }
  .hero-actions{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 26px; font-weight:600; font-size:15px;
    border-radius:var(--radius); text-decoration:none;
    border:1px solid transparent; cursor:pointer;
    transition:all .15s ease;
  }
  .btn-primary{ background:var(--gold); color:#fff; }
  .btn-primary:hover{ background:var(--gold-dark); }
  .btn-ghost{ background:transparent; color:var(--navy); border-color:var(--line); }
  .btn-ghost:hover{ border-color:var(--navy); }

  @media (max-width:900px){
    .hero{ padding:48px 0 40px; }
    .hero h1{ font-size:38px; }
    .hero p.lead{ font-size:16.5px; max-width:none; }
  }
  @media (max-width:480px){
    .hero h1{ font-size:31px; }
    .hero-actions{ flex-direction:column; align-items:stretch; }
    .hero-actions .btn{ text-align:center; justify-content:center; }
  }

  /* ---------- SECTION HEADERS ---------- */
  .sec-head{ max-width:640px; margin-bottom:52px; }
  .sec-head .eyebrow{ margin-bottom:14px; }
  .sec-head h2{ font-size:34px; font-weight:600; }
  .sec-head p{ color:var(--slate); margin-top:14px; font-size:16.5px; }
  @media (max-width:480px){
    .sec-head h2{ font-size:27px; }
    .quote-info h2{ font-size:27px; }
  }

  /* ---------- ABOUT ---------- */
  .about{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .about .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
  .about p{ color:var(--slate); font-size:16.5px; margin-bottom:16px; }
  @media (max-width:820px){
    .about .wrap{ grid-template-columns:1fr; gap:32px; }
  }

  /* ---------- SERVICES (flip blocks) ---------- */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:22px;
    align-items:stretch;
  }
  .svc-flip{
    height:300px;
    min-height:300px;
    perspective:1800px;
    cursor:pointer;
    outline:none;
    border-radius:var(--radius);
  }
  .svc-flip.flipped{
    position:relative;
    z-index:5;
  }
  .svc-flip-inner{
    position:relative;
    width:100%;
    height:100%;
    transition:transform .65s cubic-bezier(.4,.15,.2,1);
    transform-style:preserve-3d;
  }
  .svc-flip.flipped .svc-flip-inner{ transform:rotateY(180deg); }
  .svc-flip:focus-visible .svc-flip-inner{ outline:2px solid var(--gold); outline-offset:4px; }
  .svc-face{
    position:absolute;
    inset:0;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    border-radius:var(--radius);
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .svc-face-front{
    background:var(--white);
    border:1px solid var(--line);
    padding:24px 22px;
    justify-content:space-between;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .svc-flip:hover .svc-face-front{ border-color:var(--gold); box-shadow:0 6px 20px rgba(19,42,82,.08); }
  .svc-num{ font-family:'IBM Plex Mono',monospace; color:var(--gold); font-size:28px; font-weight:600; line-height:1; flex:none; }
  .svc-face-front h3{
    font-size:17px;
    font-weight:600;
    margin-top:12px;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .svc-teaser{
    color:var(--slate);
    font-size:13.5px;
    margin-top:8px;
    line-height:1.45;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .svc-tap{
    display:flex; align-items:center; gap:6px;
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.04em;
    color:var(--navy-2); text-transform:uppercase;
  }
  .svc-tap .arrow{ color:var(--gold); transition:transform .2s ease; }
  .svc-flip:hover .svc-tap .arrow{ transform:translateX(4px); }
  .svc-face-back{
    background:var(--navy);
    transform:rotateY(180deg);
    padding:22px 22px 18px;
    overflow:hidden;
  }
  .svc-back-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex:none; }
  .svc-back-head .svc-num{ color:var(--gold); font-size:20px; }
  .svc-back-head h3{ color:var(--white); font-size:16.5px; font-weight:600; margin-top:4px; }
  .svc-close{
    flex:none; width:26px; height:26px; border-radius:50%;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25);
    color:var(--white); font-size:15px; line-height:1; cursor:pointer;
  }
  .svc-close:hover{ background:rgba(255,255,255,.18); }
  .svc-back-scroll{
    margin-top:12px; overflow-y:auto; flex:1 1 auto; padding-right:6px;
    scrollbar-width:thin; scrollbar-color:var(--gold) transparent;
  }
  .svc-back-scroll::-webkit-scrollbar{ width:5px; }
  .svc-back-scroll::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:4px; }
  .svcb-lead{ color:#C9D3E4; font-size:13.5px; margin:0; line-height:1.55; }
  .svcb-group{ margin-bottom:14px; }
  .svcb-group:last-child{ margin-bottom:0; }
  .svcb-group h4{ color:var(--gold); font-size:12.5px; font-weight:600; margin-bottom:4px; text-transform:uppercase; letter-spacing:.02em; }
  .svcb-group p{ color:#C9D3E4; font-size:13px; margin:0; line-height:1.5; }
  .svcb-sublist{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
  .svcb-sublist li{ color:#C9D3E4; font-size:13px; line-height:1.5; padding-left:14px; position:relative; }
  .svcb-sublist li::before{ content:'•'; color:var(--gold); position:absolute; left:0; }
  .svcb-sublist li strong{ color:var(--white); font-weight:600; }
  .svcb-sublist--flat{ gap:7px; }
  @media (max-width:980px){
    .services-grid{ grid-template-columns:repeat(2, 1fr); gap:20px; }
  }
  @media (max-width:640px){
    .services-grid{ grid-template-columns:1fr; gap:18px; }
    .svc-flip{ height:280px; min-height:280px; }
  }


  /* ---------- INDUSTRIES ---------- */
  .industries-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  .industry-card{ background:var(--white); padding:22px 18px; font-size:14.5px; font-weight:600; color:var(--navy); }
  @media (max-width:820px){ .industries-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:480px){ .industries-grid{ grid-template-columns:1fr; } }

  /* ---------- WHY / PILLARS ---------- */
  .why{
    color:#fff;
  }
  .why .sec-head h2, .why .sec-head p{ color:#fff; }
  .why .sec-head p{ color:#C3CBDA; }
  .pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); }
  .pillar{ background:var(--navy); padding:34px 28px; }
  .pillar .icon{ width:34px; height:34px; margin-bottom:20px; }
  .pillar h3{ color:#fff; font-size:19px; font-weight:600; margin-bottom:10px; }
  .pillar p{ color:#B7C0D2; font-size:15px; margin:0; }
  @media (max-width:820px){ .pillars{ grid-template-columns:1fr; } }

  /* ---------- QUOTE FORM ---------- */
  .quote{ background:var(--white); }
  .quote .wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; }
  .quote-info h2{ font-size:34px; }
  .quote-info p{ color:var(--slate); margin-top:16px; max-width:42ch; }
  .quote-info .contact-line{
    display:flex; gap:12px; align-items:center; margin-top:22px; font-size:15px;
  }
  .quote-info .contact-line .ic{ width:18px; height:18px; flex:none; color:var(--gold); }
  .qform{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:36px;
  }
  .qform .doc-head{
    display:flex; justify-content:space-between; align-items:baseline;
    border-bottom:2px solid var(--navy); padding-bottom:16px; margin-bottom:26px;
  }
  .qform .doc-head .dt1{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; color:var(--navy); }
  .qform .doc-head .dt2{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--slate); }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .field.full{ grid-column:1 / -1; }
  .field label{ font-size:12.5px; font-weight:600; color:var(--navy); text-transform:uppercase; letter-spacing:.04em; }
  .field input, .field select, .field textarea{
    font-family:'Inter',sans-serif; font-size:15px; padding:11px 12px;
    border:1px solid var(--line); border-radius:var(--radius); background:#fff; color:var(--ink);
  }
  .field textarea{ resize:vertical; min-height:90px; }
  .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--navy); }
  .qform .btn-primary{ width:100%; justify-content:center; margin-top:6px; border:none; }
  .form-success{
    display:none; text-align:center; padding:30px 10px;
  }
  .form-success.show{ display:block; }
  .form-success h3{ font-size:20px; margin-bottom:8px; }
  .form-success p{ color:var(--slate); }
  @media (max-width:900px){
    .quote .wrap{ grid-template-columns:1fr; }
    .field-row{ grid-template-columns:1fr; }
  }
  @media (max-width:480px){
    .qform{ padding:24px 20px; }
  }

  /* ---------- FAQ ---------- */
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-q{
    width:100%; text-align:left; background:none; border:none; cursor:pointer;
    display:flex; justify-content:space-between; align-items:center;
    padding:22px 0; font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:600; color:var(--navy);
  }
  .faq-q .q-mark{ font-family:'IBM Plex Mono',monospace; color:var(--gold); margin-right:14px; font-size:14px; }
  .faq-q .chev{ transition:transform .2s ease; flex:none; color:var(--slate); }
  .faq-item.open .faq-q .chev{ transform:rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
  .faq-item.open .faq-a{ max-height:220px; }
  .faq-a p{ color:var(--slate); padding:0 0 22px 30px; margin:0; font-size:15.5px; max-width:64ch; }

  /* ---------- CONTACT ---------- */
  .contact{ background:var(--paper-2); border-top:1px solid var(--line); }
  .contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  .contact-grid--two{ grid-template-columns:repeat(2,1fr); }
  .contact-card{ background:var(--white); padding:32px; }
  .contact-card .k{ font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); margin-bottom:10px; }
  .contact-card .v{ font-size:16px; color:var(--navy); font-weight:600; line-height:1.5; }
  .contact-card .v a{ text-decoration:none; color:inherit; }
  @media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

  /* ---------- QUICK LINKS / PARTNERS ---------- */
  .partners-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .partner-card{
    display:flex; flex-direction:column; align-items:flex-start; gap:14px;
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px; text-decoration:none; transition:border-color .15s ease, transform .15s ease;
  }
  .partner-card:hover{ border-color:var(--gold); transform:translateY(-2px); }
  .partner-card img{ max-height:44px; width:auto; max-width:160px; }
  .partner-card p{ color:var(--slate); font-size:14px; margin:0; line-height:1.55; }
  @media (max-width:900px){ .partners-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .partners-grid{ grid-template-columns:1fr; } }

  /* ---------- FOOTER ---------- */
  footer{ background:var(--navy); color:#B7C0D2; padding:44px 0; }
  footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
  footer .f-logo{ display:flex; align-items:center; }
  footer .f-logo-img{ height:34px; width:auto; display:block; }
  footer .f-right{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; text-align:right; }
  @media (max-width:600px){
    footer .wrap{ flex-direction:column; align-items:flex-start; text-align:left; }
    footer .f-right{ text-align:left; }
  }

  /* ---------- WHATSAPP FLOAT ---------- */
  .wa-float{
    position:fixed; right:20px; bottom:20px; z-index:200;
    width:56px; height:56px; border-radius:50%;
    background:#25D366; display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 26px -8px rgba(0,0,0,.45);
    text-decoration:none; transition:transform .15s ease;
  }
  .wa-float:hover{ transform:scale(1.06); }
  .wa-float svg{ width:29px; height:29px; }
  @media (max-width:480px){
    .wa-float{ right:16px; bottom:16px; width:52px; height:52px; }
  }

  /* ---------- CREATIVE BACKGROUNDS ---------- */
  .hero{
    background-image: linear-gradient(120deg, rgba(var(--navy-rgb),var(--fade-hero)) 0%, rgba(var(--navy-2-rgb),calc(var(--fade-hero) * 0.85)) 55%, rgba(var(--gold-rgb),calc(var(--fade-hero) * 0.38)) 100%), var(--bg-hero);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
  }
  .hero h1, .hero .eyebrow{ color:#fff; }
  .hero h1 em{ color:var(--gold); }
  .hero p.lead{ color:#D8DEE8; }
  .hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,0.45); }
  .hero .btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }

  #services{
    background-image: linear-gradient(180deg, rgba(var(--paper-rgb),var(--fade-services)) 0%, rgba(var(--paper-rgb),calc(var(--fade-services) * 0.82)) 100%), var(--bg-services);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  #industries{
    background-image: linear-gradient(135deg, rgba(var(--white-rgb),var(--fade-industries)) 0%, rgba(var(--paper-2-rgb),calc(var(--fade-industries) * 0.85)) 100%), var(--bg-industries);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .why{
    background-color: var(--navy);
    background-image: linear-gradient(135deg, rgba(var(--navy-rgb),var(--fade-why)) 0%, rgba(var(--navy-2-rgb),calc(var(--fade-why) * 0.88)) 100%), var(--bg-why);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .quote{
    background-image: linear-gradient(180deg, rgba(var(--white-rgb),var(--fade-quote)) 0%, rgba(var(--white-rgb),calc(var(--fade-quote) * 0.82)) 100%), var(--bg-quote);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  #faq{
    background-image: linear-gradient(180deg, rgba(var(--paper-rgb),var(--fade-faq)) 0%, rgba(var(--paper-2-rgb),calc(var(--fade-faq) * 0.85)) 100%), var(--bg-faq);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .contact{
    background-image: linear-gradient(135deg, rgba(var(--paper-2-rgb),var(--fade-contact)) 0%, rgba(var(--paper-rgb),calc(var(--fade-contact) * 0.85)) 100%), var(--bg-contact);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .about{
    background-color: var(--white);
    background-image: linear-gradient(180deg, rgba(var(--white-rgb),var(--fade-about)) 0%, rgba(var(--white-rgb),calc(var(--fade-about) * 0.82)) 100%), var(--bg-about);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  #quicklinks{
    background-image: linear-gradient(135deg, rgba(var(--paper-rgb),var(--fade-quicklinks)) 0%, rgba(var(--paper-2-rgb),calc(var(--fade-quicklinks) * 0.85)) 100%), var(--bg-quicklinks);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }