/* ==========================================================
     1. TOKENS
     ========================================================== */
  :root{
    --paper:      #F6F5F0;
    --paper-alt:  #EEEBE2;
    --navy:       #101A21;
    --navy-alt:   #0B1319;
    --ink:        #14191C;
    --ink-soft:   #4C5459;
    --line:       #DAD5C8;
    --line-dark:  rgba(255,255,255,.14);
    --muted-dark: #9FB1B7;
    --accent:     #2F7D68;
    --accent-soft:#E4EEE9;
    --accent-on-dark:#5BBF9F;  /* 7.9:1 on --navy — readable accent text on dark sections */
    --accent-text:#1F5A4A;     /* 6.8:1 on light tints — small accent text on light cards */
    --copper:     #B8752A;
    --white:      #FFFFFF;

    --font-head: 'Space Grotesk', 'Segoe UI', ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
    --font-body: 'Inter', 'Segoe UI', ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;

    --max: 1180px;
    --pad: clamp(20px, 5vw, 64px);
  }

  /* ==========================================================
     2. RESET / BASE
     ========================================================== */
  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; overflow-x:hidden; }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
  ul{ list-style:none; margin:0; padding:0; }
  h1,h2,h3,h4{ font-family:var(--font-head); font-weight:600; margin:0; letter-spacing:-0.01em; }
  p{ margin:0; }
  select{ font:inherit; color:inherit; }

  :focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

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

  .wrap{
    max-width:var(--max);
    margin:0 auto;
    padding-left:var(--pad);
    padding-right:var(--pad);
  }

  .section{
    padding:52px 0;
    border-top:1px solid var(--line);
  }
  .section--dark{
    background:var(--navy);
    color:var(--white);
    border-top:1px solid var(--line-dark);
  }
  .section--dark .section-intro{ color:var(--muted-dark); }

  .eyebrow-num{
    font-family:var(--font-head);
    font-size:13px;
    color:var(--accent);
    letter-spacing:0.02em;
  }

  .section-head{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:32px;
  }
  .section-title{
    font-size:clamp(24px, 2.8vw, 32px);
    max-width:520px;
  }
  .section-intro{
    max-width:480px;
    padding-top:4px;
    color:var(--ink-soft);
    font-size:20px;
    line-height:1.5;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 26px;
    border-radius:8px;
    font-family:var(--font-head);
    font-size:15px;
    font-weight:500;
    transition:background .18s ease, color .18s ease, border-color .18s ease, transform .15s ease, box-shadow .2s ease;
    border:1px solid transparent;
    white-space:nowrap;
  }
  .btn--primary{
    background:var(--accent);
    color:var(--white);
    box-shadow:0 2px 10px rgba(47,125,104,.28);
  }
  .btn--primary:hover{ background:#256355; transform:translateY(-2px); box-shadow:0 8px 20px rgba(47,125,104,.38); }
  .btn--primary:active{ transform:translateY(0) scale(.97); }
  .btn--ghost{
    border-color:currentColor;
  }
  .btn--ghost:hover{ background:rgba(255,255,255,.08); transform:translateY(-2px); }
  .btn--ghost:active{ transform:translateY(0) scale(.97); }
  .section:not(.section--dark) .btn--ghost{ border-color:var(--ink); }
  .section:not(.section--dark) .btn--ghost:hover{ background:rgba(20,25,28,.06); }
  .btn--copper{ background:#96601F; color:var(--white); }
  .btn--copper:hover{ background:#7E501A; }

  /* ==========================================================
     3. HEADER / NAV
     ========================================================== */
  .site-header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(246,245,240,.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:64px;
  }
  .brand{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-family:var(--font-head);
    font-weight:600;
    font-size:19px;
    letter-spacing:0.01em;
  }
  .brand-icon{ width:28px; height:28px; flex-shrink:0; }
  .nav-links{
    display:flex;
    gap:36px;
    align-items:center;
  }
  .nav-links a{
    font-size:15px;
    color:var(--ink-soft);
    transition:color .18s ease;
    position:relative;
    padding-bottom:3px;
  }
  .nav-links a::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:0;
    height:2px;
    background:var(--accent);
    border-radius:2px;
    transition:width .25s ease;
  }
  .nav-links a:hover{ color:var(--accent); }
  .nav-links a:hover::after{ width:100%; }

  .lang-switch{
    display:flex;
    gap:3px;
    padding:3px;
    background:var(--paper-alt);
    border:1px solid var(--line);
    border-radius:20px;
  }
  .lang-switch button{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 13px 6px 8px;
    border-radius:16px;
    font-family:var(--font-head);
    font-size:12px;
    font-weight:600;
    letter-spacing:0.02em;
    color:var(--ink-soft);
    transition:background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
  }
  .lang-flag{
    width:18px; height:13px;
    border-radius:2px;
    object-fit:cover;
    flex-shrink:0;
    box-shadow:0 0 0 1px rgba(0,0,0,.08);
  }
  .lang-switch button:hover{ color:var(--ink); }
  .lang-switch button:active{ transform:scale(0.9); }
  .lang-switch button[aria-pressed="true"]{
    background:var(--accent);
    color:var(--white);
    box-shadow:0 3px 10px rgba(47,125,104,.35);
  }

  .nav-right{ display:flex; align-items:center; gap:22px; }

  .nav-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    padding:6px;
  }
  .nav-toggle span{
    width:22px; height:2px; background:var(--ink);
    transition:transform .2s ease, opacity .2s ease;
  }

  .mobile-panel{
    display:none;
    position:fixed;
    inset:64px 0 0 0;
    background:var(--paper);
    z-index:99;
    padding:32px var(--pad);
    overflow-y:auto;
  }
  .mobile-panel.is-open{ display:block; }
  .mobile-panel .nav-links{
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
    margin-bottom:32px;
  }
  .mobile-panel .nav-links a{ font-size:22px; color:var(--ink); }
  .mobile-panel .nav-links a:hover{ color:var(--accent); }
  .mobile-panel .lang-switch{ width:fit-content; }
  .mobile-panel-cta{ display:flex; margin-top:28px; width:100%; }

  /* On phones/tablets, instead of hiding nav links + lang switch +
     CTA behind a hamburger menu, wrap the header onto multiple
     centered rows so everything stays directly visible: brand on
     its own line, nav links below it, language switch + CTA
     button on a third line. The hamburger/mobile-panel markup is
     left in place (harmless, just never shown) rather than
     removed, to keep this change low-risk. */
  @media (max-width: 860px){
    .nav-row{
      flex-wrap:wrap;
      justify-content:center;
      height:auto;
      padding:8px 0;
      row-gap:6px;
    }
    .nav-links{
      order:2;
      flex-basis:100%;
      justify-content:center;
      flex-wrap:wrap;
      gap:6px 14px;
    }
    .nav-right{
      order:3;
      flex-basis:100%;
      justify-content:center;
      flex-wrap:wrap;
      gap:8px;
    }
    .nav-toggle{ display:none; }
  }

  /* ==========================================================
     4. HERO
     ========================================================== */
  .hero{
    background:var(--navy);
    color:var(--white);
    padding:24px 0 20px;
    overflow:hidden;
  }
  .hero .wrap{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:32px;
    align-items:stretch;
  }
  .hero-copy{ max-width:640px; }
  .hero-title{
    font-size:clamp(20px, 2.8vw, 28px);
    line-height:1.12;
    margin-bottom:8px;
  }
  .hero-sub{
    font-size:17px;
    color:var(--muted-dark);
    max-width:480px;
    margin-bottom:14px;
  }
  .hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }

  .hero-stats{
    display:flex;
    gap:24px;
    flex-wrap:wrap;
    margin-top:14px;
    padding-top:10px;
    border-top:1px solid var(--line-dark);
  }
  .hero-stat{ display:flex; flex-direction:column; gap:1px; }
  .hero-stat .num{ font-family:var(--font-head); font-size:17px; font-weight:600; color:var(--accent-on-dark); }
  .hero-stat .label{ font-size:13px; color:var(--muted-dark); }

  .hero-photo{
    border-radius:8px;
    overflow:hidden;
    border:1px solid var(--line-dark);
    min-height:200px;
  }
  .hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

  @media (max-width: 860px){
    .hero .wrap{ grid-template-columns:1fr; }
    .hero-photo{ order:-1; min-height:0; }
    .hero-photo img{ height:auto; aspect-ratio:16/9; }
  }

  /* ==========================================================
     5. SERVICES (spec-sheet list)
     ========================================================== */
  .service-list{ border-top:1px solid var(--line); }
  .service-row{
    display:grid;
    grid-template-columns:64px 1fr 1.4fr;
    gap:20px;
    padding:16px 0;
    border-bottom:1px solid var(--line);
    align-items:baseline;
  }
  .service-row .num{ font-family:var(--font-head); color:var(--accent); font-size:14px; }
  .service-row h3{ font-size:19px; }
  .service-row p{ color:var(--ink-soft); font-size:17px; }

  @media (max-width: 700px){
    .service-row{ grid-template-columns:36px 1fr; }
    .service-row p{ grid-column:2; }
  }

  /* ==========================================================
     6. WHAT I BUILD (grid)
     ========================================================== */
  .build-grid{
    display:grid;
    /* minmax(0,1fr): long words (e.g. German "Google-Sheets-Integrationen")
       can't force a column wider than its share of the screen */
    grid-template-columns:repeat(4, minmax(0, 1fr));
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
  }
  .build-cell{
    padding:20px 22px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    overflow-wrap:break-word;
    hyphens:auto;
  }
  .build-cell .mark{
    width:28px; height:28px;
    border:1px solid var(--accent);
    border-radius:50%;
    margin-bottom:12px;
    position:relative;
  }
  .build-cell .mark::before{
    content:"";
    position:absolute; left:50%; top:50%;
    width:9px; height:9px;
    background:var(--accent);
    border-radius:50%;
    transform:translate(-50%,-50%);
  }
  .build-cell h3{ font-size:20px; line-height:1.25; margin-bottom:8px; }
  .build-cell p{ font-size:18px; line-height:1.5; color:var(--ink-soft); }

  @media (max-width: 900px){ .build-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 500px){ .build-grid{ grid-template-columns:minmax(0, 1fr); } }

  /* ==========================================================
     7. PROJECTS
     ========================================================== */

  /* Featured real/live project — visually separate from the demo
     mockups below it, so it reads as proof-of-work rather than
     "just another concept card". */
  .featured-project{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:center;
    padding:24px;
    margin-bottom:16px;
    border:2px solid var(--accent);
    border-radius:8px;
    background:var(--accent-soft);
  }
  .featured-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-head);
    font-size:13px;
    font-weight:600;
    letter-spacing:0.02em;
    color:var(--white);
    background:var(--accent);
    padding:7px 14px 7px 12px;
    border-radius:20px;
    margin-bottom:16px;
  }
  .featured-badge .dot{
    width:11px; height:11px; border-radius:50%; background:#fff;
    flex-shrink:0;
    animation:featured-pulse 1.6s ease-out infinite;
  }
  @keyframes featured-pulse{
    0%{ box-shadow:0 0 0 0 rgba(255,255,255,.75); opacity:1; }
    50%{ opacity:.55; }
    70%{ box-shadow:0 0 0 7px rgba(255,255,255,0); }
    100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); opacity:1; }
  }
  .featured-project h3{ font-size:22px; margin-bottom:10px; }
  .featured-project p.desc{ font-size:18px; margin-bottom:16px; max-width:480px; }
  .featured-devices{
    display:flex; flex-wrap:wrap; gap:16px;
    margin:12px 0 0; padding:0;
    font-size:15px; color:var(--ink-soft);
  }
  .featured-device{ display:inline-flex; align-items:center; gap:6px; }
  .featured-device .check{ color:var(--accent); font-weight:700; }

  .featured-frame{
    display:block;
    border-radius:6px;
    overflow:hidden;
    border:1px solid var(--line);
    background:var(--white);
    box-shadow:0 16px 40px rgba(20,25,28,.12);
    transition:box-shadow .2s ease, transform .2s ease;
  }
  .featured-frame:hover{ box-shadow:0 20px 48px rgba(20,25,28,.18); transform:translateY(-2px); }
  .featured-frame .mock-window{
    margin-bottom:0;
    padding:10px 12px;
    background:var(--paper-alt);
    border-bottom:1px solid var(--line);
  }
  .featured-frame .mock-url{
    font-size:12px;
    color:var(--ink-soft);
    margin-left:6px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:3px;
    padding:3px 10px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .featured-frame img{ width:100%; height:280px; object-fit:cover; object-position:top; display:block; background:var(--paper-alt); }

  @media (max-width: 860px){
    .featured-project{ grid-template-columns:1fr; padding:18px; }
    .featured-frame img{ height:220px; }
  }

  /* Case study — sits right under the live project, same accent frame
     family but lighter, so it reads as "the story behind that card". */
  .case-study{
    margin:0 0 24px;
    border:1px solid var(--line);
    border-left:4px solid var(--accent);
    border-radius:8px;
    background:var(--white);
  }
  /* Collapsed state = a compact clickable bar; the whole bar is the button */
  .case-toggle{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:16px 20px;
    cursor:pointer;
    list-style:none;
    border-radius:8px;
    transition:background .15s ease;
  }
  .case-toggle::-webkit-details-marker{ display:none; }
  .case-toggle:hover{ background:var(--accent-soft); }
  .case-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .case-toggle-text{ display:flex; flex-direction:column; gap:2px; }
  .case-label{
    display:inline-block;
    font-family:var(--font-head); font-size:12px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase;
    color:var(--accent-text);
  }
  .case-title{ font-family:var(--font-head); font-size:18px; font-weight:600; color:var(--ink); line-height:1.3; }
  .case-chevron{
    flex-shrink:0;
    width:36px; height:36px; border-radius:50%;
    background:var(--accent);
    display:flex; align-items:center; justify-content:center;
    transition:transform .25s ease;
  }
  .case-chevron::before{
    content:"";
    width:9px; height:9px;
    border-right:2px solid var(--white); border-bottom:2px solid var(--white);
    transform:translateY(-2px) rotate(45deg);
  }
  .case-study[open] .case-chevron{ transform:rotate(180deg); }
  .case-study[open] .case-toggle{ border-radius:8px 8px 0 0; }
  .case-body{ padding:4px 24px 24px; }
  .case-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
  .case-step{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%;
    background:var(--accent); color:var(--white);
    font-family:var(--font-head); font-size:15px; font-weight:600;
    margin-bottom:8px;
  }
  .case-col h4{ font-family:var(--font-head); font-size:20px; margin-bottom:8px; }
  .case-col p{ font-size:18px; color:var(--ink-soft); line-height:1.55; }
  .case-list{ list-style:none; margin:0; padding:0; }
  .case-list li{
    position:relative; padding-left:20px; margin-bottom:8px;
    font-size:18px; color:var(--ink-soft); line-height:1.5;
  }
  .case-list li::before{ content:"✓"; position:absolute; left:0; color:var(--accent-text); font-weight:700; }
  .case-facts{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
    margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  }
  .case-fact{ display:flex; flex-direction:column; gap:2px; }
  .case-fact .num{ font-family:var(--font-head); font-size:33px; font-weight:700; color:var(--accent-text); line-height:1.1; }
  .case-fact span:last-child{ font-size:17px; color:var(--ink-soft); line-height:1.35; }

  @media (max-width: 860px){
    .case-grid{ grid-template-columns:1fr; gap:18px; }
    .case-facts{ grid-template-columns:repeat(2, 1fr); }
    .case-toggle{ padding:14px 16px; }
    .case-title{ font-size:16px; }
    .case-body{ padding:4px 18px 18px; }
  }

  .project{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px;
    align-items:center;
    padding:32px 0;
    border-bottom:1px solid var(--line);
  }
  .project:last-child{ border-bottom:none; }

  /* Demo concepts — each one collapsed into a compact button bar
     (category, title, "Demo concept" tag + the same round arrow as the
     case study); click to reveal the description + interactive mockup. */
  .project-toggle{
    margin-bottom:12px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--white);
  }
  .project-summary{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:14px 20px;
    cursor:pointer;
    list-style:none;
    border-radius:8px;
    transition:background .15s ease;
  }
  .project-summary::-webkit-details-marker{ display:none; }
  .project-summary:hover{ background:var(--accent-soft); }
  .project-summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .project-summary-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
  .project-summary .project-category{ display:block; margin-bottom:0; }
  .project-summary-line{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; }
  .project-summary-title{ font-family:var(--font-head); font-size:19px; font-weight:600; color:var(--ink); line-height:1.25; }
  .project-summary .tag{ margin-bottom:0; }
  .project-toggle[open] .case-chevron{ transform:rotate(180deg); }
  .project-toggle[open] .project-summary{ border-radius:8px 8px 0 0; }
  .project-toggle .project{ padding:8px 20px 24px; border-bottom:none; align-items:start; }
  /* Fixed reading order for every card, on every screen size: text
     (category, tag, title, description) first, then the photo +
     demo mockup — no left/right alternation between cards. */
  .project-mock{ order:2; }

  .tag{
    display:inline-block;
    font-size:14px;
    font-family:var(--font-head);
    padding:5px 12px;
    border:1px solid var(--line);
    border-radius:3px;
    color:var(--ink-soft);
    margin-bottom:10px;
  }
  .project-category{ font-size:16px; font-weight:600; color:var(--accent); font-family:var(--font-head); margin-bottom:6px; }
  .project h3{ font-size:21px; margin-bottom:8px; }
  .project p.desc{ font-size:19px; line-height:1.55; color:var(--ink-soft); margin-bottom:14px; max-width:500px; }
  /* Project 1 — feature checklist above the "Open demo site" button */
  .project-features{ margin:0 0 18px; }

  /* Themed banner above each project mockup — a real photo where one
     exists, falling back to custom line-art (own palette, no licensing
     risk, matches the hero artwork) for the rest. */
  .project-photo{
    aspect-ratio:16/9;
    border-radius:6px;
    border:1px solid var(--line);
    background:var(--paper-alt);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:10px;
    overflow:hidden;
  }
  .project-photo svg{ width:54%; height:54%; }
  .project-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* generic mockup shell */
  .mock{
    background:var(--paper-alt);
    border:1px solid var(--line);
    border-radius:6px;
    padding:16px;
  }
  .mock-window{ display:flex; gap:6px; margin-bottom:12px; }
  .mock-dot{ width:8px; height:8px; border-radius:50%; background:var(--line); }
  .mock-title{ font-family:var(--font-head); font-size:17px; margin-bottom:12px; }
  .mock-row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 12px; margin-bottom:8px; }
  .mock-row label{ font-size:16px; color:var(--ink-soft); }
  .mock-row select{
    background:var(--white); border:1px solid var(--line); border-radius:3px;
    padding:9px 10px; font-size:16px; min-width:0; width:100%; max-width:200px; flex:1 1 auto;
  }
  .mock-total{
    display:flex; justify-content:space-between; align-items:baseline;
    margin-top:12px; padding-top:10px; border-top:1px solid var(--line);
    font-family:var(--font-head);
  }
  .mock-total .amount{ font-size:26px; color:var(--accent-text); }

  .mock-list-row{
    display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); font-size:16px; gap:10px;
  }
  .mock-list-row:last-child{ border-bottom:none; }
  .badge{ font-size:14px; font-family:var(--font-head); padding:3px 10px; border-radius:10px; white-space:nowrap; }
  .badge--new{ background:#EFE6D6; color:#8A5A1E; }
  .badge--progress{ background:var(--accent-soft); color:var(--accent-text); }
  .badge--done{ background:#E2EEE7; color:var(--accent-text); }

  .calendar-mini{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:6px; }
  .calendar-mini span{
    aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    font-size:14px; border-radius:3px; background:var(--white); border:1px solid var(--line); color:var(--ink-soft);
  }
  .calendar-mini span.on{ background:var(--accent); color:#fff; border-color:var(--accent); }

  .mock-checks{ display:flex; flex-direction:column; gap:10px; margin:14px 0; }
  .mock-checks label{ display:flex; align-items:center; gap:10px; font-size:16px; color:var(--ink); }
  .mock-checks input{ accent-color:var(--accent); width:15px; height:15px; }

  /* Demo contact form inside the Project 5 card only (not the real inquiry form) */
  .project .order-field label{ font-size:16px; }
  .project .field-with-check input{ font-size:17px; }
  .project .order-demo-status{ font-size:16px; }
  .project .email-inline-error{ font-size:14px; }

  @media (max-width: 820px){
    .project{ grid-template-columns:1fr; gap:24px; }
    .project-summary{ padding:12px 16px; }
    .project-summary-title{ font-size:17px; }
    .project-toggle .project{ padding:4px 16px 18px; }
  }

  /* ----------------------------------------------------------
     Contact-form mock (Project 5) — demo only, client-side
     validation for Name / Email / Phone. Same validation logic
     as WEBWORKS's other order-intake forms (realistic-email TLD
     check, per-country phone digit count with a real flag/dial
     code picker) — the submit button does not send data
     anywhere, see the ORDER FORM DEMO block in the script below.
     ---------------------------------------------------------- */
  .order-field{ margin-bottom:16px; }
  .order-field label{
    display:block;
    font-size:14px;
    font-family:var(--font-head);
    color:var(--ink-soft);
    margin-bottom:6px;
  }
  .field-with-check{ position:relative; display:flex; align-items:center; }
  .field-with-check input{
    width:100%;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:3px;
    padding:11px 34px 11px 12px;
    font-size:14px;
    font-family:var(--font-body);
    color:var(--ink);
    transition:border-color .15s ease;
  }
  .field-with-check input:focus-visible{ border-color:var(--accent); }
  .field-check{
    position:absolute;
    right:10px;
    font-size:13px;
    color:var(--accent);
    opacity:0;
    transition:opacity .15s ease;
  }
  .order-field.is-valid .field-check{ opacity:1; }

  .email-inline-error{
    display:block;
    min-height:16px;
    visibility:hidden;
    color:#C0392B;
    font-size:12px;
    font-weight:600;
    margin-top:6px;
  }
  .email-inline-error.visible{ visibility:visible; }

  .phone-row{ display:flex; gap:6px; align-items:stretch; }
  .phone-field-wrap{ flex:1 1 auto; min-width:0; }
  #inquiryPhoneNumber{ font-size:20px; font-weight:600; letter-spacing:0.5px; }

  .country-select-wrap{ position:relative; flex:0 0 auto; }
  .country-select-btn{
    display:flex;
    align-items:center;
    gap:6px;
    height:100%;
    padding:0 8px;
    border:1px solid var(--line);
    border-radius:3px;
    background:var(--white);
    font-family:var(--font-head);
    font-size:13px;
    color:var(--ink);
  }
  .country-select-btn .country-flag-img{
    width:20px; height:14px;
    border-radius:2px;
    background:var(--paper-alt);
    flex-shrink:0;
  }
  .country-select-arrow{ font-size:9px; color:var(--ink-soft); }

  .country-select-dropdown{
    display:none;
    position:absolute;
    top:calc(100% + 4px);
    left:0;
    z-index:20;
    width:250px;
    max-width:80vw;
    max-height:260px;
    overflow-y:auto;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:6px;
    box-shadow:0 10px 30px rgba(20,25,28,.16);
    padding:4px;
  }
  .country-select-dropdown.open{ display:block; }
  .country-option{
    display:flex;
    align-items:center;
    gap:8px;
    padding:7px 8px;
    border-radius:3px;
    cursor:pointer;
    font-size:13px;
  }
  .country-option:hover, .country-option:focus{ background:var(--accent-soft); }
  .country-option .country-flag-img{ width:20px; height:14px; border-radius:2px; background:var(--paper-alt); flex-shrink:0; }
  .country-option-code{ color:var(--accent); font-weight:600; flex-shrink:0; min-width:42px; }
  .country-option-name{ color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .order-form-mock .btn{ width:100%; margin-top:6px; }
  .order-demo-status{ font-size:13px; color:var(--accent); margin-top:12px; display:none; }
  .order-demo-status.is-shown{ display:block; }

  /* ==========================================================
     8. PROCESS
     ========================================================== */
  .process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    position:relative;
  }
  .process-grid::before{
    content:"";
    position:absolute; left:0; right:0; top:20px;
    height:1px; background:var(--line-dark);
  }
  .process-step{ padding-right:28px; position:relative; }
  .process-step .step-num{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px;
    border:1px solid var(--accent);
    border-radius:50%;
    font-family:var(--font-head);
    font-size:17px;
    background:var(--navy);
    position:relative; z-index:2;
    margin-bottom:14px;
  }
  .process-step h3{ font-size:21px; margin-bottom:8px; }
  .process-step p{ font-size:18px; line-height:1.55; color:var(--muted-dark); }

  @media (max-width: 800px){
    .process-grid{ grid-template-columns:1fr; gap:22px; }
    .process-grid::before{ left:20px; top:0; bottom:0; right:auto; width:1px; height:auto; }
    .process-step{ padding-left:60px; padding-right:0; }
    .process-step .step-num{ position:absolute; left:0; top:0; margin-bottom:0; }
  }

  /* ==========================================================
     9. WHY
     ========================================================== */
  .why-list{ border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; }
  .why-item{
    padding:16px 20px;
    border-bottom:1px solid var(--line);
    border-right:1px solid var(--line);
  }
  .why-item:nth-child(2n){ border-right:none; }
  .why-item h3{ font-size:20px; margin-bottom:6px; }
  .why-item p{ font-size:18px; line-height:1.55; color:var(--ink-soft); }

  @media (max-width: 700px){
    .why-list{ grid-template-columns:1fr; }
    .why-item{ border-right:none; }
  }

  /* ==========================================================
     9b. GUARANTEES + MEASURED QUALITY
     ========================================================== */
  #guarantees{ background:var(--paper-alt); }
  .guarantee-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
  .guarantee{
    padding:22px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--white);
  }
  .guarantee-icon{ width:36px; height:36px; color:var(--accent); margin-bottom:10px; }
  .guarantee h3{ font-size:21px; margin-bottom:8px; }
  .guarantee p{ font-size:18px; color:var(--ink-soft); line-height:1.55; }

  /* Lighthouse-style score rings: the green arc length = --score %. */
  .quality{
    margin-top:24px;
    padding:22px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--white);
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:20px;
    align-items:center;
  }
  .quality-head h3{ font-size:21px; margin-bottom:6px; }
  .quality-head p{ font-size:17px; color:var(--ink-soft); line-height:1.5; }
  .quality-scores{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
  .score{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
  .score-ring{
    width:84px; height:84px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:conic-gradient(#0C9D58 calc(var(--score) * 1%), #DDEFE5 0);
  }
  .score-num{
    width:68px; height:68px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--white);
    font-family:var(--font-head); font-size:24px; font-weight:700; color:#0A6E3E;
  }
  .score-label{ font-size:17px; color:var(--ink-soft); }

  @media (max-width: 860px){
    .guarantee-grid{ grid-template-columns:1fr; }
    .quality{ grid-template-columns:1fr; }
    .quality-scores{ grid-template-columns:repeat(2, 1fr); row-gap:18px; }
  }

  /* ==========================================================
     10. CONTACT
     ========================================================== */
  .contact{ text-align:left; }
  .contact-title{
    font-size:clamp(24px, 3.6vw, 36px);
    line-height:1.1;
    margin-bottom:20px;
  }
  .contact-title span{ display:block; color:var(--muted-dark); }
  .contact-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px; }

  /* Real project-inquiry form — a light card against the dark Contact
     section, matching the other working forms on the site. No backend:
     submitting opens the visitor's own email client with everything
     they wrote, in whatever language they wrote it in. */
  .inquiry-form{
    display:none;
    max-width:540px;
    background:var(--paper-alt);
    border-radius:8px;
    padding:22px;
    margin-bottom:32px;
    color:var(--ink);
  }
  .inquiry-form.is-open{ display:block; }
  .inquiry-form h3{ font-size:23px; margin-bottom:8px; }
  .inquiry-intro{ font-size:17px; color:var(--ink-soft); margin-bottom:16px; line-height:1.5; }
  .inquiry-form textarea{
    width:100%;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:3px;
    padding:10px 12px;
    font-size:17px;
    font-family:var(--font-body);
    color:var(--ink);
    resize:vertical;
    min-height:90px;
    transition:border-color .15s ease;
  }
  .inquiry-form textarea:focus-visible{ border-color:var(--accent); }
  /* 16px inputs: bigger text and no iPhone auto-zoom when a field is tapped */
  .inquiry-form .order-field label{ font-size:16px; }
  .inquiry-form .field-with-check input{ font-size:17px; }
  .inquiry-form .country-select-btn{ font-size:16px; }
  /* In the real form the "Latin only" email warning takes no room until
     it's actually shown — the hidden reserved block left a big empty gap
     between the Email and Phone fields. */
  .inquiry-form .email-inline-error{ font-size:15px; display:none; min-height:0; }
  .inquiry-form .email-inline-error.visible{ display:block; }

  /* Hidden until the phone number above is fully valid — same
     "appears + highlighted" behavior as the Arduino/ESP32 order
     form's messenger block. */
  .messenger-field{ margin-bottom:16px; display:none; }
  .messenger-field.visible{
    display:block;
    background:var(--accent-soft);
    border-radius:8px;
    padding:10px 12px;
  }
  .messenger-field label{
    display:block;
    font-size:16px;
    font-family:var(--font-head);
    color:var(--ink-soft);
    margin-bottom:6px;
  }
  .messenger-options{ display:flex; gap:16px; flex-wrap:wrap; }
  .messenger-opt{ display:flex !important; align-items:center; gap:6px; font-size:17px; color:var(--ink); font-family:var(--font-body); margin-bottom:0 !important; }
  .messenger-opt input{ accent-color:var(--accent); width:17px; height:17px; }

  .inquiry-form .btn{ width:100%; margin-top:4px; position:relative; }
  .inquiry-form .btn:disabled{ opacity:1; cursor:default; background:var(--accent); }

  /* Sending state — same spinner-on-the-button approach as the
     Arduino/ESP32 order form, so it's visually obvious a request
     is in flight rather than the button just looking stuck. */
  .inquiry-form .btn.sending{ background:#888; cursor:wait; }
  .inquiry-form .btn.loading::after{
    content:"";
    position:absolute;
    right:16px;
    top:50%;
    width:14px;
    height:14px;
    margin-top:-7px;
    border:2px solid #fff;
    border-top:2px solid transparent;
    border-radius:50%;
    animation:webworks-spin .7s linear infinite;
  }
  @keyframes webworks-spin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
  }
  .inquiry-form .btn.error{ background:#c0392b; }
  .inquiry-send-again-notice{ display:none; font-size:16px; color:var(--ink-soft); margin-top:10px; line-height:1.4; }
  .inquiry-send-again-notice.visible{ display:block; }
  .inquiry-note{ font-size:16px; color:var(--ink-soft); margin-top:10px; line-height:1.4; }
  .inquiry-status{
    display:none;
    align-items:center;
    gap:8px;
    font-size:18px;
    font-weight:600;
    color:var(--accent);
    background:var(--accent-soft);
    border:1px solid var(--accent);
    border-radius:6px;
    padding:10px 12px;
    margin-top:12px;
  }
  .inquiry-status.is-shown{ display:flex; }
  .inquiry-status::before{ content:"✅"; font-size:16px; line-height:1; flex-shrink:0; }

  /* Validation errors — same visual language as the Arduino/ESP32
     order form: a red border+tint around the invalid field, one
     combined error line above the button, and a quick shake when
     the visitor tries to submit with something still wrong. */
  .inquiry-form-error{
    margin-top:8px;
    font-size:17px;
    font-weight:600;
    color:#c0392b;
    min-height:0;
  }
  .error-field{
    border:2px solid #e74c3c !important;
    background:#fff6f6 !important;
    border-radius:6px;
    padding:6px;
  }
  .error-scroll{ animation:webworks-shake .25s linear 2; }
  @keyframes webworks-shake{
    0%{ transform:translateX(0); }
    25%{ transform:translateX(-4px); }
    50%{ transform:translateX(4px); }
    75%{ transform:translateX(-4px); }
    100%{ transform:translateX(0); }
  }

  @media (max-width: 500px){
    .inquiry-form{ max-width:none; padding:18px; }
  }

  .channels{
    display:flex; gap:40px; flex-wrap:wrap;
    border-top:1px solid var(--line-dark);
    padding-top:20px;
  }
  .channel dt{
    display:flex; align-items:center; gap:7px;
    font-family:var(--font-head); font-size:13px; color:var(--accent-on-dark); margin-bottom:6px;
  }
  .channel dd{ margin:0; font-size:17px; color:var(--muted-dark); }
  .channel dd a{ display:inline-flex; align-items:center; gap:8px; transition:color .15s ease; }
  .channel dd a:hover{ color:var(--white); }
  .channel-icon{ width:18px; height:18px; flex-shrink:0; fill:currentColor; }
  .channel-dt-icon{ width:16px; height:16px; flex-shrink:0; fill:currentColor; }

  /* ==========================================================
     11. FOOTER
     ========================================================== */
  .site-footer{
    background:var(--navy-alt);
    color:var(--muted-dark);
    padding:22px 0;
  }
  .footer-row{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
    font-size:14px;
  }
  .footer-links{ display:flex; gap:24px; }
  .footer-links a:hover{ color:var(--white); }

  /* ----------------------------------------------------------
     Share this site — copy link + a small "share to" menu.
     ---------------------------------------------------------- */
  .share-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:2px; }
  .share-copy-btn, .share-toggle-btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:9px 16px;
    border-radius:20px;
    background:rgba(255,255,255,.06);
    border:1px solid var(--line-dark);
    color:var(--muted-dark);
    font-family:var(--font-head);
    font-size:13px;
    font-weight:500;
    transition:background .18s ease, color .18s ease, transform .15s ease, border-color .18s ease;
  }
  .share-copy-btn svg, .share-toggle-btn svg{ width:16px; height:16px; fill:currentColor; flex-shrink:0; }
  .share-copy-btn:hover, .share-toggle-btn:hover{ background:rgba(255,255,255,.12); color:var(--white); transform:translateY(-1px); }
  .share-copy-btn:active, .share-toggle-btn:active{ transform:translateY(0) scale(.96); }
  .share-copy-btn.is-copied{ background:var(--accent); color:var(--white); border-color:var(--accent); }

  .share-wrap{ position:relative; }
  .share-menu{
    display:none;
    position:absolute;
    bottom:calc(100% + 8px);
    left:0;
    z-index:20;
    min-width:180px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:8px;
    box-shadow:0 14px 34px rgba(0,0,0,.3);
    padding:6px;
  }
  .share-menu.is-open{ display:block; }
  .share-menu-item{
    display:flex; align-items:center; gap:10px;
    width:100%;
    padding:9px 10px;
    border-radius:5px;
    font-family:var(--font-body);
    font-size:14px;
    color:var(--ink);
    text-align:left;
    transition:background .15s ease;
  }
  .share-menu-item:hover{ background:var(--paper-alt); }
  .share-menu-item svg{ width:19px; height:19px; flex-shrink:0; fill:currentColor; }
  .share-menu-item[data-share="whatsapp"] svg{ color:#25D366; }
  .share-menu-item[data-share="telegram"] svg{ color:#229ED9; }
  .share-menu-item[data-share="viber"] svg{ color:#7360F2; }
  .share-menu-item[data-share="email"] svg{ color:var(--ink-soft); }

  /* utility */
  .visually-hidden{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }