:root{
    --ink:#0F1828;
    --panel:#1B2537;
    --void:#060C17;
    --bronze:#B99B73;
    --bronze-light:#D9C4A2;
    --bronze-dim:rgba(185,155,115,0.35);
    --white:#FFFFFF;
    --ink-soft:rgba(255,255,255,0.66);
    --ink-faint:rgba(255,255,255,0.38);
    --line:rgba(185,155,115,0.18);
    --display: 'Montserrat', sans-serif;
    --body: 'Montserrat', sans-serif;
    --ease: cubic-bezier(.16,.8,.24,1);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--body);
    background:var(--ink);
    color:var(--white);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--bronze);color:var(--void);}

  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  img{display:block;max-width:100%;}

  :focus-visible{
    outline:2px solid var(--bronze-light);
    outline-offset:4px;
    border-radius:2px;
  }

  .wrap{
    max-width:1240px;
    margin:0 auto;
    padding:0 32px;
  }

  .eyebrow{
    font-family:var(--display);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--bronze);
    display:flex;
    align-items:center;
    gap:12px;
  }

  h1,h2,h3{
    font-family:var(--display);
    font-weight:800;
    letter-spacing:-0.01em;
    line-height:1.05;
  }

  /* ============ BACKGROUND LAYERS ============ */
  .bg-gradient{
    position:fixed;
    inset:0;
    z-index:-2;
    background:
      radial-gradient(1100px 620px at 82% -8%, rgba(185,155,115,0.10), transparent 60%),
      radial-gradient(900px 700px at -10% 30%, rgba(27,37,55,0.9), transparent 55%),
      linear-gradient(160deg, var(--ink) 0%, var(--panel) 45%, var(--void) 100%);
  }
  .bg-grid{
    position:fixed;
    inset:0;
    z-index:-1;
    opacity:0.05;
    background-image:
      linear-gradient(var(--bronze) 1px, transparent 1px),
      linear-gradient(90deg, var(--bronze) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(circle at 60% 20%, black, transparent 75%);
  }

  /* ============ CIRCUIT TRACE SVG ============ */
  .trace-path{
    fill:none;
    stroke:var(--bronze);
    stroke-width:1.4;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:0.55;
  }
  .trace-node{
    fill:var(--void);
    stroke:var(--bronze);
    stroke-width:1.4;
  }
  .draw{
    stroke-dasharray:1;
    stroke-dashoffset:1;
    animation:draw 1.8s var(--ease) forwards;
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }

  .pulse-dot{
    fill:var(--bronze-light);
    filter:drop-shadow(0 0 4px var(--bronze));
  }

  /* ============ NAVBAR ============ */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    padding:22px 0;
    transition:padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    padding:14px 0;
    background:rgba(6,12,23,0.72);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    border-bottom:1px solid var(--line);
  }
  nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .brand img{height:50px;width:auto;filter:drop-shadow(0 0 10px rgba(185,155,115,0.25));}
  .brand-word{
    font-family:var(--display);
    font-weight:800;
    font-size:16px;
    letter-spacing:0.14em;
    text-transform:uppercase;
  }
  .brand-word span{color:var(--bronze);}

  .nav-links{
    display:flex;
    align-items:center;
    gap:40px;
  }
  .nav-links a{
    font-size:13px;
    font-weight:500;
    letter-spacing:0.04em;
    color:var(--ink-soft);
    position:relative;
    padding:6px 0;
    transition:color .3s var(--ease);
  }
  .nav-links a::after{
    content:'';
    position:absolute;
    left:0; bottom:0;
    width:0; height:1px;
    background:var(--bronze);
    transition:width .35s var(--ease);
  }
  .nav-links a:hover{color:var(--white);}
  .nav-links a:hover::after{width:100%;}

  .btn{
    font-family:var(--display);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:13px 26px;
    border-radius:3px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
    white-space:nowrap;
  }
  .btn-primary{
    background:linear-gradient(135deg, var(--bronze-light), var(--bronze));
    color:var(--void);
  }
  .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px -8px rgba(185,155,115,0.55);
  }
  .btn-ghost{
    background:transparent;
    border-color:var(--line);
    color:var(--white);
  }
  .btn-ghost:hover{
    border-color:var(--bronze);
    background:rgba(185,155,115,0.08);
    transform:translateY(-2px);
  }
  .btn-whatsapp{
    background:rgba(37,211,102,0.08);
    border:1px solid rgba(37,211,102,0.35);
    color:var(--white);
  }
  .btn-whatsapp svg{color:#25D366;}
  .btn-whatsapp:hover{
    border-color:#25D366;
    background:rgba(37,211,102,0.14);
    transform:translateY(-2px);
    box-shadow:0 12px 30px -10px rgba(37,211,102,0.45);
  }
  .btn svg{width:14px;height:14px;transition:transform .3s var(--ease);}
  .btn:hover svg{transform:translateX(3px);}

  .nav-cta{display:flex;}
  .menu-toggle{display:none;}

  /* ============ HERO ============ */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top:120px;
    padding-bottom:80px;
    overflow:hidden;
  }
  .hero-inner{
    position:relative;
    z-index:2;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .hero-mark{
    width:84px;
    height:auto;
    margin-bottom:22px;
    opacity:0;
    animation:fadeUp .9s var(--ease) .15s forwards;
  }
  .hero .eyebrow{
    justify-content:center;
    margin-bottom:26px;
    opacity:0;
    animation:fadeUp .9s var(--ease) .35s forwards;
  }
  
  .hero h1{
    font-size:clamp(38px, 8vw, 90px);
    text-transform:uppercase;
    letter-spacing:0.01em;
    background:linear-gradient(100deg, #EAD9BB 0%, var(--bronze) 30%, #8E7350 50%, var(--bronze-light) 70%, #EAD9BB 100%);
    background-size:220% auto;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:shine 7s linear infinite, fadeUp .9s var(--ease) .5s both;
  }
  @keyframes shine{ to{ background-position:-220% center; } }

  .hero-sub{
    font-family:var(--display);
    font-size:12px;
    font-weight:600;
    letter-spacing:0.34em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin-top:14px;
    opacity:0;
    animation:fadeUp .9s var(--ease) .65s forwards;
  }
  .hero-tagline{
    max-width:640px;
    margin:34px auto 0;
    font-size:clamp(16px,2.4vw,20px);
    line-height:1.65;
    font-weight:300;
    color:var(--ink-soft);
    opacity:0;
    animation:fadeUp .9s var(--ease) .8s forwards;
  }
  .hero-actions{
    margin-top:44px;
    display:flex;
    gap:18px;
    justify-content:center;
    flex-wrap:wrap;
    opacity:0;
    animation:fadeUp .9s var(--ease) .95s forwards;
  }

  @keyframes fadeUp{
    from{opacity:0; transform:translateY(22px);}
    to{opacity:1; transform:translateY(0);}
  }

  .hero-trace{
    position:absolute;
    inset:0;
    z-index:1;
    width:100%;
    height:100%;
    opacity:0.9;
  }

  .scroll-cue{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin-top:64px;
    opacity:0;
    animation:fadeUp .9s var(--ease) 1.3s forwards;
  }
  .scroll-cue span{
    font-size:10px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--ink-faint);
    font-family:var(--display);
    font-weight:600;
  }
  .scroll-line{
    width:1px;
    height:38px;
    background:linear-gradient(var(--bronze), transparent);
    position:relative;
    overflow:hidden;
  }
  .scroll-line::after{
    content:'';
    position:absolute;
    top:-38px; left:0;
    width:100%; height:100%;
    background:linear-gradient(var(--bronze-light), transparent);
    animation:scrollDrip 2.2s ease-in-out infinite;
  }
  @keyframes scrollDrip{
    0%{ top:-38px; }
    60%{ top:38px; }
    100%{ top:38px; }
  }

  /* ============ REVEAL ============ */
  .reveal{
    opacity:0;
    transform:translateY(36px);
    transition:opacity .9s var(--ease), transform .9s var(--ease);
  }
  .reveal.in{opacity:1; transform:translateY(0);}
  .stagger .reveal:nth-child(1){transition-delay:0s;}
  .stagger .reveal:nth-child(2){transition-delay:.12s;}
  .stagger .reveal:nth-child(3){transition-delay:.24s;}
  .stagger .reveal:nth-child(4){transition-delay:.36s;}

  /* ============ SECTION SHARED ============ */
  section{
    position:relative;
    padding:150px 0;
  }
  .section-head{
    max-width:640px;
    margin-bottom:80px;
  }
  .section-head h2{
    font-size:clamp(30px,4.4vw,48px);
    margin-top:20px;
    color:var(--white);
  }
  .section-head h2 em{
    font-style:normal;
    color:var(--bronze);
  }
  .section-head p{
    margin-top:20px;
    font-size:16px;
    line-height:1.75;
    font-weight:300;
    color:var(--ink-soft);
    max-width:520px;
  }
  .center{text-align:center; margin-left:auto; margin-right:auto;}
  .center .eyebrow{justify-content:center;}
  .center .eyebrow::after{content:'';width:26px;height:1px;background:var(--bronze);display:inline-block;}
  .center p{margin-left:auto;margin-right:auto;}

  .divider{
    height:1px;
    background:linear-gradient(90deg, transparent, var(--line), transparent);
    width:100%;
  }

  /* ============ SERVICES ============ */
  .services-board{
    position:relative;
  }
  .board-trace{
    position:absolute;
    top:-40px;
    left:0;
    width:100%;
    height:calc(100% + 40px);
    z-index:0;
    pointer-events:none;
    opacity:0.5;
  }
  .service-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
  }
  .service-card{
    background:linear-gradient(180deg, rgba(27,37,55,0.55), rgba(6,12,23,0.55));
    padding:48px 38px 44px;
    position:relative;
    transition:background .4s var(--ease);
  }
  .service-card:hover{background:linear-gradient(180deg, rgba(27,37,55,0.9), rgba(6,12,23,0.75));}
  .service-index{
    font-family:var(--display);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.2em;
    color:var(--ink-faint);
    margin-bottom:30px;
  }
  .service-icon{
    width:40px;
    height:40px;
    margin-bottom:26px;
  }
  .service-icon svg{width:100%;height:100%;}
  .service-card h3{
    font-size:20px;
    font-weight:700;
    letter-spacing:0;
    text-transform:none;
    margin-bottom:14px;
  }
  .service-card p{
    font-size:14.5px;
    line-height:1.75;
    font-weight:300;
    color:var(--ink-soft);
  }
  .service-corner{
    position:absolute;
    top:0; right:0;
    width:26px;
    height:26px;
    border-top:1px solid var(--bronze-dim);
    border-right:1px solid var(--bronze-dim);
    opacity:0;
    transition:opacity .4s var(--ease);
  }
  .service-card:hover .service-corner{opacity:1;}

  /* ============ DIFFERENTIATORS ============ */
  .diff-section{
    background:linear-gradient(180deg, transparent, rgba(185,155,115,0.045), transparent);
  }
  .diff-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:44px;
  }
  .diff-item{
    border-top:1px solid var(--line);
    padding-top:26px;
  }
  .diff-num{
    font-family:var(--display);
    font-size:12px;
    font-weight:700;
    color:var(--bronze);
    letter-spacing:0.14em;
    margin-bottom:16px;
    display:block;
  }
  .diff-item h3{
    font-size:17px;
    margin-bottom:10px;
    letter-spacing:0;
  }
  .diff-item p{
    font-size:14px;
    line-height:1.7;
    font-weight:300;
    color:var(--ink-soft);
  }

  /* ============ ABOUT ============ */
  .about{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:80px;
    align-items:center;
  }
  .about-visual{
    position:relative;
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .about-visual .ring{
    position:absolute;
    border:1px solid var(--line);
    border-radius:50%;
  }
  .about-visual .ring-1{inset:0;}
  .about-visual .ring-2{inset:14%;}
  .about-visual img{
    width:38%;
    position:relative;
    z-index:2;
    filter:drop-shadow(0 0 26px rgba(185,155,115,0.25));
    animation:float 7s ease-in-out infinite;
  }
  @keyframes float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-14px);}
  }
  .spin-slow{
    animation:spin 40s linear infinite;
  }
  .spin-slow-rev{
    animation:spin 55s linear infinite reverse;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .about-text h2{
    font-size:clamp(28px,4vw,42px);
    margin-bottom:24px;
  }
  .about-text p{
    font-size:16px;
    line-height:1.85;
    font-weight:300;
    color:var(--ink-soft);
    margin-bottom:20px;
    max-width:540px;
  }
  .about-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:30px;
  }
  .about-tags span{
    font-family:var(--display);
    font-size:11px;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--bronze-light);
    border:1px solid var(--bronze-dim);
    padding:8px 16px;
    border-radius:20px;
  }

  /* ============ CONTACT ============ */
  .contact-section{
    padding-bottom:120px;
  }
  .contact-panel{
    position:relative;
    border:1px solid var(--line);
    border-radius:10px;
    padding:80px 64px;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    background:radial-gradient(700px 340px at 10% 0%, rgba(185,155,115,0.08), transparent 60%);
  }
  .contact-copy h2{
    font-size:clamp(28px,4vw,40px);
    margin-bottom:20px;
  }
  .contact-copy p{
    font-size:15.5px;
    line-height:1.8;
    font-weight:300;
    color:var(--ink-soft);
    max-width:420px;
    margin-bottom:32px;
  }
  .contact-list{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .contact-list li{
    display:flex;
    align-items:center;
    gap:14px;
    font-size:14px;
    color:var(--ink-soft);
    font-weight:300;
  }
  .contact-list svg{width:16px;height:16px;color:var(--bronze);flex-shrink:0;}

  form{
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .field{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .field label{
    font-family:var(--display);
    font-size:11px;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-faint);
  }
  .field input, .field textarea{
    background:rgba(255,255,255,0.03);
    border:1px solid var(--line);
    border-radius:4px;
    padding:13px 16px;
    color:var(--white);
    font-family:var(--body);
    font-size:14px;
    font-weight:300;
    resize:none;
    transition:border-color .3s var(--ease), background .3s var(--ease);
  }
  .field input:focus, .field textarea:focus{
    border-color:var(--bronze);
    background:rgba(255,255,255,0.05);
    outline:none;
  }
  .field input::placeholder, .field textarea::placeholder{color:rgba(255,255,255,0.28);}
  form .btn{
    align-self:flex-start;
    margin-top:6px;
  }
  .form-note{
    font-size:12px;
    color:var(--ink-faint);
    font-weight:300;
  }

  /* ============ FOOTER ============ */
  footer{
    border-top:1px solid var(--line);
    padding:44px 0;
  }
  .footer-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px;
  }
  .footer-brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--display);
    font-size:13px;
    font-weight:700;
    letter-spacing:0.1em;
    color:var(--ink-faint);
  }
  .footer-brand img{height:50px;}
  .footer-links{
    display:flex;
    gap:28px;
  }
  .footer-links a{
    font-size:13px;
    color:var(--ink-faint);
    transition:color .3s var(--ease);
  }
  .footer-links a:hover{color:var(--bronze-light);}
  .footer-copy{
    font-size:12px;
    color:var(--ink-faint);
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width:900px){
    .service-grid{grid-template-columns:1fr;}
    .diff-grid{grid-template-columns:repeat(2,1fr);}
    .about{grid-template-columns:1fr; gap:56px;}
    .about-visual{max-width:280px; margin:0 auto;}
    .contact-panel{grid-template-columns:1fr; padding:52px 30px;}
  }
  @media (max-width:700px){
    .nav-links{
      position:fixed;
      top:0; right:0;
      height:100vh;
      width:78vw;
      max-width:320px;
      background:rgba(6,12,23,0.98);
      backdrop-filter:blur(20px);
      flex-direction:column;
      justify-content:center;
      gap:32px;
      transform:translateX(100%);
      transition:transform .5s var(--ease);
      border-left:1px solid var(--line);
    }
    .nav-links.open{transform:translateX(0);}
    .nav-links a{font-size:16px;}
    .nav-cta{display:none;}
    .menu-toggle{
      display:flex;
      flex-direction:column;
      gap:5px;
      background:none;
      border:none;
      cursor:pointer;
      padding:8px;
      z-index:200;
    }
    .menu-toggle span{
      width:22px; height:1.5px;
      background:var(--white);
      transition:transform .3s var(--ease), opacity .3s var(--ease);
    }
    .menu-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
    .menu-toggle.open span:nth-child(2){opacity:0;}
    .menu-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
    section{padding:100px 0;}
    .diff-grid{grid-template-columns:1fr;}
    .footer-inner{flex-direction:column; align-items:flex-start;}
  }

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