:root{
    --ink:#eceaf4;
    --ink-soft:#a49dbd;
    --paper:#120f1e;
    --panel:#1c1830;
    --line:#38304f;
    --signal:#7d5fe0;
    --blue:#20456f;
    --circuit:#241d3d;
    --circuit-soft:#1a1730;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Segoe UI', Verdana, Arial, sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:Georgia, 'Times New Roman', serif;
    font-weight:700;
    margin:0 0 .4em;
    letter-spacing:.2px;
  }
  a{color:inherit;}
  .wrap{max-width:1040px;margin:0 auto;padding:0 28px;}

  /* ---- header ---- */
  header{
    position:sticky;top:0;z-index:20;
    background:rgba(18,15,30,.88);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  header .wrap{
    display:flex;align-items:center;justify-content:space-between;
    height:72px;
  }
  .brand{display:flex;align-items:baseline;gap:10px;}
  .brand-mark{
    font-family:Georgia, serif;font-weight:700;font-size:20px;
    background:var(--blue);color:#fff;
    padding:5px 12px;border-radius:3px;letter-spacing:.5px;
  }
  .brand-sub{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft);}
  nav{display:flex;gap:26px;font-size:14px;}
  nav a{text-decoration:none;color:var(--ink-soft);padding:6px 0;border-bottom:2px solid transparent;transition:.2s;}
  nav a:hover{color:var(--ink);border-color:var(--signal);}
  .phone-pill{
    font-size:14px;font-weight:600;background:var(--blue);color:#fff;
    padding:9px 16px;border-radius:24px;text-decoration:none;white-space:nowrap;
  }

  /* ---- hero ---- */
  .hero{padding:72px 0 56px;border-bottom:1px solid var(--line);}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;}
  .eyebrow{
    display:inline-block;font-size:12px;letter-spacing:2px;text-transform:uppercase;
    color:var(--ink-soft);border:1px solid var(--line);border-radius:20px;
    padding:5px 14px;margin-bottom:20px;
  }
  .hero h1{font-size:44px;line-height:1.15;max-width:9.5ch;}
  .hero p.lead{font-size:17px;color:var(--ink-soft);max-width:46ch;margin:18px 0 28px;}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
  .btn{
    display:inline-block;padding:13px 24px;border-radius:3px;text-decoration:none;
    font-size:14px;font-weight:600;letter-spacing:.3px;
    transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  }
  .btn:hover{transform:translateY(-3px) scale(1.03);}
  .btn-signal:hover{box-shadow:0 10px 22px -8px rgba(47,95,168,.6);}
  .btn-outline:hover{border-color:var(--blue);color:var(--blue);}
  .brand-mark{transition:transform .25s ease;}
  .brand:hover .brand-mark{transform:scale(1.06) rotate(-1deg);}
  .phone-pill{transition:transform .25s ease, box-shadow .25s ease;}
  .phone-pill:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 8px 18px -8px rgba(47,95,168,.6);}
  .btn-signal{background:var(--blue);color:#fff;}
  .btn-outline{border:1px solid var(--ink);color:var(--ink);}
  .hero-figure{
    background:var(--panel);border:1px solid var(--line);border-radius:6px;
    overflow:hidden;box-shadow:0 20px 40px -24px rgba(15,32,39,.35);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .hero-figure:hover{transform:translateY(-4px);box-shadow:0 26px 46px -20px rgba(15,32,39,.5);}
  .hero-figure img{display:block;width:100%;height:280px;object-fit:cover;transition:transform .5s ease;}
  .hero-figure:hover img{transform:scale(1.06);}
  .hero-figure figcaption{
    padding:14px 18px;font-size:13px;color:var(--ink-soft);border-top:1px solid var(--line);
  }

  /* ---- section shell ---- */
  section{padding:64px 0;border-bottom:1px solid var(--line);}
  section#about, section#process, section#it-business, section.section-blue{background:var(--circuit-soft);}
  .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:32px;flex-wrap:wrap;}
  .section-head .kicker{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--circuit);}
  .section-head h2{font-size:28px;}
  .section-head p{color:var(--ink-soft);max-width:42ch;font-size:15px;}

  /* ---- about ---- */
  .about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start;}
  .about-grid{overflow:visible;}
  .about-grid > img{width:100%;border-radius:6px;border:1px solid var(--line);display:block;overflow:hidden;transition:transform .35s ease, box-shadow .35s ease;}
  .about-grid > img:hover{transform:scale(1.025) translateY(-3px);box-shadow:0 16px 32px -18px rgba(15,32,39,.4);}
  .about-copy p{font-size:15.5px;color:var(--ink-soft);margin:0 0 16px;}
  .about-copy strong{color:var(--ink);}

  /* ---- services ---- */
  .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
  .service-card{
    background:var(--panel);padding:26px 22px;border-left:3px solid var(--signal);
    transition:transform .25s ease, background-color .25s ease;
  }
  .service-card:hover{transform:translateX(4px);background:var(--circuit-soft);}
  .service-card:hover .service-num{transform:translateX(2px);}
  .service-num{transition:transform .25s ease;display:inline-block;}
  .service-num{font-size:12px;color:var(--signal);font-weight:700;letter-spacing:1px;}
  .service-card h3{font-size:17px;margin:10px 0 8px;}
  .service-card p{font-size:14px;color:var(--ink-soft);margin:0;}

  /* ---- process ---- */
  .process{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
  .process img, .process .illustration{width:100%;border-radius:6px;border:1px solid var(--line);display:block;transition:transform .35s ease, box-shadow .35s ease;}
  .process img:hover, .process .illustration:hover{transform:scale(1.03) rotate(-0.3deg);box-shadow:0 16px 32px -18px rgba(15,32,39,.4);}
  .process img.illustration{height:320px;object-fit:cover;display:block;}
  .steps{list-style:none;margin:0;padding:0;counter-reset:step;}
  .steps li{
    counter-increment:step;position:relative;padding:0 0 26px 46px;
    border-left:1px solid var(--line);margin-left:14px;
  }
  .steps li:last-child{border-color:transparent;padding-bottom:0;}
  .steps li::before{
    content:counter(step);position:absolute;left:-15px;top:0;
    width:29px;height:29px;border-radius:50%;background:var(--signal);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
    box-shadow:0 0 0 3px var(--paper);transition:transform .25s ease;
  }
  .steps li:hover::before{transform:scale(1.2);}
  .steps li:nth-child(1)::before{background:#e0433f;}
  .steps li:nth-child(2)::before{background:#f3b731;color:#1a1400;}
  .steps li:nth-child(3)::before{background:#3aa65a;}
  .steps li.step-done::before{
    content:"🙂";background:var(--blue);font-size:15px;
  }
  .steps h3{font-size:16px;margin:0 0 4px;}
  .steps p{margin:0;font-size:14px;color:var(--ink-soft);}

  /* ---- facts ---- */
  .facts{background:var(--circuit);color:var(--ink-soft);}
  .facts .wrap{padding:0;}
  .facts-grid{display:grid;grid-template-columns:repeat(4,1fr);}
  .fact{padding:38px 24px;text-align:center;border-left:1px solid rgba(255,255,255,.15);transition:transform .25s ease;}
  .fact:hover{transform:scale(1.06);}
  .fact:hover .num{transform:translateY(-2px);}
  .fact .num{transition:transform .25s ease;}
  .fact:first-child{border-left:none;}
  .fact .num{font-family:Georgia,serif;font-size:32px;font-weight:700;color:#fff;white-space:nowrap;}
  .fact .label{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;opacity:.8;margin-top:6px;}

  /* ---- testimonial ---- */
  .testi{display:grid;grid-template-columns:76px 1fr;gap:24px;align-items:center;}
  .testi .avatar{
    width:76px;height:76px;border-radius:50%;box-shadow:0 0 0 3px var(--line);
    background:var(--blue);display:flex;align-items:center;justify-content:center;
    overflow:hidden;transition:transform .25s ease, box-shadow .25s ease;
  }
  .testi .avatar:hover{transform:scale(1.1);box-shadow:0 0 0 4px var(--blue);}
  .testi .thumb{font-size:22px;display:inline-block;letter-spacing:-2px;animation:thumb-bounce 1.8s ease-in-out infinite;}
  @keyframes thumb-bounce{
    0%,100%{transform:rotate(0deg) translateY(0);}
    25%{transform:rotate(-8deg) translateY(-3px);}
    50%{transform:rotate(0deg) translateY(0);}
    75%{transform:rotate(8deg) translateY(-2px);}
  }
  @media (prefers-reduced-motion: reduce){
    .testi .thumb{animation:none;}
  }
  .testi blockquote{margin:0;font-family:Georgia,serif;font-size:20px;line-height:1.5;color:var(--ink);}
  .testi cite{display:block;margin-top:16px;font-style:normal;font-size:14px;color:var(--ink-soft);}

  /* ---- contact / footer ---- */
  /* ---- recap ---- */
  .recap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 26px;}
  .recap-item{display:flex;gap:14px;align-items:flex-start;transition:transform .25s ease;}
  .recap-item:hover{transform:translateY(-3px);}
  .recap-icon{font-size:26px;line-height:1;flex-shrink:0;display:inline-block;transition:transform .3s ease;}
  .recap-item:hover .recap-icon{transform:scale(1.25) rotate(-6deg);}
  .recap-item h3{font-size:15px;margin:0 0 4px;}
  .recap-item p{font-size:13.5px;color:var(--ink-soft);margin:0;}

  footer{padding:56px 0 40px;}
  .contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;}
  .contact-grid h2{font-size:26px;}
  .contact-list{list-style:none;padding:0;margin:20px 0 0;font-size:15px;}
  .contact-list li{padding:9px 0;border-top:1px solid var(--line);color:var(--ink-soft);}
  .contact-list li:first-child{border-top:none;}
  .contact-list b{color:var(--ink);}
  .contact-list a{color:#6fa3e0;text-decoration:none;transition:color .2s ease, padding-left .2s ease;display:inline-block;}
  .contact-list a:hover{padding-left:3px;}
  .social-row{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;}
  .contact-list a:hover{text-decoration:underline;}
  .cta-box{background:var(--circuit);color:var(--ink);border-radius:6px;padding:30px;border:1px solid var(--line);transition:transform .25s ease, box-shadow .25s ease;}
  .cta-box:hover{transform:translateY(-4px);box-shadow:0 18px 34px -18px rgba(0,0,0,.5);}
  .cta-box h3{font-size:19px;}
  .cta-box p{font-size:14px;opacity:.85;margin:8px 0 20px;}
  .foot-legal{margin-top:40px;font-size:12px;color:var(--ink-soft);text-align:center;}

  @media(max-width:860px){
    .wrap{padding:0 20px;}
    header .wrap{height:auto;min-height:64px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;row-gap:8px;}
    .brand-sub{display:none;}
    .brand-mark{font-size:17px;padding:4px 9px;}
    .phone-pill{font-size:13px;padding:8px 13px;}
    .hero-grid,.about-grid,.process,.testi,.contact-grid{grid-template-columns:1fr;}
    .recap-grid{grid-template-columns:1fr 1fr;}
    .services-grid{grid-template-columns:1fr 1fr;}
    .facts-grid{grid-template-columns:1fr 1fr;}
    .fact{border-left:none;border-top:1px solid rgba(255,255,255,.15);}
    .fact:first-child{border-top:none;}
    nav{display:none;}
    .hero h1{font-size:32px;max-width:none;}
  }
  @media(max-width:520px){
    .wrap{padding:0 16px;}
    .services-grid{grid-template-columns:1fr 1fr;}
    .facts-grid{grid-template-columns:1fr 1fr;}
    .recap-grid{grid-template-columns:1fr 1fr;}
    .service-card{padding:20px 16px;}
    .recap-item{gap:10px;}
    .contact-grid h2{font-size:18px;white-space:nowrap;}
  }

  /* ---- certificates ---- */
  .cert-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;align-items:start;}
  .cert-thumb{
    width:100%;height:auto;display:block;border-radius:5px;border:1px solid var(--line);
    cursor:zoom-in;transition:transform .25s ease, box-shadow .25s ease;
  }
  .cert-thumb:hover{transform:scale(1.06) translateY(-3px);box-shadow:0 14px 26px -14px rgba(0,0,0,.5);}
  .cert-modal{
    display:none;position:fixed;inset:0;z-index:50;background:rgba(6,5,12,.9);
    align-items:center;justify-content:center;padding:30px;cursor:zoom-out;
  }
  .cert-modal.open{display:flex;}
  .cert-modal img{max-width:min(92vw,860px);max-height:90vh;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.6);}
  .cert-modal-close{
    position:absolute;top:18px;right:26px;font-size:34px;color:#fff;cursor:pointer;
    line-height:1;opacity:.8;transition:opacity .2s ease, transform .2s ease;
  }
  .cert-modal-close:hover{opacity:1;transform:scale(1.15);}
  @media(max-width:860px){
    .cert-grid{grid-template-columns:repeat(4,1fr);}
  }
  @media(max-width:520px){
    .cert-grid{grid-template-columns:repeat(3,1fr);gap:8px;}
  }

  /* ---- reveal on scroll ---- */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease;}
  .reveal.in-view{opacity:1;transform:none;}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none;}
  }