/* ==========================================
   TASKFLOW CASE STUDY
   PART 1
========================================== */

:root{

--bg:#09090b;
--surface:#111113;
--surface-2:#18181b;
--border:rgba(255,255,255,.08);

--text:#ffffff;
--text-light:#b5b5be;
--text-muted:#7d7d86;

--primary:#7c5cff;
--primary-light:#9d84ff;

--radius:22px;
--radius-lg:30px;

--container:1180px;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.75;

overflow-x:hidden;

}

a{

text-decoration:none;

color:inherit;

}

img{

display:block;

max-width:100%;

}

.container{

width:min(var(--container),92%);

margin:auto;

}

section{

padding:110px 0;

position:relative;

}

.noise{

position:fixed;

inset:0;

pointer-events:none;

opacity:.03;

background-image:
radial-gradient(circle at 20% 20%,white 1px,transparent 0),
radial-gradient(circle at 70% 80%,white 1px,transparent 0);

background-size:42px 42px;

z-index:0;

}

.glass{

background:rgba(255,255,255,.04);

backdrop-filter:blur(16px);

border:1px solid var(--border);

border-radius:var(--radius);

}

.section-label{

display:inline-flex;

padding:8px 18px;

border-radius:999px;

background:rgba(124,92,255,.12);

color:#b9abff;

font-size:.8rem;

font-weight:600;

letter-spacing:.08em;

text-transform:uppercase;

margin-bottom:24px;

}

h1{

font-size:clamp(3rem,7vw,5.6rem);

line-height:1.05;

font-weight:800;

letter-spacing:-.05em;

max-width:900px;

}

h2{

font-size:clamp(2rem,4vw,3.5rem);

font-weight:800;

letter-spacing:-.04em;

margin-bottom:20px;

}

h3{

font-size:1.35rem;

margin-bottom:16px;

font-weight:700;

}

.section-intro{

max-width:760px;

color:var(--text-light);

font-size:1.08rem;

margin-bottom:60px;

}

ul{

list-style:none;

}

ul li{

position:relative;

padding-left:22px;

margin-bottom:14px;

color:var(--text-light);

}

ul li::before{

content:"";

position:absolute;

left:0;

top:11px;

width:8px;

height:8px;

border-radius:50%;

background:var(--primary);

}

/* ==========================================
 HERO
========================================== */

.hero{

padding:130px 0 100px;

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

background:radial-gradient(circle,var(--primary) 0%,transparent 70%);

opacity:.08;

top:-220px;

right:-200px;

filter:blur(50px);

}

.back-link{

display:inline-flex;

align-items:center;

gap:8px;

margin-bottom:55px;

color:var(--text-light);

transition:.35s;

}

.back-link:hover{

color:white;

transform:translateX(-6px);

}

.hero-description{

margin-top:28px;

font-size:1.15rem;

max-width:760px;

color:var(--text-light);

}

.hero-meta{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:26px;

margin-top:70px;

}

.meta-card{

padding:28px;

background:rgba(255,255,255,.04);

border:1px solid var(--border);

border-radius:22px;

transition:.4s;

}

.meta-card:hover{

transform:translateY(-8px);

border-color:rgba(124,92,255,.35);

box-shadow:0 20px 60px rgba(124,92,255,.15);

}

.meta-label{

display:block;

font-size:.78rem;

letter-spacing:.08em;

text-transform:uppercase;

color:var(--text-muted);

margin-bottom:14px;

}

.meta-card h3{

margin:0;

font-size:1.05rem;

}

/* ==========================================
   OVERVIEW
========================================== */

.overview-grid{

display:grid;
grid-template-columns:1.1fr .9fr;
gap:32px;

}

.overview-card{

padding:42px;

transition:.35s;

}

.overview-card:hover{

transform:translateY(-8px);
border-color:rgba(124,92,255,.25);

}

.overview-card p{

color:var(--text-light);

}

.overview-card ul{

margin-top:24px;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:12px;

}

/* ==========================================
   CHALLENGE
========================================== */

.challenge-card{

padding:45px;

margin-bottom:55px;

}

.challenge-card blockquote{

font-size:1.35rem;

line-height:1.7;

font-weight:500;

color:white;

border-left:4px solid var(--primary);

padding-left:28px;

margin-top:25px;

}

.goals-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

}

.goal-card{

padding:34px;

transition:.35s;

position:relative;

overflow:hidden;

}

.goal-card:hover{

transform:translateY(-10px);

border-color:rgba(124,92,255,.3);

box-shadow:0 25px 60px rgba(124,92,255,.12);

}

.goal-card span{

display:inline-flex;

align-items:center;

justify-content:center;

width:46px;

height:46px;

border-radius:50%;

background:rgba(124,92,255,.15);

color:var(--primary-light);

font-weight:700;

margin-bottom:24px;

}

.goal-card ul{

margin-top:18px;

}

/* ==========================================
   AUDIENCE
========================================== */

.audience-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:32px;

}

.audience-card{

padding:40px;

transition:.35s;

}

.audience-card:hover{

transform:translateY(-8px);

}

.audience-card h4{

font-size:1.25rem;

margin:12px 0 22px;

}

.priority-list{

display:flex;

flex-direction:column;

gap:18px;

margin-top:24px;

}

.priority-list div{

display:flex;

align-items:center;

gap:20px;

padding:18px 20px;

border-radius:16px;

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.05);

transition:.3s;

}

.priority-list div:hover{

background:rgba(124,92,255,.08);

border-color:rgba(124,92,255,.18);

}

.priority-list span{

width:42px;

height:42px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:rgba(124,92,255,.14);

color:var(--primary-light);

font-weight:700;

flex-shrink:0;

}

.priority-list p{

margin:0;

color:var(--text-light);

}

/* ==========================================
   RESEARCH
========================================== */

.research-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:32px;

margin-bottom:45px;

}

.research-card{

padding:40px;

transition:.35s;

}

.research-card:hover{

transform:translateY(-8px);

border-color:rgba(124,92,255,.28);

}

.card-number{

display:inline-flex;

align-items:center;

justify-content:center;

width:52px;

height:52px;

border-radius:50%;

background:rgba(124,92,255,.12);

color:var(--primary-light);

font-weight:700;

margin-bottom:22px;

}

.competitor-list{

margin-top:30px;

display:flex;

flex-direction:column;

gap:18px;

}

.competitor{

padding:18px 22px;

background:rgba(255,255,255,.03);

border-radius:16px;

border:1px solid rgba(255,255,255,.05);

transition:.3s;

}

.competitor:hover{

transform:translateX(6px);

border-color:rgba(124,92,255,.25);

}

.competitor h4{

margin-bottom:8px;

font-size:1rem;

}

.competitor p{

color:var(--text-light);

font-size:.95rem;

}

.research-list{

margin-top:24px;

}

.research-list li{

margin-bottom:18px;

}

/* ==========================================
   INSIGHT PANEL
========================================== */

.insight-panel{

padding:45px;

border-left:4px solid var(--primary);

background:linear-gradient(
135deg,
rgba(124,92,255,.08),
rgba(255,255,255,.03)
);

}

.insight-label{

font-size:.82rem;

text-transform:uppercase;

letter-spacing:.08em;

color:var(--primary-light);

font-weight:700;

margin-bottom:18px;

}

.insight-panel p{

font-size:1.1rem;

line-height:1.9;

color:var(--text-light);

}
/* ==========================================
   DESIGN PROCESS
========================================== */

.timeline{

position:relative;

max-width:900px;

margin:70px auto 0;

padding-left:50px;

}

.timeline::before{

content:"";

position:absolute;

left:22px;

top:0;

bottom:0;

width:2px;

background:linear-gradient(
to bottom,
var(--primary),
rgba(124,92,255,.15)
);

}

.timeline-item{

position:relative;

padding-bottom:60px;

}

.timeline-item:last-child{

padding-bottom:0;

}

.timeline-number{

position:absolute;

left:-50px;

width:46px;

height:46px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:var(--bg);

border:2px solid var(--primary);

color:var(--primary-light);

font-weight:700;

z-index:2;

box-shadow:0 0 0 8px var(--bg);

}

.timeline-content{

padding:30px;

border-radius:22px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.06);

transition:.35s;

}

.timeline-content:hover{

transform:translateY(-6px);

border-color:rgba(124,92,255,.25);

box-shadow:0 20px 50px rgba(124,92,255,.12);

}

.timeline-content h3{

margin-bottom:12px;

}

.timeline-content p{

color:var(--text-light);

}

/* ==========================================
   DESIGN DECISIONS
========================================== */

.decision-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;

margin-top:60px;

}

.decision-card{

padding:36px;

transition:.35s;

position:relative;

overflow:hidden;

}

.decision-card:hover{

transform:translateY(-10px);

border-color:rgba(124,92,255,.3);

box-shadow:0 25px 60px rgba(124,92,255,.15);

}

.decision-icon{

width:70px;

height:70px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

font-size:1.7rem;

background:rgba(124,92,255,.12);

margin-bottom:24px;

}

.decision-card p{

color:var(--text-light);

margin:18px 0 28px;

}

.decision-footer{

display:flex;

justify-content:space-between;

padding-top:20px;

border-top:1px solid rgba(255,255,255,.08);

font-size:.9rem;

color:var(--text-muted);

}

.rationale-card{

margin-top:50px;

padding:50px;

text-align:center;

}

.rationale-card h3{

margin-bottom:20px;

}

.rationale-card p{

max-width:850px;

margin:auto;

font-size:1.08rem;

color:var(--text-light);

}

/* ==========================================
   DELIVERABLES
========================================== */

.deliverable-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

margin-top:60px;

}

.deliverable-card{

padding:36px;

transition:.35s;

}

.deliverable-card:hover{

transform:translateY(-8px);

border-color:rgba(124,92,255,.28);

}

.deliverable-card ul{

margin-top:22px;

}

.deliverable-card li{

margin-bottom:16px;

}

/* ==========================================
   SECTION SPACING IMPROVEMENTS
========================================== */

.process,
.decisions,
.deliverables{

position:relative;

}

.process::after,
.decisions::after{

content:"";

position:absolute;

right:-180px;

top:20%;

width:420px;

height:420px;

background:radial-gradient(circle,
rgba(124,92,255,.08),
transparent 70%);

filter:blur(30px);

pointer-events:none;

}
/* ==========================================
   CHALLENGES
========================================== */

.challenge-list{

display:grid;
gap:30px;
margin-top:60px;

}

.challenge-item{

padding:36px;
transition:.35s;

}

.challenge-item:hover{

transform:translateY(-8px);

border-color:rgba(124,92,255,.25);

box-shadow:0 20px 60px rgba(124,92,255,.12);

}

.challenge-header{

display:flex;

align-items:center;

gap:20px;

margin-bottom:22px;

}

.challenge-header span{

width:50px;

height:50px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:rgba(124,92,255,.12);

color:var(--primary-light);

font-weight:700;

flex-shrink:0;

}

.problem{

margin-bottom:18px;

color:var(--text-light);

}

.solution{

color:var(--text-light);

}

/* ==========================================
   OUTCOME
========================================== */

.outcome-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;

margin-top:60px;

}

.outcome-card{

padding:40px;

transition:.35s;

}

.outcome-card:hover{

transform:translateY(-8px);

}

/* ==========================================
   LEARNING
========================================== */

.learning-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

margin-top:60px;

}

.learning-card{

padding:34px;

transition:.35s;

}

.learning-card:hover{

transform:translateY(-8px);

border-color:rgba(124,92,255,.25);

}

.reflection-card{

padding:42px;

margin-top:40px;

}

.reflection-card ul{

margin-top:22px;

}

/* ==========================================
   SKILLS
========================================== */

.skills-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:22px;

margin-top:60px;

}

.skill-box{

padding:28px;

text-align:center;

font-weight:600;

transition:.35s;

cursor:default;

}

.skill-box:hover{

transform:translateY(-6px);

background:rgba(124,92,255,.08);

border-color:rgba(124,92,255,.3);

}

/* ==========================================
   CONCLUSION
========================================== */

.conclusion-card{

padding:70px;

text-align:center;

}

.conclusion-card p{

max-width:850px;

margin:30px auto 50px;

font-size:1.08rem;

color:var(--text-light);

}

.conclusion-actions{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.primary-btn,
.secondary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:999px;

font-weight:600;

transition:.35s;

}

.primary-btn{

background:var(--primary);

color:white;

}

.primary-btn:hover{

transform:translateY(-5px);

box-shadow:0 18px 45px rgba(124,92,255,.3);

}

.secondary-btn{

border:1px solid rgba(255,255,255,.12);

background:rgba(255,255,255,.03);

}

.secondary-btn:hover{

background:rgba(255,255,255,.06);

transform:translateY(-5px);

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:1100px){

.hero-meta,
.goals-grid,
.deliverable-grid,
.learning-grid,
.skills-grid{

grid-template-columns:repeat(2,1fr);

}

.overview-grid,
.audience-grid,
.research-grid,
.decision-grid,
.outcome-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

section{

padding:80px 0;

}

.hero{

padding:90px 0;

}

.hero-meta,
.goals-grid,
.learning-grid,
.deliverable-grid,
.skills-grid{

grid-template-columns:1fr;

}

.timeline{

padding-left:35px;

}

.timeline::before{

left:16px;

}

.timeline-number{

left:-35px;

width:36px;

height:36px;

font-size:.8rem;

}

.challenge-card blockquote{

font-size:1.1rem;

}

.conclusion-card{

padding:45px 28px;

}

}

@media(max-width:520px){

.container{

width:94%;

}

h1{

font-size:2.7rem;

}

h2{

font-size:2rem;

}

.section-intro{

font-size:1rem;

}

.hero-description{

font-size:1rem;

}

.meta-card,
.overview-card,
.goal-card,
.audience-card,
.research-card,
.decision-card,
.deliverable-card,
.challenge-item,
.learning-card,
.outcome-card{

padding:26px;

}

}

/* ==========================================
   REVEAL ANIMATION
========================================== */

section{

animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}