/* Afforet Softwares - company site (2026-10). Builds on the brand stylesheet of
   www.afforet.in/hosting (hosting/css/site.css): same colours, type and components;
   this file adds only what the company page needs. */

/* header: the Afforet Softwares logo (circuit cloud + name) */
.brand { display: flex; align-items: center; }
.brand img { height: 64px; width: auto; }

/* hero: a code window instead of a picture */
.code-card {
  position: relative; width: min(470px, 100%); justify-self: center; border-radius: 20px; overflow: hidden;
  background: #1f1d1c; box-shadow: 0 30px 80px rgba(238, 105, 28, .22), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  transform: rotate(-1.5deg);
}
.code-card .bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: #2b2826; color: #a29b95; font: 500 13px var(--body); }
.code-card .bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f56; }
.code-card .bar i:nth-child(2) { background: #ffbd2e; }
.code-card .bar i:nth-child(3) { background: #27c93f; margin-right: 10px; }
.code-card pre { margin: 0; padding: 22px 24px 26px; font: 15px/1.9 "SFMono-Regular", Consolas, "Liberation Mono", monospace; color: #e7e2dd; white-space: pre-wrap; }
.code-card .k { color: #ff9a5c; } .code-card .s { color: #a5d6a7; } .code-card .f { color: #7cc4ff; } .code-card .c { color: #8d8781; }
.code-card .ok { color: #27c93f; font-weight: 700; }
.code-card .cursor { display: inline-block; width: 9px; height: 18px; background: var(--orange); vertical-align: -3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* services: 12 cards, a little tighter than the hosting cards */
.services .card { padding: 24px; }
.services .card h3 { font-size: 18px; }
.services .card a { display: inline-block; margin-top: 10px; font: 600 14px var(--head); }

/* why us / process: four columns */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.steps { counter-reset: step; }
.step { position: relative; padding-top: 34px; }
.step::before {
  counter-increment: step; content: "0" counter(step); position: absolute; top: -18px; left: 24px;
  font: 700 15px var(--head); color: #fff; background: var(--orange); padding: 7px 12px; border-radius: 12px; box-shadow: 0 8px 18px rgba(238, 105, 28, .3);
}

/* our work */
.work { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.work .card { display: flex; flex-direction: column; }
.work .tag { align-self: flex-start; font: 600 12px var(--head); letter-spacing: .04em; text-transform: uppercase; color: var(--orange-dark);
  background: var(--orange-soft); border: 1px solid var(--orange-line); padding: 3px 10px; border-radius: 999px; margin-bottom: 14px; }
.work .card a { margin-top: auto; padding-top: 14px; font: 600 14px var(--head); }
.count { text-align: center; margin-top: 34px; color: var(--muted); }
.count b { font: 700 34px var(--head); color: var(--ink); margin-right: 8px; }

/* the hosting band */
.band { position: relative; overflow: hidden; border-radius: 24px; padding: 40px 44px; color: #fff;
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
  background: linear-gradient(135deg, var(--ink) 0%, #43403d 100%); }
.band::before { content: ""; position: absolute; inset: 0; background: var(--circuit); opacity: .22; }
.band > * { position: relative; }
.band h2 { color: #fff; font-size: clamp(24px, 3vw, 32px); margin-bottom: 8px; }
.band p { color: #e7e2dd; margin: 0; }
.band p b { color: #fff; }
.band .cta { justify-content: flex-end; }
.band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.band .btn-ghost:hover { border-color: #fff; color: #fff; }

/* about: mission and vision in the dark panel */
.panel h4 { color: #fff; font-size: 17px; margin: 0 0 6px; }
.panel .mv + .mv { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); }

/* contact + footer extras */
.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.socials a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  font: 600 14px var(--head); color: var(--ink-2); }
.socials a:hover { text-decoration: none; border-color: var(--orange-line); color: var(--orange-dark); }
.socials svg { width: 18px; height: 18px; }
.site-footer .wrap.cols-4 { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.site-footer .brand { margin-bottom: 14px; }
.site-footer .brand img { height: 76px; width: auto; margin: 0; }

@media (max-width: 980px) {
  .grid-4, .work { grid-template-columns: repeat(2, 1fr); }
  .band { grid-template-columns: 1fr; }
  .band .cta { justify-content: flex-start; }
  .site-footer .wrap.cols-4 { grid-template-columns: 1fr 1fr; }
  .code-card { order: -1; transform: none; }
}
@media (max-width: 760px) {
  .grid-4, .work { grid-template-columns: 1fr; }
  .steps { row-gap: 34px; }
  .band { padding: 30px 24px; }
  .brand img { height: 52px; }
  .code-card pre { font-size: 13px; }
  .site-footer .wrap.cols-4 { grid-template-columns: 1fr; }
}