:root{
    --void:#f6f8fb;
    --panel:#ffffff;
    --panel-2:#eef2f9;
    --line:#dde4ef;
    --ink:#121b2e;
    --muted:#5b6b81;
    --teal:#0c9db0;
    --violet:#6c56d9;
    --magenta:#c23fb4;
    --on-accent:#ffffff;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--teal);
    outline-offset:3px;
    border-radius:4px;
  }

  ::selection{background:var(--teal);color:#ffffff;}

  #scrollbar{
    position:fixed;top:0;left:0;
    height:3px;
    background:linear-gradient(90deg,var(--teal),var(--violet),var(--magenta));
    width:0%;
    z-index:100;
    transition:width .1s linear;
  }

  #backToTop{
    position:fixed;
    right:24px;bottom:84px;
    width:44px;height:44px;
    border-radius:50%;
    background:var(--panel);
    border:1px solid var(--line);
    color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    box-shadow:0 12px 30px -12px rgba(18,27,46,0.3);
    opacity:0;
    pointer-events:none;
    transform:translateY(8px);
    transition:opacity .3s ease, transform .3s ease, border-color .2s ease;
    z-index:60;
  }
  #backToTop.show{opacity:1;pointer-events:auto;transform:none;}
  #backToTop:hover{border-color:var(--teal);color:var(--teal);}

  #whatsappBtn{
    position:fixed;
    right:24px;bottom:24px;
    width:52px;height:52px;
    border-radius:50%;
    background:#25D366;
    color:#ffffff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 12px 30px -12px rgba(18,27,46,0.4);
    z-index:60;
    transition:transform .25s ease;
  }
  #whatsappBtn:hover{transform:scale(1.08);}
  @media(max-width:560px){
    #whatsappBtn{width:48px;height:48px;right:18px;bottom:18px;}
    #backToTop{right:18px;bottom:76px;width:40px;height:40px;}
  }

  body::after{
    content:'';
    position:fixed;
    inset:0;
    opacity:0.5;
    pointer-events:none;
    z-index:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  }

  html{scroll-behavior:smooth;}

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

  body{
    background:var(--void);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    line-height:1.6;
    overflow-x:hidden;
  }

  body::before{
    content:'';
    position:fixed;
    inset:0;
    background:
      radial-gradient(ellipse 900px 500px at 15% 0%, rgba(70,224,232,0.16), transparent 60%),
      radial-gradient(ellipse 900px 600px at 90% 30%, rgba(155,134,245,0.16), transparent 60%),
      radial-gradient(ellipse 700px 500px at 50% 100%, rgba(194,63,180,0.10), transparent 60%);
    pointer-events:none;
    z-index:0;
  }

  h1,h2,h3,h4{
    font-family:'Fraunces',serif;
    font-weight:500;
    letter-spacing:-0.01em;
    line-height:1.15;
    text-wrap:balance;
    font-variation-settings:'SOFT' 0, 'WONK' 0;
  }

  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--teal);
  }

  a{color:inherit;text-decoration:none;}

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 48px;
  }
  @media(max-width:560px){
    .wrap{padding:0 34px;}
  }

  section{position:relative;z-index:1;}
  section[id]{scroll-margin-top:88px;}

  /* ---------- NAV ---------- */
  header{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:blur(14px);
    background:rgba(246,248,251,0.82);
    border-bottom:1px solid var(--line);
  }
  nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 48px;
    max-width:1180px;
    margin:0 auto;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Fraunces',serif;
    font-size:1.25rem;
    font-weight:600;
    letter-spacing:0.02em;
  }
  
  .nav-links{
    display:flex;
    gap:36px;
    font-size:0.92rem;
    color:var(--muted);
  }
  .nav-links a{position:relative;padding-bottom:4px;transition:color .2s;}
  .nav-links a::after{
    content:'';
    position:absolute;left:0;bottom:0;
    width:0;height:1px;
    background:var(--teal);
    transition:width .25s ease;
  }
  .nav-links a:hover{color:var(--teal);}
  .nav-links a:hover::after{width:100%;}
  .nav-cta{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.8rem;
    padding:9px 18px;
    border:1px solid var(--teal);
    border-radius:100px;
    color:var(--teal);
    white-space:nowrap;
    transition:all .2s;
  }
  .nav-cta:hover{background:var(--teal);color:var(--on-accent);}
  .nav-toggle{display:none;background:none;border:none;color:var(--ink);font-size:1.5rem;cursor:pointer;}

  @media(max-width:820px){
    nav{padding:16px 34px;}
    .nav-links{
      position:absolute;top:100%;left:0;right:0;
      background:var(--panel);
      flex-direction:column;
      padding:24px 34px;
      gap:18px;
      border-bottom:1px solid var(--line);
      display:none;
    }
    .nav-links.open{display:flex;}
    .nav-toggle{display:block;}
    .nav-cta{padding:8px 14px;font-size:0.75rem;}
  }
  @media(max-width:400px){
    .brand{font-size:1.05rem;}
    .nav-cta{padding:7px 10px;font-size:0.68rem;}
  }

  /* ---------- HERO ---------- */
  @keyframes heroIn{
    from{opacity:0;transform:translateY(16px);}
    to{opacity:1;transform:none;}
  }
  .hero-in{
    opacity:0;
    animation:heroIn .8s cubic-bezier(0.16,1,0.3,1) forwards;
    animation-delay:var(--d,0s);
  }
  @media (prefers-reduced-motion: reduce){
    .hero-in{opacity:1;animation:none;}
  }

  .scroll-cue{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:56px;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem;
    color:var(--muted);
    opacity:0;
    animation:heroIn .8s cubic-bezier(0.16,1,0.3,1) forwards;
    animation-delay:0.6s;
  }
  .scroll-cue svg{animation:bob 2s ease-in-out infinite;}
  @keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}
  @media(max-width:900px){.scroll-cue{display:none;}}

  .hero{
    padding-top:100px;
    padding-bottom:120px;
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:40px;
    align-items:center;
    position:relative;
  }
  .hero::before{
    content:'';
    position:absolute;
    top:-40px;left:-5%;right:-5%;bottom:-40px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='160' viewBox='0 0 140 160'%3E%3Cpolygon points='35,2 105,2 140,80 105,158 35,158 0,80' fill='none' stroke='%230c9db0' stroke-width='1'/%3E%3C/svg%3E");
    background-size:140px 160px;
    opacity:0.055;
    pointer-events:none;
    z-index:-1;
  }
  .hero h1{
    font-size:clamp(2.1rem,7vw,3.6rem);
    margin:18px 0 22px;
  }
  .hero h1 em{
    font-style:italic;
    background:linear-gradient(90deg,var(--teal),var(--violet));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero p{
    color:var(--muted);
    font-size:1.08rem;
    max-width:46ch;
    margin-bottom:34px;
  }
  .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;}
  .btn-primary{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.85rem;
    padding:14px 26px;
    background:linear-gradient(90deg,var(--teal),var(--violet));
    color:var(--on-accent);
    align-items:center;
    gap:8px;
    transition:transform .2s, box-shadow .2s;
  }
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(70,224,232,0.25);}
  .btn-ghost{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.85rem;
    padding:14px 26px;
    border:1px solid var(--line);
    border-radius:100px;
    color:var(--ink);
    transition:border-color .2s;
  }
  .btn-ghost:hover{border-color:var(--muted);}

  .hero-visual{
    position:relative;
    height:380px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  @media(max-width:900px){
    .hero{grid-template-columns:1fr;padding-top:52px;padding-bottom:60px;gap:36px;}
    .hero-visual{height:auto;order:-1;}
    .hero p{max-width:none;}
  }
  @media(max-width:560px){
    .hero{padding-top:40px;padding-bottom:48px;}
    .hero-ctas{flex-direction:column;align-items:stretch;}
    .hero-ctas a{text-align:center;}
  }

  /* ---------- SIGNATURE SECTION DIVIDER ---------- */
  .signature{
    padding:10px 0 40px;
    display:flex;
    justify-content:center;
  }
  .signature svg{width:100%;max-width:900px;height:auto;}

  /* ---------- SERVICES ---------- */
  .services{padding-top:70px;padding-bottom:70px;}
  .section-head{margin-bottom:48px;max-width:640px;}
  @media(max-width:560px){
    .services{padding-top:48px;padding-bottom:48px;}
    .section-head{margin-bottom:32px;}
  }
  .section-head h2{font-size:clamp(1.55rem,5.5vw,2.4rem);margin-top:12px;}
  .services-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
  }
  .service-card{
    background:var(--panel);
    padding:32px 26px;
    transition:background .25s, transform .25s ease, box-shadow .25s ease;
    position:relative;
  }
  .service-card:hover{
    background:var(--panel-2);
    transform:translateY(-4px);
    box-shadow:0 20px 40px -24px rgba(18,27,46,0.25);
    z-index:1;
  }
  .service-card .icon{
    width:38px;height:38px;
    margin-bottom:22px;
    color:var(--teal);
    transition:transform .3s ease;
  }
  .service-card:hover .icon{transform:scale(1.1) rotate(-4deg);}
  .service-card h3{font-size:1.1rem;margin-bottom:10px;}
  .service-card p{color:var(--muted);font-size:0.92rem;}

  @media(max-width:900px){
    .services-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:560px){
    .services-grid{grid-template-columns:1fr;}
  }

  /* ---------- ABOUT ---------- */
  .about{padding-top:70px;padding-bottom:70px;}
  .about-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:56px;
    align-items:center;
  }
  @media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:32px;}}
  .about-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:20px;
    padding:40px;
    position:relative;
    overflow:hidden;
  }
  .about-card::before{
    content:'';
    position:absolute;
    width:220px;height:220px;
    background:radial-gradient(circle,rgba(12,157,176,0.18),transparent 70%);
    top:-60px;right:-60px;
  }
  .about-card::after{
    content:'';
    position:absolute;
    inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='160' viewBox='0 0 140 160'%3E%3Cpolygon points='35,2 105,2 140,80 105,158 35,158 0,80' fill='none' stroke='%230c9db0' stroke-width='1'/%3E%3C/svg%3E");
    background-size:140px 160px;
    opacity:0.05;
    pointer-events:none;
  }
  .about-card h3, .about-card .about-list{position:relative;z-index:1;}
  .about-card h3{font-size:1.3rem;margin-bottom:18px;position:relative;}
  .about-list{list-style:none;display:flex;flex-direction:column;gap:16px;position:relative;}
  .about-list li{display:flex;gap:12px;align-items:flex-start;font-size:0.94rem;color:var(--muted);}
  .about-list li svg{flex-shrink:0;margin-top:2px;color:var(--teal);}
  .about-list li b{color:var(--ink);font-weight:600;}
  .about-text h2{font-size:clamp(1.55rem,5.5vw,2.4rem);margin-bottom:20px;}
  .about-text p{color:var(--muted);margin-bottom:16px;max-width:52ch;}
  .projects{padding-top:70px;padding-bottom:70px;}
  @media(max-width:560px){.projects{padding-top:48px;padding-bottom:48px;}}
  .project{
    display:grid;
    grid-template-columns:0.95fr 1.05fr;
    gap:56px;
    align-items:center;
    padding:64px 0;
    border-top:1px solid var(--line);
    position:relative;
  }
  .project:nth-child(1){--accent:var(--teal);}
  .project:nth-child(2){--accent:var(--violet);}
  .project:nth-child(3){--accent:var(--magenta);}
  .project-index{
    font-family:'Fraunces',serif;
    font-size:5.5rem;
    font-weight:400;
    font-style:italic;
    color:var(--panel-2);
    line-height:1;
    position:absolute;
    top:44px;
    right:0;
    z-index:-1;
    user-select:none;
  }
  .project:nth-child(even) .project-index{right:auto;left:0;}
  .project-industry{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.76rem;
    color:var(--accent);
    margin-bottom:8px;
    display:block;
  }
  .project:nth-child(even){grid-template-columns:1.05fr 0.95fr;}
  .project:nth-child(even) .project-mock{order:2;}
  @media(max-width:900px){
    .project, .project:nth-child(even){grid-template-columns:1fr;gap:28px;padding:48px 0;}
    .project-mock{order:2;}
    .project h3{font-size:1.4rem;}
    .project-index{font-size:3.5rem;top:20px;}
  }
  @media(max-width:560px){
    .about-card{padding:28px 22px;}
    .browser-body{padding:16px;}
    .mock-eshop{grid-template-columns:repeat(2,1fr);}
    .mock-admin{flex-direction:column;}
    .mock-admin .side{width:100%;flex-direction:row;}
    .mock-admin .side div{flex:1;height:8px;}
    .mock-booking{gap:4px;}
  }

  .project-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
  .tag{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem;
    letter-spacing:0.04em;
    padding:5px 12px;
    border:1px solid var(--line);
    border-radius:100px;
    color:var(--muted);
    transition:border-color .2s, color .2s;
  }
  .project:hover .tag{border-color:var(--accent);color:var(--ink);}
  .project h3{font-size:1.7rem;margin-bottom:14px;}
  .project p{color:var(--muted);margin-bottom:20px;}
  .project-list{list-style:none;font-size:0.92rem;color:var(--ink);display:flex;flex-direction:column;gap:8px;}
  .project-list li{padding-left:20px;position:relative;}
  .project-list li::before{
    content:'';
    position:absolute;left:0;top:9px;
    width:8px;height:8px;
    border-radius:50%;
    background:var(--teal);
  }
  .outcome{
    margin-top:22px;
    padding:14px 18px;
    background:var(--panel-2);
    border-left:2px solid var(--accent, var(--magenta));
    border-radius:0 10px 10px 0;
    font-size:0.88rem;
    color:var(--ink);
  }

  /* CSS browser mockup */
  .browser{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 24px 50px -20px rgba(18,27,46,0.16);
    transition:transform .35s cubic-bezier(0.16,1,0.3,1), box-shadow .35s ease;
  }
  .browser::before{
    content:'';
    display:block;
    height:3px;
    background:var(--accent, var(--teal));
  }
  .project:hover .browser{
    transform:translateY(-6px);
    box-shadow:0 34px 60px -20px rgba(18,27,46,0.22);
  }
  .browser-bar{
    display:flex;align-items:center;gap:6px;
    padding:12px 14px;
    background:var(--panel-2);
    border-bottom:1px solid var(--line);
  }
  .browser-bar span{width:9px;height:9px;border-radius:50%;background:var(--line);}
  .browser-bar .url{
    margin-left:10px;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    color:var(--muted);
    background:var(--void);
    padding:4px 10px;
    border-radius:6px;
    flex:1;
  }
  .browser-body{padding:22px;min-height:200px;}
  .browser-shot{padding:0 !important;min-height:0 !important;line-height:0;}
  .browser-shot img{width:100%;display:block;}

  .browser-strip{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:14px;
  }
  @media(max-width:560px){
    .browser-strip{grid-template-columns:1fr;}
  }
  .strip-item{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 14px 30px -18px rgba(18,27,46,0.16);
  }
  .strip-item img{
    display:block;
    width:100%;
    height:auto;
  }
  .strip-item span{
    display:block;
    padding:9px 14px;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem;
    letter-spacing:0.04em;
    color:var(--muted);
    border-top:1px solid var(--line);
  }

  /* mockup 1: eshop grid */
  .mock-eshop{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .mock-eshop .item{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:10px;}
  .mock-eshop .thumb{height:52px;border-radius:6px;background:linear-gradient(135deg,var(--magenta),var(--teal));opacity:0.5;margin-bottom:8px;}
  .mock-eshop .bar{height:6px;border-radius:3px;background:var(--line);margin-bottom:5px;}
  .mock-eshop .bar.short{width:60%;}

  /* mockup 2: admin dashboard */
  .mock-admin{display:flex;gap:12px;}
  .mock-admin .side{width:70px;display:flex;flex-direction:column;gap:8px;}
  .mock-admin .side div{height:9px;border-radius:4px;background:var(--line);}
  .mock-admin .side div:first-child{background:var(--teal);width:60%;}
  .mock-admin .main{flex:1;display:flex;flex-direction:column;gap:10px;}
  .mock-admin .stat-row{display:flex;gap:10px;}
  .mock-admin .stat{flex:1;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:10px;}
  .mock-admin .stat .num{font-family:'IBM Plex Mono',monospace;font-size:1rem;color:var(--teal);}
  .mock-admin .stat .lbl{font-size:0.62rem;color:var(--muted);margin-top:4px;}
  .mock-admin .chart{flex:1;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;align-items:flex-end;gap:6px;}
  .mock-admin .chart i{display:block;flex:1;background:linear-gradient(180deg,var(--violet),transparent);border-radius:3px 3px 0 0;}

  /* mockup 3: booking calendar */
  .mock-booking{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
  .mock-booking .cell{aspect-ratio:1;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);}
  .mock-booking .cell.on{background:linear-gradient(135deg,var(--teal),var(--violet));opacity:0.75;}

  /* ---------- PROCESS ---------- */
  .process{padding-top:70px;padding-bottom:70px;}
  .process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-top:44px;
    position:relative;
  }
  .process-grid::before{
    content:'';
    position:absolute;
    top:22px;left:0;right:0;
    height:1px;
    background:linear-gradient(90deg,var(--teal),var(--violet),var(--magenta));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 1.2s cubic-bezier(0.16,1,0.3,1);
  }
  .process-grid.in::before{transform:scaleX(1);}
  @media(max-width:900px){
    .process-grid{grid-template-columns:1fr;gap:36px;}
    .process-grid::before{display:none;}
  }
  .step{position:relative;}
  .step .num{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.85rem;
    color:var(--on-accent);
    background:var(--teal);
    width:44px;height:44px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:20px;
    position:relative;z-index:2;
    flex-shrink:0;
  }
  .step h4{font-size:1.05rem;margin-bottom:8px;}
  .step p{color:var(--muted);font-size:0.9rem;}

  /* ---------- FAQ ---------- */
  .faq{padding-top:70px;padding-bottom:70px;}
  @media(max-width:560px){.faq{padding-top:48px;padding-bottom:48px;}}
  .faq-list{max-width:760px;}
  .faq-item{
    border-bottom:1px solid var(--line);
  }
  .faq-item summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:22px 4px;
    cursor:pointer;
    font-family:'Fraunces',serif;
    font-size:1.08rem;
    list-style:none;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary .plus{
    flex-shrink:0;
    width:24px;height:24px;
    border-radius:50%;
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    position:relative;
    transition:transform .3s ease, border-color .2s ease;
  }
  .faq-item summary .plus::before,
  .faq-item summary .plus::after{
    content:'';
    position:absolute;
    background:var(--ink);
    transition:opacity .2s ease;
  }
  .faq-item summary .plus::before{width:10px;height:1.5px;}
  .faq-item summary .plus::after{width:1.5px;height:10px;}
  .faq-item[open] summary .plus{transform:rotate(45deg);border-color:var(--teal);}
  .faq-item p{
    padding:0 4px 24px;
    color:var(--muted);
    max-width:60ch;
  }
  .faq-item[open] summary{color:var(--teal);}

  /* ---------- CONTACT ---------- */
  .contact{padding-top:90px;padding-bottom:110px;}
  .contact-box{
    background:linear-gradient(135deg,rgba(12,157,176,0.08),rgba(108,86,217,0.08));
    border:1px solid var(--line);
    border-radius:20px;
    padding:56px;
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:40px;
    align-items:center;
    position:relative;
    overflow:hidden;
  }
  .contact-box::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='160' viewBox='0 0 140 160'%3E%3Cpolygon points='35,2 105,2 140,80 105,158 35,158 0,80' fill='none' stroke='%230c9db0' stroke-width='1'/%3E%3C/svg%3E");
    background-size:140px 160px;
    opacity:0.06;
    pointer-events:none;
  }
  .contact-box > *{position:relative;}
  @media(max-width:820px){
    .contact-box{grid-template-columns:1fr;padding:36px 26px;}
  }
  @media(max-width:560px){
    .contact{padding-top:60px;padding-bottom:70px;}
    .contact-box{padding:28px 22px;border-radius:16px;}
    .contact-box .btn-primary, .about-text .btn-primary{width:100%;text-align:center;justify-content:center;}
  }
  @media(max-width:560px){
    .about{padding-top:48px;padding-bottom:48px;}
    .about-grid{gap:24px;}
  }
  .contact-box h2{font-size:clamp(1.45rem,5.5vw,2.2rem);margin-bottom:14px;}
  .contact-box p{color:var(--muted);max-width:44ch;}
  .contact-info{display:flex;flex-direction:column;gap:18px;}
  .contact-row{display:flex;align-items:center;gap:14px;}
  .contact-row .icon-circle{
    width:44px;height:44px;border-radius:50%;
    background:var(--panel-2);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .contact-row .label{font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;font-family:'IBM Plex Mono',monospace;}
  .contact-row .value{font-size:1.05rem;font-weight:500;}
  .note{
    margin-top:6px;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem;
    color:var(--muted);
    border-left:2px solid var(--magenta);
    padding-left:10px;
  }

  footer{
    padding-top:36px;
    padding-bottom:36px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:var(--muted);
    font-size:0.82rem;
    flex-wrap:wrap;
    gap:12px;
  }
  .footer-sub{margin-top:4px;font-size:0.78rem;}
  .footer-links{display:flex;gap:24px;}
  .footer-links a{transition:color .2s;}
  .footer-links a:hover{color:var(--teal);}
  @media(max-width:560px){
    footer{flex-direction:column;align-items:flex-start;text-align:left;padding-top:28px;padding-bottom:28px;}
    .footer-links{gap:18px;flex-wrap:wrap;}
  }
  @media(max-width:560px){
    .process{padding-top:48px;padding-bottom:48px;}
    .process-grid{gap:28px;margin-top:32px;}
  }

  /* reveal on scroll */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
  .reveal.in{opacity:1;transform:none;}

  .logo-showcase{
    position:relative;
    width:100%;
    max-width:420px;
    margin:0 auto;
    border-radius:24px;
    overflow:hidden;
    background:#0a0f1a;
    box-shadow:0 30px 60px -20px rgba(18,27,46,0.35), 0 0 0 1px var(--line), 0 0 50px -10px rgba(12,157,176,0.35), 0 0 80px -20px rgba(194,63,180,0.25);
  }
  .logo-showcase img{
    display:block;
    width:100%;
    height:auto;
  }

  .brand-mark{
    width:30px;height:30px;
    border-radius:8px;
    object-fit:cover;
    object-position:center 35%;
    flex-shrink:0;
  }