/* ====== RONGYAO AI · ABSTRACT ILLUSTRATIONS ====== */
.illus{width:100%;aspect-ratio:4/3;border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,0.08);position:relative}
.illus-hero{aspect-ratio:4/3;border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,0.25);position:relative}
/* Policy: structured order, government */
.illus-policy{background:linear-gradient(155deg,#1A3816 0%,#2D5A27 30%,#3A6E35 55%,#2D5A27 80%,#1A3816 100%)}
.illus-policy::before{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 25% 30%,rgba(255,255,255,0.05) 0%,transparent 50%),
  radial-gradient(ellipse at 65% 70%,rgba(232,201,106,0.12) 0%,transparent 45%)}
.illus-policy::after{content:'';position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(255,255,255,0.04) 39px,rgba(255,255,255,0.04) 40px),
  repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(255,255,255,0.03) 39px,rgba(255,255,255,0.03) 40px),
  linear-gradient(30deg,transparent 35%,rgba(232,201,106,0.06) 35%,rgba(232,201,106,0.06) 36%,transparent 36%),
  linear-gradient(30deg,transparent 68%,rgba(232,201,106,0.05) 68%,rgba(232,201,106,0.05) 69%,transparent 69%)}
.illus-policy .geo{position:absolute;z-index:1}
.illus-policy .geo.a{left:15%;top:30%;width:48px;height:48px;border:1.5px solid rgba(255,255,255,0.2);border-radius:10px;transform:rotate(15deg)}
.illus-policy .geo.b{right:18%;top:45%;width:36px;height:36px;background:rgba(232,201,106,0.12);border-radius:8px;transform:rotate(-12deg)}
.illus-policy .geo.c{left:40%;bottom:25%;width:56px;height:56px;border:1px solid rgba(255,255,255,0.12);border-radius:50%}

/* People: community, growth, connection */
.illus-people{background:linear-gradient(160deg,#1F4F1F 0%,#3A7035 40%,#2D5A27 70%,#1A3816 100%)}
.illus-people::before{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 20% 40%,rgba(232,201,106,0.15) 0%,transparent 35%),
  radial-gradient(circle at 55% 30%,rgba(255,255,255,0.06) 0%,transparent 30%),
  radial-gradient(circle at 75% 65%,rgba(196,146,46,0.10) 0%,transparent 40%),
  radial-gradient(circle at 35% 75%,rgba(255,255,255,0.04) 0%,transparent 25%)}
.illus-people::after{content:'';position:absolute;inset:0;background:
  radial-gradient(circle 80px at 20% 40%,rgba(255,255,255,0.05) 0%,transparent 100%),
  radial-gradient(circle 60px at 50% 30%,rgba(255,255,255,0.06) 0%,transparent 100%),
  radial-gradient(circle 70px at 75% 45%,rgba(255,255,255,0.04) 0%,transparent 100%),
  radial-gradient(circle 55px at 40% 65%,rgba(232,201,106,0.08) 0%,transparent 100%),
  radial-gradient(circle 45px at 65% 70%,rgba(255,255,255,0.05) 0%,transparent 100%)}

/* Competition: dynamic, sharp, energy */
.illus-competition{background:linear-gradient(150deg,#0F2B0F 0%,#1F4F1F 30%,#2D5A27 60%,#1A3816 100%)}
.illus-competition::before{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse at 30% 35%,rgba(232,201,106,0.15) 0%,transparent 50%),
  radial-gradient(circle at 70% 60%,rgba(255,255,255,0.04) 0%,transparent 40%)}
.illus-competition::after{content:'';position:absolute;inset:0;background:
  linear-gradient(45deg,transparent 25%,rgba(255,255,255,0.03) 25%,rgba(255,255,255,0.03) 26%,transparent 26%),
  linear-gradient(45deg,transparent 52%,rgba(232,201,106,0.08) 52%,rgba(232,201,106,0.08) 53%,transparent 53%),
  linear-gradient(45deg,transparent 78%,rgba(255,255,255,0.03) 78%,rgba(255,255,255,0.03) 79%,transparent 79%),
  linear-gradient(-35deg,transparent 40%,rgba(255,255,255,0.03) 40%,rgba(255,255,255,0.03) 41%,transparent 41%),
  linear-gradient(-35deg,transparent 65%,rgba(232,201,106,0.06) 65%,rgba(232,201,106,0.06) 66%,transparent 66%)}
.illus-competition .geo{position:absolute;z-index:1}
.illus-competition .geo.a{left:20%;top:35%;width:60px;height:8px;background:rgba(232,201,106,0.3);transform:rotate(-25deg);border-radius:4px}
.illus-competition .geo.b{right:22%;top:50%;width:50px;height:6px;background:rgba(255,255,255,0.15);transform:rotate(15deg);border-radius:3px}
.illus-competition .geo.c{left:45%;bottom:30%;width:40px;height:5px;background:rgba(232,201,106,0.2);transform:rotate(40deg);border-radius:2px}

/* Course: AI, learning, technology, data flow */
.illus-course{background:linear-gradient(160deg,#1A3816 0%,#2D5A27 38%,#3A7035 65%,#1F4F1F 100%)}
.illus-course::before{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 40% 30%,rgba(255,255,255,0.06) 0%,transparent 40%),
  radial-gradient(circle at 65% 55%,rgba(232,201,106,0.10) 0%,transparent 35%),
  radial-gradient(circle at 25% 70%,rgba(196,146,46,0.08) 0%,transparent 30%)}
.illus-course::after{content:'';position:absolute;inset:0;
  background-image:
  radial-gradient(circle,rgba(255,255,255,0.15) 2px,transparent 2px),
  radial-gradient(circle,rgba(232,201,106,0.2) 1.5px,transparent 1.5px),
  radial-gradient(circle,rgba(255,255,255,0.1) 1px,transparent 1px);
  background-size:60px 60px,40px 40px,30px 30px;
  background-position:10px 15px,35px 10px,20px 40px}
.illus-course .geo{position:absolute;z-index:1}
.illus-course .geo.a{left:25%;top:38%;width:50px;height:50px;border:1px solid rgba(255,255,255,0.15);border-radius:50%}
.illus-course .geo.b{right:20%;bottom:32%;width:35px;height:35px;border:1px solid rgba(232,201,106,0.2);border-radius:50%}
.illus-course .geo.c{left:50%;top:45%;width:1px;height:1px;background:rgba(232,201,106,0.5);box-shadow:30px -20px 0 rgba(232,201,106,0.3),-25px 35px 0 rgba(255,255,255,0.2),40px 25px 0 rgba(255,255,255,0.15),-40px -15px 0 rgba(232,201,106,0.25),55px -40px 0 rgba(255,255,255,0.12)}

/* Jobs: professional, corporate, clean */
.illus-jobs{background:linear-gradient(150deg,#1F4F1F 0%,#2D5A27 40%,#3A7035 70%,#1F4F1F 100%)}
.illus-jobs::before{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse at 40% 35%,rgba(255,255,255,0.05) 0%,transparent 50%),
  radial-gradient(circle at 70% 60%,rgba(232,201,106,0.10) 0%,transparent 40%)}
.illus-jobs::after{content:'';position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,transparent,transparent 49px,rgba(255,255,255,0.04) 49px,rgba(255,255,255,0.04) 50px),
  linear-gradient(90deg,transparent 55%,rgba(232,201,106,0.08) 55%,rgba(232,201,106,0.08) 56%,transparent 56%)}
.illus-jobs .geo{position:absolute;z-index:1}
.illus-jobs .geo.a{left:20%;top:35%;width:40px;height:40px;background:rgba(255,255,255,0.05);border-radius:10px}
.illus-jobs .geo.b{left:45%;top:50%;width:55px;height:55px;border:1.5px solid rgba(232,201,106,0.18);border-radius:12px;transform:rotate(18deg)}
.illus-jobs .geo.c{right:25%;top:30%;width:30px;height:30px;background:rgba(232,201,106,0.08);border-radius:8px}

/* OPC: freedom, independence, expanding */
.illus-opc{background:linear-gradient(160deg,#0F2B0F 0%,#1F4F1F 35%,#2D5A27 60%,#3A7035 100%)}
.illus-opc::before{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 50% 50%,rgba(232,201,106,0.03) 0%,rgba(232,201,106,0.06) 30%,rgba(232,201,106,0.04) 55%,transparent 75%),
  radial-gradient(circle at 30% 35%,rgba(255,255,255,0.05) 0%,transparent 40%)}
.illus-opc::after{content:'';position:absolute;inset:0;background:
  radial-gradient(circle 120px at 50% 50%,transparent 0%,rgba(255,255,255,0.03) 100%),
  radial-gradient(circle 200px at 50% 50%,transparent 0%,rgba(232,201,106,0.05) 100%),
  radial-gradient(circle 280px at 50% 50%,transparent 0%,rgba(255,255,255,0.03) 100%)}

/* Base: network, map, connectivity */
.illus-base{background:linear-gradient(155deg,#1A3816 0%,#2D5A27 38%,#3A7035 62%,#1F4F1F 100%)}
.illus-base::before{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 30% 40%,rgba(232,201,106,0.12) 0%,transparent 40%),
  radial-gradient(circle at 60% 55%,rgba(255,255,255,0.05) 0%,transparent 35%),
  radial-gradient(circle at 40% 70%,rgba(196,146,46,0.08) 0%,transparent 30%)}
.illus-base::after{content:'';position:absolute;inset:0;
  background-image:
  radial-gradient(circle,rgba(255,255,255,0.15) 1.5px,transparent 1.5px),
  radial-gradient(circle,rgba(232,201,106,0.2) 1px,transparent 1px);
  background-size:30px 30px,25px 25px;
  background-position:5px 5px,20px 15px}
.illus-base .line{position:absolute;z-index:1}
.illus-base .line.l1{top:35%;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent)}
.illus-base .line.l2{top:55%;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(232,201,106,0.12),transparent)}
.illus-base .line.l3{left:35%;top:20%;bottom:20%;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,0.1),transparent)}

/* Cert: authority, formal, seal-like */
.illus-cert{background:linear-gradient(160deg,#1A3816 0%,#2D5A27 35%,#1F4F1F 65%,#1A3816 100%)}
.illus-cert::before{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 50% 45%,rgba(232,201,106,0.12) 0%,transparent 50%),
  radial-gradient(ellipse at 40% 55%,rgba(255,255,255,0.05) 0%,transparent 45%)}
.illus-cert::after{content:'';position:absolute;inset:0;background:
  linear-gradient(0deg,transparent 30%,rgba(255,255,255,0.04) 30%,rgba(255,255,255,0.04) 31%,transparent 31%),
  linear-gradient(0deg,transparent 62%,rgba(232,201,106,0.08) 62%,rgba(232,201,106,0.08) 63%,transparent 63%),
  linear-gradient(0deg,transparent 85%,rgba(255,255,255,0.04) 85%,rgba(255,255,255,0.04) 86%,transparent 86%)}
.illus-cert .geo{position:absolute;z-index:1}
.illus-cert .geo.a{left:50%;top:50%;width:80px;height:80px;transform:translate(-50%,-50%);border:2px solid rgba(232,201,106,0.25);border-radius:50%}
.illus-cert .geo.b{left:50%;top:50%;width:50px;height:50px;transform:translate(-50%,-50%);border:1.5px solid rgba(232,201,106,0.18);border-radius:50%}
.illus-cert .geo.c{left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%);background:rgba(232,201,106,0.15);border-radius:50%}

/* Dark variant for dark hero sections */
.illus-dark{box-shadow:0 24px 60px rgba(0,0,0,0.3)}