/* อุ่นใจไอที — สไตล์กลางของทุกหน้า */
:root{
    --ink:#14263B;
    --ink-soft:#2C3F53;
    --paper:#EFF3F1;
    --paper-alt:#FFFFFF;
    --amber:#E2963A;
    --amber-soft:#F6D9A8;
    --coral:#D9614F;
    --teal:#2F6E68;
    --line:#DCE3E0;
    --font-display:'Chonburi','Noto Serif Thai',serif;
    --font-body:'IBM Plex Sans Thai','Sarabun',sans-serif;
    --font-mono:'IBM Plex Mono',monospace;
    --radius:18px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--paper);
    line-height:1.65;
  }
  a{color:inherit;}
  img,svg{max-width:100%;display:block;}
  .container{max-width:1120px;margin:0 auto;padding:0 24px;}
  .skip-link{
    position:absolute; left:-999px; top:0; background:var(--amber); color:var(--ink);
    padding:10px 16px; z-index:100; border-radius:0 0 8px 0; font-weight:600;
  }
  .skip-link:focus{left:0;}
  a:focus-visible, button:focus-visible, summary:focus-visible{
    outline:3px solid var(--amber); outline-offset:3px; border-radius:4px;
  }

  /* ---------- Header ---------- */
  header.site{
    position:sticky; top:0; z-index:50;
    background:rgba(239,243,241,0.92); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px;
  }
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
  .brand-mark{width:34px; height:34px; flex:none;}
  .brand-name{font-family:var(--font-display); font-size:1.15rem; color:var(--ink); letter-spacing:0.5px;}
  nav.links{display:flex; gap:28px; font-size:0.95rem; font-weight:500;}
  nav.links a{text-decoration:none; color:var(--ink-soft); position:relative;}
  nav.links a:hover{color:var(--ink);}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 22px; border-radius:999px; font-weight:600; font-size:0.95rem;
    text-decoration:none; border:1px solid transparent; cursor:pointer;
    min-height:44px;
  }
  .btn-primary{background:var(--ink); color:var(--paper-alt);}
  .btn-primary:hover{background:var(--ink-soft);}
  .btn-amber{background:var(--amber); color:var(--ink);}
  .btn-amber:hover{background:#cf8630;}
  .btn-outline{background:transparent; color:var(--ink); border-color:var(--ink);}
  .btn-outline:hover{background:var(--ink); color:var(--paper-alt);}
  .nav-cta{display:none;}
  @media (min-width:840px){ .nav-cta{display:inline-flex;} }

  /* Mobile nav */
  .menu-toggle{
    display:none; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:10px; border:1px solid var(--line);
    background:var(--paper-alt); cursor:pointer; flex:none;
  }
  .menu-toggle svg{width:22px; height:22px;}
  @media (max-width:839px){
    nav.links{
      position:fixed; top:64px; left:0; right:0; bottom:0;
      background:var(--paper-alt); flex-direction:column; gap:2px;
      padding:18px 24px; transform:translateY(-8px); opacity:0; pointer-events:none;
      transition:opacity 0.18s ease, transform 0.18s ease; overflow-y:auto;
    }
    nav.links.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
    nav.links a{
      padding:16px 4px; border-bottom:1px solid var(--line); font-size:1.05rem;
    }
    .menu-toggle{display:flex;}
    .icon-close{display:none;}
    .menu-toggle.open .icon-menu{display:none;}
    .menu-toggle.open .icon-close{display:block;}
    nav.links .mobile-cta{
      margin-top:18px; display:flex; justify-content:center;
    }
  }
  @media (min-width:840px){ .mobile-cta{display:none;} }

  /* ---------- Hero ---------- */
  .hero{
    background:var(--ink);
    color:var(--paper-alt);
    padding:64px 0 0;
    overflow:hidden;
    position:relative;
  }
  .hero-grid{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;
    padding-bottom:48px;
  }
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr; text-align:center;} }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:0.78rem; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--amber-soft); margin-bottom:18px;
  }
  .eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--amber); display:inline-block;}
  h1{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(2.4rem, 5vw, 3.6rem);
    line-height:1.15; margin:0 0 20px;
  }
  h1 span{color:var(--amber-soft);}
  .hero-sub{
    font-size:1.08rem; color:#D9E1E6; max-width:52ch; margin:0 0 30px;
  }
  @media (max-width:900px){ .hero-sub{margin-left:auto; margin-right:auto;} }
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px;}
  @media (max-width:900px){ .hero-ctas{justify-content:center;} }
  .status-badge{
    display:inline-flex; align-items:center; gap:10px;
    background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16);
    padding:9px 16px; border-radius:999px; font-size:0.88rem; color:#D9E1E6;
  }
  .status-dot{width:8px; height:8px; border-radius:50%; background:#7CD9A5; box-shadow:0 0 0 4px rgba(124,217,165,0.2);}

  .hero-art{position:relative;}
  .pulse-ring{ transform-origin:center; animation:pulse 3.6s ease-out infinite; }
  .pulse-ring.r2{ animation-delay:1.2s; }
  .pulse-ring.r3{ animation-delay:2.4s; }
  @keyframes pulse{
    0%{ opacity:0.85; transform:scale(0.85); }
    70%{ opacity:0; }
    100%{ opacity:0; transform:scale(1.05); }
  }

  /* keyword ticker */
  .ticker-wrap{
    border-top:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.04);
    overflow:hidden;
    white-space:nowrap;
  }
  .ticker{
    display:inline-flex; gap:0; padding:14px 0;
    animation:scroll-left 28s linear infinite;
  }
  @media (prefers-reduced-motion: reduce){ .ticker{animation:none;} }
  @keyframes scroll-left{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  .ticker span{
    font-family:var(--font-mono); font-size:0.82rem; color:#B9C4CC;
    padding:0 22px; border-right:1px solid rgba(255,255,255,0.15);
  }

  /* ---------- Section shells ---------- */
  section{padding:88px 0;}
  .section-head{max-width:640px; margin:0 auto 48px;}
  .section-head.center{text-align:center; margin-left:auto; margin-right:auto;}
  .kicker{
    font-family:var(--font-mono); font-size:0.78rem; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--teal); margin-bottom:12px; display:block;
  }
  h2{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(1.8rem, 3vw, 2.4rem); margin:0 0 14px; color:var(--ink);
  }
  .lede{color:var(--ink-soft); font-size:1.02rem;}

  /* ---------- Services ---------- */
  .services{background:var(--paper-alt);}
  .card-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px;}
  @media (max-width:1080px){ .card-grid{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:700px){ .card-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:480px){ .card-grid{grid-template-columns:1fr;} }
  .service-card{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:28px 24px; transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
  .service-card:hover{ transform:translateY(-4px); box-shadow:0 14px 28px -18px rgba(20,38,59,0.35); }
  .service-icon{width:44px; height:44px; margin-bottom:18px;}
  .service-card h3{font-size:1.08rem; margin:0 0 10px; font-weight:700;}
  .service-card p{margin:0; font-size:0.92rem; color:var(--ink-soft);}

  /* ---------- Paths (for you) ---------- */
  .paths-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  @media (max-width:820px){ .paths-grid{grid-template-columns:1fr;} }
  .path-card{
    border-radius:24px; padding:36px 32px; position:relative; overflow:hidden;
  }
  .path-card.people{background:var(--paper-alt); border:1px solid var(--line);}
  .path-card.biz{background:var(--ink); color:var(--paper-alt);}
  .path-card h3{font-family:var(--font-display); font-weight:400; font-size:1.5rem; margin:0 0 6px;}
  .path-card.biz h3{color:var(--amber-soft);}
  .path-tag{font-family:var(--font-mono); font-size:0.75rem; letter-spacing:1px; text-transform:uppercase; opacity:0.7;}
  .path-list{list-style:none; margin:22px 0 28px; padding:0; display:flex; flex-direction:column; gap:12px;}
  .path-list li{display:flex; gap:10px; font-size:0.95rem; align-items:flex-start;}
  .path-list li::before{content:""; width:8px; height:8px; margin-top:7px; border-radius:50%; background:var(--amber); flex:none;}
  .path-card.biz .path-list li::before{background:var(--teal);}

  /* ---------- Process ---------- */
  .process{background:var(--paper-alt);}
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
  @media (max-width:900px){ .steps{grid-template-columns:1fr; gap:28px;} }
  .step{position:relative; padding:0 20px 0 0;}
  .step:not(:last-child)::after{
    content:""; position:absolute; top:22px; right:-4px; width:calc(100% - 44px); height:1px;
    background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px);
  }
  @media (max-width:900px){ .step:not(:last-child)::after{display:none;} }
  .step-num{
    font-family:var(--font-mono); font-size:0.95rem; color:var(--amber);
    width:44px; height:44px; border:1px solid var(--amber); border-radius:50%;
    display:flex; align-items:center; justify-content:center; margin-bottom:18px; background:var(--paper);
  }
  .step h3{font-size:1.02rem; margin:0 0 8px;}
  .step p{font-size:0.9rem; color:var(--ink-soft); margin:0;}

  /* ---------- Trust ---------- */
  .trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  @media (max-width:980px){ .trust-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:600px){ .trust-grid{grid-template-columns:1fr;} }
  .trust-item{display:flex; flex-direction:column; gap:12px;}
  .trust-icon{width:36px; height:36px; color:var(--teal);}
  .trust-item h3{font-size:1rem; margin:0;}
  .trust-item p{font-size:0.9rem; color:var(--ink-soft); margin:0;}

  /* ---------- Local SEO / FAQ ---------- */
  .local-seo{background:var(--ink); color:var(--paper-alt);}
  .local-seo .kicker{color:var(--amber-soft);}
  .local-seo h2{color:var(--paper-alt);}
  .local-seo .lede{color:#C9D3D9;}
  .seo-copy{max-width:760px; font-size:0.98rem; color:#D9E1E6; margin-bottom:44px;}
  .seo-copy strong{color:var(--amber-soft); font-weight:600;}
  .faq{max-width:820px;}
  .faq details{
    border-bottom:1px solid rgba(255,255,255,0.15); padding:18px 0;
  }
  .faq summary{
    cursor:pointer; font-weight:600; font-size:1rem; list-style:none;
    display:flex; justify-content:space-between; align-items:center; gap:16px;
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:"+"; font-family:var(--font-mono); font-size:1.3rem; color:var(--amber-soft); flex:none;}
  .faq details[open] summary::after{content:"–";}
  .faq p{margin:14px 0 0; color:#C9D3D9; font-size:0.94rem; max-width:68ch;}

  /* ---------- About / vision ---------- */
  .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  @media (max-width:820px){ .about-grid{grid-template-columns:1fr;} }
  .about-card{border-radius:24px; padding:34px 30px;}
  .about-card.now{background:var(--paper-alt); border:1px solid var(--line);}
  .about-card.next{background:var(--amber-soft);}
  .about-card .path-tag{color:var(--ink-soft);}
  .about-card h3{font-family:var(--font-display); font-weight:400; font-size:1.4rem; margin:10px 0 14px;}
  .about-card p{font-size:0.95rem; color:var(--ink-soft); margin:0;}

  /* ---------- Contact ---------- */
  .contact{background:var(--paper-alt);}
  .contact-box{
    background:var(--ink); color:var(--paper-alt); border-radius:28px;
    padding:52px 44px; display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center;
  }
  @media (max-width:820px){ .contact-box{grid-template-columns:1fr; padding:36px 26px;} }
  .contact-box h2{color:var(--paper-alt); margin-bottom:12px;}
  .contact-box p{color:#D9E1E6; max-width:48ch;}
  .contact-links{display:flex; flex-direction:column; gap:14px;}
  .contact-link{
    display:flex; align-items:center; gap:14px; padding:14px 18px;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
    border-radius:14px; text-decoration:none; color:var(--paper-alt); font-weight:600; font-size:0.95rem;
  }
  .contact-link:hover{background:rgba(255,255,255,0.12);}
  .contact-link .ico{width:22px; height:22px; flex:none; color:var(--amber-soft);}
  .contact-link small{display:block; font-weight:400; color:#B9C4CC; font-size:0.78rem; margin-top:2px;}

  /* ---------- Footer ---------- */
  footer{padding:40px 0; border-top:1px solid var(--line);}
  .footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
  .footer-brand{display:flex; align-items:center; gap:10px;}
  .footer-brand .brand-mark{width:26px; height:26px;}
  footer p{font-size:0.85rem; color:var(--ink-soft); margin:0;}

  /* ---------- Mobile refinements (all breakpoints) ---------- */
  @media (max-width:900px){
    section{padding:64px 0;}
    .hero{padding-top:44px;}
    .hero-art{max-width:300px; margin:0 auto;}
  }
  @media (max-width:600px){
    .container{padding:0 18px;}
    .nav-row{padding:12px 18px;}
    .brand-name{font-size:1.02rem;}
    section{padding:52px 0;}
    h1{font-size:clamp(2rem, 8vw, 2.6rem);}
    h2{font-size:clamp(1.5rem, 6vw, 1.9rem);}
    .hero-ctas .btn, .hero-ctas{width:100%;}
    .hero-ctas{flex-direction:column;}
    .hero-ctas .btn{justify-content:center;}
    .status-badge{text-align:left; font-size:0.82rem;}
    .ticker span{font-size:0.76rem; padding:0 16px;}
    .path-card{padding:28px 22px;}
    .contact-box{border-radius:22px;}
    .contact-link{padding:14px;}
    .step-num{width:38px; height:38px; font-size:0.85rem;}
  }
  @media (max-width:400px){
    .hero-art{max-width:240px;}
  }
/* --- บรรทัดพื้นที่ให้บริการใต้ H1 --- */
  .hero-areas{
    font-family:var(--font-mono); font-size:0.86rem; letter-spacing:0.3px;
    color:var(--amber-soft); margin:0 0 18px;
  }
  @media (max-width:900px){ .hero-areas{margin-left:auto; margin-right:auto;} }

  /* --- แถบติดต่อลอยล่างจอมือถือ --- */
  .sticky-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:80;
    display:flex; gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(8px);
    border-top:1px solid var(--line);
  }
  .sticky-cta a{
    display:flex; align-items:center; justify-content:center; gap:8px;
    min-height:52px; border-radius:12px; font-weight:600; font-size:1rem;
    text-decoration:none;
  }
  .sticky-cta .s-line{ flex:1; background:#06C755; color:#fff; }
  .sticky-cta .s-tel{ flex:0 0 100px; background:var(--ink); color:#fff; }
  .sticky-cta svg{ width:20px; height:20px; flex:none; }
  body{ padding-bottom:86px; }
  @media (min-width:840px){
    .sticky-cta{ display:none; }
    body{ padding-bottom:0; }
  }