:root{
      --navy:#081936;
      --navy-2:#0d234b;
      --blue:#1664ff;
      --cyan:#00b9e8;
      --ink:#0f172a;
      --muted:#64748b;
      --line:#e6edf5;
      --soft:#f5f8fc;
      --white:#ffffff;
      --radius:24px;
      --shadow:0 20px 60px rgba(8,25,54,.12);
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:'Inter','Noto Sans Thai',sans-serif;
      color:var(--ink);
      background:#fff;
      line-height:1.6;
      overflow-x:hidden;
    }
    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}
    .container{width:min(1180px,calc(100% - 40px));margin:auto}
    .section{padding:100px 0}
    .eyebrow{
      display:inline-flex;align-items:center;gap:10px;
      font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
      color:var(--blue);margin-bottom:16px;
    }
    .eyebrow:before{content:"";width:34px;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:9px}
    h1,h2,h3{font-family:'Manrope',sans-serif;line-height:1.1}
    h2{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.04em;margin-bottom:18px}
    .lead{font-size:1.08rem;color:var(--muted);max-width:720px}

    /* Header */
    header{
      position:fixed;top:0;left:0;right:0;z-index:50;
      background:rgba(255,255,255,.86);backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(230,237,245,.75)
    }
    .nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.18em;color:var(--navy)}
    .brandmark{
      width:42px;height:42px;border-radius:12px;position:relative;overflow:hidden;
      background:linear-gradient(145deg,var(--navy),#0f3d83);
      box-shadow:0 10px 25px rgba(8,25,54,.18)
    }
    .brandmark:before{
      content:"B";position:absolute;inset:0;display:grid;place-items:center;
      color:#fff;font-family:'Manrope';font-size:25px;font-weight:800;
    }
    .brandmark:after{
      content:"";position:absolute;width:70px;height:12px;background:linear-gradient(90deg,var(--cyan),var(--blue));
      transform:rotate(-42deg);left:-15px;bottom:5px;opacity:.95
    }
    .navlinks{display:flex;align-items:center;gap:28px;font-size:.92rem;font-weight:600;color:#334155}
    .navlinks a:hover{color:var(--blue)}
    .nav-cta{padding:12px 18px;border-radius:999px;background:var(--navy);color:#fff!important}
    .lang-switch{display:flex;align-items:center;gap:4px;padding:4px;background:#f1f5f9;border-radius:999px}
    .lang-btn{border:0;background:transparent;color:#64748b;font:inherit;font-size:.78rem;font-weight:800;padding:7px 10px;border-radius:999px;cursor:pointer;transition:.2s}
    .lang-btn.active{background:var(--navy);color:#fff;box-shadow:0 4px 14px rgba(8,25,54,.16)}
    .menu-btn{display:none;border:0;background:none;font-size:26px;color:var(--navy);cursor:pointer}

    /* Hero */
    .hero{
      min-height:100vh;display:flex;align-items:center;padding:140px 0 90px;position:relative;overflow:hidden;
      background:
        radial-gradient(circle at 82% 23%,rgba(0,185,232,.14),transparent 26%),
        radial-gradient(circle at 72% 68%,rgba(22,100,255,.12),transparent 32%),
        linear-gradient(180deg,#fff 0%,#f9fbff 100%);
    }
    .hero:before{
      content:"";position:absolute;right:-110px;top:120px;width:520px;height:520px;border:1px solid rgba(22,100,255,.08);border-radius:50%;
      box-shadow:0 0 0 70px rgba(22,100,255,.025),0 0 0 140px rgba(0,185,232,.02)
    }
    .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:70px;position:relative;z-index:2}
    .hero h1{font-size:clamp(3rem,7vw,6.25rem);letter-spacing:-.06em;color:var(--navy);margin:10px 0 24px}
    .hero h1 span{background:linear-gradient(90deg,var(--blue),var(--cyan));-webkit-background-clip:text;color:transparent}

    /* Thai typography: cleaner proportions for large display text */
    html[lang="th"] body{font-family:'Noto Sans Thai','Inter',sans-serif}
    html[lang="th"] h1,
    html[lang="th"] h2,
    html[lang="th"] h3{font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif}
    html[lang="th"] .hero h1{
      font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif;
      font-size:clamp(3rem,5.45vw,5.25rem);
      font-weight:700;
      line-height:1.14;
      letter-spacing:-.035em;
      max-width:760px;
      margin:14px 0 26px;
    }
    html[lang="th"] .hero h1 .hero-line{display:block}
    html[lang="th"] .hero h1 .hero-line + .hero-line{margin-top:.05em}
    html[lang="th"] .hero h1 span{font-weight:700}
    html[lang="th"] .hero p{font-size:1.12rem;line-height:1.85;max-width:720px}
    html[lang="th"] h2{font-weight:700;line-height:1.22;letter-spacing:-.025em}
    .hero p{font-size:1.18rem;color:#536176;max-width:680px;margin-bottom:34px}
    .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 22px;border-radius:999px;font-weight:700;transition:.25s ease}
    .btn-primary{background:linear-gradient(90deg,var(--navy),#113f84);color:#fff;box-shadow:0 14px 35px rgba(8,25,54,.18)}
    .btn-primary:hover{transform:translateY(-2px)}
    .btn-ghost{border:1px solid #d9e4f2;color:var(--navy);background:#fff}
    .hero-card{
      background:linear-gradient(145deg,var(--navy),#0c2f65);border-radius:36px;padding:42px;color:#fff;box-shadow:0 30px 80px rgba(8,25,54,.24);position:relative;overflow:hidden
    }
    .hero-card:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(0,185,232,.13);right:-90px;top:-80px}
    .hero-card:after{content:"";position:absolute;width:150%;height:44px;background:linear-gradient(90deg,var(--cyan),var(--blue));transform:rotate(-35deg);left:-30%;bottom:48px;opacity:.72}
    .big-b{font-family:'Manrope';font-size:190px;font-weight:800;line-height:.85;letter-spacing:-.12em;position:relative;z-index:2}
    .hero-card small{position:relative;z-index:2;display:block;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:#a7c9f8;margin-top:24px}
    .hero-card strong{position:relative;z-index:2;display:block;font-size:1.4rem;margin-top:8px}

    /* Speciality */
    .soft{background:var(--soft)}
    .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px}
    .card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;transition:.25s ease}
    .card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
    .icon{
      width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin-bottom:22px;
      background:linear-gradient(145deg,#ecf4ff,#eefcff);color:var(--blue);font-weight:800;font-size:1.25rem
    }
    .card h3{font-size:1.18rem;margin-bottom:12px;color:var(--navy)}
    .card p{color:var(--muted);font-size:.95rem}

    /* Services */
    .services-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start;margin-top:18px}
    .sticky{position:sticky;top:120px}
    .service-list{border-top:1px solid var(--line)}
    .service-row{display:grid;grid-template-columns:70px 1fr auto;gap:18px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line)}
    .num{font-family:'Manrope';font-weight:800;color:#a8b5c7}
    .service-row h3{font-size:1.18rem;color:var(--navy);margin-bottom:4px}
    .service-row p{color:var(--muted);font-size:.94rem}
    .arrow{font-size:1.2rem;color:var(--blue)}

    /* Clients */
    .client-wrap{background:var(--navy);color:#fff;border-radius:34px;padding:58px;margin-top:44px;position:relative;overflow:hidden}
    .client-wrap:before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;border:1px solid rgba(255,255,255,.06);right:-110px;top:-160px}
    .client-wrap .lead{color:#afbdd2}
    .logos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px;position:relative;z-index:2}
    .logo-box{height:100px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);border-radius:18px;display:grid;place-items:center;color:#e7efff;font-weight:800;letter-spacing:.08em;font-size:.95rem}
    .logo-box span{opacity:.75}

    /* Contact */
    .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
    .contact-meta{margin-top:32px;display:grid;gap:16px}
    .meta-item{padding:18px 0;border-bottom:1px solid var(--line)}
    .meta-item small{display:block;color:#94a3b8;text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-bottom:5px}
    .meta-item strong{color:var(--navy)}
    form{background:#fff;border:1px solid var(--line);border-radius:26px;padding:30px;box-shadow:0 18px 60px rgba(15,23,42,.06)}
    .field{margin-bottom:16px}
    label{display:block;font-weight:700;font-size:.88rem;margin-bottom:8px;color:#334155}
    input,textarea{width:100%;border:1px solid #dce6f1;border-radius:14px;padding:14px 16px;font:inherit;outline:none;transition:.2s;background:#fbfdff}
    input:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,100,255,.08)}
    textarea{min-height:140px;resize:vertical}
    .form-note{font-size:.8rem;color:#94a3b8;margin-top:10px}

    footer{padding:30px 0;border-top:1px solid var(--line);color:#78879a;font-size:.88rem}
    .footer-flex{display:flex;align-items:center;justify-content:space-between;gap:20px}

    .reveal{opacity:0;transform:translateY(24px);transition:.6s ease}
    .reveal.show{opacity:1;transform:none}

    @media(max-width:980px){
      .hero-grid,.services-grid,.contact-grid{grid-template-columns:1fr}
      .hero{min-height:auto}
      .hero-card{max-width:560px}
      .cards{grid-template-columns:repeat(2,1fr)}
      .sticky{position:static}
      .logos{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:760px){
      .section{padding:76px 0}
      .navlinks{position:absolute;top:76px;left:20px;right:20px;display:none;flex-direction:column;align-items:stretch;padding:18px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
      .navlinks.open{display:flex}
      .menu-btn{display:block}
      .lang-switch{margin-left:auto}
      .hero{padding-top:120px}
      .hero-grid{gap:36px}
      html[lang="th"] .hero h1{font-size:clamp(2.65rem,10.5vw,4.5rem);line-height:1.16;letter-spacing:-.025em}
      .hero-card{padding:30px}
      .big-b{font-size:130px}
      .cards{grid-template-columns:1fr}
      .service-row{grid-template-columns:48px 1fr auto}
      .client-wrap{padding:34px 24px}
      .logos{grid-template-columns:1fr 1fr}
      .footer-flex{flex-direction:column;align-items:flex-start}
    }
    @media(max-width:480px){
      .container{width:min(100% - 28px,1180px)}
      .logos{grid-template-columns:1fr}
      .hero-actions{flex-direction:column;align-items:stretch}
      .btn{width:100%}
    }

.eyebrow-light{color:#62d7ff}
.btn-submit{border:0;cursor:pointer;width:100%}