/* ============================================================
   eSense — shared design system
   Brand: navy #232E38 · blue #405663 · white #fff
   Pillar accents: terracotta · teal · mauve · steel
   Neutral tints: sand #E7DFC6 · pale ice #E9F1F7
   Headings: Space Grotesk · Body: Inter
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* core */
  --navy:#232E38;
  --navy-700:#2c3a46;
  --navy-600:#34434f;
  --blue:#405663;
  --blue-600:#4a6271;
  --white:#ffffff;

  /* neutral tints */
  --sand:#E7DFC6;
  --ice:#E9F1F7;
  --paper:#FBFAF6;        /* warm near-white page bg */
  --line:#e4e7ea;         /* hairlines on light */
  --line-dark:#3a4854;    /* hairlines on navy */

  /* text */
  --ink:#1c252e;
  --ink-soft:#516170;
  --ink-faint:#8090a0;
  --on-dark:#eef3f6;
  --on-dark-soft:#a9b8c4;

  /* pillar accents */
  --c-arch:#B98761;       /* AI in Architecture — terracotta */
  --c-med:#569D9D;        /* AI in Healthcare — teal */
  --c-law:#885E72;        /* AI in Law — mauve */
  --c-auto:#547682;       /* AI Automation — steel blue */

  /* type */
  --display:'Space Grotesk',-apple-system,system-ui,sans-serif;
  --body:'Inter',-apple-system,system-ui,sans-serif;

  /* spacing / radius */
  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-xl:42px; --r-pill:999px;
  --container:1240px;
  --pad:clamp(20px,5vw,64px);

  /* shadow */
  --shadow-sm:0 1px 2px rgba(35,46,56,.05), 0 4px 16px rgba(35,46,56,.05);
  --shadow-md:0 8px 30px rgba(35,46,56,.09);
  --shadow-lg:0 24px 70px rgba(35,46,56,.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--blue);color:#fff}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.02em;color:var(--ink)}
.display{font-weight:700;letter-spacing:-.035em;line-height:.98}
.eyebrow{
  font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:currentColor;display:inline-block}
.lead{font-size:clamp(18px,2vw,21px);color:var(--ink-soft);line-height:1.55;max-width:54ch}

/* ---------- layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(72px,10vw,128px)}
.section-sm{padding-block:clamp(48px,7vw,84px)}
.center{text-align:center}
.muted{color:var(--ink-soft)}
.grid{display:grid;gap:24px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.01em;
  padding:14px 26px;border-radius:var(--r-pill);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s,box-shadow .25s,color .2s;
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;transition:transform .25s}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:#34495a;transform:translateY(-2px);box-shadow:0 10px 26px rgba(64,86,99,.32)}
.btn-primary:hover svg{transform:translateX(3px)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:#34434f;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.22)}
.btn-on-dark{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px var(--line-dark)}
.btn-on-dark:hover{box-shadow:inset 0 0 0 1.5px #fff;transform:translateY(-2px)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:15px;color:var(--blue)}
.link-arrow svg{width:16px;height:16px;transition:transform .25s}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- header ---------- */
.top-nav{display:flex;align-items:center;gap:2px}
.top-nav a{font-family:var(--display);font-weight:500;font-size:14.5px;color:var(--ink-soft);padding:8px 13px;border-radius:10px;transition:background .16s,color .16s}
.top-nav a:hover{color:var(--ink);background:rgba(35,46,56,.06)}
.top-nav a.active{color:var(--navy);font-weight:600}
@media (max-width:980px){.top-nav{display:none}}

.site-header{
  position:sticky;top:0;z-index:200;
  background:rgba(251,250,246,.78);
  backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.site-header.scrolled{border-color:var(--line);box-shadow:0 1px 0 rgba(35,46,56,.04)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:26px;width:auto}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:8px}
.nav-link{
  font-family:var(--display);font-weight:500;font-size:15px;color:var(--ink);
  padding:9px 14px;border-radius:var(--r-pill);transition:background .18s,color .18s;position:relative;
  display:inline-flex;align-items:center;gap:6px;
}
.nav-link:hover{background:rgba(35,46,56,.06)}
.nav-link svg{width:13px;height:13px;opacity:.6;transition:transform .2s}
.has-menu:hover .nav-link svg{transform:rotate(180deg)}
.nav-right{display:flex;align-items:center;gap:14px;margin-left:auto}

/* services dropdown */
.has-menu{position:relative}
.menu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);
  width:340px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:10px;opacity:0;visibility:hidden;transition:.22s;
}
.has-menu:hover .menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.menu-item{display:flex;gap:13px;align-items:flex-start;padding:11px 12px;border-radius:12px;transition:background .16s}
.menu-item:hover{background:var(--ice)}
.menu-dot{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center}
.menu-dot svg{width:18px;height:18px;color:#fff}
.menu-item b{font-family:var(--display);font-weight:600;font-size:14.5px;display:block;color:var(--ink)}
.menu-item span{font-size:13px;color:var(--ink-faint);line-height:1.4}

/* lang switch */
.lang{display:inline-flex;background:rgba(35,46,56,.07);border-radius:var(--r-pill);padding:3px;gap:2px}
.lang button{
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.02em;
  padding:6px 12px;border-radius:var(--r-pill);color:var(--ink-soft);transition:.18s;
}
.lang button.active{background:#fff;color:var(--navy);box-shadow:var(--shadow-sm)}

/* hamburger */
.burger{display:none;width:42px;height:42px;border-radius:12px;place-items:center}
.burger svg{width:22px;height:22px}
.mobile-menu{display:none}

/* ---------- service card system (extensible) ---------- */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.pillar{
  --accent:var(--blue);
  position:relative;display:block;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 34px 30px;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;
}
.pillar::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.pillar:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.pillar:hover::before{transform:scaleX(1)}
.pillar-icon{
  width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:22px;
  background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent);
  transition:background .35s,color .35s;
}
.pillar:hover .pillar-icon{background:var(--accent);color:#fff}
.pillar-icon svg{width:27px;height:27px}
.pillar-num{position:absolute;top:30px;right:34px;font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink-faint);letter-spacing:.05em}
.pillar h3{font-size:23px;margin-bottom:10px}
.pillar p{font-size:15.5px;color:var(--ink-soft);line-height:1.55;margin-bottom:20px}
.pillar .link-arrow{color:var(--accent)}

/* ---------- curve motif (signature) ---------- */
.curves{position:absolute;pointer-events:none;opacity:.5;z-index:0}
.curves path,.curves ellipse,.curves rect{fill:none;stroke-width:1.4}
@keyframes drift{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(14px,-12px) rotate(2deg)}100%{transform:translate(0,0) rotate(0)}}
.curves-anim{animation:drift 26s ease-in-out infinite}
.curves-anim.slow{animation-duration:38s}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:var(--on-dark);position:relative;overflow:hidden}
.site-footer .container{position:relative;z-index:1}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-block:72px 56px}
.footer-brand img{height:26px;margin-bottom:20px}
.footer-brand p{color:var(--on-dark-soft);font-size:15px;max-width:30ch}
.footer-col h5{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.footer-col a,.footer-col p{display:block;color:var(--on-dark-soft);font-size:15px;padding:5px 0;transition:color .18s}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid var(--line-dark);padding-block:26px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer-bottom p{color:var(--on-dark-soft);font-size:13.5px}
.footer-langs{display:flex;gap:18px}
.footer-langs a{color:var(--on-dark-soft);font-size:13.5px}

/* ---------- trust strip ---------- */
.trust{display:flex;align-items:center;gap:clamp(28px,5vw,68px);flex-wrap:wrap;justify-content:center}
.trust-stat{display:flex;flex-direction:column;gap:2px}
.trust-stat b{font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:-.02em;color:var(--navy);line-height:1}
.trust-stat span{font-size:13.5px;color:var(--ink-faint)}
.logo-row{display:flex;gap:clamp(24px,4vw,52px);align-items:center;flex-wrap:wrap;justify-content:center}
.logo-ph{height:26px;width:108px;border-radius:6px;background:repeating-linear-gradient(135deg,#dfe4e8,#dfe4e8 7px,#e9edf0 7px,#e9edf0 14px);opacity:.8}

/* ---------- placeholder image frame ---------- */
.ph{
  position:relative;border-radius:var(--r-lg);overflow:hidden;background:#dde4ea;
  background-image:repeating-linear-gradient(135deg,rgba(64,86,99,.07),rgba(64,86,99,.07) 11px,transparent 11px,transparent 22px);
  display:grid;place-items:center;color:var(--blue);
}
.ph::after{content:attr(data-label);font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.04em;color:#5d7180;opacity:.85;padding:6px 12px;background:rgba(255,255,255,.6);border-radius:7px;backdrop-filter:blur(2px)}

/* ---------- cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}

/* ---------- reveal animation (transform-only rise — content NEVER hidden) ---------- */
.reveal{opacity:1}
.reveal.in{animation:revealUp .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes revealUp{from{transform:translateY(24px)}to{transform:none}}
.reveal.in[data-d="1"]{animation-delay:.07s}
.reveal.in[data-d="2"]{animation-delay:.14s}
.reveal.in[data-d="3"]{animation-delay:.21s}
.reveal.in[data-d="4"]{animation-delay:.28s}
@media (prefers-reduced-motion:reduce){.reveal.in{animation:none}.curves-anim{animation:none}}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .nav-links{display:none}
  .nav .btn-primary{display:none}
  .burger{display:grid}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:680px){
  body{font-size:16px}
  .pillars{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .lang{display:none}
}