.sfft-wrap{
–bg0:#050505; –bg1:#0a0a0a; –bg2:#111111; –bg3:#1a1a1a;
–gold:#ffcc00; –cyan:#00e5ff;
–text:#e9e9ea; –muted:#b8b8bf;
–line:rgba(255,204,0,.22); –line2:rgba(0,229,255,.16);
–shadow:0 18px 55px rgba(0,0,0,.62);
–shadow2:0 14px 40px rgba(0,0,0,.55);
–r12:12px; –r16:16px; –r22:22px;
font-family: ui-sans-serif, system-ui, -apple-system, “Segoe UI”, Roboto, Arial, “Noto Sans”, “Liberation Sans”, sans-serif;
color:var(–text);
background:
radial-gradient(1200px 650px at 20% -10%, rgba(0,229,255,.10), rgba(0,0,0,0) 62%),
radial-gradient(900px 520px at 84% 10%, rgba(255,204,0,.10), rgba(0,0,0,0) 60%),
radial-gradient(900px 520px at 52% 120%, rgba(255,204,0,.08), rgba(0,0,0,0) 55%),
linear-gradient(180deg, var(–bg0), var(–bg1) 28%, var(–bg0));
border:1px solid rgba(255,255,255,.06);
border-radius:18px;
overflow:hidden;
box-shadow: var(–shadow);
}

.sfft-wrap *{ box-sizing:border-box; }
.sfft-wrap a{ color:inherit; text-decoration:none; }
.sfft-wrap p{ margin:0; }
.sfft-wrap h1,.sfft-wrap h2,.sfft-wrap h3{ margin:0; line-height:1.15; }
.sfft-wrap .sfft-container{ width:min(1120px, calc(100% – 40px)); margin:0 auto; }
@media (max-width:520px){ .sfft-wrap .sfft-container{ width:calc(100% – 28px); } }

/* Top Nav */
.sfft-nav{
position:sticky;
top:0;
z-index:50;
background: linear-gradient(180deg, #0a0a0a 0%, rgba(10,10,10,.92) 100%);
backdrop-filter:saturate(1.2) blur(10px);
border-bottom:2px solid var(–gold);
box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
.sfft-nav-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px 0;
flex-wrap:wrap;
}
.sfft-brand{
display:flex;
align-items:center;
gap:12px;
min-width: 240px;
flex: 1 1 260px;
}
.sfft-brand-badge{
width:36px; height:36px; border-radius:10px;
background:
radial-gradient(12px 12px at 30% 28%, rgba(0,229,255,.55), rgba(0,0,0,0) 70%),
radial-gradient(18px 18px at 70% 62%, rgba(255,204,0,.42), rgba(0,0,0,0) 72%),
linear-gradient(180deg, #131313, #070707);
border:1px solid rgba(255,204,0,.35);
box-shadow:
0 0 0 1px rgba(0,229,255,.08) inset,
0 12px 32px rgba(0,0,0,.55);
}
.sfft-brand-text{
font-weight:800;
letter-spacing:.2px;
color: #f3f3f4;
line-height:1.1;
}
.sfft-brand-text small{
display:block;
margin-top:2px;
font-weight:600;
color: rgba(255,204,0,.88);
letter-spacing:.6px;
text-transform:uppercase;
font-size:11px;
}

.sfft-nav-right{
display:flex;
align-items:center;
gap:10px;
flex: 2 1 520px;
justify-content:flex-end;
flex-wrap:wrap;
min-width: 280px;
}

.sfft-lang{
display:flex;
gap:8px;
align-items:center;
padding:6px;
border-radius:999px;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.08);
box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.sfft-pill{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
font-weight:700;
font-size:13px;
letter-spacing:.2px;
border:1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.35);
color: rgba(233,233,234,.92);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
white-space:nowrap;
}
.sfft-pill:hover{
transform: translateY(-1px);
border-color: rgba(0,229,255,.28);
box-shadow: 0 14px 32px rgba(0,0,0,.55);
background: rgba(0,0,0,.48);
}
.sfft-pill.is-active{
background: linear-gradient(180deg, rgba(255,204,0,.22), rgba(255,204,0,.08));
border-color: rgba(255,204,0,.55);
color: var(–gold);
box-shadow: 0 0 0 1px rgba(255,204,0,.12) inset, 0 14px 32px rgba(0,0,0,.55);
}

.sfft-menu{
display:flex;
flex-wrap:wrap;
gap:8px;
justify-content:flex-end;
align-items:center;
flex: 1 1 540px;
}
.sfft-navlink{
display:inline-flex;
align-items:center;
justify-content:center;
padding:9px 12px;
border-radius:999px;
font-weight:700;
font-size:13px;
color: rgba(233,233,234,.92);
border:1px solid rgba(255,255,255,.10);
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
white-space:nowrap;
}
.sfft-navlink:hover{
transform: translateY(-1px);
border-color: rgba(255,204,0,.38);
color: #fff;
box-shadow: 0 14px 34px rgba(0,0,0,.58);
background: linear-gradient(180deg, rgba(255,204,0,.10), rgba(255,255,255,.02));
}
.sfft-navlink.is-home{
border-color: rgba(255,204,0,.32);
color: var(–gold);
background: linear-gradient(180deg, rgba(255,204,0,.10), rgba(255,255,255,.02));
}

/* Hero */
.sfft-hero{
position:relative;
padding: 64px 0 44px;
background:
radial-gradient(900px 420px at 18% 22%, rgba(0,229,255,.12), rgba(0,0,0,0) 60%),
radial-gradient(760px 380px at 86% 36%, rgba(255,204,0,.11), rgba(0,0,0,0) 62%),
linear-gradient(180deg, rgba(17,17,17,.78), rgba(5,5,5,.84));
border-bottom:1px solid rgba(255,255,255,.06);
}
.sfft-hero::before{
content:””;
position:absolute; inset:0;
background:
linear-gradient(90deg, rgba(0,229,255,.08), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(255,204,0,.09)),
radial-gradient(2px 2px at 12% 30%, rgba(255,255,255,.25), rgba(0,0,0,0) 60%),
radial-gradient(2px 2px at 22% 68%, rgba(0,229,255,.28), rgba(0,0,0,0) 60%),
radial-gradient(2px 2px at 78% 40%, rgba(255,204,0,.25), rgba(0,0,0,0) 60%),
radial-gradient(2px 2px at 88% 74%, rgba(255,255,255,.18), rgba(0,0,0,0) 60%);
opacity:.85;
pointer-events:none;
mix-blend-mode:screen;
}
.sfft-hero-grid{
position:relative;
display:grid;
grid-template-columns: 1.15fr .85fr;
gap:22px;
align-items:stretch;
}
@media (max-width:940px){ .sfft-hero-grid{ grid-template-columns:1fr; } }

.sfft-panel{
border-radius: var(–r22);
background:
radial-gradient(700px 280px at 20% 10%, rgba(255,204,0,.10), rgba(0,0,0,0) 55%),
radial-gradient(760px 340px at 86% 30%, rgba(0,229,255,.10), rgba(0,0,0,0) 58%),
linear-gradient(180deg, rgba(26,26,26,.76), rgba(10,10,10,.78));
border:1px solid rgba(255,255,255,.08);
box-shadow: var(–shadow2);
overflow:hidden;
position:relative;
}
.sfft-panel::after{
content:””;
position:absolute; inset:0;
border-radius:inherit;
background:
linear-gradient(90deg, rgba(255,204,0,.22), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,229,255,.16));
opacity:.55;
pointer-events:none;
}
.sfft-panel-inner{ position:relative; padding:28px; }
@media (max-width:520px){ .sfft-panel-inner{ padding:22px; } }

.sfft-eyebrow{
display:inline-flex;
gap:10px;
align-items:center;
padding:8px 12px;
border-radius:999px;
border:1px solid rgba(255,204,0,.28);
background: rgba(0,0,0,.38);
color: rgba(255,204,0,.92);
font-weight:800;
letter-spacing:.7px;
text-transform:uppercase;
font-size:12px;
}
.sfft-eyebrow .dot{
width:8px; height:8px; border-radius:99px;
background: var(–cyan);
box-shadow: 0 0 0 3px rgba(0,229,255,.14);
}

.sfft-hero h1{
margin-top:14px;
font-size: clamp(34px, 4.2vw, 54px);
letter-spacing:.4px;
color: var(–gold);
text-shadow: 0 0 18px rgba(255,204,0,.12);
}
.sfft-tagline{
margin-top:10px;
font-size: clamp(16px, 2vw, 19px);
font-weight:700;
color: rgba(233,233,234,.95);
}
.sfft-subtitle{
margin-top:12px;
color: var(–muted);
font-size:15.5px;
line-height:1.6;
max-width: 70ch;
}

.sfft-cta-row{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:18px;
}
.sfft-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:12px 16px;
border-radius: 999px;
font-weight:900;
letter-spacing:.25px;
border:1px solid rgba(255,255,255,.10);
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
box-shadow: 0 14px 34px rgba(0,0,0,.55);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
white-space:nowrap;
}
.sfft-btn:hover{
transform: translateY(-1px);
box-shadow: 0 18px 44px rgba(0,0,0,.62);
border-color: rgba(0,229,255,.28);
background: linear-gradient(180deg, rgba(0,229,255,.10), rgba(255,255,255,.02));
}
.sfft-btn.primary{
border-color: rgba(255,204,0,.55);
background: linear-gradient(180deg, rgba(255,204,0,.20), rgba(255,204,0,.06));
color: var(–gold);
box-shadow: 0 0 0 1px rgba(255,204,0,.12) inset, 0 18px 46px rgba(0,0,0,.62);
}
.sfft-btn.primary:hover{
border-color: rgba(255,204,0,.85);
background: linear-gradient(180deg, rgba(255,204,0,.26), rgba(0,229,255,.06));
}
.sfft-btn .chev{
width:22px; height:22px;
border-radius:99px;
display:inline-flex;
align-items:center;
justify-content:center;
background: rgba(0,0,0,.38);
border:1px solid rgba(255,255,255,.10);
}
.sfft-btn.primary .chev{
border-color: rgba(255,204,0,.42);
box-shadow: 0 0 18px rgba(255,204,0,.14);
}

/* Hero side panel */
.sfft-side-title{
font-size:13px;
text-transform:uppercase;
letter-spacing:.9px;
color: rgba(0,229,255,.85);
font-weight:900;
}
.sfft-side-list{
margin-top:14px;
display:grid;
gap:10px;
}
.sfft-side-item{
padding:12px 12px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.12));
border:1px solid rgba(255,255,255,.08);
}
.sfft-side-item b{ color: rgba(255,204,0,.92); }
.sfft-side-item span{
display:block;
margin-top:4px;
color: rgba(233,233,234,.86);
line-height:1.5;
font-size:14px;
}

/* Sections */
.sfft-section{
padding: 54px 0;
border-top:1px solid rgba(255,255,255,.06);
background:
radial-gradient(800px 320px at 10% 20%, rgba(0,229,255,.06), rgba(0,0,0,0) 60%),
radial-gradient(900px 380px at 90% 65%, rgba(255,204,0,.06), rgba(0,0,0,0) 60%);
}
.sfft-section.alt{
background:
radial-gradient(900px 380px at 20% 30%, rgba(255,204,0,.06), rgba(0,0,0,0) 60%),
radial-gradient(900px 380px at 80% 70%, rgba(0,229,255,.06), rgba(0,0,0,0) 60%),
linear-gradient(180deg, rgba(10,10,10,.55), rgba(5,5,5,.55));
}
.sfft-section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:18px;
flex-wrap:wrap;
margin-bottom:20px;
}
.sfft-section h2{
font-size: clamp(22px, 2.6vw, 30px);
color: #f0f0f2;
letter-spacing:.2px;
}
.sfft-kicker{
color: rgba(255,204,0,.92);
font-weight:900;
letter-spacing:.8px;
text-transform:uppercase;
font-size:12px;
margin-bottom:8px;
display:inline-block;
}
.sfft-lead{
color: var(–muted);
line-height:1.75;
font-size:16px;
max-width: 82ch;
}

/* Feature cards */
.sfft-grid{
display:grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap:14px;
margin-top:18px;
}
@media (max-width:1020px){ .sfft-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width:780px){ .sfft-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width:520px){ .sfft-grid{ grid-template-columns: 1fr; } }

.sfft-card{
position:relative;
border-radius: var(–r16);
background:
radial-gradient(420px 220px at 16% 14%, rgba(0,229,255,.08), rgba(0,0,0,0) 55%),
radial-gradient(420px 240px at 86% 76%, rgba(255,204,0,.08), rgba(0,0,0,0) 58%),
linear-gradient(180deg, rgba(26,26,26,.70), rgba(10,10,10,.78));
border:1px solid rgba(255,255,255,.09);
box-shadow: 0 16px 46px rgba(0,0,0,.55);
overflow:hidden;
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
min-height: 172px;
}
.sfft-card::before{
content:””;
position:absolute; inset:0;
background: linear-gradient(90deg, rgba(255,204,0,.20), rgba(0,0,0,0) 18%, rgba(0,0,0,0) 82%, rgba(0,229,255,.14));
opacity:.45;
pointer-events:none;
}
.sfft-card:hover{
transform: translateY(-2px);
border-color: rgba(255,204,0,.30);
box-shadow: 0 22px 60px rgba(0,0,0,.66);
}
.sfft-card-inner{ position:relative; padding:18px; display:flex; flex-direction:column; height:100%; }
.sfft-card h3{
font-size:16px;
letter-spacing:.2px;
color: rgba(255,204,0,.92);
margin-bottom:8px;
}
.sfft-card p{
color: rgba(233,233,234,.88);
line-height:1.6;
font-size:14.5px;
flex:1 1 auto;
}
.sfft-card a{
margin-top:14px;
display:inline-flex;
align-items:center;
gap:10px;
font-weight:900;
color: rgba(0,229,255,.88);
align-self:flex-start;
padding:10px 12px;
border-radius: 999px;
border:1px solid rgba(0,229,255,.18);
background: rgba(0,0,0,.30);
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
white-space:nowrap;
}
.sfft-card a:hover{
transform: translateY(-1px);
border-color: rgba(0,229,255,.34);
box-shadow: 0 16px 40px rgba(0,0,0,.60);
background: rgba(0,229,255,.06);
}

/* Language Wings */
.sfft-langgrid{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap:14px;
margin-top:18px;
}
@media (max-width:860px){ .sfft-langgrid{ grid-template-columns: 1fr; } }
.sfft-langcard{
border-radius: var(–r16);
background:
radial-gradient(520px 240px at 18% 12%, rgba(255,204,0,.08), rgba(0,0,0,0) 55%),
radial-gradient(520px 240px at 86% 82%, rgba(0,229,255,.08), rgba(0,0,0,0) 60%),
linear-gradient(180deg, rgba(26,26,26,.68), rgba(10,10,10,.78));
border:1px solid rgba(255,255,255,.09);
box-shadow: 0 18px 54px rgba(0,0,0,.60);
overflow:hidden;
position:relative;
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.sfft-langcard:hover{
transform: translateY(-2px);
border-color: rgba(255,204,0,.26);
box-shadow: 0 24px 68px rgba(0,0,0,.70);
}
.sfft-langcard-inner{ padding:18px; position:relative; display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.sfft-langcard b{
font-size:16px;
color:#f1f1f3;
letter-spacing:.2px;
}
.sfft-langcard small{
display:block;
margin-top:4px;
color: rgba(233,233,234,.78);
font-size:13px;
line-height:1.45;
}
.sfft-langbtn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 12px;
border-radius: 999px;
font-weight:900;
border:1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.32);
color: rgba(233,233,234,.92);
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
white-space:nowrap;
}
.sfft-langbtn:hover{
transform: translateY(-1px);
border-color: rgba(0,229,255,.30);
box-shadow: 0 16px 40px rgba(0,0,0,.62);
background: rgba(0,229,255,.06);
}
.sfft-langbtn.primary{
border-color: rgba(255,204,0,.55);
background: linear-gradient(180deg, rgba(255,204,0,.20), rgba(255,204,0,.06));
color: var(–gold);
}
.sfft-langbtn.primary:hover{
border-color: rgba(255,204,0,.85);
background: linear-gradient(180deg, rgba(255,204,0,.26), rgba(0,229,255,.06));
}

/* Footer */
.sfft-footer{
padding: 30px 0 34px;
background: linear-gradient(180deg, rgba(10,10,10,.75), rgba(5,5,5,.95));
border-top: 1px solid rgba(255,255,255,.08);
}
.sfft-footgrid{
display:grid;
grid-template-columns: 1.3fr .7fr;
gap:18px;
align-items:start;
}
@media (max-width:860px){ .sfft-footgrid{ grid-template-columns:1fr; } }

.sfft-footbrand{
display:flex;
gap:12px;
align-items:flex-start;
}
.sfft-footbrand .mark{
width:40px; height:40px; border-radius:12px;
background:
radial-gradient(14px 14px at 30% 28%, rgba(0,229,255,.55), rgba(0,0,0,0) 70%),
radial-gradient(20px 20px at 70% 62%, rgba(255,204,0,.40), rgba(0,0,0,0) 72%),
linear-gradient(180deg, #141414, #070707);
border:1px solid rgba(255,204,0,.35);
box-shadow: 0 0 0 1px rgba(0,229,255,.08) inset, 0 14px 34px rgba(0,0,0,.62);
flex:0 0 auto;
margin-top:2px;
}
.sfft-footbrand h3{
color: var(–gold);
font-size:16px;
letter-spacing:.25px;
margin-bottom:6px;
}
.sfft-footbrand p{
color: rgba(233,233,234,.82);
line-height:1.65;
font-size:14px;
}
.sfft-footnav{
display:flex;
flex-wrap:wrap;
gap:8px;
justify-content:flex-end;
align-items:center;
padding-top:4px;
}
@media (max-width:860px){ .sfft-footnav{ justify-content:flex-start; } }
.sfft-footnav a{
display:inline-flex;
align-items:center;
justify-content:center;
padding:9px 12px;
border-radius:999px;
font-weight:800;
font-size:13px;
color: rgba(233,233,234,.86);
border:1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.28);
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
white-space:nowrap;
}
.sfft-footnav a:hover{
transform: translateY(-1px);
border-color: rgba(255,204,0,.32);
box-shadow: 0 16px 40px rgba(0,0,0,.62);
background: rgba(255,204,0,.06);
color: #fff;
}

/* Accessibility */
.sfft-wrap a:focus-visible{
outline: 2px solid rgba(0,229,255,.70);
outline-offset: 2px;
border-radius: 999px;
}