/* Fan30Tech homepage sectional color system | sit v65 */
:root {
  --home-gold: #d8ad55;
  --home-gold-light: #f0ce7a;
  --home-navy: #07121f;
  --home-plum: #24182e;
  --home-petrol: #08232a;
  --home-indigo: #14182b;
  --home-teal: #08211d;
  --home-wine: #28151a;
}

body {
  background: #050607;
}

.site-glow--one {
  background: rgba(39, 116, 139, 0.35);
}

.site-glow--two {
  background: rgba(119, 64, 125, 0.28);
}

.global-header {
  background: rgba(5, 7, 10, 0.88);
}

/* Hero: midnight navy, icy blue and gold */
.hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 22%, rgba(47, 131, 159, 0.22), transparent 34%),
    radial-gradient(circle at 18% 75%, rgba(216, 173, 85, 0.13), transparent 30%),
    linear-gradient(135deg, #05080d 0%, var(--home-navy) 52%, #081722 100%);
}

.hero::after {
  position: absolute;
  inset: auto 0 0;
  height: 180px;
  background: linear-gradient(180deg, transparent, rgba(24, 18, 33, 0.58));
  content: "";
  pointer-events: none;
}

.hero h1 span {
  background: linear-gradient(90deg, #fff5dc 0%, var(--home-gold-light) 38%, #7ed7e6 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero .btn-primary,
.contact-section .btn-primary {
  color: #161008;
  background: linear-gradient(135deg, #f2d482, #d8ad55 48%, #b27a36);
  box-shadow: 0 16px 38px rgba(216, 173, 85, 0.22);
}

.hero .btn-primary:hover,
.contact-section .btn-primary:hover {
  box-shadow: 0 20px 50px rgba(216, 173, 85, 0.34);
}

.dashboard-card {
  border-color: rgba(112, 197, 214, 0.22);
  background: linear-gradient(145deg, rgba(10, 28, 42, 0.98), rgba(7, 14, 26, 0.98));
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.5), 0 0 80px rgba(50, 153, 178, 0.14);
}

.dashboard-sidebar span.active {
  background: linear-gradient(135deg, var(--home-gold-light), #69cbdc);
}

.mock-panel--large {
  background: linear-gradient(180deg, rgba(43, 139, 159, 0.14), transparent), rgba(255, 255, 255, 0.035);
}

.mock-chart-line.second {
  border-color: #6dd0df;
}

.floating-chip {
  border-color: rgba(111, 200, 214, 0.24);
  background: rgba(7, 24, 35, 0.9);
}

.trusted-strip {
  border-color: rgba(154, 104, 164, 0.2);
  background: linear-gradient(90deg, rgba(16, 20, 34, 0.92), rgba(35, 22, 43, 0.88));
}

.trusted-inner span::before {
  background: #b982bd;
}

/* Services: subdued plum with card-specific accents */
.services-section {
  background:
    radial-gradient(circle at 12% 28%, rgba(120, 70, 130, 0.18), transparent 30%),
    linear-gradient(180deg, #0a0910 0%, var(--home-plum) 50%, #0b0c12 100%);
}

.services-section .section-kicker {
  color: #d5a5d7;
}

.service-card {
  --service-accent: 216, 173, 85;
  border-color: rgba(var(--service-accent), 0.18);
  background: linear-gradient(180deg, rgba(var(--service-accent), 0.07), rgba(8, 8, 12, 0.72));
}

.service-card:nth-child(2) { --service-accent: 75, 171, 166; }
.service-card:nth-child(3) { --service-accent: 143, 103, 176; }
.service-card:nth-child(4) { --service-accent: 194, 117, 75; }

.service-card::before {
  background: rgba(var(--service-accent), 0.2);
}

.service-card:hover {
  border-color: rgba(var(--service-accent), 0.48);
  background: linear-gradient(180deg, rgba(var(--service-accent), 0.14), rgba(8, 8, 12, 0.78));
}

.service-card .service-icon {
  border-color: rgba(var(--service-accent), 0.24);
  background: linear-gradient(145deg, rgba(var(--service-accent), 0.34), rgba(8, 18, 28, 0.42));
}

.service-card a {
  color: rgb(var(--service-accent));
}

/* Portfolio: deep petrol/blue */
.portfolio-section {
  background:
    radial-gradient(circle at 85% 28%, rgba(42, 142, 143, 0.18), transparent 34%),
    linear-gradient(180deg, #071014 0%, var(--home-petrol) 52%, #071116 100%);
}

.portfolio-section .section-kicker {
  color: #77cbc6;
}

.project-card {
  border-color: rgba(92, 190, 184, 0.2);
  background: rgba(5, 18, 22, 0.78);
}

.project-card:hover {
  border-color: rgba(104, 210, 201, 0.46);
}

.project-visual--store {
  background: linear-gradient(145deg, #0c2730, #0c1d2c 55%, #102039);
}

.project-window {
  border-color: rgba(110, 211, 199, 0.24);
  background: #071218;
}

.store-banner {
  background: linear-gradient(120deg, #c59450, #4c9c9a 52%, #607fb1);
}

.store-products span {
  background: linear-gradient(135deg, rgba(90, 188, 181, 0.2), rgba(216, 173, 85, 0.1));
}

.tech-tags span {
  border-color: rgba(94, 190, 183, 0.22);
  color: #a8dfdb;
}

/* Process: calm indigo */
.process-section {
  background:
    radial-gradient(circle at 18% 50%, rgba(81, 94, 163, 0.16), transparent 32%),
    linear-gradient(180deg, #090b13 0%, var(--home-indigo) 55%, #090c12 100%);
}

.process-section .section-kicker {
  color: #9aa8ea;
}

.process-item {
  border-color: rgba(112, 125, 196, 0.2);
  background: linear-gradient(135deg, rgba(60, 70, 125, 0.1), rgba(8, 10, 18, 0.75));
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.process-item:hover {
  border-color: rgba(132, 147, 224, 0.45);
  background: linear-gradient(135deg, rgba(74, 86, 151, 0.16), rgba(8, 10, 18, 0.8));
  transform: translateX(-7px);
}

.process-item > span {
  color: #c1c9ff;
  background: rgba(88, 104, 184, 0.18);
}

/* About: deep forest/teal */
.about-section {
  background:
    radial-gradient(circle at 82% 34%, rgba(44, 136, 108, 0.17), transparent 34%),
    linear-gradient(180deg, #07100e 0%, var(--home-teal) 52%, #07100f 100%);
}

.about-section .section-kicker {
  color: #82cdb4;
}

.team-card--main {
  border-color: rgba(86, 183, 147, 0.23);
  background: linear-gradient(145deg, rgba(42, 124, 98, 0.22), rgba(8, 27, 25, 0.92));
}

.team-label {
  color: #87cfb8;
}

.team-card--small {
  border-color: rgba(87, 182, 148, 0.2);
  background: rgba(7, 27, 25, 0.9);
}

.about-points div {
  border-color: rgba(86, 180, 147, 0.2);
  background: rgba(14, 48, 41, 0.28);
}

/* Contact: warm wine/umber */
.contact-section {
  background:
    radial-gradient(circle at 18% 26%, rgba(149, 72, 88, 0.18), transparent 31%),
    linear-gradient(180deg, #10090c 0%, var(--home-wine) 52%, #0b090b 100%);
}

.contact-card {
  border-color: rgba(196, 119, 105, 0.2);
  background:
    linear-gradient(135deg, rgba(116, 49, 65, 0.19), rgba(24, 18, 25, 0.72) 46%, rgba(170, 112, 61, 0.12)),
    rgba(8, 8, 11, 0.7);
}

.contact-section .section-kicker {
  color: #dfa18f;
}

.contact-methods a {
  color: #f0bd9f;
}

.form-row input,
.form-row select,
.form-row textarea {
  border-color: rgba(210, 136, 112, 0.18);
  background: rgba(14, 10, 16, 0.72);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: rgba(232, 167, 131, 0.62);
  background: rgba(18, 11, 17, 0.9);
  box-shadow: 0 0 0 4px rgba(196, 106, 84, 0.1);
}

.site-footer {
  background: linear-gradient(180deg, #09090b, #050506);
}

@media (prefers-reduced-motion: reduce) {
  .process-item:hover { transform: none; }
}