/* Twinncome 8 Services Menu — v23
   Images are scaled INSIDE each card frame (no cropping) and service details are shown below. */

#systems.tc-section{
  position:relative;
  max-width:1440px;
  margin:28px auto 0;
  padding:22px;
  border:3px solid #ff7a00;
  border-radius:26px;
  background:
    radial-gradient(circle at 12% 6%,rgba(255,235,204,.85),transparent 24%),
    radial-gradient(circle at 90% 92%,rgba(212,247,226,.90),transparent 25%),
    linear-gradient(180deg,#fffdf9 0%,#f8fffb 100%);
  box-shadow:0 18px 44px rgba(9,73,104,.12), inset 0 0 0 1px rgba(255,255,255,.90);
  overflow:hidden;
}

#systems.tc-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 7% 88%,rgba(32,153,82,.08),transparent 20%),
    radial-gradient(circle at 96% 14%,rgba(24,116,214,.08),transparent 22%);
}

#systems .tc-heading,
#systems .tc-system-grid{position:relative;z-index:1}

#systems .tc-heading{margin-bottom:18px;align-items:center}
#systems .tc-heading h2{font-size:clamp(28px,2.3vw,36px);font-weight:950;color:#0a3f79;letter-spacing:-.35px}
#systems .tc-heading p{color:#58758b;font-size:14px}
#systems .tc-heading-link{
  background:linear-gradient(135deg,#0877df,#0b60bf);
  box-shadow:0 8px 20px rgba(8,95,184,.18);
  padding:10px 18px;
}

#systems .tc-system-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

#systems .tc-system-card{
  --accent:#1385df;
  --accent-soft:#edf7ff;
  position:relative;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:13px 13px 45px;
  border:1px solid rgba(78,135,169,.20);
  border-radius:22px;
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 30px rgba(10,72,104,.10);
  overflow:hidden;
  transform:translateZ(0);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  text-decoration:none;
  color:inherit;
}

#systems .tc-system-card::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:5px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,white));
  opacity:.95;
  z-index:2;
}

#systems .tc-system-card::after{
  content:"";
  position:absolute;
  inset:-30% -40%;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 40%,rgba(255,255,255,.34) 48%,transparent 56%);
  transform:translateX(-35%) rotate(2deg);
  transition:transform .55s ease;
  z-index:3;
}

#systems .tc-system-card:hover{
  transform:translateY(-6px) scale(1.008);
  box-shadow:0 22px 42px rgba(7,79,122,.16);
  border-color:color-mix(in srgb,var(--accent) 42%,#cfe3ef);
}
#systems .tc-system-card:hover::after{transform:translateX(35%) rotate(2deg)}

#systems .tc-system-card-head{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:11px;
  align-items:center;
  min-height:76px;
}

#systems .tc-system-icon{
  width:58px;height:58px;
  margin:0;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:30px;
  font-weight:950;
  border:1px solid color-mix(in srgb,var(--accent) 18%,white);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
}

#systems .tc-system-copy{min-width:0}
#systems .tc-system-card h3{
  margin:0;
  font-size:clamp(15px,1.35vw,18px);
  line-height:1.12;
  color:#0a477e;
  font-weight:950;
  letter-spacing:.1px;
}
#systems .tc-system-card p{
  min-height:auto;
  margin:5px 0 0;
  font-size:12.3px;
  line-height:1.28;
  color:#60778b;
  font-weight:700;
}

/* The original artwork is 800×480 (5:3). Keep the whole artwork visible inside the frame. */
#systems .tc-system-image{
  position:relative;
  width:100%;
  aspect-ratio:5 / 3;
  height:auto;
  margin:11px 0 0;
  overflow:hidden;
  border-radius:15px;
  background:linear-gradient(180deg,#f7fbfd 0%,#eef7fb 100%);
  border:1px solid rgba(60,125,164,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  z-index:1;
}
#systems .tc-system-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transition:transform .5s ease,filter .5s ease;
}
#systems .tc-system-card:hover .tc-system-image img{
  transform:scale(1.018);
  filter:saturate(1.04) contrast(1.02);
}

#systems .tc-system-details{
  display:grid;
  gap:4px;
  margin:9px 0 0;
  padding:0 2px;
  list-style:none;
  position:relative;
  z-index:2;
}
#systems .tc-system-details li{
  position:relative;
  padding-left:17px;
  color:#526d80;
  font-size:11.2px;
  line-height:1.3;
  font-weight:700;
}
#systems .tc-system-details li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:.02em;
  color:var(--accent);
  font-weight:950;
}

#systems .tc-card-arrow{
  position:absolute;
  right:12px;
  bottom:11px;
  width:34px;height:34px;
  border-radius:50%;
  display:grid;place-items:center;
  background:#fff;
  color:var(--accent);
  border:2px solid color-mix(in srgb,var(--accent) 70%,white);
  box-shadow:0 8px 18px rgba(8,74,110,.18);
  font-size:19px;
  font-weight:950;
  z-index:4;
}

/* Service-specific accents */
#systems .tc-system-card--meegin{--accent:#16854a;--accent-soft:#eaf8ef}
#systems .tc-system-card--winner-solar{--accent:#ee8f12;--accent-soft:#fff5e4}
#systems .tc-system-card--kati-robot{--accent:#0b78d0;--accent-soft:#eaf5ff}
#systems .tc-system-card--agri-marketplace{--accent:#e3484b;--accent-soft:#fff0f0}
#systems .tc-system-card--agri-service{--accent:#6b2bd8;--accent-soft:#f3edff}
#systems .tc-system-card--ai-assistant{--accent:#c52992;--accent-soft:#fff0fa}
#systems .tc-system-card--social-network{--accent:#0d78d7;--accent-soft:#eaf5ff}
#systems .tc-system-card--membership-trust{--accent:#198a4c;--accent-soft:#ecf9f0}

@media (max-width:1020px){
  #systems.tc-section{margin-inline:16px;padding:18px}
  #systems .tc-system-grid{gap:12px}
  #systems .tc-system-card{padding-inline:11px}
  #systems .tc-system-card-head{grid-template-columns:50px minmax(0,1fr);gap:9px;min-height:68px}
  #systems .tc-system-icon{width:50px;height:50px;border-radius:15px;font-size:26px}
  #systems .tc-system-card h3{font-size:15px}
  #systems .tc-system-card p{font-size:11.5px}
  #systems .tc-system-details li{font-size:10.5px}
}

@media (max-width:820px){
  #systems .tc-system-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  #systems .tc-system-card{border-radius:18px;padding:11px 10px 42px}
  #systems .tc-system-card-head{grid-template-columns:46px minmax(0,1fr);gap:8px;min-height:62px}
  #systems .tc-system-icon{width:46px;height:46px;border-radius:14px;font-size:23px}
  #systems .tc-system-card h3{font-size:14px}
  #systems .tc-system-card p{font-size:10.7px}
  #systems .tc-system-image{margin-top:9px;border-radius:13px}
  #systems .tc-system-details{margin-top:8px;gap:3px}
  #systems .tc-system-details li{font-size:9.7px;line-height:1.22;padding-left:15px}
  #systems .tc-card-arrow{right:9px;bottom:8px;width:29px;height:29px;font-size:16px}
}

@media (max-width:560px){
  #systems.tc-section{margin:20px 8px 0;padding:15px 10px 13px;border-width:2px;border-radius:20px}
  #systems .tc-heading{margin-bottom:12px}
  #systems .tc-heading h2{font-size:25px}
  #systems .tc-heading p{font-size:11.5px}
  #systems .tc-heading-link{padding:8px 13px;font-size:12px}
  #systems .tc-system-grid{gap:8px}
  #systems .tc-system-card{padding:9px 8px 39px;border-radius:16px}
  #systems .tc-system-card-head{grid-template-columns:40px minmax(0,1fr);gap:7px;min-height:55px}
  #systems .tc-system-icon{width:40px;height:40px;border-radius:12px;font-size:20px}
  #systems .tc-system-card h3{font-size:12.2px}
  #systems .tc-system-card p{font-size:9.8px;line-height:1.18;margin-top:3px}
  #systems .tc-system-image{margin-top:8px;border-radius:11px}
  #systems .tc-system-details{margin-top:7px;gap:2px}
  #systems .tc-system-details li{font-size:8.65px;line-height:1.2;padding-left:13px}
  #systems .tc-system-details li::before{font-size:9px}
  #systems .tc-card-arrow{right:7px;bottom:7px;width:27px;height:27px;border-width:1px;font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  #systems .tc-system-card,#systems .tc-system-image img,#systems .tc-system-card::after{transition:none}
}


/* ================================================================
   Twinncome Core Service Layer — 3 primary services
   ================================================================ */
#systems .tc-system-card--meegin{--accent:#16854a;--accent-soft:#eaf8ef}
#systems .tc-system-card--winner-solar{--accent:#ee8f12;--accent-soft:#fff5e4}
#systems .tc-system-card--kati-robot{--accent:#0b78d0;--accent-soft:#eaf5ff}

#systems .tc-system-card{
  min-height:385px;
  padding:16px 16px 50px;
}
#systems .tc-system-card-head{min-height:82px}
#systems .tc-system-card h3{font-size:clamp(18px,1.5vw,23px)}
#systems .tc-system-card p{font-size:13px}
#systems .tc-system-image{aspect-ratio:16 / 9;margin-top:12px}
#systems .tc-system-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 42%,rgba(0,40,65,.08));
  pointer-events:none;
  z-index:1;
}
#systems .tc-system-details li{font-size:12px;line-height:1.35}
#systems .tc-system-card:hover .tc-system-image img{transform:scale(1.035)}
#systems .tc-system-card:hover .tc-system-icon{
  transform:translateY(-2px) rotate(-2deg);
  box-shadow:0 10px 22px color-mix(in srgb,var(--accent) 18%,transparent);
}
#systems .tc-system-icon{transition:transform .22s ease,box-shadow .22s ease}

#systems .tc-core-note{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 13px;
  border-radius:14px;
  border:1px solid rgba(34,111,143,.12);
  background:linear-gradient(90deg,rgba(243,250,255,.94),rgba(244,255,248,.94));
  color:#547085;
  font-size:11.5px;
}
#systems .tc-core-note-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:#0b72c7;
  border:1px solid rgba(11,114,199,.15);
  box-shadow:0 5px 12px rgba(8,80,120,.08);
}
#systems .tc-core-note strong{
  display:block;
  color:#0c4b77;
  font-size:12px;
  margin-bottom:2px;
}
#systems .tc-core-note span{display:block}

@media(max-width:900px){
  #systems .tc-system-grid{grid-template-columns:1fr}
  #systems .tc-system-card{min-height:0}
}
@media(max-width:560px){
  #systems .tc-system-card{padding:11px 10px 43px}
  #systems .tc-system-card h3{font-size:15px}
  #systems .tc-system-card p{font-size:10.8px}
  #systems .tc-system-details li{font-size:10px}
  #systems .tc-system-image{aspect-ratio:16/10}
  #systems .tc-core-note{font-size:10.3px;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  #systems .tc-system-icon{transition:none}
}