/* Home — "Why choose 360 Digital" */
.why360{ background:var(--paper); position:relative; overflow:hidden; isolation:isolate; }
.why360::before{ content:"360"; position:absolute; z-index:-1; right:3%; top:34px; font:700 clamp(4.5rem,9vw,7.5rem)/1 var(--font-display); letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1px rgba(18,20,15,.09); }
.why360-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,72px); align-items:start; }
.why360-intro{ position:sticky; top:110px; }
.why360-intro h2{ margin:18px 0 16px; }
.why360-intro h2 em{ font-style:normal; color:var(--coral); position:relative; white-space:nowrap; }
.why360-intro h2 em::after{ content:""; position:absolute; left:0; right:0; bottom:.04em; height:.28em; background:var(--lime); z-index:-1; border-radius:4px; }
.why360-intro p{ color:var(--muted); max-width:30em; line-height:1.7; }
.why360-stats{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 30px; }
.why360-stats div{ background:var(--ink); color:var(--paper); border-radius:18px; padding:14px 20px; min-width:112px; }
.why360-stats b{ display:block; font:700 1.9rem/1 var(--font-display); color:var(--lime); }
.why360-stats small{ font:500 .7rem var(--font-mono); letter-spacing:.06em; text-transform:uppercase; opacity:.75; }
.why360-cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.why360-card{ position:relative; background:#fff; border:1px solid rgba(18,20,15,.12); border-radius:26px; padding:26px 24px 24px; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.why360-card:nth-child(even){ margin-top:34px; }
.why360-card::before{ content:""; position:absolute; right:-50px; top:-50px; width:130px; height:130px; border-radius:50%; background:var(--c,var(--coral)); opacity:.14; transition:transform .5s var(--ease); }
.why360-card:hover{ transform:translateY(-8px) rotate(-.6deg); border-color:var(--c,var(--coral)); box-shadow:0 30px 50px -30px rgba(18,20,15,.45); }
.why360-card:hover::before{ transform:scale(2.8); }
.why360-card .no{ position:absolute; top:14px; right:20px; font:700 2.6rem/1 var(--font-display); color:transparent; -webkit-text-stroke:1px var(--c,var(--coral)); opacity:.5; }
.why360-card .ico{ display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:var(--c,var(--coral)); color:#fff; font-size:1.3rem; margin-bottom:18px; transition:transform .4s var(--ease); }
.why360-card:hover .ico{ transform:rotate(-8deg) scale(1.08); }
.why360-card h3{ font-size:1.12rem; font-weight:600; margin:0 0 8px; letter-spacing:-.01em; }
.why360-card p{ margin:0; font-size:.92rem; line-height:1.6; color:var(--muted); }
.why360-card.c2{ --c:var(--cobalt); } .why360-card.c3{ --c:#12a594; } .why360-card.c4{ --c:var(--amber); } .why360-card.c4 .ico{ color:var(--ink); }
@media (max-width:991px){ .why360-grid{ grid-template-columns:1fr; } .why360-intro{ position:static; } }
@media (max-width:560px){ .why360-cards{ grid-template-columns:1fr; } .why360-card:nth-child(even){ margin-top:0; } }
@media (prefers-reduced-motion:reduce){ .why360-card, .why360-card::before, .why360-card .ico{ transition:none; } }

/* creative layer */
.why360-card::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb,var(--c,var(--coral)) 18%,transparent), transparent 70%); }
.why360-card:hover::after{ opacity:1; }
.why360-card .tags{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 0; padding:0; }
.why360-card .tags li{ font:500 .66rem var(--font-mono); letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:99px; border:1px solid color-mix(in srgb,var(--c,var(--coral)) 45%,transparent); color:var(--ink); transition:background .3s,color .3s; }
.why360-card:hover .tags li{ background:var(--c,var(--coral)); color:#fff; border-color:transparent; }
.why360-card.c4:hover .tags li{ color:var(--ink); }

/* left side — creative */
.why360-intro h2 em::after{ display:none; }
.why360-intro h2 em{ background:linear-gradient(transparent 62%,var(--lime) 62% 92%,transparent 92%); padding:0 .08em; }
.why360-squig{ display:block; width:min(220px,60%); height:14px; margin-top:10px; color:var(--coral); }
.why360-stats{ gap:14px; margin:30px 0 26px; }
.why360-stats div{ border-radius:16px; padding:14px 20px 12px; min-width:104px; box-shadow:5px 5px 0 var(--ink); border:2px solid var(--ink); transition:transform .35s var(--ease); }
.why360-stats div:nth-child(1){ background:var(--lime); color:var(--ink); transform:rotate(-3deg); }
.why360-stats div:nth-child(2){ background:var(--coral); color:#fff; transform:rotate(2deg) translateY(6px); }
.why360-stats div:nth-child(3){ background:var(--cobalt); color:#fff; transform:rotate(-2deg); }
.why360-stats b{ color:inherit; }
.why360-stats small{ opacity:.85; }
.why360-stats div:hover{ transform:rotate(0) translateY(-4px); }
.why360-promise{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:10px; }
.why360-promise li{ display:flex; align-items:center; gap:12px; font-weight:500; }
.why360-promise i{ flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--lime); font-size:.95rem; transition:transform .3s var(--ease), background .3s; }
.why360-promise li:hover i{ transform:scale(1.2) rotate(-10deg); background:var(--coral); color:#fff; }
.why360-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }
.why360-call{ display:inline-flex; align-items:center; gap:8px; font:500 .85rem var(--font-mono); color:var(--ink); border-bottom:1.5px solid var(--coral); padding-bottom:2px; }
.why360-call i{ color:var(--coral); }
.why360-call:hover{ color:var(--coral); }
@media (prefers-reduced-motion:reduce){ .why360-stats div, .why360-promise i{ transition:none; } }