/* Packshine ICT — site styles.
   Palette comes from the Packshine ICT logo (indigo, orange) and the hero photo (lavender);
   each service has its own colour, used the same way in the network
   drawing, the service columns and the work list. */
:root {
  --night: #161b45;     /* dark sections */
  --ink: #14213d;       /* body text */
  --mist: #eef2f7;      /* page background */
  --line: #c9d3e1;      /* rules */
  --software: #2d368e;  /* software (logo indigo) */
  --data: #f27826;      /* data analysis (logo orange) */
  --lavender: #dfdfef;  /* hero photo background */
  --network: #13a38a;   /* networking & ICT */
  --white: #ffffff;
  --muted: #55627a;

  --display: "Archivo", "Inter", system-ui, sans-serif;
  --body: "Public Sans", "Inter", system-ui, sans-serif;

  --measure: 66ch;
  --gutter: clamp(16px, 4vw, 48px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font: 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--software); text-underline-offset: 3px; }

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

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- header ---------- */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; min-height: 76px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand { display: block; }
.brand img { width: 170px; height: auto; }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.site-nav a { color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 6px; font-size: 15px; }
.site-nav a:hover { background: var(--mist); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--data); border-radius: 0; }
.site-nav a.cta { background: var(--data); color: var(--white); font-weight: 600; }
.site-nav a.cta:hover { background: #d9661a; }

/* ---------- hero: the photo on the left, the girl's smoke drifting toward the text ---------- */
.hero { position: relative; background: var(--lavender); color: var(--night); overflow: hidden; min-height: clamp(460px, 44vw, 640px); display: flex; align-items: center; }
.hero-photo { position: absolute; left: 0; top: 0; height: 100%; width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 88%); mask-image: linear-gradient(90deg, #000 55%, transparent 88%); }
.hero .wrap { position: relative; width: 100%; display: flex; justify-content: flex-end; }
.hero-text { width: min(500px, 46%); padding: 48px 0; }
.motto { font: 800 clamp(40px, 5.4vw, 76px)/0.95 var(--display); font-stretch: 125%; letter-spacing: -0.03em; margin: 0 0 22px; color: var(--software); }
.motto .line2 { display: block; color: var(--night); font-weight: 600; font-stretch: 100%; letter-spacing: -0.01em; font-size: 0.5em; margin-top: 12px; }
.checks { list-style: none; margin: 0 0 20px; padding: 0; }
.checks li { position: relative; padding: 4px 0 4px 34px; font-size: clamp(18px, 1.8vw, 21px); font-weight: 600; }
.checks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 20px; height: 20px; border: 2px solid #9a9ab0; border-radius: 3px; background: var(--white); }
.checks li::after { content: ""; position: absolute; left: 7px; top: 6px; width: 7px; height: 15px; border: solid var(--c); border-width: 0 4px 4px 0; transform: rotate(40deg); }
.checks .software { --c: var(--software); }
.checks .data { --c: var(--data); }
.checks .network { --c: var(--network); }
.hero p.lede { font-size: clamp(17px, 1.7vw, 19px); color: #3a3f5c; max-width: 40ch; margin: 0 0 28px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { display: inline-block; padding: 14px 22px; border-radius: 8px; font-weight: 600; text-decoration: none; font-size: 16px; }
.button.primary { background: var(--data); color: var(--white); }
.button.primary:hover { background: #d9661a; }
.button.ghost { color: var(--white); box-shadow: inset 0 0 0 2px #3a4f73; }
.button.ghost:hover { box-shadow: inset 0 0 0 2px #9fb0cc; }
.hero .button.ghost, .button.ghost.dark { color: var(--software); box-shadow: inset 0 0 0 2px var(--software); }
.hero .button.ghost:hover, .button.ghost.dark:hover { background: var(--white); }

/* ---------- sections ---------- */
section { padding: clamp(56px, 8vw, 104px) 0; }
h2 { font: 800 clamp(30px, 4vw, 44px)/1.1 var(--display); font-stretch: 112%; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--night); }
.section-intro { max-width: var(--measure); color: var(--muted); margin: 0 0 40px; font-size: 18px; }

/* services: three columns, each topped with its service colour */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.service { border-top: 6px solid var(--c); padding-top: 22px; }
.service h3 { font: 800 22px/1.2 var(--display); font-stretch: 108%; margin: 0 0 10px; color: var(--night); }
.service p { margin: 0 0 14px; }
.service ul { margin: 0; padding: 0; list-style: none; }
.service li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.service li:last-child { border-bottom: 0; }
.service.software { --c: var(--software); }
.service.data { --c: var(--data); }
.service.network { --c: var(--network); }

/* work */
.work { background: var(--white); }
.case { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: 32px 0; border-top: 1px solid var(--line); }
.case:first-of-type { border-top: 0; padding-top: 0; }
.case .shot { border-radius: 10px; overflow: hidden; background: var(--night); }
.case h3 { font: 800 28px/1.15 var(--display); font-stretch: 108%; margin: 0 0 8px; color: var(--night); }
.case .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.case .tags li { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--mist); color: var(--ink); }
.case .tags li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: var(--c, var(--muted)); vertical-align: 1px; }
.case .tags li.software { --c: var(--software); }
.case .tags li.data { --c: var(--data); }
.case .tags li.network { --c: var(--network); }
.case p { margin: 0 0 16px; max-width: 52ch; }
.more-work { margin-top: 32px; color: var(--muted); }

.also { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.also h3, .experience h3 { font: 800 22px/1.2 var(--display); font-stretch: 108%; margin: 0 0 12px; color: var(--night); }
.also ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 40px; }
.also li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.also b { color: var(--night); }

/* experience: newest first, dates in a narrow column */
.about .wrap.experience { display: block; margin-top: 56px; }
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); max-width: 900px; }
.timeline li span { color: var(--muted); grid-row: span 2; }
.timeline li b { display: block; color: var(--night); }

/* how I work: a real sequence, so it is numbered */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); padding: 0; margin: 0; list-style: none; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: block; font: 800 56px/1 var(--display); font-stretch: 125%; color: var(--line); margin-bottom: 8px; }
.steps h3 { font: 800 20px/1.25 var(--display); margin: 0 0 8px; color: var(--night); }
.steps p { margin: 0; }

/* about */
.about .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.about p { max-width: var(--measure); }
.facts { margin: 0; padding: 0; list-style: none; }
.facts li { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 9em 1fr; gap: 12px; }
.facts b { color: var(--night); }

/* contact */
.contact { background: var(--night); color: var(--white); }
.contact h2 { color: var(--white); }
.contact .section-intro { color: #c3cee0; }
.contact .wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); }
.reach { list-style: none; margin: 0; padding: 0; }
.reach li { padding: 14px 0; border-bottom: 1px solid #263a5c; }
.reach span { display: block; color: #9fb0cc; font-size: 14px; }
.reach a { color: var(--white); font-size: 20px; font-weight: 600; text-decoration: none; }
.reach a:hover { text-decoration: underline; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: 15px; color: #c3cee0; }
input, textarea, select { font: inherit; color: var(--ink); background: var(--white); border: 0; border-radius: 8px; padding: 12px 14px; }
textarea { min-height: 140px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-note { font-size: 14px; color: #9fb0cc; margin: 0; }
.form-status { min-height: 1.5em; margin: 0; font-weight: 600; }
.form-status.ok { color: #6ee7c8; }
.form-status.error { color: #fca5a5; }
button.button { border: 0; cursor: pointer; justify-self: start; font: inherit; font-weight: 600; }

/* footer */
.site-footer { background: #0a1527; color: #8fa0bd; padding: 28px 0; font-size: 14px; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer a { color: #c3cee0; }

/* case study pages */
.case-hero { background: var(--night); color: var(--white); padding: clamp(40px, 6vw, 80px) 0; }
.case-hero h1 { font: 800 clamp(36px, 5.5vw, 64px)/1.02 var(--display); font-stretch: 118%; letter-spacing: -0.02em; margin: 0 0 16px; }
.case-hero p { color: #d6deeb; font-size: 20px; max-width: 46ch; margin: 0; }
.back { color: #9fb0cc; text-decoration: none; display: inline-block; margin-bottom: 20px; }
.back:hover { color: var(--white); }
.article > * { max-width: 820px; }
.article h2 { font-size: 28px; margin-top: 48px; }
.article figure { margin: 32px 0; }
.article figcaption { color: var(--muted); font-size: 15px; margin-top: 8px; }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 0 24px; }
.summary div span { display: block; color: var(--muted); font-size: 14px; }
.summary div b { color: var(--night); }

/* ---------- product page (pos.html) ---------- */
.product-hero { background: var(--night); color: var(--white); padding: clamp(40px, 6vw, 88px) 0; overflow: hidden; }
.product-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.product-hero h1 { font: 800 clamp(44px, 6.4vw, 80px)/0.98 var(--display); font-stretch: 125%; letter-spacing: -0.03em; margin: 16px 0 20px; }
.product-hero .lede { font-size: clamp(18px, 2vw, 21px); color: #d6deeb; max-width: 38ch; margin: 0 0 28px; }
.product-icon { border-radius: 14px; }
.product-shot { border-radius: 10px; }
.hero-note { color: #9fb0cc; margin: 18px 0 0; font-size: 15px; }

.feature-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.feature-groups h3, .type h3, .plan h3 { font: 800 22px/1.2 var(--display); font-stretch: 108%; margin: 0 0 10px; color: var(--night); }
.feature-groups ul { margin: 0; padding: 0; list-style: none; }
.feature-groups li { padding: 8px 0; border-bottom: 1px solid var(--line); }

.types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.type p { margin: 0 0 10px; }
.type .soon { color: var(--muted); font-size: 15px; }

.zra { background: #fff7ed; border-top: 6px solid var(--data); }
.zra .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); }
.zra p { max-width: var(--measure); margin: 0 0 14px; }
.status-tag { display: inline-block; background: var(--data); color: var(--night); font-weight: 600; padding: 4px 12px; border-radius: 999px; font-size: 15px; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); }
.plan { background: var(--white); border-radius: 10px; padding: 26px; border: 1px solid var(--line); display: flex; flex-direction: column; }
.plan-for { color: var(--muted); margin: 0 0 18px; min-height: 3.2em; }
.prices { margin: 0 0 18px; }
.prices div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.prices dt { color: var(--muted); }
.prices dd { margin: 0; }
.plan-price { font: 800 24px/1 var(--display); color: var(--night); }
.limits { list-style: none; margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.limits li { padding: 3px 0; font-weight: 600; }
.plan-notes { margin-top: 36px; max-width: var(--measure); }
.plan-notes p { margin: 0 0 12px; }

.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--night); font-size: 18px; }
.faq details p { margin: 10px 0 0; }

/* home page product strip */
.product-strip { background: var(--night); color: var(--white); }
.product-strip .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.product-strip h2 { color: var(--white); margin: 0 0 6px; }
.product-strip p { margin: 0; color: #d6deeb; max-width: 60ch; }
.product-strip img { border-radius: 14px; }

@media (max-width: 880px) {
  .product-hero .wrap, .zra .wrap { grid-template-columns: 1fr; }
  .feature-groups, .types, .plans { grid-template-columns: 1fr; }
  .product-strip .wrap { grid-template-columns: 1fr; }
  .plan-for { min-height: 0; }
}

/* ---------- team ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.person-card { display: grid; gap: 4px; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); }
.person-card:hover { border-color: var(--software); }
.person-card .avatar { margin-bottom: 12px; }
.person-name { font: 800 22px/1.2 var(--display); font-stretch: 108%; color: var(--night); }
.person-role { font-weight: 600; }
.person-skills { color: var(--muted); font-size: 15px; }
.avatar { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--software); color: var(--white); font: 800 24px var(--display); object-fit: cover; }
.avatar.large { width: 120px; height: 120px; font-size: 40px; flex: none; border: 4px solid var(--white); }
.join { margin-top: 56px; max-width: var(--measure); }

.profile-head { display: flex; align-items: center; gap: 28px; }
.profile-head h1 { margin-bottom: 8px; }
.profile { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); }
.profile h2 { font-size: 28px; margin: 40px 0 14px; }
.profile-main > h2:first-child, .profile-side > h2:first-child { margin-top: 0; }
.profile-main p { max-width: var(--measure); }
.work-list { margin: 0; padding: 0; list-style: none; }
.work-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.work-list b { color: var(--night); }
.profile-side h2 { font-size: 22px; margin-top: 32px; }
.skills { margin: 0; }
.skills div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.skills dt { font-weight: 600; color: var(--night); }
.skills dd { margin: 0; color: var(--muted); }
.plain { margin: 0; padding: 0; list-style: none; }
.plain li { padding: 6px 0; }

/* ---------- small screens ---------- */
@media (max-width: 880px) {
  .case, .about .wrap, .contact .wrap, .profile { grid-template-columns: 1fr; }
  .hero { display: block; min-height: 0; }
  .hero-photo { position: static; width: 100%; height: 300px; object-fit: cover; object-position: 20% center;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .hero .wrap { display: block; }
  .hero-text { width: auto; padding: 8px 0 48px; }
  .services, .steps, .also ul { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .site-header { position: static; }
  .brand img { width: 130px; }
  .site-nav a { font-size: 14px; }
  .form-row { grid-template-columns: 1fr; }
  .facts li, .timeline li { grid-template-columns: 1fr; gap: 2px; }
  .timeline li span { grid-row: auto; }
  .site-nav a:not(.cta) { padding: 8px 8px; }
}