:root {
    --iso-bg: #e8eaed;
    --iso-text: #2d3436;
    --iso-primary: #6c5ce7;
    --iso-secondary: #00b894;
    --iso-accent: #fdcb6e;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--iso-bg); color: var(--iso-text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6; overflow-x: hidden;
    background-image: 
        linear-gradient(30deg, #e8eaed 12%, transparent 12.5%, transparent 87%, #e8eaed 87.5%, #e8eaed),
        linear-gradient(150deg, #e8eaed 12%, transparent 12.5%, transparent 87%, #e8eaed 87.5%, #e8eaed),
        linear-gradient(30deg, #e8eaed 12%, transparent 12.5%, transparent 87%, #e8eaed 87.5%, #e8eaed),
        linear-gradient(150deg, #e8eaed 12%, transparent 12.5%, transparent 87%, #e8eaed 87.5%, #e8eaed),
        linear-gradient(60deg, #dfe4ea 25%, transparent 25.5%, transparent 75%, #dfe4ea 75%, #dfe4ea),
        linear-gradient(60deg, #dfe4ea 25%, transparent 25.5%, transparent 75%, #dfe4ea 75%, #dfe4ea);
    background-size: 80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}

.iso-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1;}

/* Header */
.iso-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 40px; margin-top: 40px; margin-bottom: 80px;
    background: #fff; border-radius: 15px;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.05);
    transform: rotateX(10deg) rotateZ(-5deg); transform-style: preserve-3d;
}
.iso-brand {
    font-size: 28px; font-weight: 900; color: var(--iso-primary);
    text-transform: uppercase; letter-spacing: 1px;
    transform: translateZ(20px);
}
.iso-nav { display: flex; gap: 30px; transform: translateZ(10px);}
.iso-nav a {
    font-size: 16px; font-weight: bold; color: #636e72;
    text-transform: uppercase; transition: color 0.3s;
}
.iso-nav a:hover, .iso-nav a.active { color: var(--iso-secondary); }

/* Hero */
.iso-hero {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 120px; padding: 60px; background: #fff; border-radius: 20px;
    box-shadow: 20px 20px 0px rgba(0,0,0,0.05);
    transform: rotateX(10deg) rotateZ(-5deg); transform-style: preserve-3d;
}
.ih-content { flex: 1; padding-right: 40px; transform: translateZ(30px);}
.ih-content h1 {
    font-size: 50px; font-weight: 900; margin-bottom: 20px; color: #2d3436;
    line-height: 1.2; text-transform: uppercase;
}
.ih-content h1 span { color: var(--iso-primary); }
.ih-content p { font-size: 18px; color: #636e72; margin-bottom: 40px; font-weight: 500;}

.ih-visual {
    flex: 1; display: flex; justify-content: center; align-items: center;
    transform: translateZ(50px);
}
.iso-cube {
    width: 150px; height: 150px; position: relative; transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(45deg); animation: spinCube 10s infinite linear;
}
.cube-face {
    position: absolute; width: 150px; height: 150px; border: 2px solid #fff;
    display: flex; justify-content: center; align-items: center; font-size: 40px; font-weight: bold; color: #fff;
}
.cf-front  { transform: translateZ(75px); background: rgba(108, 92, 231, 0.8); }
.cf-back   { transform: rotateY(180deg) translateZ(75px); background: rgba(0, 184, 148, 0.8); }
.cf-right  { transform: rotateY(90deg) translateZ(75px); background: rgba(253, 203, 110, 0.8); }
.cf-left   { transform: rotateY(-90deg) translateZ(75px); background: rgba(214, 48, 49, 0.8); }
.cf-top    { transform: rotateX(90deg) translateZ(75px); background: rgba(9, 132, 227, 0.8); }
.cf-bottom { transform: rotateX(-90deg) translateZ(75px); background: rgba(225, 112, 85, 0.8); }
@keyframes spinCube { 100% { transform: rotateX(-30deg) rotateY(405deg); } }

.btn-iso {
    display: inline-block; padding: 15px 35px; font-size: 18px; font-weight: bold;
    color: #fff; background: var(--iso-primary); border-radius: 10px;
    box-shadow: 5px 5px 0px var(--iso-secondary); transition: all 0.2s;
    margin-right: 20px; text-transform: uppercase;
}
.btn-iso:active { transform: translate(5px, 5px); box-shadow: 0px 0px 0px var(--iso-secondary); }
.btn-iso-alt {
    display: inline-block; padding: 15px 35px; font-size: 18px; font-weight: bold;
    color: var(--iso-text); background: var(--iso-accent); border-radius: 10px;
    box-shadow: 5px 5px 0px #e17055; transition: all 0.2s; text-transform: uppercase;
}
.btn-iso-alt:active { transform: translate(5px, 5px); box-shadow: 0px 0px 0px #e17055; }

/* Stats */
.iso-stats {
    display: flex; gap: 30px; margin-bottom: 120px;
    transform: rotateX(10deg) rotateZ(-5deg); transform-style: preserve-3d;
}
.is-item {
    flex: 1; background: #fff; padding: 30px; border-radius: 15px; text-align: center;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.05); transform: translateZ(20px);
}
.is-val { font-size: 48px; font-weight: 900; color: var(--iso-secondary); margin-bottom: 5px;}
.is-lbl { font-size: 16px; font-weight: bold; color: #636e72; text-transform: uppercase;}

/* Features */
.iso-features { margin-bottom: 120px; transform: rotateX(10deg) rotateZ(-5deg); transform-style: preserve-3d;}
.if-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;}
.if-card {
    background: #fff; padding: 40px; border-radius: 20px;
    box-shadow: 15px 15px 0px rgba(0,0,0,0.05); transform: translateZ(20px);
    transition: transform 0.3s;
}
.if-card:hover { transform: translateZ(40px); }
.if-card h3 { font-size: 24px; font-weight: 900; margin-bottom: 15px; color: var(--iso-primary); text-transform: uppercase;}
.if-card p { font-size: 16px; color: #636e72; font-weight: 500;}

/* Nodes */
.iso-nodes {
    margin-bottom: 120px; background: var(--iso-primary); padding: 60px; border-radius: 20px;
    box-shadow: 20px 20px 0px rgba(0,0,0,0.1); color: #fff; text-align: center;
    transform: rotateX(10deg) rotateZ(-5deg); transform-style: preserve-3d;
}
.iso-nodes h2 { font-size: 36px; font-weight: 900; margin-bottom: 40px; text-transform: uppercase; transform: translateZ(30px);}
.in-list { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; transform: translateZ(20px);}
.in-item {
    padding: 15px 25px; background: #fff; color: var(--iso-primary);
    font-size: 16px; font-weight: bold; border-radius: 10px;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.2); text-transform: uppercase;
}

/* FAQ */
.iso-faq { margin-bottom: 120px; max-width: 800px; margin-left: auto; margin-right: auto; transform: rotateX(10deg) rotateZ(-5deg); transform-style: preserve-3d;}
.iso-faq h2 { font-size: 36px; font-weight: 900; margin-bottom: 50px; color: #2d3436; text-align: center; text-transform: uppercase;}
.i-faq-item {
    margin-bottom: 30px; background: #fff; padding: 30px; border-radius: 15px;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.05); transform: translateZ(20px);
}
.i-fq { font-size: 20px; font-weight: 900; color: var(--iso-secondary); margin-bottom: 15px;}
.i-fa { font-size: 16px; color: #636e72; font-weight: 500;}

footer { text-align: center; padding: 40px 0; color: #b2bec3; font-size: 14px; font-weight: bold; text-transform: uppercase;}

@media (max-width: 900px) {
    .iso-header, .iso-hero, .iso-stats, .iso-features, .iso-nodes, .iso-faq { transform: none; box-shadow: 5px 5px 0px rgba(0,0,0,0.05);}
    .iso-header { flex-direction: column; gap: 20px; }
    .iso-hero { flex-direction: column; text-align: center; padding: 40px 20px;}
    .ih-content { padding-right: 0; margin-bottom: 60px;}
    .iso-stats { flex-direction: column; }
    .if-grid { grid-template-columns: 1fr; }
    .btn-iso, .btn-iso-alt { display: block; margin: 15px auto; width: 80%;}
}