/* IFI Studio — static site stylesheet (redesign 2026)
   Guideline: corporate mockup — light surface, blue→magenta gradient brand. */

:root {
  --grad: linear-gradient(90deg, #2f80ff 0%, #6d4df6 45%, #c026d3 100%);
  --grad-soft: linear-gradient(135deg, rgba(47,128,255,.10), rgba(192,38,211,.10));
  --ink: #141a3c;
  --ink-2: #2b3361;
  --muted: #5c6280;
  --line: #e6e8f4;
  --bg: #ffffff;
  --bg-soft: #f6f8fd;
  --navy: #0a0f33;
  --navy-2: #101743;
  --blue: #2f80ff;
  --violet: #7c3aed;
  --magenta: #c026d3;
  --radius: 18px;
  --radius-lg: 26px;
  --shadow-sm: 0 4px 14px rgba(20, 26, 60, .06);
  --shadow-md: 0 14px 40px rgba(20, 26, 60, .10);
  --shadow-grad: 0 10px 26px rgba(109, 77, 246, .35);
  --font: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.wrap { width: min(1180px, 92%); margin: 0 auto; }
section { padding: 84px 0; }

.eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 14px;
}
h1, h2, h3, h4 { line-height: 1.15; font-weight: 700; color: var(--ink); }
h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); letter-spacing: -.015em; }
h3 { font-size: 1.18rem; }
.grad-text {
  color: #6540ce;
}
.lead { color: var(--muted); font-size: 1.05rem; max-width: 56ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: 999px;
  font-weight: 600; font-size: .98rem; border: 0; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  font-family: var(--font);
}
.btn-grad { background: var(--grad); color: #fff; box-shadow: var(--shadow-grad); }
.btn-grad:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(109,77,246,.45); }
.btn-ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--violet); color: var(--violet); }
.btn .arr { transition: transform .18s ease; }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 74px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.main-nav { display: flex; gap: 26px; margin-left: 12px; }
.main-nav a { font-size: .95rem; font-weight: 500; color: var(--ink-2); position: relative; padding: 6px 0; }
.main-nav a:hover, .main-nav a.active { color: var(--violet); }
.main-nav a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2.5px;
  border-radius: 2px; background: var(--grad);
}
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line); color: var(--ink-2);
  background: #fff; cursor: pointer;
}

.header-cta { padding: 11px 22px; font-size: .9rem; }
.nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero { padding: 96px 0 90px; background:
  radial-gradient(700px 380px at 85% 12%, rgba(124,58,237,.10), transparent 60%),
  radial-gradient(600px 360px at 8% 90%, rgba(47,128,255,.08), transparent 60%), #fff;
}
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero p.lead { margin: 22px 0 34px; }
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-visual { position: relative; }

.hero-visual img {
  position: relative; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); aspect-ratio: 4/3.6; object-fit: cover; object-position: center;
}

/* ---------- Services strip ---------- */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.svc-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; position: relative; transition: transform .2s, box-shadow .2s;
}
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.svc-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--grad-soft); margin-bottom: 18px; color: var(--violet);
}
.svc-card p { color: var(--muted); font-size: .92rem; margin-top: 8px; }
.svc-card .go {
  position: absolute; bottom: 18px; right: 20px; width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--muted); font-size: .8rem;
}
.svc-card:hover .go { background: var(--grad); color: #fff; border-color: transparent; }

/* ---------- Products ---------- */
.section-soft { background: var(--bg-soft); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 46px; }
.section-head .sub { color: var(--muted); margin-top: 10px; }
.link-more { font-weight: 600; color: var(--violet); white-space: nowrap; }
.link-more:hover { color: var(--magenta); }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.prod-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 14px;
  transition: transform .2s, box-shadow .2s;
}
.prod-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.prod-top { display: flex; align-items: center; gap: 14px; }
.prod-icon {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  color: #fff; font-weight: 700; flex-shrink: 0; overflow: hidden;
}
.prod-icon img { width: 100%; height: 100%; object-fit: contain; }
.prod-icon.gold { background: #f8b021; }
.prod-icon.pcap { background: #1d4ed8; }
.prod-icon.agri { background: #16a34a; }
.prod-tag { font-size: .74rem; color: var(--muted); letter-spacing: .04em; }
.prod-card p { color: var(--muted); font-size: .92rem; }
.prod-shot {
  margin-top: auto; border-radius: 16px; overflow: hidden;
  aspect-ratio: 16/9.5; display: grid; place-items: center; position: relative;
}
.prod-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot-gold { background: #f6f2e7; }
.shot-agri { background: #063a36; }

.learn { font-weight: 600; font-size: .92rem; color: var(--blue); }
.learn:hover { color: var(--magenta); }



/* ---------- About split ---------- */
.about-split .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-split p { color: var(--muted); margin: 20px 0 30px; }
.about-photo {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
  aspect-ratio: 4/3.4; position: relative; background: var(--navy-2);
  display: grid; place-items: center;
}
.about-photo img { width: 72%; opacity: .95; }

/* ---------- Tech strip ---------- */
.tech-strip { padding: 30px 0 90px; }
.tech-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px 54px; margin-top: 34px; }
.tech-row span {
  display: flex; align-items: center; gap: 10px; color: var(--muted);
  font-weight: 600; font-size: 1.02rem;
}
.tech-row svg { width: 26px; height: 26px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #c3c9ea; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 44px;
  padding: 70px 0 46px;
}
.footer-brand img { width: 42px; margin-bottom: 16px; }
.footer-brand b { color: #fff; font-size: 1.1rem; display: block; margin-bottom: 10px; }
.footer-brand p, .site-footer li a, .site-footer address { font-size: .92rem; color: #a8b0d8; font-style: normal; }
.site-footer h4 { color: #fff; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer li { margin-bottom: 10px; }
.site-footer li a:hover { color: #fff; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.footer-contact svg { flex-shrink: 0; margin-top: 4px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: .85rem; color: #8a91b8;
}
.footer-bottom a:hover { color: #fff; }

/* ---------- Subpages ---------- */
.page-hero {
  padding: 84px 0 60px; text-align: center;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(124,58,237,.10), transparent 65%), #fff;
}
.page-hero .lead { margin: 18px auto 0; }
.content-block { max-width: 780px; margin: 0 auto; padding: 30px 0 84px; }
.content-block h2 { font-size: 1.5rem; margin: 40px 0 14px; }
.content-block p, .content-block li { color: var(--muted); margin-bottom: 12px; }
.content-block ul { padding-left: 22px; list-style: disc; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.feature-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  background: #fff;
}
.feature-card h3 { margin-bottom: 8px; }
.feature-card p { color: var(--muted); font-size: .92rem; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 44px; }
.form-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 38px 34px;
  background: #fff; box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 12px;
  font: inherit; color: var(--ink); background: var(--bg-soft);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--violet); background: #fff; }
.form-note { font-size: .84rem; color: var(--muted); margin-top: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .services-grid, .products-grid { grid-template-columns: repeat(2, 1fr); }
  .hero .wrap, .about-split .wrap, .contact-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  section { padding: 60px 0; }
  .main-nav {
    display: none; position: absolute; top: 74px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: #fff; border-bottom: 1px solid var(--line);
    padding: 10px 4%;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 14px 8px; border-top: 1px solid var(--line); }
  .nav-toggle { display: grid; }
  .header-cta { display: none; }
  .products-grid { grid-template-columns: 1fr; }
  .services-grid, .two-col { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; }
}

/* Approved reference: airy blue surfaces, compact cards, cyan/violet identity. */
:root {
  --grad: linear-gradient(105deg, #00bdeb 0%, #168aff 35%, #783cff 70%, #bc16ef 100%);
  --ink: #0a1746; --ink-2: #263964; --muted: #465b83;
  --bg-soft: #f1f7ff; --line: #e4edfc; --blue: #0876e2;
  --navy: #041326; --radius: 14px; --radius-lg: 18px;
  --shadow-grad: 0 5px 16px #644cf01a;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --grad-text: linear-gradient(105deg, #225bcc 0%, #6540ce 55%, #a025b3 100%);
}
body { line-height: 1.65; }
.wrap { width: min(1180px, 90%); }
section { padding: 52px 0; }
h1 { font-size: clamp(2.7rem, 5vw, 4rem); line-height: 1.1; letter-spacing: -.04em; font-weight: 800; }
h2 { font-size: clamp(1.8rem, 2.9vw, 2.35rem); letter-spacing: -.035em; }
h3 { font-size: 1rem; line-height: 1.3; }
.eyebrow { font-size: .68rem; margin-bottom: 12px; letter-spacing: .18em; }
.btn { font-size: .85rem; padding: 13px 24px; line-height: 1.2; }
.btn-ghost { border-color: #9ca5ff; background: #ffffff80; }
.site-header { background: #ffffffed; }
.site-header .wrap { height: 80px; }
.brand { font-size: 1.65rem; letter-spacing: -.05em; white-space: nowrap; }
.brand img { width: 46px; height: 46px; }
.main-nav { margin: 0 auto; gap: 28px; }
.main-nav a { font-size: .8rem; }
.header-actions { margin-left: 0; }
.header-cta { font-size: .8rem; padding: 12px 20px; }
.home .hero { overflow: hidden; padding: 0; background: radial-gradient(ellipse at 88% 15%,#e4d8ff 0,transparent 45%),linear-gradient(125deg,#fcfeff,#eaf4ff); }
.home .hero .wrap { min-height: 425px; grid-template-columns: 1fr 1.12fr; gap: 18px; }
.hero .lead { font-size: .99rem; margin: 20px 0 24px; max-width: 49ch; }
.hero-btns { gap: 14px; }
.hero-visual { height: 425px; min-width: 0; isolation: isolate; }
.visual-caption { position: absolute; bottom: 7px; right: 0; z-index: 4; font-size: 9px; padding: 4px 8px; background: #fffffff0; color: #364768; border-radius: 5px; }
.services-strip { padding: 18px 0; background: #f8fbff; }
.services-grid { gap: 18px; }
.svc-card { padding: 22px 18px 40px 94px; min-height: 190px; border-color: #fff; box-shadow: 0 4px 20px #65a3e70b; }
.svc-icon { position: absolute; top: 20px; left: 20px; width: 54px; height: 54px; color: white; background: var(--grad); border-radius: 13px; }
.svc-card h3 { font-size: .94rem; }
.svc-card p { font-size: .875rem; line-height: 1.6; }
.svc-card .go { width: 23px; height: 23px; color: #0988ff; border-color: #0988ff; right: 15px; bottom: 13px; }
.home .section-soft { padding: 30px 0 22px; background: linear-gradient(120deg,#f4f9ff,#edf5ff); }
.section-head { margin-bottom: 22px; }
.section-head .sub { margin-top: 7px; font-size: .9rem; }
.link-more { font-size: .85rem; color: var(--ink); }
.products-grid { gap: 20px; }
.home .prod-card { position: relative; min-height: 205px; display: block; padding: 22px 16px 45px 22px; overflow: hidden; border-color: #fff; border-radius: 13px; }
.home .prod-top { gap: 12px; position: relative; z-index: 1; }
.home .prod-icon { width: 44px; height: 44px; }
.prod-icon.gold img { height: auto; padding: 4px; }
.home .prod-tag { font-size: .8125rem; letter-spacing: 0; }
.home .prod-card p { width: 61%; font-size: .9375rem; line-height: 1.6; margin-top: 14px; position: relative; z-index: 1; }
.home .prod-card .learn { position: absolute; bottom: 18px; left: 22px; font-size: .875rem; z-index: 2; }
.home .prod-shot { position: absolute; right: -6px; bottom: -30px; width: 33%; height: 195px; border: 4px solid #10172b; background: #061529; border-radius: 18px; transform: rotate(7deg); aspect-ratio: auto; margin: 0; }
.home .prod-shot img { height: 100%; object-fit: cover; object-position: top; }
.home .shot-pcap { width: 35%; height: 135px; bottom: 22px; transform: perspective(350px) rotateY(-12deg); border-radius: 8px; }
.home .shot-pcap img { object-position: center; }
.prod-shot small { position: absolute; bottom: 28px; right: 0; left: 0; background: #041326dc; color: white; text-align: center; font-size: 8px; padding: 4px 0; }
.home .shot-pcap small { bottom: 0; }
.focus-strip { padding: 22px 0; background: #fcfeff; }
.focus-strip .wrap { display: grid; grid-template-columns: repeat(4,1fr); }
.focus-strip .wrap > div { padding: 4px 28px; border-right: 1px solid var(--line); }
.focus-strip .wrap > div:last-child { border: 0; }
.focus-strip b { font-size: 1.55rem; color: var(--ink); }
.focus-strip span { display: block; color: var(--muted); font-size: .78rem; margin-top: 3px; }
.home .about-split { padding: 28px 0 34px; background: #f3f9ff; }
.about-split .wrap { grid-template-columns: .85fr 1.15fr; gap: 48px; }
.about-split p { font-size: .95rem; margin: 14px 0 20px; }
.about-photo { aspect-ratio: 2.15; box-shadow: none; background: linear-gradient(125deg,#cdefff,#ecedff 60%,#d4c3ff); }
.tech-strip { padding: 24px 0 28px; }
.tech-strip .wrap { text-align: left !important; }
.tech-note { color: var(--muted); font-size: .82rem; }
.tech-row { justify-content: space-around; gap: 22px; margin-top: 19px; }
.tech-row span { flex-direction: column; font-size: .7rem; gap: 7px; }
.tech-row svg { width: 33px; height: 33px; }
.footer-grid { gap: 38px; padding: 28px 0; grid-template-columns: 1.4fr .8fr 1fr 1.3fr; }
.footer-brand img { width: 38px; height: 40px; object-fit: contain; float: left; margin: 0 9px 0 0; }
.footer-brand b { padding-top: 5px; font-size: 1.25rem; }
.footer-brand p { clear: both; padding-top: 12px; max-width: 29ch; }
.site-footer h4 { text-transform: none; letter-spacing: 0; font-size: .8rem; margin-bottom: 12px; }
.footer-brand p,.site-footer li a,.site-footer address,.footer-contact li { font-size: .875rem; line-height: 1.65; }
.site-footer li { margin-bottom: 5px; }
.footer-bottom { padding: 16px 0; font-size: .8125rem; color: #a8b0d8; }
.about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
:focus-visible { outline: 3px solid #0876e2; outline-offset: 5px; }
.skip-link { position: fixed; top: -100px; left: 15px; z-index: 100; background: white; padding: 12px; border: 2px solid #0876e2; }
.skip-link:focus { top: 10px; }
[id] { scroll-margin-top: 96px; }
@media (max-width: 1100px) and (min-width: 981px) {
  .svc-card { padding-left: 72px; }
  .svc-icon { left: 14px; width: 44px; height: 44px; }
  .hero .btn { padding: 12px 18px; }
}
@media (max-width: 980px) {
  .home .hero .wrap { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-visual { order: 0; }
  .hero h1 { font-size: 2.9rem; }
  .hero .lead { font-size: .9rem; }
  .services-grid { grid-template-columns: repeat(2,1fr); }
  .home .products-grid { grid-template-columns: repeat(3,1fr); gap: 12px; }
  .home .prod-card { padding-left: 16px; min-height: 305px; }
  .home .prod-top { align-items: flex-start; gap: 8px; }
  .home .prod-icon { width: 32px; height: 32px; }
  .home .prod-card p { width: 66%; }
  .home .prod-card .learn { left: 16px; font-size: .875rem; }
  .main-nav { gap: 18px; }
  .brand { font-size: 1.35rem; }
  .about-split .wrap { grid-template-columns: 1fr 1fr; gap: 28px; }
  .about-photo { aspect-ratio: 1.4; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .site-header .wrap { height: 70px; }
  .main-nav { top: 70px; margin: 0; }
  .main-nav a { font-size: 1rem; }
  .main-nav a.active::after { display: none; }
  .header-actions { margin-left: auto; }
  .home .hero .wrap { display: flex; flex-direction: column; gap: 0; padding-top: 36px; }
  .hero h1 { font-size: clamp(2.7rem,9vw,3.8rem); }
  .hero .lead { max-width: 52ch; margin: 18px 0 22px; }
  .hero .eyebrow { font-size: .75rem; letter-spacing: .12em; }
  .hero-btns { gap: 10px; }
  .hero .btn { font-size: .875rem; padding: 13px 18px; }
  .hero-visual { width: min(100%,480px); height: 350px; margin-top: 20px; }
  .visual-caption { font-size: 8px; bottom: 6px; }
  .services-grid { gap: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .svc-card { min-height: 224px; padding: 76px 14px 38px; }
  .svc-icon { top: 15px; left: 14px; width: 45px; height: 45px; }
  .svc-card h3 { font-size: .88rem; }
  .section-head { gap: 14px; }
  .home .products-grid,.products-grid { grid-template-columns: 1fr; }
  .home .prod-card { min-height: 250px; padding: 22px 20px 50px; }
  .home .prod-icon { width: 44px; height: 44px; }
  .home .prod-card p { width: 61%; font-size: .9375rem; }
  .home .prod-card .learn { left: 20px; font-size: .875rem; }
  .home .prod-shot { width: 30%; height: 205px; }
  .home .shot-pcap { height: 145px; }
  .focus-strip .wrap { grid-template-columns: 1fr 1fr; gap: 20px 0; }
  .focus-strip .wrap > div { padding: 0 12px; }
  .focus-strip .wrap > div:nth-child(2) { border-right: 0; }
  .focus-strip b { font-size: 1.3rem; }
  .focus-strip span { font-size: .7rem; }
  .about-split .wrap,.about-content { grid-template-columns: 1fr; gap: 26px; }
  .tech-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px 8px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 25px 18px; }
  .footer-brand,.footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-brand p { max-width: 40ch; }
  .footer-bottom { gap: 10px; }
  .form-card { padding: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition: none !important; }
}
.product-concept { background: #063a36; }
.pcap-concept { background: #07152e; }
.product-concept img { object-position: center; }
.product-concept small { bottom: 0; font-size: .7rem; }

/* Photographic artwork and restrained, accessible motion. */
.hero-visual.editorial-hero { display: grid; align-content: center; }
.hero-art-frame { position: relative; border-radius: 28px; overflow: hidden; transform: translate3d(var(--pointer-x,0px),var(--pointer-y,0px),0); transition: transform .55s cubic-bezier(.2,.65,.3,1); box-shadow: 0 24px 60px #254a8a16; }
.hero-visual .hero-product-art { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; box-shadow: none; }
.editorial-hero .visual-caption { position: static; background: none; text-align: right; font-size: .6rem; margin-top: 10px; padding-right: 5px; }
.art-glint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg,transparent 20%,#ffffff2b 44%,transparent 60%); transform: translateX(-110%); animation: art-glint 10s ease-in-out 2s infinite; }
@keyframes art-glint { 0%,60% { transform: translateX(-110%); } 85%,100% { transform: translateX(110%); } }
.home .hero { position: relative; }
.home .hero::before { content: ''; position: absolute; width: 360px; height: 360px; border-radius: 50%; top: -130px; right: -80px; background: radial-gradient(circle,#aa76ff1a,transparent 70%); animation: atmosphere 12s ease-in-out infinite alternate; pointer-events: none; }
@keyframes atmosphere { to { transform: translate(-50px,60px) scale(1.15); } }
.home .about-photo.editorial-photo,.about-photo.editorial-photo { display: block; position: relative; background: #dfeaf7; }
.about-photo.editorial-photo img { width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: transform .8s ease; }
.editorial-photo:hover img { transform: scale(1.035); }
.editorial-photo figcaption { position: absolute; left: 14px; bottom: 12px; color: #fff; padding: 5px 10px; border-radius: 6px; background: #041326bf; font-size: .6rem; backdrop-filter: blur(8px); }
.home .shot-agri img { object-position: 51% 50%; }
.prod-shot.product-concept.agri-photo { background: #123d29; }
.agri-photo img { object-position: center 55%; }
.home .shot-pcap { box-shadow: 0 8px 20px #101f4930; }
.prod-shot.shot-gold { box-shadow: 0 10px 22px #241d1729; }
.services-grid .svc-card { transition: transform .3s ease,box-shadow .3s ease,border-color .3s ease; }
.svc-card:hover { border-color: #acd8ff; box-shadow: 0 16px 35px #285aa614; transform: translateY(-5px); }
.svc-icon { background: linear-gradient(135deg,#0fcded,#087fff 50%,#952cf2); box-shadow: inset 0 1px 1px #ffffff80,0 8px 18px #2e88e82b; border: 1px solid #ffffff4d; }
.svc-icon svg { filter: drop-shadow(0 2px 2px #2039a635); }
.prod-card { transition: transform .3s ease,box-shadow .3s ease,border-color .3s ease; }
.prod-card:hover { border-color: #bfd8fc; box-shadow: 0 18px 36px #234b8a12; }
.btn-grad { position: relative; overflow: hidden; background-size: 180% 100%; background-position: 10% 50%; transition: background-position .4s,transform .25s,box-shadow .25s; }
.btn-grad:hover { background-position: 90% 50%; }
.main-nav a { transition: color .2s ease; }
.tech-row span { transition: transform .25s,color .25s; }
.tech-row span:hover { transform: translateY(-4px); color: var(--ink); }
.feature-card { box-shadow: 0 6px 22px #18376f06; border-top: 2px solid #d9dfff; }
.service-detail { position: relative; padding: 25px 26px 28px 98px; min-height: 185px; overflow: hidden; }
.service-detail p { font-size: .9375rem; line-height: 1.7; max-width: 55ch; }
.service-detail .svc-icon { top: 24px; left: 24px; }
.service-detail::after { content: ''; position: absolute; width: 120px; height: 120px; right: -60px; bottom: -70px; border: 18px solid #249bff0a; border-radius: 50%; }
.services-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.reveal-ready { opacity: 0; transform: translateY(20px); transition: opacity .65s ease var(--reveal-delay,0ms),transform .65s cubic-bezier(.2,.65,.3,1) var(--reveal-delay,0ms); }
.reveal-ready.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 720px) {
  .hero-visual.editorial-hero { height: auto; margin: 25px 0 16px; }
  .hero-art-frame { border-radius: 18px; }
  .services-detail-grid { grid-template-columns: 1fr; }
  .service-detail { padding: 84px 22px 25px; min-height: 0; }
  .service-detail .svc-icon { top: 22px; left: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .reveal-ready { opacity: 1; transform: none; }
  .hero-art-frame { transform: none; }
}
.value-icon { width: 43px; height: 43px; display: grid; place-items: center; color: #5e46d6; border: 1px solid #d8e4ff; border-radius: 12px; background: linear-gradient(135deg,#edfbff,#f0eaff); margin-bottom: 17px; }
.value-icon svg { width: 24px; height: 24px; }
.home .shot-pcap img,.pcap-concept img { object-fit: contain; background: #08172e; }
.home .shot-pcap { width: 37%; height: 125px; }
@media (max-width:720px) { .home .shot-pcap { width: 34%; height: 130px; } }
.svc-card.is-visible:hover,.prod-card.is-visible:hover { transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) {
  .svc-card:hover,.prod-card:hover,.btn:hover,.tech-row span:hover,.editorial-photo:hover img { transform: none; }
}
/* Product identity and captured UI, sourced from the local app projects. */
.prod-icon.pcap,.prod-icon.agri { background: #fff; box-shadow: 0 2px 8px #102a5c10; }
.prod-icon.pcap img,.prod-icon.agri img { width: 100%; height: 100%; object-fit: contain; }
.goldbuff-gallery { display: flex; justify-content: center; align-items: flex-start; gap: 12px; padding: 16px 15px 25px; background: linear-gradient(135deg,#fff8de,#fff3cf); }
.goldbuff-gallery img { height: calc(100% - 4px); width: auto; max-width: 43%; object-fit: contain; object-position: top; border: 3px solid #2c2c30; border-radius: 13px; box-shadow: 0 8px 14px #4c350d20; }
.goldbuff-gallery small { bottom: 0; padding: 5px; font-size: .6rem; background: #5a4a2aeb; }
.tech-symbol { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; border: 1px solid #dfeafa; background: linear-gradient(135deg,#f1fbff,#f3efff); color: #2e4d81; font: 700 .8rem var(--font); box-shadow: 0 3px 10px #32467c05; }
@media (min-width: 981px) { .home .prod-card { min-height: 260px; } }

/* Concise footer identity and company-first contact details. */
.site-footer .footer-contact address { line-height: 1.6; }

/* Contact details stay at their natural height beside the inquiry form. */
.contact-grid { align-items: start; }
.contact-details { position: relative; overflow: hidden; padding: 30px; border: 1px solid #e0eafa; border-radius: 20px; background: linear-gradient(145deg,#fff 40%,#f2f7ff); box-shadow: 0 10px 32px #24447c08; }
.contact-details::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); }
.contact-details-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 27px; }
.contact-details-heading img { flex-shrink: 0; object-fit: contain; }
.contact-details-heading h2 { font-size: 1.5rem; letter-spacing: -.025em; }
.contact-details-heading p { margin-top: 6px; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.contact-email-group { display: grid; gap: 12px; }
.contact-email-link { display: flex; align-items: center; gap: 12px; padding: 15px 13px; background: #fff; border: 1px solid #e3eafa; border-radius: 12px; transition: border-color .2s,box-shadow .2s; }
.contact-email-link:hover { border-color: #abbef6; box-shadow: 0 4px 14px #38579a0d; }
.contact-email-link > span:nth-child(2) { min-width: 0; }
.contact-detail-icon { display: grid; place-items: center; width: 35px; height: 35px; flex-shrink: 0; color: #5c55ce; background: #f0f1fe; border-radius: 10px; }
.contact-detail-icon svg { width: 19px; height: 19px; }
.contact-detail-label { display: block; color: var(--muted); font-size: .8125rem; margin-bottom: 4px; line-height: 1.4; }
.contact-detail-value { display: block; color: var(--ink); font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.contact-detail-arrow { margin-left: auto; color: #647bbc; font-size: 1rem; }
.contact-office { display: flex; align-items: start; gap: 12px; border-top: 1px solid #e0e8f6; margin-top: 25px; padding-top: 23px; }
.contact-office h3 { font-size: 1rem; margin: 0 0 9px; }
.contact-office-company { color: var(--ink-2); font-size: .875rem; line-height: 1.6; margin-bottom: 8px; }
.contact-office address { font-style: normal; color: var(--muted); font-size: .875rem; line-height: 1.7; }
@media (max-width:720px) {
  .contact-details { padding: 25px 20px; }
  .contact-details-heading { gap: 12px; }
  .contact-details-heading h2 { font-size: 1.35rem; }
  .contact-email-link { gap: 10px; padding: 14px 11px; }
  .contact-detail-value { font-size: .9375rem; }
}

/* Shared typography: readable copy, balanced headings, and quiet text effects. */
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; }
h2 { line-height: 1.2; }
h3, h4 { letter-spacing: -.015em; }
p { text-wrap: pretty; }
.hero .wrap > div, .prod-top > div, .footer-grid > div,
.contact-grid > *, .about-content > * { min-width: 0; }
.page-hero h1 { max-width: 23ch; margin-inline: auto; }
.page-hero .lead { max-width: 58ch; line-height: 1.75; }
.lead { line-height: 1.7; }
.eyebrow { color: #225bcc; font-size: .75rem; line-height: 1.6; letter-spacing: .14em; }
.main-nav a { font-size: .875rem; font-weight: 600; }
.btn { font-size: .9375rem; line-height: 1.4; text-align: center; justify-content: center; }
.btn-grad { background-image: var(--grad-text); }
.svc-card h3, .prod-card h3, .feature-card h3 { font-size: 1.0625rem; line-height: 1.35; }
.prod-tag { font-size: .8125rem; line-height: 1.5; }
.prod-card p, .feature-card p { font-size: .9375rem; line-height: 1.7; }
.content-block { max-width: 72ch; line-height: 1.8; }
.content-block h2 { font-size: clamp(1.3rem, 2.5vw, 1.65rem); margin-top: 2em; }
.content-block > h2:first-child { margin-top: 0; }
.content-block p, .content-block li { margin-bottom: 1em; }
.content-block a, .form-note a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.content-block a:hover, .form-note a:hover { text-decoration-thickness: 2px; }
.field input, .field textarea, .field select { font-size: 1rem; line-height: 1.6; }
.field select:focus-visible { outline: 3px solid #0876e2; outline-offset: 3px; }
.form-note { line-height: 1.7; }
.site-footer h4 { font-size: .9375rem; letter-spacing: .01em; }
.site-footer a { overflow-wrap: anywhere; }
.site-footer li a:hover, .site-footer li a:focus-visible,
.footer-bottom a:hover, .footer-bottom a:focus-visible {
  text-decoration: underline; text-underline-offset: .25em;
}
.link-more, .learn { text-underline-offset: .25em; }
.link-more:hover, .link-more:focus-visible, .learn:hover, .learn:focus-visible { text-decoration: underline; }
::selection { background: #dcd6ff; color: #0a1746; }

/* A solid text color remains available when text clipping is unsupported. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .grad-text {
    background-image: var(--grad-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .page-hero h1 { animation: heading-arrive .65s cubic-bezier(.2,.65,.3,1) both; }
}
@keyframes heading-arrive {
  from { opacity: .4; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 980px) and (min-width: 721px) {
  .home .products-grid { grid-template-columns: 1fr; }
  .home .prod-card { min-height: 235px; padding: 24px 24px 54px; }
  .home .prod-top { align-items: center; gap: 12px; }
  .home .prod-icon { width: 44px; height: 44px; }
  .home .prod-card p { width: 60%; }
  .home .prod-card .learn { left: 24px; }
  .home .prod-shot { width: 25%; }
}
@media (max-width: 720px) {
  .hero h1, .page-hero h1 { font-size: clamp(2.25rem, 8.5vw, 3.5rem); }
  .hero .eyebrow { font-size: .75rem; }
  .home .prod-card { min-height: 275px; }
  .home .prod-top { max-width: 70%; }
  .home .prod-shot { max-width: 28%; }
  .home .prod-card p { width: 65%; }
}
@media (forced-colors: active) {
  .grad-text { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .btn-grad { border: 1px solid ButtonText; }
}
@media print {
  .grad-text { background: none; color: #000; -webkit-text-fill-color: #000; }
  .hero h1, .page-hero h1 { animation: none; }
}

/* Shared footer — supplied dark, five-column reference. */
.site-footer {
  color: #afc2df;
  background: radial-gradient(ellipse at 9% 30%, #08213655, transparent 36%), #00131f;
  border: 1px solid #ffffff14;
  border-radius: 12px 12px 0 0;
}
.site-footer > .wrap { width: min(1640px, 92%); }
.site-footer .footer-grid {
  grid-template-columns: 1.15fr .8fr 1.25fr 1.5fr 1.15fr;
  gap: 0;
  padding: 30px 0 26px;
  align-items: stretch;
}
.site-footer .footer-grid > * { min-width: 0; grid-column: auto; }
.site-footer .footer-brand { position: relative; isolation: isolate; padding: 0 20px 16px 0; }
.site-footer .footer-logo { display: inline-flex; align-items: center; gap: 10px; }
.site-footer .footer-logo img { float: none; width: 52px; height: 52px; margin: 0; object-fit: contain; }
.site-footer .footer-logo b { margin: 0; padding: 0; color: #f6f8fc; font-size: clamp(1.1rem, 1.5vw, 1.4rem); white-space: nowrap; }
.site-footer .footer-tagline { position: relative; z-index: 1; clear: none; padding: 0; margin-top: 10px; max-width: none; color: #d9efff; font-size: clamp(1rem, 1.3vw, 1.3rem); line-height: 1.4; text-shadow: 0 0 14px #009fff80; }
.site-footer .footer-tagline span { color: #de8bff; }
.site-footer .footer-orbit { position: absolute; z-index: -1; pointer-events: none; width: min(100%, 290px); height: auto; left: -8px; top: 38px; filter: drop-shadow(0 0 5px #008dff); }
.site-footer .footer-column { border-left: 1px solid #ffffff12; padding: 0 clamp(14px, 1.8vw, 32px); }
.site-footer .footer-column:last-child { padding-right: 0; }
.site-footer h2 { color: #f2f5fb; font-size: .875rem; font-weight: 650; line-height: 1.4; letter-spacing: 0; margin: 0 0 12px; }
.site-footer li { margin: 0 0 5px; }
.site-footer li:last-child { margin-bottom: 0; }
.site-footer li a, .site-footer address, .site-footer .footer-cta p { color: #afc2df; font-size: .8125rem; font-style: normal; line-height: 1.55; }
.site-footer .footer-contact { display: grid; gap: 10px; }
.site-footer .footer-contact a { display: flex; align-items: flex-start; gap: 10px; line-height: 1.55; }
.site-footer .footer-contact svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.site-footer .footer-contact span { min-width: 0; }
.site-footer .footer-cta p { margin-bottom: 16px; }
.site-footer .footer-talk {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  padding: 11px 22px; border: 2px solid transparent; border-radius: 13px;
  background: linear-gradient(#00131f, #00131f) padding-box, linear-gradient(105deg, #00b7ff, #7251ff 55%, #d535ee) border-box;
  color: #f2f5fb; font-size: .875rem; font-weight: 650; line-height: 1.4;
}
.site-footer .footer-talk span { color: #d88bf2; font-size: 1.4rem; line-height: 1; }
.site-footer .footer-talk:hover { background: linear-gradient(#0b2437, #0b2437) padding-box, linear-gradient(105deg, #00b7ff, #7251ff 55%, #d535ee) border-box; }
.site-footer a:focus-visible { outline: 2px solid #73d8ff; outline-offset: 5px; border-radius: 4px; }
.site-footer .footer-bottom { display: flex; align-items: baseline; gap: 12px 22px; padding: 15px 0; color: #afc2df; font-size: .75rem; line-height: 1.65; border-top: 1px solid #ffffff14; }
.site-footer .footer-ownership { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer .footer-attribution { padding-left: 20px; border-left: 1px solid #70839e; }
.site-footer .footer-legal { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.site-footer .footer-legal a { white-space: nowrap; }
.site-footer .footer-contact a:hover, .site-footer .footer-legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
@media (max-width: 1050px) {
  .site-footer .footer-grid { grid-template-columns: 1fr .8fr 1.2fr; gap: 28px 0; }
  .site-footer .footer-connect { grid-column: 2; }
  .site-footer .footer-cta { grid-column: 3; }
  .site-footer .footer-attribution { padding-left: 0; border-left: 0; }
}
@media (max-width: 720px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; padding: 30px 0; gap: 28px 20px; }
  .site-footer .footer-brand { grid-column: 1 / -1; padding: 0 0 22px; }
  .site-footer .footer-column { grid-column: auto; border-left: 0; padding: 0; }
  .site-footer .footer-connect, .site-footer .footer-cta { grid-column: 1 / -1; border-top: 1px solid #ffffff12; padding-top: 24px; }
  .site-footer .footer-logo b { font-size: 1.25rem; }
  .site-footer .footer-tagline { font-size: 1.125rem; }
  .site-footer .footer-bottom, .site-footer .footer-ownership { flex-direction: column; gap: 10px; }
  .site-footer .footer-bottom { align-items: flex-start; }
}
@media (forced-colors: active) {
  .site-footer .footer-talk { background: none; border-color: ButtonText; }
  .site-footer .footer-orbit { display: none; }
}

.brand { flex-shrink: 0; white-space: nowrap; }

/* Language choices remain available on desktop and inside compact headers. */
.language-switch { display: flex; align-items: center; gap: 3px; flex-shrink: 0; padding: 3px; border: 1px solid var(--line); border-radius: 9px; }
.language-switch a { padding: 6px 7px; border-radius: 6px; font-size: .78rem; font-weight: 600; white-space: nowrap; color: var(--ink-2); }
.language-switch a[aria-current="true"] { background: var(--ink); color: #fff; }
.language-switch a:hover { text-decoration: underline; }
html[lang="vi"] .hero h1 { font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1.2; }
html[lang="vi"] .footer-talk { white-space: normal; }
@media (min-width: 721px) and (max-width: 1200px) {
  .header-cta { display: none; }
  .site-header .wrap { gap: 16px; }
  .main-nav { gap: 16px; }
}
@media (max-width: 720px) {
  .site-header .wrap { gap: 10px; }
  .header-actions { gap: 8px; }
  .language-switch a { padding: 7px 5px; font-size: .75rem; }
}