:root{--navy:#000e4b;--orange:#ff5a00;--orange-2:#cc4800;--bg:#f1f5f9;--surface:#fff;--border:#dde3f0;--text:#0a0e24;--muted:#6172a3;--success:#059669;--danger:#dc2626;--warn:#d97706}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:#060d10;color:#fff;overflow-x:hidden}

/* ── Hero ── */
.hero-section{
    min-height:600px;
    position:relative;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.hero-bg{
    position:absolute;inset:0;
    background-image:url("{% static 'accounts/herohome.png' %}");
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
    z-index:0;
}
/* dark overlay so text stays readable */
.hero-bg::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,0.38) 0%,
        rgba(0,0,0,0.22) 45%,
        rgba(0,0,0,0.72) 100%
    );
}
.hero-content{
    position:relative;z-index:2;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:220px 24px 80px;
    max-width:1240px;
    margin:0 auto;
    width:100%;
}

/* rating pill */
.hero-rating{
    display:inline-flex;align-items:center;gap:14px;
    background:rgba(20,20,20,0.72);
    border:1px solid rgba(255,255,255,0.12);
    backdrop-filter:blur(12px);
    border-radius:50px;
    padding:8px 20px 8px 8px;
    margin-bottom:28px;
    opacity:0;animation:fadeUp .7s .2s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-avatars{display:flex;align-items:center;}
.hero-avatars span{
    width:34px;height:34px;border-radius:50%;
    border:2px solid #1a1a1a;
    background:rgba(255,90,0,0.25);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:700;color:#fff;
    margin-left:-10px;
}
.hero-avatars span:first-child{margin-left:0}
.hero-avatars span.active{background:var(--orange);}
.hero-rating-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.hero-stars{color:var(--orange);font-size:13px;letter-spacing:1px}
.hero-rating-label{font-size:12px;color:rgba(255,255,255,0.7);font-weight:500;white-space:nowrap}

/* heading */
.hero-title{
    font-family:'Inter',sans-serif;
    font-size:68px;
    font-weight:700;
    font-style:normal;
    line-height:88px;
    letter-spacing:0%;
    text-align:center;
    color:#fff;
    margin-bottom:20px;
    opacity:0;animation:fadeUp .8s .4s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-title .hi{color:var(--orange)}

/* hero-title responsive */
@media(max-width:1240px){.hero-title{font-size:68px;line-height:76px}}
@media(max-width:1024px){.hero-title{font-size:58px;line-height:66px}}
@media(max-width:768px) {.hero-title{font-size:46px;line-height:54px}}
.hero-title .br-desktop{display:inline}
@media(max-width:640px){.hero-title{font-size:38px;line-height:46px}.hero-title .br-desktop{display:none}}
@media(max-width:480px) {.hero-title{font-size:30px;line-height:38px}}
@media(max-width:375px) {.hero-title{font-size:26px;line-height:34px}}

/* desc */
.hero-desc{
    font-family:'Inter',sans-serif;
    font-size:22px;
    font-weight:400;
    font-style:normal;
    line-height:100%;
    letter-spacing:0%;
    text-align:center;
    color:#ffffff;
    max-width:720px;
    margin:0 auto 36px;
    opacity:0;animation:fadeUp .8s .55s cubic-bezier(.22,1,.36,1) forwards;
}
@media(max-width:1024px){.hero-desc{font-size:19px}}
@media(max-width:768px) {.hero-desc{font-size:17px}}
@media(max-width:480px) {.hero-desc{font-size:15px}}

/* buttons */
.hero-btns{
    display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;
    opacity:0;animation:fadeUp .8s .7s cubic-bezier(.22,1,.36,1) forwards;
}
.btn-primary{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 32px;background:var(--orange);color:#fff;
    font-size:15px;font-weight:700;border-radius:8px;text-decoration:none;
    transition:box-shadow .25s,transform .2s;position:relative;overflow:hidden;
}
.btn-primary:hover{box-shadow:0 0 28px rgba(255,90,0,0.45);transform:translateY(-2px)}
.btn-secondary{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 28px;background:transparent;color:#fff;
    font-size:15px;font-weight:600;border-radius:8px;text-decoration:none;
    border:1.5px solid rgba(255,255,255,0.28);
    transition:border-color .25s,background .25s,transform .2s;
}
.btn-secondary:hover{border-color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.06);transform:translateY(-2px)}

/* stats strip */
.hero-stats{
    position:relative;z-index:2;
    background:transparent;
    border-top:1px solid rgba(255,90,0,0.18);
    border-bottom:1px solid rgba(255,255,255,0.06);
    width:100%;
}
.hero-stats-inner{
    max-width:1240px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
}
.hero-stat{
    padding:40px 24px;
    text-align:center;
    border-right:1px solid rgba(255,255,255,0.08);
    opacity:0;animation:fadeUp .8s cubic-bezier(.22,1,.36,1) forwards;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex:1;
    min-width:0;
}
.hero-stat:last-child{border-right:none}
.hero-stat:nth-child(1){animation-delay:.9s}
.hero-stat:nth-child(2){animation-delay:1.05s}
.hero-stat:nth-child(3){animation-delay:1.2s}
.stat-label-top{
    font-family:'Sk-Modernist','Poppins',sans-serif;
    font-size:23px;
    font-weight:400;
    font-style:normal;
    line-height:100%;
    letter-spacing:0%;
    text-align:center;
    color:#ff541f;
    margin-bottom:12px;
}
.stat-value{
    font-family:'Sk-Modernist','Poppins',sans-serif;
    font-size:46px;
    font-weight:700;
    font-style:normal;
    line-height:100%;
    letter-spacing:0%;
    text-align:center;
    color:#ffffff;
}

/* responsive stat labels */
@media(max-width:1240px){
    .stat-label-top{font-size:21px}
    .stat-value{font-size:42px}
    .hero-stat{padding:36px 20px}
}
@media(max-width:1024px){
    .stat-label-top{font-size:19px}
    .stat-value{font-size:36px}
    .hero-stat{padding:32px 16px}
}
@media(max-width:768px){
    .stat-label-top{font-size:17px}
    .stat-value{font-size:30px}
    .hero-stat{padding:26px 12px}
}
@media(max-width:480px){
    .stat-label-top{font-size:13px;margin-bottom:7px}
    .stat-value{font-size:22px}
    .hero-stat{padding:20px 8px}
}
@media(max-width:375px){
    .stat-label-top{font-size:11px;margin-bottom:5px}
    .stat-value{font-size:18px}
    .hero-stat{padding:16px 6px}
}

@keyframes fadeUp{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}

/* ── Features ── */
.features-section{
    background:#010101;
    padding:96px 80px;
    width:100%;
}
.features-inner{
    max-width:1240px;
    margin:0 auto;
}
/* header row */
.features-header{
    display:flex;
    align-items:flex-start;
    gap:250px;
    margin-bottom:56px;
}
.features-header-left{
    flex:0 1 auto;
    max-width:640px;
}
.features-heading{
    font-family:'Inter',sans-serif;
    font-size:44px;
    font-weight:700;
    font-style:normal;
    line-height:60.4px;
    letter-spacing:0%;
    color:#ffffff;
    margin:0 0 20px;
}
.features-subtext{
    font-family:'Sk-Modernist','Poppins',sans-serif;
    font-size:18px;
    font-weight:400;
    font-style:normal;
    line-height:21.6px;
    letter-spacing:0;
    color:#ffffffd9;
    max-width:520px;
    margin:0;
}
.features-header-right{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:240px;
    height:240px;
}
/* 3D Sphere canvas */
.sphere-canvas{
    width:240px;
    height:240px;
    display:block;
}

/* ── OLD CUBE CSS (commented out) ──
.features-header-right {
    perspective: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cube-scene {
    width: 140px;
    height: 140px;
    perspective: 900px;
}
.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: cubeRotate 8s ease-in-out infinite;
}
.cube-face {
    position: absolute;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,90,0,0.2);
    border-radius: 16px;
    backface-visibility: visible;
}
.cube-front {
    background: radial-gradient(ellipse at center, rgba(255,90,0,0.12) 0%, rgba(10,10,10,0.95) 70%);
    transform: translateZ(70px);
    box-shadow: 0 0 40px rgba(255,90,0,0.15), inset 0 0 30px rgba(255,90,0,0.05);
}
.cube-back {
    background: radial-gradient(ellipse at center, rgba(255,90,0,0.08) 0%, rgba(10,10,10,0.95) 70%);
    transform: rotateY(180deg) translateZ(70px);
}
.cube-right {
    background: linear-gradient(135deg, rgba(255,90,0,0.06) 0%, rgba(10,10,10,0.9) 100%);
    transform: rotateY(90deg) translateZ(70px);
}
.cube-left {
    background: linear-gradient(135deg, rgba(10,10,10,0.9) 0%, rgba(255,90,0,0.06) 100%);
    transform: rotateY(-90deg) translateZ(70px);
}
.cube-top {
    background: linear-gradient(180deg, rgba(255,90,0,0.08) 0%, rgba(10,10,10,0.9) 100%);
    transform: rotateX(90deg) translateZ(70px);
}
.cube-bottom {
    background: linear-gradient(0deg, rgba(255,90,0,0.04) 0%, rgba(10,10,10,0.9) 100%);
    transform: rotateX(-90deg) translateZ(70px);
}
.shield-icon {
    width: 80px;
    height: 80px;
}
.shield-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 12px rgba(255,90,0,0.6));
}
── END OLD CUBE CSS ──*/
/* cards grid */
.features-cards{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:16px;
}
.feat-card:nth-child(1){grid-column:span 5;border:none}
.feat-card:nth-child(2){grid-column:span 7;border-width:0.3px;border-color:rgba(255,90,0,0.25)}
.feat-card:nth-child(3){grid-column:span 7;border-width:0.3px;border-color:rgba(255,90,0,0.25)}
.feat-card:nth-child(4){grid-column:span 5;border:none}
.feat-card:nth-child(2) .feat-card-top,
.feat-card:nth-child(3) .feat-card-top{gap:135px}
@media(max-width:1240px){
    .feat-card:nth-child(2) .feat-card-top,
    .feat-card:nth-child(3) .feat-card-top{gap:90px}
}
@media(max-width:1024px){
    .feat-card:nth-child(2) .feat-card-top,
    .feat-card:nth-child(3) .feat-card-top{gap:60px}
}
@media(max-width:768px){
    .feat-card:nth-child(2) .feat-card-top,
    .feat-card:nth-child(3) .feat-card-top{gap:12px}
}
.feat-card{
    background:#1a1a1a;
    border-radius:20px;
    padding:24px 22px;
    border:1px solid #ff5a00;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:240px;
    position:relative;
    overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;
}
.feat-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 40px rgba(0,0,0,0.4);
}
.feat-card--glow-tl::before,
.feat-card--glow-br::before{
    content:'';
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(180,50,0,0.45) 0%, transparent 70%);
    pointer-events:none;
    z-index:0;
}
.feat-card--glow-tl::before{bottom:-80px;right:-60px;}
.feat-card--glow-br::before{bottom:-80px;right:-60px;}
.feat-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:20px;
    position:relative;
    z-index:1;
}
.feat-card-desc{
    font-family:'Sk-Modernist','Poppins',sans-serif;
    font-size:18px;
    font-weight:400;
    font-style:normal;
    line-height:19.2px;
    letter-spacing:0;
    color:rgba(255,255,255,0.65);
    max-width:none;
    margin:0;
    flex:1;
}
.feat-arrow-btn{
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--orange);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:18px;
    text-decoration:none;
    flex-shrink:0;
    transition:background .25s ease, transform .25s ease;
    border:none;
    cursor:pointer;
}
.feat-arrow-btn:hover{
    background:var(--orange-2);
    transform:scale(1.08);
}
.feat-card-title{
    font-family:'Inter',sans-serif;
    font-size:clamp(22px,2.5vw,30px);
    font-weight:400;
    color:#fff;
    margin:0;
    line-height:1.2;
    position:relative;
    z-index:1;
}
/* ── OLD cubeRotate keyframes (commented out) ──
@keyframes cubeRotate {
    0% { transform: rotateX(-15deg) rotateY(0deg) translateY(0px); }
    25% { transform: rotateX(5deg) rotateY(90deg) translateY(-8px); }
    50% { transform: rotateX(-5deg) rotateY(180deg) translateY(0px); }
    75% { transform: rotateX(10deg) rotateY(270deg) translateY(-8px); }
    100% { transform: rotateX(-15deg) rotateY(360deg) translateY(0px); }
}
── END OLD cubeRotate ──*/

/* features responsive */
@media(max-width:1240px){
    .features-section{padding:80px 48px}
    .features-header{gap:120px}
    .features-header-right{width:220px;height:220px}
    .sphere-canvas{width:220px;height:220px}
}
@media(max-width:1024px){
    .features-section{padding:72px 32px}
    .features-header{gap:80px}
    .features-heading{font-size:36px;line-height:58px}
    .features-subtext{font-size:16px;line-height:19.2px}
    .features-header-right{width:190px;height:190px}
    .sphere-canvas{width:190px;height:190px}
}
@media(max-width:900px){
    .features-header{gap:40px}
}
@media(max-width:768px){
    .features-section{padding:56px 24px}
    .features-header{flex-direction:column;gap:28px;margin-bottom:36px;align-items:center}
    .features-header-right{width:180px;height:180px;display:flex}
    .sphere-canvas{width:180px;height:180px}
    .features-heading{font-size:28px;line-height:40px;text-align:center}
    .features-heading .br-desktop{display:none}
    .features-subtext{text-align:center}
    .features-cards{grid-template-columns:1fr}
    .feat-card:nth-child(1),.feat-card:nth-child(2),.feat-card:nth-child(3),.feat-card:nth-child(4){grid-column:span 1}
    .feat-card{min-height:auto;padding:24px;border:0.3px solid rgba(255,90,0,0.25)}
    .feat-card-desc{font-size:16px;line-height:17.2px}
    .feat-card:nth-child(2) .feat-card-top,
    .feat-card:nth-child(3) .feat-card-top{gap:12px}
}
@media(max-width:640px){
    .features-header-right{width:160px;height:160px}
    .sphere-canvas{width:160px;height:160px}
}
@media(max-width:480px){
    .features-section{padding:40px 16px}
    .features-heading{font-size:24px;line-height:34px}
    .features-subtext{font-size:14px;line-height:18px}
    .features-header-right{width:140px;height:140px}
    .sphere-canvas{width:140px;height:140px}
    .feat-card{padding:20px;min-height:auto}
    .feat-card-desc{font-size:14px;line-height:15px;max-width:none}
    .feat-card-title{font-size:20px}
    .feat-arrow-btn{width:40px;height:40px;font-size:14px}
}
@media(max-width:375px){
    .features-header-right{width:120px;height:120px}
    .sphere-canvas{width:120px;height:120px}
}

/* ── About / Timeline ── */
.about-section{
    background:#010101;
    padding:96px 80px;
    width:100%;
    position:relative;
    overflow:hidden;
}
.about-inner{
    max-width:1240px;
    margin:0 auto;
}
/* top text block */
.about-top{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:24px;
    margin-bottom:72px;
}
.about-year{
    flex-shrink:0;
    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:500;
    color:rgba(255,255,255,0.5);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:20px;
    padding:6px 16px;
    margin-top:6px;
    white-space:nowrap;
}
.about-text{
    font-family:'Inter',sans-serif;
    font-size:27.98px;
    font-weight:700;
    font-style:normal;
    line-height:39.17px;
    letter-spacing:-0.03em;
    text-align:left;
    color:#fff;
    max-width:860px;
    margin:0;
}
/* CTA row */
.about-cta-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    margin-top:60px;
}
.about-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 32px;
    background:var(--orange);
    color:#fff;
    font-family:'Inter',sans-serif;
    font-size:15px;
    font-weight:700;
    border-radius:10px;
    text-decoration:none;
    transition:box-shadow .25s,transform .2s;
}
.about-btn:hover{box-shadow:0 0 28px rgba(255,90,0,0.45);transform:translateY(-2px)}
.about-slots{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    color:rgba(255,255,255,0.5);
}
.about-slots-dot{
    width:8px;height:8px;border-radius:50%;
    background:#22c55e;
    display:inline-block;
}
/* timeline grid */
.timeline-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap:0;
    position:relative;
}
/* stagger: cards 1,3 top; cards 2,4 pushed down */
.tl-card{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    padding:0 20px;
}
.tl-card:nth-child(1){padding-top:0;margin-top:-32px}
.tl-card:nth-child(2){padding-top:90px}
.tl-card:nth-child(3){padding-top:0;margin-top:-32px}
.tl-card:nth-child(4){padding-top:90px}
.tl-number{
    font-family:'Sk-Modernist','Poppins',sans-serif;
    font-size:67.15px;
    font-weight:700;
    color:#fff;
    line-height:74.61px;
    letter-spacing:-0.05em;
    margin-bottom:10px;
}
.tl-label{
    font-family:'Sk-Modernist','Poppins',sans-serif;
    font-size:22.38px;
    font-weight:400;
    color:#fff;
    margin-bottom:4px;
    line-height:29.84px;
    letter-spacing:-0.03em;
}
.tl-sub{
    font-family:'Sk-Modernist','Poppins',sans-serif;
    font-size:14.92px;
    font-weight:400;
    color:rgba(255,255,255,0.35);
    margin-bottom:18px;
    line-height:20.52px;
    letter-spacing:-0.03em;
}
/* avatar row */
.tl-avatars{
    display:flex;
    align-items:center;
    margin-bottom:16px;
}
.tl-avatars span{
    width:58px;height:58px;border-radius:50%;
    border:2.5px solid rgba(255,255,255,0.2);
    margin-left:-14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    flex-shrink:0;
    position:relative;
    background:#1a1a1a;
}
.tl-avatars span:first-child{margin-left:0}
.tl-avatars span img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:50%;
}
/* rectangle variant */
.tl-avatars.rect span{
    width:44px;
    height:44px;
    border-radius:8px;
    margin-left:-10px;
}
.tl-avatars.rect span img{
    border-radius:6px;
    object-fit:cover;
}
/* arrow line with cross end */
.tl-arrow{
    display:flex;
    align-items:center;
    gap:0;
    margin-top:16px;
    position:relative;
}
.tl-arrow-line{
    flex:1;
    height:1px;
    background:rgba(255,255,255,0.2);
}
.tl-arrow-head{
    width:18px;height:18px;
    flex-shrink:0;
    position:relative;
}
.tl-arrow-head::before,
.tl-arrow-head::after{
    content:'';
    position:absolute;
    top:50%;left:50%;
    width:16px;height:1.5px;
    background:rgba(255,255,255,0.5);
}
.tl-arrow-head::before{transform:translate(-50%,-50%) rotate(45deg)}
.tl-arrow-head::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* decorative dots */
.about-dot{
    position:absolute;
    width:8px;height:8px;border-radius:50%;
    pointer-events:none;
}
.about-dot--orange{background:var(--orange)}
.about-dot--green{background:#22c55e}
.about-dot--red{background:#ef4444}
.about-dot--pos1{top:18%;right:12%}
.about-dot--pos2{top:56%;left:38%}
.about-dot--pos3{top:48%;right:32%}
.about-dot--pos4{bottom:22%;right:18%}

/* about responsive */
@media(max-width:1240px){
    .about-section{padding:80px 48px}
    .about-top{margin-bottom:64px}
    .about-text{font-size:25px;line-height:36px}
    .tl-number{font-size:58px;line-height:64px}
}
@media(max-width:1024px){
    .about-section{padding:72px 32px}
    .about-top{margin-bottom:56px}
    .about-text{font-size:22px;line-height:32px}
    .tl-number{font-size:48px;line-height:53px}
    .tl-label{font-size:19px;line-height:25px}
    .tl-avatars span{width:50px;height:50px}
    .tl-avatars.rect span{width:38px;height:38px}
    .tl-card{padding:0 14px}
    .tl-card:nth-child(1){margin-top:-24px}
    .tl-card:nth-child(3){margin-top:-24px}
    .tl-card:nth-child(2){padding-top:72px}
    .tl-card:nth-child(4){padding-top:72px}
}
@media(max-width:768px){
    .about-section{padding:32px 24px}
    .about-top{flex-direction:column;gap:12px;margin-bottom:44px}
    .about-text{font-size:19px;line-height:28px}
    .about-cta-row{margin-top:40px;gap:16px}
    .timeline-grid{
        grid-template-columns:1fr 1fr;
        gap:40px 0;
    }
    .tl-card{padding:0 16px}
    .tl-card:nth-child(1){margin-top:0;padding-top:0}
    .tl-card:nth-child(2){padding-top:0;margin-top:0}
    .tl-card:nth-child(3){margin-top:0;padding-top:0}
    .tl-card:nth-child(4){padding-top:0;margin-top:0}
    .tl-number{font-size:42px;line-height:47px}
    .tl-label{font-size:17px;line-height:23px}
    .tl-sub{font-size:13px;line-height:18px}
    .tl-avatars span{width:46px;height:46px}
    .tl-avatars.rect span{width:36px;height:36px}
}
@media(max-width:640px){
    .about-section{padding:28px 20px}
    .about-top{margin-bottom:36px}
    .about-text{font-size:17px;line-height:26px}
    .about-year{font-size:12px;padding:5px 12px}
    .about-btn{padding:12px 24px;font-size:14px}
    .about-slots{font-size:13px}
    .tl-number{font-size:36px;line-height:40px}
    .tl-label{font-size:15px;line-height:20px}
    .tl-sub{font-size:12px;line-height:16px}
    .tl-avatars span{width:42px;height:42px;margin-left:-10px}
    .tl-avatars.rect span{width:32px;height:32px}
    .about-cta-row{gap:12px}
}
@media(max-width:480px){
    .about-section{padding:22px 16px}
    .about-top{margin-bottom:28px}
    .about-text{font-size:15px;line-height:23px}
    .about-cta-row{flex-direction:column;align-items:center;gap:12px;margin-top:32px}
    .timeline-grid{
        grid-template-columns:1fr 1fr;
        gap:32px 0;
    }
    .tl-number{font-size:30px;line-height:34px}
    .tl-label{font-size:13px;line-height:18px}
    .tl-sub{font-size:11px;line-height:15px;margin-bottom:12px}
    .tl-avatars{margin-bottom:10px}
    .tl-avatars span{width:36px;height:36px;margin-left:-8px;border-width:2px}
    .tl-avatars.rect span{width:28px;height:28px;border-radius:5px}
    .tl-card{padding:0 10px}
    .tl-arrow-head::before,.tl-arrow-head::after{width:12px}
}
@media(max-width:375px){
    .about-section{padding:18px 12px}
    .about-top{margin-bottom:22px}
    .about-text{font-size:14px;line-height:21px}
    .about-year{font-size:11px;padding:4px 10px}
    .timeline-grid{gap:24px 0}
    .tl-number{font-size:26px;line-height:30px}
    .tl-label{font-size:12px;line-height:16px}
    .tl-sub{font-size:10px;line-height:14px}
    .tl-avatars span{width:30px;height:30px;margin-left:-7px}
    .tl-avatars.rect span{width:24px;height:24px;border-radius:4px}
    .tl-card{padding:0 8px}
    .about-btn{padding:11px 20px;font-size:13px}
}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(50px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.reveal.active{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ── Dashboard Showcase ── */
.dashboard-section{
    background:#030000;
    padding:96px 80px 0;
    width:100%;
    overflow:visible;
    position:relative;
    z-index:1;
}
.dashboard-inner{
    max-width:1240px;
    margin:0 auto;
    text-align:center;
}
.dashboard-heading{
    font-family:'Poppins',sans-serif;
    font-size:68px;
    font-weight:600;
    color:#fff;
    line-height:24px;
    letter-spacing:0%;
    text-align:center;
    margin-bottom:48px;
}
.dashboard-heading span{
    color:var(--orange);
    font-style:italic;
}
.dashboard-desc{
    font-family:'Inter',sans-serif;
    font-size:16px;
    font-weight:400;
    line-height:1.6;
    color:rgba(255,255,255,0.5);
    max-width:620px;
    margin:0 auto 56px;
    font-style:italic;
}
.dashboard-mockup-wrap{
    position:relative;
    width:100%;
    max-width:920px;
    margin:0 auto;
    perspective:1200px;
}
/* glow border removed */
.dashboard-mockup-wrap::before{
    display:none;
}
/* dark bg behind glow for clean edge */
.dashboard-mockup-wrap::after{
    content:'';
    position:absolute;
    inset:2px;
    border-radius:18px;
    background:#0a0f14;
    z-index:1;
}
.dashboard-mockup{
    position:relative;
    z-index:2;
    width:100%;
    border-radius:16px;
    display:block;
    box-shadow:0 40px 100px rgba(0,0,0,0.6);
}
/* decorative streaks on left side */
.dashboard-section .dash-streak{
    display:none;
}

/* dashboard responsive */
@media(max-width:1240px){.dashboard-section{padding:80px 48px 0}.dashboard-heading{font-size:62px;margin-bottom:44px}}
@media(max-width:1024px){
    .dashboard-section{padding:72px 32px 0}
    .dashboard-heading{font-size:56px;margin-bottom:40px}
    .dashboard-desc{font-size:15px;margin-bottom:44px}
}
@media(max-width:768px){
    .dashboard-section{padding:56px 24px 0}
    .dashboard-heading{font-size:44px;margin-bottom:32px}
    .dashboard-desc{font-size:14px;margin-bottom:36px}
}
@media(max-width:640px){
    .dashboard-heading{font-size:38px;margin-bottom:28px}
}
@media(max-width:480px){
    .dashboard-section{padding:40px 16px 0}
    .dashboard-heading{font-size:30px;margin-bottom:24px}
    .dashboard-desc{font-size:13px;margin-bottom:28px}
}
@media(max-width:375px){
    .dashboard-heading{font-size:26px;margin-bottom:20px}
}

/* ── FAQ ── */
.faq-section{
    background:#010101;
    padding:96px 80px;
    width:100%;
    position:relative;
    overflow:hidden;
    margin-top:-160px;
    z-index:2;
    padding-top:80px;
}
.faq-inner{
    max-width:720px;
    margin:0 auto;
    position:relative;
    z-index:2;
}
.faq-heading{
    font-family:'Sk-Modernist',sans-serif;
    font-size:54px;
    font-weight:700;
    color:#fff;
    text-align:center;
    line-height:100%;
    letter-spacing:0%;
    margin-bottom:16px;
}
.faq-desc{
    font-family:'Sk-Modernist','Poppins',sans-serif;
    font-size:20px;
    font-weight:400;
    color:#D9D9D9;
    text-align:center;
    line-height:28.62px;
    letter-spacing:0%;
    max-width:560px;
    margin:0 auto 56px;
}
.faq-list{
    display:flex;
    flex-direction:column;
}
.faq-item{
    border-bottom:1px solid rgba(255,255,255,0.12);
}
.faq-item:first-child{
    border-top:1px solid rgba(255,255,255,0.12);
}
.faq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:22px 0;
    background:none;
    border:none;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    font-size:16px;
    font-weight:500;
    color:#fff;
    text-align:left;
    line-height:1.4;
}
.faq-chevron{
    width:20px;height:20px;
    flex-shrink:0;
    transition:transform .3s ease;
    color:rgba(255,255,255,0.4);
}
.faq-item.active .faq-chevron{
    transform:rotate(180deg);
}
.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease, padding .35s ease;
    padding:0 0;
}
.faq-item.active .faq-answer{
    max-height:200px;
    padding:0 0 20px;
}
.faq-answer p{
    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:400;
    color:rgba(255,255,255,0.45);
    line-height:1.65;
    margin:0;
}
/* decorative orange arcs */
.faq-deco-wrap{
    position:relative;
    z-index:3;
    height:0;
    pointer-events:none;
}
.faq-deco{
    position:absolute;
    pointer-events:none;
    z-index:0;
    background:none;
}
.faq-deco--left{
    left:-180px;
    top:-200px;
    transform:rotate(-90deg);
    width:423.22px;
    height:226.26px;
    border:23.45px solid #FF9777;
    border-radius:117.24px;
    background:none;
}
.faq-deco--right{
    right:-260px;
    bottom:40px;
    top:auto;
    transform:none;
    width:400.94px;
    height:400.94px;
    border:23.45px solid #FF541F;
    border-radius:50%;
    background:none;
    z-index:0;
}
/* faq responsive */
@media(max-width:1240px){
    .faq-section{padding:80px 48px;padding-top:80px}
    .faq-deco--left{width:350px;height:190px;border-width:20px;border-radius:95px;left:-150px;top:-160px}
    .faq-deco--right{width:400px;height:400px;border-width:21px;right:-240px;bottom:30px}
}
@media(max-width:1024px){
    .faq-section{padding:72px 32px;padding-top:80px;margin-top:-120px}
    .faq-heading{font-size:40px}
    .faq-desc{font-size:18px;line-height:26px}
    .faq-deco--left{width:300px;height:160px;border-width:18px;border-radius:80px;left:-130px;top:-120px}
    .faq-deco--right{width:340px;height:340px;border-width:18px;right:-200px;bottom:20px}
}
@media(max-width:768px){
    .faq-section{padding:56px 24px;padding-top:60px;margin-top:-100px}
    .faq-heading{font-size:32px}
    .faq-desc{font-size:17px;line-height:24px;margin-bottom:40px}
    .faq-question{font-size:15px;padding:18px 0}
    .faq-deco--left{width:220px;height:120px;border-width:14px;border-radius:60px;left:-100px;top:-80px}
    .faq-deco--right{width:260px;height:260px;border-width:14px;right:-160px;bottom:10px}
}
@media(max-width:640px){
    .faq-section{margin-top:-80px;padding-top:50px}
    .faq-desc{font-size:16px;line-height:22px;margin-bottom:36px}
    .faq-deco--left{width:180px;height:100px;border-width:12px;border-radius:50px;left:-80px;top:-60px}
    .faq-deco--right{width:200px;height:200px;border-width:12px;right:-130px;bottom:0}
}
@media(max-width:480px){
    .faq-section{padding:40px 16px;padding-top:40px;margin-top:-60px}
    .faq-heading{font-size:26px}
    .faq-desc{font-size:15px;line-height:21px;margin-bottom:32px}
    .faq-question{font-size:14px;padding:16px 0}
    .faq-deco--left{width:140px;height:80px;border-width:10px;border-radius:40px;left:-60px;top:-40px}
    .faq-deco--right{width:150px;height:150px;border-width:10px;right:-100px;bottom:0}
}
@media(max-width:375px){
    .faq-section{margin-top:-40px;padding-top:32px}
    .faq-heading{font-size:22px}
    .faq-desc{font-size:13px;line-height:18px;margin-bottom:28px}
    .faq-deco--left{width:110px;height:60px;border-width:8px;border-radius:30px;left:-50px;top:-30px}
    .faq-deco--right{display:none}
}

/* ── CTA ── */
.cta-section{
    background:#000;
    padding:80px 68px;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.cta-card{
    position:relative;
    max-width:1280px;
    margin:0 auto;
    background:
        url("{% static 'accounts/gradientbg.png' %}") no-repeat 50% 0% / 100% auto,
        radial-gradient(120% 95% at 50% 0%, rgba(255,90,0,0.34) 0%, rgba(180,50,0,0.22) 28%, rgba(80,18,0,0.55) 55%, #0a0504 85%),
        #050304;
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.08);
    padding:31px 60px 50px;
    overflow:hidden;
    z-index:1;
}
/* subtle grid pattern */
.cta-card::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,0.045) 1px,transparent 1px);
    background-size:46px 46px;
    border-radius:28px;
    pointer-events:none;
    z-index:0;
    -webkit-mask-image:radial-gradient(120% 100% at 50% 40%,#000 0%,#000 55%,transparent 85%);
            mask-image:radial-gradient(120% 100% at 50% 40%,#000 0%,#000 55%,transparent 85%);
}
/* diagonal stripes top-right */
.cta-card::after{
    content:'';
    position:absolute;
    top:0;right:0;
    width:38%;height:100%;
    background-image:repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,0.06) 0px,
        rgba(255,255,255,0.06) 1px,
        transparent 1px,
        transparent 16px
    );
    pointer-events:none;
    border-radius:0 28px 28px 0;
    z-index:0;
    -webkit-mask-image:linear-gradient(-45deg,#000 30%,transparent 90%);
            mask-image:linear-gradient(-45deg,#000 30%,transparent 90%);
}
/* white arc decoration on left side of outer section (original) */
.cta-arc{
    position:absolute;
    left:-413px;
    top:35%;
    transform:translateY(-50%);
    width:636.59px;
    height:226.26px;
    border:23.45px solid #ffffff;
    border-radius:117.24px;
    pointer-events:none;
    z-index:3;
    background:none;
}
@media(max-width:1024px){.cta-arc{width:520px;height:185px;border-width:18px;border-radius:92px;left:-340px}}
@media(max-width:768px){.cta-arc{width:400px;height:142px;border-width:14px;border-radius:71px;left:-260px}}
@media(max-width:640px){.cta-arc{width:300px;height:107px;border-width:12px;border-radius:53px;left:-200px}}
.cta-card-inner{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.cta-icon-wrap{
    width:135px;height:135px;
    flex-shrink:0;
    aspect-ratio:1/1;
    background:none;
    border:none;
    box-shadow:none;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 12px;
    position:relative;
    z-index:2;
}
.cta-icon-wrap i{
    font-size:42px;
    color:#ff3d00;
}
.cta-icon-wrap img{
    width:100%;
    height:100%;
    object-fit:contain;
}
.cta-heading{
    font-family:'Poppins',sans-serif;
    font-size:64px;
    font-weight:600;
    color:#fff;
    line-height:1.02;
    letter-spacing:-1px;
    margin-bottom:12px;
    text-align:center;
    padding-top:12px;
}
.cta-desc{
    font-family:'Inter',sans-serif;
    font-size:20px;
    font-weight:400;
    color:rgba(255,255,255,0.82);
    line-height:1.55;
    max-width:780px;
    text-align:center;
    margin:0 auto;
}
.cta-desc .hipaa{color:#ff5a00;font-weight:600}
@media(max-width:1240px){.cta-section{padding:72px 40px}.cta-card{max-width:1100px}.cta-heading{font-size:68px}}
@media(max-width:1024px){.cta-section{padding:64px 24px}.cta-card{padding:64px 40px}.cta-heading{font-size:54px}.cta-icon-wrap{width:115px;height:115px}.cta-icon-wrap i{font-size:36px}}
@media(max-width:768px){.cta-section{padding:48px 16px}.cta-card{padding:56px 28px;border-radius:20px}.cta-heading{font-size:40px}.cta-desc{font-size:16px}.cta-icon-wrap{width:95px;height:95px;margin-bottom:10px}.cta-icon-wrap i{font-size:30px}}
@media(max-width:640px){.cta-section{padding:40px 12px}.cta-card{padding:48px 22px;border-radius:18px}.cta-heading{font-size:32px;margin-bottom:20px}.cta-desc{font-size:14px}}
@media(max-width:480px){.cta-section{padding:32px 10px}.cta-card{padding:40px 18px;border-radius:16px}.cta-heading{font-size:26px}.cta-desc{font-size:13px}.cta-icon-wrap{width:75px;height:75px;margin-bottom:8px}.cta-icon-wrap i{font-size:24px}.cta-arc{display:none}}
@media(max-width:375px){.cta-section{padding:24px 8px}.cta-card{padding:32px 14px;border-radius:14px}.cta-heading{font-size:22px}.cta-desc{font-size:12px}}

/* responsive */@media(max-width:1240px){
    .hero-content{padding:200px 24px 70px}
    .hero-rating{padding:6px 16px 6px 6px;gap:10px;margin-bottom:24px}
    .hero-avatars span{width:30px;height:30px;font-size:11px}
    .hero-desc{max-width:620px;margin:0 auto 28px}
    .btn-primary{padding:12px 28px;font-size:14px}
    .btn-secondary{padding:12px 24px;font-size:14px}
}
@media(max-width:1024px){
    .hero-content{padding:180px 20px 60px}
    .hero-stats-inner{grid-template-columns:1fr 1fr 1fr}
    .hero-stat{padding:32px 16px}
    .hero-rating{margin-bottom:20px}
    .hero-desc{max-width:540px;margin:0 auto 24px}
}
@media(max-width:768px){
    .hero-content{padding:160px 20px 56px}
    .hero-stats-inner{grid-template-columns:1fr 1fr 1fr}
    .hero-stat{padding:24px 12px}
    .hero-rating{margin-bottom:18px;gap:8px}
    .hero-avatars span{width:28px;height:28px;font-size:10px;margin-left:-8px}
    .hero-desc{max-width:460px;margin:0 auto 22px}
    .btn-primary{padding:11px 24px;font-size:13px}
    .btn-secondary{padding:11px 20px;font-size:13px}
    .hero-btns{gap:10px}
}
@media(max-width:640px){
    .hero-content{padding:140px 18px 48px}
    .hero-rating{padding:5px 14px 5px 5px;margin-bottom:16px}
    .hero-stars{font-size:11px}
    .hero-rating-label{font-size:10px}
    .hero-desc{max-width:400px;margin:0 auto 20px}
}
@media(max-width:580px){
    .hero-stats-inner{grid-template-columns:1fr 1fr 1fr}
    .hero-stat{border-right:1px solid rgba(255,255,255,0.08);border-bottom:none;padding:20px 8px}
    .hero-stat:last-child{border-right:none;border-bottom:none}
}
@media(max-width:480px){
    .hero-content{padding:120px 16px 44px}
    .hero-btns{flex-direction:column;width:100%}
    .btn-primary,.btn-secondary{width:100%;justify-content:center;padding:12px 20px}
    .hero-rating{margin-bottom:14px}
    .hero-desc{max-width:320px;margin:0 auto 18px}
    .hero-stat{padding:16px 10px}
}
@media(max-width:375px){
    .hero-content{padding:110px 14px 40px}
    .hero-rating{gap:6px;padding:4px 12px 4px 4px}
    .hero-avatars span{width:24px;height:24px;font-size:9px;margin-left:-6px}
    .hero-desc{max-width:280px;margin:0 auto 16px}
    .hero-btns{gap:8px}
    .hero-stat{padding:14px 6px}
}